From 05d3dcbb3eb732c5e4bcc20ba65bc74f2335a357 Mon Sep 17 00:00:00 2001
From: Nikolai R Kristiansen <nikolaik@gmail.com>
Date: Sun, 17 Apr 2022 16:01:09 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Style=20product=20grid,=20rm=20i?=
 =?UTF-8?q?mages?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

♻ Move Wireframe to own component
---
 frontend/src/App.module.css                   | 39 -----------
 frontend/src/App.tsx                          |  7 +-
 .../src/components/ProductCard.module.css     | 66 ++++++++-----------
 frontend/src/components/ProductCard.tsx       | 10 +--
 frontend/src/components/Wireframe.module.css  | 38 +++++++++++
 frontend/src/components/Wireframe.tsx         | 11 ++++
 .../src/features/register/Register.module.css |  5 +-
 7 files changed, 85 insertions(+), 91 deletions(-)
 create mode 100644 frontend/src/components/Wireframe.module.css
 create mode 100644 frontend/src/components/Wireframe.tsx

diff --git a/frontend/src/App.module.css b/frontend/src/App.module.css
index 491b2ad..ff1e3ea 100644
--- a/frontend/src/App.module.css
+++ b/frontend/src/App.module.css
@@ -2,42 +2,3 @@
   margin: 1rem auto;
   max-width: 1220px;
 }
-
-.wireframe {
-  position: absolute;
-  bottom: calc(22% - 512px);
-  left: calc(50% - 512px);
-  width: 1024px;
-  height: 1024px;
-  display: grid;
-  grid-template-columns: repeat(8, 128px);
-  animation-iteration-count: infinite;
-  animation-name: isometric-rotate;
-  animation-duration: 10s;
-  animation-timing-function: linear;
-  pointer-events: none;
-  z-index: -1;
-}
-
-.cell {
-  border-bottom: 2px solid var(--sun);
-  border-right: 2px solid var(--sun);
-
-}
-
-.cell:nth-child(8n) {
-  border-right: none;
-}
-
-.cell:nth-child(n+57) {
-  border-bottom: none;
-}
-
-@keyframes isometric-rotate {
-  0% {
-    transform: rotateX(70deg) rotateY(0deg) rotateZ(-45deg);
-  }
-  100% {
-    transform: rotateX(70deg) rotateY(0deg) rotateZ(-405deg);
-  }
-}
\ No newline at end of file
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 8d4624b..faa680a 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -10,6 +10,7 @@ import { Header } from "./components/Header";
 import { Splash as Splash } from "./components/Splash";
 import { Toast } from "./components/Toast";
 import { ToastProvider } from "./components/ToastProvider";
