💄 Style Navlink, primary buttons and headings

frontend/src/features/auth/UserCreate.module.css

@@ -0,0 +1,5 @@
+.form {
+  display: grid;
+  max-width: 500px;
+  gap: 1rem;
+}

frontend/src/features/auth/UserCreate.tsx

@@ -3,6 +3,7 @@ import React from "react";
 import { SubmitHandler, useForm } from "react-hook-form";
 
 import { CreateUserDocument } from "../../types";
+import styles from "./UserCreate.module.css";
 
 type FormValues = {
   firstName: string;
@@ -30,20 +31,20 @@ export const UserCreate = () => {
   };
 
   return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <label>Fornavn</label>
-      <input {...register("firstName", { required: true })} />
-      {errors.firstName && <span>This field is required</span>}
-      <br />
-      <label>Etternavn</label>
-      <input {...register("lastName", { required: true })} />
-      {errors.lastName && <span>This field is required</span>}
-      <br />
-      <label>E-post</label>
-      <input type="email" {...register("email", { required: true })} />
-      {errors.email && <span>This field is required</span>}
-      <br />
-      <input type="submit" disabled={creating} />
-    </form>
+    <div>
+      <h2>Opprett ny</h2>
+      <form onSubmit={handleSubmit(onSubmit)} className={styles.form}>
+        <label>Fornavn</label>
+        <input {...register("firstName", { required: true })} />
+        {errors.firstName && <span>This field is required</span>}
+        <label>Etternavn</label>
+        <input {...register("lastName", { required: true })} />
+        {errors.lastName && <span>This field is required</span>}
+        <label>E-post</label>
+        <input type="email" {...register("email", { required: true })} />
+        {errors.email && <span>This field is required</span>}
+        <input type="submit" disabled={creating} className="btn-primary" />
+      </form>
+    </div>
   );
 };

frontend/src/features/deposit/Deposit.tsx

@@ -55,7 +55,7 @@ export const Deposit: React.FC = () => {
         <input name="amount" value={amount} onChange={(event) => setAmount(event.target.value)} placeholder="0" />
       </section>
       <section className={styles.checkout}>
-        <button type="button" onClick={onSubmit}>
+        <button type="button" onClick={onSubmit} className="primary">
           Sett inn
         </button>{" "}
         <button type="button" onClick={reset}>

frontend/src/features/register/Register.tsx

@@ -70,7 +70,7 @@ export const Register: React.FC = () => {
         <span className={styles.total}>
           Totalt: <span>{total}</span>
         </span>
-        <button type="button" onClick={onSubmit}>
+        <button type="button" onClick={onSubmit} className="primary">
           Kjøp
         </button>{" "}
         <button type="button" onClick={reset}>

frontend/src/features/users/UserList.tsx

@@ -15,6 +15,7 @@ export const UserList = () => {
   const users = showAll ? allUsers : allUsers.filter((u) => activeUserFilter(u));
   return (
     <div>
+      <h2>Folk</h2>
       <button type="button" onClick={() => setShowAll(!showAll)}>
         {showAll ? "Skjul gamliser" : "Vis alle"}
       </button>
@@ -28,7 +29,9 @@ export const UserList = () => {
         ))}
       </ul>
       <br />
-      <Link to="/users/create">Opprett ny</Link>
+      <Link to="/users/create" className="btn-primary">
+        Opprett ny
+      </Link>
     </div>
   );
 };