legalgonews/legalgo-FE-reactrouter
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: update button styles and variants for consistency across forms

Browse Source
This commit is contained in:
Ardeman 2025-03-11 05:51:16 +08:00
parent 7f7526783f
commit a45a6fb87e
8 changed files with 22 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.vscode/settings.json vendored
View File

@ -25,6 +25,8 @@
"labelClassName",
"buttonClassName",
"leftNodeClassName",
"rightNodeClassName"
"rightNodeClassName",
"buttonVariants",
"cva"
]
}

11
app/components/ui/button.tsx
View File

@ -8,11 +8,14 @@ const buttonVariants = cva(
{
variants: {
variant: {
newsPrimary: 'bg-[#2E2F7C] text-white text-lg',
newsPrimaryOutline: 'border-[3px] border-white text-white text-lg',
newsSecondary: 'border-[3px] border-[#2E2F7C] text-[#2E2F7C] text-lg',
newsPrimary:
'bg-[#2E2F7C] text-white text-lg hover:bg-[#4C5CA0] hover:shadow transition active:bg-[#6970B4]',
newsPrimaryOutline:
'border-[3px] bg-[#2E2F7C] border-white text-white text-lg hover:bg-[#4C5CA0] hover:shadow-lg active:shadow-2xl transition active:bg-[#6970B4]',
newsSecondary:
'border-[3px] bg-white hover:shadow-lg active:shadow-2xl border-[#2E2F7C] text-[#2E2F7C] hover:text-[#4C5CA0] active:text-[#6970B4] text-lg hover:border-[#4C5CA0] transition active:border-[#6970B4]',
icon: '',
link: '',
link: 'font-semibold text-[#2E2F7C] hover:text-[#4C5CA0] active:text-[#6970B4] transition',
},
size: {
default: 'h-[50px] w-[150px]',

2
app/layouts/news/form-forgot-password.tsx
View File

@ -22,7 +22,7 @@ export const FormForgotPassword = () => {
</div>
{/* Tombol Masuk */}
<Button className="mt-5 w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800">
<Button className="mt-5 w-full rounded-md py-2">
Reset Password
</Button>
</form>

4
app/layouts/news/form-login.tsx
View File

@ -87,7 +87,6 @@ export const FormLogin = () => {
setIsLoginOpen(false)
setIsForgetOpen(true)
}}
className="font-semibold text-[#2E2F7C]"
variant="link"
size="fit"
>
@ -98,7 +97,7 @@ export const FormLogin = () => {
<Button
disabled={disabled}
type="submit"
className="w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800"
className="w-full rounded-md py-2"
>
Masuk
</Button>
@ -113,7 +112,6 @@ export const FormLogin = () => {
setIsLoginOpen(false)
setIsRegisterOpen(true)
}}
className="font-semibold text-[#2E2F7C]"
variant="link"
size="fit"
>

3
app/layouts/news/form-register.tsx
View File

@ -122,7 +122,7 @@ export const FormRegister = () => {
<Button
disabled={disabled}
type="submit"
className="w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800"
className="w-full rounded-md py-2"
>
Daftar
</Button>
@ -137,7 +137,6 @@ export const FormRegister = () => {
setIsLoginOpen(true)
setIsRegisterOpen(false)
}}
className="font-semibold text-[#2E2F7C]"
variant="link"
size="fit"
>

2
app/layouts/news/form-subscription.tsx
View File

@ -79,7 +79,7 @@ export default function FormSubscription() {
<Button
disabled={disabled}
type="submit"
className="mt-5 w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800"
className="mt-5 w-full rounded-md py-2"
>
Lanjutkan
</Button>

4
app/layouts/news/header-menu-mobile.tsx
View File

@ -71,7 +71,7 @@ export default function HeaderMenuMobile(properties: THeaderMenuMobile) {
>
<Button
variant="newsSecondary"
className="w-full bg-white px-[35px] py-3 text-center text-[#2E2F7C] sm:hidden"
className="w-full px-[35px] py-3 text-center sm:hidden"
type="submit"
>
Logout
@ -80,7 +80,7 @@ export default function HeaderMenuMobile(properties: THeaderMenuMobile) {
) : (
<Button
variant="newsSecondary"
className="w-full bg-white px-[35px] py-3 text-center text-[#2E2F7C] sm:hidden"
className="w-full px-[35px] py-3 text-center sm:hidden"
onClick={() => {
setIsMenuOpen(false)
setIsLoginOpen(true)

9
app/layouts/news/header-menu.tsx
View File

@ -1,5 +1,6 @@
import { Link, useRouteLoaderData } from 'react-router'
import { Button } from '~/components/ui/button'
import HeaderMenuMobile from '~/layouts/news/header-menu-mobile'
import type { loader } from '~/routes/_news'
@ -17,15 +18,17 @@ export const HeaderMenu = () => {
<>
<div className="hidden h-[60px] items-center justify-between bg-[#2E2F7C] text-xl font-medium text-white sm:flex">
{menu?.map((item) => (
<Link
<Button
as={Link}
key={item.id}
to={`/category/${item.code}`}
size="fit"
className={
'flex h-full items-center justify-center border-r border-white px-[35px]'
'flex h-full items-center justify-center border-r border-white px-[35px] text-xl'
}
>
{item.name}
</Link>
</Button>
))}
<HeaderSearch />
</div>