Factorization of input styling.

frontend/src/design_system/button.scss

@@ -19,4 +19,8 @@ button, a.button {
             background-color: #f2f4ff;
         }
     }
+}
+
+a.button {
+    text-decoration: none;
 }

frontend/src/design_system/index.scss

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

frontend/src/design_system/input.scss

@@ -0,0 +1,51 @@
+form {
+    h1 {
+        margin: 0;
+    }
+
+    div {
+        &.actions {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            align-items: center;
+
+            &.reversed {
+                flex-direction: row-reverse;
+            }
+        }
+
+        &.form-field {
+            display: flex;
+            flex-direction: column;
+            position: relative;
+            gap: .1em;
+    
+            mat-icon {
+                position: absolute;
+                top: 1.3em;
+                left: .5em;
+                color: #777;
+            }
+    
+            label {
+                flex: 1;
+                font-style: italic;
+                padding-left: 1em;
+                color: #777;
+    
+                .required {
+                    color: red;
+                }
+            }
+    
+            input {
+                flex: 1;
+                background-color: #eeeeee;
+                border: none;
+                border-radius: 10em;
+                padding: 1em 1em 1em 3em;
+            }
+        }
+    }
+}