Skip to content

Commit 42e2769

Browse files
emir-karabegemir-karabeg
authored
feat: place all styles in global vars (#1923)
* feat: place all styles in global vars * feat: prevented on workspace
1 parent a0c4bce commit 42e2769

84 files changed

Lines changed: 955 additions & 582 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎apps/sim/.cursorrules‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -428,7 +428,7 @@ setSidebarWidth: (width) => {
428428
### Tailwind Classes
429429

430430
1. **No Inline Styles**: Use Tailwind utility classes exclusively
431-
2. **Dark Mode**: Always include dark mode variants (`dark:bg-[#1E1E1E]`)
431+
2. **Dark Mode**: Always include dark mode variants (`dark:bg-[var(--surface-1)]`)
432432
3. **Exact Values**: Use exact values from design system (`text-[14px]`, `h-[25px]`)
433433
4. **clsx for Conditionals**: Use clsx() for conditional classes
434434
5. **Consistent Spacing**: Use spacing tokens (`gap-[8px]`, `px-[14px]`)
@@ -441,7 +441,7 @@ setSidebarWidth: (width) => {
441441
'base-classes that-always-apply',
442442
isActive && 'active-state-classes',
443443
disabled ? 'cursor-not-allowed opacity-60' : 'cursor-pointer hover:bg-accent',
444-
'dark:bg-[#1E1E1E] dark:border-[#2C2C2C]' // Dark mode variants
444+
'dark:bg-[var(--surface-1)] dark:border-[var(--border)]' // Dark mode variants
445445
)}
446446
>
447447
```

‎apps/sim/app/(auth)/login/login-form.tsx‎

Lines changed: 29 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
'use client'
22

33
import { useEffect, useState } from 'react'
4-
import { Eye, EyeOff } from 'lucide-react'
4+
import { ArrowRight, ChevronRight, Eye, EyeOff } from 'lucide-react'
55
import Link from 'next/link'
66
import { useRouter, useSearchParams } from 'next/navigation'
77
import { Button } from '@/components/ui/button'
@@ -106,13 +106,15 @@ export default function LoginPage({
106106
const [passwordErrors, setPasswordErrors] = useState<string[]>([])
107107
const [showValidationError, setShowValidationError] = useState(false)
108108
const [buttonClass, setButtonClass] = useState('auth-button-gradient')
109+
const [isButtonHovered, setIsButtonHovered] = useState(false)
109110

110111
const [callbackUrl, setCallbackUrl] = useState('/workspace')
111112
const [isInviteFlow, setIsInviteFlow] = useState(false)
112113

113114
const [forgotPasswordOpen, setForgotPasswordOpen] = useState(false)
114115
const [forgotPasswordEmail, setForgotPasswordEmail] = useState('')
115116
const [isSubmittingReset, setIsSubmittingReset] = useState(false)
117+
const [isResetButtonHovered, setIsResetButtonHovered] = useState(false)
116118
const [resetStatus, setResetStatus] = useState<{
117119
type: 'success' | 'error' | null
118120
message: string
@@ -482,10 +484,21 @@ export default function LoginPage({
482484

483485
<Button
484486
type='submit'
485-
className={`${buttonClass} flex w-full items-center justify-center gap-2 rounded-[10px] border font-medium text-[15px] text-white transition-all duration-200`}
487+
onMouseEnter={() => setIsButtonHovered(true)}
488+
onMouseLeave={() => setIsButtonHovered(false)}
489+
className='group inline-flex w-full items-center justify-center gap-2 rounded-[10px] border border-[#6F3DFA] bg-gradient-to-b from-[#8357FF] to-[#6F3DFA] py-[6px] pr-[10px] pl-[12px] text-[15px] text-white shadow-[inset_0_2px_4px_0_#9B77FF] transition-all'
486490
disabled={isLoading}
487491
>
488-
{isLoading ? 'Signing in...' : 'Sign in'}
492+
<span className='flex items-center gap-1'>
493+
{isLoading ? 'Signing in...' : 'Sign in'}
494+
<span className='inline-flex transition-transform duration-200 group-hover:translate-x-0.5'>
495+
{isButtonHovered ? (
496+
<ArrowRight className='h-4 w-4' aria-hidden='true' />
497+
) : (
498+
<ChevronRight className='h-4 w-4' aria-hidden='true' />
499+
)}
500+
</span>
501+
</span>
489502
</Button>
490503
</form>
491504
)}
@@ -600,10 +613,21 @@ export default function LoginPage({
600613
<Button
601614
type='button'
602615
onClick={handleForgotPassword}
603-
className={`${buttonClass} w-full rounded-[10px] border font-medium text-[15px] text-white transition-all duration-200`}
616+
onMouseEnter={() => setIsResetButtonHovered(true)}
617+
onMouseLeave={() => setIsResetButtonHovered(false)}
618+
className='group inline-flex w-full items-center justify-center gap-2 rounded-[10px] border border-[#6F3DFA] bg-gradient-to-b from-[#8357FF] to-[#6F3DFA] py-[6px] pr-[10px] pl-[12px] text-[15px] text-white shadow-[inset_0_2px_4px_0_#9B77FF] transition-all'
604619
disabled={isSubmittingReset}
605620
>
606-
{isSubmittingReset ? 'Sending...' : 'Send Reset Link'}
621+
<span className='flex items-center gap-1'>
622+
{isSubmittingReset ? 'Sending...' : 'Send Reset Link'}
623+
<span className='inline-flex transition-transform duration-200 group-hover:translate-x-0.5'>
624+
{isResetButtonHovered ? (
625+
<ArrowRight className='h-4 w-4' aria-hidden='true' />
626+
) : (
627+
<ChevronRight className='h-4 w-4' aria-hidden='true' />
628+
)}
629+
</span>
630+
</span>
607631
</Button>
608632
</div>
609633
</DialogContent>

‎apps/sim/app/(auth)/reset-password/reset-password-form.tsx‎

Lines changed: 29 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
'use client'
22

33
import { useEffect, useState } from 'react'
4-
import { Eye, EyeOff } from 'lucide-react'
4+
import { ArrowRight, ChevronRight, Eye, EyeOff } from 'lucide-react'
55
import { Button } from '@/components/ui/button'
66
import { Input } from '@/components/ui/input'
77
import { Label } from '@/components/ui/label'
@@ -28,6 +28,7 @@ export function RequestResetForm({
2828
className,
2929
}: RequestResetFormProps) {
3030
const [buttonClass, setButtonClass] = useState('auth-button-gradient')
31+
const [isButtonHovered, setIsButtonHovered] = useState(false)
3132

3233
useEffect(() => {
3334
const checkCustomBrand = () => {
@@ -96,9 +97,20 @@ export function RequestResetForm({
9697
<Button
9798
type='submit'
9899
disabled={isSubmitting}
99-
className={`${buttonClass} flex w-full items-center justify-center gap-2 rounded-[10px] border font-medium text-[15px] text-white transition-all duration-200`}
100+
onMouseEnter={() => setIsButtonHovered(true)}
101+
onMouseLeave={() => setIsButtonHovered(false)}
102+
className='group inline-flex w-full items-center justify-center gap-2 rounded-[10px] border border-[#6F3DFA] bg-gradient-to-b from-[#8357FF] to-[#6F3DFA] py-[6px] pr-[10px] pl-[12px] text-[15px] text-white shadow-[inset_0_2px_4px_0_#9B77FF] transition-all'
100103
>
101-
{isSubmitting ? 'Sending...' : 'Send Reset Link'}
104+
<span className='flex items-center gap-1'>
105+
{isSubmitting ? 'Sending...' : 'Send Reset Link'}
106+
<span className='inline-flex transition-transform duration-200 group-hover:translate-x-0.5'>
107+
{isButtonHovered ? (
108+
<ArrowRight className='h-4 w-4' aria-hidden='true' />
109+
) : (
110+
<ChevronRight className='h-4 w-4' aria-hidden='true' />
111+
)}
112+
</span>
113+
</span>
102114
</Button>
103115
</form>
104116
)
@@ -127,6 +139,7 @@ export function SetNewPasswordForm({
127139
const [showPassword, setShowPassword] = useState(false)
128140
const [showConfirmPassword, setShowConfirmPassword] = useState(false)
129141
const [buttonClass, setButtonClass] = useState('auth-button-gradient')
142+
const [isButtonHovered, setIsButtonHovered] = useState(false)
130143

131144
useEffect(() => {
132145
const checkCustomBrand = () => {
@@ -286,9 +299,20 @@ export function SetNewPasswordForm({
286299
<Button
287300
disabled={isSubmitting || !token}
288301
type='submit'
289-
className={`${buttonClass} flex w-full items-center justify-center gap-2 rounded-[10px] border font-medium text-[15px] text-white transition-all duration-200`}
302+
onMouseEnter={() => setIsButtonHovered(true)}
303+
onMouseLeave={() => setIsButtonHovered(false)}
304+
className='group inline-flex w-full items-center justify-center gap-2 rounded-[10px] border border-[#6F3DFA] bg-gradient-to-b from-[#8357FF] to-[#6F3DFA] py-[6px] pr-[10px] pl-[12px] text-[15px] text-white shadow-[inset_0_2px_4px_0_#9B77FF] transition-all'
290305
>
291-
{isSubmitting ? 'Resetting...' : 'Reset Password'}
306+
<span className='flex items-center gap-1'>
307+
{isSubmitting ? 'Resetting...' : 'Reset Password'}
308+
<span className='inline-flex transition-transform duration-200 group-hover:translate-x-0.5'>
309+
{isButtonHovered ? (
310+
<ArrowRight className='h-4 w-4' aria-hidden='true' />
311+
) : (
312+
<ChevronRight className='h-4 w-4' aria-hidden='true' />
313+
)}
314+
</span>
315+
</span>
292316
</Button>
293317
</form>
294318
)

‎apps/sim/app/(auth)/signup/signup-form.tsx‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
'use client'
22

33
import { Suspense, useEffect, useState } from 'react'
4-
import { Eye, EyeOff } from 'lucide-react'
4+
import { ArrowRight, ChevronRight, Eye, EyeOff } from 'lucide-react'
55
import Link from 'next/link'
66
import { useRouter, useSearchParams } from 'next/navigation'
77
import { Button } from '@/components/ui/button'
@@ -96,6 +96,7 @@ function SignupFormContent({
9696
const [redirectUrl, setRedirectUrl] = useState('')
9797
const [isInviteFlow, setIsInviteFlow] = useState(false)
9898
const [buttonClass, setButtonClass] = useState('auth-button-gradient')
99+
const [isButtonHovered, setIsButtonHovered] = useState(false)
99100

100101
const [name, setName] = useState('')
101102
const [nameErrors, setNameErrors] = useState<string[]>([])
@@ -506,10 +507,21 @@ function SignupFormContent({
506507

507508
<Button
508509
type='submit'
509-
className={`${buttonClass} flex w-full items-center justify-center gap-2 rounded-[10px] border font-medium text-[15px] text-white transition-all duration-200`}
510+
onMouseEnter={() => setIsButtonHovered(true)}
511+
onMouseLeave={() => setIsButtonHovered(false)}
512+
className='group inline-flex w-full items-center justify-center gap-2 rounded-[10px] border border-[#6F3DFA] bg-gradient-to-b from-[#8357FF] to-[#6F3DFA] py-[6px] pr-[10px] pl-[12px] text-[15px] text-white shadow-[inset_0_2px_4px_0_#9B77FF] transition-all'
510513
disabled={isLoading}
511514
>
512-
{isLoading ? 'Creating account...' : 'Create account'}
515+
<span className='flex items-center gap-1'>
516+
{isLoading ? 'Creating account...' : 'Create account'}
517+
<span className='inline-flex transition-transform duration-200 group-hover:translate-x-0.5'>
518+
{isButtonHovered ? (
519+
<ArrowRight className='h-4 w-4' aria-hidden='true' />
520+
) : (
521+
<ChevronRight className='h-4 w-4' aria-hidden='true' />
522+
)}
523+
</span>
524+
</span>
513525
</Button>
514526
</form>
515527
)}

0 commit comments

Comments
 (0)