dennii/Termix
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases 22 Wiki Activity

refactor: Remove ripple effects and gradient from login page

Browse Source 
- Remove animated ripple background effects
- Remove gradient background, use solid color (bg-dark-bg-darker)
- Remove text-shadow glow effect from logo
- Simplify brand showcase to clean, minimal design
This commit is contained in:
ZacharyZcR
2025-11-09 09:06:06 +08:00
parent a6fbd00a58
commit 4294a0f919
1 changed files with 3 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/ui/desktop/authentication/Auth.tsx
View File

@@ -842,25 +842,13 @@ export function Auth({
<div className="w-full h-full flex flex-col md:flex-row">
{/* Left Side - Brand Showcase */}
<div className="hidden md:flex md:w-2/5 relative overflow-hidden items-center justify-center"
style={{
background: 'linear-gradient(to bottom right, hsl(var(--background)), #0e0e10, #09090b)'
}}
>
{/* Animated Ripples Background */}
<div className="absolute inset-0 flex items-center justify-center">
<div className="absolute w-0 h-0 bg-primary/10 rounded-full animate-[ripple_4s_ease-out_infinite]" />
<div className="absolute w-0 h-0 bg-primary/7 rounded-full animate-[ripple_4s_ease-out_infinite_1s]" />
<div className="absolute w-0 h-0 bg-primary/5 rounded-full animate-[ripple_4s_ease-out_infinite_2s]" />
</div>
<div className="hidden md:flex md:w-2/5 bg-dark-bg-darker items-center justify-center">
{/* Logo and Branding */}
<div className="relative z-10 text-center px-8">
<div className="text-center px-8">
<div
className="text-7xl font-bold tracking-wider mb-4 text-foreground"
style={{
fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
textShadow: '0 0 30px hsl(var(--primary) / 0.3), 0 0 60px hsl(var(--primary) / 0.2)'
fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace'
}}
>
TERMIX
@@ -872,21 +860,6 @@ export function Auth({
{t("auth.description") || "Secure, powerful, and intuitive SSH connection management"}
</div>
</div>
<style>{`
@keyframes ripple {
0% {
width: 0;
height: 0;
opacity: 1;
}
100% {
width: 150vmax;
height: 150vmax;
opacity: 0;
}
}
`}</style>
</div>
{/* Right Side - Auth Form */}