frontend/src/features/deposit/Deposit.module.css

@@ -1,17 +1,113 @@
+.deposit {
+  display: grid;
+  align-items: start;
+  gap: 1rem 2rem;
+  grid-template:
+    "heading amount" auto
+    "search amount" auto
+    "users amount" 1fr
+    / minmax(0, 1fr) minmax(260px, 320px);
+}
+
+.heading {
+  grid-area: heading;
+  margin-bottom: 0;
+}
+
+.search {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  grid-area: search;
+}
+
+.search input {
+  width: min(100%, 420px);
+}
+
 .userList {
   display: grid;
-  height: 800px;
+  max-height: min(62vh, 680px);
-  padding-top: 2rem;
+  padding: 0.5rem 0.5rem 0.5rem 0;
-  column-gap: 16px;
+  gap: 1rem;
-  grid-template-columns: repeat(5, 220px);
+  grid-area: users;
+  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
   overflow-y: auto;
-  row-gap: 24px;
 }
 
 .amountSection {
-  margin-top: 32px;
+  position: sticky;
+  top: 1rem;
+  padding: 1.25rem;
+  border: 1px solid rgba(221, 81, 127, 0.45);
+  border-radius: 8px;
+  background: rgba(35, 15, 41, 0.84);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
+  grid-area: amount;
+}
+
+.amountSection h2 {
+  margin-top: 0;
+}
+
+.selectedUser {
+  min-height: 1.5em;
+  margin: 0 0 1.25rem;
+  color: rgba(255, 255, 255, 0.78);
+  text-shadow: none;
+}
+
+.selectedUser strong {
+  color: var(--text);
+}
+
+.amountLabel {
+  display: block;
+  margin-bottom: 0.4rem;
+  color: var(--sun);
+}
+
+.amountInput {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.amountInput input {
+  width: 100%;
+  min-width: 0;
+  font-size: 1.8rem;
+}
+
+.amountInput span {
+  color: rgba(255, 255, 255, 0.8);
+  text-shadow: none;
 }
 
 .checkout {
-  margin-top: 32px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  margin-top: 1.5rem;
+}
+
+@media (max-width: 760px) {
+  .deposit {
+    gap: 0.75rem;
+    grid-template:
+      "heading" auto
+      "search" auto
+      "amount" auto
+      "users" auto
+      / minmax(0, 1fr);
+  }
+
+  .amountSection {
+    position: static;
+  }
+
+  .userList {
+    max-height: 45vh;
+    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
+  }
 }

frontend/src/features/deposit/Deposit.tsx

@@ -14,6 +14,7 @@ const Deposit = (): JSX.Element => {
     userQuery,
     setUserQuery,
     filteredUsers,
+    selectedUserDetails,
     reset,
     onSubmit,
   } = useDeposit();
@@ -23,45 +24,69 @@ const Deposit = (): JSX.Element => {
   }
 
   return (
-    <div>
+    <div className={styles.deposit}>
-      <section>
+      <h2 className={styles.heading}>Hvem skal sette inn penger?</h2>
-        <h2>Hvem skal sette inn penger?</h2>
+      <div className={styles.search}>
         <input
           name="userQuery"
           onChange={(event: React.FormEvent<HTMLInputElement>) => setUserQuery(event.currentTarget.value)}
           value={userQuery}
           placeholder="Filtrér på navn"
+          aria-label="Filtrér personer på navn"
         />
         {userQuery !== "" && (
           <button type="button" onClick={() => setUserQuery("")}>
             Vis alle
           </button>
         )}
-        <div className={styles.userList}>
+      </div>
-          {filteredUsers.map((user) => (
+      <section className={styles.amountSection} aria-label="Innskudd">
-            <UserCard
+        <h2>Hvor mye?</h2>
-              key={user.id}
+        {selectedUserDetails ? (
-              active={selectedUser === user.id}
+          <p className={styles.selectedUser}>
-              onUser={() => {
+            Innskudd til{" "}
-                setSelectedUser(user.id);
+            <strong>
-              }}
+              {selectedUserDetails.firstName} {selectedUserDetails.lastName}
-              user={user}
+            </strong>
-            />
+          </p>
-          ))}
+        ) : (
+          <p className={styles.selectedUser}>Velg en person fra listen</p>
+        )}
+        <label className={styles.amountLabel} htmlFor="deposit-amount">
+          Beløp
+        </label>
+        <div className={styles.amountInput}>
+          <input
+            id="deposit-amount"
+            name="amount"
+            inputMode="decimal"
+            value={amount}
+            onChange={(event) => setAmount(event.target.value)}
+            placeholder="0"
+          />
+          <span>kr</span>
+        </div>
+        <div className={styles.checkout}>
+          <button type="button" onClick={onSubmit} className="primary">
+            Sett inn
+          </button>
+          <button type="button" onClick={reset}>
+            Start på nytt
+          </button>
         </div>
       </section>
-      <section className={styles.amountSection}>
+      <div className={styles.userList}>
-        <h2>Hvor mye?</h2>
+        {filteredUsers.map((user) => (
-        <input name="amount" value={amount} onChange={(event) => setAmount(event.target.value)} placeholder="0" />
+          <UserCard
-      </section>
+            key={user.id}
-      <section className={styles.checkout}>
+            active={selectedUser === user.id}
-        <button type="button" onClick={onSubmit} className="primary">
+            onUser={() => {
-          Sett inn
+              setSelectedUser(user.id);
-        </button>{" "}
+            }}
-        <button type="button" onClick={reset}>
+            user={user}
-          Start på nytt
+          />
-        </button>
+        ))}
-      </section>
+      </div>
     </div>
   );
 };

frontend/src/features/deposit/useDeposit.ts

@@ -13,6 +13,7 @@ export const useDeposit = () => {
   const filteredUsers = (data?.allUsers || []).filter((user) =>
     `${user.firstName.toLowerCase()} ${user.lastName.toLowerCase()}`.includes(userQuery.toLowerCase()),
   );
+  const selectedUserDetails = data?.allUsers.find((user) => user.id === selectedUser);
   const { showToast } = useToast();
 
   const onSubmit = async () => {
@@ -61,6 +62,7 @@ export const useDeposit = () => {
     userQuery,
     setUserQuery,
     filteredUsers,
+    selectedUserDetails,
     reset,
     onSubmit,
   };