From ed02195893ecde8bd37bd93053eb39143145f1d1 Mon Sep 17 00:00:00 2001
From: Sebastian <sebastian.scatularo@xlabs.xyz>
Date: Mon, 18 Dec 2023 13:46:25 -0300
Subject: [PATCH] fix build (#613)

---
 apps/connect/src/components/atoms/Bar.tsx     |  2 +-
 apps/connect/src/components/atoms/NewsBar.tsx |  6 ++++--
 .../src/components/atoms/NewsBarButton.tsx    | 20 ++++++++++---------
 apps/connect/src/hooks/useBannerMessage.ts    |  2 +-
 4 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/apps/connect/src/components/atoms/Bar.tsx b/apps/connect/src/components/atoms/Bar.tsx
index 7e7135a29..34678f193 100644
--- a/apps/connect/src/components/atoms/Bar.tsx
+++ b/apps/connect/src/components/atoms/Bar.tsx
@@ -2,7 +2,7 @@ import styled from "@mui/material/styles/styled";
 
 export type BarProps = {
   background: string;
-  children: JSX.Element[] | null;
+  children: JSX.Element | JSX.Element[] | null;
 };
 
 const Container = styled("div")<Pick<BarProps, "background">>(
diff --git a/apps/connect/src/components/atoms/NewsBar.tsx b/apps/connect/src/components/atoms/NewsBar.tsx
index b16e8d77a..5db9204d3 100644
--- a/apps/connect/src/components/atoms/NewsBar.tsx
+++ b/apps/connect/src/components/atoms/NewsBar.tsx
@@ -13,8 +13,10 @@ export default function NewsBar({ messages }: NewsBarProps) {
   return (
     message && (
       <Bar background={message.background}>
-        {message.content}
-        {message.button && <NewBarButton button={message.button} />}
+        <>
+          {message.content}
+          {message.button ? <NewBarButton button={message.button} /> : null}
+        </>
       </Bar>
     )
   );
diff --git a/apps/connect/src/components/atoms/NewsBarButton.tsx b/apps/connect/src/components/atoms/NewsBarButton.tsx
index 29049b858..4f71142de 100644
--- a/apps/connect/src/components/atoms/NewsBarButton.tsx
+++ b/apps/connect/src/components/atoms/NewsBarButton.tsx
@@ -26,14 +26,16 @@ const Link = styled(MuiLink)<{ backgroundColor: string }>(
 );
 export default function NewsBarButton({ button }: Pick<Message, "button">) {
   return (
-    <Link
-      href={button.href}
-      target="_blank"
-      rel="noopener noreferrer"
-      color="inherit"
-      backgroundColor={button.background}
-    >
-      {button.label || "TRY IT NOW"}
-    </Link>
+    button && (
+      <Link
+        href={button.href}
+        target="_blank"
+        rel="noopener noreferrer"
+        color="inherit"
+        backgroundColor={button.background}
+      >
+        {button.label || "TRY IT NOW"}
+      </Link>
+    )
   );
 }
diff --git a/apps/connect/src/hooks/useBannerMessage.ts b/apps/connect/src/hooks/useBannerMessage.ts
index a27ed3f14..c9b452029 100644
--- a/apps/connect/src/hooks/useBannerMessage.ts
+++ b/apps/connect/src/hooks/useBannerMessage.ts
@@ -2,7 +2,7 @@ import { useState, useEffect } from "react";
 
 export type Message = {
   background: string;
-  button: {
+  button?: {
     href: string;
     label?: string;
     background: string;