Style statistic boxes

src/components/PageWrapper/PageWrapper.jsx

@@ -7,11 +7,11 @@ const Background = styled("div", {
   width: "100vw",
 });
 
-const PageWrapper = ({ children, ...props }) => {
+const PageWrapper = ({ children }) => {
   return (
     <Background>
       <XStack
-        space={"$5"}
+        space={"$8"}
         style={{
           background: "rgb(245,242,254)",
           background:

src/components/ShadowBox/ShadowBox.jsx

@@ -4,6 +4,7 @@ const ShadowBox = styled("div", {
   boxSizing: "border-box",
   borderRadius: "16px",
   boxShadow: "0px 4px 20px 0px rgba(9, 16, 28, 0.08)",
+  width: "100%",
 });
 
 export { ShadowBox };

src/pages/DeviceHealthCheck/StatisticBoxes/StatisticBox/StatisticBox.jsx

@@ -1,4 +1,4 @@
-import { H3, H4, Paragraph, Separator, Text, XStack, YStack } from "tamagui";
+import { Paragraph, Separator, Text, XStack, YStack } from "tamagui";
 import { IconText } from "../../../../components/IconText/IconText";
 import { ShadowBox } from "../../../../components/ShadowBox";
 
@@ -23,7 +23,7 @@ const StatisticBox = ({
               {memory}
             </Paragraph>
           </YStack>
-          {children !== undefined ? children : null}
+          {children && children}
         </XStack>
         <Separator borderColor={"#e3e3e3"} marginVertical={5} />
         <XStack space={"$4"} style={{ padding: "5px 16px 10px 16px" }}>

src/pages/DeviceHealthCheck/StatisticBoxes/StatisticBoxes.jsx

@@ -46,9 +46,13 @@ const StatisticBoxes = () => {
           stateIcon="/icons/active.png"
           stateText="Fair"
         >
-          <YStack space={"$2"}>
+          <YStack>
-            <Paragraph color={"black"}>Uptime</Paragraph>
+            <Paragraph color={"#838d9d"} fontWeight={"bold"}>
-            <Paragraph color={"black"}>23:20:02</Paragraph>
+              Uptime
+            </Paragraph>
+            <Paragraph color={"#09101C"} size={"$5"}>
+              23:20:02
+            </Paragraph>
           </YStack>
         </StatisticBox>
       </XStack>