From 7c5cc38cff486f6de98e4b2a28bbdfb0dde7038a Mon Sep 17 00:00:00 2001
From: Florian THIERRY <florian_thierry@ext.connect-tech.sncf>
Date: Mon, 21 Oct 2024 11:46:35 +0200
Subject: [PATCH] Initiate design system and refactor login page buttons.

---
 .../publications-search-bar.component.scss    |  3 ++-
 .../src/app/pages/login/login.component.html  |  2 +-
 .../src/app/pages/login/login.component.scss  | 14 ------------
 frontend/src/design_system/button.scss        | 22 +++++++++++++++++++
 frontend/src/design_system/index.scss         |  1 +
 frontend/src/styles.scss                      |  1 +
 6 files changed, 27 insertions(+), 16 deletions(-)
 create mode 100644 frontend/src/design_system/button.scss
 create mode 100644 frontend/src/design_system/index.scss

diff --git a/frontend/src/app/components/publications-search-bar/publications-search-bar.component.scss b/frontend/src/app/components/publications-search-bar/publications-search-bar.component.scss
index 72b9a11..86d7292 100644
--- a/frontend/src/app/components/publications-search-bar/publications-search-bar.component.scss
+++ b/frontend/src/app/components/publications-search-bar/publications-search-bar.component.scss
@@ -24,9 +24,10 @@
             border-radius: $borderRadiusValue;
             background-color: white;
             border: none;
-            top: .4em;
+            top: 0;
             right: 0;
             color: #aaaaaa;
+            padding: .4em;
     
             &:hover {
                 background-color: #eee;
diff --git a/frontend/src/app/pages/login/login.component.html b/frontend/src/app/pages/login/login.component.html
index 8ecd79a..93d6a54 100644
--- a/frontend/src/app/pages/login/login.component.html
+++ b/frontend/src/app/pages/login/login.component.html
@@ -18,6 +18,6 @@
     </div>
     <div class="actions">
         <button type="submit" i18n>Send</button>
-        <a [routerLink]="['/signin']" i18n>Create an account</a>
+        <a [routerLink]="['/signin']" class="button secondary" i18n>Create an account</a>
     </div>
 </form>
\ No newline at end of file
diff --git a/frontend/src/app/pages/login/login.component.scss b/frontend/src/app/pages/login/login.component.scss
index 4cfc60b..1fdc1a3 100644
--- a/frontend/src/app/pages/login/login.component.scss
+++ b/frontend/src/app/pages/login/login.component.scss
@@ -43,20 +43,6 @@
                     color: #3f51b5;
                     text-decoration: none;
                 }
-
-                button, a.button {
-                    padding: .8em 1.2em;
-                    border-radius: 10em;
-                    border: none;
-                    background-color: #3f51b5;
-                    color: white;
-                    transition: background-color .2s ease-in-out;
-                
-                    &:hover {
-                        background-color: #5b6ed8;
-                        cursor: pointer;
-                    }
-                }
             }
 
             label {
diff --git a/frontend/src/design_system/button.scss b/frontend/src/design_system/button.scss
new file mode 100644
index 0000000..485b7fb
--- /dev/null
+++ b/frontend/src/design_system/button.scss
@@ -0,0 +1,22 @@
+button, a.button {
+    padding: .8em 1.2em;
+    border-radius: 10em;
+    border: none;
+    background-color: #3f51b5;
+    color: white;
+    transition: background-color .2s ease-in-out;
+
+    &:hover {
+        background-color: #5b6ed8;
+        cursor: pointer;
+    }
+
+    &.secondary {
+        color: #3f51b5;
+        background-color: white;
+    
+        &:hover {
+            background-color: #f2f4ff;
+        }
+    }
+}
\ No newline at end of file
diff --git a/frontend/src/design_system/index.scss b/frontend/src/design_system/index.scss
new file mode 100644
index 0000000..8f77da9
--- /dev/null
+++ b/frontend/src/design_system/index.scss
@@ -0,0 +1 @@
+@use './button.scss';
\ No newline at end of file
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index a8021ad..269712a 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -1,4 +1,5 @@
 /* You can add global styles to this file, and also import other style files */
+@use './design_system/index.scss';
 
 html, body { height: 100%; }
 body {