Skip to content

Commit

Permalink
added ui corrections (#20)
Browse files Browse the repository at this point in the history 
Co-authored-by: Rania Tsolka <[email protected]>
Co-authored-by: SmirlakisParis <[email protected]>
  • Loading branch information
@dzarras @otsolka @SmirlakisParis
3 people authored Sep 24, 2024
1 parent 796148f commit 7626636
Show file tree
Hide file tree
Showing 6 changed files with 91 additions and 68 deletions.
22 changes: 15 additions & 7 deletions src/client/components/molecules/CarInformation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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={{
Expand All @@ -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>{" "}
Expand All @@ -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" }}
>
Expand Down
18 changes: 12 additions & 6 deletions src/client/components/molecules/Modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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={{
Expand All @@ -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 }}
>
Expand Down
41 changes: 20 additions & 21 deletions src/client/components/molecules/ReservationConfirmation.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { ModalStatus, useAppStore, useBookingStore } from "@/client/store";
import { useAppStore, useBookingStore } from "@/client/store";
import { BookingDetailsDto } from "@/shared";
import {
Box,
Expand All @@ -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 };

Expand All @@ -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
Expand All @@ -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",
Expand All @@ -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}
/>
Expand Down
35 changes: 18 additions & 17 deletions src/client/components/organisms/BookingForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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={{
Expand All @@ -94,30 +95,30 @@ 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",
alignItems: "center",
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",
Expand All @@ -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}
/>
Expand Down
31 changes: 18 additions & 13 deletions src/pages/_app.tsx
View file
Original file line number Diff line number Diff line change
@@ -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",
Expand All @@ -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",
},
Expand All @@ -62,10 +68,10 @@ const theme = createTheme({
padding: "10px 20px",
},
containedPrimary: {
backgroundColor: "#003366",
backgroundColor: "#0070C2",
color: "#ffffff",
"&:hover": {
backgroundColor: "#002244",
backgroundColor: "#003680",
},
},
},
Expand All @@ -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 (
Expand Down
Loading

0 comments on commit 7626636

Please sign in to comment.