github-starred/yaak
2
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-03-12 02:16:46 -05:00
Code Issues Packages Projects Releases Wiki Activity

Minor theme updates again

Browse Source
This commit is contained in:
Gregory Schier
2023-03-08 09:43:35 -08:00
parent 1b61ce31e6
commit 665dd8447d
12 changed files with 70 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src-web/components/Dialog.tsx
View File

@@ -28,14 +28,14 @@ export function Dialog({
<D.Root open={open} onOpenChange={onOpenChange}>
<D.Portal container={document.querySelector<HTMLElement>('#radix-portal')}>
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
<D.Overlay className="fixed inset-0 bg-gray-900/60 dark:bg-black/50" />
<D.Overlay className="fixed inset-0 bg-gray-600/60 dark:bg-black/50" />
<D.Content>
<div
className={classnames(
className,
'absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] bg-gray-100',
'w-[20rem] max-h-[80vh] p-5 rounded-lg overflow-auto',
'border border-gray-200 shadow-lg',
'dark:border border-gray-200 shadow-md shadow-black/10',
wide && 'w-[80vw] max-w-[50rem]',
)}
>

18
src-web/components/Editor/Editor.tsx
View File

@@ -54,17 +54,20 @@ export default function Editor({
if (ref.current === null) return;
if (singleLine) return;
const gutterEl = ref.current.querySelector<HTMLDivElement>('.cm-gutters');
const bgClass = className
?.split(/\s+/)
.find((c) => c.startsWith('!bg-') || c.startsWith('bg-'));
if (bgClass && gutterEl) {
gutterEl?.classList.add(`${bgClass}`);
const classList = className?.split(/\s+/) ?? [];
const bgClasses = classList
.filter((c) => c.match(/(^|:)?bg-.+/)) // Find bg-* classes
.map((c) => c.replace(/^bg-/, '!bg-')) // !important
.map((c) => c.replace(/^dark:bg-/, 'dark:!bg-')); // !important
if (gutterEl) {
gutterEl?.classList.add(...bgClasses);
}
};
// Create codemirror instance when ref initializes
useEffect(() => {
if (ref.current === null) return;
console.log('INIT EDITOR');
let view: EditorView | null = null;
try {
const langHolder = new Compartment();
@@ -86,10 +89,6 @@ export default function Editor({
return () => view?.destroy();
}, [ref.current, valueKey]);
useEffect(() => {
syncGutterBg();
}, [ref.current, className]);
// Update value when valueKey changes
// TODO: This would be more efficient but the onChange handler gets fired on update
// useEffect(() => {
@@ -103,6 +102,7 @@ export default function Editor({
// Update language extension when contentType changes
useEffect(() => {
if (cm === null) return;
console.log('UPDATE LANG');
const ext = getLanguageExtension({ contentType, useTemplating });
cm.view.dispatch({ effects: cm.langHolder.reconfigure(ext) });
}, [contentType]);

3
src-web/components/HeaderEditor.tsx
View File

@@ -25,7 +25,6 @@ export function HeaderEditor() {
headers.map((h, i) => {
if (i === index) return h;
const newHeader: HttpHeader = { ...h, ...header };
console.log('NEW HEADER', newHeader);
return newHeader;
}),
);
@@ -37,8 +36,6 @@ export function HeaderEditor() {
setHeaders((headers) => headers.filter((_, i) => i !== index));
};
console.log('HEADERS', headers);
return (
<form onSubmit={handleSubmit}>
<VStack space={2}>

4
src-web/components/Input.tsx
View File

@@ -42,8 +42,8 @@ export function Input({
const inputClassName = classnames(
className,
'!bg-transparent pl-3 pr-2 min-w-0 h-full w-full focus:outline-none placeholder:text-placeholder',
leftSlot && '!pl-1',
rightSlot && '!pr-1',
leftSlot && '!pl-0.5',
rightSlot && '!pr-0.5',
);
return (

2
src-web/components/RequestPane.tsx
View File

@@ -22,7 +22,7 @@ export function RequestPane({ fullHeight, request, className }: Props) {
>
<div className="pl-2">
<UrlBar
className="bg-transparent"
className="bg-transparent shadow dark:shadow-none shadow-gray-200"
key={request.id}
method={request.method}
url={request.url}

32
src-web/components/ResponsePane.tsx
View File

@@ -15,7 +15,7 @@ interface Props {
export function ResponsePane({ requestId, className }: Props) {
const [activeResponseId, setActiveResponseId] = useState<string | null>(null);
const [viewMode, setViewMode] = useState<'pretty' | 'raw'>('pretty');
const [viewMode, setViewMode] = useState<'pretty' | 'raw'>('raw');
const responses = useResponses(requestId);
const response = activeResponseId
? responses.data.find((r) => r.id === activeResponseId)
@@ -42,12 +42,18 @@ export function ResponsePane({ requestId, className }: Props) {
return response.body;
}, [response?.body, contentType]);
if (!response) {
return null;
}
return (
<div className="p-2">
<div
className={classnames(
className,
'max-h-full h-full grid grid-rows-[auto_minmax(0,1fr)] grid-cols-1 bg-gray-100 rounded-md overflow-hidden border border-gray-200',
'max-h-full h-full grid grid-rows-[auto_minmax(0,1fr)] grid-cols-1 ',
'dark:bg-gray-100 rounded-md overflow-hidden border border-gray-200',
'shadow dark:shadow-none shadow-gray-200',
)}
>
{/*<HStack as={WindowDragRegion} items="center" className="pl-1.5 pr-1">*/}
@@ -58,15 +64,17 @@ export function ResponsePane({ requestId, className }: Props) {
items="center"
className="italic text-gray-600 text-sm w-full mb-1 flex-shrink-0 pl-2"
>
<div className="whitespace-nowrap">
<StatusColor statusCode={response.status}>
{response.status}
{response.statusReason && ` ${response.statusReason}`}
</StatusColor>
&nbsp;&bull;&nbsp;
{response.elapsed}ms &nbsp;&bull;&nbsp;
{Math.round(response.body.length / 1000)} KB
</div>
{response.status > 0 && (
<div className="whitespace-nowrap">
<StatusColor statusCode={response.status}>
{response.status}
{response.statusReason && ` ${response.statusReason}`}
</StatusColor>
&nbsp;&bull;&nbsp;
{response.elapsed}ms &nbsp;&bull;&nbsp;
{Math.round(response.body.length / 1000)} KB
</div>
)}
<HStack items="center" className="ml-auto h-8">
{contentType.includes('html') && (
@@ -122,7 +130,7 @@ export function ResponsePane({ requestId, className }: Props) {
</div>
) : response?.body ? (
<Editor
className="!bg-gray-100"
className="bg-gray-50 dark:!bg-gray-100"
valueKey={`${contentType}:${response.body}`}
defaultValue={response?.body}
contentType={contentType}

12
src-web/components/RouterError.tsx
View File

@@ -1,19 +1,19 @@
import React from 'react';
import { Link, useRouteError } from 'react-router-dom';
import { Button } from './Button';
import { useRouteError } from 'react-router-dom';
import { ButtonLink } from './ButtonLink';
import { Heading } from './Heading';
import { VStack } from './Stacks';
export function RouterError() {
const error = useRouteError();
console.log('Router Error', error);
const stringified = JSON.stringify(error);
const message = (error as any).message ?? stringified;
return (
<div className="flex items-center justify-center h-full">
<VStack space={5} className="w-auto h-auto">
<VStack space={5} className="max-w-[30rem] !h-auto">
<Heading>Route Error 🔥</Heading>
<pre className="text-sm select-auto cursor-text bg-gray-50 p-3 rounded">
{JSON.stringify(error, null, 2)}
<pre className="text-sm select-auto cursor-text bg-gray-100 p-3 rounded whitespace-normal">
{message}
</pre>
<ButtonLink to="/" color="primary">
Go Home

1
src-web/components/Sidebar.tsx
View File

@@ -22,6 +22,7 @@ export function Sidebar({ className, activeRequestId, workspaceId, requests, ...
const createRequest = useRequestCreate({ workspaceId, navigateAfter: true });
const { appearance, toggleAppearance } = useTheme();
const [open, setOpen] = useState<boolean>(false);
console.log('OPEN', open);
return (
<div
className={classnames(className, 'w-52 bg-gray-100 h-full border-r border-gray-200')}

14
src-web/hooks/useRequest.ts
View File

@@ -1,17 +1,21 @@
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { invoke } from '@tauri-apps/api';
import { convertDates, HttpRequest } from '../lib/models';
import { responsesQueryKey } from './useResponses';
import { useNavigate } from 'react-router-dom';
import type { HttpRequest } from '../lib/models';
import { convertDates } from '../lib/models';
import { responsesQueryKey } from './useResponses';
export function requestsQueryKey(workspaceId: string) {
return ['requests', { workspaceId }];
}
export function useRequests(workspaceId: string) {
return useQuery(requestsQueryKey(workspaceId), async () => {
const requests = (await invoke('requests', { workspaceId })) as HttpRequest[];
return requests.map(convertDates);
return useQuery({
queryKey: requestsQueryKey(workspaceId),
queryFn: async () => {
const requests = (await invoke('requests', { workspaceId })) as HttpRequest[];
return requests.map(convertDates);
},
});
}

36
src-web/lib/theme/theme.ts
View File

@@ -87,27 +87,27 @@ export function generateColors(
const lightnessMap: Record<Appearance, Record<AppThemeColorVariant, number>> = {
light: {
50: 0.98,
100: 0.88,
50: 1,
100: 0.9,
200: 0.7,
300: 0.5,
400: 0.3,
300: 0.4,
400: 0.2,
500: 0,
600: -0.2,
700: -0.3,
800: -0.45,
900: -0.6,
950: -0.8,
700: -0.4,
800: -0.6,
900: -0.8,
950: -0.9,
},
dark: {
50: -0.98,
100: -0.93,
200: -0.78,
300: -0.63,
400: -0.44,
500: -0.2,
600: 0,
700: 0.3,
50: -0.9,
100: -0.8,
200: -0.6,
300: -0.4,
400: -0.2,
500: 0,
600: 0.2,
700: 0.4,
800: 0.6,
900: 0.8,
950: 0.9,
@@ -122,8 +122,8 @@ export function generateColorVariant(
whitePoint = 1,
): string {
const { hsl } = parseColor(color || '');
// const lightnessMod = lightnessMap[appearance][variant];
const lightnessMod = (appearance === 'dark' ? 1 : -1) * ((variant / 1000) * 2 - 1);
const lightnessMod = lightnessMap[appearance][variant];
// const lightnessMod = (appearance === 'dark' ? 1 : -1) * ((variant / 1000) * 2 - 1);
const newL =
lightnessMod > 0
? hsl[2] + (100 * whitePoint - hsl[2]) * lightnessMod

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

@@ -14,7 +14,7 @@ const darkTheme: AppTheme = {
gray: '#656196',
red: '#ee3b3b',
orange: '#ff9411',
yellow: '#dcdc3b',
yellow: '#dcc73b',
green: '#44cb44',
blue: '#2e91ff',
pink: '#f670f6',

2
tailwind.config.cjs
View File

@@ -3,7 +3,7 @@ module.exports = {
darkMode: ['class', '[data-appearance="dark"]'],
content: [
"./index.html",
"./src-web/**/*.{js,ts,jsx,tsx}",
"./src-web/**/*.{html,tsx}",
],
theme: {
extend: {},