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

fix: use theme-modifiable colors (#658)

Browse Source
This commit is contained in:
Gorjan Petrovski
2021-09-29 18:08:43 +02:00
committed by GitHub
parent e72d737220
commit 091842555f
13 changed files with 36 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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-neutral border-solid border-gray-300 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-neutral border-solid border-gray-300 border-1 focus:bg-contrast hover:bg-contrast`,
};
export const Button: FunctionComponent<{

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

@@ -28,13 +28,13 @@ export const DecoratedInput: FunctionalComponent<Props> = ({
autocomplete = false,
}) => {
const baseClasses =
'rounded py-1.5 px-3 text-input my-1 h-8 flex flex-row items-center';
'rounded py-1.5 px-3 text-input my-1 h-8 flex flex-row items-center bg-contrast';
const stateClasses = disabled
? 'no-border bg-grey-5'
? 'no-border'
: 'border-solid border-1 border-gray-300';
const classes = `${baseClasses} ${stateClasses} ${className}`;
const inputBaseClasses = 'w-full no-border color-black focus:shadow-none';
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`}>

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

@@ -11,9 +11,9 @@ export const Input: FunctionalComponent<Props> = ({
disabled = false,
text,
}) => {
const base = `rounded py-1.5 px-3 text-input my-1 h-8`;
const base = `rounded py-1.5 px-3 text-input my-1 h-8 bg-contrast`;
const stateClasses = disabled
? 'no-border bg-grey-5'
? 'no-border'
: 'border-solid border-1 border-gray-300';
const classes = `${base} ${stateClasses} ${className}`;
return (

14
app/assets/javascripts/components/shared/ModalDialog.tsx
View File

@@ -33,11 +33,11 @@ export const ModalDialogLabel: FunctionComponent<{
}> = ({ children, closeDialog }) => (
<AlertDialogLabel className="">
<div className="px-4 py-4 flex flex-row items-center">
<div className="flex-grow color-black text-lg font-bold">{children}</div>
<div className="flex-grow color-text text-lg font-bold">{children}</div>
<IconButton
focusable={true}
title="Close"
className="color-grey-1 h-5 w-5"
className="color-neutral h-5 w-5"
icon="close"
onClick={() => closeDialog()}
/>
@@ -61,11 +61,11 @@ export const ModalDialogButtons: FunctionComponent = ({ children }) => (
<div className="px-4 py-4 flex flex-row justify-end items-center">
{children != undefined && Array.isArray(children)
? children.map((child, idx, arr) => (
<>
{child}
{idx < arr.length - 1 ? <div className="min-w-3" /> : undefined}
</>
))
<>
{child}
{idx < arr.length - 1 ? <div className="min-w-3" /> : undefined}
</>
))
: children}
</div>
</>