🚚 Move ProductCard and UserCard

closer to their feature

frontend/src/features/deposit/Deposit.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { UserCard } from "../../components/UserCard";
+import { UserCard } from "../users/UserCard";
 import styles from "./Deposit.module.css";
 import { useDeposit } from "./useDeposit";
 

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

@@ -0,0 +1,52 @@
+.product {
+  display: flex;
+  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 {
+  background-color: var(--background);
+  box-shadow: 0 0 4px var(--background), 0 0 11px var(--background), 0 0 19px var(--background);
+}
+
+.productText {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  font-size: 1.2rem;
+  text-shadow: none;
+  color: white;
+}
+
+.amount {
+  position: absolute;
+  z-index: 1;
+  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;
+}
+
+.active .amount {
+  display: block;
+  color: var(--background);
+  text-shadow: none;
+  border-left-color: rgb(35, 15, 41);
+  background-color: var(--sun-end);
+}

frontend/src/features/register/ProductCard.tsx

@@ -0,0 +1,22 @@
+import clsx from "clsx";
+import React, { MouseEventHandler } from "react";
+
+import { Product } from "../../types";
+import styles from "./ProductCard.module.css";
+
+type ProductCardProps = {
+  product: Omit<Product, "userCounts">;
+  onProduct: MouseEventHandler;
+  active: boolean;
+  amount: number;
+};
+
+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} title={product.name}>
+      <span className={styles.amount}>{amount}</span>
+      <span className={styles.productText}>{product.name}</span>
+    </button>
+  );
+};

frontend/src/features/register/Register.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 
-import { ProductCard } from "../../components/ProductCard";
-import { UserCard } from "../../components/UserCard";
 import { OrderLineInput, Product } from "../../types";
+import { UserCard } from "../users/UserCard";
+import { ProductCard } from "./ProductCard";
 import styles from "./Register.module.css";
 import { useRegister } from "./useRegister";
 

frontend/src/features/users/UserCard.module.css

@@ -0,0 +1,49 @@
+.user {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 4px;
+  border: 1px solid transparent;
+  background: transparent;
+  border-radius: 4px;
+  color: var(--text);
+  transition: background-color 0.1s ease-out, border 0.1s ease-out;
+  max-height: 100px;
+}
+
+.user:hover {
+  border-color: var(--border);
+  cursor: pointer;
+}
+
+.active {
+  border-color: var(--border);
+  background: var(--border);
+}
+
+.active:hover {
+  /* TODO */
+}
+
+.avatar {
+  width: 50px;
+  height: 50px;
+  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
+}
+.avatarWrap {
+  filter: drop-shadow(0 0 4px var(--background)) drop-shadow(0 0 11px var(--background))
+    drop-shadow(0 0 19px var(--background));
+}
+
+.noAvatar {
+  display: block;
+  width: 50px;
+  height: 50px;
+  background-color: black;
+  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
+  content: "";
+}
+
+.name {
+  font-weight: bold;
+}

frontend/src/features/users/UserCard.tsx

@@ -0,0 +1,32 @@
+import clsx from "clsx";
+import React, { MouseEventHandler } from "react";
+
+import { AllUsersQuery } from "../types";
+import styles from "./UserCard.module.css";
+
+type UserCardProps = {
+  user: AllUsersQuery["allUsers"][0] | null;
+  onUser: MouseEventHandler;
+  active: boolean;
+};
+
+/** If user is null, then it's the special external user */
+export const UserCard = ({ user, onUser, active = false }: UserCardProps): JSX.Element => {
+  const classes = clsx(styles.user, { [styles.active]: active });
+  return (
+    <button className={classes} onClick={onUser} type="button">
+      <div className={styles.avatarWrap}>
+        {user?.profile?.image && (
+          <img src={user.profile?.image} alt={`Profile for ${user.firstName}`} className={styles.avatar} />
+        )}
+        {!user?.profile?.image && (
+          <span className={styles.avatar}>
+            <span className={styles.noAvatar} />
+          </span>
+        )}
+      </div>
+      <span className={styles.name}>{user?.firstName || "Ekstern"}</span>
+      <span className={styles.balance}>{user?.profile?.balance || ""}</span>
+    </button>
+  );
+};