Skip to content

Commit

Permalink
Merge pull request #453 from bluewave-labs/452-ui-improvements
Browse files Browse the repository at this point in the history
452 UI improvements
  • Loading branch information
erenfn authored Jan 3, 2025
2 parents 84f2039 + 636b79c commit ddc73a1
Show file tree
Hide file tree
Showing 6 changed files with 70 additions and 25 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import "./CustomTextFieldStyles.css";
const CustomTextField = ({
id = "",
name = "",
className,
checkCircleIconVisible = false,
displayCheckCircleIcon = false,
labelText = "",
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -100,6 +101,7 @@ const CustomTextField = ({
};

CustomTextField.propTypes = {
className: PropTypes.string,
labelText: PropTypes.string,
value: PropTypes.string,
onChange: PropTypes.func,
Expand Down
8 changes: 3 additions & 5 deletions frontend/src/scenes/settings/ProfileTab/ProfileTab.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -168,12 +168,11 @@ 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>
<div className={styles.photoElements}>
<div>
<label htmlFor="photo" className={styles.label}>
Your Photo
</label>
Expand All @@ -196,7 +195,6 @@ const ProfileTab = () => {
</div>
</div>
</div>
</div>
</div>
<div className={styles.saveButton}>
<Button
Expand Down
28 changes: 19 additions & 9 deletions frontend/src/scenes/settings/ProfileTab/ProfileTab.module.css
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
.form {
padding-bottom: 20px;
min-width: 780px;
max-width: 864px;
border-bottom: 1px solid #EEEEEE;
}

Expand All @@ -12,16 +14,27 @@

.photoElements {
display: flex;
flex-direction: column;
margin-top: 30px;
}

.photoAlign{
display: flex;
justify-content: space-between;
align-items: center;
gap: 2.5rem;
}

.supportText {
margin: 0;
color: var(--second-text-color);
font-size: var(--font-regular);
font-weight: 400;
line-height: 20px;
margin-top: 6px;
}

.photoOptions {
min-width: 350px;
display: flex;
gap: 5px;
align-items: center;
Expand All @@ -38,22 +51,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;
Expand Down
Original file line number Diff line number Diff line change
@@ -1,28 +1,44 @@
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>
<DialogContentText>
<Dialog
PaperProps={{ sx: dialogStyles.paper }}
open={open}
onClose={onCancel}
closeAfterTransition={open}
>
<DialogTitle sx={dialogStyles.title}>Confirm Action</DialogTitle>
<DialogContent sx={dialogStyles.content}>
<DialogContentText sx={dialogStyles.contentText}>
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}
sx={dialogStyles.contentText}
/>
<Button
text="Confirm"
onClick={onConfirm}
variant="contained"
buttonType="secondary"
sx={dialogStyles.contentText}
/>
</DialogActions>
</Dialog>
);
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
export const dialogStyles = {
paper: {
padding: "16px",
},
title: {
padding: 0,
},
content: {
paddingLeft: 0,
},
contentText: {
fontSize: "13px",
},
actions: {
paddingBottom: 0,
paddingRight: 0,
},
};
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
.product-page-container {
padding: 2% 3%;
width: 100%;
}

.product-page-header {
Expand Down

0 comments on commit ddc73a1

Please sign in to comment.