Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Redesign talawa user portal settings page #1312

Merged
merged 3 commits into from
Dec 31, 2023
+173 −68
Merged

Redesign talawa user portal settings page #1312

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
21ff069
Redesign talawa user portal settings page
pateldivyesh1323 Dec 28, 2023
ea79ee9
Added translation box
pateldivyesh1323 Dec 29, 2023
1f707bf
Merge branch 'develop' of https://github.com/PalisadoesFoundation/tal…
pateldivyesh1323 Dec 31, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion public/locales/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -615,7 +615,10 @@
"lastName": "Last Name",
"emailAddress": "Email Address",
"updateImage": "Update Image",
"save": "Save"
"saveChanges": "Save Changes",
"updateProfile": "Update Profile",
"otherSettings": "Other Settings",
"changeLanguage": "Change Language"
},
"donate": {
"donateTo": "Donate to",
Expand Down
5 changes: 4 additions & 1 deletion public/locales/fr.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -605,7 +605,10 @@
"lastName": "Nom de famille",
"emailAddress": "Adresse e-mail",
"updateImage": "Mettre à jour l'image",
"save": "Sauvegarder"
"saveChanges": "Sauvegarder les modifications",
"updateProfile": "Mettre à jour le profil",
"otherSettings": "Autres paramètres",
"changeLanguage": "Changer la langue"
},
"donate": {
"donateTo": "Faire un don à",
Expand Down
5 changes: 4 additions & 1 deletion public/locales/hi.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -605,7 +605,10 @@
"lastName": "उपनाम",
"emailAddress": "मेल पता",
"updateImage": "छवि अद्यतन करें",
"save": "बचाना"
"saveChanges": "परिवर्तनों को सुरक्षित करें",
"updateProfile": "प्रोफ़ाइल अपडेट करें",
"otherSettings": "अन्य सेटिंग्स",
"changeLanguage": "भाषा बदलें"
},
"donate": {
"donateTo": "दान दें",
Expand Down
5 changes: 4 additions & 1 deletion public/locales/sp.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -605,7 +605,10 @@
"lastName": "Apellido",
"emailAddress": "dirección de correo electrónico",
"updateImage": "Actualizar imagen",
"save": "Ahorrar"
"saveChanges": "Guardar cambios",
"updateProfile": "Actualización del perfil",
"otherSettings": "Otras Configuraciones",
"changeLanguage": "Cambiar Idioma"
},
"donate": {
"donateTo": "Donar a",
Expand Down
5 changes: 4 additions & 1 deletion public/locales/zh.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -605,7 +605,10 @@
"lastName": "姓",
"emailAddress": "電子郵件地址",
"updateImage": "更新圖片",
"save": "節省"
"saveChanges": "保存更改",
"updateProfile": "更新个人信息",
"otherSettings": "其他设置",
"changeLanguage": "更改语言"
},
"donate": {
"donateTo": "捐贈給",
Expand Down
37 changes: 29 additions & 8 deletions src/screens/UserPortal/Settings/Settings.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
.mainContainer {
width: 50%;
flex-grow: 3;
padding: 40px;
padding: 25px;
max-height: 100%;
overflow: auto;
}
Expand All @@ -10,17 +10,38 @@
height: calc(100vh - 66px);
}

