🚚 Move ProductCard and UserCard

closer to their feature

frontend/src/components/ProductCard.module.css

@@ -1,52 +0,0 @@
-.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/components/ProductCard.tsx

@@ -1,22 +0,0 @@
-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/components/UserCard.module.css

@@ -1,49 +0,0 @@
-.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/components/UserCard.tsx

@@ -1,32 +0,0 @@
-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>
-  );
-};