spacing tweak

docs/src/css/custom.css

@@ -8,19 +8,19 @@
 @tailwind utilities;
 
 @font-face {
-  font-family: 'Overpass';
-  src: url('/fonts/overpass/Overpass.ttf') format('truetype-variations');
-  font-weight: 1 999;
+  font-family: 'GoogleSans';
+  src: url('/fonts/GoogleSans/GoogleSans.ttf') format('truetype-variations');
+  font-weight: 425 900;
   font-style: normal;
   ascent-override: 106.25%;
   size-adjust: 106.25%;
 }
 
 @font-face {
-  font-family: 'Overpass Mono';
-  src: url('/fonts/overpass/OverpassMono.ttf') format('truetype-variations');
-  font-weight: 1 999;
-  font-style: normal;
+  font-family: 'GoogleSansCode';
+  src: url('/fonts/GoogleSansCode/GoogleSansCode.ttf') format('truetype-variations');
+  font-weight: 1 900;
+  font-style: monospace;
   ascent-override: 106.25%;
   size-adjust: 106.25%;
 }
@@ -37,7 +37,7 @@ img {
 
 /* You can override the default Infima variables here. */
 :root {
-  font-family: 'Overpass', sans-serif;
+  font-family: 'GoogleSans', sans-serif;
   --ifm-color-primary: #4250af;
   --ifm-color-primary-dark: #4250af;
   --ifm-color-primary-darker: #4250af;
@@ -48,6 +48,15 @@ img {
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
 }
 
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: 'GoogleSans', sans-serif;
+}
+
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme='dark'] {
   --ifm-color-primary: #adcbfa;
@@ -94,7 +103,7 @@ code {
 .buy-button {
   padding: 8px 14px;
   border: 1px solid transparent;
-  font-family: 'Overpass', sans-serif;
+  font-family: 'GoogleSans', sans-serif;
   font-weight: 500;
   cursor: pointer;
   box-shadow: 0 0 5px 2px rgba(181, 206, 254, 0.4);

web/src/app.css

@@ -49,7 +49,7 @@
 }
 
 @theme {
-  --font-immich-mono: Overpass Mono, monospace;
+  --font-immich-mono: GoogleSansCode, monospace;
 
   --spacing-18: 4.5rem;
 
@@ -84,25 +84,27 @@
 
 @layer utilities {
   @font-face {
-    font-family: 'Overpass';
-    src: url('$lib/assets/fonts/overpass/Overpass.ttf') format('truetype-variations');
-    font-weight: 1 999;
+    font-family: 'GoogleSans';
+    src: url('$lib/assets/fonts/GoogleSans/GoogleSans.ttf') format('truetype-variations');
+    font-weight: 425 900;
     font-style: normal;
     ascent-override: 106.25%;
     size-adjust: 106.25%;
   }
 
   @font-face {
-    font-family: 'Overpass Mono';
-    src: url('$lib/assets/fonts/overpass/OverpassMono.ttf') format('truetype-variations');
-    font-weight: 1 999;
+    font-family: 'GoogleSansCode';
+    src: url('$lib/assets/fonts/GoogleSansCode/GoogleSansCode.ttf') format('truetype-variations');
+    font-weight: 1 900;
     font-style: monospace;
     ascent-override: 106.25%;
     size-adjust: 106.25%;
   }
 
   :root {
-    font-family: 'Overpass', sans-serif;
+    font-family: 'GoogleSans', sans-serif;
+    letter-spacing: 0.1px;
+
     /* Used by layouts to ensure proper spacing between navbar and content */
     --navbar-height: calc(4.5rem + 4px);
     --navbar-height-md: calc(4.5rem + 4px - 14px);

web/src/hooks.server.ts

@@ -1,12 +1,12 @@
-import overpass from '$lib/assets/fonts/overpass/Overpass.ttf?url';
-import overpassMono from '$lib/assets/fonts/overpass/OverpassMono.ttf?url';
+import GoogleSans from '$lib/assets/fonts/GoogleSans/GoogleSans.ttf?url';
+import GoogleSansCode from '$lib/assets/fonts/GoogleSansCode/GoogleSansCode.ttf?url';
 import type { Handle } from '@sveltejs/kit';
 
 // only used during the build to replace the variables from app.html
 export const handle = (async ({ event, resolve }) => {
   return resolve(event, {
     transformPageChunk: ({ html }) => {
-      return html.replace('%app.font%', overpass).replace('%app.monofont%', overpassMono);
+      return html.replace('%app.font%', GoogleSans).replace('%app.monofont%', GoogleSansCode);
     },
   });
 }) satisfies Handle;

web/src/lib/components/server-statistics/ServerStatisticsCard.svelte

@@ -23,13 +23,13 @@
 <div class="flex h-35 w-full flex-col justify-between rounded-3xl bg-subtle text-primary p-5">
   <div class="flex place-items-center gap-4">
     <Icon {icon} size="40" />
-    <Text size="large" fontWeight="bold" class="uppercase">{title}</Text>
+    <Text size="large">{title}</Text>
   </div>
 
-  <div class="relative mx-auto font-mono text-2xl font-semibold">
+  <div class="relative mx-auto font-immich-mono text-2xl font-semibold">
     <span class="text-gray-400 dark:text-gray-600">{zeros()}</span><span>{value}</span>
     {#if unit}
-      <Code color="muted" class="absolute -top-5 end-1 font-light p-0">{unit}</Code>
+      <Code color="muted" class="font-immich-mono absolute -top-5 end-1 font-light p-0">{unit}</Code>
     {/if}
   </div>
 </div>

web/src/lib/components/server-statistics/ServerStatisticsPanel.svelte

@@ -3,7 +3,7 @@
   import { locale } from '$lib/stores/preferences.store';
   import { getByteUnitString, getBytesWithUnit } from '$lib/utils/byte-units';
   import type { ServerStatsResponseDto } from '@immich/sdk';
-  import { Code, Heading, Icon, Text } from '@immich/ui';
+  import { Code, Icon, Text } from '@immich/ui';
   import { mdiCameraIris, mdiChartPie, mdiPlayCircle } from '@mdi/js';
   import { t } from 'svelte-i18n';
 
@@ -13,8 +13,7 @@
 
   const { stats }: Props = $props();
 
-  const zeros = (value: number) => {
-    const maxLength = 13;
+  const zeros = (value: number, maxLength = 13) => {
     const valueLength = value.toString().length;
     const zeroLength = maxLength - valueLength;
 
@@ -27,7 +26,7 @@
 
 <div class="flex flex-col gap-5 my-4">
   <div>
-    <Heading size="tiny" class="mb-2">{$t('total_usage')}</Heading>
+    <Text class="mb-2 font-semibold">{$t('total_usage')}</Text>
 
     <div class="hidden justify-between lg:flex gap-4">
       <StatsCard icon={mdiCameraIris} title={$t('photos')} value={stats.photos} />
@@ -40,38 +39,35 @@
         <div class="flex flex-wrap gap-x-12">
           <div class="flex flex-1 place-items-center gap-4 text-primary">
             <Icon icon={mdiCameraIris} size="25" />
-            <Text fontWeight="bold" class="uppercase">{$t('photos')}</Text>
+            <Text fontWeight="semi-bold">{$t('photos')}</Text>
           </div>
 
-          <div class="relative text-center font-mono text-2xl font-semibold">
-            <span class="text-gray-400 dark:text-gray-600">{zeros(stats.photos)}</span><span class="text-primary"
-              >{stats.photos}</span
-            >
+          <div class="relative text-center font-immich-mono text-2xl font-semibold">
+            <span class="text-light-300">{zeros(stats.photos)}</span><span class="text-primary">{stats.photos}</span>
           </div>
         </div>
         <div class="flex flex-wrap gap-x-12">
           <div class="flex flex-1 place-items-center gap-4 text-primary">
             <Icon icon={mdiPlayCircle} size="25" />
-            <Text fontWeight="bold" class="uppercase">{$t('videos')}</Text>
+            <Text fontWeight="semi-bold">{$t('videos')}</Text>
           </div>
 
-          <div class="relative text-center font-mono text-2xl font-semibold">
-            <span class="text-gray-400 dark:text-gray-600">{zeros(stats.videos)}</span><span class="text-primary"
-              >{stats.videos}</span
-            >
+          <div class="relative text-center font-immich-mono text-2xl font-semibold">
+            <span class="text-light-300">{zeros(stats.videos)}</span><span class="text-primary">{stats.videos}</span>
           </div>
         </div>
         <div class="flex flex-wrap gap-x-5">
           <div class="flex flex-1 flex-nowrap place-items-center gap-4 text-primary">
             <Icon icon={mdiChartPie} size="25" />
-            <Text fontWeight="bold" class="uppercase">{$t('storage')}</Text>
+            <Text fontWeight="semi-bold">{$t('storage')}</Text>
           </div>
 
-          <div class="relative flex text-center font-mono text-2xl font-semibold">
-            <span class="text-gray-400 dark:text-gray-600">{zeros(statsUsage)}</span><span class="text-primary"
-              >{statsUsage}</span
-            >
-            <Code color="muted" class="font-light">{statsUsageUnit}</Code>
+          <div class="relative flex text-center font-immich-mono text-2xl font-semibold">
+            <span class="text-light-300">{zeros(statsUsage)}</span><span class="text-primary">{statsUsage}</span>
+
+            <div class="absolute -right-1.5 -bottom-4">
+              <Code color="muted" class="text-xs font-light font-immich-mono">{statsUsageUnit}</Code>
+            </div>
           </div>
         </div>
       </div>
@@ -79,7 +75,7 @@
   </div>
 
   <div>
-    <Heading size="tiny" class="mb-2">{$t('user_usage_detail')}</Heading>
+    <Text class="mt-6 mb-2 font-semibold">{$t('user_usage_detail')}</Text>
     <table class="mt-5 w-full text-start">
       <thead
         class="mb-4 flex h-12 w-full rounded-md border bg-gray-50 text-primary dark:border-immich-dark-gray dark:bg-immich-dark-gray"

web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte

@@ -467,7 +467,7 @@
           />
           {#if showAssetName && !isTimelineAsset(asset)}
             <div
-              class="absolute text-center p-1 text-xs font-mono font-semibold w-full bottom-0 bg-linear-to-t bg-slate-50/75 dark:bg-slate-800/75 overflow-clip text-ellipsis whitespace-pre-wrap"
+              class="absolute text-center p-1 text-xs font-immich-mono font-semibold w-full bottom-0 bg-linear-to-t bg-slate-50/75 dark:bg-slate-800/75 overflow-clip text-ellipsis whitespace-pre-wrap"
             >
               {asset.originalFileName}
             </div>

web/src/lib/components/shared-components/map/map.svelte

@@ -361,7 +361,7 @@
       >
         {#snippet children({ feature })}
           <div
-            class="rounded-full w-10 h-10 bg-immich-primary text-white flex justify-center items-center font-mono font-bold shadow-lg hover:bg-immich-dark-primary transition-all duration-200 hover:text-immich-dark-bg opacity-90"
+            class="rounded-full w-10 h-10 bg-immich-primary text-white flex justify-center items-center font-immich-mono font-bold shadow-lg hover:bg-immich-dark-primary transition-all duration-200 hover:text-immich-dark-bg opacity-90"
           >
             {feature.properties?.point_count?.toLocaleString()}
           </div>

web/src/lib/components/shared-components/side-bar/server-status.svelte

@@ -62,12 +62,12 @@
 >
   {#if $connected}
     <div class="flex gap-2 place-items-center place-content-center">
-      <div class="w-[7px] h-[7px] bg-green-500 rounded-full"></div>
+      <div class="w-1.75 h-1.75 bg-green-500 rounded-full"></div>
       <p class="dark:text-immich-gray">{$t('server_online')}</p>
     </div>
   {:else}
     <div class="flex gap-2 place-items-center place-content-center">
-      <div class="w-[7px] h-[7px] bg-red-500 rounded-full"></div>
+      <div class="w-1.75 h-1.75 bg-red-500 rounded-full"></div>
       <p class="text-red-500">{$t('server_offline')}</p>
     </div>
   {/if}

web/src/lib/components/shared-components/side-bar/storage-space.svelte

@@ -66,8 +66,8 @@
       })}
     </p>
 
-    <div class="mt-4 h-[7px] w-full rounded-full bg-gray-200 dark:bg-gray-700">
-      <div class="h-[7px] rounded-full {usageClasses}" style="width: {usedPercentage}%"></div>
+    <div class="mt-4 h-1.75 w-full rounded-full bg-gray-200 dark:bg-gray-700">
+      <div class="h-1.75 rounded-full {usageClasses}" style="width: {usedPercentage}%"></div>
     </div>
   {:else}
     <div class="mt-2">

web/src/lib/components/shared-components/tree/breadcrumbs.svelte

@@ -51,7 +51,7 @@
         />
       </li>
       {#each parents as parent (parent)}
-        <li class="flex gap-2 items-center font-mono text-sm text-nowrap text-primary">
+        <li class="flex gap-2 items-center font-immich-mono text-sm text-nowrap text-primary">
           <Icon icon={mdiChevronRight} class="text-gray-500 dark:text-gray-300" size="16" aria-hidden />
           <a class="underline hover:font-semibold whitespace-pre-wrap" href={getLink(parent.path)}>
             {parent.value}
@@ -59,7 +59,7 @@
         </li>
       {/each}
 
-      <li class="flex gap-2 items-center font-mono text-sm text-nowrap text-primary">
+      <li class="flex gap-2 items-center font-immich-mono text-sm text-nowrap text-primary">
         <Icon icon={mdiChevronRight} class="text-gray-500 dark:text-gray-300" size="16" aria-hidden />
         <p class="cursor-default whitespace-pre-wrap">{node.value}</p>
       </li>

web/src/lib/components/shared-components/tree/tree.svelte

@@ -42,7 +42,9 @@
       size="20"
     />
   </div>
-  <span class="text-nowrap overflow-hidden text-ellipsis font-mono ps-1 pt-1 whitespace-pre-wrap">{node.value}</span>
+  <span class="text-nowrap overflow-hidden text-ellipsis font-immich-mono ps-1 pt-1 whitespace-pre-wrap"
+    >{node.value}</span
+  >
 </a>
 
 {#if isOpen}

web/src/lib/components/timeline/Scrubber.svelte

@@ -543,7 +543,7 @@
       in:fade={{ duration: 200 }}
       out:fade={{ duration: 200 }}
     >
-      <Icon icon={mdiPlay} size="20" class="-rotate-90 relative top-[9px] -end-0.5" />
+      <Icon icon={mdiPlay} size="20" class="-rotate-90 relative top-2.25 -end-0.5" />
       <Icon icon={mdiPlay} size="20" class="rotate-90 relative top-px -end-0.5" />
       {#if (timelineManager.scrolling && scrollHoverLabel) || isHover || isDragging}
         <p
@@ -588,7 +588,7 @@
     >
       {#if !usingMobileDevice}
         {#if segment.hasLabel}
-          <div class="absolute end-5 text-[12px] dark:text-immich-dark-fg font-immich-mono bottom-0">
+          <div class="absolute end-5 text-[13px] dark:text-immich-dark-fg font-immich-mono bottom-0">
             {segment.year}
           </div>
         {/if}

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

@@ -128,7 +128,7 @@
         maxlength="1"
         bind:this={pinCodeInputElements[index]}
         id="pin-code-{index}"
-        class="h-12 w-10 rounded-xl border-2 border-suble dark:border-gray-700 text-center text-lg font-medium focus:border-immich-primary focus:ring-primary dark:focus:border-primary font-mono bg-white dark:bg-light"
+        class="h-12 w-10 rounded-xl border-2 border-suble dark:border-gray-700 text-center text-lg font-medium focus:border-immich-primary focus:ring-primary dark:focus:border-primary font-immich-mono bg-white dark:bg-light"
         bind:value={pinValues[index]}
         onkeydown={handleKeydown}
         oninput={(event) => handleInput(event, index)}

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

@@ -59,7 +59,7 @@
 
 <section class="my-4">
   <div in:fade={{ duration: 500 }}>
-    <div class="ms-8 mt-4 flex flex-col gap-4">
+    <div class="ms-8 mt-4 flex flex-col gap-6">
       <Field label={$t('theme_selection')} description={$t('theme_selection_description')}>
         <Switch checked={themeManager.theme.system} onCheckedChange={(checked) => themeManager.setSystem(checked)} />
       </Field>
@@ -68,7 +68,7 @@
 
       <Field label={$t('default_locale')} description={$t('default_locale_description')}>
         <Switch checked={$locale == 'default'} onCheckedChange={handleToggleLocaleBrowser} />
-        <Text size="small" class="mt-2">{selectedDate}</Text>
+        <Text size="small" class="mt-2 font-immich-mono text-sm">{selectedDate}</Text>
       </Field>
 
       {#if $locale !== 'default'}

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

@@ -42,7 +42,7 @@
 <section class="my-4">
   <div in:fade={{ duration: 500 }}>
     <form autocomplete="off" {onsubmit}>
-      <div class="ms-4 mt-4 flex flex-col gap-4">
+      <div class="ms-4 mt-4 flex flex-col gap-6">
         <Field label={$t('enable')} description={$t('notification_toggle_setting_description')}>
           <Switch bind:checked={emailNotificationsEnabled} />
         </Field>

web/src/lib/components/user-settings-page/user-api-key-grid.svelte

@@ -39,7 +39,7 @@
       checked={selectAllSubItems}
       onCheckedChange={handleSelectAllSubItems}
     />
-    <Label label={title} for="permission-{title}" class="font-mono text-primary text-lg" />
+    <Label label={title} for="permission-{title}" class="font-immich-mono text-primary text-lg" />
   </div>
   <div class="mx-6 mt-3 grid grid-cols-3 gap-2">
     {#each subItems as item (item)}
@@ -50,7 +50,7 @@
           checked={selectedItems.includes(item)}
           onCheckedChange={() => handleToggleItem(item)}
         />
-        <Label label={item} for="permission-{item}" class="text-sm font-mono" />
+        <Label label={item} for="permission-{item}" class="text-sm font-immich-mono" />
       </div>
     {/each}
   </div>

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

@@ -64,7 +64,7 @@
             >
               <td class="w-1/4 text-ellipsis px-4 text-sm overflow-hidden">{key.name}</td>
               <td
-                class="w-1/4 text-ellipsis px-4 text-xs overflow-hidden line-clamp-3 break-all font-mono"
+                class="w-1/4 text-ellipsis px-4 text-xs overflow-hidden line-clamp-3 break-all font-immich-mono"
                 title={JSON.stringify(key.permissions, undefined, 2)}>{key.permissions}</td
               >
               <td class="w-1/4 text-ellipsis px-4 text-sm overflow-hidden"

web/src/lib/modals/ApiKeySecretModal.svelte

@@ -15,7 +15,7 @@
 <Modal title={$t('api_key')} icon={mdiKeyVariant} {onClose} size="small">
   <ModalBody>
     <Text size="small" class="mb-4">{$t('api_key_description')}</Text>
-    <Textarea bind:value={secret} readonly class="font-mono" />
+    <Textarea bind:value={secret} readonly class="font-immich-mono" />
   </ModalBody>
 
   <ModalFooter>

web/src/routes/(user)/utilities/geolocation/+page.svelte

@@ -141,12 +141,12 @@
     <div class="flex gap-2 justify-end place-items-center">
       <Text class="hidden md:block text-xs mr-4 text-dark/50">{$t('geolocation_instruction_location')}</Text>
       <div class="border flex place-items-center place-content-center px-2 py-1 bg-primary/10 rounded-2xl">
-        <Text class="hidden md:inline-block text-xs text-gray-500 font-mono mr-5 ml-2 uppercase">
+        <Text class="hidden md:inline-block text-xs text-gray-500 font-immich-mono mr-5 ml-2 uppercase">
           {$t('selected_gps_coordinates')}
         </Text>
         <Text
           title="latitude, longitude"
-          class="rounded-3xl font-mono text-sm text-primary px-2 py-1 transition-all duration-100 ease-in-out {locationUpdated
+          class="rounded-3xl font-immich-mono text-sm text-primary px-2 py-1 transition-all duration-100 ease-in-out {locationUpdated
             ? 'bg-primary/90 text-light font-semibold scale-105'
             : ''}">{location.latitude.toFixed(3)}, {location.longitude.toFixed(3)}</Text
         >

web/src/routes/(user)/utilities/workflows/[workflowId]/+page.svelte

@@ -326,7 +326,7 @@
 
 {#snippet cardOrder(index: number)}
   <div class="h-8 w-8 rounded-lg flex place-items-center place-content-center shrink-0 border bg-light-50">
-    <Text size="small" class="font-mono font-bold">
+    <Text size="small" class="font-immich-mono font-bold">
       {index + 1}
     </Text>
   </div>