starred/yaak-mountain-loop
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-04-22 08:38:29 +02: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 ( return (
<div className="pb-2"> <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> <thead>
<tr> <tr>
<th className="py-2 text-left">Domain</th> <th className="py-2 text-left">Domain</th>
@@ -53,11 +53,6 @@ export const CookieDialog = function ({ cookieJarId }: Props) {
title="Delete" title="Delete"
className="ml-auto" className="ml-auto"
onClick={async () => { onClick={async () => {
console.log(
'DELETE COOKIE',
c,
cookieJar.cookies.filter((c2) => c2 !== c).length,
);
await updateCookieJar.mutateAsync({ await updateCookieJar.mutateAsync({
...cookieJar, ...cookieJar,
cookies: cookieJar.cookies.filter((c2) => c2 !== c), 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)]', 'grid grid-rows-[auto_auto_minmax(0,1fr)]',
'relative bg-background pointer-events-auto', 'relative bg-background pointer-events-auto',
'rounded-lg', '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)]', 'max-w-[calc(100vw-5rem)] max-h-[calc(100vh-6rem)]',
size === 'sm' && 'w-[25rem] max-h-[80vh]', size === 'sm' && 'w-[25rem] max-h-[80vh]',
size === 'md' && 'w-[45rem] 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={classNames(
className, className,
'h-auto bg-background rounded-md shadow-lg py-1.5 border', '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 && ( {filter && (

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

@@ -32,11 +32,11 @@ export const yaakDark: YaakTheme = {
id: 'yaak-dark', id: 'yaak-dark',
name: 'Yaak', name: 'Yaak',
background: new Color('hsl(244,23%,13%)', 'dark'), background: new Color('hsl(244,23%,13%)', 'dark'),
backgroundHighlight: new Color('hsl(244,23%,13%)', 'dark').lift(0.17), backgroundHighlight: new Color('hsl(244,23%,23%)', 'dark'),
backgroundHighlightSecondary: new Color('hsl(244,23%,13%)', 'dark').lift(0.1), backgroundHighlightSecondary: new Color('hsl(244,23%,20%)', 'dark'),
foreground: new Color('#bcbad4', 'dark'), foreground: new Color('hsl(245,23%,86%)', 'dark'),
foregroundSubtle: new Color('#bcbad4', 'dark').lower(0.25), foregroundSubtle: new Color('hsl(245,20%,65%)', 'dark'),
foregroundSubtler: new Color('#bcbad4', 'dark').lower(0.4), foregroundSubtler: new Color('hsl(245,18%,50%)', 'dark'),
colors: { colors: {
primary: new Color('hsl(266,100%,79%)', 'dark'), primary: new Color('hsl(266,100%,79%)', 'dark'),
@@ -61,14 +61,14 @@ export const yaakDark: YaakTheme = {
}, },
}, },
input: { input: {
backgroundHighlight: new Color('hsl(244,23%,12%)', 'dark').lift(0.18), backgroundHighlight: new Color('hsl(244,23%,24%)', 'dark'),
}, },
dialog: { dialog: {
backgroundHighlight: new Color('hsl(244,23%,12%)', 'dark').lift(0.11), backgroundHighlight: new Color('hsl(244,23%,24%)', 'dark'),
}, },
sidebar: { sidebar: {
background: new Color('hsl(243,23%,16%)', 'dark'), 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: { responsePane: {
background: new Color('hsl(243,23%,16%)', 'dark'), 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-subtle': theme?.foregroundSubtle?.css() ?? theme?.foreground?.lower(0.2).css(),
'--fg-subtler': theme?.foregroundSubtler?.css() ?? theme?.foreground?.lower(0.3).css(), '--fg-subtler': theme?.foregroundSubtler?.css() ?? theme?.foreground?.lower(0.3).css(),
'--border-focus': theme?.colors?.info?.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 ?? {})) { for (const [color, value] of Object.entries(theme?.colors ?? {})) {
@@ -180,7 +184,7 @@ function placeholderCSS(color: ColorName, colors?: Partial<RootColors>): string
].join('\n\n'); ].join('\n\n');
} }
export function isThemeDark(theme: YaakTheme): boolean { export function isThemeDark(theme: ThemeComponent): boolean {
if (theme.background && theme.foreground) { if (theme.background && theme.foreground) {
return theme.foreground.lighterThan(theme.background); return theme.foreground.lighterThan(theme.background);
} }