fix: replace border-gray-300 with a themable colour (#664)
Co-authored-by: Aman Harwara <amanharwara@protonmail.com>
This commit is contained in:
@@ -9,9 +9,9 @@ const baseClass = `rounded px-4 py-1.75 font-bold text-sm fit-content`;
|
||||
type ButtonType = 'normal' | 'primary' | 'danger';
|
||||
|
||||
const buttonClasses: { [type in ButtonType]: string } = {
|
||||
normal: `${baseClass} bg-default color-text border-solid border-gray-300 border-1 focus:bg-contrast hover:bg-contrast`,
|
||||
normal: `${baseClass} bg-default color-text border-solid border-neutral border-1 focus:bg-contrast hover:bg-contrast`,
|
||||
primary: `${baseClass} no-border bg-info color-info-contrast hover:brightness-130 focus:brightness-130`,
|
||||
danger: `${baseClass} bg-default color-danger border-solid border-gray-300 border-1 focus:bg-contrast hover:bg-contrast`,
|
||||
danger: `${baseClass} bg-default color-danger border-solid border-neutral border-1 focus:bg-contrast hover:bg-contrast`,
|
||||
};
|
||||
|
||||
export const Button: FunctionComponent<{
|
||||
|
||||
@@ -31,7 +31,7 @@ export const DecoratedInput: FunctionalComponent<Props> = ({
|
||||
'rounded py-1.5 px-3 text-input my-1 h-8 flex flex-row items-center bg-contrast';
|
||||
const stateClasses = disabled
|
||||
? 'no-border'
|
||||
: 'border-solid border-1 border-gray-300';
|
||||
: 'border-solid border-1 border-neutral';
|
||||
const classes = `${baseClasses} ${stateClasses} ${className}`;
|
||||
|
||||
const inputBaseClasses = 'w-full no-border color-text focus:shadow-none bg-contrast';
|
||||
|
||||
@@ -14,7 +14,7 @@ export const Input: FunctionalComponent<Props> = ({
|
||||
const base = `rounded py-1.5 px-3 text-input my-1 h-8 bg-contrast`;
|
||||
const stateClasses = disabled
|
||||
? 'no-border'
|
||||
: 'border-solid border-1 border-gray-300';
|
||||
: 'border-solid border-1 border-neutral';
|
||||
const classes = `${base} ${stateClasses} ${className}`;
|
||||
return (
|
||||
<input type="text" className={classes} disabled={disabled} value={text} />
|
||||
|
||||
@@ -6,5 +6,5 @@ type Props = {
|
||||
export const HorizontalSeparator: FunctionalComponent<Props> = ({
|
||||
classes = ''
|
||||
}) => {
|
||||
return <hr className={`h-1px w-full bg-border no-border ${classes}`} />;
|
||||
return <hr className={`h-1px w-full bg-neutral no-border ${classes}`} />;
|
||||
};
|
||||
|
||||
@@ -44,7 +44,7 @@ export const ModalDialogLabel: FunctionComponent<{
|
||||
Close
|
||||
</div>
|
||||
</div>
|
||||
<hr className="h-1px bg-border no-border m-0" />
|
||||
<hr className="h-1px bg-neutral no-border m-0" />
|
||||
</AlertDialogLabel>
|
||||
);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user