fix: remove all dark mode styles from shared UI components
Stripped dark: classes from Input, Textarea, Button, and InputField components. These were causing black/dark backgrounds in modals and forms across all apps (backoffice, gacha, dimentorin, etc). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Opus 4.6
parent
cb32146daa
commit
bcfac70e2a
@@ -2,13 +2,13 @@ import { Link } from 'react-router-dom';
|
|||||||
|
|
||||||
export default function NotFoundPage() {
|
export default function NotFoundPage() {
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-950">
|
<div className="min-h-screen flex items-center justify-center bg-gray-50">
|
||||||
<div className="text-center">
|
<div className="text-center">
|
||||||
<h1 className="text-9xl font-bold text-gray-200 mb-4">404</h1>
|
<h1 className="text-9xl font-bold text-gray-200 mb-4">404</h1>
|
||||||
<h2 className="text-3xl font-semibold text-gray-900 dark:text-gray-300 mb-4">
|
<h2 className="text-3xl font-semibold text-gray-900 mb-4">
|
||||||
Page Not Found
|
Page Not Found
|
||||||
</h2>
|
</h2>
|
||||||
<p className="text-gray-600 dark:text-gray-400 mb-8">
|
<p className="text-gray-600 mb-8">
|
||||||
The page you are looking for doesn't exist or has been moved.
|
The page you are looking for doesn't exist or has been moved.
|
||||||
</p>
|
</p>
|
||||||
<Link
|
<Link
|
||||||
|
|||||||
@@ -14,13 +14,13 @@ export const buttonVariants = cva(
|
|||||||
variant: {
|
variant: {
|
||||||
primary: 'bg-primary-500 hover:bg-primary-600 text-white shadow-md',
|
primary: 'bg-primary-500 hover:bg-primary-600 text-white shadow-md',
|
||||||
secondary:
|
secondary:
|
||||||
'bg-white dark:bg-gray-800 hover:text-primary-600 dark:hover:text-primary-400 hover:bg-gray-50 dark:hover:bg-gray-700 text-primary-500 dark:text-primary-400 shadow-md dark:shadow-gray-900/50 border dark:border-gray-700',
|
'bg-white hover:text-primary-600 hover:bg-gray-50 text-primary-500 shadow-md border',
|
||||||
text: 'bg-transparent hover:text-primary-600 dark:hover:text-primary-400 hover:bg-gray-50 dark:hover:bg-gray-800 text-primary-500 dark:text-primary-400',
|
text: 'bg-transparent hover:text-primary-600 hover:bg-gray-50 text-primary-500',
|
||||||
bordered:
|
bordered:
|
||||||
'border border-primary-500 dark:border-primary-400 hover:border-primary-600 dark:hover:border-primary-300 bg-transparent hover:text-primary-600 dark:hover:text-primary-300 hover:bg-gray-50 dark:hover:bg-gray-800 text-primary-500 dark:text-primary-400',
|
'border border-primary-500 hover:border-primary-600 bg-transparent hover:text-primary-600 hover:bg-gray-50 text-primary-500',
|
||||||
success: 'bg-success-500 hover:bg-success-600 text-white shadow-md',
|
success: 'bg-success-500 hover:bg-success-600 text-white shadow-md',
|
||||||
danger:
|
danger:
|
||||||
'bg-danger-100 dark:bg-danger-500/20 hover:bg-danger-200 dark:hover:bg-danger-500/30 text-danger-500 shadow-md dark:shadow-gray-900/50',
|
'bg-danger-100 hover:bg-danger-200 text-danger-500 shadow-md',
|
||||||
},
|
},
|
||||||
size: {
|
size: {
|
||||||
sm: 'text-[12px] max-h-[36px]',
|
sm: 'text-[12px] max-h-[36px]',
|
||||||
|
|||||||
@@ -58,7 +58,7 @@ export const Input: FC<TInputProps> = ({
|
|||||||
};
|
};
|
||||||
|
|
||||||
const mergedClassName = cn(
|
const mergedClassName = cn(
|
||||||
`px-[12px] py-[8px] text-neutral-800 dark:text-white bg-white dark:bg-gray-800 placeholder:text-neutral-300 dark:placeholder:text-neutral-500 border border-neutral-200 dark:border-neutral-600 hover:border-blue-300 dark:hover:border-blue-500 focus:outline-1 focus:outline-blue-500 dark:focus:outline-primary-500 rounded-md font-bai-jamjuree w-full ${
|
`px-[12px] py-[8px] text-neutral-800 bg-white placeholder:text-neutral-300 border border-neutral-200 hover:border-blue-300 focus:outline-1 focus:outline-blue-500 rounded-md font-bai-jamjuree w-full ${
|
||||||
widthform === 'standard' ? 'min-w-70' : ''
|
widthform === 'standard' ? 'min-w-70' : ''
|
||||||
}`,
|
}`,
|
||||||
sizeClasses[size].textSize,
|
sizeClasses[size].textSize,
|
||||||
|
|||||||
@@ -38,7 +38,7 @@ export const Textarea: FC<TTextareaProps> = ({
|
|||||||
...rest
|
...rest
|
||||||
}): ReactElement => {
|
}): ReactElement => {
|
||||||
const mergedClassName = cn(
|
const mergedClassName = cn(
|
||||||
'rounded-md border border-neutral-200 dark:border-neutral-600 hover:border-blue-300 dark:hover:border-blue-500 focus:outline-1 focus:outline-blue-500 dark:focus:outline-primary-500 px-[12px] py-[8px] bg-white dark:bg-gray-800 text-neutral-800 dark:text-white placeholder:text-neutral-300 dark:placeholder:text-neutral-500 invalid:border-danger-500 invalid:text-danger-500',
|
'rounded-md border border-neutral-200 hover:border-blue-300 focus:outline-1 focus:outline-blue-500 px-[12px] py-[8px] bg-white text-neutral-800 placeholder:text-neutral-300 invalid:border-danger-500 invalid:text-danger-500',
|
||||||
sizeClasses[size],
|
sizeClasses[size],
|
||||||
disabled && disabledClass,
|
disabled && disabledClass,
|
||||||
error && errorClass,
|
error && errorClass,
|
||||||
|
|||||||
@@ -56,7 +56,7 @@ export const InputField: FC<TInputFieldProps> = ({
|
|||||||
<label
|
<label
|
||||||
htmlFor={htmlFor}
|
htmlFor={htmlFor}
|
||||||
className={cn(
|
className={cn(
|
||||||
'items-start justify-item-start text-start text-neutral-800! dark:text-neutral-300!',
|
'items-start justify-item-start text-start text-neutral-800!',
|
||||||
sizeClasses[size].label
|
sizeClasses[size].label
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
|
|||||||
Reference in New Issue
Block a user