Refactor buttons (#1257)

* Refactor buttons

* Complete components creation

* Complete refactoring

* fix lint

* Complete button work

front/src/modules/ui/modal/components/ConfirmationModal.tsx

@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 import { AnimatePresence, LayoutGroup } from 'framer-motion';
 import debounce from 'lodash.debounce';
 
-import { Button, ButtonVariant } from '@/ui/button/components/Button';
+import { Button } from '@/ui/button/components/Button';
 import { TextInput } from '@/ui/input/text/components/TextInput';
 import { Modal } from '@/ui/modal/components/Modal';
 import {
@@ -32,6 +32,7 @@ const StyledConfirmationModal = styled(Modal)`
 
 const StyledCenteredButton = styled(Button)`
   justify-content: center;
+  margin-top: ${({ theme }) => theme.spacing(2)};
 `;
 
 const StyledCenteredTitle = styled.div`
@@ -107,21 +108,19 @@ export function ConfirmationModal({
               />
             </Section>
           )}
-          <StyledConfirmationButton
+          <StyledCenteredButton
             onClick={onConfirmClick}
-            variant={ButtonVariant.Secondary}
+            variant="secondary"
+            accent="danger"
             title={deleteButtonText}
             disabled={!isValidValue}
             fullWidth
           />
           <StyledCenteredButton
             onClick={() => setIsOpen(false)}
-            variant={ButtonVariant.Secondary}
+            variant="secondary"
             title="Cancel"
             fullWidth
-            style={{
-              marginTop: 10,
-            }}
           />
         </StyledConfirmationModal>
       </LayoutGroup>