Amkor/Groupware
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: apply dark glassmorphism theme to License list and JobReport daily summary dialog

Browse Source
This commit is contained in:
backuppc
2025-12-30 14:16:46 +09:00
parent d11a86b58d
commit 959b1b685d
32 changed files with 3720 additions and 2162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
Project/frontend/src/components/settings/SettingsTheme.tsx Normal file
View File

@@ -0,0 +1,82 @@
import { SettingsModel } from '@/types';
import { Theme } from '@/context/ThemeContext';
interface SettingsThemeProps {
settings: SettingsModel;
currentTheme: Theme;
onSelect: (theme: string) => void;
}
export function SettingsTheme({ settings, currentTheme, onSelect }: SettingsThemeProps) {
return (
<div className="space-y-6">
<h3 className="text-lg font-semibold text-white/90">테마 선택</h3>
<div className="grid grid-cols-1 gap-4">
{/* Dark Theme */}
<button
onClick={() => onSelect('dark')}
className={`relative group p-4 rounded-xl border-2 transition-all duration-300 text-left ${settings.Theme === 'dark' || (!settings.Theme && currentTheme === 'dark')
? 'border-primary-500 bg-primary-500/10'
: 'border-white/10 hover:border-white/30 hover:bg-white/5'
}`}
>
<div className="flex items-center justify-between mb-2">
<span className="text-white font-medium">Dark (기본)</span>
{(settings.Theme === 'dark') && <div className="w-2 h-2 rounded-full bg-primary-500"></div>}
</div>
<div className="h-16 rounded-lg bg-[#1e1e2e] border border-white/10 flex overflow-hidden">
<div className="w-1/4 bg-[#181825] border-r border-white/5"></div>
<div className="flex-1 p-2">
<div className="h-2 w-2/3 bg-white/10 rounded mb-2"></div>
<div className="h-8 w-full bg-[#1e1e2e] border border-primary-500/30 rounded"></div>
</div>
</div>
</button>
{/* PSH_PINK Theme */}
<button
onClick={() => onSelect('PSH_PINK')}
className={`relative group p-4 rounded-xl border-2 transition-all duration-300 text-left ${settings.Theme === 'PSH_PINK'
? 'border-[#FF00FF] bg-[#FF00FF]/10'
: 'border-white/10 hover:border-white/30 hover:bg-white/5'
}`}
>
<div className="flex items-center justify-between mb-2">
<span className="text-white font-medium">PSH Pink</span>
{settings.Theme === 'PSH_PINK' && <div className="w-2 h-2 rounded-full bg-[#FF00FF]"></div>}
</div>
<div className="h-16 rounded-lg bg-[#2D0A1E] border border-[#FF66FF]/30 flex overflow-hidden">
<div className="w-1/4 bg-[#1A0512] border-r border-[#FF66FF]/20"></div>
<div className="flex-1 p-2">
<div className="h-2 w-2/3 bg-[#FF66FF]/20 rounded mb-2"></div>
<div className="h-8 w-full bg-[#3D0D28] border border-[#FF00FF] rounded relative overflow-hidden">
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-[#FF00FF]/10 to-transparent"></div>
</div>
</div>
</div>
</button>
{/* JW_SKY Theme */}
<button
onClick={() => onSelect('JW_SKY')}
className={`relative group p-4 rounded-xl border-2 transition-all duration-300 text-left ${settings.Theme === 'JW_SKY'
? 'border-sky-400 bg-sky-400/10'
: 'border-white/10 hover:border-white/30 hover:bg-white/5'
}`}
>
<div className="flex items-center justify-between mb-2">
<span className="text-white font-medium">JW Sky</span>
{settings.Theme === 'JW_SKY' && <div className="w-2 h-2 rounded-full bg-sky-400"></div>}
</div>
<div className="h-16 rounded-lg bg-[#0F172A] border border-sky-400/30 flex overflow-hidden">
<div className="w-1/4 bg-[#020617] border-r border-sky-400/20"></div>
<div className="flex-1 p-2">
<div className="h-2 w-2/3 bg-sky-400/20 rounded mb-2"></div>
<div className="h-8 w-full bg-[#1E293B] border border-sky-400 rounded"></div>
</div>
</div>
</button>
</div>
</div>
);
}