starred/yaak
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-03-17 23:14:03 +01: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

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

@@ -4,44 +4,24 @@ import type { HttpResponse } from '../../lib/models';
interface Props {
response: Pick<HttpResponse, 'status' | 'error'>;
className?: string;
asBackground?: boolean;
}
export function StatusTag({ asBackground, response, className }: Props) {
export function StatusTag({ response, className }: Props) {
const { status, error } = response;
const label = error ? 'ERR' : status;
if (asBackground) {
return (
<span
className={classnames(
className,
'text-white bg-opacity-90 dark:bg-opacity-40',
status >= 0 && status < 100 && 'bg-red-600',
status >= 100 && status < 200 && 'bg-yellow-600',
status >= 200 && status < 300 && 'bg-green-600',
status >= 300 && status < 400 && 'bg-pink-600',
status >= 400 && status < 500 && 'bg-orange-600',
status >= 500 && 'bg-red-600',
)}
>
{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>
);
}
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">
{tabs.map((t) => {
const isActive = t.value === value;
// const btnClassName = classnames(isActive ? 'bg-highlightSecondary' : 'text-gray-600');
const btnClassName = classnames(isActive ? '' : 'text-gray-600', '!px-0 mr-4 ml-[1px]');
const btnClassName = classnames(
isActive ? '' : 'text-gray-600 hover:text-gray-800',
'!px-0 mr-4 ml-[1px]',
);
if ('options' in t) {
const option = t.options.items.find(