From 68b5c1c145a5b6290a7a97bdbc143b3509082690 Mon Sep 17 00:00:00 2001
From: acharyarupak391 <acharyarupak391@gmail.com>
Date: Thu, 14 Mar 2024 21:15:01 +0545
Subject: [PATCH] Updated language dropdown modals for mobile & desktop

---
 src/common/Footer/Footer.jsx           |   4 +-
 src/common/Header/Header.jsx           |   2 +-
 src/common/Header/LanguageDropdown.jsx | 119 +++++++++++++++++++++----
 src/icons/SearchLanguageIcon.jsx       |   2 +-
 tailwind.config.js                     |   6 +-
 5 files changed, 109 insertions(+), 24 deletions(-)

diff --git a/src/common/Footer/Footer.jsx b/src/common/Footer/Footer.jsx
index 6d2129aa3..8e786e369 100644
--- a/src/common/Footer/Footer.jsx
+++ b/src/common/Footer/Footer.jsx
@@ -15,7 +15,7 @@ export const Footer = () => {
     <footer className='pt-16 border-t pb-18 border-B0C4DB print:hidden'>
       <Container>
         <div className='flex flex-col justify-between gap-10 lg:flex-row'>
-          <div className='flex flex-col items-start justify-between gap-8'>
+          <div className='flex flex-col items-start justify-between gap-8 text-01052D'>
             <img
               loading='lazy'
               alt={t(i18n)`Neptune Mutual`}
@@ -32,7 +32,7 @@ export const Footer = () => {
               </a>
             </div>
 
-            <LanguageDropdown footer />
+            <LanguageDropdown />
           </div>
 
           <div className='flex flex-wrap justify-between gap-6 lg:flex-nowrap'>
diff --git a/src/common/Header/Header.jsx b/src/common/Header/Header.jsx
index a77f495bd..7cfb5ef63 100644
--- a/src/common/Header/Header.jsx
+++ b/src/common/Header/Header.jsx
@@ -330,7 +330,7 @@ export const MenuModal = ({
               <div className='absolute right-6 top-6'>
                 <BurgerMenu isOpen onToggle={onClose} />
               </div>
-              <div className='w-full sm:px-16'>
+              <div className='w-full text-white sm:px-16'>
                 <LanguageDropdown onOverlay />
               </div>
               <div className='flex flex-col flex-grow w-full text-left align-middle transition-all transform shadow-xl sm:px-16 sm:align-baseline rounded-2xl'>
diff --git a/src/common/Header/LanguageDropdown.jsx b/src/common/Header/LanguageDropdown.jsx
index 25471ea67..608ca40ae 100644
--- a/src/common/Header/LanguageDropdown.jsx
+++ b/src/common/Header/LanguageDropdown.jsx
@@ -6,7 +6,7 @@ import {
 
 import { useRouter } from 'next/router'
 
-import ChevronDownArrowIcon from '@/icons/ChevronDownArrowIcon'
+import LeftArrow from '@/icons/LeftArrow'
 import SearchLanguageIcon from '@/icons/SearchLanguageIcon'
 import SelectedCircleIcon from '@/icons/SelectedCircleIcon'
 import GlobeLogo from '@/lib/connect-wallet/components/logos/Globe'
@@ -17,6 +17,7 @@ import {
 } from '@/src/config/locales'
 import { useDebounce } from '@/src/hooks/useDebounce'
 import { useLocalStorage } from '@/src/hooks/useLocalStorage'
+import { useWindowSize } from '@/src/hooks/useWindowSize'
 import { classNames } from '@/utils/classnames'
 import { getBrowserLocale } from '@/utils/locale'
 import {
@@ -25,6 +26,12 @@ import {
 } from '@headlessui/react'
 import { t } from '@lingui/macro'
 import { useLingui } from '@lingui/react'
+import {
+  Content,
+  Overlay,
+  Portal,
+  Root
+} from '@radix-ui/react-dialog'
 
 const LANGUAGES = Object.values(languageKey)
 const LANGUAGE_KEYS = Object.keys(languageKey)
@@ -32,7 +39,6 @@ const LANGUAGE_KEYS = Object.keys(languageKey)
 /**
  * @param {object} props
  * @param {boolean?} [props.onOverlay]
- * @param {boolean?} [props.footer]
  * @returns
  */
 export const LanguageDropdown = (props) => {
@@ -41,6 +47,8 @@ export const LanguageDropdown = (props) => {
 
   const [language, setLanguage] = useLocalStorage('locale', null)
 
+  const { width } = useWindowSize()
+
   useEffect(() => {
     const browserLocale = getBrowserLocale().replace(/-.*/, '')
     if (
@@ -100,39 +108,38 @@ export const LanguageDropdown = (props) => {
                   open && 'underline'
                 )}
                 >
-                  <div className={classNames('flex items-center gap-1 text-sm',
-                    props.footer ? 'text-black text-md font-medium' : 'text-white'
-                  )}
-                  >
-                    <GlobeLogo className={props.footer ? 'text-black w-6 h-6' : 'text-white'} />
+                  <div className={classNames('flex items-center gap-1 text-current text-md font-medium')}>
+                    <GlobeLogo className='w-6 h-6 text-current' />
                     <span>
                       {languageKey[router.locale]?.split('-')[0]}
                     </span>
-                    <ChevronDownArrowIcon aria-hidden='true' />
                   </div>
                 </Listbox.Button>
+
                 <Transition
+                  show={open && width > 768}
                   as={Fragment}
                   leave='transition ease-in duration-100'
                   leaveFrom='opacity-100'
                   leaveTo='opacity-0'
                 >
                   <Listbox.Options className={classNames(
-                    'z-50 py-6 px-2 mt-4 absolute h-fit top-4 overflow-auto min-w-[260px] sm:min-w-[274px] text-base bg-[#FEFEFF] border rounded-md shadow-lg border-B0C4DB ring-1 ring-black ring-opacity-5 focus:outline-none',
-                    props.onOverlay && 'left-0 w-fit',
-                    props.footer ? 'left-0' : 'right-0'
+                    'z-50 p-4 bg-[#FEFEFF] absolute rounded-2 border border-B0C4DB shadow-menu min-w-300 flex flex-col gap-4 bottom-full-plus-16',
+                    props.onOverlay && 'left-0 w-fit'
                   )}
                   >
-                    <div className='flex items-center pb-4 mb-1 text-sm'>
-                      <SearchLanguageIcon width={16} height={16} className='mx-2.5' />
+                    <div className='flex items-center justify-between gap-1 py-2.5 px-4 border rounded-2 border-B0C4DB'>
                       <input
                         autoComplete='off'
-                        className='w-full placeholder-[#B0C4DB] text-black outline-0 h-6 max-w-[250px]'
+                        className='w-full placeholder-[#B0C4DB] text-black outline-none text-sm'
                         placeholder={t(i18n)`Search Language`}
+                        value={searchValue}
                         onChange={handleSearchLanguage}
                       />
+
+                      <SearchLanguageIcon width={16} height={16} />
                     </div>
-                    <div className='overflow-y-auto max-h-64'>
+                    <div className='flex flex-col gap-3 overflow-y-auto max-h-400'>
                       {languages.map((lang, i) => {
                         return (
                           <Listbox.Option key={i} value={lang}>
@@ -140,10 +147,9 @@ export const LanguageDropdown = (props) => {
                               return (
                                 <span
                                   className={classNames(
-                                    'truncate p-2 flex justify-between items-center text-xs font-medium tracking-normal leading-4',
-                                    selected && 'bg-[#b0c4db]   bg-opacity-20 rounded',
+                                    'truncate flex justify-between items-center text-xs tracking-normal leading-4',
                                     active
-                                      ? 'text-4E7DD9 bg-[#b0c4db]  bg-opacity-20 rounded'
+                                      ? 'text-4E7DD9'
                                       : 'text-black'
                                   )}
                                 >
@@ -162,6 +168,15 @@ export const LanguageDropdown = (props) => {
                     </div>
                   </Listbox.Options>
                 </Transition>
+
+                <MobileLanguageDropdown
+                  open={open && width <= 768}
+                  languages={languages}
+                  searchValue={searchValue}
+                  handleSearchLanguage={handleSearchLanguage}
+                  i18n={i18n}
+                  currentLanguage={languageKey[router.locale]}
+                />
               </>
             )
           }
@@ -170,3 +185,71 @@ export const LanguageDropdown = (props) => {
     </div>
   )
 }
+
+const MobileLanguageDropdown = ({ open, languages, searchValue, handleSearchLanguage, i18n, currentLanguage }) => {
+  return (
+    <Root open={open}>
+      <Portal className='md:hidden'>
+        <Overlay className='fixed inset-0 z-50 bg-black bg-opacity-80 backdrop-blur-md' />
+
+        <Content className='fixed inset-0 w-full max-h-screen z-60'>
+          <Listbox.Options className='flex flex-col h-full gap-2 cursor-pointer'>
+            <div className='px-8 py-3'>
+              <Listbox.Option
+                value={currentLanguage}
+                className='py-1 flex gap-2.5 items-center text-white text-md leading-5 uppercase'
+              >
+                <LeftArrow />
+                <span>Back</span>
+              </Listbox.Option>
+            </div>
+
+            <div className='flex-1 py-2.5 px-8 flex flex-col gap-6'>
+              <div className='flex items-center py-2.5 px-4 bg-white rounded-2 gap-1'>
+                <input
+                  autoComplete='off'
+                  className='w-full placeholder-[#B0C4DB] text-black outline-0 text-sm flex-1'
+                  placeholder={t(i18n)`Search Language`}
+                  value={searchValue}
+                  onChange={handleSearchLanguage}
+                />
+                <SearchLanguageIcon width={16} height={16} className='text-black' />
+              </div>
+
+              <div className='flex flex-col flex-1 max-h-full gap-4 overflow-y-auto'>
+                {languages.map((lang, i) => {
+                  return (
+                    <Listbox.Option
+                      key={i} value={lang} className={
+                      ({ selected }) => {
+                        return classNames(
+                          'truncate p-2 flex justify-between items-center text-lg tracking-normal leading-4 gap-2 cursor-pointer',
+                          selected ? 'text-white' : 'text-9B9B9B'
+                        )
+                      }
+                    }
+                    >
+
+                      {({ selected }) => {
+                        return (
+                          <>
+                            {lang}
+                            {selected && (
+                              <span aria-label='Selected' className='flex-shrink-0'>
+                                <SelectedCircleIcon className='w-4 h-4' />
+                              </span>
+                            )}
+                          </>
+                        )
+                      }}
+                    </Listbox.Option>
+                  )
+                })}
+              </div>
+            </div>
+          </Listbox.Options>
+        </Content>
+      </Portal>
+    </Root>
+  )
+}
diff --git a/src/icons/SearchLanguageIcon.jsx b/src/icons/SearchLanguageIcon.jsx
index b1bbd2e50..ab0a4443a 100644
--- a/src/icons/SearchLanguageIcon.jsx
+++ b/src/icons/SearchLanguageIcon.jsx
@@ -10,7 +10,7 @@ const SearchLanguageIcon = (props) => {
     >
       <path
         d='M14.0002 14L11.0095 11.004L14.0002 14ZM12.6668 7.00004C12.6668 8.50293 12.0698 9.94427 11.0071 11.007C9.9444 12.0697 8.50306 12.6667 7.00016 12.6667C5.49727 12.6667 4.05593 12.0697 2.99322 11.007C1.93052 9.94427 1.3335 8.50293 1.3335 7.00004C1.3335 5.49715 1.93052 4.05581 2.99322 2.9931C4.05593 1.9304 5.49727 1.33337 7.00016 1.33337C8.50306 1.33337 9.9444 1.9304 11.0071 2.9931C12.0698 4.05581 12.6668 5.49715 12.6668 7.00004V7.00004Z'
-        stroke='#B0C4DB'
+        stroke='currentColor'
         strokeLinecap='round'
       />
     </svg>
diff --git a/tailwind.config.js b/tailwind.config.js
index 3b389b1bf..fa0c2e9e2 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -31,7 +31,8 @@ module.exports = {
       homeCard: '0px 12px 16px rgba(0, 0, 0, 0.04)',
       'hc-tooltip': '0px 5px 13px rgba(0, 0, 0, 0.1)',
       'tx-overview': '0px 4px 11px rgba(1, 5, 45, 0.3)',
-      'tx-list': '0px 4px 12px rgba(0, 0, 0, 0.4)'
+      'tx-list': '0px 4px 12px rgba(0, 0, 0, 0.4)',
+      menu: '0px 4px 10px 0px rgba(0, 0, 0, 0.2)'
     },
     colors: {
       transparent: 'transparent',
@@ -117,7 +118,8 @@ module.exports = {
         420: '420px',
         392: '392px',
         450: '450px',
-        'full-plus-20': 'calc(100% + 20px)'
+        'full-plus-20': 'calc(100% + 20px)',
+        'full-plus-16': 'calc(100% + 16px)'
       },
       lineHeight: {
         4.5: '18px',