From 3ada7923b5af8af4a4bcff3aef5b579156e02293 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Sat, 22 Jul 2023 15:03:26 +0300 Subject: [PATCH] Set background lines at statistic boxes --- public/images/network-layer.png | Bin 0 -> 10669 bytes .../InformationBox/InformationBox.jsx | 2 +- .../StatisticBox/StatisticBox.jsx | 17 +++++++++++---- .../StatisticBoxes/StatisticBoxes.jsx | 20 ++++++++++++++++++ 4 files changed, 34 insertions(+), 5 deletions(-) create mode 100644 public/images/network-layer.png diff --git a/public/images/network-layer.png b/public/images/network-layer.png new file mode 100644 index 0000000000000000000000000000000000000000..c92eab965493c2505f5e343b3a2b536b9154b9f8 GIT binary patch literal 10669 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 T9u0^U00000NkvXXu0mjfUV%YV literal 0 HcmV?d00001 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(` + + `)} />