fix: user profile UI

fix: user profile UI

client/components/profile.vue

@@ -2,21 +2,26 @@
   v-app(:dark='darkMode').profile
     nav-header
     v-navigation-drawer.pb-0(v-model='profileDrawerShown', app, fixed, clipped, left, permanent)
-      v-list(dense)
-        v-list-item.pt-2(to='/profile')
-          v-list-item-action: v-icon account_circle
-          v-list-item-title Profile
-        v-list-item(to='/preferences')
-          v-list-item-action: v-icon settings
-          v-list-item-title Preferences
-        v-divider.my-2
-        v-subheader My Content
-        v-list-item(to='/pages')
-          v-list-item-action: v-icon pages
-          v-list-item-title Pages
-        v-list-item(to='/comments')
-          v-list-item-action: v-icon question_answer
-          v-list-item-title Comments
+      v-list(dense, nav)
+        v-list-item(to='/profile')
+          v-list-item-action: v-icon mdi-account-badge
+          v-list-item-content
+            v-list-item-title Profile
+        v-list-item(to='/preferences', disabled)
+          v-list-item-action: v-icon(color='grey lighten-1') mdi-settings-outline
+          v-list-item-content
+            v-list-item-title Preferences
+            v-list-item-subtitle.caption.grey--text.text--lighten-1 Coming soon
+        v-list-item(to='/pages', disabled)
+          v-list-item-action: v-icon(color='grey lighten-1') mdi-file-document
+          v-list-item-content
+            v-list-item-title Pages
+            v-list-item-subtitle.caption.grey--text.text--lighten-1 Coming soon
+        v-list-item(to='/comments', disabled)
+          v-list-item-action: v-icon(color='grey lighten-1') mdi-message-reply-text
+          v-list-item-content
+            v-list-item-title Comments
+            v-list-item-subtitle.caption.grey--text.text--lighten-1 Coming soon
 
     v-content
       transition(name='profile-router')
@@ -84,4 +89,14 @@ export default {
   }
 }
 
+.profile-header {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+
+  &-title {
+    margin-left: 1rem;
+  }
+}
+
 </style>

client/components/profile/profile.vue

@@ -1,91 +1,92 @@
 <template lang='pug'>
   v-container(fluid, grid-list-lg)
     v-layout(row wrap)
-      v-flex(xs6)
-        .headline.primary--text Profile
-        .subheading.grey--text Personal profile
-      v-flex(xs6).text-xs-right
-        v-btn(outline, color='primary').mr-0
-          v-icon(left) public
-          span View Public Profile
+      v-flex(xs12)
+        .profile-header
+          img.animated.fadeInUp(src='/svg/icon-profile.svg', alt='Users', style='width: 80px;')
+          .profile-header-title
+            .headline.primary--text.animated.fadeInLeft Profile
+            .subheading.grey--text.animated.fadeInLeft Personal profile
+          v-spacer
+          v-btn.animated.fadeInDown(outlined, color='primary', disabled).mr-0
+            v-icon(left) mdi-earth
+            span View Public Profile
       v-flex(lg6 xs12)
         v-card
           v-toolbar(color='primary', dark, dense, flat)
-            v-toolbar-title
-              .subheading User Details
+            v-toolbar-title.subtitle-1 User Details
           v-card-text
-            v-text-field(label='Name', :counter='255', v-model='name', prepend-icon='person')
-            v-text-field(label='Job Title', :counter='255', prepend-icon='accessibility')
-            v-text-field(label='Location / Office', :counter='255', prepend-icon='location_on')
+            v-text-field(label='Name', :counter='255', v-model='name', prepend-icon='mdi-account')
+            v-text-field(label='Job Title', :counter='255', prepend-icon='mdi-human')
+            v-text-field(label='Location / Office', :counter='255', prepend-icon='mdi-map-marker')
           v-card-chin
             v-spacer
-            v-btn(color='primary')
-              v-icon(left) chevron_right
-              span Save
+            v-btn.px-4(color='success')
+              v-icon(left) mdi-content-save
+              span {{$t('common:actions.save')}}
         v-card.mt-3
-          v-toolbar(color='purple darken-4', dark, dense, flat)
+          v-toolbar(color='primary', dark, dense, flat)
             v-toolbar-title
