git-sync/profilarr
1
0
Fork 0
mirror of https://github.com/Dictionarry-Hub/profilarr.git synced 2026-01-22 19:01:02 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: enhance accent color support across the application

Browse Source 
- Introduced new accent colors (green, orange, teal, purple, rose) in the accent store.
- Updated CSS variables for accent colors in app.css.
- Refactored components to utilize accent colors for buttons, inputs, dropdowns, and tags.
- Improved accessibility and visual consistency by replacing hardcoded colors with accent variables.
- Adjusted styles in various components including modals, tables, and forms to reflect the new accent color scheme.
This commit is contained in:
Sam Chau
2025-12-29 01:12:59 +10:30
parent 0af19ed7ea
commit def987d8e9
24 changed files with 157 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/app.css
View File

@@ -7,6 +7,19 @@
@theme {
--font-sans: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
--font-mono: 'Geist Mono', ui-monospace, monospace;
/* Accent colors using CSS variables set by accent store */
--color-accent-50: var(--accent-50);
--color-accent-100: var(--accent-100);
--color-accent-200: var(--accent-200);
--color-accent-300: var(--accent-300);
--color-accent-400: var(--accent-400);
--color-accent-500: var(--accent-500);
--color-accent-600: var(--accent-600);
--color-accent-700: var(--accent-700);
--color-accent-800: var(--accent-800);
--color-accent-900: var(--accent-900);
--color-accent-950: var(--accent-950);
}
@layer base {
@@ -14,6 +27,21 @@
font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
}
/* Default accent colors (blue) - overridden by JS */
:root {
--accent-50: #eff6ff;
--accent-100: #dbeafe;
--accent-200: #bfdbfe;
--accent-300: #93c5fd;
--accent-400: #60a5fa;
--accent-500: #3b82f6;
--accent-600: #2563eb;
--accent-700: #1d4ed8;
--accent-800: #1e40af;
--accent-900: #1e3a8a;
--accent-950: #172554;
}
html {
@apply bg-neutral-50 dark:bg-neutral-900;
}

55
src/lib/client/stores/accent.ts
View File

