💄 Working register styles

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;
+    width: 140px;
-    height: 80px;
+    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;
 }

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>
+      <div className={styles.wrap}>
-      {product.imageUrl && <img src={product.imageUrl} className={styles.productImage} alt={product.name} />}
+        <span className={styles.amount}>{amount}</span>
-      <span className={styles.productText}>{product.name}</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>
   );
 };

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;

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>
   );

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);
+    grid-template-columns: repeat(8, 150px);
-    gap: 16px;
+    row-gap: 16px;
 }
+.productListSection {
+    margin-top: 2rem;
+}
+
 .checkout {
     margin-top: 32px;
 }
+
 .total {
     display: inline-block;
     margin-right: 8px;

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) => (