Add a subtle icon style

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;

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>

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

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;
+    }
   }
 }

client/src/styles/_mixins.scss

@@ -230,3 +230,8 @@
   resize: none;
   outline: 0;
 }
+
+@mixin default-icon {
+  width: $default-icon-dimension;
+  height: $default-icon-dimension;
+}

client/src/styles/_variables.scss

@@ -82,3 +82,5 @@ $footer-width: 800px;
 $news-width: 550px;
 
 $screen-width: 1200px;
+
+$default-icon-dimension: 25px;