Merge pull request #851 from ExtensionEngine/improvement/avatar-border

Change avatar border color on active state

Author: underscope

client/App.vue

@@ -58,7 +58,7 @@ html {
 }
 
 .v-main {
-  background-color: #f5f5f5;
+  background-color: $bg-color-default;
 }
 
 .v-main .view {

client/assets/stylesheets/common/_variables.scss

@@ -10,6 +10,8 @@ $font-family-icons: "Material Design Icons";
 $font-family-primary: Poppins, Helvetica, Arial, sans-serif;
 $font-family-secondary: Roboto, Helvetica, Arial, sans-serif;
 
+$bg-color-default: #f5f5f5;
+
 @mixin highlight($color) {
   border: none;
   box-shadow: 0 0 0 2px $color !important;

client/components/repository/Outline/Toolbar.vue

@@ -24,7 +24,9 @@
           @click="$emit('toggle:graph')"
           :input-value="isGraph"
           icon>
-          <v-icon :color="isGraph && 'secondary lighten-1'">mdi-graph-outline</v-icon>
+          <v-icon :color="isGraph ? 'secondary lighten-2' : 'currentColor'">
+            mdi-graph-outline
+          </v-icon>
         </v-btn>
       </template>
       View graph

client/components/repository/Workflow/Filters/Assignee.vue

@@ -50,6 +50,7 @@ export default {
   }
 
   &.active {
+    border: 2px solid $bg-color-default !important;
     box-shadow: var(--v-secondary-base) 0 0 0 2px;
   }