Remove box (#322)

Giving-Coupons · Oct 26, 2022 · bfdae9c · bfdae9c
2 parents af2a39d + 800deb1
commit bfdae9c
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 27 deletions.
diff --git a/frontend/components/redeem/DidYouKnow.tsx b/frontend/components/redeem/DidYouKnow.tsx
@@ -1,6 +1,6 @@
-import { Box, Stack, Typography } from '@mui/material';
+import { Stack, Typography } from '@mui/material';
 import { useEffect, useState } from 'react';
-import { boxSx, stackSx, textSx } from '../../styles/components/redeem/DidYouKnowStyles';
+import { stackSx } from '../../styles/components/redeem/DidYouKnowStyles';
 
 // TODO: Change this if needed
 const DID_YOU_KNOW_FACTS: string[] = [
@@ -12,23 +12,23 @@ const DID_YOU_KNOW_FACTS: string[] = [
 ];
 
 const DidYouKnow = () => {
-  const [factIndex, setfactIndex] = useState<number>(0);
+  const [factIndex, setFactIndex] = useState<number>(0);
 
   useEffect(() => {
     const interval = setInterval(() => {
-      setfactIndex((prevIndex) => (prevIndex + 1) % DID_YOU_KNOW_FACTS.length);
+      setFactIndex((prevIndex) => (prevIndex + 1) % DID_YOU_KNOW_FACTS.length);
     }, 5000);
 
     return () => clearInterval(interval);
   }, [factIndex]);
 
   return (
-    <Stack component="div" sx={stackSx}>
+    <Stack component="div" sx={stackSx} spacing={1}>
       <Typography variant="h4">Did you know?</Typography>
 
-      <Box sx={boxSx}>
-        <Typography sx={textSx}>{DID_YOU_KNOW_FACTS[factIndex]}</Typography>
-      </Box>
+      <Typography align="center" variant="h5">
+        {DID_YOU_KNOW_FACTS[factIndex]}
+      </Typography>
     </Stack>
   );
 };

diff --git a/frontend/styles/components/redeem/DidYouKnowStyles.ts b/frontend/styles/components/redeem/DidYouKnowStyles.ts
@@ -11,22 +11,3 @@ export const stackSx: SxProps = {
   alignItems: 'center',
   width: '90%',
 };
-
-export const boxSx: SxProps = {
-  marginTop: 1.5,
-  padding: 1.5,
-  borderRadius,
-  width: '100%',
-  background: 'linear-gradient(150.91deg, rgba(255, 153, 0, 0.56375) -28.09%, rgba(184, 34, 221, 0.8) 109.59%);',
-  div: { width: '100%' },
-};
-
-export const textSx: SxProps = {
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  minHeight: '80px',
-  color: 'white',
-  fontWeight: 500,
-  textAlign: 'center',
-};