✨ Add Form components

code/frontend/src/components/Button.js

@@ -7,7 +7,7 @@ import make_icon from "../utils/make_icon"
 export default function Button({ children, className, color, icon, ...props }) {
 
     return (
-        <button className={classNames(Style.Button, Style[`Button${color}`], className)} {...props}>
+        <button type={"button"} className={classNames(Style.Button, Style[`Button${color}`], className)} {...props}>
             {children} {make_icon(icon, Style.Icon)}
         </button>
     )

code/frontend/src/components/Checkbox.module.css

@@ -1,4 +1,5 @@
 .Checkbox {
     height: 25px;
     width: 25px;
+    vertical-align: bottom;
 }

code/frontend/src/components/Label.js

@@ -0,0 +1,17 @@
+import React, { Fragment } from "react"
+import Style from "./Label.module.css"
+import classNames from "classnames"
+
+
+export default function Label({ children, text, for_ }) {
+    return (
+        <Fragment>
+            <label for={for_} className={Style.LabelText} >
+                {text}
+            </label>
+            <div className={Style.LabelContent}>
+                {children}
+            </div>
+        </Fragment>
+    )
+}

code/frontend/src/components/Label.module.css

@@ -0,0 +1,13 @@
+.LabelText {
+    grid-column: 1;
+    text-align: right;
+}
+
+.LabelContent {
+    grid-column: 2;
+}
+
+.LabelContent > * {
+    height: 100%;
+    width: 100%;
+}

code/frontend/src/components/LabelledForm.js

@@ -0,0 +1,12 @@
+import React from "react"
+import Style from "./LabelledForm.module.css"
+import classNames from "classnames"
+
+
+export default function LabelledForm({ children, className, ...props }) {
+    return (
+        <form className={classNames(Style.LabelledForm, className)} {...props}>
+            {children}
+        </form>
+    )
+}

code/frontend/src/components/LabelledForm.module.css

@@ -0,0 +1,11 @@
+.LabelledForm {
+    display: grid;
+
+    grid-template-columns: auto 1fr;
+    grid-auto-rows: auto;
+
+    grid-gap: 10px;
+
+    justify-content: center;
+    align-items: center;
+}

code/frontend/src/components/Radio.module.css

@@ -1,4 +1,5 @@
 .Radio {
     height: 25px;
     width: 25px;
+    vertical-align: bottom;
 }

code/frontend/src/index.css

@@ -20,6 +20,10 @@ body {
     min-width: 100%;
 }
 
+h1, h2, h3, h4, h5, h6 {
+    font-family: var(--font-title);
+}
+
 .ThemeDark {
     --bg-primary: #3B7097;
     --fg-primary: #FFFFFF;