starred/yaak-mountain-loop
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-04-19 07:19:45 +02: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 fbe6039845
commit 14cd73d75a
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 type { XYCoord } from 'react-dnd';
import { useDrag, useDrop } from 'react-dnd'; import { useDrag, useDrop } from 'react-dnd';
import { useActiveRequest } from '../hooks/useActiveRequest'; import { useActiveRequest } from '../hooks/useActiveRequest';
import { useConfirm } from '../hooks/useConfirm';
import { useRequests } from '../hooks/useRequests'; import { useRequests } from '../hooks/useRequests';
import { useUpdateAnyRequest } from '../hooks/useUpdateAnyRequest'; import { useUpdateAnyRequest } from '../hooks/useUpdateAnyRequest';
import { useUpdateRequest } from '../hooks/useUpdateRequest'; import { useUpdateRequest } from '../hooks/useUpdateRequest';
@@ -28,7 +27,6 @@ export const Sidebar = memo(function Sidebar({ className }: Props) {
const sidebarRef = useRef<HTMLDivElement>(null); const sidebarRef = useRef<HTMLDivElement>(null);
const unorderedRequests = useRequests(); const unorderedRequests = useRequests();
const activeRequest = useActiveRequest(); const activeRequest = useActiveRequest();
const confirm = useConfirm();
const requests = useMemo( const requests = useMemo(
() => [...unorderedRequests].sort((a, b) => a.sortPriority - b.sortPriority), () => [...unorderedRequests].sort((a, b) => a.sortPriority - b.sortPriority),
[unorderedRequests], [unorderedRequests],
@@ -218,8 +216,8 @@ const _SidebarItem = forwardRef(function SidebarItem(
title="Request Options" title="Request Options"
icon="dotsH" icon="dotsH"
className={classnames( className={classnames(
'absolute right-0 top-0 transition-opacity opacity-0', 'absolute right-0 top-0 transition-opacity !opacity-0',
'group-hover/item:opacity-100 focus-visible:opacity-100', 'group-hover/item:!opacity-100 focus-visible:!opacity-100',
)} )}
/> />
</RequestActionsDropdown> </RequestActionsDropdown>

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

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