diff --git a/public/images/network-layer.png b/public/images/network-layer.png new file mode 100644 index 00000000..c92eab96 Binary files /dev/null and b/public/images/network-layer.png differ diff --git a/src/components/InformationBox/InformationBox.jsx b/src/components/InformationBox/InformationBox.jsx index 8c32d3ea..70fa8789 100644 --- a/src/components/InformationBox/InformationBox.jsx +++ b/src/components/InformationBox/InformationBox.jsx @@ -9,7 +9,7 @@ const InformationBox = ({ icon, textElements }) => { border: "2px solid #E7EAEE", borderRadius: "12px", padding: "11px 16px", - maxWidth: "632px", + maxWidth: "590px", alignItems: "start", }} space={"$2"} diff --git a/src/pages/DeviceHealthCheck/StatisticBoxes/StatisticBox/StatisticBox.jsx b/src/pages/DeviceHealthCheck/StatisticBoxes/StatisticBox/StatisticBox.jsx index fddfe387..cacd01b8 100644 --- a/src/pages/DeviceHealthCheck/StatisticBoxes/StatisticBox/StatisticBox.jsx +++ b/src/pages/DeviceHealthCheck/StatisticBoxes/StatisticBox/StatisticBox.jsx @@ -9,13 +9,22 @@ const StatisticBox = ({ stateText, additionalStateText, children, + svgDataURL, + imageUrl, ...props }) => { return ( - - + + {title} @@ -25,8 +34,8 @@ const StatisticBox = ({ {children && children} - - + + {additionalStateText && ( {additionalStateText} diff --git a/src/pages/DeviceHealthCheck/StatisticBoxes/StatisticBoxes.jsx b/src/pages/DeviceHealthCheck/StatisticBoxes/StatisticBoxes.jsx index 89f1ed49..456cd14d 100644 --- a/src/pages/DeviceHealthCheck/StatisticBoxes/StatisticBoxes.jsx +++ b/src/pages/DeviceHealthCheck/StatisticBoxes/StatisticBoxes.jsx @@ -1,6 +1,7 @@ import { Image, Paragraph, XStack, YStack } from "tamagui"; import { StatisticBox } from "./StatisticBox/StatisticBox"; import { Icon } from "../../../components/Icon"; +import { getFormattedSVG } from "../../../utils/getFormattedSVG"; const StatisticBoxes = () => { return ( @@ -31,6 +32,21 @@ const StatisticBoxes = () => { memory="30 GB" stateIcon="/icons/check-circle.png" stateText="Good" + svgDataURL={getFormattedSVG(` + + `)} /> @@ -39,12 +55,16 @@ const StatisticBoxes = () => { memory="30 GB" stateIcon="/icons/check-circle.png" stateText="Good" + svgDataURL={getFormattedSVG(` + + `)} />