mirrors/pocket-id
1
0
Fork 0
mirror of https://github.com/pocket-id/pocket-id.git synced 2026-02-16 21:39:11 +00:00
Code Activity

feat: use icon instead of text on application image update hover state

Browse Source
This commit is contained in:
Elias Schneider
2025-06-13 12:07:14 +02:00
parent c0f055c3c0
commit 215531d65c
1 changed files with 14 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
frontend/src/routes/settings/admin/application-configuration/application-image.svelte
View File

@@ -1,8 +1,8 @@
<script lang="ts"> <script lang="ts">
import FileInput from '$lib/components/form/file-input.svelte'; import FileInput from '$lib/components/form/file-input.svelte';
import { Label } from '$lib/components/ui/label'; import { Label } from '$lib/components/ui/label';
import { m } from '$lib/paraglide/messages';
import { cn } from '$lib/utils/style'; import { cn } from '$lib/utils/style';
import { LucideUpload } from '@lucide/svelte';
import type { HTMLAttributes } from 'svelte/elements'; import type { HTMLAttributes } from 'svelte/elements';
let { let {
@@ -44,11 +44,12 @@
<Label class="w-52" for={id}>{label}</Label> <Label class="w-52" for={id}>{label}</Label>
<FileInput {id} variant="secondary" {accept} onchange={onImageChange}> <FileInput {id} variant="secondary" {accept} onchange={onImageChange}>
<div <div
class="{forceColorScheme === 'light' class={{
? 'bg-[#F1F1F5]' 'group relative flex items-center rounded': true,
: forceColorScheme === 'dark' 'bg-[#F1F1F5]': forceColorScheme === 'light',
? 'bg-[#27272A]' 'bg-[#27272A]': forceColorScheme === 'dark',
: 'bg-muted'} group relative flex items-center rounded" 'bg-muted': !forceColorScheme
}}
> >
<img <img
class={cn( class={cn(
@@ -58,11 +59,13 @@
src={imageDataURL} src={imageDataURL}
alt={label} alt={label}
/> />
<span <LucideUpload
class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 transform font-medium opacity-0 transition-opacity group-hover:opacity-100" class={{
> 'absolute top-1/2 left-1/2 size-5 -translate-x-1/2 -translate-y-1/2 transform font-medium opacity-0 transition-opacity group-hover:opacity-100': true,
{m.update()} 'text-black': forceColorScheme === 'light',
</span> 'text-white': forceColorScheme === 'dark'
}}
/>
</div> </div>
</FileInput> </FileInput>
</div> </div>