Update sign in and sign up page styles.

H1B0B0 · Feb 6, 2024 · 023f693 · 023f693
1 parent cc27bb1
commit 023f693
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 15 deletions.
diff --git a/front/public/bg.png b/front/public/bg.png
diff --git a/front/src/pages/SignIn/styles.ts b/front/src/pages/SignIn/styles.ts
@@ -3,11 +3,12 @@ import { darken, lighten } from 'polished';
 
 export const Container = styled.div`
   height: 100%;
-  background-color: #f5f5f5;
+  background-image: url("bg.png");
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
+ 
 
   form {
     width: 100%;
@@ -21,7 +22,7 @@ export const Container = styled.div`
     h2 {
       align-self: center;
       color: #222;
-      color: #C70039;
+      color: #E20000;
       font-size: 30px;
       padding: 0.5rem;
       
@@ -36,7 +37,7 @@ export const Container = styled.div`
     h2 {
       align-self: center;
       color: #222;
-      color: #C70039;
+      color: #E20000;
       font-size: 30px;
       padding: 0.2rem;
     }
@@ -56,10 +57,7 @@ export const Container = styled.div`
       }
     }
     
-    h4{
-      color: red;
-      margin-top: ;
-    }
+   
 
     
     button {
@@ -86,7 +84,7 @@ export const Container = styled.div`
     padding: 1rem;
        
     span{
-      color: #C70039;
+      color: #E20000;
       text-decoration: underline;
 
     }

diff --git a/front/src/pages/SignUp/index.tsx b/front/src/pages/SignUp/index.tsx
@@ -31,6 +31,7 @@ const SignUp: React.FC = () => {
     <Container>
       <form data-testid='login-form' onSubmit={handleSubmit}>
         <h2>Inscription</h2>
+        <p>Inscrivez-vous pour accéder à votre espace</p>
         <input
           type='text'
           placeholder='Votre nom'
@@ -51,7 +52,7 @@ const SignUp: React.FC = () => {
         />
         <button type='submit'>Entrer</button>
       </form>
-      <Link to='/'>J'ai déja un compte</Link>
+      <Link to='/'>Vous avez déja un compte ? <span>Cliquer ici !</span></Link>
     </Container>
   );
 };

diff --git a/front/src/pages/SignUp/styles.ts b/front/src/pages/SignUp/styles.ts
@@ -8,44 +8,75 @@ export const Container = styled.div`
   justify-content: center;
   align-items: center;
   flex-direction: column;
+  background-image: url("bg.png");
+ 
 
   form {
     width: 100%;
-    max-width: 250px;
+    max-width: 350px;
     display: flex;
     flex-direction: column;
+    background-color:
+    
 
+    
     h2 {
       align-self: center;
       color: #222;
+      color: #C70039;
+      font-size: 30px;
+      padding: 0.5rem;
+      
+    }
+
+     p {
+      align-self: center;
+      color: #474749;
+      margin: 10px;
+    }
+
+    h2 {
+      align-self: center;
+      color: #222;
+      color: #E20000;
+      font-size: 30px;
+      padding: 0.2rem;
     }
 
     input {
-      margin-top: 20px;
+      margin-top: 10px;
       border: 1px solid #ddd;
-      border-radius: 4px;
+      border-radius: 14px;
       height: 48px;
       padding: 0 20px;
       font-size: 16px;
-      color: #666;
+      color: #66
 
       & + input {
         margin-top: 5px;
+        
       }
     }
+    
+    h4{
+      color: red;
+      margin-top: ;
+    }
 
+    
     button {
       margin-top: 10px;
       border: 0;
       border-radius: 4px;
       height: 48px;
       font-size: 16px;
-      background: #3bafda;
+      background: #C70039;
       font-weight: bold;
       color: #fff;
+      border-radius: 30px;
 
       &:hover {
-        background-color: ${darken(0.08, '#3bafda')};
+        background-color: ${darken(0.08, '#C70039')};
       }
     }
   }
@@ -54,9 +85,18 @@ export const Container = styled.div`
     margin-top: 5px;
     text-decoration: none;
     color: #222;
+    padding: 1rem;
+       
+    span{
+      color: #E20000;
+      text-decoration: underline;
+
+    }
+
 
     &:hover {
       color: ${lighten(0.08, '#222')};
     }
   }
+  
 `;