Merge branch 'mosip:develop' into develop

Infosys · Dec 11, 2024 · e713ecc · e713ecc
2 parents 3af9f69 + f281a2e
commit e713ecc
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 25 deletions.
diff --git a/inji-web/src/components/Common/LanguageSelector.tsx b/inji-web/src/components/Common/LanguageSelector.tsx
@@ -1,6 +1,6 @@
 import React, {useState} from "react";
 import {VscGlobe} from "react-icons/vsc";
-import {LanguagesSupported, switchLanguage} from "../../utils/i18n";
+import {isRTL, LanguagesSupported, switchLanguage} from "../../utils/i18n";
 import {useDispatch, useSelector} from "react-redux";
 import {storeLanguage} from "../../redux/reducers/commonReducer";
 import {RootState} from "../../types/redux";
@@ -15,7 +15,6 @@ export const LanguageSelector: React.FC = () => {
     language = language ?? window._env_.DEFAULT_LANG;
     const [isOpen, setIsOpen] = useState(false);
 
-
     interface DropdownItem {
         label: string;
         value: string;
@@ -62,7 +61,7 @@ export const LanguageSelector: React.FC = () => {
 
             {isOpen && (
                 <div
-                    className="absolute w-60 z-40 right-0 mt-3 rounded-md shadow-lg bg-iw-background overflow-hidden font-normal">
+                    className={`absolute w-60 z-40 ${isRTL(language) ? "left-0" : "right-0"} mt-3 rounded-md shadow-lg bg-iw-background overflow-hidden font-normal`}>
                     <ul className="py-1 divide-y divide-gray-200">
                         {LanguagesSupported.map((item) => (
                             <li key={item.value}

diff --git a/inji-web/src/components/DataShare/DataShareContent.tsx b/inji-web/src/components/DataShare/DataShareContent.tsx
@@ -46,26 +46,26 @@ export const DataShareContent:React.FC<DSContentProps> = (props) => {
         <div className="relative flex">
             <div className="my-4 w-1/3 text-iw-subTitle text-lg leading-relaxed py-5" data-testid={"DataShareContent-Consent-Container"}>{t("content.consent")}</div>
             <div className={"my-4 w-2/3 flex flex-row py-5 items-center"}>
-                <label className="w-1/2 flex items-center space-x-2">
+                <label className="w-1/2 flex items-center">
                     <input
                         type="radio"
                         name="consentValidity"
                         value="number"
                         checked={true}
                         data-testid={"DataShareContent-Consent-Radio"}
-                        className="accent-iw-primary scale-150"
+                        className="accent-iw-primary scale-150 mx-2"
                     />
                     <span className="font-base text-iw-subTitle" data-testid={"DataShareContent-Consent-Option"}>{t("content.validityTimesHeader")}</span>
                 </label>
 
-                <label onClick={()=>toast.warning(t("toastText"))} className="w-1/2 flex items-center space-x-2" data-testid={"DataShareContent-Validity-Date"}>  
+                <label onClick={()=>toast.warning(t("toastText"))} className="w-1/2 flex items-center" data-testid={"DataShareContent-Validity-Date"}>  
                     <div className="relative inline-block">
                         <input 
                             type="radio" 
                             name="consentValidity" 
                             value="date" 
                             disabled={true} 
-                            className="accent-iw-primary scale-150" 
+                            className="accent-iw-primary scale-150 mx-2" 
                         />
                         <div 
                             className="absolute inset-0"
@@ -77,9 +77,9 @@ export const DataShareContent:React.FC<DSContentProps> = (props) => {
                 </label>
             </div>
         </div>
-        <div className="relative flex mb-4" onClick={()=>setTimesDropDown(times => !times)}>
+        <div className="relative flex mb-4">
             <div className={"w-1/3"}></div>
-            <div className={"w-2/3 py-4 px-4 rounded-lg border-2 border-iw-borderLight flex flex-row items-center"}>
+            <div className={"w-2/3 py-4 px-4 rounded-lg border-2 border-iw-borderLight flex flex-row items-center"} onClick={()=>setTimesDropDown(times => !times)}>
                 <label className={"w-full h-full"} data-testid={"DataShareContent-Selected-Validity-Times"}>{getExpiryDisplayName(vcStorageExpiryLimitInTimes)}</label>
                 <MdOutlineKeyboardArrowDown size={30} color={'var(--iw-color-arrowDown)'} />
             </div>

diff --git a/inji-web/src/components/PageTemplate/Header.tsx b/inji-web/src/components/PageTemplate/Header.tsx
@@ -7,29 +7,29 @@ import {GiHamburgerMenu} from "react-icons/gi";
 import OutsideClickHandler from 'react-outside-click-handler';
 import { RootState } from "../../types/redux";
 import { useSelector } from "react-redux";
+import { isRTL } from "../../utils/i18n";
 export const Header: React.FC = () => {
-
     const language = useSelector((state: RootState) => state.common.language);
-    const {t} = useTranslation("PageTemplate");
+    const { t, i18n } = useTranslation("PageTemplate");
     const [isOpen, setIsOpen] = useState(false);
     const navigate = useNavigate();
 
     return (
         <header>
         <div data-testid="Header-Container"
                 className="fixed top-0 left-0 right-0 bg-iw-background py-7 z-10">
-            <div className="container mx-auto flex justify-between items-center px-4">
-                <div data-testid="Header-InjiWeb-Logo-Container" className={"flex flex-row space-x-9 justify-center items-center"}>
-                    <div  role="button" tabIndex={0} className={"m-3 sm:hidden"} onMouseDown={() => setIsOpen(open => !open)} onKeyUp={() => setIsOpen(open => !open)}>
-                        <GiHamburgerMenu size={32}/>
-                    </div>
-                    <div role={"button"}
-                         tabIndex={0}
-                         onMouseDown={() => navigate("/")}
-                         onKeyUp={() => navigate("/")}>
-                        <img src={require("../../assets/InjiWebLogo.png")}
-                             className={"h-13 w-28 scale-150 cursor-pointer"}
-                             data-testid="Header-InjiWeb-Logo"
+                <div className="container mx-auto flex justify-between items-center px-4">
+                    <div data-testid="Header-InjiWeb-Logo-Container" className={`flex flex-row ${isRTL(language) ? 'space-x-reverse' : 'space-x-9'} justify-center items-center`}>
+                        <div role="button" tabIndex={0} className={`m-3 sm:hidden ${isRTL(language)  ? 'ml-4' : ''}`} onMouseDown={() => setIsOpen(open => !open)} onKeyUp={() => setIsOpen(open => !open)}>
+                            <GiHamburgerMenu size={32} />
+                        </div>
+                        <div role={"button"}
+                            tabIndex={0}
+                            onMouseDown={() => navigate("/")}
+                            onKeyUp={() => navigate("/")}>
+                            <img src={require("../../assets/InjiWebLogo.png")}
+                                className={`h-13 w-28 scale-150 cursor-pointer ${isRTL(language)  ? 'mr-4' : ''}`}
+                                data-testid="Header-InjiWeb-Logo"
                              alt="Inji Web Logo"/>
                     </div>
                 </div>

diff --git a/inji-web/src/modals/ModalWrapper.tsx b/inji-web/src/modals/ModalWrapper.tsx
@@ -5,7 +5,7 @@ export const ModalWrapper:React.FC<ModalWrapperProps> = (props) => {
 
     return <>
         <div data-testid={"ModalWrapper-Outer-Container"} className={`justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 ${props.zIndex == 50 ? 'z-50': 'z-40'} outline-none focus:outline-none`}>
-            <div className={`relative w-auto my-6 mx-auto ${props.size === '3xl' ? 'max-w-3xl' : 'max-w-sm'}`}>
+            <div className={`relative w-auto my-6 mx-auto sm:mx-5 ${props.size === '3xl' ? 'max-w-3xl' : 'max-w-sm'}`}>
                 <div data-testid={"ModalWrapper-Inner-Container"} className="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-iw-background outline-none focus:outline-none">
                     {props.header}
                     {props.content}

diff --git a/inji-web/src/pages/HelpPage.tsx b/inji-web/src/pages/HelpPage.tsx
@@ -5,7 +5,7 @@ import {useTranslation} from "react-i18next";
 
 export const HelpPage: React.FC = () => {
     const {t} = useTranslation("HelpPage")
-    return <div className={"bg-iw-background pb-20"} data-testid="Help-Page-Container">
+    return <div className={"bg-iw-background pb-28"} data-testid="Help-Page-Container">
             <NavBar title={t("title")} search={false} link={"/"}/>
             <div className="container mx-auto mt-8 px-10 sm:px-0 ">
                 <HelpAccordion/>