rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: Use border-main (#721)

Browse Source
This commit is contained in:
Aman Harwara
2021-11-05 19:29:54 +05:30
committed by GitHub
parent 54c09b9b49
commit 42b3cf5750
14 changed files with 44 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
app/assets/javascripts/components/Button.tsx
View File

@@ -9,16 +9,20 @@ 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-neutral border-1 focus:bg-contrast hover:bg-contrast`,
normal: `${baseClass} bg-default color-text border-solid border-main 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-neutral border-1 focus:bg-contrast hover:bg-contrast`,
danger: `${baseClass} bg-default color-danger border-solid border-main border-1 focus:bg-contrast hover:bg-contrast`,
};
export const Button: FunctionComponent<{
className?: string;
type: ButtonType;
label: string;
onClick: (event: TargetedEvent<HTMLFormElement> | TargetedMouseEvent<HTMLButtonElement>) => void;
onClick: (
event:
| TargetedEvent<HTMLFormElement>
| TargetedMouseEvent<HTMLButtonElement>
) => void;
disabled?: boolean;
}> = ({ type, label, className = '', onClick, disabled = false }) => {
const buttonClass = buttonClasses[type];

5
app/assets/javascripts/components/DecoratedInput.tsx
View File

@@ -31,10 +31,11 @@ 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-neutral';
: 'border-solid border-1 border-main';
const classes = `${baseClasses} ${stateClasses} ${className}`;
const inputBaseClasses = 'w-full no-border color-text focus:shadow-none bg-contrast';
const inputBaseClasses =
'w-full no-border color-text focus:shadow-none bg-contrast';
const inputStateClasses = disabled ? 'overflow-ellipsis' : '';
return (
<div className={`${classes} focus-within:ring-info`}>

2
app/assets/javascripts/components/FloatingLabelInput.tsx
View File

@@ -44,7 +44,7 @@ export const FloatingLabelInput: FunctionComponent<Props> = forwardRef(
const INPUT_CLASSNAME = `w-full h-full ${
focused || value ? 'pt-6 pb-2' : 'py-2.5'
} px-3 text-input border-1 border-solid border-neutral rounded placeholder-medium text-input focus:ring-info ${
} px-3 text-input border-1 border-solid border-main rounded placeholder-medium text-input focus:ring-info ${
isInvalid ? 'border-dark-red placeholder-dark-red' : ''
} ${inputClassName}`;

2
app/assets/javascripts/components/Input.tsx
View File

@@ -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-neutral';
: 'border-solid border-1 border-main';
const classes = `${base} ${stateClasses} ${className}`;
return (
<input type="text" className={classes} disabled={disabled} value={text} />

2
app/assets/javascripts/components/InputWithIcon.tsx
View File

@@ -51,7 +51,7 @@ export const InputWithIcon: FunctionComponent<Props> = forwardRef(
return (
<div
className={`flex items-stretch position-relative bg-default border-1 border-solid border-neutral rounded focus-within:ring-info overflow-hidden ${
className={`flex items-stretch position-relative bg-default border-1 border-solid border-main rounded focus-within:ring-info overflow-hidden ${
disabled ? DISABLED_CLASSNAME : ''
} ${className}`}
>

2
app/assets/javascripts/components/NotesListOptionsMenu.tsx
View File

@@ -17,7 +17,7 @@ export const NotesListOptionsMenu: FunctionComponent<Props> = observer(
({ setShowMenuFalse, application }) => {
const menuClassName =
'sn-dropdown sn-dropdown--animated min-w-70 overflow-y-auto \
border-1 border-solid border-neutral text-sm z-index-dropdown-menu \
border-1 border-solid border-main text-sm z-index-dropdown-menu \
flex flex-col py-2 bottom-0 left-2 absolute';
const [sortBy, setSortBy] = useState(() =>
application.getPreference(PrefKey.SortNotesBy, CollectionSort.CreatedAt)