From 48de42b59916071b8dfd6272db856f801534b54f Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Fri, 18 Oct 2024 13:25:41 +0300
Subject: [PATCH] Remove usestyles

---
 .../src/components/Footer/index.js            | 44 ++++++++----
 .../src/components/Footer/useStyles.js        | 71 -------------------
 2 files changed, 29 insertions(+), 86 deletions(-)

diff --git a/apps/climatemappedafrica/src/components/Footer/index.js b/apps/climatemappedafrica/src/components/Footer/index.js
index 11e564b13..57e721b1f 100644
--- a/apps/climatemappedafrica/src/components/Footer/index.js
+++ b/apps/climatemappedafrica/src/components/Footer/index.js
@@ -1,4 +1,4 @@
-import { QuickLinks, LogoButton, Copyright } from "@commons-ui/core";
+import { QuickLinks, Copyright } from "@commons-ui/core";
 import { Link, StayInTouch } from "@commons-ui/next";
 import { RichText } from "@commons-ui/payload";
 import { Box, Grid } from "@mui/material";
@@ -6,6 +6,7 @@ import React from "react";
 
 import useStyles from "./useStyles";
 
+import NextImageButton from "@/climatemappedafrica/components/NextImageButton";
 import Section from "@/climatemappedafrica/components/Section";
 
 function Footer(props) {
@@ -35,20 +36,22 @@ function Footer(props) {
         },
       })}
     >
-      <Section
-        classes={{
-          root: classes.section,
-        }}
-      >
+      <Section>
         <Grid container direction="row" justifyContent="space-between">
           <Grid item xs={12} container>
             {logoProps && (
-              <LogoButton
+              <NextImageButton
                 {...logoProps}
-                component="a"
-                classes={{
-                  root: classes.logoButton,
-                }}
+                width={220}
+                height={120}
+                priority
+                sx={(theme) => ({
+                  margin: "0 auto",
+                  padding: 0,
+                  [theme.breakpoints.up("lg")]: {
+                    margin: 0,
+                  },
+                })}
               />
             )}
           </Grid>
@@ -56,7 +59,15 @@ function Footer(props) {
             {description && (
               <RichText
                 variant="body1"
-                className={classes.description}
+                sx={(theme) => ({
+                  color: theme.palette.text.secondary,
+                  padding: `${theme.typography.pxToRem(32)} 0`,
+                  fontSize: theme.typography.subtitle1.fontSize,
+                  textAlign: "center",
+                  [theme.breakpoints.up("lg")]: {
+                    textAlign: "left",
+                  },
+                })}
                 elements={description}
                 typographyProps={{
                   LinkProps: {
@@ -80,9 +91,12 @@ function Footer(props) {
           <Grid item xs={12} lg={4}>
             <Grid
               container
-              classes={{
-                root: classes.allLinks,
-              }}
+              sx={(theme) => ({
+                margin: "0 auto",
+                flexDirection: "row",
+                justifyContent: "center",
+                marginTop: theme.typography.pxToRem(44.19),
+              })}
             >
               <Grid item xs={12} lg={6}>
                 {links && (
diff --git a/apps/climatemappedafrica/src/components/Footer/useStyles.js b/apps/climatemappedafrica/src/components/Footer/useStyles.js
index 603fb2cc9..3eb03a86b 100644
--- a/apps/climatemappedafrica/src/components/Footer/useStyles.js
+++ b/apps/climatemappedafrica/src/components/Footer/useStyles.js
@@ -1,68 +1,6 @@
 import makeStyles from "@mui/styles/makeStyles";
 
 const useStyles = makeStyles(({ breakpoints, palette, typography }) => ({
-  root: {
-    background: palette.grey.dark,
-    height: "auto",
-    padding: `${typography.pxToRem(80)} 0`,
-    [breakpoints.up("md")]: {
-      paddingTop: `${typography.pxToRem(58)}`,
-      paddingBottom: `${typography.pxToRem(82)}`,
-    },
-  },
-  section: {},
-  logoButton: {
-    margin: "0 auto",
-    padding: 0,
-    [breakpoints.up("lg")]: {
-      margin: 0,
-    },
-  },
-  allLinks: {
-    margin: "0 auto",
-    flexDirection: "row",
-    justifyContent: "center",
-    marginTop: typography.pxToRem(44.19),
-  },
-  stayInTouch: {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    letterspacing: typography.pxToRem(0.7),
-    [breakpoints.up("lg")]: {
-      alignItems: "flex-start",
-    },
-  },
-  stayInTouchIcon: {
-    height: "auto",
-    objectFit: "none",
-    display: "flex",
-    width: "auto",
-  },
-  stayInTouchText: {
-    color: palette.text.secondary,
-    fontSize: typography.subtitle2.fontSize,
-    fontWeight: "bold",
-    padding: `${typography.pxToRem(10)} ${typography.pxToRem(8)}`,
-    [breakpoints.up("lg")]: {
-      padding: 0,
-    },
-  },
-  stayInTouchLink: {
-    padding: 0,
-  },
-  stayInTouchLinks: {
-    justifyContent: "center",
-    marginLeft: typography.pxToRem(-14), // (48 - 20) / 2
-    marginTop: typography.pxToRem(24),
-    "& > a": {
-      height: typography.pxToRem(48),
-      width: typography.pxToRem(48),
-      borderRight: "none",
-      display: "flex",
-      justifyContent: "center",
-    },
-  },
   quickLinkRoot: {
     textAlign: "center",
     padding: `${typography.pxToRem(32)} 0 `,
@@ -93,15 +31,6 @@ const useStyles = makeStyles(({ breakpoints, palette, typography }) => ({
     fontSize: typography.subtitle2.fontSize,
     fontWeight: "bold",
   },
-  description: {
-    color: palette.text.secondary,
-    padding: `${typography.pxToRem(32)} 0`,
-    fontSize: typography.subtitle1.fontSize,
-    textAlign: "center",
-    [breakpoints.up("lg")]: {
-      textAlign: "left",
-    },
-  },
   copyright: {
     margin: 0,
     display: "flex",