status-im
/
nimbus-gui
mirror of https://github.com/status-im/nimbus-gui.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Change page structure and add data for statistics

This commit is contained in:
RadoslavDimchev 2023-07-21 23:04:20 +03:00
parent 15176cc9bf
commit 143bef3a65
4 changed files with 107 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/BackgroundImage/BackgroundImage.jsx
View File

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

8
src/components/IconText/IconText.jsx
View File

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

2
src/components/Logo/Logo.jsx
View File

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

160
src/pages/DeviceHealthCheck/DeviceHealthCheck.jsx
View File

@ -1,4 +1,4 @@
import { XStack, YStack } from "tamagui"; import { XStack, YStack, styled } from "tamagui";
import { ReactButton } from "../../components/ReactButton"; import { ReactButton } from "../../components/ReactButton";
import { Logo } from "../../components/Logo"; import { Logo } from "../../components/Logo";
import { InformationBox } from "../../components/InformationBox"; import { InformationBox } from "../../components/InformationBox";
@ -7,74 +7,110 @@ import { IconText } from "../../components/IconText/IconText";
import { StatisticBox } from "./StatisticBox"; import { StatisticBox } from "./StatisticBox";
import { BackgroundImage } from "../../components/BackgroundImage"; import { BackgroundImage } from "../../components/BackgroundImage";
const Box = styled("div", {
display: "flex",
justifyContent: "center",
backgroundColor: "white",
width: "100vw",
});
const DeviceHealthCheck = () => { const DeviceHealthCheck = () => {
return ( return (
<XStack <Box>
space={"$6"} <XStack
style={{ space={"$5"}
background: "rgb(245,242,254)", style={{
background: background: "rgb(245,242,254)",
"linear-gradient(180deg, rgba(245,242,254,1) 0%, rgba(255,255,255,1) 100%)", background:
width: "100vw", "linear-gradient(180deg, rgba(245,242,254,1) 0%, rgba(255,255,255,1) 100%)",
justifyContent: "end", borderRadius: "25px",
}} border: "4px solid #09101C",
> width: "100%",
<YStack space={"$3"}> display: "flex",
<Logo /> justifyContent: "end",
<Titles alignItems: "center",
title={"Device Health Check"} }}
subtitle={"Configure your device to start Staking on Nimbus"} >
/> <YStack space={"$3"}>
<XStack space={"$3"}> <Logo />
<StatisticBox style={{ border: "1px solid #D92344" }}> <Titles
asdf title={"Device Health Check"}
</StatisticBox> subtitle={"Configure your device to start Staking on Nimbus"}
<StatisticBox>asdf</StatisticBox>
</XStack>
<XStack space={"$3"}>
<StatisticBox>asdf</StatisticBox>
<StatisticBox>asdf</StatisticBox>
</XStack>
<YStack space={"$2"}>
<IconText
icon={"/icons/remove-circle-red.png"}
text={
"Your storage is running low as required for additional node services."
}
/> />
<IconText <XStack space={"$3"}>
icon={"/icons/checkmark-circle-green.png"} <StatisticBox
text={"2.4GHz is recommended for CPU."} style={{
/> border: "1px solid #D92344",
<IconText backgroundColor: "#F3EAEB",
icon={"/icons/checkmark-circle-green.png"} }}
text={"There is sufficient ram required for selected services."} title="Storage"
/> memory="30 GB"
<IconText stateIcon="/icons/warning.png"
icon={"/icons/checkmark-circle-blue.png"} stateText="Poor"
text={"Network Latency is low."} additionalStateText="86% Utilization"
/> />
</YStack> <StatisticBox
<InformationBox title="CPU"
icon="/icons/close.png" memory="30 GB"
text="The information provided in the Nodes Health Check is meant to stateIcon="/icons/check-circle.png"
stateText="Good"
/>
</XStack>
<XStack space={"$3"}>
<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
icon={"/icons/remove-circle-red.png"}
text={
"Your storage is running low as required for additional node services."
}
/>
<IconText
icon={"/icons/checkmark-circle-green.png"}
text={"2.4GHz is recommended for CPU."}
/>
<IconText
icon={"/icons/checkmark-circle-green.png"}
text={"There is sufficient ram required for selected services."}
/>
<IconText
icon={"/icons/checkmark-circle-blue.png"}
text={"Network Latency is low."}
/>
</YStack>
<InformationBox
icon="/icons/close.png"
text="The information provided in the Nodes Health Check is meant to
utilized as a guide to guage the readiness of your device, however utilized as a guide to guage the readiness of your device, however
please do your own due diligence prior to commiting any funds. Read please do your own due diligence prior to commiting any funds. Read
our Health Check Disclosure for more information." our Health Check Disclosure for more information."
/>
<XStack>
<ReactButton color="#fff" backgroundColor="#2A4AF5" fontSize="$5">
Continue
</ReactButton>
</XStack>
</YStack>
<BackgroundImage
style={{
background:
"url(/public/background-images/eye-background.png) no-repeat",
}}
/> />
<XStack> </XStack>
<ReactButton color="#fff" backgroundColor="#2A4AF5" fontSize="$5"> </Box>
Continue
</ReactButton>
</XStack>
</YStack>
<BackgroundImage
style={{
background:
"url(/public/background-images/eye-background.png) no-repeat",
}}
/>
</XStack>
); );
}; };