From 7626636ee5a949ba975e6a22d5b298715ee7897d Mon Sep 17 00:00:00 2001
From: Dimitris Zarras <138439389+dzarras@users.noreply.github.com>
Date: Tue, 24 Sep 2024 15:08:38 +0300
Subject: [PATCH] added ui corrections (#20)

Co-authored-by: Rania Tsolka <ourania.tsolka@netcompany.com>
Co-authored-by: SmirlakisParis <paris.smirlakis@netcompany.com>
---
 .../components/molecules/CarInformation.tsx   | 22 ++++++----
 src/client/components/molecules/Modal.tsx     | 18 +++++---
 .../molecules/ReservationConfirmation.tsx     | 41 +++++++++----------
 .../components/organisms/BookingForm.tsx      | 35 ++++++++--------
 src/pages/_app.tsx                            | 31 ++++++++------
 src/pages/index.tsx                           | 12 ++++--
 6 files changed, 91 insertions(+), 68 deletions(-)

diff --git a/src/client/components/molecules/CarInformation.tsx b/src/client/components/molecules/CarInformation.tsx
index e1802e5..23f6447 100644
--- a/src/client/components/molecules/CarInformation.tsx
+++ b/src/client/components/molecules/CarInformation.tsx
@@ -12,6 +12,11 @@ export default function CarInformation() {
     link.click();
   };
 
+  const openInNewTab = (url: string) => {
+    const newWindow = window.open(url, "_blank", "noopener,noreferrer");
+    if (newWindow) newWindow.opener = null;
+  };
+
   return (
     <Box
       sx={{
@@ -33,13 +38,14 @@ export default function CarInformation() {
 
       {/* Car Image and Information */}
 
-      <Image src="/images/car.png" alt="car" width={217} height={145} />
-      <Typography variant="body2" sx={{ fontWeight: "bold" }}>
+      <Image src='/images/car.png' alt='car' width={217} height={145} />
+      <Typography variant='body2' sx={{ fontWeight: "bold" }}>
         To continue booking your car rental, you must{" "}
         <Typography
-          component="a"
-          color="primary"
+          component='a'
+          color='primary'
           sx={{ textDecoration: "underline", cursor: "pointer" }}
+          onClick={downloadContract}
         >
           sign your contract
         </Typography>{" "}
@@ -54,9 +60,11 @@ export default function CarInformation() {
         }}
       >
         <Button
-          color="primary"
-          variant="contained"
-          onClick={downloadContract}
+          color='primary'
+          variant='contained'
+          onClick={() =>
+            openInNewTab("https://trustprovider.signer.eudiw.dev/login")
+          }
           startIcon={<RightBoxArrowIcon />}
           sx={{ p: 2, fontWeight: "bold" }}
         >
diff --git a/src/client/components/molecules/Modal.tsx b/src/client/components/molecules/Modal.tsx
index 42006f6..2d446d9 100644
--- a/src/client/components/molecules/Modal.tsx
+++ b/src/client/components/molecules/Modal.tsx
@@ -17,8 +17,8 @@ const Modal: React.FC<ModalProps> = ({ title, content, handleClose }) => {
     <MuiModal
       open={modal === ModalStatus.OPEN}
       onClose={handleClose}
-      aria-labelledby="modal-title"
-      aria-describedby="modal-description"
+      aria-labelledby='modal-title'
+      aria-describedby='modal-description'
     >
       <Box
         sx={{
@@ -31,18 +31,24 @@ const Modal: React.FC<ModalProps> = ({ title, content, handleClose }) => {
           width: { xs: "90%", md: "40%" },
         }}
       >
-        <Typography id="modal-title" variant="h5" fontWeight="bold" mb={2}>
+        <Typography
+          id='modal-title'
+          variant='h5'
+          fontWeight='bold'
+          mb={2}
+          textAlign={"center"}
+        >
           {title} {/* Display the title prop */}
         </Typography>
 
-        <Box id="modal-description" sx={{ textAlign: "center", mb: 4 }}>
+        <Box id='modal-description' sx={{ textAlign: "center", mb: 4 }}>
           {content} {/* Display the content prop */}
         </Box>
 
         <Box sx={{ display: "flex", justifyContent: "flex-end" }}>
           <Button
-            variant="contained"
-            color="primary"
+            variant='contained'
+            color='primary'
             onClick={handleClose}
             sx={{ px: 4, py: 2 }}
           >
diff --git a/src/client/components/molecules/ReservationConfirmation.tsx b/src/client/components/molecules/ReservationConfirmation.tsx
index dd03716..1b50c3c 100644
--- a/src/client/components/molecules/ReservationConfirmation.tsx
+++ b/src/client/components/molecules/ReservationConfirmation.tsx
@@ -1,4 +1,4 @@
-import { ModalStatus, useAppStore, useBookingStore } from "@/client/store";
+import { useAppStore, useBookingStore } from "@/client/store";
 import { BookingDetailsDto } from "@/shared";
 import {
   Box,
@@ -11,7 +11,6 @@ import Image from "next/image";
 import { toast } from "react-toastify";
 import AccommodationIcon from "../atoms/AccommodationIcon";
 import CopyIcon from "../atoms/CopyIcon";
-import { useEffect } from "react";
 
 type Props = { details: BookingDetailsDto; id: string; deviceType: string };
 
@@ -30,18 +29,18 @@ export default function ReservationConfirmation({
   } = details;
 
   const { changeModalStatus, modal } = useAppStore(); // Get modal state
-  const { isLoading, issueConfirmationAsync, issueConfirmationRes } = useBookingStore();
+  const { isLoading, issueConfirmationAsync, issueConfirmationRes } =
+    useBookingStore();
 
   const copyToClipboard = () => {
     navigator.clipboard.writeText(id);
-    toast.info("successfully copied to clipboard");
+    toast.info("Successfully copied to clipboard");
   };
 
   const issueConfirmation = async () => {
     await issueConfirmationAsync(id);
   };
 
-  
   return (
     <Box sx={{ display: "flex", flexDirection: "column" }}>
       <Box
@@ -60,31 +59,31 @@ export default function ReservationConfirmation({
 
       {/* Hotel Details */}
       <Box sx={{ mt: 2 }}>
-        <Typography fontWeight="bold" color="green">
+        <Typography fontWeight='bold' color='green'>
           {hotel}
         </Typography>
 
         <Box sx={{ display: "flex" }}>
           <Box sx={{ mr: 5 }}>
-            <Typography color="black">Check-in</Typography>
-            <Typography color="primary">{checkIn}</Typography>
+            <Typography color='black'>Check-in</Typography>
+            <Typography color='primary'>{checkIn}</Typography>
           </Box>
           <Box>
-            <Typography color="black">Check-out</Typography>
-            <Typography color="primary">{checkOut}</Typography>
+            <Typography color='black'>Check-out</Typography>
+            <Typography color='primary'>{checkOut}</Typography>
           </Box>
         </Box>
-        <Typography sx={{ mt: 1 }} color="black">
+        <Typography sx={{ mt: 1 }} color='black'>
           Rooms and guests
         </Typography>
-        <Typography color="primary">
+        <Typography color='primary'>
           {`${numberOfRooms} Room, ${numberOfGuests} Guests`}
         </Typography>
       </Box>
       {/* Reservation ID */}
       <Box sx={{ mt: 4 }}>
         <Box sx={{ display: "flex", alignItems: "center" }}>
-          <Typography fontWeight="bold">YOUR RESERVATION ID:</Typography>
+          <Typography fontWeight='bold'>YOUR RESERVATION ID:</Typography>
           <Box
             sx={{
               display: "flex",
@@ -93,36 +92,36 @@ export default function ReservationConfirmation({
               fontWeight: "bold",
             }}
           >
-            <Typography fontWeight="bold" color="primary">
+            <Typography fontWeight='bold' color='primary'>
               {id}
             </Typography>
 
             <IconButton onClick={copyToClipboard}>
-              <CopyIcon color="primary" />
+              <CopyIcon color='primary' />
             </IconButton>
           </Box>
         </Box>
         <Box sx={{ mt: 2 }}>
-          <Typography variant="body2" color="textPrimary">
+          <Typography variant='body2' color='textPrimary'>
             Reservation date
           </Typography>
-          <Typography color="primary">{reservationDate}</Typography>
+          <Typography color='primary'>{reservationDate}</Typography>
         </Box>
       </Box>
 
       {/* Issue confirmation to EUDI wallet */}
       <Box sx={{ mt: 4 }}>
         <Button
-          color="primary"
-          variant="contained"
+          color='primary'
+          variant='contained'
           sx={{ p: 2, fontWeight: "bold" }}
           startIcon={
             isLoading ? (
               <CircularProgress size={20} sx={{ color: "white", mr: 1 }} />
             ) : (
               <Image
-                src="/images/eudiwallet.svg"
-                alt="reviews"
+                src='/images/eudiwallet.svg'
+                alt='reviews'
                 width={40}
                 height={40}
               />
diff --git a/src/client/components/organisms/BookingForm.tsx b/src/client/components/organisms/BookingForm.tsx
index e854fb4..137cc71 100644
--- a/src/client/components/organisms/BookingForm.tsx
+++ b/src/client/components/organisms/BookingForm.tsx
@@ -43,7 +43,7 @@ export const BookingForm: React.FC = () => {
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <FormProvider {...methods}>
         <Box
-          component="form"
+          component='form'
           onSubmit={methods.handleSubmit(onSubmit)}
           sx={{
             display: "flex",
@@ -74,13 +74,14 @@ export const BookingForm: React.FC = () => {
                 bgcolor: "neutral.50",
                 color: "text.primary",
                 fontWeight: "bold",
-                maxWidth: 312,
                 textAlign: "center",
                 margin: "auto",
               }}
             >
-              To continue booking your travel plan, issue the requested
-              credentials using EUDI Wallet:
+              To continue booking your travel plan, <br />
+              present the requested attestations (PID, PhotoID and/or mDL)
+              <br />
+              using the EUDI Wallet
             </Box>
             <Box
               sx={{
@@ -94,9 +95,9 @@ export const BookingForm: React.FC = () => {
             >
               {deviceType === "mobile" ? (
                 <Button
-                  variant="contained"
-                  color="primary"
-                  type="submit"
+                  variant='contained'
+                  color='primary'
+                  type='submit'
                   sx={{
                     display: "flex",
                     flexDirection: "column",
@@ -104,20 +105,20 @@ export const BookingForm: React.FC = () => {
                     p: 2,
                   }}
                 >
-                  <Typography color="white">Launch EUDI Wallet</Typography>
+                  <Typography color='white'>Launch EUDI Wallet</Typography>
                   <Image
-                    loading="lazy"
-                    src="/images/eudiwallet.svg"
-                    alt="EUDI Wallet"
+                    loading='lazy'
+                    src='/images/eudiwallet.svg'
+                    alt='EUDI Wallet'
                     width={48}
                     height={48}
                   />
                 </Button>
               ) : (
                 <Button
-                  variant="contained"
-                  color="primary"
-                  type="submit"
+                  variant='contained'
+                  color='primary'
+                  type='submit'
                   sx={{
                     display: "flex",
                     flexDirection: "column",
@@ -143,9 +144,9 @@ export const BookingForm: React.FC = () => {
                     </Typography>
                   </Box>
                   <Image
-                    loading="lazy"
-                    src="/images/qrcode.svg"
-                    alt="QR Code"
+                    loading='lazy'
+                    src='/images/qrcode.svg'
+                    alt='QR Code'
                     width={41}
                     height={41}
                   />
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 6faf3d7..b6cbb91 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,20 +1,19 @@
 import { AppCacheProvider } from "@mui/material-nextjs/v14-pagesRouter";
 import CssBaseline from "@mui/material/CssBaseline";
 import { ThemeProvider } from "@mui/material/styles";
-import type { AppContext, AppProps } from "next/app";
+import type { AppProps } from "next/app";
 import "react-toastify/dist/ReactToastify.css";
 
 import AppLayout from "@/client/components/organisms/AppLayout";
 import { createTheme } from "@mui/material/styles";
-import { validateEnv } from "@/env.mjs";
 
 const theme = createTheme({
   palette: {
     primary: {
-      main: "#003366", // Deep blue
+      main: "#003680", // Deep blue
     },
     secondary: {
-      main: "#FFD700", // Yellow/Orange
+      main: "#FEB902", // Yellow/Orange
     },
     background: {
       default: "#f5f5f5",
@@ -30,26 +29,33 @@ const theme = createTheme({
     h1: {
       fontSize: "2.5rem",
       fontWeight: 700,
-      color: "#003366",
+      color: "#003680",
     },
     h2: {
       fontSize: "2rem",
       fontWeight: 600,
-      color: "#003366",
+      color: "#003680",
     },
     body1: {
       fontSize: "1rem",
-      color: "#333333",
+      color: "#000000",
     },
     button: {
       textTransform: "none",
     },
   },
   components: {
+    MuiCssBaseline: {
+      styleOverrides: {
+        body: {
+          minWidth: "412px",
+        },
+      },
+    },
     MuiAppBar: {
       styleOverrides: {
         root: {
-          backgroundColor: "#003366",
+          backgroundColor: "#003680",
           boxShadow: "none",
           borderBottom: "1px solid #dddddd",
         },
@@ -62,10 +68,10 @@ const theme = createTheme({
           padding: "10px 20px",
         },
         containedPrimary: {
-          backgroundColor: "#003366",
+          backgroundColor: "#0070C2",
           color: "#ffffff",
           "&:hover": {
-            backgroundColor: "#002244",
+            backgroundColor: "#003680",
           },
         },
       },
@@ -82,16 +88,15 @@ const theme = createTheme({
     MuiTypography: {
       styleOverrides: {
         h5: {
-          fontSize: "1.5rem",
+          fontSize: "1.3rem",
           fontWeight: 600,
-          color: "#003366",
+          color: "#000000",
         },
       },
     },
   },
 });
 
-
 export default function App(props: AppProps) {
   const { Component, ...rest } = props;
   return (
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 1e470ab..90dd39d 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -33,20 +33,24 @@ export default function Home(props: AppProps) {
   return (
     <Box sx={{ width: "100%", maxWidth: "100%", pb: 1, pt: 1, pl: 3, pr: 3 }}>
       <Modal
-        title="Verify your credentials"
+        title='Verify your credentials'
         content={
           bookingCreateRes?.url && (
-            <QRCode value={bookingCreateRes.url} size={333} />
+            <QRCode
+              value={bookingCreateRes.url}
+              size={333}
+              fgColor={"#1266D8"}
+            />
           )
         }
         handleClose={handleCloseModal}
       />
       <HotelLocation />
       <Grid container spacing={3}>
-        <Grid component={Box} size={{ md: 8, lg:9 }} >
+        <Grid component={Box} size={{ md: 8, lg: 9 }}>
           <BookingForm />
         </Grid>
-        <Grid component={Box} size={{ md: 4, lg:3 }} sx={{ width: "100%" }}>
+        <Grid component={Box} size={{ md: 4, lg: 3 }} sx={{ width: "100%" }}>
           <Sidebar />
         </Grid>
       </Grid>