chore: lower case text + facelift (#25263)

* chore: lower case text

* wip

* wip

* pr feedback

* pr feedback

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

@@ -24,7 +24,7 @@
   import { shortcuts } from '$lib/actions/shortcut';
   import { generateId } from '$lib/utils/generate-id';
   import { Icon, IconButton, Label } from '@immich/ui';
-  import { mdiClose, mdiMagnify, mdiUnfoldMoreHorizontal } from '@mdi/js';
+  import { mdiChevronDown, mdiClose, mdiMagnify } from '@mdi/js';
   import { onMount, tick } from 'svelte';
   import { t } from 'svelte-i18n';
   import type { FormEventHandler } from 'svelte/elements';
@@ -251,7 +251,7 @@
 </script>
 
 <svelte:window onresize={onPositionChange} />
-<Label class="block mb-1 {hideLabel ? 'sr-only' : ''}" for={inputId}>{label}</Label>
+<Label class="block mb-1 {hideLabel ? 'sr-only' : ''} text-xs text-neutral-500 font-light" for={inputId}>{label}</Label>
 <div
   class="relative w-full dark:text-gray-300 text-gray-700 text-base"
   use:focusOutside={{ onFocusOut: deactivate }}
@@ -351,7 +351,7 @@
           size="small"
         />
       {:else if !isOpen}
-        <Icon icon={mdiUnfoldMoreHorizontal} aria-hidden />
+        <Icon icon={mdiChevronDown} aria-hidden />
       {/if}
     </div>
   </div>
@@ -391,7 +391,7 @@
         <li
           aria-selected={index === selectedIndex}
           bind:this={optionRefs[index]}
-          class="text-start w-full px-4 py-2 hover:bg-gray-200 dark:hover:bg-gray-700 transition-all cursor-pointer aria-selected:bg-gray-200 aria-selected:dark:bg-gray-700 break-words"
+          class="text-start w-full px-4 py-2 hover:bg-gray-200 dark:hover:bg-gray-700 transition-all cursor-pointer aria-selected:bg-gray-200 aria-selected:dark:bg-gray-700 wrap-break-words"
           id={`${listboxId}-${index}`}
           onclick={() => handleSelect(option)}
           role="option"

web/src/lib/components/shared-components/search-bar/search-camera-section.svelte

@@ -10,6 +10,7 @@
   import Combobox, { asComboboxOptions, asSelectedOption } from '$lib/components/shared-components/combobox.svelte';
   import { handlePromiseError } from '$lib/utils';
   import { SearchSuggestionType, getSearchSuggestions } from '@immich/sdk';
+  import { Text } from '@immich/ui';
   import { t } from 'svelte-i18n';
 
   interface Props {
@@ -81,8 +82,7 @@
 </script>
 
 <div id="camera-selection">
-  <p class="uppercase immich-form-label">{$t('camera')}</p>
-
+  <Text fontWeight="medium">{$t('camera')}</Text>
   <div class="grid grid-auto-fit-40 gap-5 mt-1">
     <div class="w-full">
       <Combobox

web/src/lib/components/shared-components/search-bar/search-date-section.svelte

@@ -1,13 +1,13 @@
 <script lang="ts" module>
   export interface SearchDateFilter {
-    takenBefore?: string;
-    takenAfter?: string;
+    takenBefore?: DateTime;
+    takenAfter?: DateTime;
   }
 </script>
 
 <script lang="ts">
-  import DateInput from '$lib/elements/DateInput.svelte';
-  import { Text } from '@immich/ui';
+  import { DatePicker, Text } from '@immich/ui';
+  import type { DateTime } from 'luxon';
   import { t } from 'svelte-i18n';
 
   interface Props {
@@ -17,23 +17,19 @@
   let { filters = $bindable() }: Props = $props();
 
   let invalid = $derived(filters.takenAfter && filters.takenBefore && filters.takenAfter > filters.takenBefore);
-
-  const inputClasses = $derived(
-    `immich-form-input w-full mt-1 hover:cursor-pointer ${invalid ? 'border border-danger' : ''}`,
-  );
 </script>
 
 <div class="flex flex-col gap-1">
   <div id="date-range-selection" class="grid grid-auto-fit-40 gap-5">
-    <label class="immich-form-label" for="start-date">
-      <span class="uppercase">{$t('start_date')}</span>
-      <DateInput class={inputClasses} type="date" id="start-date" name="start-date" bind:value={filters.takenAfter} />
-    </label>
+    <div>
+      <Text class="mb-2" fontWeight="medium">{$t('start_date')}</Text>
+      <DatePicker bind:value={filters.takenAfter} />
+    </div>
 
-    <label class="immich-form-label" for="end-date">
-      <span class="uppercase">{$t('end_date')}</span>
-      <DateInput class={inputClasses} type="date" id="end-date" name="end-date" bind:value={filters.takenBefore} />
-    </label>
+    <div>
+      <Text class="mb-2" fontWeight="medium">{$t('end_date')}</Text>
+      <DatePicker bind:value={filters.takenBefore} />
+    </div>
   </div>
   {#if invalid}
     <Text color="danger">{$t('start_date_before_end_date')}</Text>

web/src/lib/components/shared-components/search-bar/search-display-section.svelte

@@ -7,7 +7,7 @@
 </script>
 
 <script lang="ts">
-  import { Checkbox, Label } from '@immich/ui';
+  import { Checkbox, Label, Text } from '@immich/ui';
 
   import { t } from 'svelte-i18n';
 
@@ -20,19 +20,20 @@
 
 <div id="display-options-selection">
   <fieldset>
-    <legend class="uppercase immich-form-label">{$t('display_options')}</legend>
+    <Text class="mb-2" fontWeight="medium">{$t('display_options')}</Text>
+
     <div class="flex flex-wrap gap-x-5 gap-y-2 mt-1">
       <div class="flex items-center gap-2">
         <Checkbox id="not-in-album-checkbox" size="tiny" bind:checked={filters.isNotInAlbum} />
-        <Label label={$t('not_in_any_album')} for="not-in-album-checkbox" />
+        <Label label={$t('not_in_any_album')} for="not-in-album-checkbox" class="text-sm font-normal" />
       </div>
       <div class="flex items-center gap-2">
         <Checkbox id="archive-checkbox" size="tiny" bind:checked={filters.isArchive} />
-        <Label label={$t('archive')} for="archive-checkbox" />
+        <Label label={$t('archive')} for="archive-checkbox" class="text-sm font-normal" />
       </div>
       <div class="flex items-center gap-2">
         <Checkbox id="favorites-checkbox" size="tiny" bind:checked={filters.isFavorite} />
-        <Label label={$t('favorites')} for="favorites-checkbox" />
+        <Label label={$t('favorites')} for="favorites-checkbox" class="text-sm font-normal" />
       </div>
     </div>
   </fieldset>

web/src/lib/components/shared-components/search-bar/search-history-box.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { searchStore } from '$lib/stores/search.svelte';
-  import { Icon, IconButton } from '@immich/ui';
+  import { Icon, IconButton, Text } from '@immich/ui';
   import { mdiClose, mdiMagnify } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import { fly } from 'svelte/transition';
@@ -97,7 +97,7 @@
       class="absolute w-full rounded-b-3xl border-2 border-t-0 border-gray-200 bg-white pb-5 shadow-2xl transition-all dark:border-gray-700 dark:bg-immich-dark-gray dark:text-gray-300 z-1"
     >
       <div class="flex items-center justify-between px-5 pt-5 text-xs">
-        <p class="uppercase py-2" aria-hidden={true}>{$t('recent_searches')}</p>
+        <Text class="py-2" color="muted" aria-hidden={true}>{$t('recent_searches')}</Text>
         {#if showClearAll}
           <button
             id={getId(0)}

web/src/lib/components/shared-components/search-bar/search-location-section.svelte

@@ -10,6 +10,7 @@
   import Combobox, { asComboboxOptions, asSelectedOption } from '$lib/components/shared-components/combobox.svelte';
   import { handlePromiseError } from '$lib/utils';
   import { getSearchSuggestions, SearchSuggestionType } from '@immich/sdk';
+  import { Text } from '@immich/ui';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
 
@@ -74,7 +75,7 @@
 </script>
 
 <div id="location-selection">
-  <p class="uppercase immich-form-label">{$t('place')}</p>
+  <Text fontWeight="medium">{$t('place')}</Text>
 
   <div class="grid grid-auto-fit-40 gap-5 mt-1">
     <div class="w-full">

web/src/lib/components/shared-components/search-bar/search-media-section.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { MediaType } from '$lib/constants';
   import RadioButton from '$lib/elements/RadioButton.svelte';
+  import { Text } from '@immich/ui';
   import { t } from 'svelte-i18n';
 
   interface Props {
@@ -12,7 +13,8 @@
 
 <div id="media-type-selection">
   <fieldset>
-    <legend class="uppercase immich-form-label">{$t('media_type')}</legend>
+    <Text class="mb-2" fontWeight="medium">{$t('media_type')}</Text>
+
     <div class="flex flex-wrap gap-x-5 gap-y-2 mt-1">
       <RadioButton name="media-type" id="type-all" bind:group={filteredMedia} label={$t('all')} value={MediaType.All} />
       <RadioButton

web/src/lib/components/shared-components/search-bar/search-people-section.svelte

@@ -5,7 +5,7 @@
   import { getPeopleThumbnailUrl } from '$lib/utils';
   import { handleError } from '$lib/utils/handle-error';
   import { getAllPeople, type PersonResponseDto } from '@immich/sdk';
-  import { Button, LoadingSpinner } from '@immich/ui';
+  import { Button, LoadingSpinner, Text } from '@immich/ui';
   import { mdiArrowRight, mdiClose } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import type { SvelteSet } from 'svelte/reactivity';
@@ -63,12 +63,12 @@
 
     <div id="people-selection" class="max-h-60 -mb-4 overflow-y-auto immich-scrollbar">
       <div class="flex items-center w-full justify-between gap-6">
-        <p class="uppercase immich-form-label py-3">{$t('people')}</p>
+        <Text class="py-3" fontWeight="medium">{$t('people')}</Text>
         <SearchBar bind:name placeholder={$t('filter_people')} showLoadingSpinner={false} />
       </div>
 
       <SingleGridRow
-        class="grid grid-auto-fill-20 gap-1 mt-2 overflow-y-auto immich-scrollbar"
+        class="grid grid-auto-fill-20 gap-1 mt-2 overflow-y-auto immich-scrollbar space-between"
         bind:itemCount={numberOfPeople}
       >
         {#each peopleList as person (person.id)}

web/src/lib/components/shared-components/search-bar/search-ratings-section.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { Text } from '@immich/ui';
   import { t } from 'svelte-i18n';
   import Combobox from '../combobox.svelte';
 
@@ -18,16 +19,14 @@
   ];
 </script>
 
-<div class="grid grid-auto-fit-40 gap-5">
-  <label class="immich-form-label" for="start-date">
-    <div class="[&_label]:uppercase">
-      <Combobox
-        label={$t('rating')}
-        placeholder={$t('search_rating')}
-        {options}
-        selectedOption={rating === undefined ? undefined : options[rating]}
-        onSelect={(r) => (rating = r === undefined ? undefined : Number.parseInt(r.value))}
-      />
-    </div>
-  </label>
+<div class="flex flex-col">
+  <Text class="mb-2" fontWeight="medium">{$t('rating')}</Text>
+  <Combobox
+    label={$t('rating')}
+    placeholder={$t('search_rating')}
+    hideLabel
+    {options}
+    selectedOption={rating === undefined ? undefined : options[rating]}
+    onSelect={(r) => (rating = r === undefined ? undefined : Number.parseInt(r.value))}
+  />
 </div>

web/src/lib/components/shared-components/search-bar/search-tags-section.svelte

@@ -2,7 +2,7 @@
   import Combobox, { type ComboBoxOption } from '$lib/components/shared-components/combobox.svelte';
   import { preferences } from '$lib/stores/user.store';
   import { getAllTags, type TagResponseDto } from '@immich/sdk';
-  import { Checkbox, Icon, Label } from '@immich/ui';
+  import { Checkbox, Icon, Label, Text } from '@immich/ui';
   import { mdiClose } from '@mdi/js';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
@@ -43,18 +43,18 @@
 {#if $preferences?.tags?.enabled}
   <div id="location-selection">
     <form autocomplete="off" id="create-tag-form">
-      <div class="my-4 flex flex-col gap-2">
-        <div class="[&_label]:uppercase">
-          <Combobox
-            disabled={selectedTags === null}
-            onSelect={handleSelect}
-            label={$t('tags')}
-            defaultFirstOption
-            options={allTags.map((tag) => ({ id: tag.id, label: tag.value, value: tag.id }))}
-            bind:selectedOption
-            placeholder={$t('search_tags')}
-          />
-        </div>
+      <div class="mb-4 flex flex-col">
+        <Text class="py-3" fontWeight="medium">{$t('tags')}</Text>
+        <Combobox
+          disabled={selectedTags === null}
+          hideLabel
+          onSelect={handleSelect}
+          label={$t('tags')}
+          defaultFirstOption
+          options={allTags.map((tag) => ({ id: tag.id, label: tag.value, value: tag.id }))}
+          bind:selectedOption
+          placeholder={$t('search_tags')}
+        />
       </div>
       <div class="flex items-center gap-2">
         <Checkbox
@@ -65,7 +65,7 @@
             selectedTags = checked ? null : new SvelteSet();
           }}
         />
-        <Label label={$t('untagged')} for="untagged-checkbox" />
+        <Label label={$t('untagged')} for="untagged-checkbox" class="text-sm font-normal" />
       </div>
     </form>
 

web/src/lib/components/shared-components/search-bar/search-text-section.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import RadioButton from '$lib/elements/RadioButton.svelte';
   import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
+  import { Field, Input, Text } from '@immich/ui';
   import { t } from 'svelte-i18n';
 
   interface Props {
@@ -11,73 +12,48 @@
   let { query = $bindable(), queryType = $bindable('smart') }: Props = $props();
 </script>
 
-<fieldset>
-  <legend class="immich-form-label">{$t('search_type')}</legend>
-  <div class="flex flex-wrap gap-x-5 gap-y-2 mt-1 mb-2">
-    {#if featureFlagsManager.value.smartSearch}
-      <RadioButton name="query-type" id="context-radio" label={$t('context')} bind:group={queryType} value="smart" />
-    {/if}
-    <RadioButton
-      name="query-type"
-      id="file-name-radio"
-      label={$t('file_name_or_extension')}
-      bind:group={queryType}
-      value="metadata"
-    />
-    <RadioButton
-      name="query-type"
-      id="description-radio"
-      label={$t('description')}
-      bind:group={queryType}
-      value="description"
-    />
-    {#if featureFlagsManager.value.ocr}
-      <RadioButton name="query-type" id="ocr-radio" label={$t('ocr')} bind:group={queryType} value="ocr" />
-    {/if}
-  </div>
-</fieldset>
+<section>
+  <fieldset>
+    <Text class="mb-2" fontWeight="medium">{$t('search_type')}</Text>
+    <div class="flex flex-wrap gap-x-5 gap-y-2 my-2">
+      {#if featureFlagsManager.value.smartSearch}
+        <RadioButton name="query-type" id="context-radio" label={$t('context')} bind:group={queryType} value="smart" />
+      {/if}
+      <RadioButton
+        name="query-type"
+        id="file-name-radio"
+        label={$t('file_name_or_extension')}
+        bind:group={queryType}
+        value="metadata"
+      />
+      <RadioButton
+        name="query-type"
+        id="description-radio"
+        label={$t('description')}
+        bind:group={queryType}
+        value="description"
+      />
+      {#if featureFlagsManager.value.ocr}
+        <RadioButton name="query-type" id="ocr-radio" label={$t('ocr')} bind:group={queryType} value="ocr" />
+      {/if}
+    </div>
+  </fieldset>
 
-{#if queryType === 'smart'}
-  <label for="context-input" class="immich-form-label">{$t('search_by_context')}</label>
-  <input
-    class="immich-form-input hover:cursor-text w-full mt-1!"
-    type="text"
-    id="context-input"
-    name="context"
-    placeholder={$t('sunrise_on_the_beach')}
-    bind:value={query}
-  />
-{:else if queryType === 'metadata'}
-  <label for="file-name-input" class="immich-form-label">{$t('search_by_filename')}</label>
-  <input
-    class="immich-form-input hover:cursor-text w-full mt-1!"
-    type="text"
-    id="file-name-input"
-    name="file-name"
-    placeholder={$t('search_by_filename_example')}
-    bind:value={query}
-    aria-labelledby="file-name-label"
-  />
-{:else if queryType === 'description'}
-  <label for="description-input" class="immich-form-label">{$t('search_by_description')}</label>
-  <input
-    class="immich-form-input hover:cursor-text w-full mt-1!"
-    type="text"
-    id="description-input"
-    name="description"
-    placeholder={$t('search_by_description_example')}
-    bind:value={query}
-    aria-labelledby="description-label"
-  />
-{:else if queryType === 'ocr'}
-  <label for="ocr-input" class="immich-form-label">{$t('search_by_ocr')}</label>
-  <input
-    class="immich-form-input hover:cursor-text w-full mt-1!"
-    type="text"
-    id="ocr-input"
-    name="ocr"
-    placeholder={$t('search_by_ocr_example')}
-    bind:value={query}
-    aria-labelledby="ocr-label"
-  />
-{/if}
+  {#if queryType === 'smart'}
+    <Field label={$t('search_by_context')}>
+      <Input type="text" placeholder={$t('sunrise_on_the_beach')} bind:value={query} />
+    </Field>
+  {:else if queryType === 'metadata'}
+    <Field label={$t('search_by_filename')}>
+      <Input type="text" placeholder={$t('search_by_filename_example')} bind:value={query} />
+    </Field>
+  {:else if queryType === 'description'}
+    <Field label={$t('search_by_description')}>
+      <Input type="text" placeholder={$t('search_by_description_example')} bind:value={query} />
+    </Field>
+  {:else if queryType === 'ocr'}
+    <Field label={$t('search_by_ocr')}>
+      <Input type="text" placeholder={$t('search_by_ocr_example')} bind:value={query} />
+    </Field>
+  {/if}
+</section>

web/src/lib/components/shared-components/settings/setting-input-field.svelte

@@ -81,7 +81,7 @@
 
 <div class="mb-4 w-full">
   <div class="flex place-items-center gap-1">
-    <label class="font-medium text-primary text-sm min-h-6 uppercase" for={label}>{label}</label>
+    <label class="font-medium text-primary text-sm min-h-6" for={label}>{label}</label>
     {#if required}
       <div class="text-red-400">*</div>
     {/if}