From c44e5827063da0c8413eb3a41da007ec53353fa0 Mon Sep 17 00:00:00 2001
From: Nikolai R Kristiansen <nikolaik@gmail.com>
Date: Tue, 2 Nov 2021 22:32:50 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Working=20register=20styles?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/ProductCard.module.css     | 52 ++++++++++++++++---
 frontend/src/components/ProductCard.tsx       |  9 ++--
 frontend/src/components/UserCard.module.css   | 18 ++++++-
 frontend/src/components/UserCard.tsx          |  4 +-
 .../src/features/register/Register.module.css | 13 +++--
 frontend/src/features/register/Register.tsx   |  2 +-
 6 files changed, 80 insertions(+), 18 deletions(-)

diff --git a/frontend/src/components/ProductCard.module.css b/frontend/src/components/ProductCard.module.css
index 7e5aae4..659f9b1 100644
--- a/frontend/src/components/ProductCard.module.css
+++ b/frontend/src/components/ProductCard.module.css
@@ -1,17 +1,57 @@
-.active {
-    background: green;
-}
 .product {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
+    background: transparent;
+    border: 4px solid transparent;
+    border-radius: 8px;
+    transition: background-color 0.1s ease-out, border 0.1s ease-out;
+    overflow: hidden;
+}
+.product:hover {
+    background: rgba(0, 0, 0, 0.1);
+    border-color: rgba(25, 135, 84, 0.6);
+}
+.active {
+    background: rgba(25, 135, 84, 0.2);
+    border-color: rgba(25, 135, 84, 0.6);
+}
+.active:hover {
+    background: rgba(25, 135, 84, 0.2);
 }
 .productText {
-    padding-top: 8px;
+    position: absolute;
+    background: rgba(0, 0, 0, 0.6);
+    color: white;
+    font-weight: bold;
+    padding: 4px;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    border-radius: 8px;
 }
 .productImage {
-    width: 80px;
-    height: 80px;
+    width: 140px;
+    height: 140px;
     object-fit: contain;
+}
+.noProductImage {
+    width: 140px;
+    height: 140px;
+}
+.amount {
+    font-weight: bold;
+    font-size: 2rem;
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    background: rgba(0, 0, 0, 0.6);
+    color: white;
+    border-radius: 8px;
+    padding: 4px;
+    line-height: 1;
+}
+.wrap {
+    position: relative;
 }
\ No newline at end of file
diff --git a/frontend/src/components/ProductCard.tsx b/frontend/src/components/ProductCard.tsx
index 233a67b..050dc7f 100644
--- a/frontend/src/components/ProductCard.tsx
+++ b/frontend/src/components/ProductCard.tsx
@@ -15,9 +15,12 @@ export const ProductCard: React.FC<ProductCardProps> = ({ product, onProduct, am
   const classes = clsx(styles.product, { [styles.active]: active });
   return (
     <button className={classes} type="button" onClick={onProduct}>
-      <span>{amount}</span>
-      {product.imageUrl && <img src={product.imageUrl} className={styles.productImage} alt={product.name} />}
-      <span className={styles.productText}>{product.name}</span>
+      <div className={styles.wrap}>
+        <span className={styles.amount}>{amount}</span>
+        {product.imageUrl && <img src={product.imageUrl} className={styles.productImage} alt={product.name} />}
+        {!product.imageUrl && <div className={styles.noProductImage} />}
+        <span className={styles.productText}>{product.name}</span>
+      </div>
     </button>
   );
 };
diff --git a/frontend/src/components/UserCard.module.css b/frontend/src/components/UserCard.module.css
index 5b2c21b..4ec78f8 100644
--- a/frontend/src/components/UserCard.module.css
+++ b/frontend/src/components/UserCard.module.css
@@ -1,9 +1,23 @@
-.card {
+.user {
     display: flex;
     flex-direction: column;
+    align-items: center;
+    padding: 4px;
+    background: transparent;
+    border: 3px solid transparent;
+    border-radius: 8px;
+    transition: background-color 0.1s ease-out, border 0.1s ease-out;
+}
+.user:hover {
+    background: rgba(0, 0, 0, 0.1);
+    border-color: rgba(25, 135, 84, 0.6);
 }
 .active {
-    background: green;
+    background: rgba(25, 135, 84, 0.2);
+    border-color: rgba(25, 135, 84, 0.6);
+}
+.active:hover {
+    background: rgba(25, 135, 84, 0.2);
 }
 .avatar {
     border-radius: 50px;
diff --git a/frontend/src/components/UserCard.tsx b/frontend/src/components/UserCard.tsx
index 89c3d2f..ab55641 100644
--- a/frontend/src/components/UserCard.tsx
+++ b/frontend/src/components/UserCard.tsx
@@ -13,7 +13,7 @@ type UserCardProps = {
 
 /** If user is null, then it's the special external user */
 export const UserCard: React.FC<UserCardProps> = ({ user, onUser, active = false }) => {
-  const classes = clsx(styles.card, { [styles.active]: active });
+  const classes = clsx(styles.user, { [styles.active]: active });
   return (
     <button className={classes} onClick={onUser} type="button">
       {user?.profile?.image && (
@@ -24,7 +24,7 @@ export const UserCard: React.FC<UserCardProps> = ({ user, onUser, active = false
           <PersonFill />
         </span>
       )}
-      <span className={styles.name}>{user?.firstName || "External"}</span>
+      <span className={styles.name}>{user?.firstName || "Ekstern"}</span>
       <span className={styles.balance}>{user?.profile?.balance || ""}</span>
     </button>
   );
diff --git a/frontend/src/features/register/Register.module.css b/frontend/src/features/register/Register.module.css
index 8fb253e..530c2a6 100644
--- a/frontend/src/features/register/Register.module.css
+++ b/frontend/src/features/register/Register.module.css
@@ -1,17 +1,22 @@
 .userList {
     display: grid;
     grid-template-columns: repeat(12, 1fr);
-    gap: 16px;
-
+    row-gap: 16px;
 }
+
 .productList {
     display: grid;
-    grid-template-columns: repeat(12, 1fr);
-    gap: 16px;
+    grid-template-columns: repeat(8, 150px);
+    row-gap: 16px;
 }
+.productListSection {
+    margin-top: 2rem;
+}
+
 .checkout {
     margin-top: 32px;
 }
+
 .total {
     display: inline-block;
     margin-right: 8px;
diff --git a/frontend/src/features/register/Register.tsx b/frontend/src/features/register/Register.tsx
index 29b7f54..0985e1e 100644
--- a/frontend/src/features/register/Register.tsx
+++ b/frontend/src/features/register/Register.tsx
@@ -78,7 +78,7 @@ export const Register: React.FC = () => {
           {showAll ? "Skjul gamliser" : "Vis alle"}
         </button>
       </section>
-      <section>
+      <section className={styles.productListSection}>
         <h2>Kjøper hva?</h2>
         <div className={styles.productList}>
           {products.map((product: Product) => (