From 616d3a4f6235264d46033cf3c1f1c1850466b5a1 Mon Sep 17 00:00:00 2001
From: Clemence Kyara <clemence@codeforafrica.org>
Date: Sat, 22 Jun 2024 22:19:55 +0300
Subject: [PATCH] Clean up

---
 apps/roboshield/src/components/Hero/Hero.tsx    | 17 +++++++----------
 .../NewsletterSubscription.tsx                  |  6 +++++-
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/apps/roboshield/src/components/Hero/Hero.tsx b/apps/roboshield/src/components/Hero/Hero.tsx
index 4a4b7531a..0e5fb4374 100644
--- a/apps/roboshield/src/components/Hero/Hero.tsx
+++ b/apps/roboshield/src/components/Hero/Hero.tsx
@@ -4,9 +4,6 @@ import { Box, Button, Typography } from "@mui/material";
 import React from "react";
 import ReactRotatingText from "react-rotating-text";
 
-import SmartToyOutlinedIcon from "@mui/icons-material/SmartToyOutlined";
-import BotIcon from "@/roboshield/assets/icons/Type=robot, Size=24, Color=CurrentColor.svg";
-
 interface props {
   scrolRef: React.RefObject<HTMLDivElement>;
 }
@@ -26,13 +23,10 @@ const Hero = ({ scrolRef }: props) => {
     >
       <Section>
         <Typography
+          color="text.secondary"
+          gutterBottom
           typography="h6"
           variant="h2"
-          gutterBottom
-          sx={{
-            py: "8px",
-            color: "#FFFFFF",
-          }}
         >
           CONTROL YOUR DATA
         </Typography>
@@ -40,6 +34,10 @@ const Hero = ({ scrolRef }: props) => {
         <Typography
           color="text.secondary"
           gutterBottom
+          my={{
+            xs: 3,
+            md: 5,
+          }}
           textAlign="center"
           variant="h1"
           sx={{
@@ -47,7 +45,6 @@ const Hero = ({ scrolRef }: props) => {
             flexDirection: "column",
             alignItems: "center",
             justifyContent: "center",
-            py: 1,
           }}
         >
           Guard Your
@@ -55,7 +52,7 @@ const Hero = ({ scrolRef }: props) => {
             component="span"
             sx={{
               backgroundColor: "red",
-              color: "#FFFFF",
+              color: "text.secondary",
               maxWidth: "fit-content",
               my: {
                 xs: 0.5,
diff --git a/apps/roboshield/src/components/NewsletterSubscription/NewsletterSubscription.tsx b/apps/roboshield/src/components/NewsletterSubscription/NewsletterSubscription.tsx
index f5e630dfd..fbe6fafec 100644
--- a/apps/roboshield/src/components/NewsletterSubscription/NewsletterSubscription.tsx
+++ b/apps/roboshield/src/components/NewsletterSubscription/NewsletterSubscription.tsx
@@ -79,7 +79,11 @@ const NewsletterSubscription = React.forwardRef(function NewsletterSubscription(
       }}
       ref={ref}
     >
-      <RichTypography variant="h5SemiBold" sx={{ mb: "30px" }}>
+      <RichTypography
+        mb="30px"
+        textAlign={{ xs: "center", md: "left" }}
+        variant="h5SemiBold"
+      >
         {title}
       </RichTypography>
       <NewsletterSubscriptionRoot>{children}</NewsletterSubscriptionRoot>