452 UI improvements

frontend/src/components/TextFieldComponents/CustomTextField/CustomTextField.jsx

@@ -8,6 +8,7 @@ import "./CustomTextFieldStyles.css";
 const CustomTextField = ({
   id = "",
   name = "",
+  className,
   checkCircleIconVisible = false,
   displayCheckCircleIcon = false,
   labelText = "",
@@ -37,7 +38,7 @@ const CustomTextField = ({
   const computedFullWidth = fullWidth ||
     ["full", "100%", "stretch"].some(value => TextFieldWidth.toLowerCase().includes(value));
   return (
-    <div style={{ ...style, ...(computedFullWidth && { width: '100%' })}}>
+    <div className={className} style={{ ...style, ...(computedFullWidth && { width: '100%' })}}>
       {!checkCircleIconVisible &&
         <div>
           <InputLabel sx={{ fontWeight: labelFontWeight, margin: 0 }}>{labelText}</InputLabel>
@@ -100,6 +101,7 @@ const CustomTextField = ({
 };
 
 CustomTextField.propTypes = {
+  className: PropTypes.string,
   labelText: PropTypes.string,
   value: PropTypes.string,
   onChange: PropTypes.func,

frontend/src/scenes/settings/ProfileTab/ProfileTab.jsx

@@ -133,7 +133,7 @@ const ProfileTab = () => {
             value={formData.name}
             onChange={handleInputChange}
             placeholder="Enter your first name"
-            style={{ flexGrow: 1, textAlign: 'right' }}
+            className={styles.textField}
             TextFieldWidth="350px"
           />
         </div>
@@ -148,7 +148,7 @@ const ProfileTab = () => {
             placeholder="Enter your last name"
             value={formData.surname}
             onChange={handleInputChange}
-            style={{ flexGrow: 1, textAlign: 'right' }}
+            className={styles.textField}
             TextFieldWidth="350px"
           />
         </div>
@@ -168,7 +168,7 @@ const ProfileTab = () => {
             placeholder="Enter your email"
             value={userInfo.email}
             disabled={true} // Disabled since it cannot be changed
-            style={{ flexGrow: 1, textAlign: 'right' }}
+            className={styles.textField}
             TextFieldWidth="350px"
           />
         </div>

frontend/src/scenes/settings/ProfileTab/ProfileTab.module.css

@@ -1,5 +1,6 @@
 .form {
     padding-bottom: 20px;
+    width: 864px;
     border-bottom: 1px solid #EEEEEE;
 }
 
@@ -18,7 +19,17 @@
 .photoAlign{
     display: flex;
     align-items: center;
-    gap: 2.5rem;
+    gap: 7rem;
+}
+
+.supportText {
+    margin: 0;
+    min-width: 400px;
+    color: var(--second-text-color);
+    font-size: var(--font-regular);
+    font-weight: 400;
+    line-height: 20px;
+    margin-top: 6px;
 }
 
 .photoOptions {
@@ -38,22 +49,19 @@
 
 .label {
     font-size: var(--font-regular);
+    min-width: 400px;
     font-weight: 700;
     line-height: 20px;
     text-align: left;
     flex-grow: 1;
     margin: 0;
 }
 
-.supportText {
-    margin: 0;
-    color: var(--second-text-color);
-    font-size: var(--font-regular);
-    font-weight: 400;
-    line-height: 20px;
-    margin-top: 6px;
+.textField {
+    flex-grow: 1; 
+    text-align: right;
 }
-
+  
 .update,
 .delete{
     border: none;

frontend/src/templates/GuideMainPageTemplate/GuideMainPageComponents/ConfirmationPopup/ConfirmationPopup.jsx

@@ -1,28 +1,42 @@
 import React from "react";
 import PropTypes from "prop-types";
+import Button from "../../../../components/Button/Button";
+import { dialogStyles } from "./ConfirmationPopupStyles.js";
 import {
   Dialog,
   DialogActions,
   DialogContent,
   DialogContentText,
   DialogTitle,
-  Button,
 } from "@mui/material";
 
 const ConfirmationPopup = ({ open, onConfirm, onCancel }) => {
   return (
-    <Dialog open={open} onClose={onCancel} closeAfterTransition={open}>
-      <DialogTitle>Confirm Action</DialogTitle>
-      <DialogContent>
+    <Dialog
+      PaperProps={{ sx: { padding: dialogStyles.paper } }}
+      open={open}
+      onClose={onCancel}
+      closeAfterTransition={open}
+    >
+      <DialogTitle sx={dialogStyles.title}>Confirm Action</DialogTitle>
+      <DialogContent sx={dialogStyles.content}>
         <DialogContentText>
           Are you sure you want to perform this action?
         </DialogContentText>
       </DialogContent>
-      <DialogActions>
-        <Button onClick={onCancel}>Cancel</Button>
-        <Button onClick={onConfirm} color="primary">
-          Confirm
-        </Button>
+      <DialogActions sx={dialogStyles.actions}>
+        <Button
+          text="Cancel"
+          buttonType="secondary"
+          variant="text"
+          onClick={onCancel}
+        />
+        <Button
+          text="Confirm"
+          onClick={onConfirm}
+          variant="contained"
+          buttonType="secondary"
+        />
       </DialogActions>
     </Dialog>
   );

frontend/src/templates/GuideMainPageTemplate/GuideMainPageComponents/ConfirmationPopup/ConfirmationPopupStyles.js

@@ -0,0 +1,15 @@
+export const dialogStyles = {
+  paper: {
+    padding: "16px",
+  },
+  title: {
+    padding: 0,
+  },
+  content: {
+    paddingLeft: 0,
+  },
+  actions: {
+    paddingBottom: 0,
+    paddingRight: 0,
+  },
+};

frontend/src/templates/GuideMainPageTemplate/GuideMainPageTemplate.css

@@ -1,5 +1,6 @@
 .product-page-container {
   padding: 2% 3%;
+  width: 100%;
 }
 
 .product-page-header {