🎨 style: overall UI improvements (#3576)

* stlye: new dialogs

* style: DashGroupItem

* style: bookmarks update
This commit is contained in:
Marco Beretta 2024-08-08 18:16:17 +02:00 committed by GitHub
parent 5c99d93744
commit cf393b1308
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
11 changed files with 172 additions and 121 deletions

View file

@ -5,7 +5,7 @@ import { Spinner } from '~/components/svg';
import { cn } from '~/utils';
type MenuItemProps = {
tag: string;
tag: string | React.ReactNode;
selected: boolean;
count?: number;
handleSubmit: (tag: string) => Promise<void>;
@ -25,14 +25,20 @@ const BookmarkItem: FC<MenuItemProps> = ({
const [isLoading, setIsLoading] = useState(false);
const clickHandler = async () => {
setIsLoading(true);
await handleSubmit(tag);
await handleSubmit(tag as string);
setIsLoading(false);
};
const breakWordStyle: React.CSSProperties = {
wordBreak: 'break-word',
overflowWrap: 'anywhere',
};
return (
<div
role="menuitem"
className={cn(
'group m-1.5 flex cursor-pointer gap-2 rounded px-2 py-2.5 !pr-3 text-sm !opacity-100 focus:ring-0 radix-disabled:pointer-events-none radix-disabled:opacity-50',
'group m-1.5 flex w-[225px] cursor-pointer gap-2 rounded px-2 py-2.5 !pr-3 text-sm !opacity-100 focus:ring-0 radix-disabled:pointer-events-none radix-disabled:opacity-50',
'hover:bg-black/5 dark:hover:bg-white/5',
highlightSelected && selected && 'bg-black/5 dark:bg-white/5',
)}
@ -51,14 +57,14 @@ const BookmarkItem: FC<MenuItemProps> = ({
) : (
<BookmarkIcon className="size-4" />
)}
<div className="break-all">{tag}</div>
<div style={breakWordStyle}>{tag}</div>
</div>
{count !== undefined && (
<div className="flex items-center justify-end">
<span
className={cn(
'ml-auto w-9 min-w-max whitespace-nowrap rounded-md bg-white px-2.5 py-0.5 text-center text-xs font-medium leading-5 text-gray-600',
'ml-auto w-7 min-w-max whitespace-nowrap rounded-md bg-white px-2.5 py-0.5 text-center text-xs font-medium leading-5 text-gray-600',
'dark:bg-gray-800 dark:text-white',
)}
aria-hidden="true"