Merge pull request #7573 from Junnygram/fix-7572-footer-images-dark-mode

fix(#7572): make mascot images visible in dark theme using filters

Author: saurabhraghuvanshii

src/sections/Company/Brand/Brand-components/stickfigures.js

@@ -64,7 +64,7 @@ const StickFigures = () => {
         </Col>
         <Row $Vcenter className="fiveDiv" style={{ minWidth: "200px" }}>
           <Col $xs={12}>
-            <img src={SFL} alt="Layer5 Mascot, Five" />
+            <img src={SFL} alt="Layer5 Mascot, Five" className="five-image" />
           </Col>
         </Row>
         <Row $Vcenter className="fiveDiv" style={{ minWidth: "200px" }}>
@@ -74,15 +74,15 @@ const StickFigures = () => {
         </Row>
         <Row $Vcenter className="fiveDiv">
           <Col $xs={12} $sm={6}>
-            <img src={teamOfFives} alt="Layer5 Mascot, Five" />
+            <img src={teamOfFives} alt="Layer5 Mascot, Five" className="five-image" />
             {/* <img src={f1} alt="Layer5 Mascot, Five" />
             <img src={f2} alt="Layer5 Mascot, Five" />
             <img src={f3} alt="Layer5 Mascot, Five" />
             <img src={f4} alt="Layer5 Mascot, Five" />
             <img src={f5} alt="Layer5 Mascot, Five" /> */}
           </Col>
           <Col $xs={12} $sm={6}>
-            <img src={resourcesSign} alt="Layer5 Mascot, Five" />
+            <img src={resourcesSign} alt="Layer5 Mascot, Five" className="five-image" />
             {/* <img src={f13} alt="Layer5 Mascot, Five" />
             <img src={f14} alt="Layer5 Mascot, Five" />
             <img src={f15} alt="Layer5 Mascot, Five" />

src/sections/Company/Brand/brandPage.style.js

@@ -195,10 +195,8 @@ const BrandPageWrapper = styled.section`
 			justify-content: space-around;
 			gap: 1rem;
 		}
-		.fiveDiv > img {
-			max-width: 150px;
-			background-color: "#fff";
-			align-self: center;
+		.five-image {
+			filter: ${props => props.theme.DarkTheme ? "invert(1) hue-rotate(180deg)" : "none"};
 		}
 		img.Layer5Icon {
 			width: auto;