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

Button ring colors

Browse Source
This commit is contained in:
Gregory Schier
2023-03-30 17:17:07 -07:00
parent 6843823efc
commit 60d4ecda1a
2 changed files with 12 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,7 +4,6 @@ import React, { forwardRef, Fragment, memo, useCallback, useMemo, useRef, useSta
import type { XYCoord } from 'react-dnd';
import { useDrag, useDrop } from 'react-dnd';
import { useActiveRequest } from '../hooks/useActiveRequest';
import { useConfirm } from '../hooks/useConfirm';
import { useRequests } from '../hooks/useRequests';
import { useUpdateAnyRequest } from '../hooks/useUpdateAnyRequest';
import { useUpdateRequest } from '../hooks/useUpdateRequest';
@@ -28,7 +27,6 @@ export const Sidebar = memo(function Sidebar({ className }: Props) {
const sidebarRef = useRef<HTMLDivElement>(null);
const unorderedRequests = useRequests();
const activeRequest = useActiveRequest();
const confirm = useConfirm();
const requests = useMemo(
() => [...unorderedRequests].sort((a, b) => a.sortPriority - b.sortPriority),
[unorderedRequests],
@@ -218,8 +216,8 @@ const _SidebarItem = forwardRef(function SidebarItem(
title="Request Options"
icon="dotsH"
className={classnames(
'absolute right-0 top-0 transition-opacity opacity-0',
'group-hover/item:opacity-100 focus-visible:opacity-100',
'absolute right-0 top-0 transition-opacity !opacity-0',
'group-hover/item:!opacity-100 focus-visible:!opacity-100',
)}
/>
</RequestActionsDropdown>

19
src-web/components/core/Button.tsx
View File

@@ -5,13 +5,14 @@ import { Link } from 'react-router-dom';
import { Icon } from './Icon';
const colorStyles = {
custom: '',
default: 'text-gray-700 enabled:hocus:bg-gray-700/10 enabled:hocus:text-gray-1000',
gray: 'text-gray-800 bg-highlight enabled:hocus:bg-gray-500/20 enabled:hocus:text-gray-1000',
primary: 'bg-blue-400 text-white enabled:hocus:bg-blue-500',
secondary: 'bg-violet-400 text-white enabled:hocus:bg-violet-500',
warning: 'bg-orange-400 text-white enabled:hocus:bg-orange-500',
danger: 'bg-red-400 text-white enabled:hocus:bg-red-500',
custom: 'ring-blue-500/50',
default:
'text-gray-700 enabled:hocus:bg-gray-700/10 enabled:hocus:text-gray-1000 ring-blue-500/50',
gray: 'text-gray-800 bg-highlight enabled:hocus:bg-gray-500/20 enabled:hocus:text-gray-1000 ring-blue-500/50',
primary: 'bg-blue-400 text-white enabled:hocus:bg-blue-500 ring-blue-500/50',
secondary: 'bg-violet-400 text-white enabled:hocus:bg-violet-500 ring-violet-500/50',
warning: 'bg-orange-400 text-white enabled:hocus:bg-orange-500 ring-orange-500/50',
danger: 'bg-red-400 text-white enabled:hocus:bg-red-500 ring-red-500/50',
};
export type ButtonProps = HTMLAttributes<HTMLElement> & {
@@ -43,9 +44,9 @@ const _Button = forwardRef<any, ButtonProps>(function Button(
() =>
classnames(
className,
'opacity-90 hover:opacity-100',
'outline-none whitespace-nowrap',
// 'border border-transparent focus-visible:border-focus',
'focus-visible-or-class:ring ring-blue-300',
'focus-visible-or-class:ring',
'rounded-md flex items-center',
colorStyles[color || 'default'],
justify === 'start' && 'justify-start',