Change page structure and add data for statistics

src/components/BackgroundImage/BackgroundImage.jsx

@@ -3,7 +3,9 @@ import { styled } from "tamagui";
 const BackgroundImage = styled("div", {
   boxShadow: "inset 100px 0px 100px white",
   width: "650px",
-  height: "100vh",
+  height: "99vh",
+  borderTopRightRadius: "25px",
+  borderBottomRightRadius: "25px",
 });
 
 export { BackgroundImage };

src/components/IconText/IconText.jsx

@@ -1,16 +1,18 @@
 import { Paragraph, XStack } from "tamagui";
 import { Icon } from "../Icon/Icon";
 
-const IconText = ({ icon, text }) => {
+const IconText = ({ icon, text, ...props }) => {
   return (
     <XStack
       style={{
         alignItems: "center",
       }}
-      space={"$3"}
+      space={"$2"}
     >
       <Icon source={icon} width={16} height={16} />
-      <Paragraph color={"#000000"}>{text}</Paragraph>
+      <Paragraph {...props} color={"#000000"}>
+        {text}
+      </Paragraph>
     </XStack>
   );
 };

src/components/Logo/Logo.jsx

@@ -10,7 +10,7 @@ const Logo = () => {
       }}
       space={"$2"}
     >
-      <Icon source={"/icons/marks.png"} width={80} height={60} />
+      <Icon source={"/icons/marks.png"} width={80} height={50} />
       <Icon source={"/icons/nimbus.png"} width={80} height={17} />
       <Tag bc="#2A4AF5" text="BETA" />
     </XStack>

src/pages/DeviceHealthCheck/DeviceHealthCheck.jsx

@@ -1,4 +1,4 @@
-import { XStack, YStack } from "tamagui";
+import { XStack, YStack, styled } from "tamagui";
 import { ReactButton } from "../../components/ReactButton";
 import { Logo } from "../../components/Logo";
 import { InformationBox } from "../../components/InformationBox";
@@ -7,16 +7,28 @@ import { IconText } from "../../components/IconText/IconText";
 import { StatisticBox } from "./StatisticBox";
 import { BackgroundImage } from "../../components/BackgroundImage";
 
+const Box = styled("div", {
+  display: "flex",
+  justifyContent: "center",
+  backgroundColor: "white",
+  width: "100vw",
+});
+
 const DeviceHealthCheck = () => {
   return (
+    <Box>
       <XStack
-      space={"$6"}
+        space={"$5"}
         style={{
           background: "rgb(245,242,254)",
           background:
             "linear-gradient(180deg, rgba(245,242,254,1) 0%, rgba(255,255,255,1) 100%)",
-        width: "100vw",
+          borderRadius: "25px",
+          border: "4px solid #09101C",
+          width: "100%",
+          display: "flex",
           justifyContent: "end",
+          alignItems: "center",
         }}
       >
         <YStack space={"$3"}>
@@ -26,14 +38,37 @@ const DeviceHealthCheck = () => {
             subtitle={"Configure your device to start Staking on Nimbus"}
           />
           <XStack space={"$3"}>
-          <StatisticBox style={{ border: "1px solid #D92344" }}>
-            asdf
-          </StatisticBox>
-          <StatisticBox>asdf</StatisticBox>
+            <StatisticBox
+              style={{
+                border: "1px solid #D92344",
+                backgroundColor: "#F3EAEB",
+              }}
+              title="Storage"
+              memory="30 GB"
+              stateIcon="/icons/warning.png"
+              stateText="Poor"
+              additionalStateText="86% Utilization"
+            />
+            <StatisticBox
+              title="CPU"
+              memory="30 GB"
+              stateIcon="/icons/check-circle.png"
+              stateText="Good"
+            />
           </XStack>
           <XStack space={"$3"}>
-          <StatisticBox>asdf</StatisticBox>
-          <StatisticBox>asdf</StatisticBox>
+            <StatisticBox
+              title="Memory"
+              memory="30 GB"
+              stateIcon="/icons/check-circle.png"
+              stateText="Good"
+            />
+            <StatisticBox
+              title="Network"
+              memory="30 GB"
+              stateIcon="/icons/active.png"
+              stateText="Fair"
+            />
           </XStack>
           <YStack space={"$2"}>
             <IconText
@@ -75,6 +110,7 @@ const DeviceHealthCheck = () => {
           }}
         />
       </XStack>
+    </Box>
   );
 };