refactor(web): supporter badge (#11656)

* refactor(web): supporter badge

* add style lang

web/src/app.css

@@ -142,46 +142,4 @@ input:focus-visible {
   .scrollbar-stable {
     scrollbar-gutter: stable both-edges;
   }
-
-  /* Supporter Effect */
-  .supporter-effect {
-    position: relative;
-    border: 0px solid transparent;
-    background-clip: padding-box;
-    animation: gradient 10s ease infinite;
-    z-index: 1;
-  }
-
-  .supporter-effect:hover:after {
-    position: absolute;
-    top: 0px;
-    bottom: 0px;
-    left: 0px;
-    right: 0px;
-    background: linear-gradient(
-      to right,
-      rgba(16, 132, 254, 0.25),
-      rgba(229, 125, 175, 0.25),
-      rgba(254, 36, 29, 0.25),
-      rgba(255, 183, 0, 0.25),
-      rgba(22, 193, 68, 0.25)
-    );
-    content: '';
-    border-radius: 8px;
-    animation: gradient 10s ease infinite;
-    background-size: 400% 400%;
-    z-index: -1;
-  }
-
-  @keyframes gradient {
-    0% {
-      background-position: 0% 50%;
-    }
-    50% {
-      background-position: 100% 50%;
-    }
-    100% {
-      background-position: 0% 50%;
-    }
-  }
 }

web/src/lib/components/shared-components/side-bar/purchase-info.svelte

@@ -16,6 +16,7 @@
   import { handleError } from '$lib/utils/handle-error';
   import { preferences } from '$lib/stores/user.store';
   import { getButtonVisibility } from '$lib/utils/purchase-utils';
+  import SupporterBadge from '$lib/components/shared-components/side-bar/supporter-badge.svelte';
 
   let showMessage = false;
   let isOpen = false;
@@ -83,14 +84,7 @@
         class="w-full"
         type="button"
       >
-        <div
+        <SupporterBadge />
-          class="flex gap-1 mt-2 place-items-center dark:bg-immich-dark-primary/10 bg-gray-200/50 p-2 border supporter-effect rounded-lg transition-all"
-        >
-          <div class="h-6 w-6">
-            <ImmichLogo noText />
-          </div>
-          <p class="dark:text-gray-100">{$t('purchase_account_info')}</p>
-        </div>
       </button>
     {:else if !$isPurchased && showBuyButton}
       <button

web/src/lib/components/shared-components/side-bar/supporter-badge.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import { t } from 'svelte-i18n';
+  import ImmichLogo from '../immich-logo.svelte';
+
+  export let centered = false;
+  export let logoSize: 'sm' | 'lg' = 'sm';
+</script>
+
+<div
+  class="flex gap-1 mt-2 place-items-center dark:bg-immich-dark-primary/10 bg-gray-200/50 p-2 rounded-lg bg-clip-padding border border-transparent relative supporter-effect"
+  class:place-content-center={centered}
+>
+  <ImmichLogo class={logoSize === 'sm' ? 'size-6' : 'size-8'} noText />
+  <p class="dark:text-gray-100">{$t('purchase_account_info')}</p>
+</div>
+
+<style lang="postcss">
+  .supporter-effect::after {
+    @apply absolute inset-0 rounded-lg opacity-0 transition-opacity content-[''];
+  }
+
+  .supporter-effect:hover::after {
+    @apply opacity-100;
+    background: linear-gradient(
+      to right,
+      rgba(16, 132, 254, 0.25),
+      rgba(229, 125, 175, 0.25),
+      rgba(254, 36, 29, 0.25),
+      rgba(255, 183, 0, 0.25),
+      rgba(22, 193, 68, 0.25)
+    );
+    animation: gradient 10s ease infinite;
+    background-size: 400% 400%;
+  }
+
+  @keyframes gradient {
+    0% {
+      background-position: 0% 50%;
+    }
+    50% {
+      background-position: 100% 50%;
+    }
+    100% {
+      background-position: 0% 50%;
+    }
+  }
+</style>

web/src/routes/(user)/buy/+page.svelte

@@ -9,7 +9,7 @@
   import Icon from '$lib/components/elements/icon.svelte';
   import { mdiAlertCircleOutline } from '@mdi/js';
   import { purchaseStore } from '$lib/stores/purchase.store';
-  import ImmichLogo from '$lib/components/shared-components/immich-logo.svelte';
+  import SupporterBadge from '$lib/components/shared-components/side-bar/supporter-badge.svelte';
 
   export let data: PageData;
   let showLicenseActivated = false;
@@ -30,14 +30,7 @@
       {/if}
 
       {#if $isPurchased}
-        <div
+        <SupporterBadge logoSize="lg" centered />
-          class="flex gap-1 mt-2 place-items-center place-content-center dark:bg-immich-dark-primary/10 bg-gray-200/50 p-2 border rounded-lg dark:text-white supporter-effect"
-        >
-          <div class="h-8 w-8">
-            <ImmichLogo noText />
-          </div>
-          <p>{$t('purchase_account_info')}</p>
-        </div>
       {/if}
 
       {#if showLicenseActivated || data.isActivated === true}