Initiate design system and refactor login page buttons.

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;

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>

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 {

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;
+        }
+    }
+}

frontend/src/design_system/index.scss

@@ -0,0 +1 @@
+@use './button.scss';

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 {