From 1926a54d1f7b8bc1ed690aaf8e3b679b41edce7b Mon Sep 17 00:00:00 2001
From: rohan09-raj <rajrohan1914@gmail.com>
Date: Sat, 20 Aug 2022 21:52:57 +0530
Subject: enrollment improvements

---
 .../components/LanguageSelect/LanguageSelect.js    | 67 ---------------------
 .../components/LanguageSelect/LanguageSelect.jsx   | 69 ++++++++++++++++++++++
 .../LanguageSelect/LanguageSelect.module.css       |  5 ++
 3 files changed, 74 insertions(+), 67 deletions(-)
 delete mode 100644 client/src/components/LanguageSelect/LanguageSelect.js
 create mode 100644 client/src/components/LanguageSelect/LanguageSelect.jsx
 create mode 100644 client/src/components/LanguageSelect/LanguageSelect.module.css

(limited to 'client/src/components/LanguageSelect')

diff --git a/client/src/components/LanguageSelect/LanguageSelect.js b/client/src/components/LanguageSelect/LanguageSelect.js
deleted file mode 100644
index ac455b8..0000000
--- a/client/src/components/LanguageSelect/LanguageSelect.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-import i18next from 'i18next'
-
-import ArrowDropDown from '@mui/icons-material/ArrowDropDown'
-import Button from '@mui/material/Button'
-import Popover from '@mui/material/Popover'
-import List from '@mui/material/List'
-import ListItem from '@mui/material/ListItem'
-import ListSubheader from '@mui/material/ListSubheader'
-
-const languageMap = {
-  en: { label: 'English', dir: 'ltr', active: true },
-  hi: { label: 'Hindi', dir: 'ltr', active: false }
-}
-
-const LanguageSelect = () => {
-  const selected = localStorage.getItem('i18nextLng') || 'en'
-  const { t } = useTranslation()
-
-  const [menuAnchor, setMenuAnchor] = React.useState(null)
-  React.useEffect(() => {
-    document.body.dir = languageMap[selected]?.dir
-  }, [menuAnchor, selected])
-
-  return (
-    <div className="d-flex justify-content-end align-items-center language-select-root">
-      <Button onClick={({ currentTarget }) => setMenuAnchor(currentTarget)}>
-        {languageMap[selected]?.label}
-        <ArrowDropDown fontSize="small" />
-      </Button>
-      <Popover
-        open={!!menuAnchor}
-        anchorEl={menuAnchor}
-        onClose={() => setMenuAnchor(null)}
-        anchorOrigin={{
-          vertical: 'bottom',
-          horizontal: 'right'
-        }}
-        transformOrigin={{
-          vertical: 'top',
-          horizontal: 'right'
-        }}
-      >
-        <div>
-          <List>
-            <ListSubheader>{t('select_language')}</ListSubheader>
-            {Object.keys(languageMap)?.map((item) => (
-              <ListItem
-                button
-                key={item}
-                onClick={() => {
-                  i18next.changeLanguage(item)
-                  setMenuAnchor(null)
-                }}
-              >
-                {languageMap[item].label}
-              </ListItem>
-            ))}
-          </List>
-        </div>
-      </Popover>
-    </div>
-  )
-}
-
-export default LanguageSelect
diff --git a/client/src/components/LanguageSelect/LanguageSelect.jsx b/client/src/components/LanguageSelect/LanguageSelect.jsx
new file mode 100644
index 0000000..dd2997f
--- /dev/null
+++ b/client/src/components/LanguageSelect/LanguageSelect.jsx
@@ -0,0 +1,69 @@
+import React, { useState, useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+import i18next from 'i18next'
+import { Button, Popover, List, ListItem, ListSubheader } from '@mui/material'
+
+import styles from './LanguageSelect.module.css'
+
+const languageMap = {
+  en: { label: 'English', dir: 'ltr', active: true },
+  hi: { label: 'Hindi', dir: 'ltr', active: false }
+}
+
+const LanguageSelect = () => {
+  const selected = localStorage.getItem('i18nextLng') || 'en'
+  const { t } = useTranslation()
+
+  const [menuAnchor, setMenuAnchor] = useState(null)
+  useEffect(() => {
+    document.body.dir = languageMap[selected]?.dir
+  }, [menuAnchor, selected])
+
+  return (
+    <div className={styles.language}>
+      <Button
+        onClick={({ currentTarget }) => setMenuAnchor(currentTarget)}
+        sx={{ margin: '0px 15px', padding: '0px' }}
+      >
+        <img
+          src={`${process.env.PUBLIC_URL}/assets/images/language.svg`}
+          height="80px"
+          width="80px"
+        />
+      </Button>
+      <Popover
+        open={!!menuAnchor}
+        anchorEl={menuAnchor}
+        onClose={() => setMenuAnchor(null)}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'right'
+        }}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'right'
+        }}
+      >
+        <div>
+          <List>
+            <ListSubheader>{t('SELECT_LANGUAGE')}</ListSubheader>
+            {Object.keys(languageMap)?.map((item) => (
+              <ListItem
+                button
+                key={item}
+                onClick={() => {
+                  i18next.changeLanguage(item)
+                  setMenuAnchor(null)
+                }}
+              >
+                {languageMap[item].label}
+              </ListItem>
+            ))}
+          </List>
+        </div>
+      </Popover>
+    </div>
+  )
+}
+
+export default LanguageSelect
diff --git a/client/src/components/LanguageSelect/LanguageSelect.module.css b/client/src/components/LanguageSelect/LanguageSelect.module.css
new file mode 100644
index 0000000..9a4029c
--- /dev/null
+++ b/client/src/components/LanguageSelect/LanguageSelect.module.css
@@ -0,0 +1,5 @@
+.language {
+  position: absolute;
+  top: 100px;
+  right: 150px;
+}
-- 
cgit