From 16e78a0c0b06db1008d00531b8e73bdef76850ba Mon Sep 17 00:00:00 2001
From: benjacanas <benjamin.canas@bitlogic.io>
Date: Wed, 20 Apr 2022 09:24:45 -0300
Subject: [PATCH 1/2] expandedgrid scroll y background

---
 .../Footer/ContactData/contactData.scss       |  3 +-
 src/components/expandGrid/ExpandGrid.js       | 46 ++++++++++++++-----
 src/components/expandGrid/expandGrid.scss     |  8 +++-
 3 files changed, 42 insertions(+), 15 deletions(-)

diff --git a/src/components/Footer/ContactData/contactData.scss b/src/components/Footer/ContactData/contactData.scss
index 02f03adb..5dd2eb18 100644
--- a/src/components/Footer/ContactData/contactData.scss
+++ b/src/components/Footer/ContactData/contactData.scss
@@ -16,9 +16,8 @@
   }
   &__link {
     a {
-      color: $primary;
       font-weight: 600;
-      text-decoration: underline $primary;
+      text-decoration: underline;
       font-size: 18px;
     }
   }
diff --git a/src/components/expandGrid/ExpandGrid.js b/src/components/expandGrid/ExpandGrid.js
index 2ac12e3b..502d2938 100644
--- a/src/components/expandGrid/ExpandGrid.js
+++ b/src/components/expandGrid/ExpandGrid.js
@@ -1,28 +1,47 @@
 import { Link } from "gatsby"
-import React, { useEffect, useState } from "react"
+import React, { useEffect, useRef, useState } from "react"
 import { Flipper, Flipped } from "react-flip-toolkit"
 import MarkdownView from "react-showdown"
+import { useTheme } from "../../context/themeContext"
 import "./expandGrid.scss"
 
 const ExpandGrid = ({ data }) => {
+  const { theme } = useTheme()
+
+  const backgroundImage = data.backgroundImage?.url
+  const backgroundImageDark = data.backgroundImageDark?.url
+
   return (
     <div
-      className="p-3 mx-auto sm:mx-3 py-5 container"
-      id={data.strapi_component + "-" + data.id}
+      className="expandGrid-background"
+      style={{
+        backgroundImage: `url(${
+          theme === "dark" && backgroundImageDark
+            ? "http://localhost:1337" + backgroundImageDark
+            : "http://localhost:1337" + backgroundImage
+        })`,
+      }}
     >
-      <section className="expandGrid">
-        <div className="expandGrid-body">
-          <h2>{data.title}</h2>
-          <h6 className="px-5">{data.subtitle}</h6>
-          <AnimatedList items={data.items.slice(0, 4)} />
-        </div>
-      </section>
+      <div
+        className="p-3 mx-auto sm:mx-3 py-5 container"
+        id={data.strapi_component + "-" + data.id}
+      >
+        <section className="expandGrid">
+          <div className="expandGrid-body">
+            <h2>{data.title}</h2>
+            <h6 className="px-5">{data.subtitle}</h6>
+            <AnimatedList items={data.items.slice(0, 4)} />
+          </div>
+        </section>
+      </div>
     </div>
   )
 }
 
 const createCardFlipId = index => `listItem-${index}`
 
+const scrollToRef = ref => window.scrollTo(0, ref.current.offsetTop - 40)
+
 const shouldFlip = index => (prev, current) =>
   index === prev || index === current
 
@@ -54,18 +73,20 @@ const ListItem = ({ index, onClick, data }) => {
   )
 }
 
-const ExpandedListItem = ({ index, data, isFirst }) => {
+const ExpandedListItem = ({ index, data, isFirst, scrollToRef }) => {
+  const scrollRef = useRef(null)
   return (
     <Flipped
       flipId={createCardFlipId(index)}
       stagger="card"
       onStart={el => {
+        if (!isFirst) scrollToRef(scrollRef)
         setTimeout(() => {
           el.classList.add("animated-in")
         }, 400)
       }}
     >
-      <div className="listItem-expanded">
+      <div ref={scrollRef} className="listItem-expanded">
         <Flipped inverseFlipId={createCardFlipId(index)}>
           <div className="listItemContent-expanded">
             <div className="listItem-more-expanded">
@@ -141,6 +162,7 @@ const AnimatedList = ({ items }) => {
                   isFirst={isFirst}
                   index={itemsArray.focused}
                   data={item}
+                  scrollToRef={scrollToRef}
                 />
               ) : (
                 <ListItem
diff --git a/src/components/expandGrid/expandGrid.scss b/src/components/expandGrid/expandGrid.scss
index 6011d3be..662c1abf 100644
--- a/src/components/expandGrid/expandGrid.scss
+++ b/src/components/expandGrid/expandGrid.scss
@@ -1,10 +1,16 @@
 @import ".././../styles/global.scss";
 
 .expandGrid {
+  
   color: $primary;
   display: flex;
   flex-direction: column;
   justify-content: center;
+  &-background{
+    background-size: cover;
+    background-repeat: no-repeat;
+    padding: 1em 0 0 0;
+  }
   h2 {
     flex-grow: 1;
     text-align: center;
@@ -40,7 +46,7 @@
   &-focus {
     flex: 0 1 calc(calc(100% / 3) - 10px);
   }
-  background-color: rgba(255, 255, 255, 0.158);
+  background-color: $primary-container;
   cursor: pointer;
 
   @media screen and (max-width: $breakpoint-xxl) {

From 4b05de5279a0746c61193197683c8d993a0083a3 Mon Sep 17 00:00:00 2001
From: benjacanas <benjamin.canas@bitlogic.io>
Date: Wed, 20 Apr 2022 11:21:22 -0300
Subject: [PATCH 2/2] code smell

---
 src/components/expandGrid/ExpandGrid.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/expandGrid/ExpandGrid.js b/src/components/expandGrid/ExpandGrid.js
index 502d2938..7a11e285 100644
--- a/src/components/expandGrid/ExpandGrid.js
+++ b/src/components/expandGrid/ExpandGrid.js
@@ -73,7 +73,7 @@ const ListItem = ({ index, onClick, data }) => {
   )
 }
 
-const ExpandedListItem = ({ index, data, isFirst, scrollToRef }) => {
+const ExpandedListItem = ({ index, data, isFirst }) => {
   const scrollRef = useRef(null)
   return (
     <Flipped