starred/yaak-mountain-loop
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-04-20 07:41:22 +02:00
Code Issues 8 Packages Projects Releases 10 Wiki Activity

Better button styles

Browse Source
This commit is contained in:
Gregory Schier
2023-04-04 15:40:25 -07:00
parent 7c7eba5f63
commit 8eb2a14737
5 changed files with 27 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -195,7 +195,7 @@ const _SidebarItem = forwardRef(function SidebarItem(
<Button <Button
tabIndex={0} tabIndex={0}
color="custom" color="custom"
size="sm" size="xs"
to={`/workspaces/${workspaceId}/requests/${requestId}`} to={`/workspaces/${workspaceId}/requests/${requestId}`}
draggable={false} // Item should drag, not the link draggable={false} // Item should drag, not the link
onDoubleClick={() => setEditing(true)} onDoubleClick={() => setEditing(true)}
@@ -226,11 +226,7 @@ const _SidebarItem = forwardRef(function SidebarItem(
{isResponseLoading(latestResponse) ? ( {isResponseLoading(latestResponse) ? (
<Icon spin size="sm" icon="update" /> <Icon spin size="sm" icon="update" />
) : ( ) : (
<StatusTag <StatusTag className="text-2xs" response={latestResponse} />
asBackground
className="px-0.5 rounded-sm font-mono text-2xs"
response={latestResponse}
/>
)} )}
</div> </div>
)} )}

52
src-web/components/core/StatusTag.tsx
View File

@@ -4,44 +4,24 @@ import type { HttpResponse } from '../../lib/models';
interface Props { interface Props {
response: Pick<HttpResponse, 'status' | 'error'>; response: Pick<HttpResponse, 'status' | 'error'>;
className?: string; className?: string;
asBackground?: boolean;
} }
export function StatusTag({ asBackground, response, className }: Props) { export function StatusTag({ response, className }: Props) {
const { status, error } = response; const { status, error } = response;
const label = error ? 'ERR' : status; const label = error ? 'ERR' : status;
if (asBackground) { return (
return ( <span
<span className={classnames(
className={classnames( className,
className, status >= 0 && status < 100 && 'text-red-600',
'text-white bg-opacity-90 dark:bg-opacity-40', status >= 100 && status < 200 && 'text-green-600',
status >= 0 && status < 100 && 'bg-red-600', status >= 200 && status < 300 && 'text-green-600',
status >= 100 && status < 200 && 'bg-yellow-600', status >= 300 && status < 400 && 'text-pink-600',
status >= 200 && status < 300 && 'bg-green-600', status >= 400 && status < 500 && 'text-orange-600',
status >= 300 && status < 400 && 'bg-pink-600', status >= 500 && 'text-red-600',
status >= 400 && status < 500 && 'bg-orange-600', )}
status >= 500 && 'bg-red-600', >
)} {label}
> </span>
{label} );
</span>
);
} else {
return (
<span
className={classnames(
className,
status >= 0 && status < 100 && 'text-red-600',
status >= 100 && status < 200 && 'text-green-600',
status >= 200 && status < 300 && 'text-green-600',
status >= 300 && status < 400 && 'text-pink-600',
status >= 400 && status < 500 && 'text-orange-600',
status >= 500 && 'text-red-600',
)}
>
{label}
</span>
);
}
} }

6
src-web/components/core/Tabs/Tabs.tsx
View File

@@ -81,8 +81,10 @@ export function Tabs({
<HStack space={1} className="flex-shrink-0"> <HStack space={1} className="flex-shrink-0">
{tabs.map((t) => { {tabs.map((t) => {
const isActive = t.value === value; const isActive = t.value === value;
// const btnClassName = classnames(isActive ? 'bg-highlightSecondary' : 'text-gray-600'); const btnClassName = classnames(
const btnClassName = classnames(isActive ? '' : 'text-gray-600', '!px-0 mr-4 ml-[1px]'); isActive ? '' : 'text-gray-600 hover:text-gray-800',
'!px-0 mr-4 ml-[1px]',
);
if ('options' in t) { if ('options' in t) {
const option = t.options.items.find( const option = t.options.items.find(

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

@@ -12,11 +12,11 @@ const darkTheme: AppTheme = {
colors: { colors: {
gray: '#6b5b98', gray: '#6b5b98',
red: '#ff417b', red: '#ff417b',
orange: '#ff9011', orange: '#fd9014',
yellow: '#e8d13f', yellow: '#e8d13f',
green: '#43e76f', green: '#3fd265',
blue: '#219dff', blue: '#219dff',
pink: '#f670f6', pink: '#ff6dff',
violet: '#b176ff', violet: '#b176ff',
}, },
}, },

4
tailwind.config.cjs
View File

@@ -16,13 +16,13 @@ module.exports = {
"xs": "0.8rem" "xs": "0.8rem"
}, },
height: { height: {
"xs": "1.5rem", "xs": "1.75rem",
"sm": "2.0rem", "sm": "2.0rem",
"md": "2.5rem" "md": "2.5rem"
}, },
lineHeight: { lineHeight: {
// HACK: Minus 2 to account for borders inside inputs // HACK: Minus 2 to account for borders inside inputs
"xs": "calc(1.5rem - 2px)", "xs": "calc(1.75rem - 2px)",
"sm": "calc(2.0rem - 2px)", "sm": "calc(2.0rem - 2px)",
"md": "calc(2.5rem - 2px)" "md": "calc(2.5rem - 2px)"
}, },