fix: PR Comments

src/components/MarketingBanner/MarketingBanner.styled.ts

@@ -28,22 +28,26 @@ const BannerContainer = styled(Box, {
 })<{
   mobileBackground: string
   fullSizeBackground: string
-}>(({ mobileBackground, fullSizeBackground }) => ({
-  width: "100%",
-  overflow: "hidden",
-  display: "flex",
-  padding: "2rem",
-  flexDirection: "column-reverse",
-  justifyContent: "space-between",
-  backgroundImage: `url(${mobileBackground})`,
-  backgroundSize: "cover",
-  backgroundPosition: "center",
-  alignItems: "center",
-  "@media (min-width: 768px)": {
+}>((props) => {
+  const { theme, mobileBackground, fullSizeBackground } = props
+
+  return {
+    width: "100%",
+    overflow: "hidden",
+    display: "flex",
+    padding: "2rem",
+    justifyContent: "space-between",
     flexDirection: "row",
     backgroundImage: `url(${fullSizeBackground})`,
-  },
-}))
+    backgroundSize: "cover",
+    backgroundPosition: "center",
+    alignItems: "center",
+    [theme.breakpoints.down("sm")]: {
+      backgroundImage: `url(${mobileBackground})`,
+      flexDirection: "column-reverse",
+    },
+  }
+})
 
 const ContentWrapper = styled(Box)({
   display: "flex",
@@ -52,22 +56,30 @@ const ContentWrapper = styled(Box)({
   marginRight: "20px",
 })
 
-const Content = styled(Box)({
-  display: "flex",
-  flexDirection: "column",
-  gap: "0.1rem",
-  "@media (max-width: 767px)": {
-    padding: "1rem",
-  },
+const Content = styled(Box)((props) => {
+  const { theme } = props
+
+  return {
+    display: "flex",
+    flexDirection: "column",
+    gap: "0.1rem",
+    [theme.breakpoints.down("sm")]: {
+      padding: "1rem",
+    },
+  }
 })
 
-const Logo = styled("img")({
-  flexShrink: 0,
-  maxWidth: "400px",
-  "@media (max-width: 767px)": {
-    maxWidth: "300px",
-    marginBottom: "1rem",
-  },
+const Logo = styled("img")((props) => {
+  const { theme } = props
+
+  return {
+    flexShrink: 0,
+    maxWidth: "400px",
+    [theme.breakpoints.down("sm")]: {
+      maxWidth: "300px",
+      marginBottom: "1rem",
+    },
+  }
 })
 
 const Title = styled(Typography, {
@@ -76,53 +88,65 @@ const Title = styled(Typography, {
 })<{
   mobileTitleAlignment?: Property.TextAlign
   desktopTitleAlignment?: Property.TextAlign
-}>(({ mobileTitleAlignment, desktopTitleAlignment }) => ({
-  margin: 0,
-  color: "#fff",
-  textAlign: desktopTitleAlignment || "left",
-  fontSize: "28px",
-  textTransform: "uppercase",
-  fontWeight: 800,
-  "@media (max-width: 767px)": {
-    textAlign: mobileTitleAlignment || "left",
-    fontSize: "24px",
-  },
-}))
+}>((props) => {
+  const { theme, mobileTitleAlignment, desktopTitleAlignment } = props
+
+  return {
+    margin: 0,
+    color: "#fff",
+    textAlign: desktopTitleAlignment || "left",
+    fontSize: "28px",
+    textTransform: "uppercase",
+    fontWeight: 800,
+    [theme.breakpoints.down("sm")]: {
+      textAlign: mobileTitleAlignment || "left",
+      fontSize: "24px",
+    },
+  }
+})
 
 const Text = styled(Box, {
   shouldForwardProp: (prop) =>
     prop !== "mobileTextAlignment" && prop !== "desktopTextAlignment",
 })<{
   mobileTextAlignment?: Property.TextAlign
   desktopTextAlignment?: Property.TextAlign
-}>(({ mobileTextAlignment, desktopTextAlignment }) => ({
-  color: "#fff",
-  textAlign: desktopTextAlignment || "left",
-  fontSize: "19px",
-  "& p": {
-    margin: 0,
-    padding: 0,
-  },
-  "@media (max-width: 767px)": {
-    textAlign: mobileTextAlignment || "left",
-    fontSize: "16px",
-  },
-}))
+}>((props) => {
+  const { theme, mobileTextAlignment, desktopTextAlignment } = props
+
+  return {
+    color: "#fff",
+    textAlign: desktopTextAlignment || "left",
+    fontSize: "19px",
+    "& p": {
+      margin: 0,
+      padding: 0,
+    },
+    [theme.breakpoints.down("sm")]: {
+      textAlign: mobileTextAlignment || "left",
+      fontSize: "16px",
+    },
+  }
+})
 
 const ButtonContainer = styled(Box, {
   shouldForwardProp: (prop) =>
     prop !== "mobileAlignment" && prop !== "desktopAlignment",
 })<{
   mobileAlignment?: Property.TextAlign
   desktopAlignment?: Property.TextAlign
-}>(({ mobileAlignment, desktopAlignment }) => ({
-  display: "flex",
-  marginTop: "1rem",
-  alignItems: convertAlignmentToFlex(desktopAlignment || "left"),
-  "@media (max-width: 767px)": {
-    alignItems: convertAlignmentToFlex(mobileAlignment || "left"),
-  },
-}))
+}>((props) => {
+  const { theme, mobileAlignment, desktopAlignment } = props
+
+  return {
+    display: "flex",
+    marginTop: "1rem",
+    alignItems: convertAlignmentToFlex(desktopAlignment || "left"),
+    [theme.breakpoints.down("sm")]: {
+      alignItems: convertAlignmentToFlex(mobileAlignment || "left"),
+    },
+  }
+})
 
 const Button = styled(MuiButton)({
   textTransform: "uppercase",

src/components/MarketingBanner/MarketingBanner.tsx

@@ -22,15 +22,20 @@ import {
   Title,
 } from "./MarketingBanner.styled"
 
-export const MarketingBanner: React.FC<MarketingBannerProps> = ({
-  id,
-  environment,
-  token,
-  space,
-  locale = Locales.enUS,
-}) => {
+const BANNER_CONTENT_TYPE = "banner"
+
+export const MarketingBanner: React.FC<MarketingBannerProps> = (
+  props: MarketingBannerProps
+) => {
+  const { id, environment, token, space, locale = Locales.enUS } = props
   const { fields, assets, isLoading, error } =
-    useGetContentfulEntry<IBannerFields>(id, environment, token, space)
+    useGetContentfulEntry<IBannerFields>(
+      id,
+      environment,
+      BANNER_CONTENT_TYPE,
+      token,
+      space
+    )
 
   if (isLoading) {
     return (

src/hooks/contenful/contentful.ts

@@ -25,6 +25,7 @@ const useGetContentfulEntry = <
 >(
   id: string,
   environment: string,
+  contentType: string,
   token: string,
   space: string
 ): {
@@ -45,7 +46,7 @@ const useGetContentfulEntry = <
           `https://cdn.contentful.com/spaces/${space}/environments/${environment}/entries/?` +
             new URLSearchParams({
               "sys.id": id,
-              content_type: "banner",
+              content_type: contentType,
               locale: "*",
             }),
           {