chore: lower case text + facelift (#25263)

* chore: lower case text

* wip

* wip

* pr feedback

* pr feedback

web/src/lib/components/user-settings-page/device-list.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { handleError } from '$lib/utils/handle-error';
   import { deleteAllSessions, deleteSession, getSessions, type SessionResponseDto } from '@immich/sdk';
-  import { Button, modalManager, toastManager } from '@immich/ui';
+  import { Button, modalManager, Text, toastManager } from '@immich/ui';
   import { t } from 'svelte-i18n';
   import DeviceCard from './device-card.svelte';
 
@@ -52,17 +52,17 @@
 <section class="my-4">
   {#if currentSession}
     <div class="mb-6">
-      <h3 class="uppercase mb-2 text-xs font-medium text-primary">
+      <Text class="mb-2" fontWeight="medium" size="tiny" color="primary">
         {$t('current_device')}
-      </h3>
+      </Text>
       <DeviceCard session={currentSession} />
     </div>
   {/if}
   {#if otherSessions.length > 0}
     <div class="mb-6">
-      <h3 class="uppercase mb-2 text-xs font-medium text-primary">
+      <Text class="mb-2" fontWeight="medium" size="tiny" color="primary">
         {$t('other_devices')}
-      </h3>
+      </Text>
       {#each otherSessions as session, index (session.id)}
         <DeviceCard {session} onDelete={() => handleDelete(session)} />
         {#if index !== otherSessions.length - 1}
@@ -70,9 +70,11 @@
         {/if}
       {/each}
     </div>
-    <h3 class="uppercase mb-2 text-xs font-medium text-primary">
-      {$t('log_out_all_devices')}
-    </h3>
+
+    <div class="my-3">
+      <hr />
+    </div>
+
     <div class="flex justify-end">
       <Button shape="round" color="danger" size="small" onclick={handleDeleteAll}>{$t('log_out_all_devices')}</Button>
     </div>

web/src/lib/components/user-settings-page/partner-settings.svelte

@@ -12,7 +12,7 @@
     type PartnerResponseDto,
     type UserResponseDto,
   } from '@immich/sdk';
-  import { Button, Icon, IconButton, modalManager } from '@immich/ui';
+  import { Button, Icon, IconButton, modalManager, Text } from '@immich/ui';
   import { mdiCheck, mdiClose } from '@mdi/js';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
@@ -157,10 +157,12 @@
           <!-- I am sharing my assets with this user -->
           {#if partner.sharedByMe}
             <hr class="my-4 border border-gray-200 dark:border-gray-700" />
-            <p class="uppercase text-xs font-medium my-4">
+            <Text class="my-4" size="small" fontWeight="medium">
               {$t('shared_with_partner', { values: { partner: partner.user.name } })}
-            </p>
-            <p class="text-md">{$t('partner_can_access', { values: { partner: partner.user.name } })}</p>
+            </Text>
+            <Text size="tiny" fontWeight="medium"
+              >{$t('partner_can_access', { values: { partner: partner.user.name } })}</Text
+            >
             <ul class="text-sm">
               <li class="flex gap-2 place-items-center py-1 mt-2">
                 <Icon icon={mdiCheck} />
@@ -176,9 +178,10 @@
           <!-- this user is sharing assets with me -->
           {#if partner.sharedWithMe}
             <hr class="my-4 border border-gray-200 dark:border-gray-700" />
-            <p class="uppercase text-xs font-medium my-4">
+            <Text class="my-4" size="small" fontWeight="medium">
               {$t('shared_from_partner', { values: { partner: partner.user.name } })}
-            </p>
+            </Text>
+
             <SettingSwitch
               title={$t('show_in_timeline')}
               subtitle={$t('show_in_timeline_setting_description')}