sascha
/
immich
mirror of https://github.com/immich-app/immich.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

chore: consistent modal footer spacing (#19377)

pull/19378/head
Daniel Dietzler 2025-06-20 20:05:39 +07:00 committed by GitHub
parent 1dc8fa2979
commit a5d84ba552
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
22 changed files with 69 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web/package-lock.json generated
Unescape Escape View File

@ -11,7 +11,7 @@
"dependencies": { "dependencies": {
"@formatjs/icu-messageformat-parser": "^2.9.8", "@formatjs/icu-messageformat-parser": "^2.9.8",
"@immich/sdk": "file:../open-api/typescript-sdk", "@immich/sdk": "file:../open-api/typescript-sdk",
"@immich/ui": "^0.22.7", "@immich/ui": "^0.22.8",
"@mapbox/mapbox-gl-rtl-text": "0.2.3", "@mapbox/mapbox-gl-rtl-text": "0.2.3",
"@mdi/js": "^7.4.47", "@mdi/js": "^7.4.47",
"@photo-sphere-viewer/core": "^5.11.5", "@photo-sphere-viewer/core": "^5.11.5",
@ -1333,9 +1333,9 @@
"link": true "link": true
}, },
"node_modules/@immich/ui": { "node_modules/@immich/ui": {
"version": "0.22.7", "version": "0.22.8",
"resolved": "https://registry.npmjs.org/@immich/ui/-/ui-0.22.7.tgz", "resolved": "https://registry.npmjs.org/@immich/ui/-/ui-0.22.8.tgz",
"integrity": "sha512-FdA0RDSOO1IDSTQmCbW9u5yXFl59EHu++tYonDR/FEZUKrMwfmQEanePSW5g5KofdumKEuxBN1fWFym3NbB0jQ==", "integrity": "sha512-DVhDgz6drx7vfNhAssX4yYgOC3JpLm8uovLvz3n36skCNU6pm8GoSgH6gMGTM36sx5go3fvhHw5N3KR+A/7bjg==",
"license": "GNU Affero General Public License version 3", "license": "GNU Affero General Public License version 3",
"dependencies": { "dependencies": {
"@mdi/js": "^7.4.47", "@mdi/js": "^7.4.47",

2
web/package.json
Unescape Escape View File

@ -28,7 +28,7 @@
"dependencies": { "dependencies": {
"@formatjs/icu-messageformat-parser": "^2.9.8", "@formatjs/icu-messageformat-parser": "^2.9.8",
"@immich/sdk": "file:../open-api/typescript-sdk", "@immich/sdk": "file:../open-api/typescript-sdk",
"@immich/ui": "^0.22.7", "@immich/ui": "^0.22.8",
"@mapbox/mapbox-gl-rtl-text": "0.2.3", "@mapbox/mapbox-gl-rtl-text": "0.2.3",
"@mdi/js": "^7.4.47", "@mdi/js": "^7.4.47",
"@photo-sphere-viewer/core": "^5.11.5", "@photo-sphere-viewer/core": "^5.11.5",

6
web/src/lib/modals/AlbumEditModal.svelte
Unescape Escape View File

@ -2,7 +2,7 @@
import AlbumCover from '$lib/components/album-page/album-cover.svelte'; import AlbumCover from '$lib/components/album-page/album-cover.svelte';
import { handleError } from '$lib/utils/handle-error'; import { handleError } from '$lib/utils/handle-error';
import { updateAlbumInfo, type AlbumResponseDto } from '@immich/sdk'; import { updateAlbumInfo, type AlbumResponseDto } from '@immich/sdk';
import { Button, Modal, ModalBody, ModalFooter } from '@immich/ui'; import { Button, HStack, Modal, ModalBody, ModalFooter } from '@immich/ui';
import { mdiRenameOutline } from '@mdi/js'; import { mdiRenameOutline } from '@mdi/js';
import { t } from 'svelte-i18n'; import { t } from 'svelte-i18n';
@ -68,9 +68,9 @@
</ModalBody> </ModalBody>
<ModalFooter> <ModalFooter>
<div class="flex gap-2 w-full"> <HStack fullWidth>
<Button shape="round" color="secondary" fullWidth onclick={() => onClose()}>{$t('cancel')}</Button> <Button shape="round" color="secondary" fullWidth onclick={() => onClose()}>{$t('cancel')}</Button>
<Button shape="round" type="submit" fullWidth disabled={isSubmitting} form="edit-album-form">{$t('save')}</Button> <Button shape="round" type="submit" fullWidth disabled={isSubmitting} form="edit-album-form">{$t('save')}</Button>
</div> </HStack>
</ModalFooter> </ModalFooter>
</Modal> </Modal>

6
web/src/lib/modals/ApiKeyModal.svelte
Unescape Escape View File

@ -5,7 +5,7 @@
} from '$lib/components/shared-components/notification/notification'; } from '$lib/components/shared-components/notification/notification';
import ApiKeyGrid from '$lib/components/user-settings-page/user-api-key-grid.svelte'; import ApiKeyGrid from '$lib/components/user-settings-page/user-api-key-grid.svelte';
import { Permission } from '@immich/sdk'; import { Permission } from '@immich/sdk';
import { Button, Checkbox, Label, Modal, ModalBody, ModalFooter } from '@immich/ui'; import { Button, Checkbox, HStack, Label, Modal, ModalBody, ModalFooter } from '@immich/ui';
import { mdiKeyVariant } from '@mdi/js'; import { mdiKeyVariant } from '@mdi/js';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { t } from 'svelte-i18n'; import { t } from 'svelte-i18n';
@ -219,9 +219,9 @@
</ModalBody> </ModalBody>
<ModalFooter> <ModalFooter>
<div class="flex gap-3 w-full"> <HStack fullWidth>
<Button shape="round" color="secondary" fullWidth onclick={() => onClose()}>{cancelText}</Button> <Button shape="round" color="secondary" fullWidth onclick={() => onClose()}>{cancelText}</Button>
<Button shape="round" type="submit" fullWidth form="api-key-form">{submitText}</Button> <Button shape="round" type="submit" fullWidth form="api-key-form">{submitText}</Button>
</div> </HStack>
</ModalFooter> </ModalFooter>
</Modal> </Modal>

6
web/src/lib/modals/ApiKeySecretModal.svelte
Unescape Escape View File

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { copyToClipboard } from '$lib/utils'; import { copyToClipboard } from '$lib/utils';
import { Button, Modal, ModalBody, ModalFooter } from '@immich/ui'; import { Button, HStack, Modal, ModalBody, ModalFooter } from '@immich/ui';
import { mdiKeyVariant } from '@mdi/js'; import { mdiKeyVariant } from '@mdi/js';
import { t } from 'svelte-i18n'; import { t } from 'svelte-i18n';
@ -27,9 +27,9 @@
</ModalBody> </ModalBody>
<ModalFooter> <ModalFooter>
<div class="flex gap-3 w-full"> <HStack fullWidth>
<Button shape="round" onclick={() => copyToClipboard(secret)} fullWidth>{$t('copy_to_clipboard')}</Button> <Button shape="round" onclick={() => copyToClipboard(secret)} fullWidth>{$t('copy_to_clipboard')}</Button>
<Button shape="round" onclick={onClose} fullWidth>{$t('done')}</Button> <Button shape="round" onclick={onClose} fullWidth>{$t('done')}</Button>
</div> </HStack>
</ModalFooter> </ModalFooter>
</Modal> </Modal>

6
web/src/lib/modals/AssetTagModal.svelte
Unescape Escape View File

@ -2,7 +2,7 @@
import Icon from '$lib/components/elements/icon.svelte'; import Icon from '$lib/components/elements/icon.svelte';
import { tagAssets } from '$lib/utils/asset-utils'; import { tagAssets } from '$lib/utils/asset-utils';
import { getAllTags, upsertTags, type TagResponseDto } from '@immich/sdk'; import { getAllTags, upsertTags, type TagResponseDto } from '@immich/sdk';
import { Button, Modal, ModalBody, ModalFooter } from '@immich/ui'; import { Button, HStack, Modal, ModalBody, ModalFooter } from '@immich/ui';
import { mdiClose, mdiTag } from '@mdi/js'; import { mdiClose, mdiTag } from '@mdi/js';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { t } from 'svelte-i18n'; import { t } from 'svelte-i18n';
@ -99,9 +99,9 @@
</ModalBody> </ModalBody>
<ModalFooter> <ModalFooter>
<div class="flex w-full gap-2"> <HStack fullWidth>
<Button shape="round" fullWidth color="secondary" onclick={() => onClose()}>{$t('cancel')}</Button> <Button shape="round" fullWidth color="secondary" onclick={() => onClose()}>{$t('cancel')}</Button>
<Button type="submit" shape="round" fullWidth form="create-tag-form" {disabled}>{$t('tag_assets')}</Button> <Button type="submit" shape="round" fullWidth form="create-tag-form" {disabled}>{$t('tag_assets')}</Button>
</div> </HStack>
</ModalFooter> </ModalFooter>
</Modal> </Modal>

6
web/src/lib/modals/AuthDisableLoginConfirmModal.svelte
Unescape Escape View File

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import FormatMessage from '$lib/components/i18n/format-message.svelte'; import FormatMessage from '$lib/components/i18n/format-message.svelte';
import { Button, Modal, ModalBody, ModalFooter } from '@immich/ui'; import { Button, HStack, Modal, ModalBody, ModalFooter } from '@immich/ui';
import { mdiCancel } from '@mdi/js'; import { mdiCancel } from '@mdi/js';
import { t } from 'svelte-i18n'; import { t } from 'svelte-i18n';
@ -32,13 +32,13 @@
</div> </div>
</ModalBody> </ModalBody>
<ModalFooter> <ModalFooter>
<div class="flex gap-3 w-full"> <HStack fullWidth>
<Button shape="round" color="secondary" fullWidth onclick={() => onClose(false)}> <Button shape="round" color="secondary" fullWidth onclick={() => onClose(false)}>
{$t('cancel')} {$t('cancel')}
</Button> </Button>
<Button shape="round" color="danger" fullWidth onclick={() => onClose(true)}> <Button shape="round" color="danger" fullWidth onclick={() => onClose(true)}>
{$t('confirm')} {$t('confirm')}
</Button> </Button>
</div> </HStack>
</ModalFooter> </ModalFooter>
</Modal> </Modal>

6
web/src/lib/modals/ConfirmModal.svelte
Unescape Escape View File

@ -1,5 +1,5 @@
<script lang="ts"> <script lang="ts">
import { Button, Modal, ModalBody, ModalFooter, type Color } from '@immich/ui'; import { Button, HStack, Modal, ModalBody, ModalFooter, type Color } from '@immich/ui';
import type { Snippet } from 'svelte'; import type { Snippet } from 'svelte';
import { t } from 'svelte-i18n'; import { t } from 'svelte-i18n';
@ -38,13 +38,13 @@
</ModalBody> </ModalBody>
<ModalFooter> <ModalFooter>
<div class="flex gap-3 w-full"> <HStack fullWidth>
<Button shape="round" color="secondary" fullWidth onclick={() => onClose(false)}> <Button shape="round" color="secondary" fullWidth onclick={() => onClose(false)}>
{$t('cancel')} {$t('cancel')}
</Button> </Button>
<Button shape="round" color={confirmColor} fullWidth onclick={handleConfirm} {disabled}> <Button shape="round" color={confirmColor} fullWidth onclick={handleConfirm} {disabled}>
{confirmText} {confirmText}
</Button> </Button>
</div> </HStack>
</ModalFooter> </ModalFooter>
</Modal> </Modal>

6
web/src/lib/modals/LibraryExclusionPatternModal.svelte
Unescape Escape View File

@ -1,5 +1,5 @@
<script lang="ts"> <script lang="ts">
import { Button, Modal, ModalBody, ModalFooter } from '@immich/ui'; import { Button, HStack, Modal, ModalBody, ModalFooter } from '@immich/ui';
import { mdiFolderRemove } from '@mdi/js'; import { mdiFolderRemove } from '@mdi/js';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { t } from 'svelte-i18n'; import { t } from 'svelte-i18n';
@ -63,7 +63,7 @@
</form> </form>
</ModalBody> </ModalBody>
<ModalFooter> <ModalFooter>
<div class="flex gap-2 w-full"> <HStack fullWidth>
<Button shape="round" color="secondary" fullWidth onclick={() => onClose()}>{$t('cancel')}</Button> <Button shape="round" color="secondary" fullWidth onclick={() => onClose()}>{$t('cancel')}</Button>
{#if isEditing} {#if isEditing}
<Button shape="round" color="danger" fullWidth onclick={() => onClose({ action: 'delete' })} <Button shape="round" color="danger" fullWidth onclick={() => onClose({ action: 'delete' })}
@ -73,6 +73,6 @@
<Button shape="round" type="submit" disabled={!canSubmit} fullWidth form="add-exclusion-pattern-form"> <Button shape="round" type="submit" disabled={!canSubmit} fullWidth form="add-exclusion-pattern-form">
{submitText} {submitText}
</Button> </Button>
</div> </HStack>
</ModalFooter> </ModalFooter>
</Modal> </Modal>

6
web/src/lib/modals/LibraryImportPathModal.svelte
Unescape Escape View File

@ -1,5 +1,5 @@
<script lang="ts"> <script lang="ts">
import { Button, Modal, ModalBody, ModalFooter } from '@immich/ui'; import { Button, HStack, Modal, ModalBody, ModalFooter } from '@immich/ui';
import { mdiFolderSync } from '@mdi/js'; import { mdiFolderSync } from '@mdi/js';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { t } from 'svelte-i18n'; import { t } from 'svelte-i18n';
@ -60,7 +60,7 @@
</ModalBody> </ModalBody>
<ModalFooter> <ModalFooter>
<div class="flex gap-2 w-full"> <HStack fullWidth>
<Button shape="round" color="secondary" fullWidth onclick={() => onClose()}>{cancelText}</Button> <Button shape="round" color="secondary" fullWidth onclick={() => onClose()}>{cancelText}</Button>
{#if isEditing} {#if isEditing}
<Button shape="round" color="danger" fullWidth onclick={() => onClose({ action: 'delete' })}> <Button shape="round" color="danger" fullWidth onclick={() => onClose({ action: 'delete' })}>
@ -70,6 +70,6 @@
<Button shape="round" type="submit" disabled={!canSubmit} fullWidth form="library-import-path-form"> <Button shape="round" type="submit" disabled={!canSubmit} fullWidth form="library-import-path-form">
{submitText} {submitText}
</Button> </Button>
</div> </HStack>
</ModalFooter> </ModalFooter>
</Modal> </Modal>

6
web/src/lib/modals/LibraryRenameModal.svelte
Unescape Escape View File

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import type { LibraryResponseDto } from '@immich/sdk'; import type { LibraryResponseDto } from '@immich/sdk';
import { Button, Field, Input, Modal, ModalBody, ModalFooter } from '@immich/ui'; import { Button, Field, HStack, Input, Modal, ModalBody, ModalFooter } from '@immich/ui';
import { mdiRenameOutline } from '@mdi/js'; import { mdiRenameOutline } from '@mdi/js';
import { t } from 'svelte-i18n'; import { t } from 'svelte-i18n';
@ -29,9 +29,9 @@
</ModalBody> </ModalBody>
<ModalFooter> <ModalFooter>
<div class="flex gap-2 w-full"> <HStack fullWidth>
<Button shape="round" fullWidth color="secondary" onclick={() => onClose()}>{$t('cancel')}</Button> <Button shape="round" fullWidth color="secondary" onclick={() => onClose()}>{$t('cancel')}</Button>
<Button shape="round" fullWidth type="submit" form="rename-library-form">{$t('save')}</Button> <Button shape="round" fullWidth type="submit" form="rename-library-form">{$t('save')}</Button>
</div> </HStack>
</ModalFooter> </ModalFooter>
</Modal> </Modal>

6
web/src/lib/modals/LibraryUserPickerModal.svelte
Unescape Escape View File

@ -2,7 +2,7 @@
import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte'; import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
import { user } from '$lib/stores/user.store'; import { user } from '$lib/stores/user.store';
import { searchUsersAdmin } from '@immich/sdk'; import { searchUsersAdmin } from '@immich/sdk';
import { Button, Modal, ModalBody, ModalFooter } from '@immich/ui'; import { Button, HStack, Modal, ModalBody, ModalFooter } from '@immich/ui';
import { mdiFolderSync } from '@mdi/js'; import { mdiFolderSync } from '@mdi/js';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { t } from 'svelte-i18n'; import { t } from 'svelte-i18n';
@ -38,9 +38,9 @@
</ModalBody> </ModalBody>
<ModalFooter> <ModalFooter>
<div class="flex gap-2 w-full"> <HStack fullWidth>
<Button shape="round" color="secondary" fullWidth onclick={() => onClose()}>{$t('cancel')}</Button> <Button shape="round" color="secondary" fullWidth onclick={() => onClose()}>{$t('cancel')}</Button>
<Button shape="round" type="submit" fullWidth form="select-library-owner-form">{$t('create')}</Button> <Button shape="round" type="submit" fullWidth form="select-library-owner-form">{$t('create')}</Button>
</div> </HStack>
</ModalFooter> </ModalFooter>
</Modal> </Modal>

6
web/src/lib/modals/MapSettingsModal.svelte
Unescape Escape View File

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte'; import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
import type { MapSettings } from '$lib/stores/preferences.store'; import type { MapSettings } from '$lib/stores/preferences.store';
import { Button, Field, Modal, ModalBody, ModalFooter, Stack, Switch } from '@immich/ui'; import { Button, Field, HStack, Modal, ModalBody, ModalFooter, Stack, Switch } from '@immich/ui';
import { Duration } from 'luxon'; import { Duration } from 'luxon';
import { t } from 'svelte-i18n'; import { t } from 'svelte-i18n';
import { fly } from 'svelte/transition'; import { fly } from 'svelte/transition';
@ -127,9 +127,9 @@
</ModalBody> </ModalBody>
<ModalFooter> <ModalFooter>
<div class="flex gap-3 w-full"> <HStack fullWidth>
<Button color="secondary" shape="round" fullWidth onclick={() => onClose()}>{$t('cancel')}</Button> <Button color="secondary" shape="round" fullWidth onclick={() => onClose()}>{$t('cancel')}</Button>
<Button type="submit" shape="round" fullWidth form="map-settings-form">{$t('save')}</Button> <Button type="submit" shape="round" fullWidth form="map-settings-form">{$t('save')}</Button>
</div> </HStack>
</ModalFooter> </ModalFooter>
</Modal> </Modal>

6
web/src/lib/modals/PasswordResetSuccessModal.svelte
Unescape Escape View File

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { copyToClipboard } from '$lib/utils'; import { copyToClipboard } from '$lib/utils';
import { Button, Code, IconButton, Modal, ModalBody, ModalFooter, Text } from '@immich/ui'; import { Button, Code, HStack, IconButton, Modal, ModalBody, ModalFooter, Text } from '@immich/ui';
import { mdiCheck, mdiContentCopy } from '@mdi/js'; import { mdiCheck, mdiContentCopy } from '@mdi/js';
import { t } from 'svelte-i18n'; import { t } from 'svelte-i18n';
@ -35,10 +35,10 @@
</ModalBody> </ModalBody>
<ModalFooter> <ModalFooter>
<div class="flex gap-3 w-full"> <HStack fullWidth>
<Button shape="round" color="primary" fullWidth onclick={() => onClose()}> <Button shape="round" color="primary" fullWidth onclick={() => onClose()}>
{$t('done')} {$t('done')}
</Button> </Button>
</div> </HStack>
</ModalFooter> </ModalFooter>
</Modal> </Modal>

6
web/src/lib/modals/PersonEditBirthDateModal.svelte
Unescape Escape View File

@ -5,7 +5,7 @@
} from '$lib/components/shared-components/notification/notification'; } from '$lib/components/shared-components/notification/notification';
import { handleError } from '$lib/utils/handle-error'; import { handleError } from '$lib/utils/handle-error';
import { updatePerson, type PersonResponseDto } from '@immich/sdk'; import { updatePerson, type PersonResponseDto } from '@immich/sdk';
import { Button, Modal, ModalBody, ModalFooter } from '@immich/ui'; import { Button, HStack, Modal, ModalBody, ModalFooter } from '@immich/ui';
import { mdiCake } from '@mdi/js'; import { mdiCake } from '@mdi/js';
import { t } from 'svelte-i18n'; import { t } from 'svelte-i18n';
import DateInput from '../components/elements/date-input.svelte'; import DateInput from '../components/elements/date-input.svelte';
@ -65,13 +65,13 @@
</ModalBody> </ModalBody>
<ModalFooter> <ModalFooter>
<div class="flex gap-3 w-full"> <HStack fullWidth>
<Button shape="round" color="secondary" fullWidth onclick={() => onClose()}> <Button shape="round" color="secondary" fullWidth onclick={() => onClose()}>
{$t('cancel')} {$t('cancel')}
</Button> </Button>
<Button type="submit" shape="round" color="primary" fullWidth form="set-birth-date-form"> <Button type="submit" shape="round" color="primary" fullWidth form="set-birth-date-form">
{$t('save')} {$t('save')}
</Button> </Button>
</div> </HStack>
</ModalFooter> </ModalFooter>
</Modal> </Modal>

6
web/src/lib/modals/PersonMergeSuggestionModal.svelte
Unescape Escape View File

@ -7,7 +7,7 @@
import { getPeopleThumbnailUrl } from '$lib/utils'; import { getPeopleThumbnailUrl } from '$lib/utils';
import { handleError } from '$lib/utils/handle-error'; import { handleError } from '$lib/utils/handle-error';
import { mergePerson, type PersonResponseDto } from '@immich/sdk'; import { mergePerson, type PersonResponseDto } from '@immich/sdk';
import { Button, IconButton, Modal, ModalBody, ModalFooter } from '@immich/ui'; import { Button, HStack, IconButton, Modal, ModalBody, ModalFooter } from '@immich/ui';
import { mdiArrowLeft, mdiMerge } from '@mdi/js'; import { mdiArrowLeft, mdiMerge } from '@mdi/js';
import { onMount, tick } from 'svelte'; import { onMount, tick } from 'svelte';
import { t } from 'svelte-i18n'; import { t } from 'svelte-i18n';
@ -139,11 +139,11 @@
</ModalBody> </ModalBody>
<ModalFooter> <ModalFooter>
<div class="flex gap-3 w-full"> <HStack fullWidth>
<Button fullWidth shape="round" color="secondary" onclick={() => onClose()}>{$t('no')}</Button> <Button fullWidth shape="round" color="secondary" onclick={() => onClose()}>{$t('no')}</Button>
<Button id="merge-confirm-button" fullWidth shape="round" onclick={handleMergePerson}> <Button id="merge-confirm-button" fullWidth shape="round" onclick={handleMergePerson}>
{$t('yes')} {$t('yes')}
</Button> </Button>
</div> </HStack>
</ModalFooter> </ModalFooter>
</Modal> </Modal>

6
web/src/lib/modals/SearchFilterModal.svelte
Unescape Escape View File

@ -34,7 +34,7 @@
import { parseUtcDate } from '$lib/utils/date-time'; import { parseUtcDate } from '$lib/utils/date-time';
import { generateId } from '$lib/utils/generate-id'; import { generateId } from '$lib/utils/generate-id';
import { AssetTypeEnum, AssetVisibility, type MetadataSearchDto, type SmartSearchDto } from '@immich/sdk'; import { AssetTypeEnum, AssetVisibility, type MetadataSearchDto, type SmartSearchDto } from '@immich/sdk';
import { Button, Modal, ModalBody, ModalFooter } from '@immich/ui'; import { Button, HStack, Modal, ModalBody, ModalFooter } from '@immich/ui';
import { mdiTune } from '@mdi/js'; import { mdiTune } from '@mdi/js';
import { t } from 'svelte-i18n'; import { t } from 'svelte-i18n';
import { SvelteSet } from 'svelte/reactivity'; import { SvelteSet } from 'svelte/reactivity';
@ -204,11 +204,11 @@
</ModalBody> </ModalBody>
<ModalFooter> <ModalFooter>
<div class="flex gap-3 w-full"> <HStack fullWidth>
<Button shape="round" size="large" type="reset" color="secondary" fullWidth form={formId} <Button shape="round" size="large" type="reset" color="secondary" fullWidth form={formId}
>{$t('clear_all')}</Button >{$t('clear_all')}</Button
> >
<Button shape="round" size="large" type="submit" fullWidth form={formId}>{$t('search')}</Button> <Button shape="round" size="large" type="submit" fullWidth form={formId}>{$t('search')}</Button>
</div> </HStack>
</ModalFooter> </ModalFooter>
</Modal> </Modal>

6
web/src/lib/modals/SlideshowSettingsModal.svelte
Unescape Escape View File

@ -2,7 +2,7 @@
import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte'; import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte'; import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
import { SettingInputFieldType } from '$lib/constants'; import { SettingInputFieldType } from '$lib/constants';
import { Button, Modal, ModalBody, ModalFooter } from '@immich/ui'; import { Button, HStack, Modal, ModalBody, ModalFooter } from '@immich/ui';
import { import {
mdiArrowDownThin, mdiArrowDownThin,
mdiArrowUpThin, mdiArrowUpThin,
@ -105,9 +105,9 @@
</div> </div>
</ModalBody> </ModalBody>
<ModalFooter> <ModalFooter>
<div class="flex gap-2 w-full"> <HStack fullWidth>
<Button color="secondary" shape="round" fullWidth onclick={() => onClose()}>{$t('cancel')}</Button> <Button color="secondary" shape="round" fullWidth onclick={() => onClose()}>{$t('cancel')}</Button>
<Button fullWidth color="primary" shape="round" onclick={applyChanges}>{$t('confirm')}</Button> <Button fullWidth color="primary" shape="round" onclick={applyChanges}>{$t('confirm')}</Button>
</div> </HStack>
</ModalFooter> </ModalFooter>
</Modal> </Modal>

10
web/src/lib/modals/UserCreateModal.svelte
Unescape Escape View File

@ -9,6 +9,7 @@
Button, Button,
Field, Field,
HelperText, HelperText,
HStack,
Input, Input,
Modal, Modal,
ModalBody, ModalBody,
@ -131,10 +132,11 @@
</ModalBody> </ModalBody>
<ModalFooter> <ModalFooter>
<div class="flex gap-3 w-full"> <HStack fullWidth>
<Button color="secondary" fullWidth onclick={() => onClose()} shape="round">{$t('cancel')}</Button> <Button color="secondary" fullWidth onclick={() => onClose()} shape="round">{$t('cancel')}</Button>
<Button type="submit" disabled={!valid} fullWidth shape="round" form="create-new-user-form">{$t('create')}</Button <Button type="submit" disabled={!valid} fullWidth shape="round" form="create-new-user-form"
> >{$t('create')}
</div> </Button>
</HStack>
</ModalFooter> </ModalFooter>
</Modal> </Modal>

6
web/src/lib/modals/UserEditModal.svelte
Unescape Escape View File

@ -5,7 +5,7 @@
import { ByteUnit, convertFromBytes, convertToBytes } from '$lib/utils/byte-units'; import { ByteUnit, convertFromBytes, convertToBytes } from '$lib/utils/byte-units';
import { handleError } from '$lib/utils/handle-error'; import { handleError } from '$lib/utils/handle-error';
import { updateUserAdmin, type UserAdminResponseDto } from '@immich/sdk'; import { updateUserAdmin, type UserAdminResponseDto } from '@immich/sdk';
import { Button, Field, Modal, ModalBody, ModalFooter, Switch } from '@immich/ui'; import { Button, Field, HStack, Modal, ModalBody, ModalFooter, Switch } from '@immich/ui';
import { mdiAccountEditOutline } from '@mdi/js'; import { mdiAccountEditOutline } from '@mdi/js';
import { t } from 'svelte-i18n'; import { t } from 'svelte-i18n';
@ -115,11 +115,11 @@
</ModalBody> </ModalBody>
<ModalFooter> <ModalFooter>
<div class="flex gap-3 w-full"> <HStack fullWidth>
<Button shape="round" color="secondary" fullWidth form="edit-user-form" onclick={() => onClose()} <Button shape="round" color="secondary" fullWidth form="edit-user-form" onclick={() => onClose()}
>{$t('cancel')}</Button >{$t('cancel')}</Button
> >
<Button type="submit" shape="round" fullWidth form="edit-user-form">{$t('confirm')}</Button> <Button type="submit" shape="round" fullWidth form="edit-user-form">{$t('confirm')}</Button>
</div> </HStack>
</ModalFooter> </ModalFooter>
</Modal> </Modal>

6
web/src/lib/modals/UserRestoreConfirmModal.svelte
Unescape Escape View File

@ -2,7 +2,7 @@
import FormatMessage from '$lib/components/i18n/format-message.svelte'; import FormatMessage from '$lib/components/i18n/format-message.svelte';
import { handleError } from '$lib/utils/handle-error'; import { handleError } from '$lib/utils/handle-error';
import { restoreUserAdmin, type UserAdminResponseDto, type UserResponseDto } from '@immich/sdk'; import { restoreUserAdmin, type UserAdminResponseDto, type UserResponseDto } from '@immich/sdk';
import { Button, Modal, ModalBody, ModalFooter } from '@immich/ui'; import { Button, HStack, Modal, ModalBody, ModalFooter } from '@immich/ui';
import { mdiDeleteRestore } from '@mdi/js'; import { mdiDeleteRestore } from '@mdi/js';
import { t } from 'svelte-i18n'; import { t } from 'svelte-i18n';
@ -35,13 +35,13 @@
</ModalBody> </ModalBody>
<ModalFooter> <ModalFooter>
<div class="flex gap-3 w-full"> <HStack fullWidth>
<Button shape="round" color="secondary" fullWidth onclick={() => onClose()}> <Button shape="round" color="secondary" fullWidth onclick={() => onClose()}>
{$t('cancel')} {$t('cancel')}
</Button> </Button>
<Button shape="round" color="primary" fullWidth onclick={() => handleRestoreUser()}> <Button shape="round" color="primary" fullWidth onclick={() => handleRestoreUser()}>
{$t('restore')} {$t('restore')}
</Button> </Button>
</div> </HStack>
</ModalFooter> </ModalFooter>
</Modal> </Modal>

8
web/src/routes/(user)/tags/[[photos=photos]]/[[assetId=id]]/+page.svelte
Unescape Escape View File

@ -191,10 +191,10 @@
</ModalBody> </ModalBody>
<ModalFooter> <ModalFooter>
<div class="flex w-full gap-2"> <HStack fullWidth>
<Button color="secondary" fullWidth shape="round" onclick={() => handleCancel()}>{$t('cancel')}</Button> <Button color="secondary" fullWidth shape="round" onclick={() => handleCancel()}>{$t('cancel')}</Button>
<Button type="submit" fullWidth shape="round" form="create-tag-form">{$t('create')}</Button> <Button type="submit" fullWidth shape="round" form="create-tag-form">{$t('create')}</Button>
</div> </HStack>
</ModalFooter> </ModalFooter>
</Modal> </Modal>
{/if} {/if}
@ -214,10 +214,10 @@
</ModalBody> </ModalBody>
<ModalFooter> <ModalFooter>
<div class="flex w-full gap-2"> <HStack fullWidth>
<Button color="secondary" fullWidth shape="round" onclick={() => handleCancel()}>{$t('cancel')}</Button> <Button color="secondary" fullWidth shape="round" onclick={() => handleCancel()}>{$t('cancel')}</Button>
<Button type="submit" fullWidth shape="round" form="edit-tag-form">{$t('save')}</Button> <Button type="submit" fullWidth shape="round" form="edit-tag-form">{$t('save')}</Button>
</div> </HStack>
</ModalFooter> </ModalFooter>
</Modal> </Modal>
{/if} {/if}