refactor: buy immich (#18289)

* refactor: buy container

* refactor: buy immich

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

@@ -3,13 +3,13 @@
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
   import LicenseActivationSuccess from '$lib/components/shared-components/purchasing/purchase-activation-success.svelte';
   import LicenseContent from '$lib/components/shared-components/purchasing/purchase-content.svelte';
+  import SupporterBadge from '$lib/components/shared-components/side-bar/supporter-badge.svelte';
   import { AppRoute } from '$lib/constants';
+  import { purchaseStore } from '$lib/stores/purchase.store';
+  import { Alert, Container, Stack } from '@immich/ui';
+  import { mdiAlertCircleOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import type { PageData } from './$types';
-  import Icon from '$lib/components/elements/icon.svelte';
-  import { mdiAlertCircleOutline } from '@mdi/js';
-  import { purchaseStore } from '$lib/stores/purchase.store';
-  import SupporterBadge from '$lib/components/shared-components/side-bar/supporter-badge.svelte';
 
   interface Props {
     data: PageData;
@@ -21,16 +21,10 @@
 </script>
 
 <UserPageLayout title={$t('buy')}>
-  <section class="mx-4 flex place-content-center">
-    <div class="w-full max-w-3xl">
+  <Container size="medium" center>
+    <Stack gap={4} class="mt-4">
       {#if data.isActivated === false}
-        <div
-          class="bg-red-100 text-red-700 px-4 py-3 rounded-md flex place-items-center place-content-center gap-2"
-          role="alert"
-        >
-          <Icon path={mdiAlertCircleOutline} size="18" />
-          <p>{$t('purchase_failed_activation')}</p>
-        </div>
+        <Alert icon={mdiAlertCircleOutline} color="danger" title={$t('purchase_failed_activation')} />
       {/if}
 
       {#if $isPurchased}
@@ -46,6 +40,6 @@
           }}
         />
       {/if}
-    </div>
-  </section>
+    </Stack>
+  </Container>
 </UserPageLayout>