Minor dashboard updates

This commit is contained in:
Vladyslav Matsiiako
2023-04-05 18:58:59 -07:00
parent 4cce75d128
commit c40546945f
3 changed files with 63 additions and 96 deletions
@@ -1,26 +1,21 @@
import { faArrowDown, faArrowUp, faComments } from '@fortawesome/free-solid-svg-icons';
import { faArrowDown, faArrowUp } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { twMerge } from 'tailwind-merge';
import { IconButton, Tooltip } from '@app/components/v2';
import { IconButton } from '@app/components/v2';
type Props = {
isCommentColumnCollapsed?: boolean;
sortDir: 'asc' | 'desc';
onSort: () => void;
onCommentColToggle: () => void;
};
export const SecretTableHeader = ({
sortDir,
isCommentColumnCollapsed,
onSort,
onCommentColToggle
onSort
}: Props): JSX.Element => (
<thead>
<tr className="">
<th className="w-16 text-center">#</th>
<th className={twMerge('w-1/5 min-w-[220px]', isCommentColumnCollapsed && 'w-1/4')}>
<tr className="flex flex-row">
{/* <th className="w-10 text-center"/> */}
<th className='w-1/5 min-w-[220px]'>
<div className="inline-flex items-end">
Key
<IconButton variant="plain" className="ml-2" ariaLabel="sort" onClick={onSort}>
@@ -28,22 +23,7 @@ export const SecretTableHeader = ({
</IconButton>
</div>
</th>
<th
className={twMerge(
'w-1/5 cursor-pointer py-2 px-4 font-medium hover:outline hover:outline-mineshaft-400',
isCommentColumnCollapsed && 'w-12'
)}
onClick={onCommentColToggle}
>
<Tooltip content={isCommentColumnCollapsed ? 'Expand' : 'Minimise'}>
<div
className={twMerge('flex items-center', isCommentColumnCollapsed && 'justify-center')}
>
{isCommentColumnCollapsed ? <FontAwesomeIcon icon={faComments} /> : 'Comment'}
</div>
</Tooltip>
</th>
<th className={isCommentColumnCollapsed ? 'w-3/4' : '3/5'}>Value</th>
<th className='w-full'>Value</th>
</tr>
</thead>
);