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

More theme tweaks

Browse Source
This commit is contained in:
Gregory Schier
2023-03-08 16:37:20 -08:00
parent 571293a34d
commit 956a2ef5ce
14 changed files with 70 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -9,8 +9,8 @@ import { forwardRef } from 'react';
import { Icon } from './Icon';
const colorStyles = {
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',
default: 'hover:bg-gray-700/10 text-gray-700 hover:text-gray-1000',
gray: 'text-gray-800 bg-gray-100 hover:bg-gray-500/20 hover:text-gray-1000',
primary: 'bg-blue-400 text-white',
secondary: 'bg-violet-400 text-white',
warning: 'bg-orange-400 text-white',
@@ -45,11 +45,10 @@ export const Button = forwardRef(function Button<T extends ElementType>(
type="button"
className={classnames(
className,
'outline-none', // TODO: Add focus styles
'outline-none',
'border border-transparent focus-visible:border-blue-300',
'transition-all rounded-md flex items-center hover:text-white',
'transition-all rounded-md flex items-center',
'bg-opacity-90 hover:bg-opacity-100',
// 'active:translate-y-[0.5px] active:scale-[0.99]',
colorStyles[color || 'default'],
justify === 'start' && 'justify-start',
justify === 'center' && 'justify-center',

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

@@ -5,6 +5,10 @@
.cm-editor {
@apply w-full block text-base;
* {
@apply cursor-text;
}
&.cm-focused {
outline: none !important;
}
@@ -31,8 +35,13 @@
}
.placeholder-widget {
@apply text-[0.9em] text-gray-900 bg-gray-200 px-1.5 py-[0.1em] border-y border-gray-50
rounded cursor-default hover:bg-gray-300 hover:text-white;
@apply text-[0.9em] text-gray-800 dark:text-gray-1000 px-1 rounded cursor-default dark:shadow;
/* NOTE: Background and border are translucent so we can see text selection through it */
@apply bg-gray-300/40 border border-gray-300 border-opacity-40 hover:border-opacity-80;
/* Bring above on hover */
@apply hover:z-10 relative;
}
}
@@ -110,10 +119,6 @@
@apply text-gray-800;
}
.cm-editor * {
@apply cursor-text;
}
.cm-editor .cm-cursor {
@apply border-l-2 border-gray-800;
}
@@ -132,19 +137,23 @@
}
}
.cm-scroller {
.cm-scroller, .cm-tooltip-autocomplete > ul {
&::-webkit-scrollbar-corner,
&::-webkit-scrollbar {
@apply w-1 h-1 bg-transparent;
@apply w-1.5 h-1.5 bg-transparent;
}
&::-webkit-scrollbar-thumb {
@apply bg-gray-400 bg-opacity-30 rounded-full;
@apply bg-gray-200 rounded-full;
}
}
.cm-editor .cm-scroller::-webkit-scrollbar-thumb {
@apply bg-opacity-50;
}
.cm-editor.cm-focused .cm-scroller::-webkit-scrollbar-thumb {
@apply bg-opacity-80;
@apply bg-opacity-100;
}
/* <-- */

2
src-web/components/Editor/extensions.ts
View File

@@ -135,7 +135,7 @@ export const multiLineExtensions = [
rectangularSelection(),
crosshairCursor(),
highlightActiveLine(),
highlightSelectionMatches(),
highlightSelectionMatches({ minSelectionLength: 2 }),
keymap.of([
...closeBracketsKeymap,
...defaultKeymap,

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

@@ -21,7 +21,7 @@ export const IconButton = forwardRef<HTMLButtonElement, Props>(function IconButt
spin={spin}
className={classnames(
iconClassName,
'text-gray-700 group-hover:text-gray-900',
'text-gray-700 group-hover:text-gray-1000',
props.disabled && 'opacity-70',
)}
/>

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

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

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

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

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

@@ -53,7 +53,7 @@ export function ResponsePane({ requestId, className }: Props) {
className,
'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',
'shadow shadow-gray-100 dark:shadow-gray-0',
)}
>
{/*<HStack as={WindowDragRegion} items="center" className="pl-1.5 pr-1">*/}

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

@@ -24,8 +24,8 @@ function ScrollBar({ orientation }: { orientation: 'vertical' | 'horizontal' })
orientation={orientation}
className={classnames(
'flex bg-transparent rounded-full',
orientation === 'vertical' && 'w-1',
orientation === 'horizontal' && 'h-1 flex-col',
orientation === 'vertical' && 'w-1.5',
orientation === 'horizontal' && 'h-1.5 flex-col',
)}
>
<S.Thumb className="flex-1 bg-gray-50 group-hover:bg-gray-100 rounded-full" />

10
src-web/components/StatusColor.tsx
View File

@@ -10,11 +10,11 @@ export function StatusColor({ statusCode, children }: Props) {
return (
<span
className={classnames(
statusCode >= 100 && statusCode < 200 && 'text-green-500',
statusCode >= 200 && statusCode < 300 && 'text-green-500',
statusCode >= 300 && statusCode < 400 && 'text-pink-500',
statusCode >= 400 && statusCode < 500 && 'text-orange-500',
statusCode >= 500 && statusCode < 600 && 'text-red-500',
statusCode >= 100 && statusCode < 200 && 'text-green-600',
statusCode >= 200 && statusCode < 300 && 'text-green-600',
statusCode >= 300 && statusCode < 400 && 'text-pink-600',
statusCode >= 400 && statusCode < 500 && 'text-orange-600',
statusCode >= 500 && statusCode < 600 && 'text-red-600',
)}
>
{children}

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

@@ -11,18 +11,9 @@ interface Props {
url: string;
onMethodChange: (method: string) => void;
onUrlChange: (url: string) => void;
className?: string;
}
export function UrlBar({
className,
sendRequest,
loading,
onMethodChange,
method,
onUrlChange,
url,
}: Props) {
export function UrlBar({ sendRequest, loading, onMethodChange, method, onUrlChange, url }: Props) {
const handleSendRequest = async (e: FormEvent<HTMLFormElement>) => {
e.preventDefault();
sendRequest();
@@ -37,7 +28,7 @@ export function UrlBar({
className="font-mono px-0"
name="url"
label="Enter URL"
containerClassName={className}
containerClassName="shadow shadow-gray-100 dark:shadow-gray-0"
onChange={onUrlChange}
defaultValue={url}
placeholder="Enter a URL..."
@@ -55,13 +46,7 @@ export function UrlBar({
{ label: 'HEAD', value: 'HEAD' },
]}
>
<Button
type="button"
disabled={loading}
size="xs"
className="mx-0.5 !text-gray-800"
justify="start"
>
<Button type="button" disabled={loading} size="xs" className="mx-0.5" justify="start">
{method.toUpperCase()}
</Button>
</DropdownMenuRadio>