feat: table styles

Author: Jeday

features/create-vault/create-vault-form/stages/confirmation/confirmation-entry/confirmation-entry.tsx

@@ -1,7 +1,7 @@
 import { FC } from 'react';
 import { useFormContext } from 'react-hook-form';
 
-import { Hint } from 'features/create-vault/shared/hint';
+import { Hint } from 'shared/components';
 
 import { ConfirmAddress, ConfirmAddressArray } from './confirm-address';
 import { ConfirmNumber } from './confirm-number';

features/create-vault/create-vault-form/stages/main-settings/create-vault-input/create-vault-input.tsx

@@ -1,5 +1,5 @@
 import type { FC } from 'react';
-import { Hint } from 'features/create-vault/shared/hint';
+import { Hint } from 'shared/components';
 
 import { GeneralInput, GeneralInputProps } from './general-input';
 import { AddressInput } from './address-input';

features/create-vault/create-vault-form/stages/main-settings/create-vault-input/styles.ts

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { ButtonIcon, Checkbox, Question } from '@lidofinance/lido-ui';
+import { ButtonIcon, Checkbox } from '@lidofinance/lido-ui';
 
 /// CreateVaultInput
 
@@ -18,13 +18,6 @@ export const InputTitle = styled.p`
   display: inline-flex;
 `;
 
-export const QuestionIcon = styled(Question)`
-  width: 20px;
-  height: 20px;
-  fill: ${({ theme }) => theme.colors.textSecondary};
-  align-self: center;
-`;
-
 export const InputNotes = styled.p`
   font-size: ${({ theme }) => theme.fontSizesMap.xxs}px;
   font-weight: 400;

features/create-vault/shared/hint.tsx

@@ -1,19 +1,29 @@
 import { FC } from 'react';
 
-import { Question } from '@lidofinance/lido-ui';
-import { CommonHeader } from 'features/home/components/vault-table/styles';
+import { Hint } from 'shared/components';
+import { ArrowAnimated, CommonHeader } from './styles';
 
-export interface HeaderCellProps {
+type SortDirection = 'asc' | 'desc';
+
+export type HeaderCellProps = {
   title: string;
-  showQuestion?: boolean;
-}
+  hint?: string;
+  onSort?: (dir: SortDirection) => void;
+  sortDirection?: SortDirection;
+};
 
-export const HeaderCell: FC<HeaderCellProps> = (props) => {
-  const { title, showQuestion = true } = props;
+export const HeaderCell: FC<HeaderCellProps> = ({
+  title,
+  hint,
+  onSort,
+  sortDirection,
+}) => {
+  const showSort = !!(onSort && sortDirection);
   return (
     <CommonHeader>
       {title}
-      {showQuestion && <Question />}
+      {hint && <Hint text={hint} />}
+      {showSort && <ArrowAnimated direction={sortDirection} />}
     </CommonHeader>
   );
 };

features/home/components/vault-table/cells/address-cell.tsx

@@ -1,6 +1,2 @@
-export * from './default-cell';
-export * from './address-cell';
-export * from './ether-cell';
-export * from './mint-cell';
 export * from './percent-cell';
 export * from './header-cell';