Redesign talawa user portal settings page (#1312)

* Redesign talawa user portal settings page * Added translation box
PalisadoesFoundation · Dec 31, 2023 · a6b1ca2 · a6b1ca2
1 parent 55deef4
commit a6b1ca2
Show file tree

Hide file tree

Showing 8 changed files with 173 additions and 68 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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();
+  });
 });
diff --git 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 {
         <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>
     </>