.content {
.cardHeader .cardTitle {
font-size: 1.2rem;
font-weight: 600;
}

.cardHeader {
padding: 1.25rem 1rem 1rem 1rem;
border-bottom: 1px solid var(--bs-gray-200);
display: flex;
justify-content: space-between;
align-items: center;
}

.cardBody {
padding: 1.25rem 1rem 1.5rem 1rem;
display: flex;
flex-direction: column;
max-width: 300px;
gap: 15px;
}

.imageInput {
background-color: white;
.cardLabel {
font-weight: bold;
padding-bottom: 1px;
font-size: 14px;
color: #707070;
margin-bottom: 10px;
}

.cardControl {
margin-bottom: 20px;
}

.colorLight {
background-color: white;
.cardButton {
width: fit-content;
float: right;
}
19 changes: 19 additions & 0 deletions src/screens/UserPortal/Settings/Settings.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,4 +136,23 @@ describe('Testing Settings Screen [User Portal]', () => {
userEvent.click(screen.getByTestId('updateUserBtn'));
await wait();
});

test('Other settings card is rendered properly', async () => {
render(
<MockedProvider addTypename={false} link={link}>
<BrowserRouter>
<Provider store={store}>
<I18nextProvider i18n={i18nForTest}>
<Settings />
</I18nextProvider>
</Provider>
</BrowserRouter>
</MockedProvider>
);

await wait();

expect(screen.getByText('Other Settings')).toBeInTheDocument();
expect(screen.getByText('Change Language')).toBeInTheDocument();
});
});
160 changes: 105 additions & 55 deletions src/screens/UserPortal/Settings/Settings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,14 @@ import { useTranslation } from 'react-i18next';
import styles from './Settings.module.css';
import UserSidebar from 'components/UserPortal/UserSidebar/UserSidebar';
import UserNavbar from 'components/UserPortal/UserNavbar/UserNavbar';
import { Button, Form } from 'react-bootstrap';
import { Button, Card, Col, Form, Row } from 'react-bootstrap';
import convertToBase64 from 'utils/convertToBase64';
import { UPDATE_USER_MUTATION } from 'GraphQl/Mutations/mutations';
import { useMutation, useQuery } from '@apollo/client';
import { errorHandler } from 'utils/errorHandler';
import { toast } from 'react-toastify';
import { CHECK_AUTH } from 'GraphQl/Queries/Queries';
import ChangeLanguageDropDown from 'components/ChangeLanguageDropdown/ChangeLanguageDropDown';

export default function settings(): JSX.Element {
const { t } = useTranslation('translation', {
Expand Down Expand Up @@ -83,60 +84,109 @@ export default function settings(): JSX.Element {
<UserSidebar />
<div className={`${styles.mainContainer}`}>
<h3>{t('profileSettings')}</h3>
<div className={`${styles.content}`}>
<Form.Label htmlFor="inputFirstName">{t('firstName')}</Form.Label>
<Form.Control
type="text"
id="inputFirstName"
value={firstName}
onChange={handleFirstNameChange}
className={`${styles.colorLight}`}
data-testid="inputFirstName"
/>
<Form.Label htmlFor="inputLastName">{t('lastName')}</Form.Label>
<Form.Control
type="text"
id="inputLastName"
value={lastName}
onChange={handleLastNameChange}
className={`${styles.colorLight}`}
data-testid="inputLastName"
/>
<Form.Label htmlFor="inputEmail">{t('emailAddress')}</Form.Label>
<Form.Control
type="email"
id="inputEmail"
value={email}
className={`${styles.colorLight}`}
disabled
/>
{t('updateImage')}
<Form.Control
accept="image/*"
id="postphoto"
name="photo"
type="file"
className={styles.imageInput}
multiple={false}
onChange={
/* istanbul ignore next */
async (e: React.ChangeEvent): Promise<void> => {
const target = e.target as HTMLInputElement;
const file = target.files && target.files[0];
if (file) {
const image = await convertToBase64(file);
setImage(image);
}
}
}
/>
<Button
onClick={handleUpdateUserDetails}
data-testid="updateUserBtn"
>
{t('save')}
</Button>
</div>
<Row>
<Col lg={7}>
<Card border="0" className="rounded-4 mb-4">
<div className={`${styles.cardHeader}`}>
<div className={`${styles.cardTitle}`}>
{t('updateProfile')}
</div>
</div>
<Card.Body className={`${styles.cardBody}`}>
<Form.Label
htmlFor="inputFirstName"
className={`${styles.cardLabel}`}
>
{t('firstName')}
</Form.Label>
<Form.Control
type="text"
id="inputFirstName"
value={firstName}
onChange={handleFirstNameChange}
className={`${styles.cardControl}`}
data-testid="inputFirstName"
/>
<Form.Label
htmlFor="inputLastName"
className={`${styles.cardLabel}`}
>
{t('lastName')}
</Form.Label>
<Form.Control
type="text"
id="inputLastName"
value={lastName}
onChange={handleLastNameChange}
className={`${styles.cardControl}`}
data-testid="inputLastName"
/>
<Form.Label
htmlFor="inputEmail"
className={`${styles.cardLabel}`}
>
{t('emailAddress')}
</Form.Label>
<Form.Control
type="email"
id="inputEmail"
value={email}
className={`${styles.cardControl}`}
disabled
/>
<Form.Label
htmlFor="postphoto"
className={`${styles.cardLabel}`}
>
{t('updateImage')}
</Form.Label>
<Form.Control
accept="image/*"
id="postphoto"
name="photo"
type="file"
className={styles.cardControl}
multiple={false}
onChange={
/* istanbul ignore next */
async (e: React.ChangeEvent): Promise<void> => {
const target = e.target as HTMLInputElement;
const file = target.files && target.files[0];
if (file) {
const image = await convertToBase64(file);
setImage(image);
}
}
}
/>
<div>
<Button
onClick={handleUpdateUserDetails}
data-testid="updateUserBtn"
className={`${styles.cardButton}`}
>
{t('saveChanges')}
</Button>
</div>
</Card.Body>
</Card>
</Col>
<Col lg={5}>
<Card border="0" className="rounded-4 mb-4">
<div className={styles.cardHeader}>
<div className={styles.cardTitle}>{t('otherSettings')}</div>
</div>
<Card.Body className={styles.cardBody}>
<Form.Label
className={`text-secondary fw-bold ${styles.cardLabel}`}
>
{t('changeLanguage')}
</Form.Label>
<ChangeLanguageDropDown />
</Card.Body>
</Card>
</Col>
</Row>
</div>
</div>
</>
Expand Down