src/components/Modals/VehicleViewModal/index.tsx

@@ -83,31 +83,42 @@ export default function VehicleViewModal({ open, setViewModal, id }: Props) {
 					<Grid container spacing={2} sx={{ width: "80%" }}>
 						<Grid item xs={6}>
 							<Typography variant="body1">
-								<strong>Name:</strong> {selectedVehicle.name}
+								<strong>Name:</strong>{" "}
+								<Typography variant="body2">
+									{selectedVehicle.name}
+								</Typography>
 							</Typography>
 						</Grid>
 						<Grid item xs={6}>
 							<Typography variant="body1">
 								<strong>Company:</strong>{" "}
-								{selectedVehicle.company}
+								<Typography variant="body2">
+									{selectedVehicle.company}
+								</Typography>
 							</Typography>
 						</Grid>
 						<Grid item xs={6}>
 							<Typography variant="body1">
-								<strong>Model Name:</strong>{" "}
-								{selectedVehicle.modelName}
+								<strong>Model Name:</strong>
+								<Typography variant="body2">
+									{selectedVehicle.modelName}
+								</Typography>
 							</Typography>
 						</Grid>
 						<Grid item xs={6}>
 							<Typography variant="body1">
-								<strong>Charge Type:</strong>{" "}
-								{selectedVehicle.chargeType}
+								<strong>Charge Type:</strong>
+								<Typography variant="body2">
+									{selectedVehicle.chargeType}
+								</Typography>
 							</Typography>
 						</Grid>
 						<Grid item xs={6}>
 							<Typography variant="body1">
-								<strong>Image URL:</strong>{" "}
-								{selectedVehicle.imageUrl}
+								<strong>Image URL:</strong>
+								<Typography variant="body2">
+									{selectedVehicle.imageUrl ?? "N/A"}
+								</Typography>
 							</Typography>
 						</Grid>
 					</Grid>

src/components/Modals/ViewModal/index.tsx

@@ -10,14 +10,12 @@ type Props = {
 	id?: string;
 };
 
-const mainContainerStyle = {
+const style = {
 	position: "absolute",
 	top: "50%",
 	left: "50%",
 	transform: "translate(-50%, -50%)",
-	// width: "544px",
-	// height: "190px",
-	gap: "8px",
+	width: 400,
 	bgcolor: "background.paper",
 	borderRadius: 2,
 	boxShadow: "0px 4px 20px rgba(0, 0, 0, 0.15)",
@@ -25,16 +23,7 @@ const mainContainerStyle = {
 	display: "flex",
 	flexDirection: "column",
 	alignItems: "center",
-};
-
-const headerLayoutStyle = {
-	// width: 544,
-	// height: 48,
-	gap: "24px",
-	paddingBottom: "12px",
-	display: "flex",
-	alignItems: "center",
-	justifyContent: "space-between",
+	gap: 2,
 };
 
 export default function ViewModal({ open, setViewModal, id }: Props) {
@@ -54,74 +43,69 @@ export default function ViewModal({ open, setViewModal, id }: Props) {
 			aria-labelledby="modal-title"
 			aria-describedby="modal-description"
 		>
-			<Box sx={mainContainerStyle}>
-				<Box sx={headerLayoutStyle}>
-					<Typography
-						id="modal-title"
-						variant="h5"
-						fontWeight="bold"
-						sx={{ flex: 1, textAlign: "center" }}
-					>
-						{selectedAdmin?.name}'s Details
-					</Typography>
+			<Box sx={style}>
+				<Typography
+					id="modal-title"
+					variant="h5"
+					fontWeight="bold"
+					sx={{ width: "100%" }}
+				>
 					<Box
-						onClick={() => setViewModal(false)}
 						sx={{
-							cursor: "pointer",
 							display: "flex",
 							alignItems: "center",
-							marginLeft: "auto", // Ensures the button is at the right end
-							justifyContent:"flex-end"
+							justifyContent: "space-between",
+							width: "100%",
 						}}
 					>
-						<CloseIcon />
+						<Box sx={{ flex: 1, textAlign: "center" }}>
+							{selectedAdmin?.name || "Admin"}'s Details
+						</Box>
+						<Box
+							onClick={() => setViewModal(false)}
+							sx={{
+								cursor: "pointer",
+								display: "flex",
+								alignItems: "center",
+							}}
+						>
+							<CloseIcon />
+						</Box>
 					</Box>
-				</Box>
+				</Typography>
 
 				<Divider sx={{ width: "100%" }} />
 
 				{selectedAdmin ? (
-					<Box
-						sx={{
-							width: "100%",
-							textAlign: "left",
-							display: "flex",
-							flexDirection: "column",
-							gap: 1.5,
-							whiteSpace: "pre-wrap",
-							wordBreak: "break-word",
-							overflowWrap: "break-word",
-						}}
-					>
-						<Grid container spacing={2}>
-							<Grid item xs={6}>
-								<Typography>
-									<b>Name:</b>
+					<Grid container spacing={2} sx={{ width: "80%" }}>
+						<Grid item xs={6}>
+							<Typography variant="body1">
+								<strong>Name:</strong>
+								<Typography variant="body2">
+									{selectedAdmin.name}
 								</Typography>
-								<Typography>{selectedAdmin.name}</Typography>
-							</Grid>
-							<Grid item xs={6}>
-								<Typography>
-									<b>Phone:</b>
-								</Typography>
-								<Typography>{selectedAdmin.phone}</Typography>
-							</Grid>
-							<Grid item xs={6}>
-								<Typography>
-									<b>Email:</b>
-								</Typography>
-								<Typography>{selectedAdmin.email}</Typography>
-							</Grid>
-							<Grid item xs={6}>
-								<Typography>
-									<b>Address:</b>
-								</Typography>
-								<Typography>
-									{selectedAdmin.registeredAddress ?? "N/A"}
-								</Typography>
-							</Grid>
+							</Typography>
 						</Grid>
-					</Box>
+						<Grid item xs={6}>
+							<Typography variant="body1">
+								<strong>Phone:</strong>
+								<Typography  variant="body2">{selectedAdmin.phone}</Typography>
+							</Typography>
+						</Grid>
+						<Grid item xs={6}>
+							<Typography variant="body1">
+								<strong>Email:</strong>
+								<Typography  variant="body2">{selectedAdmin.email}</Typography>
+							</Typography>
+						</Grid>
+						<Grid item xs={6}>
+							<Typography variant="body1">
+								<strong>Address:</strong>
+
+								<Typography  variant="body2">{selectedAdmin.registeredAddress ?? "N/A"}</Typography>
+							</Typography>
+						</Grid>
+					</Grid>
 				) : (
 					<Typography align="center">
 						No admin found with this ID