From 409385273471c435edc1470d92b2e9c458c81866 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fede=20=C3=81lvarez?= <fedealvarezcampos@gmail.com>
Date: Thu, 30 Jun 2022 18:23:14 +0200
Subject: [PATCH] Connect Partners mobile graphics CMS

---
 .../sections/partners/opportunities/index.tsx | 74 ++++++++++++++++---
 .../opportunities/opportunities.module.scss   |  2 -
 src/lib/cms/queries/partners.js               | 15 ++++
 3 files changed, 79 insertions(+), 12 deletions(-)

diff --git a/src/components/sections/partners/opportunities/index.tsx b/src/components/sections/partners/opportunities/index.tsx
index e1bd404..981da1f 100644
--- a/src/components/sections/partners/opportunities/index.tsx
+++ b/src/components/sections/partners/opportunities/index.tsx
@@ -1,3 +1,6 @@
+import { useTheme } from 'next-themes'
+import { useEffect, useState } from 'react'
+
 import { Container } from '~/components/layout/container'
 import Section from '~/components/layout/section'
 import Heading from '~/components/primitives/heading'
@@ -40,29 +43,80 @@ interface Props {
     oportunitiesImage01: {
       url: string
     }
+    oportunitiesImage01Light: {
+      url: string
+    }
     oportunitiesImage02: {
       url: string
     }
+    oportunitiesImage02Light: {
+      url: string
+    }
     oportunitiesImage03: {
       url: string
     }
+    oportunitiesImage03Light: {
+      url: string
+    }
     oportunitiesImage04: {
       url: string
     }
+    oportunitiesImage04Light: {
+      url: string
+    }
     oportunitiesImage05: {
       url: string
     }
+    oportunitiesImage05Light: {
+      url: string
+    }
   }
 }
 
 const Opportunities = ({ data }: Props) => {
+  const { theme } = useTheme()
+
+  const [oportunity01Image, setOportunity01Image] = useState('')
+  const [oportunity02Image, setOportunity02Image] = useState('')
+  const [oportunity03Image, setOportunity03Image] = useState('')
+  const [oportunity04Image, setOportunity04Image] = useState('')
+  const [oportunity05Image, setOportunity05Image] = useState('')
+
+  useEffect(() => {
+    setOportunity01Image(
+      theme === 'dark'
+        ? data?.oportunitiesImage01?.url
+        : data?.oportunitiesImage01Light?.url
+    )
+    setOportunity02Image(
+      theme === 'dark'
+        ? data?.oportunitiesImage02?.url
+        : data?.oportunitiesImage02Light?.url
+    )
+    setOportunity03Image(
+      theme === 'dark'
+        ? data?.oportunitiesImage03?.url
+        : data?.oportunitiesImage03Light?.url
+    )
+    setOportunity04Image(
+      theme === 'dark'
+        ? data?.oportunitiesImage04?.url
+        : data?.oportunitiesImage04Light?.url
+    )
+    setOportunity05Image(
+      theme === 'dark'
+        ? data?.oportunitiesImage05?.url
+        : data?.oportunitiesImage05Light?.url
+    )
+  }, [theme, data])
+
   return (
     <Section className={s['section']}>
       <Container className={s['container']}>
         <div className={s.block} id="validators">
           <img
             className={s.item_image}
-            src={data?.oportunitiesImage01?.url}
+            src={oportunity01Image}
             alt="validators"
           />
           <div>
@@ -72,7 +126,7 @@ const Opportunities = ({ data }: Props) => {
               </Heading>
               <img
                 className={s.item_image__mobile}
-                src={data?.oportunitiesImage01?.url}
+                src={oportunity01Image}
                 alt="validators"
               />
             </div>
@@ -93,7 +147,7 @@ const Opportunities = ({ data }: Props) => {
         <div className={s.block} id="providers">
           <img
             className={s.item_image}
-            src={data?.oportunitiesImage02?.url}
+            src={oportunity02Image}
             alt="validators"
           />
           <div>
@@ -103,7 +157,7 @@ const Opportunities = ({ data }: Props) => {
               </Heading>
               <img
                 className={s.item_image__mobile}
-                src={data?.oportunitiesImage02?.url}
+                src={oportunity02Image}
                 alt="validators"
               />
             </div>
@@ -124,7 +178,7 @@ const Opportunities = ({ data }: Props) => {
         <div className={s.block} id="developers">
           <img
             className={s.item_image}
-            src={data?.oportunitiesImage03?.url}
+            src={oportunity03Image}
             alt="validators"
           />
           <div>
@@ -134,7 +188,7 @@ const Opportunities = ({ data }: Props) => {
               </Heading>
               <img
                 className={s.item_image__mobile}
-                src={data?.oportunitiesImage03?.url}
+                src={oportunity03Image}
                 alt="validators"
               />
             </div>
@@ -155,7 +209,7 @@ const Opportunities = ({ data }: Props) => {
         <div className={s.block} id="investors">
           <img
             className={s.item_image}
-            src={data?.oportunitiesImage04?.url}
+            src={oportunity04Image}
             alt="validators"
           />
           <div>
@@ -165,7 +219,7 @@ const Opportunities = ({ data }: Props) => {
               </Heading>{' '}
               <img
                 className={s.item_image__mobile}
-                src={data?.oportunitiesImage04?.url}
+                src={oportunity04Image}
                 alt="validators"
               />
             </div>
@@ -186,7 +240,7 @@ const Opportunities = ({ data }: Props) => {
         <div className={s.block} id="testnet">
           <img
             className={s.item_image}
-            src={data?.oportunitiesImage05?.url}
+            src={oportunity05Image}
             alt="validators"
           />
           <div>
@@ -196,7 +250,7 @@ const Opportunities = ({ data }: Props) => {
               </Heading>
               <img
                 className={s.item_image__mobile}
-                src={data?.oportunitiesImage05?.url}
+                src={oportunity05Image}
                 alt="validators"
               />
             </div>
diff --git a/src/components/sections/partners/opportunities/opportunities.module.scss b/src/components/sections/partners/opportunities/opportunities.module.scss
index 8cc2ffa..e460abd 100644
--- a/src/components/sections/partners/opportunities/opportunities.module.scss
+++ b/src/components/sections/partners/opportunities/opportunities.module.scss
@@ -170,11 +170,9 @@
 [data-theme='light'] {
   .container .block {
     .item_image {
-      filter: invert(100%) saturate(50%) hue-rotate(180deg);
       mix-blend-mode: darken !important;
 
       &__mobile {
-        filter: invert(100%) saturate(50%) hue-rotate(180deg);
         mix-blend-mode: darken !important;
       }
     }
diff --git a/src/lib/cms/queries/partners.js b/src/lib/cms/queries/partners.js
index 40a611f..088fafe 100644
--- a/src/lib/cms/queries/partners.js
+++ b/src/lib/cms/queries/partners.js
@@ -31,18 +31,33 @@ const PartnersOportunities = {
                     oportunitiesImage01 {
                         url
                     }
+                    oportunitiesImage01Light {
+                        url
+                    }
                     oportunitiesImage02 {
                         url
                     }
+                    oportunitiesImage02Light {
+                        url
+                    }
                     oportunitiesImage03 {
                         url
                     }
+                    oportunitiesImage03Light {
+                        url
+                    }
                     oportunitiesImage04 {
                         url
                     }
+                    oportunitiesImage04Light {
+                        url
+                    }
                     oportunitiesImage05 {
                         url
                     }
+                    oportunitiesImage05Light {
+                        url
+                    }
                 }
             }`
 }