Fixed settings page layout

bluewave-labs · Jan 2, 2025 · 246bcb2 · 246bcb2
1 parent 8ee575b
commit 246bcb2
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 13 deletions.
diff --git a/frontend/src/components/TextFieldComponents/CustomTextField/CustomTextField.jsx b/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>

diff --git a/frontend/src/scenes/settings/ProfileTab/ProfileTab.jsx b/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>

diff --git a/frontend/src/scenes/settings/ProfileTab/ProfileTab.module.css b/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;