fix: use theme-modifiable colors (#658)

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

View File

@@ -15,7 +15,7 @@ export const Text: FunctionComponent<{ className?: string }> = ({
const buttonClasses = `block bg-default color-text rounded border-solid \
border-1 border-gray-300 px-4 py-1.75 font-bold text-sm fit-content \
focus:bg-contrast hover:bg-contrast `;
focus:bg-contrast hover:bg-contrast border-neutral`;
export const LinkButton: FunctionComponent<{
label: string;

View File

@@ -15,7 +15,7 @@ export const MenuItem: FunctionComponent<Props> = ({
onClick,
}) => (
<div
className={`preferences-menu-item ${selected ? 'selected' : ''}`}
className={`preferences-menu-item select-none ${selected ? 'selected' : ''}`}
onClick={(e) => {
e.preventDefault();
onClick();

View File

@@ -1,7 +1,7 @@
import { FunctionComponent } from 'preact';
export const PreferencesPane: FunctionComponent = ({ children }) => (
<div className="color-black flex-grow flex flex-row overflow-y-auto min-h-0">
<div className="color-foreground flex-grow flex flex-row overflow-y-auto min-h-0">
<div className="flex-grow flex flex-col py-6 items-center">
<div className="w-125 max-w-125 flex flex-col">
{children != undefined && Array.isArray(children)

View File

@@ -15,7 +15,7 @@ const EncryptionEnabled: FunctionComponent<{ appState: AppState }> = observer(({
const archived = formatCount(count.archived, 'archived notes');
const deleted = formatCount(count.deleted, 'trashed notes');
const checkIcon = <Icon className="success min-w-5 min-h-5" type="check-bold" />;
const checkIcon = <Icon className="success min-w-4 min-h-4" type="check-bold" />;
const noteIcon = <Icon type="rich-text" className="min-w-5 min-h-5" />;
const tagIcon = <Icon type="hashtag" className="min-w-5 min-h-5" />;
const archiveIcon = <Icon type="archive" className="min-w-5 min-h-5" />;

View File

@@ -16,9 +16,8 @@ const DisclosureIconButton: FunctionComponent<{
<DisclosureButton
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
className={`no-border cursor-pointer bg-transparent hover:brightness-130 p-0 ${
className ?? ''
}`}
className={`no-border cursor-pointer bg-transparent hover:brightness-130 p-0 ${className ?? ''
}`}
>
<Icon type={icon} />
</DisclosureButton>
@@ -58,7 +57,7 @@ export const AuthAppInfoTooltip: FunctionComponent = () => {
/>
<DisclosurePanel>
<div
className={`bg-black color-white text-center rounded shadow-overlay
className={`bg-inverted-default color-inverted-default text-center rounded shadow-overlay
py-1.5 px-2 absolute w-103 -top-10 -left-51`}
>
Some apps, like Google Authenticator, do not back up and restore

View File

@@ -3,5 +3,5 @@ import { FunctionComponent } from 'preact';
export const Bullet: FunctionComponent<{ className?: string }> = ({
className = '',
}) => (
<div className={`min-w-1 min-h-1 rounded-full bg-black ${className} mr-2`} />
<div className={`min-w-1 min-h-1 rounded-full bg-inverted-default ${className} mr-2`} />
);