💄 Pretty deposit user select

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

@@ -1,7 +1,6 @@
 .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;
@@ -31,7 +30,7 @@
   top: 0;
   bottom: 0;
   right: 0;
-  padding: 10px 12px 8px 8px;
+  padding: 12px 12px 8px 8px;
   border-left: 1px solid transparent;
   color: transparent;
   font-size: 2rem;

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

@@ -1,7 +1,12 @@
 .userList {
   display: grid;
-  grid-template-columns: repeat(12, 128px);
+  grid-template-columns: repeat(5, 220px);
-  row-gap: 16px;
+  column-gap: 16px;
+  row-gap: 24px;
+}
+
+.showAll {
+  margin-top: 1rem;
 }
 
 .productList {

frontend/src/features/register/Register.tsx

@@ -48,7 +48,7 @@ export const Register = (): JSX.Element => {
             />
           ))}
         </div>
-        <button type="button" onClick={() => setShowAll(!showAll)}>
+        <button type="button" onClick={() => setShowAll(!showAll)} className={styles.showAll}>
           {showAll ? "Skjul gamliser" : "Vis alle"}
         </button>
       </section>

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

@@ -1,31 +1,29 @@
 .user {
   display: flex;
-  flex-direction: column;
   align-items: center;
-  padding: 4px;
+  padding: 0;
-  border: 1px solid transparent;
+  border: none;
-  background: transparent;
+  border-left: 4px solid transparent;
+  background: rgb(35, 15, 41);
   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;
 }
-
+.user:hover,
-.active {
+.active.user {
-  border-color: var(--border);
+  background-color: var(--background);
-  background: var(--border);
+  box-shadow: 0 0 4px var(--background), 0 0 11px var(--background), 0 0 19px var(--background);
 }
-
+.active.user {
-.active:hover {
+  border-left: 4px solid var(--sun)
-  /* TODO */
 }
 
 .avatar {
+  margin-left: 1rem;
   width: 50px;
   height: 50px;
   clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
@@ -36,6 +34,7 @@
 }
 
 .noAvatar {
+  margin-left: 1rem;
   display: block;
   width: 50px;
   height: 50px;
@@ -44,6 +43,18 @@
   content: "";
 }
 
-.name {
+.meta {
-  font-weight: bold;
+  display: flex;
+  padding: 1rem;
+  flex-direction: column;
+  align-items: flex-start;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  font-size: 1.2rem;
+  text-shadow: none;
+}
+
+.balance {
+  color: var(--sun)
 }

frontend/src/features/users/UserCard.tsx

@@ -1,7 +1,7 @@
 import clsx from "clsx";
 import React, { MouseEventHandler } from "react";
 
-import { AllUsersQuery } from "../types";
+import { AllUsersQuery } from "../../types";
 import styles from "./UserCard.module.css";
 
 type UserCardProps = {
@@ -14,7 +14,7 @@ type UserCardProps = {
 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">
+    <button className={classes} onClick={onUser} type="button" title={user?.firstName || "Ekstern"}>
       <div className={styles.avatarWrap}>
         {user?.profile?.image && (
           <img src={user.profile?.image} alt={`Profile for ${user.firstName}`} className={styles.avatar} />
@@ -25,8 +25,10 @@ export const UserCard = ({ user, onUser, active = false }: UserCardProps): JSX.E
           </span>
         )}
       </div>
-      <span className={styles.name}>{user?.firstName || "Ekstern"}</span>
+      <div className={styles.meta}>
+        {user?.firstName || "Ekstern"}
         <span className={styles.balance}>{user?.profile?.balance || ""}</span>
+      </div>
     </button>
   );
 };