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", {
boxShadow: "inset 100px 0px 100px white",
width: "650px",
height: "100vh",
height: "99vh",
borderTopRightRadius: "25px",
borderBottomRightRadius: "25px",
});
export { BackgroundImage };

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

@ -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>
);
};

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

@ -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>

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 { Logo } from "../../components/Logo";
import { InformationBox } from "../../components/InformationBox";
@ -7,74 +7,110 @@ 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 (
<XStack
space={"$6"}
style={{
background: "rgb(245,242,254)",
background:
"linear-gradient(180deg, rgba(245,242,254,1) 0%, rgba(255,255,255,1) 100%)",
width: "100vw",
justifyContent: "end",
}}
>
<YStack space={"$3"}>
<Logo />
<Titles
title={"Device Health Check"}
subtitle={"Configure your device to start Staking on Nimbus"}
/>
<XStack space={"$3"}>
<StatisticBox style={{ border: "1px solid #D92344" }}>
asdf
</StatisticBox>
<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."
}
<Box>
<XStack
space={"$5"}
style={{
background: "rgb(245,242,254)",
background:
"linear-gradient(180deg, rgba(245,242,254,1) 0%, rgba(255,255,255,1) 100%)",
borderRadius: "25px",
border: "4px solid #09101C",
width: "100%",
display: "flex",
justifyContent: "end",
alignItems: "center",
}}
>
<YStack space={"$3"}>
<Logo />
<Titles
title={"Device Health Check"}
subtitle={"Configure your device to start Staking on Nimbus"}
/>
<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
<XStack space={"$3"}>
<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
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
please do your own due diligence prior to commiting any funds. Read
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>
<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>
</Box>
);
};