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
@@ -46,9 +46,14 @@ export const PitDrawer = ({
key={_id}
className="py-3 px-4 text-sm"
isFullWidth
colorSchema={
(i === 0 && index === 0 && snapshotId === null) || snapshotId === _id
? 'primary'
: 'secondary'
}
variant={
(i === 0 && index === 0 && snapshotId === null) || snapshotId === _id
? 'solid'
? 'selected'
: 'star'
}
onClick={() => onSelectSnapshot(_id)}
@@ -65,6 +70,7 @@ export const PitDrawer = ({
<Button
className="mt-8 py-3 px-4 text-sm"
isFullWidth
variant="star"
isLoading={isFetchingNextPage}
isDisabled={isFetchingNextPage || !hasNextPage}
onClick={fetchNextPage}
@@ -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>