From f7754462242f065aee3f1e39125888c0c8df77da Mon Sep 17 00:00:00 2001
From: Nikolai R Kristiansen <nikolaik@gmail.com>
Date: Sun, 6 Mar 2022 15:16:16 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Style=20Navlink,=20primary=20but?=
 =?UTF-8?q?tons=20and=20headings?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Header.module.css     | 20 +++++++++--
 frontend/src/components/Header.tsx            |  4 ++-
 .../src/components/ProductCard.module.css     |  2 +-
 .../src/features/auth/UserCreate.module.css   |  5 +++
 frontend/src/features/auth/UserCreate.tsx     | 31 +++++++++--------
 frontend/src/features/deposit/Deposit.tsx     |  2 +-
 frontend/src/features/register/Register.tsx   |  2 +-
 frontend/src/features/users/UserList.tsx      |  5 ++-
 frontend/src/global.css                       | 34 ++++++++++++++++++-
 9 files changed, 82 insertions(+), 23 deletions(-)
 create mode 100644 frontend/src/features/auth/UserCreate.module.css

diff --git a/frontend/src/components/Header.module.css b/frontend/src/components/Header.module.css
index 104a3ed..f459e93 100644
--- a/frontend/src/components/Header.module.css
+++ b/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);
-  border-radius: 4px;
+  color: white;
 }
 .active.active {
   color: white;
diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
index 85e3371..8356c21 100644
--- a/frontend/src/components/Header.tsx
+++ b/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>
diff --git a/frontend/src/components/ProductCard.module.css b/frontend/src/components/ProductCard.module.css
index 96261cb..35a2c8e 100644
--- a/frontend/src/components/ProductCard.module.css
+++ b/frontend/src/components/ProductCard.module.css
@@ -21,7 +21,7 @@
   left: 0;
   padding: 4px;
   color: white;
-  font-weight: bold;
+  font-size: 1.5rem;
 }
 
 .productImage {
diff --git a/frontend/src/features/auth/UserCreate.module.css b/frontend/src/features/auth/UserCreate.module.css
new file mode 100644
index 0000000..dd865ca
--- /dev/null
+++ b/frontend/src/features/auth/UserCreate.module.css
@@ -0,0 +1,5 @@
+.form {
+  display: grid;
+  max-width: 500px;
+  gap: 1rem;
+}
diff --git a/frontend/src/features/auth/UserCreate.tsx b/frontend/src/features/auth/UserCreate.tsx
index c7caa7d..e0fddda 100644
--- a/frontend/src/features/auth/UserCreate.tsx
+++ b/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>
   );
 };
diff --git a/frontend/src/features/deposit/Deposit.tsx b/frontend/src/features/deposit/Deposit.tsx
index 5c14e57..b80e0ca 100644
--- a/frontend/src/features/deposit/Deposit.tsx
+++ b/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}>
diff --git a/frontend/src/features/register/Register.tsx b/frontend/src/features/register/Register.tsx
index f40e676..da6c34b 100644
--- a/frontend/src/features/register/Register.tsx
+++ b/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}>
diff --git a/frontend/src/features/users/UserList.tsx b/frontend/src/features/users/UserList.tsx
index 99517d0..d68e9f1 100644
--- a/frontend/src/features/users/UserList.tsx
+++ b/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>
   );
 };
diff --git a/frontend/src/global.css b/frontend/src/global.css
index fa51726..7adff6b 100644
--- a/frontend/src/global.css
+++ b/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);
 }