From a6b1ca26e7ef997a5c51ecd69999f5fe1643e717 Mon Sep 17 00:00:00 2001 From: Patel Divyesh Date: Sun, 31 Dec 2023 22:09:45 +0530 Subject: [PATCH] Redesign talawa user portal settings page (#1312) * Redesign talawa user portal settings page * Added translation box --- public/locales/en.json | 5 +- public/locales/fr.json | 5 +- public/locales/hi.json | 5 +- public/locales/sp.json | 5 +- public/locales/zh.json | 5 +- .../UserPortal/Settings/Settings.module.css | 37 +++- .../UserPortal/Settings/Settings.test.tsx | 19 +++ src/screens/UserPortal/Settings/Settings.tsx | 160 ++++++++++++------ 8 files changed, 173 insertions(+), 68 deletions(-) diff --git a/public/locales/en.json b/public/locales/en.json index 2203f89d6c..7f07275c54 100644 --- a/public/locales/en.json +++ b/public/locales/en.json @@ -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", diff --git a/public/locales/fr.json b/public/locales/fr.json index 0f40a9e7ce..531b361592 100644 --- a/public/locales/fr.json +++ b/public/locales/fr.json @@ -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 à", diff --git a/public/locales/hi.json b/public/locales/hi.json index cb13f29bc2..f6e314b3f5 100644 --- a/public/locales/hi.json +++ b/public/locales/hi.json @@ -605,7 +605,10 @@ "lastName": "उपनाम", "emailAddress": "मेल पता", "updateImage": "छवि अद्यतन करें", - "save": "बचाना" + "saveChanges": "परिवर्तनों को सुरक्षित करें", + "updateProfile": "प्रोफ़ाइल अपडेट करें", + "otherSettings": "अन्य सेटिंग्स", + "changeLanguage": "भाषा बदलें" }, "donate": { "donateTo": "दान दें", diff --git a/public/locales/sp.json b/public/locales/sp.json index 0064c4a149..d2fb1b5242 100644 --- a/public/locales/sp.json +++ b/public/locales/sp.json @@ -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", diff --git a/public/locales/zh.json b/public/locales/zh.json index e90c7d82e6..69b3aa4786 100644 --- a/public/locales/zh.json +++ b/public/locales/zh.json @@ -605,7 +605,10 @@ "lastName": "姓", "emailAddress": "電子郵件地址", "updateImage": "更新圖片", - "save": "節省" + "saveChanges": "保存更改", + "updateProfile": "更新个人信息", + "otherSettings": "其他设置", + "changeLanguage": "更改语言" }, "donate": { "donateTo": "捐贈給", diff --git a/src/screens/UserPortal/Settings/Settings.module.css b/src/screens/UserPortal/Settings/Settings.module.css index c8ca1e6091..2ac15983e2 100644 --- a/src/screens/UserPortal/Settings/Settings.module.css +++ b/src/screens/UserPortal/Settings/Settings.module.css @@ -1,7 +1,7 @@ .mainContainer { width: 50%; flex-grow: 3; - padding: 40px; + padding: 25px; max-height: 100%; overflow: auto; } @@ -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; } diff --git a/src/screens/UserPortal/Settings/Settings.test.tsx b/src/screens/UserPortal/Settings/Settings.test.tsx index faec179acc..b096162e2d 100644 --- a/src/screens/UserPortal/Settings/Settings.test.tsx +++ b/src/screens/UserPortal/Settings/Settings.test.tsx @@ -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( + + + + + + + + + + ); + + await wait(); + + expect(screen.getByText('Other Settings')).toBeInTheDocument(); + expect(screen.getByText('Change Language')).toBeInTheDocument(); + }); }); diff --git a/src/screens/UserPortal/Settings/Settings.tsx b/src/screens/UserPortal/Settings/Settings.tsx index 35afd78790..2d48994e89 100644 --- a/src/screens/UserPortal/Settings/Settings.tsx +++ b/src/screens/UserPortal/Settings/Settings.tsx @@ -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', { @@ -83,60 +84,109 @@ export default function settings(): JSX.Element {

{t('profileSettings')}

-
- {t('firstName')} - - {t('lastName')} - - {t('emailAddress')} - - {t('updateImage')} - => { - const target = e.target as HTMLInputElement; - const file = target.files && target.files[0]; - if (file) { - const image = await convertToBase64(file); - setImage(image); - } - } - } - /> - -
+ + + +
+
+ {t('updateProfile')} +
+
+ + + {t('firstName')} + + + + {t('lastName')} + + + + {t('emailAddress')} + + + + {t('updateImage')} + + => { + const target = e.target as HTMLInputElement; + const file = target.files && target.files[0]; + if (file) { + const image = await convertToBase64(file); + setImage(image); + } + } + } + /> +
+ +
+ + + + + +
+
{t('otherSettings')}
+
+ + + {t('changeLanguage')} + + + + + +