💄 Style Navlink, primary buttons and headings

frontend/src/components/Header.module.css

@@ -4,6 +4,21 @@
   align-items: center;
   text-transform: uppercase;
 }
+.navLink:after {
+  position: absolute;
+  right: 12px;
+  left: 14px;
+  display: block;
+  height: 1px;
+  background-color: rgba(243, 33, 61, 0.4);
+  box-shadow: 0 0 4px rgba(243, 33, 61, 0.4), 0 0 11px rgba(243, 33, 61, 0.4), 0 0 19px rgba(243, 33, 61, 0.4);
+  content: "";
+  transform: rotate(-2.5deg);
+}
+.navLink:hover:after {
+  background-color: var(--brand);
+  box-shadow: 0 0 4px var(--brand), 0 0 11px var(--brand), 0 0 19px var(--brand), 0 0 30px var(--brand);
+}
 
 .logoNav {
   margin-left: 1.5rem;
@@ -17,12 +32,13 @@
   list-style: none;
 }
 .navLink {
+  position: relative;
   padding: 0.4rem 0.8rem;
   border: 1px solid transparent;
+  transition: color 0.1s ease-in-out;
 }
 .navLink:hover {
-  border-color: var(--border);
+  color: white;
-  border-radius: 4px;
 }
 .active.active {
   color: white;

frontend/src/components/Header.tsx

@@ -45,7 +45,9 @@ export const Header: React.FC = () => {
             </NavLink>
           </li>
           <li>
-            <a href={ADMIN_URL}>Admin</a>
+            <a href={ADMIN_URL} className={styles.navLink}>
+              Admin
+            </a>
           </li>
         </ul>
       </nav>

frontend/src/components/ProductCard.module.css

@@ -21,7 +21,7 @@
   left: 0;
   padding: 4px;
   color: white;
-  font-weight: bold;
+  font-size: 1.5rem;
 }
 
 .productImage {

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)}>
+    <div>
-      <label>Fornavn</label>
+      <h2>Opprett ny</h2>
-      <input {...register("firstName", { required: true })} />
+      <form onSubmit={handleSubmit(onSubmit)} className={styles.form}>
-      {errors.firstName && <span>This field is required</span>}
+        <label>Fornavn</label>
-      <br />
+        <input {...register("firstName", { required: true })} />
-      <label>Etternavn</label>
+        {errors.firstName && <span>This field is required</span>}
-      <input {...register("lastName", { required: true })} />
+        <label>Etternavn</label>
-      {errors.lastName && <span>This field is required</span>}
+        <input {...register("lastName", { required: true })} />
-      <br />
+        {errors.lastName && <span>This field is required</span>}
-      <label>E-post</label>
+        <label>E-post</label>
-      <input type="email" {...register("email", { required: true })} />
+        <input type="email" {...register("email", { required: true })} />
-      {errors.email && <span>This field is required</span>}
+        {errors.email && <span>This field is required</span>}
-      <br />
+        <input type="submit" disabled={creating} className="btn-primary" />
-      <input type="submit" disabled={creating} />
+      </form>
-    </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>
   );
 };

frontend/src/global.css

@@ -33,6 +33,7 @@ body {
   background-color: var(--background);
   color: var(--text);
   font-family: var(--font-family);
+  text-shadow: 0 0 4px currentColor, 0 0 11px currentColor, 0 0 19px currentColor;
 }
 
 /* Links */
@@ -50,7 +51,22 @@ a:active {
 }
 
 a:hover {
-  color: var(--interlace);
+  color: var(--text);
+}
+h1,
+h2,
+h3,
+h4,
+h5 {
+  color: var(--sun);
+}
+a.btn-primary {
+  padding: 0.4rem 1rem;
+  border: 1px solid transparent;
+  background: linear-gradient(var(--sun) 30%, var(--sun-end) 100%);
+  border-radius: 4px;
+  box-shadow: 0 0 4px var(--sun), 0 0 11px var(--sun), 0 0 19px var(--sun);
+  color: var(--text);
 }
 
 /* Buttons */
@@ -61,11 +77,18 @@ button {
   border-radius: 4px;
   color: var(--border);
   font-family: var(--font-family);
+  text-shadow: 0 0 4px currentColor, 0 0 11px currentColor, 0 0 19px currentColor;
 }
 button:hover {
   color: var(--text);
   cursor: pointer;
 }
+button.primary {
+  border: 1px solid transparent;
+  background: linear-gradient(var(--sun) 30%, var(--sun-end) 100%);
+  box-shadow: 0 0 4px var(--sun), 0 0 11px var(--sun), 0 0 19px var(--sun);
+  color: var(--text);
+}
 
 /* Inputs */
 input {
@@ -76,11 +99,20 @@ input {
   color: var(--text);
   font-family: var(--font-family);
   font-size: 1.5rem;
+  text-shadow: 0 0 4px currentColor, 0 0 11px currentColor, 0 0 19px currentColor;
 }
 input:focus {
   background: rgba(85, 109, 200, 0.1);
   outline: none;
 }
+input.btn-primary {
+  padding: 0.4rem 1rem;
+  border: 1px solid transparent;
+  background: linear-gradient(var(--sun) 30%, var(--sun-end) 100%);
+  border-radius: 4px;
+  box-shadow: 0 0 4px var(--sun), 0 0 11px var(--sun), 0 0 19px var(--sun);
+  color: var(--text);
+}
 ::placeholder {
   color: var(--border);
 }