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

Lots more theme stuff

Browse Source
This commit is contained in:
Gregory Schier
2023-03-07 21:52:21 -08:00
parent 6575121902
commit 620dd7d3ef
16 changed files with 219 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src-web/components/Button.tsx
View File

@@ -9,9 +9,8 @@ import { forwardRef } from 'react';
import { Icon } from './Icon';
const colorStyles = {
default: 'hover:bg-gray-500/10 text-gray-600',
gray: 'text-gray-800 bg-gray-100 hover:bg-gray-500/20',
tint: 'text-white/90 hover:text-white hover:bg-white/20',
default: 'hover:bg-gray-700/10 text-gray-700 hover:text-gray-900',
gray: 'text-gray-800 bg-gray-100 hover:bg-gray-500/20 hover:text-gray-900',
primary: 'bg-blue-400',
secondary: 'bg-violet-400',
warning: 'bg-orange-400',

105
src-web/components/Colors.tsx Normal file
View File

@@ -0,0 +1,105 @@
import classnames from 'classnames';
import React from 'react';
import { HStack, VStack } from './Stacks';
export function Colors() {
return (
<HStack>
<VStack>
<Color className="bg-gray-50" />
<Color className="bg-gray-100" />
<Color className="bg-gray-200" />
<Color className="bg-gray-300" />
<Color className="bg-gray-400" />
<Color className="bg-gray-500" />
<Color className="bg-gray-600" />
<Color className="bg-gray-700" />
<Color className="bg-gray-800" />
<Color className="bg-gray-900" />
<Color className="bg-gray-950" />
</VStack>
<VStack>
<Color className="bg-red-50" />
<Color className="bg-red-100" />
<Color className="bg-red-200" />
<Color className="bg-red-300" />
<Color className="bg-red-400" />
<Color className="bg-red-500" />
<Color className="bg-red-600" />
<Color className="bg-red-700" />
<Color className="bg-red-800" />
<Color className="bg-red-900" />
<Color className="bg-red-950" />
</VStack>
<VStack>
<Color className="bg-orange-50" />
<Color className="bg-orange-100" />
<Color className="bg-orange-200" />
<Color className="bg-orange-300" />
<Color className="bg-orange-400" />
<Color className="bg-orange-500" />
<Color className="bg-orange-600" />
<Color className="bg-orange-700" />
<Color className="bg-orange-800" />
<Color className="bg-orange-900" />
<Color className="bg-orange-950" />
</VStack>
<VStack>
<Color className="bg-yellow-50" />
<Color className="bg-yellow-100" />
<Color className="bg-yellow-200" />
<Color className="bg-yellow-300" />
<Color className="bg-yellow-400" />
<Color className="bg-yellow-500" />
<Color className="bg-yellow-600" />
<Color className="bg-yellow-700" />
<Color className="bg-yellow-800" />
<Color className="bg-yellow-900" />
<Color className="bg-yellow-950" />
</VStack>
<VStack>
<Color className="bg-green-50" />
<Color className="bg-green-100" />
<Color className="bg-green-200" />
<Color className="bg-green-300" />
<Color className="bg-green-400" />
<Color className="bg-green-500" />
<Color className="bg-green-600" />
<Color className="bg-green-700" />
<Color className="bg-green-800" />
<Color className="bg-green-900" />
<Color className="bg-green-950" />
</VStack>
<VStack>
<Color className="bg-blue-50" />
<Color className="bg-blue-100" />
<Color className="bg-blue-200" />
<Color className="bg-blue-300" />
<Color className="bg-blue-400" />
<Color className="bg-blue-500" />
<Color className="bg-blue-600" />
<Color className="bg-blue-700" />
<Color className="bg-blue-800" />
<Color className="bg-blue-900" />
<Color className="bg-blue-950" />
</VStack>
<VStack>
<Color className="bg-violet-50" />
<Color className="bg-violet-100" />
<Color className="bg-violet-200" />
<Color className="bg-violet-300" />
<Color className="bg-violet-400" />
<Color className="bg-violet-500" />
<Color className="bg-violet-600" />
<Color className="bg-violet-700" />
<Color className="bg-violet-800" />
<Color className="bg-violet-900" />
<Color className="bg-violet-950" />
</VStack>
</HStack>
);
}
function Color({ className }: { className: string }) {
return <div className={classnames(className, 'w-full h-5')} />;
}

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

@@ -28,14 +28,15 @@ 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 dark:bg-background opacity-80 shadow-lg" />
<D.Overlay className="fixed inset-0 bg-gray-900 dark:bg-black/50" />
<D.Content>
<div className={classnames(className, 'fixed inset-0 pointer-events-none')}>
<div className={classnames(className, 'fixed inset-0')}>
<div
className={classnames(
className,
'absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] bg-gray-50',
'absolute z-10 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',
wide && 'w-[80vw] max-w-[50rem]',
)}
>

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

@@ -137,7 +137,7 @@ const DropdownMenuContent = forwardRef<HTMLDivElement, D.DropdownMenuContentProp
align="start"
className={classnames(
className,
'bg-background rounded-md shadow-lg p-1.5 border border-gray-100',
'bg-background rounded-md shadow-lg p-1.5 border border-gray-200',
'overflow-auto m-1',
)}
style={styles}

24
src-web/components/Editor/Editor.css
View File

@@ -6,13 +6,12 @@
.cm-editor {
@apply inset-0;
position: absolute !important;
}
}
}
.cm-editor {
@apply w-full block text-[0.85rem];
@apply w-full block text-base;
&.cm-focused {
outline: none !important;
@@ -28,6 +27,7 @@
.cm-gutters {
@apply border-0 text-gray-500 text-opacity-30;
.cm-gutterElement {
@apply cursor-default;
}
@@ -39,8 +39,8 @@
}
.placeholder-widget {
@apply text-xs text-white/90 bg-blue-400/80 py-[0.5px] px-1 mx-[1px] rounded cursor-default hover:bg-blue-400 hover:text-white;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.9);
@apply text-[0.9em] text-gray-900 bg-gray-200 px-2 border border-background py-0.5
rounded cursor-default hover:bg-gray-300 hover:text-white;
}
}
@@ -51,7 +51,6 @@
}
.cm-scroller {
font-family: inherit;
overflow: hidden !important;;
}
@@ -62,7 +61,8 @@
.cm-multiline {
.cm-editor {
@apply h-full;
@apply h-full text-[0.95em];
position: absolute !important;
}
.cm-scroller {
@@ -128,7 +128,7 @@
}
.cm-editor .cm-selectionBackground {
@apply bg-gray-200;
@apply bg-gray-400;
}
.cm-editor.cm-focused .cm-selectionBackground {
@@ -148,7 +148,7 @@
}
&::-webkit-scrollbar-thumb {
@apply bg-gray-100 bg-opacity-30 rounded-full;
@apply bg-gray-400 bg-opacity-30 rounded-full;
}
}
@@ -160,7 +160,7 @@
/* NOTE: Extra selector required to override default styles */
.cm-tooltip.cm-tooltip {
@apply shadow-lg bg-background rounded overflow-hidden text-gray-900 border border-gray-100/70 z-50 pointer-events-auto;
@apply shadow-lg bg-background rounded overflow-hidden text-gray-900 border border-gray-200 z-50 pointer-events-auto;
* {
@apply transition-none;
@@ -172,15 +172,15 @@
}
& > ul > li {
@apply cursor-default px-2 rounded-sm text-gray-500 h-7 flex items-center;
@apply cursor-default px-2 rounded-sm text-gray-600 h-7 flex items-center;
}
& > ul > li[aria-selected] {
@apply bg-gray-50 text-gray-800;
@apply bg-gray-100 text-gray-900;
}
& > ul > li:hover {
@apply text-gray-700;
@apply text-gray-800;
}
.cm-completionIcon {

6
src-web/components/Grid.tsx
View File

@@ -5,14 +5,16 @@ const colsClasses = {
none: 'grid-cols-none',
1: 'grid-cols-1',
2: 'grid-cols-2',
3: 'grid-cols-2',
3: 'grid-cols-3',
11: 'grid-cols-11',
};
const rowsClasses = {
none: 'grid-rows-none',
1: 'grid-rows-1',
2: 'grid-rows-2',
3: 'grid-rows-2',
3: 'grid-rows-3',
11: 'grid-rows-11',
};
const gapClasses = {

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

@@ -56,7 +56,7 @@ export function Input({
className={classnames(
containerClassName,
'relative w-full rounded-md text-gray-900 bg-gray-200/10',
'border border-gray-50 focus-within:border-blue-400/40',
'border border-gray-200 focus-within:border-blue-400/40',
size === 'md' && 'h-10',
size === 'sm' && 'h-8',
)}

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

@@ -46,19 +46,16 @@ export function ResponsePane({ requestId, className }: Props) {
<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-50',
'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',
)}
>
{/*<HStack as={WindowDragRegion} items="center" className="pl-1.5 pr-1">*/}
{/*</HStack>*/}
{response?.error && (
<div className="text-white bg-red-500 px-2 py-1 rounded">{response.error}</div>
)}
{response && (
<>
<HStack
items="center"
className="italic text-gray-500 text-sm w-full mb-1 flex-shrink-0 pl-2"
className="italic text-gray-600 text-sm w-full mb-1 flex-shrink-0 pl-2"
>
<div className="whitespace-nowrap">
{response.status}
@@ -107,7 +104,11 @@ export function ResponsePane({ requestId, className }: Props) {
</HStack>
</HStack>
{viewMode === 'pretty' && contentForIframe !== null ? (
{response?.error ? (
<div className="p-1">
<div className="text-white bg-red-500 px-3 py-2 rounded">{response.error}</div>
</div>
) : viewMode === 'pretty' && contentForIframe !== null ? (
<div className="px-2 pb-2">
<iframe
title="Response preview"
@@ -118,7 +119,7 @@ export function ResponsePane({ requestId, className }: Props) {
</div>
) : response?.body ? (
<Editor
className="mr-1 !bg-gray-100"
className="!bg-gray-100"
valueKey={`${contentType}:${response.body}`}
defaultValue={response?.body}
contentType={contentType}

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

@@ -24,10 +24,7 @@ export function Sidebar({ className, activeRequestId, workspaceId, requests, ...
const [open, setOpen] = useState<boolean>(false);
return (
<div
className={classnames(
className,
'w-52 bg-violet-600 dark:bg-violet-50 h-full border-gray-100/50 relative z-10',
)}
className={classnames(className, 'w-52 bg-gray-100 h-full border-r border-gray-200')}
{...props}
>
<HStack as={WindowDragRegion} items="center" justify="end">
@@ -37,6 +34,7 @@ export function Sidebar({ className, activeRequestId, workspaceId, requests, ...
Save
</Button>
</Dialog>
<IconButton size="sm" icon="camera" onClick={() => setOpen(true)} />
<IconButton
size="sm"
icon={appearance === 'dark' ? 'moon' : 'sun'}
@@ -54,19 +52,7 @@ export function Sidebar({ className, activeRequestId, workspaceId, requests, ...
{requests.map((r) => (
<SidebarItem key={r.id} request={r} active={r.id === activeRequestId} />
))}
<div>
<div className="w-10 h-5 bg-blue-50" />
<div className="w-10 h-5 bg-blue-100" />
<div className="w-10 h-5 bg-blue-200" />
<div className="w-10 h-5 bg-blue-300" />
<div className="w-10 h-5 bg-blue-400" />
<div className="w-10 h-5 bg-blue-500" />
<div className="w-10 h-5 bg-blue-600" />
<div className="w-10 h-5 bg-blue-700" />
<div className="w-10 h-5 bg-blue-800" />
<div className="w-10 h-5 bg-blue-900" />
<div className="w-10 h-5 bg-blue-950" />
</div>
{/*<Colors />*/}
</VStack>
</div>
);
@@ -77,9 +63,8 @@ function SidebarItem({ request, active }: { request: HttpRequest; active: boolea
<li key={request.id}>
<Button
as={Link}
color="tint"
to={`/workspaces/${request.workspaceId}/requests/${request.id}`}
className={classnames('w-full', active && 'bg-gray-500/[0.1] text-gray-900')}
className={classnames('w-full', active ? 'bg-gray-200/70 text-gray-900' : 'text-gray-500')}
size="xs"
justify="start"
>

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

@@ -34,7 +34,7 @@ export function UrlBar({
hideLabel
useEditor={{ useTemplating: true, contentType: 'url' }}
size="sm"
className="font-mono text-sm"
className="font-mono"
name="url"
label="Enter URL"
containerClassName={className}