Merge pull request #24 from lfelipessilva/refactor/improve-profile-ux

refactor: improve profile ux
menthorlabs · Jan 9, 2024 · 7119144 · 7119144
2 parents ae38062 + 93f229d
commit 7119144
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 14 deletions.
diff --git a/apps/app/components/atoms/AchievementCard.vue b/apps/app/components/atoms/AchievementCard.vue
@@ -40,7 +40,17 @@ const badges: Record<availableBadges, badgeState> = {
 </script>
 
 <template>
-  <div class="group rounded-md p-4 text-sm">
+  <div
+    v-if="disabled"
+    class="w-full h-full min-h-[190px] flex items-center justify-center"
+  >
+    <p
+      class="px-[10px] py-[2px] bg-zinc-200 font-medium text-zinc-900 text-xs rounded-3xl"
+    >
+      Não disponível
+    </p>
+  </div>
+  <div class="group rounded-md p-4 text-sm" v-if="!disabled">
     <div class="mb-3 aspect-square w-full rounded relative">
       <div
         v-if="!disabled"

diff --git a/apps/app/components/atoms/StatsCard.vue b/apps/app/components/atoms/StatsCard.vue
@@ -8,6 +8,6 @@ const { label = "", value = "" } = defineProps<{
 <template>
   <div>
     <div class="mb-2 text-sm font-normal text-zinc-700">{{ label }}</div>
-    <div class="text-3xl font-bold">{{ value }} <slot /></div>
+    <div class="text-3xl font-bold">{{ value }}</div>
   </div>
 </template>
diff --git a/apps/app/components/molecules/ProfileModal.vue b/apps/app/components/molecules/ProfileModal.vue
@@ -10,6 +10,7 @@ async function updateUser() {
   try {
     loading.value = true;
     await userStore.updateUser();
+    userStore.modalOpened = false;
   } catch (e) {
     toast?.error(e);
   } finally {

diff --git a/apps/app/nuxt.config.ts b/apps/app/nuxt.config.ts
@@ -118,4 +118,4 @@ export default defineNuxtConfig({
     cssPath: "@/styles/main.css",
     viewer: false,
   },
-});
+});
diff --git a/apps/app/pages/profile.vue b/apps/app/pages/profile.vue
@@ -19,25 +19,37 @@ function openProfileModal() {
     <ProfileModal v-if="userStore.user" />
     <div class="mb-10 flex flex-wrap items-center gap-6 px-4 sm:px-8">
       <div
-        class="group h-[160px] w-[160px] min-w-[160px] cursor-pointer overflow-hidden rounded shadow-lg"
+        class="group h-[160px] w-[160px] min-w-[160px] cursor-pointer overflow-hidden rounded shadow-lg relative"
         @click="openProfileModal"
       >
+        <div
+          class="absolute bg-zinc-900 opacity-50 z-10 w-full h-full flex justify-center items-center invisible group-hover:visible"
+        >
+          <font-awesome-icon icon="edit" class="text-lg text-white" />
+        </div>
         <img
           :src="userStore.user?.profileImageUrl"
           class="h-full w-full object-cover object-center transition-all group-hover:scale-110"
         />
       </div>
       <div class="flex-1">
-        <h1
-          class="mb-4 cursor-pointer text-4xl font-extrabold hover:text-zinc-700"
-          @click="openProfileModal"
-        >
-          {{ userStore.user?.fullName || "Sem nome" }}
-        </h1>
+        <div class="group flex items-center mb-4 gap-2">
+          <h1
+            class="cursor-pointer text-4xl font-extrabold hover:text-zinc-700"
+            @click="openProfileModal"
+          >
+            {{ userStore.user?.fullName || "Sem nome" }}
+          </h1>
+          <font-awesome-icon
+            icon="edit"
+            class="text-base text-zinc-500 invisible group-hover:visible"
+          />
+        </div>
         <div class="flex flex-wrap items-center gap-8">
-          <StatsCard label="Conquistas" :value="userStore.badges?.length || 0">
-            <span class="font-normal text-zinc-400">/???</span>
-          </StatsCard>
+          <StatsCard
+            label="Conquistas"
+            :value="userStore.badges?.length || 0"
+          />
           <!-- <StatsCard label="Cursos completos" value="6">
             <span class="font-normal text-zinc-400">/28</span>
           </StatsCard> -->
@@ -61,7 +73,7 @@ function openProfileModal() {
           ]"
           :key="badge"
           disabled
-          :badge="(badge as availableBadges)"
+          :badge="badge as availableBadges"
         />
       </div>
     </div>