+import { Wireframe } from "./components/Wireframe";
 
 const App = (): JSX.Element => (
   <ApolloProvider client={client}>
@@ -18,11 +19,7 @@ const App = (): JSX.Element => (
         <Header />
         <div className={styles.app}>
           <Routes />
-          <div className={styles.wireframe}>
-            {[...Array(64)].map((_, idx) => (
-              <div key={idx} className={styles.cell} />
-            ))}
-          </div>
+          <Wireframe />
         </div>
         <Footer />
         <Toast />
diff --git a/frontend/src/components/ProductCard.module.css b/frontend/src/components/ProductCard.module.css
index 35a2c8e..be7d70b 100644
--- a/frontend/src/components/ProductCard.module.css
+++ b/frontend/src/components/ProductCard.module.css
@@ -1,62 +1,52 @@
 .product {
   display: flex;
-  overflow: hidden;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid transparent;
-  background: transparent;
+  border: none;
+  /*border: 1px solid var(--background);*/
+  background: rgb(35, 15, 41);
   border-radius: 4px;
   transition: background-color 0.1s ease-out, border 0.1s ease-out;
+  position: relative;
+  align-items: flex-start;
+  padding: 1rem;
 }
+
 .product:hover,
 .active.product {
-  border-color: var(--border);
+  background-color: var(--background);
+  box-shadow: 0 0 4px var(--background), 0 0 11px var(--background), 0 0 19px var(--background);
 }
 
 .productText {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  padding: 4px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  font-size: 1.2rem;
+  text-shadow: none;
   color: white;
-  font-size: 1.5rem;
-}
-
-.productImage {
-  width: 140px;
-  height: 140px;
-  border-radius: 4px;
-  filter: opacity(0.2);
-  object-fit: contain;
-}
-.active .productImage {
-  filter: none;
-}
-
-.noProductImage {
-  width: 140px;
-  height: 140px;
 }
 
 .amount {
   position: absolute;
   z-index: 1;
-  top: 0px;
-  left: 0px;
-  padding: 4px;
-  border-radius: 4px;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  padding: 10px 12px 8px 8px;
+  border-left: 1px solid transparent;
   color: transparent;
   font-size: 2rem;
   font-weight: bold;
   line-height: 1;
+  background-color: transparent;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+  display: none;
 }
 
-.wrap {
-  position: relative;
-}
 .active .amount {
-  background: rgba(0, 0, 0, 0.8);
-  color: white;
+  display: block;
+  color: var(--background);
+  text-shadow: none;
+  border-left-color: rgb(35, 15, 41);
+  background-color: var(--sun-end);
 }
diff --git a/frontend/src/components/ProductCard.tsx b/frontend/src/components/ProductCard.tsx
index 61561f0..3a13bc7 100644
--- a/frontend/src/components/ProductCard.tsx
+++ b/frontend/src/components/ProductCard.tsx
@@ -14,13 +14,9 @@ type ProductCardProps = {
 export const ProductCard = ({ product, onProduct, amount, active = false }: ProductCardProps): JSX.Element => {
   const classes = clsx(styles.product, { [styles.active]: active });
   return (
-    <button className={classes} type="button" onClick={onProduct}>
-      <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 className={classes} type="button" onClick={onProduct} title={product.name}>
+      <span className={styles.amount}>{amount}</span>
+      <span className={styles.productText}>{product.name}</span>
     </button>
   );
 };
diff --git a/frontend/src/components/Wireframe.module.css b/frontend/src/components/Wireframe.module.css
new file mode 100644
index 0000000..b92ddc5
--- /dev/null
+++ b/frontend/src/components/Wireframe.module.css
@@ -0,0 +1,38 @@
+.wireframe {
+  position: absolute;
+  bottom: calc(22% - 512px);
+  left: calc(50% - 512px);
+  width: 1024px;
+  height: 1024px;
+  display: grid;
+  grid-template-columns: repeat(8, 128px);
+  animation-iteration-count: infinite;
+  animation-name: isometric-rotate;
+  animation-duration: 10s;
+  animation-timing-function: linear;
+  pointer-events: none;
+  z-index: -1;
+}
+
+.cell {
+  border-bottom: 2px solid var(--sun);
+  border-right: 2px solid var(--sun);
+
+}
+
+.cell:nth-child(8n) {
+  border-right: none;
+}
+
+.cell:nth-child(n+57) {
+  border-bottom: none;
+}
+
+@keyframes isometric-rotate {
+  0% {
+    transform: rotateX(70deg) rotateY(0deg) rotateZ(-45deg);
+  }
+  100% {
+    transform: rotateX(70deg) rotateY(0deg) rotateZ(-405deg);
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/components/Wireframe.tsx b/frontend/src/components/Wireframe.tsx
new file mode 100644
index 0000000..fa3c7a8
--- /dev/null
+++ b/frontend/src/components/Wireframe.tsx
@@ -0,0 +1,11 @@
+import React from "react";
+
+import styles from "./Wireframe.module.css";
+
+export const Wireframe = () => (
+  <div className={styles.wireframe}>
+    {[...Array(64)].map((_, idx) => (
+      <div key={idx} className={styles.cell} />
+    ))}
+  </div>
+);
diff --git a/frontend/src/features/register/Register.module.css b/frontend/src/features/register/Register.module.css
index 464b312..5ea2018 100644
--- a/frontend/src/features/register/Register.module.css
+++ b/frontend/src/features/register/Register.module.css
@@ -6,8 +6,9 @@
 
 .productList {
   display: grid;
-  grid-template-columns: repeat(8, 150px);
-  row-gap: 16px;
+  grid-template-columns: repeat(5, 220px);
+  column-gap: 16px;
+  row-gap: 24px;
 }
 
 .productListSection {