Merge pull request #181 from Infosys/injiweb-511-homepage-rebranding

[INJIWEB-511]: Add Gradient to Icon
mosip · Nov 4, 2024 · 2e1c808 · 2e1c808
2 parents 25b1635 + 7fefbb6
commit 2e1c808
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 18 deletions.
diff --git a/inji-web/src/assets/LinePattern.png b/inji-web/src/assets/LinePattern.png
diff --git a/inji-web/src/assets/Linepattern1.png b/inji-web/src/assets/Linepattern1.png
diff --git a/inji-web/src/assets/Linepattern2.png b/inji-web/src/assets/Linepattern2.png
diff --git a/inji-web/src/components/Common/GradientWrapper.tsx b/inji-web/src/components/Common/GradientWrapper.tsx
@@ -1,26 +1,29 @@
 import React from "react";
+import { generateRandomString } from "../../utils/misc";
 
-export const GradientWrapper:React.FC<BackGroundImageProps> = ({children}) => {
-
+export const GradientWrapper: React.FC<BackGroundImageProps> = ({children}) => {
+    const uniqueId = `blue-gradient-${
+        generateRandomString(7,'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789')
+    }`;
     const childrenWithProps = React.Children.map(children, (child) => {
         if (React.isValidElement(child)) {
             // @ts-ignore
-            return React.cloneElement(child, {style: { fill: 'url(#blue-gradient)'}});
+            return React.cloneElement(child, {style: { fill: `url(#${uniqueId})`,}});
         }
         return child;
     });
 
     return <React.Fragment>
         <svg width="0" height="0">
-            <linearGradient id="blue-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
-                <stop stopColor="var(--iw-color-primary)" offset="0%" />
-                <stop stopColor="var(--iw-color-secondary)" offset="100%" />
-            </linearGradient>
+                <linearGradient id={uniqueId} x1="0%" y1="0%" x2="100%" y2="100%">
+                    <stop stopColor="var(--iw-color-primary)" offset="0%" />
+                    <stop stopColor="var(--iw-color-secondary)" offset="100%" />
+                </linearGradient>
         </svg>
         {childrenWithProps}
     </React.Fragment>
-}
+};
 
 export type BackGroundImageProps = {
     children: React.ReactNode;
-}
+}
diff --git a/inji-web/src/components/Common/LanguageSelector.tsx b/inji-web/src/components/Common/LanguageSelector.tsx
@@ -6,9 +6,9 @@ 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";
-
+import { GradientWrapper } from "./GradientWrapper";
+
 export const LanguageSelector: React.FC = () => {
     const dispatch = useDispatch();
     let language = useSelector((state: RootState) => state.common.language);
@@ -32,11 +32,14 @@ export const LanguageSelector: React.FC = () => {
                 onBlur={()=>setIsOpen(false)}
                 tabIndex={0}
                 role="button">
+
         <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"
@@ -45,12 +48,16 @@ export const LanguageSelector: React.FC = () => {
                 onMouseDown={() => setIsOpen(open => !isOpen)}>
                 <p data-testid={`Language-Selector-Selected-DropDown-${language}`}>{LanguagesSupported.find(lang => lang.value === language)?.label}</p>
                 {isOpen ?
-                    <GradientWrapper>
+
+                   <GradientWrapper>
                         <RiArrowUpSFill size={20} color={'var(--iw-color-languageArrowIcon)'} />
-                    </GradientWrapper> :
+                    </GradientWrapper>
+                    :
                     <GradientWrapper>
                         <RiArrowDownSFill size={20} color={'var(--iw-color-languageArrowIcon)'}/>
-                    </GradientWrapper>}
+                    </GradientWrapper>
+
+                    }
             </button>
 
             {isOpen && (
@@ -66,7 +73,11 @@ export const LanguageSelector: React.FC = () => {
                                     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)}}>
                                     {language === item.value ? renderGradientText(item.label) : item.label}
-                                    {language === item.value && <GradientWrapper><FaCheck color={'var(--iw-color-languageCheckIcon)'}/></GradientWrapper>}
+                                    {language === item.value && 
+                                    <GradientWrapper>
+                                        <FaCheck color={'var(--iw-color-languageCheckIcon)'}/>
+                                    </GradientWrapper>
+                                    }
                                 </button>
                             </li>
                         ))}

diff --git a/inji-web/src/index.css b/inji-web/src/index.css
@@ -98,4 +98,4 @@
         background-position: top;
         opacity: 1;
     }
-}
+}
diff --git a/inji-web/src/utils/misc.ts b/inji-web/src/utils/misc.ts
@@ -14,8 +14,7 @@ export const generateCodeChallenge = (verifier = generateRandomString()) => {
     };
 }
 
-export const generateRandomString = (length = 43) => {
-    const charset = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-._~';
+export const generateRandomString = (length = 43, charset='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-._~') => {
     let randomString = '';
     for (let i = 0; i < 43; i++) {
         const array = new Uint32Array(1);
-Original file line number
+Diff line change
@@ Expand Up / @@ -98,4 +98,4 @@ @@
             background-position: top;
             opacity: 1;
         }
-    }
+    }