starred/yaak
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-01-11 20:00:29 +01:00
Code Issues 8 Packages Projects Releases 10 Wiki Activity

More tweaks

Browse Source
This commit is contained in:
Gregory Schier
2024-05-22 23:44:47 -07:00
parent 33768af571
commit 656c90b54f
5 changed files with 17 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src-web/components/CookieDialog.tsx
View File

@@ -28,7 +28,7 @@ export const CookieDialog = function ({ cookieJarId }: Props) {
return (
<div className="pb-2">
<table className="w-full text-xs mb-auto min-w-full max-w-full divide-y">
<table className="w-full text-xs mb-auto min-w-full max-w-full divide-y divide-background-highlight">
<thead>
<tr>
<th className="py-2 text-left">Domain</th>
@@ -53,11 +53,6 @@ export const CookieDialog = function ({ cookieJarId }: Props) {
title="Delete"
className="ml-auto"
onClick={async () => {
console.log(
'DELETE COOKIE',
c,
cookieJar.cookies.filter((c2) => c2 !== c).length,
);
await updateCookieJar.mutateAsync({
...cookieJar,
cookies: cookieJar.cookies.filter((c2) => c2 !== c),

2
src-web/components/core/Dialog.tsx
View File

@@ -65,7 +65,7 @@ export function Dialog({
'grid grid-rows-[auto_auto_minmax(0,1fr)]',
'relative bg-background pointer-events-auto',
'rounded-lg',
'border border-background-highlight shadow-lg shadow-[rgba(0,0,0,0.1)]',
'border border-background-highlight-secondary shadow-lg shadow-[rgba(0,0,0,0.1)]',
'max-w-[calc(100vw-5rem)] max-h-[calc(100vh-6rem)]',
size === 'sm' && 'w-[25rem] max-h-[80vh]',
size === 'md' && 'w-[45rem] max-h-[80vh]',

2
src-web/components/core/Dropdown.tsx
View File

@@ -441,7 +441,7 @@ const Menu = forwardRef<Omit<DropdownRef, 'open' | 'isOpen' | 'toggle'>, MenuPro
className={classNames(
className,
'h-auto bg-background rounded-md shadow-lg py-1.5 border',
'border-background-highlight overflow-auto mb-1 mx-0.5',
'border-background-highlight-secondary overflow-auto mb-1 mx-0.5',
)}
>
{filter && (

16
src-web/lib/theme/themes.ts
View File

@@ -32,11 +32,11 @@ export const yaakDark: YaakTheme = {
id: 'yaak-dark',
name: 'Yaak',
background: new Color('hsl(244,23%,13%)', 'dark'),
backgroundHighlight: new Color('hsl(244,23%,13%)', 'dark').lift(0.17),
backgroundHighlightSecondary: new Color('hsl(244,23%,13%)', 'dark').lift(0.1),
foreground: new Color('#bcbad4', 'dark'),
foregroundSubtle: new Color('#bcbad4', 'dark').lower(0.25),
foregroundSubtler: new Color('#bcbad4', 'dark').lower(0.4),
backgroundHighlight: new Color('hsl(244,23%,23%)', 'dark'),
backgroundHighlightSecondary: new Color('hsl(244,23%,20%)', 'dark'),
foreground: new Color('hsl(245,23%,86%)', 'dark'),
foregroundSubtle: new Color('hsl(245,20%,65%)', 'dark'),
foregroundSubtler: new Color('hsl(245,18%,50%)', 'dark'),
colors: {
primary: new Color('hsl(266,100%,79%)', 'dark'),
@@ -61,14 +61,14 @@ export const yaakDark: YaakTheme = {
},
},
input: {
backgroundHighlight: new Color('hsl(244,23%,12%)', 'dark').lift(0.18),
backgroundHighlight: new Color('hsl(244,23%,24%)', 'dark'),
},
dialog: {
backgroundHighlight: new Color('hsl(244,23%,12%)', 'dark').lift(0.11),
backgroundHighlight: new Color('hsl(244,23%,24%)', 'dark'),
},
sidebar: {
background: new Color('hsl(243,23%,16%)', 'dark'),
backgroundHighlight: new Color('hsl(244,23%,16%)', 'dark').lift(0.08),
backgroundHighlight: new Color('hsl(244,23%,22%)', 'dark'),
},
responsePane: {
background: new Color('hsl(243,23%,16%)', 'dark'),

8
src-web/lib/theme/window.ts
View File

@@ -65,7 +65,11 @@ function themeVariables(theme?: ThemeComponent, base?: CSSVariables): CSSVariabl
'--fg-subtle': theme?.foregroundSubtle?.css() ?? theme?.foreground?.lower(0.2).css(),
'--fg-subtler': theme?.foregroundSubtler?.css() ?? theme?.foreground?.lower(0.3).css(),
'--border-focus': theme?.colors?.info?.css(),
'--shadow': theme?.shadow?.css() ?? Color.black().translucify(0.7).css(),
'--shadow':
theme?.shadow?.css() ??
Color.black()
.translucify(isThemeDark(theme ?? {}) ? 0.7 : 0.93)
.css(),
};
for (const [color, value] of Object.entries(theme?.colors ?? {})) {
@@ -180,7 +184,7 @@ function placeholderCSS(color: ColorName, colors?: Partial<RootColors>): string
].join('\n\n');
}
export function isThemeDark(theme: YaakTheme): boolean {
export function isThemeDark(theme: ThemeComponent): boolean {
if (theme.background && theme.foreground) {
return theme.foreground.lighterThan(theme.background);
}