From c06a1d57445d32f8faa53c6cefefe0e0c0b8821c Mon Sep 17 00:00:00 2001
From: LautaroPetaccio <lausuper@gmail.com>
Date: Wed, 15 Jan 2025 14:36:46 -0300
Subject: [PATCH] fix: Styling

---
 src/components/Banner/Banner.styled.ts        |  3 +-
 src/components/Banner/Banner.tsx              | 52 +++++++++----------
 .../MarketingBanner.stories.tsx               |  2 +-
 src/hooks/contentful/contentful.types.ts      |  6 +--
 4 files changed, 31 insertions(+), 32 deletions(-)

diff --git a/src/components/Banner/Banner.styled.ts b/src/components/Banner/Banner.styled.ts
index 660d628..965766b 100644
--- a/src/components/Banner/Banner.styled.ts
+++ b/src/components/Banner/Banner.styled.ts
@@ -9,8 +9,7 @@ const LoadingContainer = styled(Box)({
 })
 
 const BannerContainer = styled(Box, {
-  shouldForwardProp: (prop) =>
-    prop !== "background"
+  shouldForwardProp: (prop) => prop !== "background",
 })<{
   background: string
 }>((props) => {
diff --git a/src/components/Banner/Banner.tsx b/src/components/Banner/Banner.tsx
index 4b30340..e3aa1fc 100644
--- a/src/components/Banner/Banner.tsx
+++ b/src/components/Banner/Banner.tsx
@@ -1,7 +1,7 @@
 import { documentToReactComponents } from "@contentful/rich-text-react-renderer"
 import CircularProgress from "@mui/material/CircularProgress"
-import type { Property } from "csstype"
 import { Locales, getAssetUrl } from "../../hooks/contentful"
+import { useTabletAndBelowMediaQuery } from "../Media"
 import { BannerProps, LowercasedAlignment } from "./Banner.types"
 import {
   BannerContainer,
@@ -13,7 +13,7 @@ import {
   Text,
   Title,
 } from "./Banner.styled"
-import { useTabletAndBelowMediaQuery } from "../Media"
+import type { Property } from "csstype"
 
 const convertAlignmentToFlex = (alignment: Property.TextAlign) => {
   switch (alignment) {
@@ -49,48 +49,48 @@ export const Banner: React.FC<BannerProps> = (props: BannerProps) => {
   const bannerBackgroundImage = getAssetUrl(
     assets,
     Locales.enUS,
-    isMobileOrTablet ? fields.mobileBackground[Locales.enUS] : fields.fullSizeBackground[Locales.enUS]
+    isMobileOrTablet
+      ? fields.mobileBackground[Locales.enUS]
+      : fields.fullSizeBackground[Locales.enUS]
   )
   const title = isMobileOrTablet
     ? fields.mobileTitle[locale]
     : fields.desktopTitle[locale]
-  const titleAlignment = (isMobileOrTablet 
-    ? fields.mobileTitleAlignment[Locales.enUS]
-    : fields.desktopTitleAlignment[Locales.enUS])?.toLowerCase() as LowercasedAlignment
+  const titleAlignment = (
+    isMobileOrTablet
+      ? fields.mobileTitleAlignment[Locales.enUS]
+      : fields.desktopTitleAlignment[Locales.enUS]
+  )?.toLowerCase() as LowercasedAlignment
   const text = isMobileOrTablet
     ? fields.mobileText[locale]
     : fields.desktopText[locale]
-  const textAlignment = (isMobileOrTablet
-    ? fields.mobileTextAlignment[Locales.enUS]
-    : fields.desktopTextAlignment[Locales.enUS])?.toLowerCase() as LowercasedAlignment
-  const buttonAlignment = convertAlignmentToFlex((isMobileOrTablet
-    ? fields.mobileButtonAlignment[Locales.enUS]
-    : fields.desktopButtonAlignment[Locales.enUS])?.toLowerCase() as LowercasedAlignment)
+  const textAlignment = (
+    isMobileOrTablet
+      ? fields.mobileTextAlignment[Locales.enUS]
+      : fields.desktopTextAlignment[Locales.enUS]
+  )?.toLowerCase() as LowercasedAlignment
+  const buttonAlignment = convertAlignmentToFlex(
+    (isMobileOrTablet
+      ? fields.mobileButtonAlignment[Locales.enUS]
+      : fields.desktopButtonAlignment[Locales.enUS]
+    )?.toLowerCase() as LowercasedAlignment
+  )
 
   return (
-    <BannerContainer
-      background={bannerBackgroundImage}
-    >
+    <BannerContainer background={bannerBackgroundImage}>
       <Content>
-        <Title
-          variant="h1"
-          textAlign={titleAlignment}
-        >
-            {title}
+        <Title variant="h1" textAlign={titleAlignment}>
+          {title}
         </Title>
 
-        <Text
-        textAlign={textAlignment}
-        >
+        <Text textAlign={textAlignment}>
           {text ? documentToReactComponents(text) : null}
         </Text>
 
         {fields.showButton[Locales.enUS] &&
         fields.buttonLink?.[Locales.enUS] &&
         fields.buttonsText?.[locale] ? (
-          <ButtonContainer
-            justifyContent={buttonAlignment}
-          >
+          <ButtonContainer justifyContent={buttonAlignment}>
             <Button
               href={fields.buttonLink[Locales.enUS]}
               variant="contained"
diff --git a/src/components/MarketingBanner/MarketingBanner.stories.tsx b/src/components/MarketingBanner/MarketingBanner.stories.tsx
index aa57963..6784d39 100644
--- a/src/components/MarketingBanner/MarketingBanner.stories.tsx
+++ b/src/components/MarketingBanner/MarketingBanner.stories.tsx
@@ -1,6 +1,6 @@
-import type { Meta, StoryObj } from "@storybook/react"
 import { MarketingBanner } from "./MarketingBanner"
 import { Locales } from "../../hooks/contentful"
+import type { Meta, StoryObj } from "@storybook/react"
 
 const meta = {
   title: "Decentraland UI/MarketingBanner",
diff --git a/src/hooks/contentful/contentful.types.ts b/src/hooks/contentful/contentful.types.ts
index b3e2287..7fb17c8 100644
--- a/src/hooks/contentful/contentful.types.ts
+++ b/src/hooks/contentful/contentful.types.ts
@@ -7,9 +7,9 @@ enum ContentfulLocale {
 }
 
 type LocalizedField<T> = {
-  [ContentfulLocale.enUS]: T;
-  [ContentfulLocale.es]?: T;
-  [ContentfulLocale.zh]?: T;
+  [ContentfulLocale.enUS]: T
+  [ContentfulLocale.es]?: T
+  [ContentfulLocale.zh]?: T
 }
 
 type SysAssetLink = {