Fixing UI, UX, and bugs in the dashboard

This commit is contained in:
Vladyslav Matsiiako
2023-04-08 23:36:33 -07:00
parent ecb182ad03
commit 12478130d0
4 changed files with 36 additions and 51 deletions
@@ -1,8 +1,6 @@
import { Controller } from 'react-hook-form';
import { faArrowDown, faArrowUp, faCodeBranch, faInfoCircle } from '@fortawesome/free-solid-svg-icons';
import { faArrowDown, faArrowUp } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { HoverCard, HoverCardContent, HoverCardTrigger } from '@radix-ui/react-hover-card';
import { twMerge } from 'tailwind-merge';
import { IconButton } from '@app/components/v2';
@@ -23,47 +21,20 @@ export const SecretTableHeader = ({
<Controller
defaultValue=""
name="na"
render={({ fieldState: { error } }) => (
<HoverCard openDelay={0} open={error?.message ? undefined : false}>
<HoverCardTrigger asChild>
<td className='flex items-center'>
<div className="min-w-[220px] lg:min-w-[240px] xl:min-w-[280px] relative flex items-center justify-start pl-2.5 w-full">
<div className="inline-flex items-end text-md font-medium">
Key
<IconButton variant="plain" className="ml-2" ariaLabel="sort" onClick={onSort}>
<FontAwesomeIcon icon={sortDir === 'asc' ? faArrowDown : faArrowUp} />
</IconButton>
</div>
<div className="w-max flex flex-row items-center justify-end">
<div className="w-5 overflow-hidden group-hover:w-5 mt-1"/>
{!true && (
<IconButton
variant="plain"
className={twMerge(
'w-0 overflow-hidden p-0 group-hover:w-6 group-hover:ml-1',
true && 'w-6 text-primary ml-1'
)}
size="md"
ariaLabel="info"
>
<div className="flex items-center space-x-1">
<FontAwesomeIcon icon={faCodeBranch} className="text-base" />
</div>
</IconButton>
)}
</div>
</div>
</td>
</HoverCardTrigger>
<HoverCardContent className="w-auto py-2 pt-2">
<div className="flex items-center space-x-2">
<div>
<FontAwesomeIcon icon={faInfoCircle} className="text-red" />
</div>
<div className="text-sm">{error?.message}</div>
render={() => (
<td className='flex items-center'>
<div className="min-w-[220px] lg:min-w-[240px] xl:min-w-[280px] relative flex items-center justify-start pl-2.5 w-full">
<div className="inline-flex items-end text-md font-medium">
Key
<IconButton variant="plain" className="ml-2" ariaLabel="sort" onClick={onSort}>
<FontAwesomeIcon icon={sortDir === 'asc' ? faArrowDown : faArrowUp} />
</IconButton>
</div>
</HoverCardContent>
</HoverCard>
<div className="w-max flex flex-row items-center justify-end">
<div className="w-5 overflow-hidden group-hover:w-5 mt-1"/>
</div>
</div>
</td>
)}
/>
<th className="flex flex-row w-full"><div className="text-sm font-medium">Value</div></th>