fix: use theme-modifiable colors (#658)
This commit is contained in:
@@ -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;
|
||||
|
||||
@@ -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();
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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" />;
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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`} />
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user