[EN-4026] chore(inputs): updated FooterForm 🚀

ReseauEntourage · Aug 22, 2023 · bea60e9 · bea60e9
1 parent 94cf5d6
commit bea60e9
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 11 deletions.
diff --git a/src/components/forms/FormFooter/FormFooter.styles.ts b/src/components/forms/FormFooter/FormFooter.styles.ts
@@ -1,6 +1,9 @@
 import styled from 'styled-components';
+import { COLORS } from 'src/constants/styles';
 
 export const StyledFooterForm = styled.div`
+  display: flex;
+  flex-direction: column;
   .cta-container {
     padding-top: 24px;
     // max-width: 440px;
@@ -19,3 +22,15 @@ export const StyledFooterForm = styled.div`
     }
   }
 `;
+
+export const StyledErrorMessage = styled.div`
+  flex: 1;
+  color: ${COLORS.darkOrange};
+  font-size: 14px;
+  margin-bottom: 16px;
+`;
+
+export const StyledCompulsoryMessage = styled.div`
+  color: ${COLORS.darkGrayFont};
+  font-size: 12px;
+`;
diff --git a/src/components/forms/FormFooter/FormFooter.tsx b/src/components/forms/FormFooter/FormFooter.tsx
@@ -1,7 +1,11 @@
 import React, { FormEvent } from 'react';
 import { ButtonPost } from 'src/components/backoffice/cv/ButtonPost';
 import { Button } from 'src/components/utils/Button';
-import { StyledFooterForm } from './FormFooter.styles';
+import {
+  StyledCompulsoryMessage,
+  StyledErrorMessage,
+  StyledFooterForm,
+} from './FormFooter.styles';
 
 interface FooterFormProps {
   error?: string;
@@ -13,7 +17,6 @@ interface FooterFormProps {
   noCompulsory?: boolean;
 }
 
-// TODO NEW STYLE
 export const FormFooter = ({
   error,
   onSubmit,
@@ -24,17 +27,13 @@ export const FormFooter = ({
   noCompulsory = false,
 }: FooterFormProps) => {
   return (
-    <StyledFooterForm className="uk-flex uk-flex-column uk-flex-left">
-      {error && (
-        <div className="uk-flex uk-flex-1">
-          <span className="uk-text-danger uk-margin-small-bottom">{error}</span>
-        </div>
-      )}
+    <StyledFooterForm>
+      {error && <StyledErrorMessage>{error}</StyledErrorMessage>}
       <div>
         {!noCompulsory && (
-          <div className="uk-width-auto@s uk-margin-small-bottom">
-            <span className="uk-text-meta">* : Mentions obligatoires</span>
-          </div>
+          <StyledCompulsoryMessage>
+            * : Mentions obligatoires
+          </StyledCompulsoryMessage>
         )}
 
         <div className="cta-container">