-              .subheading Authentication
+              .subtitle-1 Authentication
           v-card-text
             v-subheader.pl-0 Provider
             v-toolbar(
               flat
-              :color='darkMode ? "grey darken-2" : "purple lighten-5"'
+              :color='$vuetify.theme.dark ? "grey darken-2" : "purple lighten-5"'
               dense
-              :class='darkMode ? "grey--text text--lighten-1" : "purple--text text--darken-4"'
+              :class='$vuetify.theme.dark ? "grey--text text--lighten-1" : "purple--text text--darken-4"'
               )
-              v-icon(:color='darkMode ? "grey lighten-1" : "purple darken-4"') supervised_user_circle
+              v-icon(:color='$vuetify.theme.dark ? "grey lighten-1" : "purple darken-4"') mdi-shield-lock
               .subheading.ml-3 Local
             v-divider.mt-3
             v-subheader.pl-0 Two-Factor Authentication (2FA)
             .caption.mb-2 2FA adds an extra layer of security by requiring a unique code generated on your smartphone when signing in.
-            v-btn(color='purple darken-4', dark, depressed).ml-0 Enable 2FA
+            v-btn(color='purple darken-4', disabled).ml-0 Enable 2FA
             v-btn(color='purple darken-4', dark, depressed, disabled).ml-0 Disable 2FA
             v-divider.mt-3
             v-subheader.pl-0 Change Password
-            v-text-field(label='Current Password', prepend-icon='last_page')
-            v-text-field(label='New Password', prepend-icon='last_page')
-            v-text-field(label='Confirm New Password', prepend-icon='last_page')
-            v-btn(color='purple darken-4', dark, depressed).ml-0 Change Password
+            v-text-field(label='Current Password', type='password', prepend-icon='mdi-textbox-password')
+            v-text-field(label='New Password', type='password', prepend-icon='mdi-textbox-password')
+            v-text-field(label='Confirm New Password', type='password', prepend-icon='mdi-textbox-password')
+          v-card-chin
+            v-spacer
+            v-btn.px-4(color='purple darken-4', dark)
+              v-icon(left) mdi-progress-check
+              span Change Password
       v-flex(lg6 xs12)
         v-card
           v-toolbar(color='primary', dark, dense, flat)
             v-toolbar-title
-              .subheading Picture
+              .subtitle-1 Picture
           v-card-title
             v-avatar(size='64', color='grey')
-              v-icon(size='64', color='grey lighten-2') account_circle
-            v-btn(depressed).ml-4.elevation-1 Upload Picture
+              v-icon(size='64', color='grey lighten-2') mdi-account-circle
+            v-btn(depressed).mx-4.elevation-1 Upload Picture
             v-btn(depressed, disabled).elevation-1 Remove Picture
         v-card.mt-3
           v-toolbar(color='teal', dark, dense, flat)
             v-toolbar-title
-              .subheading Activity
+              .subtitle-1 Activity
           v-card-text.grey--text.text--darken-2
-            .body-2.grey--text Joined on
-            .body-1: strong January 1st, 2018 at 12:00 AM
-            .body-2.grey--text.mt-3 Profile last updated on
-            .body-1: strong January 1st, 2018 at 12:00 AM
-            .body-2.grey--text.mt-3 Last login on
-            .body-1: strong January 1st, 2018 at 12:00 AM
+            .caption.grey--text Joined on
+            .body-2: strong January 1st, 2018 at 12:00 AM
+            .caption.grey--text.mt-3 Profile last updated on
+            .body-2: strong January 1st, 2018 at 12:00 AM
+            .caption.grey--text.mt-3 Last login on
+            .body-2: strong January 1st, 2018 at 12:00 AM
             v-divider.mt-3
-            .body-2.grey--text.mt-3 Pages created
-            .body-1: strong 0
-            .body-2.grey--text.mt-3 Comments posted
-            .body-1: strong 0
+            .caption.grey--text.mt-3 Pages created
+            .body-2: strong 0
+            .caption.grey--text.mt-3 Comments posted
+            .body-2: strong 0
 </template>
 
 <script>
-/* global siteConfig */
-
 export default {
   data() {
     return {
       name: 'John Doe'
     }
-  },
-  computed: {
-    darkMode() { return siteConfig.darkMode }
   }
 }
 </script>