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

Minor style tweaks

Browse Source
This commit is contained in:
Gregory Schier
2023-03-07 22:21:58 -08:00
parent 520db48234
commit 366116ab1b
9 changed files with 61 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -11,10 +11,10 @@ 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',
primary: 'bg-blue-400',
secondary: 'bg-violet-400',
warning: 'bg-orange-400',
danger: 'bg-red-400',
primary: 'bg-blue-400 text-white',
secondary: 'bg-violet-400 text-white',
warning: 'bg-orange-400 text-white',
danger: 'bg-red-400 text-white',
};
export type ButtonProps<T extends ElementType> = ButtonHTMLAttributes<HTMLButtonElement> & {
@@ -48,6 +48,7 @@ export const Button = forwardRef(function Button<T extends ElementType>(
'outline-none', // TODO: Add focus styles
'border border-transparent focus-visible:border-blue-300',
'transition-all rounded-md flex items-center hover:text-white',
'bg-opacity-90 hover:bg-opacity-100',
// 'active:translate-y-[0.5px] active:scale-[0.99]',
colorStyles[color || 'default'],
justify === 'start' && 'justify-start',

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

@@ -28,7 +28,7 @@ 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-black/50" />
<D.Overlay className="fixed inset-0 bg-gray-900/60 dark:bg-black/50" />
<D.Content>
<div className={classnames(className, 'fixed inset-0')}>
<div

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

@@ -25,6 +25,10 @@
@apply text-placeholder;
}
.cm-scroller {
@apply font-mono text-[0.8rem];
}
.cm-gutters {
@apply border-0 text-gray-500 text-opacity-30;
@@ -39,7 +43,7 @@
}
.placeholder-widget {
@apply text-[0.9em] text-gray-900 bg-gray-200 px-2 border border-background py-0.5
@apply text-[0.9em] text-gray-900 bg-gray-200 px-2 border border-background/70
rounded cursor-default hover:bg-gray-300 hover:text-white;
}
}
@@ -51,7 +55,8 @@
}
.cm-scroller {
overflow: hidden !important;;
overflow: hidden !important;
font-family: inherit;
}
.cm-line {
@@ -61,7 +66,7 @@
.cm-multiline {
.cm-editor {
@apply h-full text-[0.95em];
@apply h-full;
position: absolute !important;
}
@@ -128,7 +133,7 @@
}
.cm-editor .cm-selectionBackground {
@apply bg-gray-400;
@apply bg-gray-200/70;
}
.cm-editor.cm-focused .cm-selectionBackground {

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

@@ -39,6 +39,13 @@ export function Input({
...props
}: Props) {
const id = `input-${name}`;
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',
);
return (
<VStack>
<label
@@ -69,10 +76,7 @@ export function Input({
defaultValue={defaultValue}
placeholder={placeholder}
onChange={onChange}
className={classnames(
className,
'!bg-transparent min-w-0 pl-3 pr-2 h-full w-full focus:outline-none',
)}
className={inputClassName}
{...props}
{...useEditor}
/>
@@ -82,12 +86,7 @@ export function Input({
onChange={(e) => onChange?.(e.target.value)}
placeholder={placeholder}
defaultValue={defaultValue}
className={classnames(
className,
'!bg-transparent min-w-0 pl-3 pr-2 h-full w-full focus:outline-none placeholder:text-placeholder',
leftSlot && '!pl-1',
rightSlot && '!pr-1',
)}
className={inputClassName}
{...props}
/>
)}

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

@@ -6,6 +6,7 @@ import Editor from './Editor/Editor';
import { Icon } from './Icon';
import { IconButton } from './IconButton';
import { HStack } from './Stacks';
import { StatusColor } from './StatusColor';
interface Props {
requestId: string;
@@ -58,8 +59,10 @@ export function ResponsePane({ requestId, className }: Props) {
className="italic text-gray-600 text-sm w-full mb-1 flex-shrink-0 pl-2"
>
<div className="whitespace-nowrap">
{response.status}
{response.statusReason && ` ${response.statusReason}`}
<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

23
src-web/components/StatusColor.tsx Normal file
View File

@@ -0,0 +1,23 @@
import classnames from 'classnames';
import type { ReactNode } from 'react';
interface Props {
statusCode: number;
children: ReactNode;
}
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',
)}
>
{children}
</span>
);
}

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"
className="font-mono px-0"
name="url"
label="Enter URL"
containerClassName={className}

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

@@ -12,13 +12,13 @@ const darkTheme: AppTheme = {
whitePoint: 0.95,
colors: {
gray: '#656196',
red: '#ff2727',
red: '#ee3b3b',
orange: '#ff9411',
yellow: '#dede34',
green: '#39da39',
yellow: '#dcdc3b',
green: '#44cb44',
blue: '#2e91ff',
pink: '#ff74ff',
violet: '#a853ff',
pink: '#f670f6',
violet: '#ae70ff',
},
},
},

3
tailwind.config.cjs
View File

@@ -7,6 +7,9 @@ module.exports = {
],
theme: {
extend: {},
fontFamily: {
'mono': ['JetBrains Mono', "Menlo", 'monospace'],
},
borderRadius: {
none: '0px',
sm: 'var(--border-radius-sm)',