@@ -5,13 +5,62 @@
import { writable } from 'svelte/store';
import { browser } from '$app/environment';
export type AccentColor = 'blue' | 'yellow';
export type AccentColor = 'blue' | 'yellow' | 'green' | 'orange' | 'teal' | 'purple' | 'rose';
// Color palettes for each accent (matching Tailwind shades)
const colorPalettes: Record<AccentColor, {
50: string; 100: string; 200: string; 300: string; 400: string;
500: string; 600: string; 700: string; 800: string; 900: string; 950: string
}> = {
blue: {
50: '#eff6ff', 100: '#dbeafe', 200: '#bfdbfe', 300: '#93c5fd', 400: '#60a5fa',
500: '#3b82f6', 600: '#2563eb', 700: '#1d4ed8', 800: '#1e40af', 900: '#1e3a8a', 950: '#172554'
},
yellow: {
50: '#fefce8', 100: '#fef9c3', 200: '#fef08a', 300: '#fde047', 400: '#facc15',
500: '#eab308', 600: '#ca8a04', 700: '#a16207', 800: '#854d0e', 900: '#713f12', 950: '#422006'
},
green: {
50: '#f0fdf4', 100: '#dcfce7', 200: '#bbf7d0', 300: '#86efac', 400: '#4ade80',
500: '#22c55e', 600: '#16a34a', 700: '#15803d', 800: '#166534', 900: '#14532d', 950: '#052e16'
},
orange: {
50: '#fff7ed', 100: '#ffedd5', 200: '#fed7aa', 300: '#fdba74', 400: '#fb923c',
500: '#f97316', 600: '#ea580c', 700: '#c2410c', 800: '#9a3412', 900: '#7c2d12', 950: '#431407'
},
teal: {
50: '#f0fdfa', 100: '#ccfbf1', 200: '#99f6e4', 300: '#5eead4', 400: '#2dd4bf',
500: '#14b8a6', 600: '#0d9488', 700: '#0f766e', 800: '#115e59', 900: '#134e4a', 950: '#042f2e'
},
purple: {
50: '#faf5ff', 100: '#f3e8ff', 200: '#e9d5ff', 300: '#d8b4fe', 400: '#c084fc',
500: '#a855f7', 600: '#9333ea', 700: '#7e22ce', 800: '#6b21a8', 900: '#581c87', 950: '#3b0764'
},
rose: {
50: '#fff1f2', 100: '#ffe4e6', 200: '#fecdd3', 300: '#fda4af', 400: '#fb7185',
500: '#f43f5e', 600: '#e11d48', 700: '#be123c', 800: '#9f1239', 900: '#881337', 950: '#4c0519'
}
};
export const accentColors: { value: AccentColor; label: string; color: string }[] = [
{ value: 'blue', label: 'Blue', color: '#2563eb' },
{ value: 'yellow', label: 'Yellow', color: '#eab308' }
{ value: 'yellow', label: 'Yellow', color: '#eab308' },
{ value: 'green', label: 'Green', color: '#16a34a' },
{ value: 'orange', label: 'Orange', color: '#ea580c' },
{ value: 'teal', label: 'Teal', color: '#0d9488' },
{ value: 'purple', label: 'Purple', color: '#9333ea' },
{ value: 'rose', label: 'Rose', color: '#e11d48' }
];
function applyAccentColors(accent: AccentColor) {
if (!browser) return;
const palette = colorPalettes[accent];
const root = document.documentElement;
Object.entries(palette).forEach(([shade, color]) => {
root.style.setProperty(`--accent-${shade}`, color);
});
}
function createAccentStore() {
let initialAccent: AccentColor = 'blue';
if (browser) {
@@ -19,12 +68,14 @@ function createAccentStore() {
if (stored && accentColors.some((c) => c.value === stored)) {
initialAccent = stored;
}
applyAccentColors(initialAccent);
}
const { subscribe, set } = writable<AccentColor>(initialAccent);
function setAccent(accent: AccentColor) {
set(accent);
applyAccentColors(accent);
if (browser) {
localStorage.setItem('accent', accent);
}

35
src/lib/client/ui/button/Button.svelte Normal file
View File

@@ -0,0 +1,35 @@
<script lang="ts">
import type { ComponentType } from 'svelte';
export let variant: 'primary' | 'secondary' | 'danger' = 'primary';
export let size: 'sm' | 'md' = 'md';
export let disabled: boolean = false;
export let icon: ComponentType | undefined = undefined;
export let type: 'button' | 'submit' = 'button';
const baseClasses =
'inline-flex items-center justify-center font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50';
const sizeClasses = {
sm: 'gap-1.5 rounded-md px-3 py-1.5 text-xs',
md: 'gap-2 rounded-lg px-4 py-2 text-sm'
};
const variantClasses = {
primary:
'bg-accent-600 text-white hover:bg-accent-700 dark:bg-accent-500 dark:hover:bg-accent-600',
secondary:
'border border-neutral-300 bg-white text-neutral-700 hover:bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-300 dark:hover:bg-neutral-700',
danger:
'bg-red-600 text-white hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-600'
};
$: classes = `${baseClasses} ${sizeClasses[size]} ${variantClasses[variant]}`;
</script>
<button {type} {disabled} class={classes} on:click>
{#if icon}
<svelte:component this={icon} size={size === 'sm' ? 14 : 16} />
{/if}
<slot />
</button>

6
src/lib/client/ui/dropdown/CustomGroupManager.svelte
View File

@@ -34,17 +34,17 @@
type="text"
bind:value={newGroupName}
placeholder="Group name"
class="block w-full rounded border border-neutral-300 bg-white px-2 py-1.5 text-xs text-neutral-900 placeholder-neutral-400 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-50 dark:placeholder-neutral-500"
class="block w-full rounded border border-neutral-300 bg-white px-2 py-1.5 text-xs text-neutral-900 placeholder-neutral-400 focus:border-accent-500 focus:ring-1 focus:ring-accent-500 focus:outline-none dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-50 dark:placeholder-neutral-500"
/>
<input
type="text"
bind:value={newGroupTags}
placeholder="Tags (comma-separated)"
class="block w-full rounded border border-neutral-300 bg-white px-2 py-1.5 text-xs text-neutral-900 placeholder-neutral-400 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-50 dark:placeholder-neutral-500"
class="block w-full rounded border border-neutral-300 bg-white px-2 py-1.5 text-xs text-neutral-900 placeholder-neutral-400 focus:border-accent-500 focus:ring-1 focus:ring-accent-500 focus:outline-none dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-50 dark:placeholder-neutral-500"
/>
<button
type="submit"
class="w-full rounded bg-blue-600 px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-blue-500 dark:hover:bg-blue-600"
class="w-full rounded bg-accent-600 px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-accent-700 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-accent-500 dark:hover:bg-accent-600"
disabled={!newGroupName || !newGroupTags}
>
Add Group

2
src/lib/client/ui/dropdown/DropdownItem.svelte
View File

@@ -24,6 +24,6 @@
{/if}
<span class="flex-1">{label}</span>
{#if selected}
<Check size={16} class="text-blue-600 dark:text-blue-400" />
<Check size={16} class="text-accent-600 dark:text-accent-400" />
{/if}
</button>

4
src/lib/client/ui/form/FormInput.svelte
View File

@@ -22,14 +22,14 @@
bind:value
{placeholder}
rows="6"
class="block w-full rounded-lg border border-neutral-300 bg-white px-3 py-2 text-neutral-900 placeholder-neutral-400 transition-colors focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-50 dark:placeholder-neutral-500"
class="block w-full rounded-lg border border-neutral-300 bg-white px-3 py-2 text-neutral-900 placeholder-neutral-400 transition-colors focus:border-accent-500 focus:outline-none focus:ring-1 focus:ring-accent-500 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-50 dark:placeholder-neutral-500"
></textarea>
{:else}
<input
type="text"
bind:value
{placeholder}
class="block w-full rounded-lg border border-neutral-300 bg-white px-3 py-2 text-neutral-900 placeholder-neutral-400 transition-colors focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-50 dark:placeholder-neutral-500"
class="block w-full rounded-lg border border-neutral-300 bg-white px-3 py-2 text-neutral-900 placeholder-neutral-400 transition-colors focus:border-accent-500 focus:outline-none focus:ring-1 focus:ring-accent-500 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-50 dark:placeholder-neutral-500"
/>
{/if}
</div>

2
src/lib/client/ui/form/NumberInput.svelte
View File

@@ -58,7 +58,7 @@
{step}
{required}
{disabled}
class="block w-full [appearance:textfield] rounded-lg border border-neutral-300 bg-white px-3 py-2 pr-10 text-neutral-900 placeholder-neutral-400 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none disabled:bg-neutral-100 disabled:text-neutral-500 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-50 dark:placeholder-neutral-500 dark:disabled:bg-neutral-900 dark:disabled:text-neutral-600 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none {fontClass}"
class="block w-full [appearance:textfield] rounded-lg border border-neutral-300 bg-white px-3 py-2 pr-10 text-neutral-900 placeholder-neutral-400 focus:border-accent-500 focus:ring-1 focus:ring-accent-500 focus:outline-none disabled:bg-neutral-100 disabled:text-neutral-500 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-50 dark:placeholder-neutral-500 dark:disabled:bg-neutral-900 dark:disabled:text-neutral-600 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none {fontClass}"
/>
<!-- Custom increment/decrement buttons -->

4
src/lib/client/ui/form/TagInput.svelte
View File

@@ -34,13 +34,13 @@
>
{#each tags as tag, index (tag)}
<div
class="flex items-center gap-1 rounded bg-blue-100 px-2 py-1 text-sm text-blue-800 dark:bg-blue-900/30 dark:text-blue-300"
class="flex items-center gap-1 rounded bg-accent-100 px-2 py-1 text-sm text-accent-800 dark:bg-accent-900/30 dark:text-accent-300"
>
<span>{tag}</span>
<button
type="button"
on:click={() => removeTag(index)}
class="hover:text-blue-900 dark:hover:text-blue-100"
class="hover:text-accent-900 dark:hover:text-accent-100"
aria-label="Remove tag"
>
<X size={14} />

2
src/lib/client/ui/modal/Modal.svelte
View File

@@ -84,7 +84,7 @@
on:click={handleConfirm}
class={confirmDanger
? 'flex items-center gap-2 rounded-lg border border-red-600 bg-red-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-red-700 dark:border-red-500 dark:bg-red-500 dark:hover:bg-red-600'
: 'flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600'}
: 'flex items-center gap-2 rounded-lg bg-accent-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-accent-700 dark:bg-accent-500 dark:hover:bg-accent-600'}
>
<Check size={16} />
{confirmText}

4
src/lib/client/ui/modal/SaveTargetModal.svelte
View File

@@ -82,7 +82,7 @@
<button
type="button"
on:click={() => handleSelect('user')}
class="flex w-full items-start gap-4 rounded-lg border border-neutral-200 bg-white p-4 text-left transition-colors hover:border-blue-300 hover:bg-blue-50 dark:border-neutral-700 dark:bg-neutral-800 dark:hover:border-blue-600 dark:hover:bg-blue-950"
class="flex w-full items-start gap-4 rounded-lg border border-neutral-200 bg-white p-4 text-left transition-colors hover:border-accent-300 hover:bg-accent-50 dark:border-neutral-700 dark:bg-neutral-800 dark:hover:border-accent-600 dark:hover:bg-accent-950"
>
<div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-neutral-100 text-neutral-600 dark:bg-neutral-700 dark:text-neutral-300">
<User size={20} />
@@ -98,7 +98,7 @@
<button
type="button"
on:click={() => handleSelect('base')}
class="flex w-full items-start gap-4 rounded-lg border border-neutral-200 bg-white p-4 text-left transition-colors hover:border-blue-300 hover:bg-blue-50 dark:border-neutral-700 dark:bg-neutral-800 dark:hover:border-blue-600 dark:hover:bg-blue-950"
class="flex w-full items-start gap-4 rounded-lg border border-neutral-200 bg-white p-4 text-left transition-colors hover:border-accent-300 hover:bg-accent-50 dark:border-neutral-700 dark:bg-neutral-800 dark:hover:border-accent-600 dark:hover:bg-accent-950"
>
<div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-neutral-100 text-neutral-600 dark:bg-neutral-700 dark:text-neutral-300">
<GitBranch size={20} />

2
src/lib/client/ui/navigation/tabs/Tabs.svelte
View File

@@ -26,7 +26,7 @@
href={tab.href}
data-sveltekit-preload-data="tap"
class="flex items-center gap-2 border-b-2 px-4 py-3 text-sm font-medium transition-colors {tab.active
? 'border-blue-600 text-blue-600 dark:border-blue-500 dark:text-blue-500'
? 'border-accent-600 text-accent-600 dark:border-accent-500 dark:text-accent-500'
: 'border-transparent text-neutral-600 hover:border-neutral-300 hover:text-neutral-900 dark:text-neutral-400 dark:hover:border-neutral-700 dark:hover:text-neutral-50'}"
>
{#if tab.icon}

2
src/lib/client/ui/state/EmptyState.svelte
View File

@@ -31,7 +31,7 @@
<!-- Action Button -->
<a
href={buttonHref}
class="inline-flex items-center gap-2 rounded-lg bg-blue-600 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600"
class="inline-flex items-center gap-2 rounded-lg bg-accent-600 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-accent-700 dark:bg-accent-500 dark:hover:bg-accent-600"
>
<svelte:component this={buttonIcon} size={18} />
{buttonText}

4
src/lib/client/ui/table/ExpandableTable.svelte
View File

@@ -118,9 +118,9 @@
{column.header}
{#if sortState?.key === column.key}
{#if sortState.direction === 'asc'}
<ArrowUp size={12} class="text-blue-500" />
<ArrowUp size={12} class="text-accent-500" />
{:else}
<ArrowDown size={12} class="text-blue-500" />
<ArrowDown size={12} class="text-accent-500" />
{/if}
{:else}
<ArrowUpDown size={12} class="opacity-30" />

2
src/routes/+layout.svelte
View File

@@ -15,6 +15,6 @@
<PageNav />
<AlertContainer />
<main class="pt-16 pl-72">
<main class="pl-72">
<slot />
</main>

12
src/routes/delay-profiles/[databaseId]/components/DelayProfileForm.svelte
View File

@@ -155,7 +155,7 @@
name="name"
bind:value={name}
placeholder="e.g., Standard Delay"
class="mt-1 block w-full rounded-lg border border-neutral-300 bg-white px-3 py-2 text-sm text-neutral-900 placeholder-neutral-400 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-100 dark:placeholder-neutral-500"
class="mt-1 block w-full rounded-lg border border-neutral-300 bg-white px-3 py-2 text-sm text-neutral-900 placeholder-neutral-400 focus:border-accent-500 focus:outline-none focus:ring-1 focus:ring-accent-500 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-100 dark:placeholder-neutral-500"
/>
</div>
@@ -186,11 +186,11 @@
type="button"
on:click={() => (preferredProtocol = option.value)}
class="flex items-center gap-3 rounded-lg border p-3 text-left transition-colors {preferredProtocol === option.value
? 'border-blue-500 bg-blue-50 dark:border-blue-400 dark:bg-blue-950'
? 'border-accent-500 bg-accent-50 dark:border-accent-400 dark:bg-accent-950'
: 'border-neutral-200 bg-white hover:border-neutral-300 dark:border-neutral-700 dark:bg-neutral-800 dark:hover:border-neutral-600'}"
>
<div class="flex h-5 w-5 items-center justify-center rounded-full border-2 {preferredProtocol === option.value
? 'border-blue-500 bg-blue-500 dark:border-blue-400 dark:bg-blue-400'
? 'border-accent-500 bg-accent-500 dark:border-accent-400 dark:bg-accent-400'
: 'border-neutral-300 dark:border-neutral-600'}">
{#if preferredProtocol === option.value}
<Check size={12} class="text-white" />
@@ -266,7 +266,7 @@
<input
type="checkbox"
bind:checked={bypassIfHighestQuality}
class="h-4 w-4 rounded border-neutral-300 text-blue-600 focus:ring-blue-500 dark:border-neutral-600 dark:bg-neutral-700"
class="h-4 w-4 rounded border-neutral-300 text-accent-600 focus:ring-accent-500 dark:border-neutral-600 dark:bg-neutral-700"
/>
<div>
<div class="text-sm font-medium text-neutral-900 dark:text-neutral-100">Bypass if Highest Quality</div>
@@ -280,7 +280,7 @@
<input
type="checkbox"
bind:checked={bypassIfAboveCfScore}
class="h-4 w-4 rounded border-neutral-300 text-blue-600 focus:ring-blue-500 dark:border-neutral-600 dark:bg-neutral-700"
class="h-4 w-4 rounded border-neutral-300 text-accent-600 focus:ring-accent-500 dark:border-neutral-600 dark:bg-neutral-700"
/>
<div>
<div class="text-sm font-medium text-neutral-900 dark:text-neutral-100">Bypass if Above Custom Format Score</div>
@@ -336,7 +336,7 @@
type="button"
disabled={saving || !isValid}
on:click={handleSaveClick}
class="flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-blue-500 dark:hover:bg-blue-600"
class="flex items-center gap-2 rounded-lg bg-accent-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-accent-700 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-accent-500 dark:hover:bg-accent-600"
>
{#if saving}
<Loader2 size={14} class="animate-spin" />

2
src/routes/delay-profiles/[databaseId]/views/CardView.svelte
View File

@@ -55,7 +55,7 @@
{#if profile.tags.length > 0}
<div class="mt-2 flex flex-wrap gap-1">
{#each profile.tags as tag}
<span class="inline-flex items-center px-1.5 py-0.5 rounded font-mono text-[10px] bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
<span class="inline-flex items-center px-1.5 py-0.5 rounded font-mono text-[10px] bg-accent-100 text-accent-800 dark:bg-accent-900 dark:text-accent-200">
{tag.name}
</span>
{/each}

2
src/routes/delay-profiles/[databaseId]/views/TableView.svelte
View File

@@ -51,7 +51,7 @@
${row.tags.length > 0 ? `
<div class="mt-1 flex flex-wrap gap-1">
${row.tags.map(tag => `
<span class="inline-flex items-center px-2 py-0.5 rounded font-mono text-[10px] bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
<span class="inline-flex items-center px-2 py-0.5 rounded font-mono text-[10px] bg-accent-100 text-accent-800 dark:bg-accent-900 dark:text-accent-200">
${tag.name}
</span>
`).join('')}

4
src/routes/quality-profiles/[databaseId]/[id]/languages/+page.svelte
View File

@@ -148,7 +148,7 @@
placeholder="Search for a language..."
class="block w-full rounded-lg border px-3 py-2 text-sm text-neutral-900 placeholder-neutral-400 transition-colors focus:outline-none focus:ring-1 dark:text-neutral-50 dark:placeholder-neutral-500 {showValidationError
? 'border-red-300 bg-red-50 focus:border-red-500 focus:ring-red-500 dark:border-red-700 dark:bg-red-950 dark:focus:border-red-500'
: 'border-neutral-300 bg-white focus:border-blue-500 focus:ring-blue-500 dark:border-neutral-700 dark:bg-neutral-800'}"
: 'border-neutral-300 bg-white focus:border-accent-500 focus:ring-accent-500 dark:border-neutral-700 dark:bg-neutral-800'}"
/>
{#if showValidationError}
@@ -182,7 +182,7 @@
<div>
<div class="flex items-center gap-2 font-medium text-neutral-900 dark:text-neutral-100">
<span>Preferred</span>
<span class="inline-flex items-center rounded px-1.5 py-0.5 text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">Radarr Only</span>
<span class="inline-flex items-center rounded px-1.5 py-0.5 text-xs font-medium bg-accent-100 text-accent-800 dark:bg-accent-900 dark:text-accent-200">Radarr Only</span>
</div>
<div class="mt-1">Uses Radarr's built-in language preference setting</div>
</div>

8
src/routes/quality-profiles/[databaseId]/[id]/qualities/+page.svelte
View File

@@ -356,7 +356,7 @@
<div class="absolute inset-0 rounded-lg border-2 border-dashed border-green-500 bg-green-50/30 dark:border-green-400 dark:bg-green-950/30 pointer-events-none"></div>
{/if}
{#if hoverTargetIndex === index && willAddToGroup}
<div class="absolute inset-0 rounded-lg border-2 border-dashed border-blue-500 bg-blue-50/30 dark:border-blue-400 dark:bg-blue-950/30 pointer-events-none"></div>
<div class="absolute inset-0 rounded-lg border-2 border-dashed border-accent-500 bg-accent-50/30 dark:border-accent-400 dark:bg-accent-950/30 pointer-events-none"></div>
{/if}
<div class="flex items-center justify-between relative">
<div class="flex-1">
@@ -370,13 +370,13 @@
if (e.key === 'Enter') saveGroupName();
if (e.key === 'Escape') cancelEditingGroupName();
}}
class="max-w-xs rounded border border-blue-500 bg-white px-2 py-1 text-sm font-medium text-neutral-900 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-neutral-800 dark:text-neutral-100"
class="max-w-xs rounded border border-accent-500 bg-white px-2 py-1 text-sm font-medium text-neutral-900 focus:outline-none focus:ring-2 focus:ring-accent-500 dark:bg-neutral-800 dark:text-neutral-100"
/>
{:else}
<div class="font-medium text-neutral-900 dark:text-neutral-100">
{#if item.type === 'group'}
<span
class="cursor-pointer hover:text-blue-600 dark:hover:text-blue-400"
class="cursor-pointer hover:text-accent-600 dark:hover:text-accent-400"
on:click={(e) => {
e.stopPropagation();
startEditingGroupName(item, index);
@@ -411,7 +411,7 @@
Create Group
</div>
{:else if hoverTargetIndex === index && willAddToGroup}
<div class="text-xs font-medium text-blue-600 dark:text-blue-400">
<div class="text-xs font-medium text-accent-600 dark:text-accent-400">
Add to Group
</div>
{/if}

4
src/routes/quality-profiles/[databaseId]/[id]/scoring/+page.svelte
View File

@@ -699,11 +699,11 @@
type="text"
bind:value={newProfileName}
placeholder="Profile name"
class="block w-full rounded border border-neutral-300 bg-white px-2 py-1.5 text-xs text-neutral-900 placeholder-neutral-400 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-50 dark:placeholder-neutral-500"
class="block w-full rounded border border-neutral-300 bg-white px-2 py-1.5 text-xs text-neutral-900 placeholder-neutral-400 focus:border-accent-500 focus:ring-1 focus:ring-accent-500 focus:outline-none dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-50 dark:placeholder-neutral-500"
/>
<button
type="submit"
class="w-full rounded bg-blue-600 px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-blue-500 dark:hover:bg-blue-600"
class="w-full rounded bg-accent-600 px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-accent-700 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-accent-500 dark:hover:bg-accent-600"
disabled={!newProfileName.trim()}
>
Save Profile

4
src/routes/quality-profiles/[databaseId]/views/CardView.svelte
View File

@@ -24,7 +24,7 @@
{#if profile.tags.length > 0}
<div class="mt-2 flex flex-wrap gap-1">
{#each profile.tags as tag}
<span class="inline-flex items-center px-1.5 py-0.5 rounded font-mono text-[10px] bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
<span class="inline-flex items-center px-1.5 py-0.5 rounded font-mono text-[10px] bg-accent-100 text-accent-800 dark:bg-accent-900 dark:text-accent-200">
{tag.name}
</span>
{/each}
@@ -47,7 +47,7 @@
{/if}
<span class="inline-flex items-center px-1.5 py-0.5 rounded border text-[10px] font-mono text-neutral-900 dark:text-neutral-100
{quality.is_upgrade_until
? 'border-blue-200 bg-blue-50 dark:border-blue-800 dark:bg-blue-950'
? 'border-accent-200 bg-accent-50 dark:border-accent-800 dark:bg-accent-950'
: 'border-neutral-200 bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-800'}">
{quality.name}
</span>

4
src/routes/quality-profiles/[databaseId]/views/TableView.svelte
View File

@@ -29,7 +29,7 @@
${row.tags.length > 0 ? `
<div class="mt-1 flex flex-wrap gap-1">
${row.tags.map(tag => `
<span class="inline-flex items-center px-2 py-0.5 rounded font-mono text-[10px] bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
<span class="inline-flex items-center px-2 py-0.5 rounded font-mono text-[10px] bg-accent-100 text-accent-800 dark:bg-accent-900 dark:text-accent-200">
${tag.name}
</span>
`).join('')}
@@ -59,7 +59,7 @@
${row.qualities.map(q => `
<div class="relative px-2 py-0.5 rounded border ${
q.is_upgrade_until
? 'border-blue-200 bg-blue-50 dark:border-blue-800 dark:bg-blue-950'
? 'border-accent-200 bg-accent-50 dark:border-accent-800 dark:bg-accent-950'
: 'border-neutral-200 bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-800'
}">
<span class="font-mono text-xs">${q.name}</span>

6
src/routes/settings/about/+page.svelte
View File

@@ -167,7 +167,7 @@
</span>
{#if migration.latest}
<span
class="rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-800 dark:bg-blue-900/30 dark:text-blue-400"
class="rounded-full bg-accent-100 px-2 py-0.5 text-xs font-medium text-accent-800 dark:bg-accent-900/30 dark:text-accent-400"
>
Latest
</span>
@@ -215,13 +215,13 @@
target="_blank"
rel="noopener noreferrer"
data-sveltekit-reload
class="font-mono text-sm font-medium text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
class="font-mono text-sm font-medium text-accent-600 hover:text-accent-700 dark:text-accent-400 dark:hover:text-accent-300"
>
{release.tag_name}
</a>
{#if index === 0}
<span
class="rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-800 dark:bg-blue-900/30 dark:text-blue-400"
class="rounded-full bg-accent-100 px-2 py-0.5 text-xs font-medium text-accent-800 dark:bg-accent-900/30 dark:text-accent-400"
>
Latest
</span>

2
src/routes/settings/about/components/InfoRow.svelte
View File

@@ -22,7 +22,7 @@
target="_blank"
rel="noopener noreferrer"
data-sveltekit-reload
class="rounded bg-neutral-100 px-2 py-1 font-mono text-blue-600 hover:text-blue-700 dark:bg-neutral-800 dark:text-blue-400 dark:hover:text-blue-300"
class="rounded bg-neutral-100 px-2 py-1 font-mono text-accent-600 hover:text-accent-700 dark:bg-neutral-800 dark:text-accent-400 dark:hover:text-accent-300"
>
{value}
</a>