-
-
{message}
-
+
+
{message}
+
);
};
diff --git a/frontend/src/components/ToastProvider.tsx b/frontend/src/components/ToastProvider.tsx
index d846a96..1822a9f 100644
--- a/frontend/src/components/ToastProvider.tsx
+++ b/frontend/src/components/ToastProvider.tsx
@@ -1,21 +1,24 @@
import React, { ReactNode, useContext, useState } from "react";
+type Background = "primary" | "danger";
+
interface ToastProps {
visible: boolean;
message: string;
- showToast: (message: string, background?: string) => void;
+ showToast: (message: string, background?: Background) => void;
hide: () => void;
- background: string;
+ background: Background;
}
const defaultState = {
+ // FIXME: revert
visible: false,
message: "",
// eslint-disable-next-line @typescript-eslint/no-empty-function
showToast: () => {},
// eslint-disable-next-line @typescript-eslint/no-empty-function
hide: () => {},
- background: "primary",
+ background: "primary" as Background,
};
const ToastContext = React.createContext
(defaultState);
@@ -23,19 +26,18 @@ const ToastContext = React.createContext(defaultState);
type ToastProviderProps = {
children: ReactNode;
};
-export const ToastProvider: React.FC = ({ children }) => {
+export const ToastProvider = ({ children }: ToastProviderProps): JSX.Element => {
const [visible, setVisible] = useState(defaultState.visible);
- const [message, setMessage] = useState("");
- const [background, setBackground] = useState("");
+ const [message, setMessage] = useState(defaultState.message);
+ const [background, setBackground] = useState(defaultState.background);
- const showToast = (newMessage: string, background = "primary") => {
+ const showToast = (newMessage: string, background: Background = "primary") => {
setMessage(newMessage);
setBackground(background);
if (!visible) {
setVisible(true);
setTimeout(() => {
setVisible(false);
- setMessage("");
}, 3000);
}
};
diff --git a/frontend/src/components/UserCard.module.css b/frontend/src/components/UserCard.module.css
deleted file mode 100644
index 9f9d1b2..0000000
--- a/frontend/src/components/UserCard.module.css
+++ /dev/null
@@ -1,34 +0,0 @@
-.user {
- display: flex;
- flex-direction: column;
- align-items: center;
- padding: 4px;
- border: 3px solid transparent;
- background: transparent;
- border-radius: 8px;
- transition: background-color 0.1s ease-out, border 0.1s ease-out;
-}
-.user:hover {
- border-color: rgba(25, 135, 84, 0.6);
- background: rgba(0, 0, 0, 0.1);
-}
-.active {
- border-color: rgba(25, 135, 84, 0.6);
- background: rgba(25, 135, 84, 0.2);
-}
-.active:hover {
- background: rgba(25, 135, 84, 0.2);
-}
-.avatar {
- width: 50px;
- height: 50px;
- border-radius: 50px;
-}
-.avatar svg {
- width: 50px;
- height: 50px;
- color: #ccc;
-}
-.name {
- font-weight: bold;
-}
diff --git a/frontend/src/components/UserCard.tsx b/frontend/src/components/UserCard.tsx
deleted file mode 100644
index e4a019f..0000000
--- a/frontend/src/components/UserCard.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { ReactComponent as PersonFill } from "bootstrap-icons/icons/person-fill.svg";
-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: React.FC = ({ user, onUser, active = false }) => {
- const classes = clsx(styles.user, { [styles.active]: active });
- return (
-
- );
-};
diff --git a/frontend/src/components/Wireframe.module.css b/frontend/src/components/Wireframe.module.css
new file mode 100644
index 0000000..b92ddc5
--- /dev/null
+++ b/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);
+ }
+}
\ No newline at end of file
diff --git a/frontend/src/components/Wireframe.tsx b/frontend/src/components/Wireframe.tsx
new file mode 100644
index 0000000..fa3c7a8
--- /dev/null
+++ b/frontend/src/components/Wireframe.tsx
@@ -0,0 +1,11 @@
+import React from "react";
+
+import styles from "./Wireframe.module.css";
+
+export const Wireframe = () => (
+
+ {[...Array(64)].map((_, idx) => (
+
+ ))}
+
+
Opprett ny
+
+
);
};
diff --git a/frontend/src/features/deposit/Deposit.module.css b/frontend/src/features/deposit/Deposit.module.css
index da0a704..24fd0ca 100644
--- a/frontend/src/features/deposit/Deposit.module.css
+++ b/frontend/src/features/deposit/Deposit.module.css
@@ -1,13 +1,17 @@
.userList {
display: grid;
- height: 400px;
- grid-template-columns: repeat(12, 100px);
+ height: 800px;
+ padding-top: 2rem;
+ grid-template-columns: repeat(5, 220px);
overflow-y: auto;
- row-gap: 16px;
+ column-gap: 16px;
+ row-gap: 24px;
}
+
.amountSection {
margin-top: 32px;
}
+
.checkout {
margin-top: 32px;
}
diff --git a/frontend/src/features/deposit/Deposit.tsx b/frontend/src/features/deposit/Deposit.tsx
index aeeb786..8bd05b5 100644
--- a/frontend/src/features/deposit/Deposit.tsx
+++ b/frontend/src/features/deposit/Deposit.tsx
@@ -1,10 +1,10 @@
import React from "react";
-import { UserCard } from "../../components/UserCard";
+import { UserCard } from "../users/UserCard";
import styles from "./Deposit.module.css";
import { useDeposit } from "./useDeposit";
-export const Deposit: React.FC = () => {
+export const Deposit = (): JSX.Element => {
const {
loading,
selectedUser,
@@ -33,7 +33,7 @@ export const Deposit: React.FC = () => {
placeholder="Filtrér på navn"
/>
{userQuery !== "" && (
-