💄 Style product grid, rm images

♻ Move Wireframe to own component

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

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}>
+          <Wireframe />
-            {[...Array(64)].map((_, idx) => (
-              <div key={idx} className={styles.cell} />
-            ))}
-          </div>
         </div>
         <Footer />
         <Toast />

frontend/src/components/ProductCard.module.css

@@ -1,62 +1,52 @@
 .product {
   display: flex;
-  overflow: hidden;
+  border: none;
-  flex-direction: column;
+  /*border: 1px solid var(--background);*/
-  align-items: center;
+  background: rgb(35, 15, 41);
-  justify-content: center;
-  border: 1px solid transparent;
-  background: transparent;
   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;
+  white-space: nowrap;
-  right: 0;
+  text-overflow: ellipsis;
-  bottom: 0;
+  overflow: hidden;
-  left: 0;
+  font-size: 1.2rem;
-  padding: 4px;
+  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;
+  top: 0;
-  left: 0px;
+  bottom: 0;
-  padding: 4px;
+  right: 0;
-  border-radius: 4px;
+  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);
+  display: block;
-  color: white;
+  color: var(--background);
+  text-shadow: none;
+  border-left-color: rgb(35, 15, 41);
+  background-color: var(--sun-end);
 }

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}>
+    <button className={classes} type="button" onClick={onProduct} title={product.name}>
-      <div className={styles.wrap}>
+      <span className={styles.amount}>{amount}</span>
-        <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/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);
+  }
+}

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

frontend/src/features/register/Register.module.css

@@ -6,8 +6,9 @@
 
 .productList {
   display: grid;
-  grid-template-columns: repeat(8, 150px);
+  grid-template-columns: repeat(5, 220px);
-  row-gap: 16px;
+  column-gap: 16px;
+  row-gap: 24px;
 }
 
 .productListSection {