DHBW-WE/MeetUp
5
0
Fork 0
Code Issues 7 Pull requests 5 Projects 1 Releases 5 Packages 1 Wiki Activity Actions

refactor: restyle button according to figma and change login button variant to primary

Browse source
This commit is contained in:
Maximilian Liebmann 2025-05-19 23:09:56 +02:00
parent effa57a501
commit af0570c2d7
3 changed files with 19 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/components/ui/button.tsx
View file

@ -5,21 +5,21 @@ import { cva, type VariantProps } from 'class-variance-authority';
import { cn } from '@/lib/utils';
const buttonVariants = cva(
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
"radius-lg inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
{
variants: {
variant: {
default:
'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
primary:
'bg-primary text-text shadow-xs hover:bg-hover-primary active:bg-active-primary',
secondary:
'bg-secondary text-text-alt shadow-xs hover:bg-hover-secondary active:bg-active-secondary',
outline:
'border-2 border-primary bg-transparent text-text shadow-xs hover:bg-primary hover:border-neutral-000 hover:border-1.5 hover:text-neutral-000 active:bg-active-primary',
destructive:
'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
outline:
'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
secondary:
'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
ghost:
'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
link: 'text-primary underline-offset-4 hover:underline',
link: 'text-text underline-offset-4 hover:underline',
},
size: {
default: 'h-9 px-4 py-2 has-[>svg]:px-3',
@ -29,7 +29,7 @@ const buttonVariants = cva(
},
},
defaultVariants: {
variant: 'default',
variant: 'primary',
size: 'default',
},
},

6
src/components/user/login-form.tsx
View file

@ -34,11 +34,7 @@ export default function LoginForm() {
placeholder="Let's hope you remember it."
name='password'
/>
<Button
className='hover:bg-blue-600 hover:text-white'
type='submit'
variant='secondary'
>
<Button type='submit' variant='primary'>
Login
</Button>
</form>

22
src/components/user/sso-login-button.tsx
View file

@ -1,6 +1,6 @@
import { signIn } from '@/auth';
import { Button } from '@/components/ui/button';
import { Fingerprint } from 'lucide-react';
import { IconButton } from '@/components/icon-button';
import { faOpenid } from '@fortawesome/free-brands-svg-icons';
export default function SSOLogin({
provider,
@ -17,19 +17,15 @@ export default function SSOLogin({
await signIn(provider);
}}
>
<Button
className='w-full flex items-center'
<IconButton
className='w-full'
type='submit'
variant='default'
variant='secondary'
icon={faOpenid}
icon={faOpenid}
>
<div className='flex justify-center'>
<Fingerprint />
</div>
<div className='flex justify-center'>
Login with {providerDisplayName}
</div>
</Button>
Login with {providerDisplayName}
</IconButton>
</form>
);
}