Refactor buttons (#1257)

* Refactor buttons

* Complete components creation

* Complete refactoring

* fix lint

* Complete button work

front/src/modules/spreadsheet-import/components/ModalCloseButton.tsx

@@ -1,9 +1,7 @@
-import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
 import { useSpreadsheetImportInitialStep } from '@/spreadsheet-import/hooks/useSpreadsheetImportInitialStep';
 import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpreadsheetImportInternal';
-import { ButtonVariant } from '@/ui/button/components/Button';
 import { IconButton } from '@/ui/button/components/IconButton';
 import { useDialog } from '@/ui/dialog/hooks/useDialog';
 import { IconX } from '@/ui/icon/index';
@@ -25,8 +23,6 @@ type ModalCloseButtonProps = {
 };
 
 export const ModalCloseButton = ({ onClose }: ModalCloseButtonProps) => {
-  const theme = useTheme();
-
   const { initialStepState } = useSpreadsheetImportInternal();
 
   const { initialStep } = useSpreadsheetImportInitialStep(
@@ -49,19 +45,14 @@ export const ModalCloseButton = ({ onClose }: ModalCloseButtonProps) => {
       message: 'Are you sure? Your current information will not be saved.',
       buttons: [
         { title: 'Cancel' },
-        { title: 'Exit', onClick: onClose, variant: ButtonVariant.Danger },
+        { title: 'Exit', onClick: onClose, accent: 'danger' },
       ],
     });
   }
 
   return (
-    <>
-      <StyledCloseButtonContainer>
-        <IconButton
-          icon={<IconX size={16} color={theme.font.color.tertiary} />}
-          onClick={handleClose}
-        />
-      </StyledCloseButtonContainer>
-    </>
+    <StyledCloseButtonContainer>
+      <IconButton icon={<IconX />} onClick={handleClose} />
+    </StyledCloseButtonContainer>
   );
 };

front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep.tsx

@@ -11,7 +11,6 @@ import { normalizeTableData } from '@/spreadsheet-import/utils/normalizeTableDat
 import { setColumn } from '@/spreadsheet-import/utils/setColumn';
 import { setIgnoreColumn } from '@/spreadsheet-import/utils/setIgnoreColumn';
 import { setSubColumn } from '@/spreadsheet-import/utils/setSubColumn';
-import { ButtonVariant } from '@/ui/button/components/Button';
 import { useDialog } from '@/ui/dialog/hooks/useDialog';
 import { Modal } from '@/ui/modal/components/Modal';
 import { useSnackBar } from '@/ui/snack-bar/hooks/useSnackBar';
@@ -224,7 +223,7 @@ export const MatchColumnsStep = <T extends string>({
           {
             title: 'Continue',
             onClick: handleAlertOnContinue,
-            variant: ButtonVariant.Primary,
+            variant: 'primary',
           },
         ],
       });

front/src/modules/spreadsheet-import/steps/components/ValidationStep/ValidationStep.tsx

@@ -8,7 +8,7 @@ import { Table } from '@/spreadsheet-import/components/Table';
 import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpreadsheetImportInternal';
 import type { Data } from '@/spreadsheet-import/types';
 import { addErrorsAndRunHooks } from '@/spreadsheet-import/utils/dataMutations';
-import { Button, ButtonVariant } from '@/ui/button/components/Button';
+import { Button } from '@/ui/button/components/Button';
 import { useDialog } from '@/ui/dialog/hooks/useDialog';
 import { IconTrash } from '@/ui/icon';
 import { Toggle } from '@/ui/input/toggle/components/Toggle';
@@ -173,7 +173,7 @@ export const ValidationStep = <T extends string>({
           { title: 'Cancel' },
           {
             title: 'Submit',
-            variant: ButtonVariant.Primary,
+            variant: 'primary',
             onClick: submitData,
           },
         ],
@@ -201,7 +201,7 @@ export const ValidationStep = <T extends string>({
           <Button
             icon={<IconTrash />}
             title="Remove"
-            variant={ButtonVariant.Danger}
+            accent="danger"
             onClick={deleteSelectedRows}
             disabled={selectedRows.size === 0}
           />