fix: not available badge

menthorlabs · Jan 27, 2024 · 0bc5281 · 0bc5281
1 parent 6205751
commit 0bc5281
Showing 1 changed file with 11 additions and 11 deletions.
diff --git a/apps/app/components/atoms/AchievementCard.vue b/apps/app/components/atoms/AchievementCard.vue
@@ -40,18 +40,18 @@ const badges: Record<availableBadges, badgeState> = {
 </script>
 
 <template>
-  <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="group rounded-md p-4 text-sm">
     <div class="mb-3 aspect-square w-full rounded relative">
+      <div
+        v-if="disabled"
+        class="absolute top-0 left-0 w-full h-full flex items-center justify-center"
+      >
+        <p
+          class="px-[10px] py-[2px] bg-zinc-900/10 font-medium text-zinc-900 text-xs rounded-3xl z-10"
+        >
+          Não disponível
+        </p>
+      </div>
       <div
         v-if="!disabled"
         class="absolute w-full h-full left-0 top-0 bg-[linear-gradient(45deg,transparent_25%,rgba(256,256,256,.5)_50%,transparent_75%,transparent_100%)] overflow-hidden bg-[length:200%_200%,100%_100%] bg-[position:-100%_0,0_0] bg-no-repeat duration-0 ease-in-out transition-[background-position_0s] group-hover:bg-[position:200%_0,0_0] group-hover:duration-[1500ms]"