[INJIWEB-511]: inji web gradiend icons fix

Signed-off-by: Vijay <[email protected]>
mosip · Oct 30, 2024 · 29f2f22 · 29f2f22
1 parent 67967cc
commit 29f2f22
Show file tree

Hide file tree

Showing 9 changed files with 31 additions and 41 deletions.
diff --git a/docs/InjiWebSequence.md b/docs/InjiWebSequence.md
@@ -1,7 +1,7 @@
 # **Understanding the workflow**
 
 
-### **Inji Web HomePage**
+### **Inji Web IssuersPage**
 
 - The users navigate to the Inji Web portal from their web browser.
 - The portal features a user-friendly interface accessible to all.

diff --git a/inji-web-test/src/test/java/stepdefinitions/StepDefMosipCredentials.java b/inji-web-test/src/test/java/stepdefinitions/StepDefMosipCredentials.java
@@ -24,7 +24,7 @@ public class StepDefMosipCredentials {
     public WebDriver driver;
     BaseTest baseTest;
     private GlobelConstants globelConstants;
-    //    private HomePage homePage;
+    //    private IssuersPage homePage;
 //    private HelpPage helpPage;
     private MosipCredentials mosipCredentials;
     //    private SunbirdCredentials sunbirdCredentials;
@@ -107,4 +107,4 @@ public void user_VerifyDownloadingInProgressDisplaed() {
         Assert.assertTrue(mosipCredentials.isDownloadingDescriptionTextDisplayed());
     }
 
-}
+}
diff --git a/inji-web/src/assets/FeatureItem1.svg b/inji-web/src/assets/FeatureItem1.svg
diff --git a/inji-web/src/assets/Featured [email protected] b/inji-web/src/assets/Featured [email protected]
diff --git a/inji-web/src/assets/FeaturedItem.png b/inji-web/src/assets/FeaturedItem.png
diff --git a/inji-web/src/assets/FeaturedItem1.png b/inji-web/src/assets/FeaturedItem1.png
diff --git a/inji-web/src/components/Common/LanguageSelector.tsx b/inji-web/src/components/Common/LanguageSelector.tsx
@@ -6,6 +6,8 @@ import {storeLanguage} from "../../redux/reducers/commonReducer";
 import {RootState} from "../../types/redux";
 import {FaCheck} from "react-icons/fa6";
 import {RiArrowDownSFill, RiArrowUpSFill} from "react-icons/ri";
+import {GradientWrapper} from "./GradientWrapper";
+import {renderGradientText} from "../../utils/builder";
 
 export const LanguageSelector: React.FC = () => {
     const dispatch = useDispatch();
@@ -30,17 +32,25 @@ export const LanguageSelector: React.FC = () => {
                 onBlur={()=>setIsOpen(false)}
                 tabIndex={0}
                 role="button">
-        <VscGlobe
+        <GradientWrapper>
+            <VscGlobe
             data-testid="Language-Selector-Icon"
             size={30} color={'var(--iw-color-languageGlobeIcon)'}/>
+        </GradientWrapper>
         <div className="relative inline-block ms-1">
             <button
                 type="button"
                 className="inline-flex items-center"
                 data-testid={"Language-Selector-Button"}
                 onMouseDown={() => setIsOpen(open => !isOpen)}>
                 <p data-testid={`Language-Selector-Selected-DropDown-${language}`}>{LanguagesSupported.find(lang => lang.value === language)?.label}</p>
-                {isOpen ? <RiArrowUpSFill size={20} color={'var(--iw-color-languageArrowIcon)'} /> : <RiArrowDownSFill size={20} color={'var(--iw-color-languageArrowIcon)'}/> }
+                {isOpen ?
+                    <GradientWrapper>
+                        <RiArrowUpSFill size={20} color={'var(--iw-color-languageArrowIcon)'} />
+                    </GradientWrapper> :
+                    <GradientWrapper>
+                        <RiArrowDownSFill size={20} color={'var(--iw-color-languageArrowIcon)'}/>
+                    </GradientWrapper>}
             </button>
 
             {isOpen && (
@@ -55,7 +65,7 @@ export const LanguageSelector: React.FC = () => {
                                     type="button"
                                     className="w-full px-4 py-2 text-left text-sm hover:bg-gray-100 flex items-center justify-between flex-row"
                                     onMouseDown={(event) => {event.stopPropagation();handleChange(item)}}>
-                                    {item.label}
+                                    {language === item.value ? renderGradientText(item.label) : item.label}
                                     {language === item.value && <FaCheck color={'var(--iw-color-languageCheckIcon)'}/>}
                                 </button>
                             </li>

diff --git a/inji-web/src/components/PageTemplate/Footer.tsx b/inji-web/src/components/PageTemplate/Footer.tsx
@@ -6,10 +6,10 @@ export const Footer: React.FC = () => {
     const {t} = useTranslation("PageTemplate")
     return <footer
         data-testid="Footer-Container"
-        className="fixed bottom-0 left-0 right-0 py-4 text-center transform rotate-180 shadow-sm shadow-iw-shadow bg-iw-footer">
-        <div className="container mx-auto flex flex-col sm:flex-row justify-between items-center">
-            <p data-testid="Footer-Text" className="text-iw-subText transform rotate-180">{t("Footer.copyRight")}</p>
-            <div className={"flex flex-row items-center"}>
+        className="fixed bottom-0 left-0 right-0 py-4 transform rotate-180 shadow-sm shadow-iw-shadow bg-iw-footer">
+        <div className="container mx-auto flex flex-col sm:flex-row justify-between items-end sm:items-center">
+            <p data-testid="Footer-Text" className="ps-7 text-iw-subText transform rotate-180">{t("Footer.copyRight")}</p>
+            <div className={"flex flex-row items-center me-4"}>
                 <p data-testid="Footer-Text" className="text-black transform rotate-180 font-bold">{t("Footer.product")}</p>
                 <img className={"w-10 h-10 transform rotate-180 m-2"} src={"https://api.collab.mosip.net/inji/mosip-logo.png"} alt={"a square mosip logo"} />
             </div>

diff --git a/inji-web/src/components/PageTemplate/Header.tsx b/inji-web/src/components/PageTemplate/Header.tsx
@@ -18,7 +18,7 @@ export const Header: React.FC = () => {
                 className="fixed top-0 left-0 right-0 bg-iw-background py-7 ">
             <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={"sm:hidden"} onMouseDown={() => setIsOpen(open => !open)} onKeyUp={() => setIsOpen(open => !open)}>
+                    <div  role="button" tabIndex={0} className={"m-2 sm:hidden"} onMouseDown={() => setIsOpen(open => !open)} onKeyUp={() => setIsOpen(open => !open)}>
                         <GiHamburgerMenu size={32}/>
                     </div>
                     <div role={"button"}
@@ -55,14 +55,6 @@ export const Header: React.FC = () => {
                          tabIndex={0}
                          onMouseDown={() => setIsOpen(false)}
                          onBlur={() => setIsOpen(false)}>
-                        <div data-testid="Header-Menu-AboutInji"
-                             className={"py-5 w-full"}
-                             role="button"
-                             tabIndex={0}
-                             onKeyUp={() => {window.open("https://docs.mosip.io/inji/inji-web/overview", "_blank","noopener");setIsOpen(false)}}
-                             onMouseDown={() => {window.open("https://docs.mosip.io/inji/inji-web/overview", "_blank","noopener");setIsOpen(false)}}>
-                            {t("Header.aboutInji")}
-                        </div>
                         <div data-testid="Header-Menu-Help"
                              role="button"
                              tabIndex={0}