From f1398915d0113a3c6362318ef87090ecc3cd2356 Mon Sep 17 00:00:00 2001
From: Lars Mitsem Selbekk <lars@selbekk.com>
Date: Tue, 22 Aug 2023 18:59:18 +0200
Subject: [PATCH] feat(UserMatchDetail): Add warning to scan books (#352)

---
 src/components/matches/Scanner/Scanner.tsx     |  2 +-
 .../matches/Scanner/ScannerTutorial.tsx        |  1 -
 src/components/matches/UserMatchDetail.tsx     | 18 +++++++++++++-----
 3 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/components/matches/Scanner/Scanner.tsx b/src/components/matches/Scanner/Scanner.tsx
index f7e84ff..1b8b8a4 100644
--- a/src/components/matches/Scanner/Scanner.tsx
+++ b/src/components/matches/Scanner/Scanner.tsx
@@ -88,7 +88,7 @@ const Scanner = ({ forceUpdate }: { forceUpdate: () => void }) => {
       sx={{
         display: "flex",
         flexDirection: "column",
-        alignItems: "center",
+        gap: "1rem",
       }}
     >
       <ScannerTutorial />
diff --git a/src/components/matches/Scanner/ScannerTutorial.tsx b/src/components/matches/Scanner/ScannerTutorial.tsx
index 08256b8..3004484 100644
--- a/src/components/matches/Scanner/ScannerTutorial.tsx
+++ b/src/components/matches/Scanner/ScannerTutorial.tsx
@@ -16,7 +16,6 @@ const ScannerTutorial = () => {
     <>
       <Button
         variant={"contained"}
-        sx={{ mb: "2rem" }}
         onClick={() => setTutorialOpen(true)}
         startIcon={<QuestionMarkIcon />}
       >
diff --git a/src/components/matches/UserMatchDetail.tsx b/src/components/matches/UserMatchDetail.tsx
index 591119a..2adf971 100644
--- a/src/components/matches/UserMatchDetail.tsx
+++ b/src/components/matches/UserMatchDetail.tsx
@@ -1,4 +1,4 @@
-import { Alert } from "@mui/material";
+import { Alert, Box, Typography } from "@mui/material";
 import React, { useCallback, useState } from "react";
 import { UserMatchWithDetails } from "../../utils/types";
 import {
@@ -72,6 +72,18 @@ const UserMatchDetail = ({
         }
       />
 
+      <Box>
+        <Typography variant="h2">Hvordan fungerer det?</Typography>
+        <Typography>
+          Du skal møte en annen elev og utveksle bøker.
+          Det er viktig at den som mottar bøker scanner hver bok,
+          hvis ikke blir ikke bøkene registrert som levert, og avsender kan få faktura.
+        </Typography>
+      </Box>
+      <MatchHeader>Du skal møte</MatchHeader>
+      <OtherPersonContact match={match} currentUserId={currentUserId} />
+      <MeetingInfo match={match} />
+
       {!isSender && !isFulfilled && (
         <>
           <MatchHeader>Når du skal motta bøkene</MatchHeader>
@@ -79,10 +91,6 @@ const UserMatchDetail = ({
         </>
       )}
 
-      <MatchHeader>Du skal møte</MatchHeader>
-      <OtherPersonContact match={match} currentUserId={currentUserId} />
-      <MeetingInfo match={match} />
-
       <MatchHeader>
         Du skal {isSender ? "levere" : "motta"} disse bøkene
       </MatchHeader>