From d1250e76a4e14559fa3f4abce68b302b789aad68 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Tue, 15 Feb 2022 17:22:36 +0100
Subject: [PATCH] Add a subtle icon style

---
 client/src/components/icons/BookmarkIcon.vue           |  2 +-
 .../src/components/objective-groups/ObjectiveForm.vue  |  2 +-
 client/src/components/profile/Profile.vue              |  2 +-
 client/src/styles/_buttons.scss                        | 10 +++++++---
 client/src/styles/_mixins.scss                         |  5 +++++
 client/src/styles/_variables.scss                      |  2 ++
 6 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/client/src/components/icons/BookmarkIcon.vue b/client/src/components/icons/BookmarkIcon.vue
index b2d749be..0c355b32 100644
--- a/client/src/components/icons/BookmarkIcon.vue
+++ b/client/src/components/icons/BookmarkIcon.vue
@@ -24,7 +24,7 @@
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
+  @import "~styles/variables";
 
   .bookmark-icon {
     width: 24px;
diff --git a/client/src/components/objective-groups/ObjectiveForm.vue b/client/src/components/objective-groups/ObjectiveForm.vue
index 28135d78..351b3f04 100644
--- a/client/src/components/objective-groups/ObjectiveForm.vue
+++ b/client/src/components/objective-groups/ObjectiveForm.vue
@@ -10,7 +10,7 @@
       class="icon-button"
       @click="$emit('delete')"
     >
-      <trash-icon class="icon-button__icon" />
+      <trash-icon class="icon-button__icon icon-button__icon--subtle" />
     </a>
   </div>
 </template>
diff --git a/client/src/components/profile/Profile.vue b/client/src/components/profile/Profile.vue
index cfc4bf60..16bdbdcc 100644
--- a/client/src/components/profile/Profile.vue
+++ b/client/src/components/profile/Profile.vue
@@ -14,7 +14,7 @@
         class="profile-avatar__remove icon-button"
         @click="deleteAvatar()"
       >
-        <trash-icon class="profile-avatar__remove-icon icon-button__icon" />
+        <trash-icon class="profile-avatar__remove-icon icon-button__icon icon-button__icon--subtle" />
       </a>
     </div>
     <avatar-upload-form
diff --git a/client/src/styles/_buttons.scss b/client/src/styles/_buttons.scss
index 1ce77ed3..438088f9 100644
--- a/client/src/styles/_buttons.scss
+++ b/client/src/styles/_buttons.scss
@@ -46,12 +46,16 @@
   align-items: center;
   width: 50px;
   height: 50px;
+  border: 0;
+  background: transparent;
 
   &__icon {
-    width: 25px;
-    height: 25px;
-    fill: $color-silver-dark;
+    @include default-icon;
     cursor: pointer;
     justify-self: center;
+
+    &--subtle {
+       fill: $color-silver-dark;
+    }
   }
 }
diff --git a/client/src/styles/_mixins.scss b/client/src/styles/_mixins.scss
index a9fe6b34..a1760824 100644
--- a/client/src/styles/_mixins.scss
+++ b/client/src/styles/_mixins.scss
@@ -230,3 +230,8 @@
   resize: none;
   outline: 0;
 }
+
+@mixin default-icon {
+  width: $default-icon-dimension;
+  height: $default-icon-dimension;
+}
diff --git a/client/src/styles/_variables.scss b/client/src/styles/_variables.scss
index 278749dd..92128c56 100644
--- a/client/src/styles/_variables.scss
+++ b/client/src/styles/_variables.scss
@@ -82,3 +82,5 @@ $footer-width: 800px;
 $news-width: 550px;
 
 $screen-width: 1200px;
+
+$default-icon-dimension: 25px;