credit usage fe implementation mobile

resources/js/components/Sidebar/UserHeadline.vue

@@ -1,26 +1,29 @@
 <template>
-    <div class="user-headline">
+    <div class="flex items-center leading-none">
 		<MemberAvatar
-			class="inline-block"
 			:size="52"
 			:is-border="false"
 			:member="user"
 		/>
-        <div class="user-meta">
-            <b class="name">{{ user.data.relationships.settings.data.attributes.name }}</b>
-            <span class="email text-theme">{{ user.data.attributes.email }}</span>
+        <div class="pl-4">
+            <b class="block font-bold mb-1 leading-none">
+				{{ user.data.relationships.settings.data.attributes.name }}
+			</b>
+            <span class="text-theme font-semibold text-sm leading-none">
+				{{ user.data.attributes.email }}
+			</span>
         </div>
     </div>
 </template>
 
 <script>
-	import MemberAvatar from "../FilesView/MemberAvatar";
+	import MemberAvatar from "../FilesView/MemberAvatar"
     import { mapGetters } from 'vuex'
 
     export default {
         name: 'UserHeadline',
         components: {
-			MemberAvatar
+			MemberAvatar,
         },
         computed: {
             ...mapGetters([
@@ -29,28 +32,3 @@
         },
     }
 </script>
-
-<style scoped lang="scss">
-    @import '/resources/sass/vuefilemanager/_variables';
-    @import '/resources/sass/vuefilemanager/_mixins';
-
-    .user-headline {
-        display: flex;
-        align-items: center;
-    }
-
-    .user-meta {
-        padding-left: 20px;
-
-        .name {
-            display: block;
-            @include font-size(18);
-        }
-
-        .email {
-            display: block;
-            @include font-size(12);
-            font-weight: 600;
-        }
-    }
-</style>