refactor: buttons with leading icons (#107)

immich-app · Feb 6, 2025 · 42bdf7a · 42bdf7a
1 parent a53b6fd
commit 42bdf7a
Show file tree

Hide file tree

Showing 14 changed files with 85 additions and 146 deletions.
diff --git a/apps/buy.immich.app/routes/+page.svelte b/apps/buy.immich.app/routes/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import FullPageLayout from '$lib/components/FullPageLayout.svelte';
+  import FullPageLayout from '$lib/layouts/FullPageLayout.svelte';
   import { getCallbackUrl, ImmichLicense } from '$lib/utils/license';
   import { Button, Heading, Icon, Logo, Stack, SupporterBadge, Text } from '@immich/ui';
   import { mdiAccount, mdiCheckCircleOutline, mdiServer } from '@mdi/js';
@@ -8,7 +8,7 @@
   const userFeatures = ['For an individual', 'Lifetime purchase', 'Supporter status'];
 </script>
 
-<FullPageLayout width="md">
+<FullPageLayout size="medium">
   <Stack gap={4}>
     <SupporterBadge effect="always">
       <Logo size="large" variant="icon" />

diff --git a/apps/buy.immich.app/routes/claim/[[id]]/+page.svelte b/apps/buy.immich.app/routes/claim/[[id]]/+page.svelte
@@ -3,7 +3,7 @@
   import LicenseKey from '$lib/components/LicenseKey.svelte';
   import DefaultPageLayout from '$lib/layouts/DefaultPageLayout.svelte';
   import { getAuthorizeUrl } from '$lib/utils/oauth';
-  import { Alert, Button, Heading, Icon, Link, Stack, Text } from '@immich/ui';
+  import { Alert, Button, Heading, Link, Stack, Text } from '@immich/ui';
   import { mdiGithub } from '@mdi/js';
   import type { PageData } from './$types';
 
@@ -83,8 +83,7 @@
     {:else}
       <section>
         <Stack align="start" gap={4}>
-          <Button onclick={handleLogin} color="secondary" variant="outline">
-            <Icon icon={mdiGithub} size="2em" />
+          <Button leadingIcon={mdiGithub} onclick={handleLogin} color="secondary" variant="outline">
             <Text>Login with GitHub</Text>
           </Button>
           {#if errorMessage}

diff --git a/apps/get.immich.app/routes/+page.svelte b/apps/get.immich.app/routes/+page.svelte
@@ -2,7 +2,7 @@
   import portainerIcon from '$lib/assets/img/portainer.svg';
   import truenasIcon from '$lib/assets/img/truenas-scale.svg';
   import unraidIcon from '$lib/assets/img/unraid.svg';
-  import FullPageLayout from '$lib/components/FullPageLayout.svelte';
+  import FullPageLayout from '$lib/layouts/FullPageLayout.svelte';
   import {
     Button,
     Card,
@@ -25,7 +25,7 @@
   import { mdiAndroid, mdiDocker } from '@mdi/js';
 </script>
 
-<FullPageLayout width="lg">
+<FullPageLayout size="large">
   <Stack gap={8}>
     <SupporterBadge effect="always">
       <Logo size="large" variant="icon" />

diff --git a/apps/get.immich.app/routes/docker-compose/+page.svelte b/apps/get.immich.app/routes/docker-compose/+page.svelte
@@ -9,7 +9,6 @@
     CardTitle,
     Field,
     Heading,
-    Icon,
     Input,
     PasswordInput,
     Stack,
@@ -99,14 +98,8 @@
         <Text>Generate a docker-compose.yaml file for Immich</Text>
       </div>
       <div class="flex gap-2 items-center">
-        <Button shape="round" onclick={() => handleShare()}>
-          <Icon icon={mdiShareVariantOutline} size="1.5rem" />
-          <span>Share</span>
-        </Button>
-        <Button shape="round" onclick={() => handleDownload()}>
-          <Icon icon={mdiDownload} size="1.5rem" />
-          <span>Download</span>
-        </Button>
+        <Button leadingIcon={mdiShareVariantOutline} shape="round" onclick={() => handleShare()}>Share</Button>
+        <Button leadingIcon={mdiDownload} shape="round" onclick={() => handleDownload()}>Download</Button>
       </div>
     </div>
 

diff --git a/apps/my.immich.app/routes/[...rest]/+page.svelte b/apps/my.immich.app/routes/[...rest]/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { StorageKey } from '$lib';
-  import FullPageLayout from '$lib/components/FullPageLayout.svelte';
+  import FullPageLayout from '$lib/layouts/FullPageLayout.svelte';
   import {
     Button,
     Card,
@@ -9,7 +9,6 @@
     CardHeader,
     CardTitle,
     Heading,
-    Icon,
     Input,
     Logo,
     Stack,
@@ -47,7 +46,7 @@
   };
 </script>
 
-<FullPageLayout width="sm">
+<FullPageLayout size="small">
   <Stack gap={8} class="min-h-[75vh]">
     <SupporterBadge effect="always">
       <Logo size="large" variant="icon" />
@@ -65,9 +64,13 @@
           <Stack gap={4}>
             <Input type="text" placeholder="https://demo.immich.app/" bind:value={instanceUrl} oninput={handleChange} />
             <div class="flex justify-end">
-              <Button type="submit" class="w-full sm:w-auto" disabled={saved}>
+              <Button
+                leadingIcon={saved ? mdiCheckCircleOutline : undefined}
+                type="submit"
+                class="w-full sm:w-auto"
+                disabled={saved}
+              >
                 {#if saved}
-                  <Icon icon={mdiCheckCircleOutline} />
                   Saved!
                 {:else}
                   {targetUrl ? 'Save & Redirect' : 'Save'}

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,7 +15,7 @@
     "format:fix": "prettier --write ."
   },
   "devDependencies": {
-    "@immich/ui": "^0.15.0",
+    "@immich/ui": "^0.16.0",
     "@sveltejs/adapter-static": "^3.0.6",
     "@sveltejs/kit": "^2.12.1",
     "@sveltejs/vite-plugin-svelte": "^5.0.2",

diff --git a/src/lib/app.css b/src/lib/app.css
@@ -54,11 +54,13 @@
   font-family: 'Overpass', sans-serif;
 }
 
-:root.dark {
+:root.dark,
+body.dark {
   color-scheme: dark;
 }
 
-:root:not(.dark) {
+:root:not(.dark),
+body:not(.dark) {
   color-scheme: light;
 }
 
@@ -72,13 +74,3 @@ body {
   margin: 0;
   color: #3a3a3a;
 }
-
-@layer utilities {
-  .immich-gradient {
-    background:
-      linear-gradient(to bottom right, #ededed 0%, #f0f1fc 50%) bottom right / 50% 50% no-repeat,
-      linear-gradient(to bottom left, #ededed 0%, #f0f1fc 50%) bottom left / 50% 50% no-repeat,
-      linear-gradient(to top left, #ededed 0%, #f0f1fc 50%) top left / 50% 50% no-repeat,
-      linear-gradient(to top right, #ededed 0%, #f0f1fc 50%) top right / 50% 50% no-repeat;
-  }
-}
diff --git a/src/lib/components/CodePreview.svelte b/src/lib/components/CodePreview.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Button, Card, Heading, HStack, Icon } from '@immich/ui';
+  import { Button, Card, Heading, HStack } from '@immich/ui';
   import { mdiPencilOutline, mdiXml } from '@mdi/js';
   import type { Snippet } from 'svelte';
   import { HighlightSvelte, LineNumbers } from 'svelte-highlight';
@@ -28,23 +28,20 @@
     <Heading size="medium">docker-compose.yaml</Heading>
     <HStack gap={1} class="lg:border rounded-xl p-1">
       <Button
+        leadingIcon={mdiPencilOutline}
         disabled={viewMode === 'children'}
         onclick={handleToggle}
         size="small"
         class={viewMode === 'children' ? 'hidden md:flex' : ''}
-      >
-        <Icon icon={mdiPencilOutline} size="1.5em" />
-        <span>Configure</span>
+        >Configure
       </Button>
       <Button
+        leadingIcon={mdiXml}
         disabled={viewMode === 'code'}
         onclick={handleToggle}
         size="small"
-        class={viewMode === 'code' ? 'hidden md:flex' : ''}
+        class={viewMode === 'code' ? 'hidden md:flex' : ''}>View</Button
       >
-        <Icon icon={mdiXml} size="1.5em" />
-        <span>View</span>
-      </Button>
     </HStack>
   </div>
   <div class={viewMode === 'children' ? 'px-4 pb-4' : ''}>

diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Card, Heading, HStack, Icon, IconButton, Link, Stack, Text, theme, Theme, VStack } from '@immich/ui';
+  import { Card, Heading, HStack, Icon, Link, Stack, Text, ThemeSwitcher, VStack } from '@immich/ui';
   import {
     mdiAndroid,
     mdiApple,
@@ -10,16 +10,8 @@
     mdiReddit,
     mdiServerOutline,
     mdiShoppingOutline,
-    mdiWeatherNight,
-    mdiWeatherSunny,
     mdiWeb,
   } from '@mdi/js';
-
-  const handleToggleTheme = () => {
-    theme.value = theme.value === Theme.Dark ? Theme.Light : Theme.Dark;
-  };
-
-  const themeIcon = $derived(theme.value === Theme.Light ? mdiWeatherSunny : mdiWeatherNight);
 </script>
 
 <div class="bg-dark/10 rounded-t-3xl mt-16 p-8">
@@ -122,14 +114,7 @@
       <VStack class="text-center">
         <Text size="large">This project is available under GNU AGPL v3 license.</Text>
         <Text color="muted" variant="italic">Privacy should not be a luxury</Text>
-        <IconButton
-          size="large"
-          shape="round"
-          color="secondary"
-          variant="ghost"
-          icon={themeIcon}
-          onclick={handleToggleTheme}
-        />
+        <ThemeSwitcher color="secondary" />
       </VStack>
     </Stack>
   </div>

diff --git a/src/lib/components/FullPageLayout.svelte b/src/lib/components/FullPageLayout.svelte
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
@@ -2,8 +2,8 @@
   import { afterNavigate } from '$app/navigation';
   import { page } from '$app/state';
   import type { HeaderItem } from '$lib/types';
-  import { Button, CloseButton, HStack, IconButton, Logo, NavbarItem, syncToDom, theme, Theme } from '@immich/ui';
-  import { mdiMenu, mdiWeatherNight, mdiWeatherSunny } from '@mdi/js';
+  import { Button, CloseButton, HStack, IconButton, Logo, NavbarItem, syncToDom, ThemeSwitcher } from '@immich/ui';
+  import { mdiMenu } from '@mdi/js';
   import type { Snippet } from 'svelte';
 
   type Props = {
@@ -16,12 +16,6 @@
 
   let { items, children }: Props = $props();
 
-  const handleToggleTheme = () => {
-    theme.value = theme.value === Theme.Dark ? Theme.Light : Theme.Dark;
-  };
-
-  const themeIcon = $derived(theme.value === Theme.Light ? mdiWeatherSunny : mdiWeatherNight);
-
   $effect(() => {
     syncToDom();
   });
@@ -48,30 +42,25 @@
         color={(item.color ?? isActive(item.href)) ? 'primary' : 'secondary'}>{item.title}</Button
       >
     {/each}
-    <IconButton
-      size="giant"
-      shape="round"
-      color="primary"
-      variant="ghost"
-      class="ml-2"
-      icon={themeIcon}
-      onclick={handleToggleTheme}
-    />
-    <span class="md:hidden">
-      {#if menuOpen}
-        <CloseButton class="md:hidden" size="giant" onclick={() => (menuOpen = false)} />
-      {:else}
-        <IconButton
-          size="giant"
-          shape="round"
-          color="secondary"
-          variant="ghost"
-          class="md:hidden"
-          icon={mdiMenu}
-          onclick={() => (menuOpen = true)}
-        />
-      {/if}
-    </span>
+    <ThemeSwitcher size="large" />
+    {#if items.length > 0}
+      <span class="md:hidden">
+        {#if menuOpen}
+          <CloseButton class="md:hidden" size="large" onclick={() => (menuOpen = false)} />
+        {:else}
+          <IconButton
+            size="large"
+            shape="round"
+            color="secondary"
+            variant="ghost"
+            class="md:hidden"
+            icon={mdiMenu}
+            aria-label="Open menu"
+            onclick={() => (menuOpen = true)}
+          />
+        {/if}
+      </span>
+    {/if}
   </HStack>
 </nav>