apachegh-31: Improve the profile button in the header

dinukadesilva · Oct 7, 2020 · bc174bc · bc174bc
1 parent 75d65a9
commit bc174bc
Showing 1 changed file with 15 additions and 2 deletions.
diff --git a/custos-demo-gateway/src/components/workspace/Header.vue b/custos-demo-gateway/src/components/workspace/Header.vue
@@ -9,7 +9,11 @@
             <div class="email">[email protected]</div>
         </div>
 
-        <b-dropdown right class="ml-2" text="">
+
+        <b-dropdown right class="ml-2" text="" no-caret toggle-class="user-avatar-button">
+            <template slot="button-content">
+                <b-icon icon="person-fill"></b-icon>
+            </template>
             <b-dropdown-item href="#" disabled>Profile</b-dropdown-item>
             <b-dropdown-item v-on:click="logout">Logout</b-dropdown-item>
         </b-dropdown>
@@ -54,7 +58,7 @@
     }
 </script>
 
-<style scoped>
+<style>
     .header {
         display: flex;
     }
@@ -99,4 +103,13 @@
         color: #203a43;
     }
 
+    .user-avatar-button {
+        border-radius: 30px;
+        width: 35px;
+        height: 35px;
+        padding: 0px;
+        line-height: 0px;
+        font-size: 15px;
+    }
+
 </style>