From 70d632e3926cd61682be0e73e8700910faa448c3 Mon Sep 17 00:00:00 2001
From: Alina Beck <alina.beck@mail.com>
Date: Thu, 9 Jan 2020 14:47:14 +0530
Subject: [PATCH] use scss tokens for counter icon and loading spinner

---
 webapp/assets/_new/styles/tokens.scss                  |  7 +++++++
 .../_new/generic/CounterIcon/CounterIcon.vue           | 10 +++++-----
 .../_new/generic/LoadingSpinner/LoadingSpinner.vue     |  2 +-
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/webapp/assets/_new/styles/tokens.scss b/webapp/assets/_new/styles/tokens.scss
index 29ba0286d..36c6d8d5b 100644
--- a/webapp/assets/_new/styles/tokens.scss
+++ b/webapp/assets/_new/styles/tokens.scss
@@ -258,6 +258,13 @@ $size-avatar-x-large: 114px;
  $size-button-base: 36px;
  $size-button-small: 26px;
 
+/**
+ * @tokens Size Buttons
+ * @presenter Spacing
+ */
+
+ $size-icon-base: 16px;
+
 /**
  * @tokens Shadow
  * @presenter Shadow
diff --git a/webapp/components/_new/generic/CounterIcon/CounterIcon.vue b/webapp/components/_new/generic/CounterIcon/CounterIcon.vue
index 4f2d79a58..00b4b9c53 100644
--- a/webapp/components/_new/generic/CounterIcon/CounterIcon.vue
+++ b/webapp/components/_new/generic/CounterIcon/CounterIcon.vue
@@ -33,21 +33,21 @@ export default {
 
   > .count {
     position: absolute;
-    top: -4px;
+    top: -$space-xx-small;
     right: 0;
 
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    height: 16px;
-    min-width: 16px;
-    padding: 3px;
+    height: $size-icon-base;
+    min-width: $size-icon-base;
+    padding: 3px; // magic number to center count
     border-radius: 50%;
     transform: translateX(50%);
 
     color: $color-neutral-100;
     background-color: $color-primary;
-    font-size: 10px;
+    font-size: 10px; // magic number to center count
     line-height: 1;
     text-align: center;
 
diff --git a/webapp/components/_new/generic/LoadingSpinner/LoadingSpinner.vue b/webapp/components/_new/generic/LoadingSpinner/LoadingSpinner.vue
index 74e9d91bc..529a029d9 100644
--- a/webapp/components/_new/generic/LoadingSpinner/LoadingSpinner.vue
+++ b/webapp/components/_new/generic/LoadingSpinner/LoadingSpinner.vue
@@ -12,7 +12,7 @@ export default {
 
 <style lang="scss">
 .loading-spinner {
-  height: 36px;
+  height: $size-button-base;
   overflow: hidden;
   stroke: currentColor;
   animation: rotate 16s linear infinite;