Merge pull request #2927 from dev-protocol/fix-achievements-passport-ui

feat: add opacity for achievements notification.

src/pages/passport/components/AchivementNotification.svelte

@@ -10,9 +10,10 @@
     achievementName: string
     achievementUrl: string
   }
+
   let connection: UndefinedOr<typeof Connection> = undefined
   let achievements: AchievementClaimable[] = []
-  let showNotification = true
+  let showNotification = false
   let eoa: UndefinedOr<string> = undefined
 
   const fetchAchievement = async (eoa: string) => {
@@ -41,7 +42,7 @@
 
 {#if eoa === address && achievements.length > 0}
   <div
-    class="flex flex-col justify-center items-center gap-[7px] w-full py-2 px-4 absolute rounded-b-2xl bg-[#FDAD00] shadow-lg z-50"
+    class={`flex flex-col justify-center items-center gap-[7px] w-full py-2 px-4 fixed rounded-b-2xl bg-[#FDAD00] shadow-lg z-50 ${showNotification ? '' : 'opacity-65'}`}
   >
     {#if achievements && showNotification}
       {#each achievements as achievement}
@@ -84,18 +85,18 @@
           >
             <path
               d="M18.221,7.206l9.585,9.585c0.879,0.879,0.879,2.317,0,3.195l-0.8,0.801c-0.877,0.878-2.316,0.878-3.194,0  l-7.315-7.315l-7.315,7.315c-0.878,0.878-2.317,0.878-3.194,0l-0.8-0.801c-0.879-0.878-0.879-2.316,0-3.195l9.587-9.585  c0.471-0.472,1.103-0.682,1.723-0.647C17.115,6.524,17.748,6.734,18.221,7.206z"
-              class="fill-[#515151]"
+              class="fill-[#000000]"
             />
           </svg>
         {:else}
           <svg
-            class="w-8 h-8"
+            class="w-8 h-8 animate-bounce"
             viewBox="0 0 32 32"
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
               d="M14.77,23.795L5.185,14.21c-0.879-0.879-0.879-2.317,0-3.195l0.8-0.801c0.877-0.878,2.316-0.878,3.194,0  l7.315,7.315l7.316-7.315c0.878-0.878,2.317-0.878,3.194,0l0.8,0.801c0.879,0.878,0.879,2.316,0,3.195l-9.587,9.585  c-0.471,0.472-1.104,0.682-1.723,0.647C15.875,24.477,15.243,24.267,14.77,23.795z"
-              class="fill-[#515151]"
+              class="fill-[#000000] opacity-inherit"
             />
           </svg>
         {/if}