diff --git a/.github/workflows/ui-tests.yaml b/.github/workflows/ui-tests.yaml index 464481f8..9303367e 100644 --- a/.github/workflows/ui-tests.yaml +++ b/.github/workflows/ui-tests.yaml @@ -55,6 +55,8 @@ jobs: ${{ runner.os }}-yarn-v3 - name: Build run: yarn build + - name: Check formatting + run: yarn format:check - name: Pull Vercel configuration run: yarn vercel pull --yes --token ${{ secrets.vercel_token }} - name: Build Vercel bundle diff --git a/README.md b/README.md index 3d4c1467..035a71fa 100644 --- a/README.md +++ b/README.md @@ -1,27 +1,36 @@ # nimbus-gui -This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. +A GUI for managing your [Nimbus](https://nimbus.team/) nodes. -Currently, two official plugins are available: +## Deployed pages showing the project -- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh -- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh +We have a Storybook up at https://nimbus-gui.github.io/nimbus-gui/ which shows +the components of the project. We also have a deployed version of the GUI up at +https://nimbus-gui.vercel.app/ which shows the GUI as it currently looks in the +`main` branch of the +[`nimbus-gui/nimbus-gui`](https://github.com/nimbus-gui/nimbus-gui) repository. -## Expanding the ESLint configuration +## Development and running the project yourself -If you are developing a production application, we recommend updating the configuration to enable type aware lint rules: +### Dependencies -- Configure the top-level `parserOptions` property like this: +Run `yarn` in the root directory of the project in order to install dependencies. -```js - parserOptions: { - ecmaVersion: 'latest', - sourceType: 'module', - project: ['./tsconfig.json', './tsconfig.node.json'], - tsconfigRootDir: __dirname, - }, +### Running a development server + +If you want to run a development server to see what the GUI looks like you can +run the following command: + +```bash +yarn dev ``` -- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked` -- Optionally add `plugin:@typescript-eslint/stylistic-type-checked` -- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list +This will start the server on port 5173 and you can open https://localhost:5173 +in order to see the page. + +### Running storybook locally + +If you want to run the Storybook locally you can simply run `yarn storybook` in +the root of the project. This is useful if you want to contribute a component +and be sure that it renders as you expect it to, without testing it out on any +given page. diff --git a/index.html b/index.html index b2dd885f..fe32257e 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,20 @@ Vite + React + TS + + diff --git a/package.json b/package.json index 2f309bf8..cf896221 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,9 @@ "preview": "vite preview", "storybook": "storybook dev -p 6006", "build-storybook": "storybook build", - "test-storybook": "test-storybook" + "test-storybook": "test-storybook", + "format:check": "yarn prettier --check src", + "format": "yarn prettier --write src" }, "resolutions": { "@tamagui/web": "1.36.4", diff --git a/public/Inter-font/Inter-Black.ttf b/public/Inter-font/Inter-Black.ttf new file mode 100644 index 00000000..37742709 Binary files /dev/null and b/public/Inter-font/Inter-Black.ttf differ diff --git a/public/Inter-font/Inter-Bold.ttf b/public/Inter-font/Inter-Bold.ttf new file mode 100644 index 00000000..76a215cc Binary files /dev/null and b/public/Inter-font/Inter-Bold.ttf differ diff --git a/public/Inter-font/Inter-Light.ttf b/public/Inter-font/Inter-Light.ttf new file mode 100644 index 00000000..b9c460dc Binary files /dev/null and b/public/Inter-font/Inter-Light.ttf differ diff --git a/public/Inter-font/Inter-Medium.ttf b/public/Inter-font/Inter-Medium.ttf new file mode 100644 index 00000000..06ae9e9c Binary files /dev/null and b/public/Inter-font/Inter-Medium.ttf differ diff --git a/public/Inter-font/Inter-Regular.ttf b/public/Inter-font/Inter-Regular.ttf new file mode 100644 index 00000000..cc73944a Binary files /dev/null and b/public/Inter-font/Inter-Regular.ttf differ diff --git a/public/Inter-font/Inter-SemiBold.ttf b/public/Inter-font/Inter-SemiBold.ttf new file mode 100644 index 00000000..278ceaa3 Binary files /dev/null and b/public/Inter-font/Inter-SemiBold.ttf differ diff --git a/public/icons/NimbusDisabled.svg b/public/icons/NimbusDisabled.svg index 528c705d..7be08fa1 100644 --- a/public/icons/NimbusDisabled.svg +++ b/public/icons/NimbusDisabled.svg @@ -1,5 +1,3 @@ - - - - + + diff --git a/public/icons/erigon-circle.png b/public/icons/erigon-circle.png index 6a0652ae..2fb8be44 100644 Binary files a/public/icons/erigon-circle.png and b/public/icons/erigon-circle.png differ diff --git a/public/icons/gethereum-mascot-circle.png b/public/icons/gethereum-mascot-circle.png index 7aa28153..944716f5 100644 Binary files a/public/icons/gethereum-mascot-circle.png and b/public/icons/gethereum-mascot-circle.png differ diff --git a/public/icons/hyperledger-besu-circle.png b/public/icons/hyperledger-besu-circle.png index bc28640f..13a8dc37 100644 Binary files a/public/icons/hyperledger-besu-circle.png and b/public/icons/hyperledger-besu-circle.png differ diff --git a/public/icons/nethermind-circle.png b/public/icons/nethermind-circle.png index b4e3a2a2..0a758c39 100644 Binary files a/public/icons/nethermind-circle.png and b/public/icons/nethermind-circle.png differ diff --git a/src/App.css b/src/App.css index 29d4f3ac..d599f4fd 100644 --- a/src/App.css +++ b/src/App.css @@ -1,3 +1,3 @@ #root { width: 100%; -} \ No newline at end of file +} diff --git a/src/components/Charts/DeviceCPULoad.tsx b/src/components/Charts/DeviceCPULoad.tsx index 9d4b6821..9dba20cc 100644 --- a/src/components/Charts/DeviceCPULoad.tsx +++ b/src/components/Charts/DeviceCPULoad.tsx @@ -1,6 +1,6 @@ import StandartLineChart from './StandardLineChart' import IconText from '../General/IconText' -import { Paragraph, Separator, XStack, YStack } from 'tamagui' +import { Separator, XStack, YStack } from 'tamagui' import { Shadow, Text } from '@status-im/components' import { CheckCircleIcon, IncorrectIcon } from '@status-im/icons' @@ -38,8 +38,8 @@ const DeviceCPULoad: React.FC = ({ load }) => { = ({ load }) => { @@ -57,16 +57,16 @@ const DeviceCPULoad: React.FC = ({ load }) => { - + CPU - - + + {currentLoad} GB - + - + : } weight={'semibold'} @@ -74,7 +74,7 @@ const DeviceCPULoad: React.FC = ({ load }) => { {message} {message === 'Poor' && ( - + {((currentLoad / 80) * 100).toFixed(0)}% Utilization )} diff --git a/src/components/Charts/DeviceMemoryHealth.tsx b/src/components/Charts/DeviceMemoryHealth.tsx index 1dbfc560..940870f0 100644 --- a/src/components/Charts/DeviceMemoryHealth.tsx +++ b/src/components/Charts/DeviceMemoryHealth.tsx @@ -1,7 +1,7 @@ import StandartLineChart from './StandardLineChart' import IconText from '../General/IconText' -import { Paragraph, Separator, XStack, YStack } from 'tamagui' +import { Separator, XStack, YStack } from 'tamagui' import { Shadow as ShadowBox, Text } from '@status-im/components' import { CheckCircleIcon, IncorrectIcon } from '@status-im/icons' @@ -42,8 +42,8 @@ const DeviceMemoryHealth = ({ currentMemory, maxMemory }: DeviceMemoryHealthProp @@ -61,23 +61,24 @@ const DeviceMemoryHealth = ({ currentMemory, maxMemory }: DeviceMemoryHealthProp - + Memory - - + + {currentLoad} GB - + - + : } + weight={'semibold'} > {message} {message === 'Poor' && ( - + {((currentLoad / maxMemory || 0) * 100).toFixed(0)}% Utilization )} diff --git a/src/components/Charts/DeviceNetworkHealth.tsx b/src/components/Charts/DeviceNetworkHealth.tsx index 93a17067..586d0f15 100644 --- a/src/components/Charts/DeviceNetworkHealth.tsx +++ b/src/components/Charts/DeviceNetworkHealth.tsx @@ -1,6 +1,6 @@ import StandartLineChart from './StandardLineChart' import IconText from '../General/IconText' -import { Paragraph, Separator, XStack, YStack } from 'tamagui' +import { Separator, XStack, YStack } from 'tamagui' import { Shadow as ShadowBox, Text } from '@status-im/components' import { CheckCircleIcon, IncorrectIcon } from '@status-im/icons' @@ -47,8 +47,8 @@ const DeviceNetworkHealth = ({ uploadRate, downloadRate }: DeviceNetworkHealthPr @@ -66,23 +66,24 @@ const DeviceNetworkHealth = ({ uploadRate, downloadRate }: DeviceNetworkHealthPr - + Network - - + + {currentLoad} GB - + - + : } + weight={'semibold'} > {message} {message === 'Poor' && ( - + {((currentLoad / 60) * 100).toFixed(0)}% Utilization )} diff --git a/src/components/Charts/DeviceStorageHealth.tsx b/src/components/Charts/DeviceStorageHealth.tsx index 4ff8ccca..037f9651 100644 --- a/src/components/Charts/DeviceStorageHealth.tsx +++ b/src/components/Charts/DeviceStorageHealth.tsx @@ -1,5 +1,5 @@ import IconText from '../General/IconText' -import { Paragraph, Separator, XStack, YStack } from 'tamagui' +import { Separator, XStack, YStack } from 'tamagui' import StandardGauge from './StandardGauge' import { Shadow, Text } from '@status-im/components' import { CheckCircleIcon, IncorrectIcon } from '@status-im/icons' @@ -33,8 +33,8 @@ const DeviceStorageHealth: React.FC = ({ storage, maxS = ({ storage, maxS
- + Storage - - + + {storage} GB - + - + : } weight={'semibold'} @@ -76,7 +76,7 @@ const DeviceStorageHealth: React.FC = ({ storage, maxS {message} {message === 'Poor' && ( - + {utilization.toFixed(0)}% Utilization )} diff --git a/src/components/General/BreadcrumbBar/BreadcrumbBar.css b/src/components/General/BreadcrumbBar/BreadcrumbBar.css index 0df51597..5b928b4f 100644 --- a/src/components/General/BreadcrumbBar/BreadcrumbBar.css +++ b/src/components/General/BreadcrumbBar/BreadcrumbBar.css @@ -1,30 +1,30 @@ .breadcrumb-bar-nav { - width: 100%; - flex: 1 1 100%; - padding: 1rem 2rem; - margin: 0.5rem; + width: 100%; + flex: 1 1 100%; + padding: 1rem 2rem; + margin: 0.5rem; } .breadcrumb-bar-ul { - display: flex; + display: flex; } .breadcrumb-bar-li { - color: #647084; - font-weight: 500; - position: relative; + color: #647084; + font-weight: 500; + position: relative; } -.breadcrumb-bar-li:last-child { - color: #09101C; +.breadcrumb-bar-li:last-child { + color: #09101c; } .breadcrumb-bar-li::after { - display: inline-block; - content: url("./icons/chevron.svg"); - color: #09101C; - position: absolute; - top: 2px; - left: 100%; - transform: translateX(-50%); + display: inline-block; + content: url('./icons/chevron.svg'); + color: #09101c; + position: absolute; + top: 2px; + left: 100%; + transform: translateX(-50%); } .breadcrumb-bar-li:last-child::after { - display: none; + display: none; } diff --git a/src/components/General/ColorPicker/ColorPicker.css b/src/components/General/ColorPicker/ColorPicker.css index 95d023e2..c7ee3e21 100644 --- a/src/components/General/ColorPicker/ColorPicker.css +++ b/src/components/General/ColorPicker/ColorPicker.css @@ -1,40 +1,40 @@ .color-picker-button { - width: 40px; - height: 40px; - border-radius: 50%; - margin-bottom: 10px; - margin-right: 10px; - position: relative; - outline: none; - border: none; + width: 40px; + height: 40px; + border-radius: 50%; + margin-bottom: 10px; + margin-right: 10px; + position: relative; + outline: none; + border: none; } -.color-picker-button::before , -.color-picker-button::after { - display: block; - content: ""; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%,-50%); - transform-origin: center; - opacity: 0; - transition: 120ms opacity ease-in-out; +.color-picker-button::before, +.color-picker-button::after { + display: block; + content: ''; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + transform-origin: center; + opacity: 0; + transition: 120ms opacity ease-in-out; } .color-picker-button::before { - content: "\2713"; - font-size: 25px; - color: white; + content: '\2713'; + font-size: 25px; + color: white; } .color-picker-button::after { - width: 40px; - height: 40px; - border-radius: 50%; - border: 3px solid currentColor; + width: 40px; + height: 40px; + border-radius: 50%; + border: 3px solid currentColor; } -.color-picker-button:focus::before, -.color-picker-button:focus::after, +.color-picker-button:focus::before, +.color-picker-button:focus::after, .color-picker-button:hover::after { - opacity: 1; + opacity: 1; } diff --git a/src/components/General/CreateAvatar/CreateAvatar.css b/src/components/General/CreateAvatar/CreateAvatar.css index 765ed56f..409f37e9 100644 --- a/src/components/General/CreateAvatar/CreateAvatar.css +++ b/src/components/General/CreateAvatar/CreateAvatar.css @@ -1,10 +1,10 @@ .device-avatar { - width: 80px; - height: 80px; - border-radius: 50%; - flex-grow: 1; - display: flex; - align-items: center; - justify-content: center; - margin-right: -30px; -} \ No newline at end of file + width: 80px; + height: 80px; + border-radius: 50%; + flex-grow: 1; + display: flex; + align-items: center; + justify-content: center; + margin-right: -30px; +} diff --git a/src/components/General/CreateAvatar/CreateAvatar.tsx b/src/components/General/CreateAvatar/CreateAvatar.tsx index 0d5fba4c..8db43985 100644 --- a/src/components/General/CreateAvatar/CreateAvatar.tsx +++ b/src/components/General/CreateAvatar/CreateAvatar.tsx @@ -1,4 +1,4 @@ -import { useState } from 'react' +import { useEffect, useRef, useState } from 'react' import { XStack, YStack } from 'tamagui' import { Avatar, Text } from '@status-im/components' import { ReactionIcon } from '@status-im/icons' @@ -6,15 +6,30 @@ import './CreateAvatar.css' import LabelInputField from '../LabelInputField' import ColorPicker from '../ColorPicker/ColorPicker' import EmojiPickerDialog from '../EmojiPickerDialog' -import { Emoji, EmojiClickData } from 'emoji-picker-react' +import { Emoji, EmojiClickData, EmojiStyle } from 'emoji-picker-react' const CreateAvatar = () => { const [chosenColor, setChosenColor] = useState('#2A4AF5') const [isEmojiDialogOpen, setIsEmojiDialogOpen] = useState(false) const [selectedEmoji, setSelectedEmoji] = useState('1f600') + const emojiRef = useRef(null) + function changeEmoji(emojiData: EmojiClickData) { setSelectedEmoji(emojiData.unified) } + + useEffect(() => { + function handleClickOutside(event: any) { + if (emojiRef.current && !emojiRef.current.contains(event.target)) { + setIsEmojiDialogOpen(false) + } + } + document.addEventListener('mousedown', handleClickOutside) + return () => { + document.removeEventListener('mousedown', handleClickOutside) + } + }, [emojiRef]) + return ( @@ -27,7 +42,9 @@ const CreateAvatar = () => {
- {selectedEmoji ? : null} + {selectedEmoji ? ( + + ) : null}
{ /> } /> - {isEmojiDialogOpen && ( - - )} +
+ {isEmojiDialogOpen && ( + + )} +
diff --git a/src/components/General/EmojiPickerDialog.stories.tsx b/src/components/General/EmojiPickerDialog.stories.tsx index 34d43884..a13b521a 100644 --- a/src/components/General/EmojiPickerDialog.stories.tsx +++ b/src/components/General/EmojiPickerDialog.stories.tsx @@ -1,7 +1,6 @@ import type { Meta, StoryObj } from '@storybook/react' import EmojiPickerDialog from './EmojiPickerDialog' - const meta = { title: 'General/EmojiPickerDialog', component: EmojiPickerDialog, @@ -15,5 +14,5 @@ export default meta type Story = StoryObj export const DefaultColors: Story = { - args: {emojiStyle: 'TWITTER'}, + args: { emojiStyle: 'TWITTER' }, } diff --git a/src/components/General/EmojiPickerDialog.tsx b/src/components/General/EmojiPickerDialog.tsx index e1f39649..4babda00 100644 --- a/src/components/General/EmojiPickerDialog.tsx +++ b/src/components/General/EmojiPickerDialog.tsx @@ -16,13 +16,13 @@ type EmojiPickerProps = { function EmojiPickerDialog({ emojiStyle, changeEmoji }: EmojiPickerProps) { return ( - + { return ( - + diff --git a/src/components/General/IconText.tsx b/src/components/General/IconText.tsx index 6f6e8119..d8e31177 100644 --- a/src/components/General/IconText.tsx +++ b/src/components/General/IconText.tsx @@ -17,7 +17,7 @@ const IconText = ({ icon, children, weight }: IconTextProps) => { space={'$2'} > {icon} - + {children} diff --git a/src/components/General/LabelInputField.css b/src/components/General/LabelInputField.css index a1859b9a..ea10cda9 100644 --- a/src/components/General/LabelInputField.css +++ b/src/components/General/LabelInputField.css @@ -1,6 +1,6 @@ .input-container { - background-color: #fff; - border-radius: 12px; - margin-top: 8px; - width: 100%; -} \ No newline at end of file + background-color: #fff; + border-radius: 12px; + margin-top: 8px; + width: 100%; +} diff --git a/src/components/General/LinkWithArrow.tsx b/src/components/General/LinkWithArrow.tsx index c547caea..e135f38c 100644 --- a/src/components/General/LinkWithArrow.tsx +++ b/src/components/General/LinkWithArrow.tsx @@ -37,7 +37,15 @@ const LinkWithArrow = ({ onClick={navigateHandler} > {arrowLeft && } - + {text} {arrowRight && } diff --git a/src/components/General/QuickStartBar/QuickStartBar.css b/src/components/General/QuickStartBar/QuickStartBar.css index 3eb4100d..e793a352 100644 --- a/src/components/General/QuickStartBar/QuickStartBar.css +++ b/src/components/General/QuickStartBar/QuickStartBar.css @@ -1,28 +1,28 @@ .quick-start-bar { - border-radius: 18px; - border: 1px solid rgba(0, 0, 0, 0.10); - opacity: 0.949999988079071; - background: rgba(255, 255, 255, 0.70); - backdrop-filter: blur(15px); - display: flex; - align-items: center; - width: 66%; - margin: 0 auto; - padding: 12px 1rem; - position: relative; - top: -18vh; + border-radius: 18px; + border: 1px solid rgba(0, 0, 0, 0.1); + opacity: 0.949999988079071; + background: rgba(255, 255, 255, 0.7); + backdrop-filter: blur(15px); + display: flex; + align-items: center; + width: 66%; + margin: 0 auto; + padding: 12px 1rem; + position: relative; + top: -18vh; } .quick-start-bar > div { - width: 100%; - border-radius: 24px; - background: rgba(100, 112, 132, 0.05); - margin-left: 1rem; - padding: 1rem 0.5rem; + width: 100%; + border-radius: 24px; + background: rgba(100, 112, 132, 0.05); + margin-left: 1rem; + padding: 1rem 0.5rem; } -.quick-start-bar ul { - display: flex; +.quick-start-bar ul { + display: flex; } .quick-start-bar ul li { - color: #0D1625; - font-size: 13px; + color: #0d1625; + font-size: 13px; } diff --git a/src/components/General/TagContainer.css b/src/components/General/TagContainer.css index 7113f3cf..0d4a90e0 100644 --- a/src/components/General/TagContainer.css +++ b/src/components/General/TagContainer.css @@ -1,3 +1,3 @@ /* .tag-container div:nth-child(1) { background:transparent; - } */ \ No newline at end of file + } */ diff --git a/src/components/Logos/NimbusLogo.css b/src/components/Logos/NimbusLogo.css index 524a710b..79a4579b 100644 --- a/src/components/Logos/NimbusLogo.css +++ b/src/components/Logos/NimbusLogo.css @@ -1,10 +1,9 @@ - -.nimbus-logomark{ - display: flex; - justify-content: center; - align-items: center; +.nimbus-logomark { + display: flex; + justify-content: center; + align-items: center; } .nimbus-logomark svg { - width: auto; - height: 24px; -} \ No newline at end of file + width: auto; + height: 24px; +} diff --git a/src/components/PageWrappers/PageWrapperShadow.tsx b/src/components/PageWrappers/PageWrapperShadow.tsx index a0385b09..9aa4160d 100644 --- a/src/components/PageWrappers/PageWrapperShadow.tsx +++ b/src/components/PageWrappers/PageWrapperShadow.tsx @@ -8,6 +8,7 @@ type PageWrapperShadowProps = { rightImageSrc?: string rightImageLogo?: boolean children: ReactNode + imgHeight?: string } const PageWrapperShadow = ({ @@ -15,6 +16,7 @@ const PageWrapperShadow = ({ rightImageSrc, rightImageLogo, children, + imgHeight, }: PageWrapperShadowProps) => { const theme = useTheme() @@ -26,10 +28,15 @@ const PageWrapperShadow = ({
{children}
- +
- background + background {rightImageLogo ? : null}
diff --git a/src/components/PageWrappers/layout.css b/src/components/PageWrappers/layout.css index d1676b63..08fc9d0b 100644 --- a/src/components/PageWrappers/layout.css +++ b/src/components/PageWrappers/layout.css @@ -1,85 +1,85 @@ -.layout{ - background-color: #FFF; - height: 100%; - position: relative; - display: flex; - flex-wrap: wrap; - overflow: hidden; +.layout { + background-color: #fff; + height: 100%; + position: relative; + display: flex; + flex-wrap: wrap; + overflow: hidden; } .layout::after { - display: block; - content: ""; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: linear-gradient(to bottom, rgba(113, 64, 253, 0.075) 15%, rgba(255,255,255,0) 50%); + display: block; + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: linear-gradient(to bottom, rgba(113, 64, 253, 0.075) 15%, rgba(255, 255, 255, 0) 50%); } .layout-left { - flex: 0 0 55%; - max-width: 55%; - z-index: 2; + flex: 0 0 55%; + max-width: 55%; + z-index: 2; } .container { - display: flex; - flex-wrap: wrap; - justify-content: end; - height: 100%; - /* padding: 70px 0 0; */ + display: flex; + flex-wrap: wrap; + justify-content: end; + height: 100%; + /* padding: 70px 0 0; */ } .container-inner { - max-width: 70%; - flex: 1 0 70%; - display: flex; - flex-direction: column; + max-width: 70%; + flex: 1 0 70%; + display: flex; + flex-direction: column; } .content { - flex-grow: 1; + flex-grow: 1; } /* LAYOUT RIGHT ELEMENT WITH IMAGE TAKING UP THE WHOLE HIGHT OF THE VIEWPORT */ .layout-right { - flex: 0 0 45%; - max-width: 45%; - z-index: 0; + flex: 0 0 45%; + max-width: 45%; + z-index: 0; } .image-container { - height: 100%; - position: relative; - overflow: hidden; - color: #FFF; + height: 100%; + position: relative; + overflow: hidden; + color: #fff; } .image-container::before { - display: block; - content: ""; - padding-bottom: 100%; + display: block; + content: ''; + padding-bottom: 100%; } .image-container::after { - display: block; - content: ""; - position: absolute; - top: 0; - left: -1%; - width: 50%; - height: 100%; - background: linear-gradient(to right, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 0.0)); + display: block; + content: ''; + position: absolute; + top: 0; + left: -1%; + width: 50%; + height: 100%; + background: linear-gradient(to right, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 0)); } .image-container .background-img { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - height: 140%; - width: auto; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + height: 140%; + width: auto; } .image-container .nimbus-logomark { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); } .image-container .nimbus-logomark svg { - height: 73px; + height: 73px; } diff --git a/src/index.css b/src/index.css index b0c8145c..783e7b78 100644 --- a/src/index.css +++ b/src/index.css @@ -1,12 +1,55 @@ +@font-face { + font-family: 'Inter'; + src: url('./Inter-font/Inter-Light.ttf') format('truetype'); + font-weight: 300; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: 'Inter'; + src: url('./Inter-font/Inter-Regular.ttf') format('truetype'); + font-weight: 400; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: 'Inter'; + src: url('./Inter-font/Inter-Medium.ttf') format('truetype'); + font-weight: 600; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: 'Inter'; + src: url('./Inter-font/Inter-SemiBold.ttf') format('truetype'); + font-weight: 700; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: 'Inter'; + src: url('./Inter-font/Inter-Bold.ttf') format('truetype'); + font-weight: 800; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: 'Inter'; + src: url('./Inter-font/Inter-Black.ttf') format('truetype'); + font-weight: 900; + font-style: normal; + font-display: swap; +} + :root { font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; line-height: 1.5; font-weight: 400; - + color-scheme: light dark; color: rgba(0, 0, 0, 0.87); background-color: #242424; - + font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; @@ -22,7 +65,12 @@ body { min-width: 320px; min-height: 100vh; } -h1, h2, h3, h4, h5, h6 { +h1, +h2, +h3, +h4, +h5, +h6 { line-height: 1.2; font-weight: 700; } @@ -44,7 +92,7 @@ button:focus, button:focus-visible { outline: 4px auto -webkit-focus-ring-color; } -ul{ +ul { list-style-type: none; padding: 0; margin: 0; @@ -55,7 +103,7 @@ ul li { } @media (prefers-color-scheme: light) { :root { - color: #09101C; + color: #09101c; background-color: #ffffff; } a:hover { diff --git a/src/pages/Dashboard/BalanceChartCard/BalanceChartCard.tsx b/src/pages/Dashboard/BalanceChartCard/BalanceChartCard.tsx index 31629dab..4aef867e 100644 --- a/src/pages/Dashboard/BalanceChartCard/BalanceChartCard.tsx +++ b/src/pages/Dashboard/BalanceChartCard/BalanceChartCard.tsx @@ -38,7 +38,6 @@ const BalanceChartCard = () => { return ( - @@ -90,11 +89,10 @@ const BalanceChartCard = () => { onSelect={handleRangeSelect} /> )} - + - ) } diff --git a/src/pages/Dashboard/BalanceChartCard/LineChart.tsx b/src/pages/Dashboard/BalanceChartCard/LineChart.tsx index a95637e9..f17cb039 100644 --- a/src/pages/Dashboard/BalanceChartCard/LineChart.tsx +++ b/src/pages/Dashboard/BalanceChartCard/LineChart.tsx @@ -31,9 +31,7 @@ const LineChart = ({ years, userGains }: LineChartProps) => { ], options: { responsive: true, - }, - } return diff --git a/src/pages/Dashboard/BalanceChartCard/calendar.css b/src/pages/Dashboard/BalanceChartCard/calendar.css index 89961d3b..3628f4e0 100644 --- a/src/pages/Dashboard/BalanceChartCard/calendar.css +++ b/src/pages/Dashboard/BalanceChartCard/calendar.css @@ -1,354 +1,354 @@ .rdp { - --rdp-cell-size: 32px; - --rdp-caption-font-size: 15px; - --rdp-accent-color: #2a4af5; - --rdp-background-color: #e7edff; - --rdp-background-color-selected-secondary: #f5f6f8; - --rdp-hover-color: #f5f6f8; - --rdp-hover-color-darker: #f0f2f5; - --rdp-accent-color-dark: #223bc4; - --rdp-outline: 2px solid var(--rdp-accent-color); /* Outline border for focused elements */ - --rdp-outline-selected: 3px solid var(--rdp-accent-color); /* Outline border for focused _and_ selected elements */ - --rdp-text-color: #09101c; - color: var(--rdp-text-color); - font-family: Inter, sans-serif; - font-weight: 500; - user-select: none; - } - - /* Hide elements for devices that are not screen readers */ - .rdp-vhidden { - box-sizing: border-box; - padding: 0; - margin: 0; - background: transparent; - border: 0; - -moz-appearance: none; - -webkit-appearance: none; - appearance: none; - position: absolute !important; - top: 0; - width: 1px !important; - height: 1px !important; - padding: 0 !important; - overflow: hidden !important; - clip: rect(1px, 1px, 1px, 1px) !important; - border: 0 !important; - } - - /* Buttons */ - .rdp-button_reset { - appearance: none; - position: relative; - margin: 0; - padding: 0; - cursor: default; - color: inherit; - background: none; - font: inherit; - - -moz-appearance: none; - -webkit-appearance: none; - } - - .rdp-button_reset:focus-visible { - /* Make sure to reset outline only when :focus-visible is supported */ - outline: none; - } - - .rdp-button { - border: 2px solid transparent; - font-size: 0.8125rem; - } - - .rdp-button[disabled]:not(.rdp-day_selected) { - opacity: 0.25; - } - - .rdp-button:not([disabled]) { - cursor: pointer; - } - - .rdp-button:focus-visible:not([disabled]) { - color: inherit; - background-color: var(--rdp-background-color); - border: var(--rdp-outline); - } - - .rdp-button:hover:not([disabled]):not(.rdp-day_selected) { - background-color: var(--rdp-hover-color); - } - - .rdp-months { - display: flex; - } - - .rdp-month { - margin: 0 1em; - } - - .rdp-month:first-child { - margin-left: 0; - } - - .rdp-month:last-child { - margin-right: 0; - } - - .rdp-table { - margin: 0; - max-width: calc(var(--rdp-cell-size) * 7); - border-collapse: separate; - border-spacing: 0 2px; - padding: 0 0.75rem 0.625rem 0.75rem; - } - - .rdp-with_weeknumber .rdp-table { - max-width: calc(var(--rdp-cell-size) * 8); - border-collapse: collapse; - } - - .rdp-caption { - display: flex; - align-items: center; - justify-content: space-between; - padding: 0; - text-align: left; - } - - .rdp-multiple_months .rdp-caption { - position: relative; - display: block; - text-align: center; - } - - .rdp-caption_dropdowns { - position: relative; - display: inline-flex; - } - - .rdp-caption_label { - position: relative; - z-index: 1; - display: inline-flex; - align-items: center; - margin: 0; - white-space: nowrap; - color: currentColor; - font-family: inherit; - font-size: var(--rdp-caption-font-size); - font-weight: bold; - } - - .rdp-nav { - white-space: nowrap; - padding: 0.375rem 0.375rem 0 0.75rem; - } - - .rdp-multiple_months .rdp-caption_start .rdp-nav { - position: absolute; - top: 50%; - left: 0; - transform: translateY(-50%); - } - - .rdp-multiple_months .rdp-caption_end .rdp-nav { - position: absolute; - top: 50%; - right: 0; - transform: translateY(-50%); - } - - .rdp-nav_button { - display: inline-flex; - align-items: center; - justify-content: center; - width: 20px; - height: 20px; - padding: 0.25em; - border-radius: 10px; - } - - /* ---------- */ - /* Dropdowns */ - /* ---------- */ - - .rdp-dropdown_year, - .rdp-dropdown_month { - position: relative; - display: inline-flex; - align-items: center; - } - - .rdp-dropdown { - appearance: none; - position: absolute; - z-index: 2; - top: 0; - bottom: 0; - left: 0; - width: 100%; - margin: 0; - padding: 0; - cursor: inherit; - opacity: 0; - border: none; - background-color: transparent; - font-family: inherit; - font-size: inherit; - line-height: inherit; - } - - .rdp-dropdown[disabled] { - opacity: unset; - color: unset; - } - - .rdp-dropdown:focus-visible:not([disabled]) + .rdp-caption_label { - background-color: var(--rdp-background-color); - border: var(--rdp-outline); - border-radius: 6px; - } - - .rdp-dropdown_icon { - margin: 0 0 0 5px; - } - - .rdp-head { - border: 0; - } - - .rdp-head_row, - .rdp-row { - height: 100%; - padding-bottom: 2px; - } - - .rdp-head_cell { - vertical-align: middle; - font-size: 0.8125em; - font-weight: 500; - - text-align: center; - height: var(--rdp-cell-size); - padding: 0; - - line-height: 140%; - color: #647084; - letter-spacing: -0.003em; - } - - .rdp-tbody { - border: 0; - } - - .rdp-tfoot { - margin: 0.5em; - } - - .rdp-cell { - width: var(--rdp-cell-size); - height: var(--rdp-cell-size); - text-align: center; - padding: 0; - } - - .rdp-cell_selected_start { - border-top-left-radius: 10px; - border-bottom-left-radius: 10px; - background-color: var(--rdp-background-color-selected-secondary); - } - - .rdp-cell_selected_end { - border-top-right-radius: 10px; - border-bottom-right-radius: 10px; - background-color: var(--rdp-background-color-selected-secondary); - } - - .rdp-cell_selected_range { - background-color: var(--rdp-background-color-selected-secondary); - } - - .rdp-weeknumber { - font-size: 0.75em; - } - - .rdp-weeknumber, - .rdp-day { - display: flex; - overflow: hidden; - align-items: center; - justify-content: center; - box-sizing: border-box; - width: var(--rdp-cell-size); - max-width: var(--rdp-cell-size); - height: var(--rdp-cell-size); - margin: 0; - border: 2px solid transparent; - border-radius: 10px; - } - - .rdp-day_today:not(.rdp-day_outside) { - position: relative; - } - .rdp-day_today:not(.rdp-day_outside)::after { - content: ''; - position: absolute; - bottom: 3px; - left: 50%; - width: 4px; - height: 2px; - transform: translateX(-50%); - - border-radius: 10px; - background-color: var(--rdp-accent-color); - } - - .rdp-day_selected { - opacity: 1; - background-color: var(--rdp-accent-color); - color: var(--rdp-background-color); - transition: all 150ms ease-in-out; - } - - .rdp-day_selected:focus-visible, - .rdp-day_selected:hover { - opacity: 1; - background-color: var(--rdp-accent-color-dark); - border-radius: 10px; - } - - .rdp-day_outside { - opacity: 0.3; - } - - .rdp-day_selected:focus-visible { - /* Since the background is the same use again the outline */ - outline: var(--rdp-outline); - outline-offset: 2px; - z-index: 1; - } - - .rdp[dir='rtl'] .rdp-day_range_start:not(.rdp-day_range_end) { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } - - .rdp[dir='rtl'] .rdp-day_range_end:not(.rdp-day_range_start) { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } - - .rdp-day_range_end.rdp-day_range_start { - border-radius: 10px; - } - - .rdp-day_range_middle { - color: var(--rdp-text-color); - background-color: var(--rdp-background-color-selected-secondary); - } - - .rdp-day_range_middle:hover { - color: var(--rdp-text-color); - background-color: var(--rdp-hover-color-darker); - } \ No newline at end of file + --rdp-cell-size: 32px; + --rdp-caption-font-size: 15px; + --rdp-accent-color: #2a4af5; + --rdp-background-color: #e7edff; + --rdp-background-color-selected-secondary: #f5f6f8; + --rdp-hover-color: #f5f6f8; + --rdp-hover-color-darker: #f0f2f5; + --rdp-accent-color-dark: #223bc4; + --rdp-outline: 2px solid var(--rdp-accent-color); /* Outline border for focused elements */ + --rdp-outline-selected: 3px solid var(--rdp-accent-color); /* Outline border for focused _and_ selected elements */ + --rdp-text-color: #09101c; + color: var(--rdp-text-color); + font-family: Inter, sans-serif; + font-weight: 500; + user-select: none; +} + +/* Hide elements for devices that are not screen readers */ +.rdp-vhidden { + box-sizing: border-box; + padding: 0; + margin: 0; + background: transparent; + border: 0; + -moz-appearance: none; + -webkit-appearance: none; + appearance: none; + position: absolute !important; + top: 0; + width: 1px !important; + height: 1px !important; + padding: 0 !important; + overflow: hidden !important; + clip: rect(1px, 1px, 1px, 1px) !important; + border: 0 !important; +} + +/* Buttons */ +.rdp-button_reset { + appearance: none; + position: relative; + margin: 0; + padding: 0; + cursor: default; + color: inherit; + background: none; + font: inherit; + + -moz-appearance: none; + -webkit-appearance: none; +} + +.rdp-button_reset:focus-visible { + /* Make sure to reset outline only when :focus-visible is supported */ + outline: none; +} + +.rdp-button { + border: 2px solid transparent; + font-size: 0.8125rem; +} + +.rdp-button[disabled]:not(.rdp-day_selected) { + opacity: 0.25; +} + +.rdp-button:not([disabled]) { + cursor: pointer; +} + +.rdp-button:focus-visible:not([disabled]) { + color: inherit; + background-color: var(--rdp-background-color); + border: var(--rdp-outline); +} + +.rdp-button:hover:not([disabled]):not(.rdp-day_selected) { + background-color: var(--rdp-hover-color); +} + +.rdp-months { + display: flex; +} + +.rdp-month { + margin: 0 1em; +} + +.rdp-month:first-child { + margin-left: 0; +} + +.rdp-month:last-child { + margin-right: 0; +} + +.rdp-table { + margin: 0; + max-width: calc(var(--rdp-cell-size) * 7); + border-collapse: separate; + border-spacing: 0 2px; + padding: 0 0.75rem 0.625rem 0.75rem; +} + +.rdp-with_weeknumber .rdp-table { + max-width: calc(var(--rdp-cell-size) * 8); + border-collapse: collapse; +} + +.rdp-caption { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0; + text-align: left; +} + +.rdp-multiple_months .rdp-caption { + position: relative; + display: block; + text-align: center; +} + +.rdp-caption_dropdowns { + position: relative; + display: inline-flex; +} + +.rdp-caption_label { + position: relative; + z-index: 1; + display: inline-flex; + align-items: center; + margin: 0; + white-space: nowrap; + color: currentColor; + font-family: inherit; + font-size: var(--rdp-caption-font-size); + font-weight: bold; +} + +.rdp-nav { + white-space: nowrap; + padding: 0.375rem 0.375rem 0 0.75rem; +} + +.rdp-multiple_months .rdp-caption_start .rdp-nav { + position: absolute; + top: 50%; + left: 0; + transform: translateY(-50%); +} + +.rdp-multiple_months .rdp-caption_end .rdp-nav { + position: absolute; + top: 50%; + right: 0; + transform: translateY(-50%); +} + +.rdp-nav_button { + display: inline-flex; + align-items: center; + justify-content: center; + width: 20px; + height: 20px; + padding: 0.25em; + border-radius: 10px; +} + +/* ---------- */ +/* Dropdowns */ +/* ---------- */ + +.rdp-dropdown_year, +.rdp-dropdown_month { + position: relative; + display: inline-flex; + align-items: center; +} + +.rdp-dropdown { + appearance: none; + position: absolute; + z-index: 2; + top: 0; + bottom: 0; + left: 0; + width: 100%; + margin: 0; + padding: 0; + cursor: inherit; + opacity: 0; + border: none; + background-color: transparent; + font-family: inherit; + font-size: inherit; + line-height: inherit; +} + +.rdp-dropdown[disabled] { + opacity: unset; + color: unset; +} + +.rdp-dropdown:focus-visible:not([disabled]) + .rdp-caption_label { + background-color: var(--rdp-background-color); + border: var(--rdp-outline); + border-radius: 6px; +} + +.rdp-dropdown_icon { + margin: 0 0 0 5px; +} + +.rdp-head { + border: 0; +} + +.rdp-head_row, +.rdp-row { + height: 100%; + padding-bottom: 2px; +} + +.rdp-head_cell { + vertical-align: middle; + font-size: 0.8125em; + font-weight: 500; + + text-align: center; + height: var(--rdp-cell-size); + padding: 0; + + line-height: 140%; + color: #647084; + letter-spacing: -0.003em; +} + +.rdp-tbody { + border: 0; +} + +.rdp-tfoot { + margin: 0.5em; +} + +.rdp-cell { + width: var(--rdp-cell-size); + height: var(--rdp-cell-size); + text-align: center; + padding: 0; +} + +.rdp-cell_selected_start { + border-top-left-radius: 10px; + border-bottom-left-radius: 10px; + background-color: var(--rdp-background-color-selected-secondary); +} + +.rdp-cell_selected_end { + border-top-right-radius: 10px; + border-bottom-right-radius: 10px; + background-color: var(--rdp-background-color-selected-secondary); +} + +.rdp-cell_selected_range { + background-color: var(--rdp-background-color-selected-secondary); +} + +.rdp-weeknumber { + font-size: 0.75em; +} + +.rdp-weeknumber, +.rdp-day { + display: flex; + overflow: hidden; + align-items: center; + justify-content: center; + box-sizing: border-box; + width: var(--rdp-cell-size); + max-width: var(--rdp-cell-size); + height: var(--rdp-cell-size); + margin: 0; + border: 2px solid transparent; + border-radius: 10px; +} + +.rdp-day_today:not(.rdp-day_outside) { + position: relative; +} +.rdp-day_today:not(.rdp-day_outside)::after { + content: ''; + position: absolute; + bottom: 3px; + left: 50%; + width: 4px; + height: 2px; + transform: translateX(-50%); + + border-radius: 10px; + background-color: var(--rdp-accent-color); +} + +.rdp-day_selected { + opacity: 1; + background-color: var(--rdp-accent-color); + color: var(--rdp-background-color); + transition: all 150ms ease-in-out; +} + +.rdp-day_selected:focus-visible, +.rdp-day_selected:hover { + opacity: 1; + background-color: var(--rdp-accent-color-dark); + border-radius: 10px; +} + +.rdp-day_outside { + opacity: 0.3; +} + +.rdp-day_selected:focus-visible { + /* Since the background is the same use again the outline */ + outline: var(--rdp-outline); + outline-offset: 2px; + z-index: 1; +} + +.rdp[dir='rtl'] .rdp-day_range_start:not(.rdp-day_range_end) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} + +.rdp[dir='rtl'] .rdp-day_range_end:not(.rdp-day_range_start) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.rdp-day_range_end.rdp-day_range_start { + border-radius: 10px; +} + +.rdp-day_range_middle { + color: var(--rdp-text-color); + background-color: var(--rdp-background-color-selected-secondary); +} + +.rdp-day_range_middle:hover { + color: var(--rdp-text-color); + background-color: var(--rdp-hover-color-darker); +} diff --git a/src/pages/Dashboard/CPULoad/CPUCard.stories.tsx b/src/pages/Dashboard/CPULoad/CPUCard.stories.tsx index 6dcd8977..46dc726d 100644 --- a/src/pages/Dashboard/CPULoad/CPUCard.stories.tsx +++ b/src/pages/Dashboard/CPULoad/CPUCard.stories.tsx @@ -18,5 +18,5 @@ export const Default: Story = { args: { load: [32, 12, 45, 10] }, } export const BadStats: Story = { - args:{load:[12,32,14,35,65,90]} -} \ No newline at end of file + args: { load: [12, 32, 14, 35, 65, 90] }, +} diff --git a/src/pages/Dashboard/CPULoad/CPUCard.tsx b/src/pages/Dashboard/CPULoad/CPUCard.tsx index b15fe331..8ddd9baa 100644 --- a/src/pages/Dashboard/CPULoad/CPUCard.tsx +++ b/src/pages/Dashboard/CPULoad/CPUCard.tsx @@ -39,15 +39,16 @@ const CPUCard = ({ load }: CPUCardProps) => { const message = currentLoad < 80 ? 'Good' : 'Poor' return ( - - + + export default meta type Story = StoryObj export const Default: Story = { - args: {}, + args: {}, } diff --git a/src/pages/Dashboard/IconButtonWithDot.tsx b/src/pages/Dashboard/IconButtonWithDot.tsx new file mode 100644 index 00000000..271b7f96 --- /dev/null +++ b/src/pages/Dashboard/IconButtonWithDot.tsx @@ -0,0 +1,40 @@ +import { IconButton } from '@status-im/components' +import { Stack } from 'tamagui' + +type IconButtonWithDotProps = { + iconEl: any + variant: 'ghost' | 'outline' + isDotOn: boolean + selected?: boolean + disabled?: boolean +} + +const IconButtonWithDot = ({ + iconEl, + variant, + isDotOn, + selected, + disabled, +}: IconButtonWithDotProps) => { + return ( + + + {isDotOn && ( + + )} + + ) +} + +export default IconButtonWithDot diff --git a/src/pages/Dashboard/LeftSidebar.stories.tsx b/src/pages/Dashboard/LeftSidebar.stories.tsx new file mode 100644 index 00000000..387fd7dd --- /dev/null +++ b/src/pages/Dashboard/LeftSidebar.stories.tsx @@ -0,0 +1,19 @@ +import type { Meta, StoryObj } from '@storybook/react' + +import LeftSidebar from './LeftSidebar' + +const meta = { + title: 'Dashboard/LeftSidebar', + component: LeftSidebar, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Default: Story = { + args: {}, +} diff --git a/src/pages/Dashboard/LeftSidebar.tsx b/src/pages/Dashboard/LeftSidebar.tsx index 8184f654..87b046f1 100644 --- a/src/pages/Dashboard/LeftSidebar.tsx +++ b/src/pages/Dashboard/LeftSidebar.tsx @@ -1,4 +1,3 @@ -import { IconButton } from '@status-im/components' import { DashboardIcon, SpeedIcon, @@ -10,8 +9,12 @@ import { SettingsIcon, } from '@status-im/icons' import { YStack } from 'tamagui' +import IconButtonWithDot from './IconButtonWithDot' +import { useDispatch, useSelector } from 'react-redux' const LeftSidebar = () => { + const buttons = useSelector((state: any) => state.leftSidebar.buttons) + console.log(buttons) return ( { border: '1px solid #F0F2F5', }} > - } variant="ghost" selected /> - } variant="ghost" /> - } variant="outline" disabled /> - } variant="ghost" /> - } variant="ghost" /> - } variant="ghost" /> - } variant="ghost" /> - } variant="ghost" /> + } + variant="ghost" + isDotOn={false} + selected={true} + /> + } variant="ghost" isDotOn={false} /> + } + variant="outline" + isDotOn={false} + disabled={true} + /> + } variant="ghost" isDotOn={false} /> + } variant="ghost" isDotOn={false} /> + } variant="ghost" isDotOn={false} /> + } variant="ghost" isDotOn={true} /> + } variant="ghost" isDotOn={false} /> ) } diff --git a/src/pages/Dashboard/MemoryCard/MemoryCard.stories.tsx b/src/pages/Dashboard/MemoryCard/MemoryCard.stories.tsx index 80994dc1..eecac4cf 100644 --- a/src/pages/Dashboard/MemoryCard/MemoryCard.stories.tsx +++ b/src/pages/Dashboard/MemoryCard/MemoryCard.stories.tsx @@ -3,20 +3,20 @@ import type { Meta, StoryObj } from '@storybook/react' import MemoryCard from './MemoryCard' const meta = { - title: 'Dashboard/MemoryCard', - component: MemoryCard, - parameters: { - layout: 'centered', - }, - tags: ['autodocs'], + title: 'Dashboard/MemoryCard', + component: MemoryCard, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], } satisfies Meta export default meta type Story = StoryObj export const Default: Story = { - args: { currentMemory: [12, 24, 12, 4, 30, 50], maxMemory: 100 }, + args: { currentMemory: [12, 24, 12, 4, 30, 50], maxMemory: 100 }, } export const BadStats: Story = { - args: { maxMemory: 60, currentMemory: [2, 5, 7, 32, 23, 12, 89] } -} \ No newline at end of file + args: { maxMemory: 60, currentMemory: [2, 5, 7, 32, 23, 12, 89] }, +} diff --git a/src/pages/Dashboard/MemoryCard/MemoryCard.tsx b/src/pages/Dashboard/MemoryCard/MemoryCard.tsx index 62d6e238..c6a6cba3 100644 --- a/src/pages/Dashboard/MemoryCard/MemoryCard.tsx +++ b/src/pages/Dashboard/MemoryCard/MemoryCard.tsx @@ -1,5 +1,5 @@ import { Paragraph, Separator, Stack, XStack, YStack } from 'tamagui' -import { Text } from '@status-im/components' +import { Text } from '@status-im/components' import { CheckCircleIcon, IncorrectIcon } from '@status-im/icons' import StandartLineChart from '../../../components/Charts/StandardLineChart' @@ -24,7 +24,6 @@ type MemoryCardProps = { } const MemoryCard = ({ currentMemory, maxMemory }: MemoryCardProps) => { - const chartData: ChartData[] = [ { id: 'cpu', @@ -42,14 +41,16 @@ const MemoryCard = ({ currentMemory, maxMemory }: MemoryCardProps) => { const message = currentLoad < maxMemory ? 'Good' : 'Poor' return ( - - + + { - + : } @@ -85,7 +86,7 @@ const MemoryCard = ({ currentMemory, maxMemory }: MemoryCardProps) => { )} - + ) } diff --git a/src/pages/Dashboard/NetworkCard/NetworkCard.stories.tsx b/src/pages/Dashboard/NetworkCard/NetworkCard.stories.tsx index 122fc746..6cf4104d 100644 --- a/src/pages/Dashboard/NetworkCard/NetworkCard.stories.tsx +++ b/src/pages/Dashboard/NetworkCard/NetworkCard.stories.tsx @@ -3,20 +3,20 @@ import type { Meta, StoryObj } from '@storybook/react' import NetworkCard from './NetworkCard' const meta = { - title: 'Dashboard/NetworkCard', - component: NetworkCard, - parameters: { - layout: 'centered', - }, - tags: ['autodocs'], + title: 'Dashboard/NetworkCard', + component: NetworkCard, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], } satisfies Meta export default meta type Story = StoryObj export const Default: Story = { - args: {downloadRate:[12,24,12,4,30,50], uploadRate:[2,5,7,32,23,82] }, + args: { downloadRate: [12, 24, 12, 4, 30, 50], uploadRate: [2, 5, 7, 32, 23, 82] }, } export const BadStats: Story = { - args: { downloadRate:[12,24,12,4,30, 1], uploadRate:[2,5,7,32,23,12] } -} \ No newline at end of file + args: { downloadRate: [12, 24, 12, 4, 30, 1], uploadRate: [2, 5, 7, 32, 23, 12] }, +} diff --git a/src/pages/Dashboard/NetworkCard/NetworkCard.tsx b/src/pages/Dashboard/NetworkCard/NetworkCard.tsx index 3eb33669..c38800bb 100644 --- a/src/pages/Dashboard/NetworkCard/NetworkCard.tsx +++ b/src/pages/Dashboard/NetworkCard/NetworkCard.tsx @@ -1,5 +1,5 @@ import { Paragraph, Separator, Stack, XStack, YStack } from 'tamagui' -import { Text } from '@status-im/components' +import { Text } from '@status-im/components' import { CheckCircleIcon, IncorrectIcon } from '@status-im/icons' import StandartLineChart from '../../../components/Charts/StandardLineChart' @@ -23,7 +23,6 @@ type NetworkCardProps = { } const NetworkCard = ({ uploadRate, downloadRate }: NetworkCardProps) => { - const chartData: ChartData[] = [ { id: 'uploadRate', @@ -49,16 +48,16 @@ const NetworkCard = ({ uploadRate, downloadRate }: NetworkCardProps) => { const message = currentLoad > 60 ? 'Good' : 'Poor' return ( - - - - + + + +export default meta +type Story = StoryObj + +export const Default: Story = { + args: {}, +} diff --git a/src/pages/Dashboard/StorageCard/StorageCard.stories.tsx b/src/pages/Dashboard/StorageCard/StorageCard.stories.tsx index 492f8117..e91a5bbd 100644 --- a/src/pages/Dashboard/StorageCard/StorageCard.stories.tsx +++ b/src/pages/Dashboard/StorageCard/StorageCard.stories.tsx @@ -3,20 +3,20 @@ import type { Meta, StoryObj } from '@storybook/react' import StorageCard from './StorageCard' const meta = { - title: 'Dashboard/StorageCard', - component: StorageCard, - parameters: { - layout: 'centered', - }, - tags: ['autodocs'], + title: 'Dashboard/StorageCard', + component: StorageCard, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], } satisfies Meta export default meta type Story = StoryObj export const Default: Story = { - args: { storage: 45, maxStorage: 100 }, + args: { storage: 45, maxStorage: 100 }, } export const BadStats: Story = { - args: { storage: 110, maxStorage: 100 } -} \ No newline at end of file + args: { storage: 110, maxStorage: 100 }, +} diff --git a/src/pages/Dashboard/StorageCard/StorageCard.tsx b/src/pages/Dashboard/StorageCard/StorageCard.tsx index b4b50be7..9c380771 100644 --- a/src/pages/Dashboard/StorageCard/StorageCard.tsx +++ b/src/pages/Dashboard/StorageCard/StorageCard.tsx @@ -35,14 +35,16 @@ const StorageCard = ({ storage, maxStorage }: StorageCardProps) => { } return ( - - + + export default meta type Story = StoryObj export const Default: Story = { - args: { value: 200000, total: 123562 }, + args: { value: 200000, total: 123562 }, } - \ No newline at end of file diff --git a/src/pages/Dashboard/SyncStatusCards/ConsensusClientCard.tsx b/src/pages/Dashboard/SyncStatusCards/ConsensusClientCard.tsx index 9fc140d6..a56cd9a7 100644 --- a/src/pages/Dashboard/SyncStatusCards/ConsensusClientCard.tsx +++ b/src/pages/Dashboard/SyncStatusCards/ConsensusClientCard.tsx @@ -9,58 +9,56 @@ import Icon from '../../../components/General/Icon' import StandardGauge from '../../../components/Charts/StandardGauge' type ConsensusCardProps = { - value: number - total: number - + value: number + total: number } const ConsensusCard = ({ value, total }: ConsensusCardProps) => { - const style: CSSProperties = {} - const data = [ - { - id: 'storage', - label: 'Used', - value: value, - color: '#ff6161', - }, - { - id: 'storage', - label: 'Free', - value: total, - color: '#E7EAEE', - }, - ] + const style: CSSProperties = {} + const data = [ + { + id: 'storage', + label: 'Used', + value: value, + color: '#ff6161', + }, + { + id: 'storage', + label: 'Free', + value: total, + color: '#E7EAEE', + }, + ] - - return ( - - - - - Consensus Client - - - - - - - - - - - }>Syncing - - {formatNumbersWithComa(value)} / {formatNumbersWithComa(total)} - - - - - ) + return ( + + + + + Consensus Client + + + + + + + + + + + }>Syncing + + {formatNumbersWithComa(value)} / {formatNumbersWithComa(total)} + + + + + ) } export default ConsensusCard diff --git a/src/pages/Dashboard/SyncStatusCards/ExecutionClientCard.stories.tsx b/src/pages/Dashboard/SyncStatusCards/ExecutionClientCard.stories.tsx index c3f30078..4d3f7c64 100644 --- a/src/pages/Dashboard/SyncStatusCards/ExecutionClientCard.stories.tsx +++ b/src/pages/Dashboard/SyncStatusCards/ExecutionClientCard.stories.tsx @@ -3,18 +3,17 @@ import type { Meta, StoryObj } from '@storybook/react' import ExecutionClientCard from './ExecutionClientCard' const meta = { - title: 'Dashboard/ExecutionClientCard', - component: ExecutionClientCard, - parameters: { - layout: 'centered', - }, - tags: ['autodocs'], + title: 'Dashboard/ExecutionClientCard', + component: ExecutionClientCard, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], } satisfies Meta export default meta type Story = StoryObj export const Default: Story = { - args: { value: 200000, total: 123562 }, + args: { value: 200000, total: 123562 }, } - \ No newline at end of file diff --git a/src/pages/Dashboard/SyncStatusCards/ExecutionClientCard.tsx b/src/pages/Dashboard/SyncStatusCards/ExecutionClientCard.tsx index 5fc02387..27442d10 100644 --- a/src/pages/Dashboard/SyncStatusCards/ExecutionClientCard.tsx +++ b/src/pages/Dashboard/SyncStatusCards/ExecutionClientCard.tsx @@ -11,7 +11,6 @@ import StandardGauge from '../../../components/Charts/StandardGauge' type ExecutionClientCardProps = { value: number total: number - } const ExecutionClientCard = ({ value, total }: ExecutionClientCardProps) => { @@ -31,8 +30,6 @@ const ExecutionClientCard = ({ value, total }: ExecutionClientCardProps) => { ] const style: CSSProperties = {} - - return ( @@ -41,7 +38,9 @@ const ExecutionClientCard = ({ value, total }: ExecutionClientCardProps) => { Execution Client - Geth + + Geth + export default meta type Story = StoryObj export const Default: Story = { - args: {}, + args: {}, } diff --git a/src/pages/Dashboard/UptimeChart/UptimeChart.stories.tsx b/src/pages/Dashboard/UptimeChart/UptimeChart.stories.tsx index a23f274f..f5f29a57 100644 --- a/src/pages/Dashboard/UptimeChart/UptimeChart.stories.tsx +++ b/src/pages/Dashboard/UptimeChart/UptimeChart.stories.tsx @@ -3,123 +3,122 @@ import type { Meta, StoryObj } from '@storybook/react' import UptimeChart from './UptimeChart' const meta = { - title: 'Dashboard/UptimeChart', - component: UptimeChart, - parameters: { - layout: 'centered', - }, - decorators: [ - Story => ( -
- -
- ), - ], - tags: ['autodocs'], + title: 'Dashboard/UptimeChart', + component: UptimeChart, + parameters: { + layout: 'centered', + }, + decorators: [ + Story => ( +
+ +
+ ), + ], + tags: ['autodocs'], } satisfies Meta export default meta type Story = StoryObj export const WithoutLabels: Story = { - args: { - data: [ - { - pv: 1, - pa: 1, - }, - { - pv: 0, - pa: 0, - }, - { - pv: 0, - pa: 0, - }, - { - pv: 0, - pa: 1, - }, - { - pv: 0, - pa: 0, - }, - { - pv: 1, - pa: 0, - }, - { - pv: 0, - pa: 1, - }, - ] - - }, + args: { + data: [ + { + pv: 1, + pa: 1, + }, + { + pv: 0, + pa: 0, + }, + { + pv: 0, + pa: 0, + }, + { + pv: 0, + pa: 1, + }, + { + pv: 0, + pa: 0, + }, + { + pv: 1, + pa: 0, + }, + { + pv: 0, + pa: 1, + }, + ], + }, } export const WithMonths: Story = { - args: { - data: [ - { - name: 'Jan', - pv: 0, - pa: 0, - }, - { - name: 'Feb', - pv: 0, - pa: 0, - }, - { - name: 'Mar', - pv: 0, - pa: 0, - }, - { - name: 'Apr', - pv: 0, - pa: 0, - }, - { - name: 'May', - pv: 0, - pa: 0, - }, - { - name: 'Aug', - pv: 0, - pa: 0, - }, - { - name: 'Jun', - pv: 0, - pa: 0, - }, - { - name: 'Jul', - pv: 1, - pa: 0, - }, - { - name: 'Sep', - pv: 0, - pa: 0, - }, - { - name: 'Oct', - pv: 0, - pa: 0, - }, - { - name: 'Nov', - pv: 1, - pa: 1, - }, - { - name: 'Dec', - pv: 1, - pa: 1, - }, - ] - } -} \ No newline at end of file + args: { + data: [ + { + name: 'Jan', + pv: 0, + pa: 0, + }, + { + name: 'Feb', + pv: 0, + pa: 0, + }, + { + name: 'Mar', + pv: 0, + pa: 0, + }, + { + name: 'Apr', + pv: 0, + pa: 0, + }, + { + name: 'May', + pv: 0, + pa: 0, + }, + { + name: 'Aug', + pv: 0, + pa: 0, + }, + { + name: 'Jun', + pv: 0, + pa: 0, + }, + { + name: 'Jul', + pv: 1, + pa: 0, + }, + { + name: 'Sep', + pv: 0, + pa: 0, + }, + { + name: 'Oct', + pv: 0, + pa: 0, + }, + { + name: 'Nov', + pv: 1, + pa: 1, + }, + { + name: 'Dec', + pv: 1, + pa: 1, + }, + ], + }, +} diff --git a/src/pages/Dashboard/UptimeChart/UptimeChart.tsx b/src/pages/Dashboard/UptimeChart/UptimeChart.tsx index 6753b2ac..238acdac 100644 --- a/src/pages/Dashboard/UptimeChart/UptimeChart.tsx +++ b/src/pages/Dashboard/UptimeChart/UptimeChart.tsx @@ -1,4 +1,4 @@ -import { BarChart, Bar, ResponsiveContainer, XAxis } from 'recharts'; +import { BarChart, Bar, ResponsiveContainer, XAxis } from 'recharts' type DataItem = { name?: string @@ -12,20 +12,15 @@ type UptimeChartProps = { const UptimeChart = ({ data }: UptimeChartProps) => { return ( - - + + {/* @NOTE: We can add as many Bar items as we need and use them for each day of the month */} - {data[0].name && ( - - )} + {data[0].name && } - ); + ) } export default UptimeChart diff --git a/src/pages/DeviceHealthCheck/DeviceHealthCheck.tsx b/src/pages/DeviceHealthCheck/DeviceHealthCheck.tsx index 53a87d0e..3c963c7e 100644 --- a/src/pages/DeviceHealthCheck/DeviceHealthCheck.tsx +++ b/src/pages/DeviceHealthCheck/DeviceHealthCheck.tsx @@ -16,13 +16,14 @@ const DeviceHealthCheck = () => { const deviceHealthState = useSelector((state: RootState) => state.deviceHealth) return ( - + @@ -32,14 +33,14 @@ const DeviceHealthCheck = () => { subtitle="Configure your device to start Staking on Nimbus" isAdvancedSettings={true} /> - + - + { }, [dispatch]) return ( - + diff --git a/src/pages/DeviceSyncStatus/SyncStatusCardConsensus.tsx b/src/pages/DeviceSyncStatus/SyncStatusCardConsensus.tsx index 08164141..e7117593 100644 --- a/src/pages/DeviceSyncStatus/SyncStatusCardConsensus.tsx +++ b/src/pages/DeviceSyncStatus/SyncStatusCardConsensus.tsx @@ -46,7 +46,7 @@ const SyncStatusCardConsensus: React.FC = ({ synced, t style={{ padding: '8px 16px', position: 'relative', - height: '160px', + minHeight: '180px', }} > diff --git a/src/pages/DeviceSyncStatus/SyncStatusCardExecution.tsx b/src/pages/DeviceSyncStatus/SyncStatusCardExecution.tsx index 1f38337a..024de9cf 100644 --- a/src/pages/DeviceSyncStatus/SyncStatusCardExecution.tsx +++ b/src/pages/DeviceSyncStatus/SyncStatusCardExecution.tsx @@ -45,7 +45,7 @@ const SyncStatusCardExecution: React.FC = ({ synced, t style={{ padding: '8px 16px', position: 'relative', - height: '160px', + minHeight: '180px', }} > diff --git a/src/pages/LandingPage/LandingPage.css b/src/pages/LandingPage/LandingPage.css index e021e88e..af856f8c 100644 --- a/src/pages/LandingPage/LandingPage.css +++ b/src/pages/LandingPage/LandingPage.css @@ -1,4 +1,3 @@ - -.landing-page { - height: 100%; +.landing-page { + height: 100%; } diff --git a/src/pages/LandingPage/LandingPage.tsx b/src/pages/LandingPage/LandingPage.tsx index 73432231..8c6078d5 100644 --- a/src/pages/LandingPage/LandingPage.tsx +++ b/src/pages/LandingPage/LandingPage.tsx @@ -16,7 +16,7 @@ const LandingPage = () => { return ( <> - + diff --git a/src/pages/PairDevice/SyncStatus.tsx b/src/pages/PairDevice/SyncStatus.tsx index e783d4c7..d331b62d 100644 --- a/src/pages/PairDevice/SyncStatus.tsx +++ b/src/pages/PairDevice/SyncStatus.tsx @@ -48,8 +48,8 @@ const SyncStatus = ({ const timer = convertSecondsToTimerFormat(elapsedTime) const connectViaIpHandler = () => { - navigate('/connect-device'); - }; + navigate('/connect-device') + } return ( @@ -91,7 +91,7 @@ const SyncStatus = ({ )} {isAwaitingPairing && ( - diff --git a/src/pages/ValidatorOnboarding/Activation/Activation.stories.ts b/src/pages/ValidatorOnboarding/Activation/Activation.stories.ts index 0d4c0f35..08ebf9b2 100644 --- a/src/pages/ValidatorOnboarding/Activation/Activation.stories.ts +++ b/src/pages/ValidatorOnboarding/Activation/Activation.stories.ts @@ -20,22 +20,21 @@ export const Default: Story = { args: { validatorsValue: '4', executionSyncStatus1: { - text: "Execution Sync Status", + text: 'Execution Sync Status', isGaugeIncluded: true, - gaugeColor: "$blue", + gaugeColor: '$blue', gaugeSynced: 123.524, gaugeTotal: 172.503, - }, executionSyncStatus2: { - text: "Execution Sync Status", + text: 'Execution Sync Status', isGaugeIncluded: true, - gaugeColor: "$red", + gaugeColor: '$red', gaugeSynced: 123.524, gaugeTotal: 172.503, }, - currentAPRValue: "4.40%", - estimatedActivationTimeValue: "32 Days", - validatorQueueValue: "92603", + currentAPRValue: '4.40%', + estimatedActivationTimeValue: '32 Days', + validatorQueueValue: '92603', }, } diff --git a/src/pages/ValidatorOnboarding/Activation/Activation.tsx b/src/pages/ValidatorOnboarding/Activation/Activation.tsx index 4e8b8948..0f39ad35 100644 --- a/src/pages/ValidatorOnboarding/Activation/Activation.tsx +++ b/src/pages/ValidatorOnboarding/Activation/Activation.tsx @@ -48,20 +48,20 @@ const Activation = ({ }, []) return ( - + {showConfetti && } - + Activation - + Congratulations! You have successfully setup your Nimbus Validators and are currently syncing your nodes. - + @@ -81,7 +81,7 @@ const Activation = ({ text="Edit Validators" to="/" arrowLeft={true} - style={{ marginTop: '44px', marginBottom: '88px' }} + style={{ marginTop: '44px', marginBottom: '88px', fontSize: '13px' }} /> diff --git a/src/pages/ValidatorOnboarding/Activation/ActivationCard.tsx b/src/pages/ValidatorOnboarding/Activation/ActivationCard.tsx index befba796..cca9b23f 100644 --- a/src/pages/ValidatorOnboarding/Activation/ActivationCard.tsx +++ b/src/pages/ValidatorOnboarding/Activation/ActivationCard.tsx @@ -30,7 +30,7 @@ const ActivationCard = ({ }} > {!isGaugeIncluded && ( - + {text} @@ -40,7 +40,7 @@ const ActivationCard = ({ )} {isGaugeIncluded && ( - + {text} diff --git a/src/pages/ValidatorOnboarding/Advisories/Advisories.tsx b/src/pages/ValidatorOnboarding/Advisories/Advisories.tsx index 2bd608cb..fe9c3007 100644 --- a/src/pages/ValidatorOnboarding/Advisories/Advisories.tsx +++ b/src/pages/ValidatorOnboarding/Advisories/Advisories.tsx @@ -15,8 +15,8 @@ const Advisories = () => { return ( @@ -33,7 +33,7 @@ const Advisories = () => { space={'$2'} > diff --git a/src/pages/ValidatorOnboarding/Advisories/AdvisoriesContent.tsx b/src/pages/ValidatorOnboarding/Advisories/AdvisoriesContent.tsx index 8b5a97ba..d3122954 100644 --- a/src/pages/ValidatorOnboarding/Advisories/AdvisoriesContent.tsx +++ b/src/pages/ValidatorOnboarding/Advisories/AdvisoriesContent.tsx @@ -17,11 +17,11 @@ const AdvisoriesContent = ({ title, content }: AdvisoriesContentProps) => { {content.map(row => ( - + {row} ))} - + { The Ethereum consensus layer specification - + { return ( - + @@ -14,7 +14,7 @@ const ClientSetup = () => { text="Advanced Recovery Method" to={'/'} arrowRight={true} - style={{ marginBottom: '50px' }} + style={{ marginBottom: '50px', fontWeight: 'bold', fontSize: '15px' }} /> ) diff --git a/src/pages/ValidatorOnboarding/ClientSetup/SetupRow.tsx b/src/pages/ValidatorOnboarding/ClientSetup/SetupRow.tsx index 33803306..effaf755 100644 --- a/src/pages/ValidatorOnboarding/ClientSetup/SetupRow.tsx +++ b/src/pages/ValidatorOnboarding/ClientSetup/SetupRow.tsx @@ -22,7 +22,7 @@ const SetupRow = ({ title }: SetupRowProps) => { return ( - + {title} @@ -38,7 +38,7 @@ const SetupRow = ({ title }: SetupRowProps) => { /> - + ETH @@ -47,7 +47,7 @@ const SetupRow = ({ title }: SetupRowProps) => { - + USD diff --git a/src/pages/ValidatorOnboarding/ClientSetup/WithdrawalAddress.tsx b/src/pages/ValidatorOnboarding/ClientSetup/WithdrawalAddress.tsx index 9732637d..35727d4e 100644 --- a/src/pages/ValidatorOnboarding/ClientSetup/WithdrawalAddress.tsx +++ b/src/pages/ValidatorOnboarding/ClientSetup/WithdrawalAddress.tsx @@ -20,7 +20,7 @@ const WithdrawalAddress = ({ title }: WithdrawalAddressProps) => { return ( - + {title} diff --git a/src/pages/ValidatorOnboarding/ContinueButton.tsx b/src/pages/ValidatorOnboarding/ContinueButton.tsx index c7a16ea3..7f3d91b1 100644 --- a/src/pages/ValidatorOnboarding/ContinueButton.tsx +++ b/src/pages/ValidatorOnboarding/ContinueButton.tsx @@ -1,4 +1,4 @@ -import { Stack, XStack } from 'tamagui' +import { Stack, YStack } from 'tamagui' import { Button, InformationBox } from '@status-im/components' import { CloseCircleIcon } from '@status-im/icons' import { useDispatch, useSelector } from 'react-redux' @@ -43,7 +43,7 @@ const ContinueButton = ({ const isActivationValScreen = activeStep === 3 && subStepValidatorSetup === 3 return ( - + {isCopyPastedPhrase && ( - + ) } diff --git a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.css b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.css index 5828631c..6b161034 100644 --- a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.css +++ b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.css @@ -1,7 +1,23 @@ .custom-step { background-color: #ffffff; } - +div[class*='StepMain-'] { + align-items: start; +} +div[class*='LabelContainer-'] span[class*='Label-'] { + text-align: initial; + text-transform: uppercase; + font-family: 'Inter', sans-serif; +} +div[class*='ConnectorContainer-'] { + right: unset; + left: calc(-100% + 28px); + width: 100%; +} +span[class*='Connector-'] { + position: relative; + z-index: -1; +} .custom-step.StepMain--active, .custom-step.StepMain--completed { background-color: #2a4cf4; @@ -37,32 +53,9 @@ content: attr(data-subtitle); position: absolute; top: calc(100% + 4px); + left: 8px; font-size: 12px; - color: #A2A9B0; - background: transparent; - border: none; + font-family: 'Inter', sans-serif; + color: #a2a9b0; + width: max-content; } - -[data-step="Overview"]::after { - left: 35%; -} - -[data-step="Advisories"]::after { - left: 30%; -} - -[data-step="Client Setup"]::after { - left: 32%; -} - -[data-step="Validator Setup"]::after { - left: 25%; -} - -[data-step="Key Generation"]::after { - left: 24.5%; -} - -[data-step="Activation"]::after { - left: 33%; -} \ No newline at end of file diff --git a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx index 8aa130ce..c82c721a 100644 --- a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx +++ b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx @@ -22,7 +22,14 @@ const FormStepper = ({ activeStep, changeActiveStep }: FormStepperProps) => { nonLinear={true} styleConfig={stepStyle} connectorStyleConfig={customConnectorStyle} - style={{ fontSize: '14px', zIndex: 999, width: '100%', padding: 0, marginBottom: '2rem' }} + style={{ + fontSize: '14px', + zIndex: 999, + width: '100%', + padding: 0, + marginBottom: '3rem', + fontFamily: 'Inter', + }} > {steps.map((step, index) => ( { return ( - Confirm Recovery Phrase + Confirm Recovery Phrase { return ( <> - - - Overview - - - Becoming a validator is a big responsibility with important preparation steps. Only start - the deposit process when youre ready. - - - By running a validator, you'll be responsible for securing the network and receive - continuous payouts for actions that help the network reach consensus. - - - Since the successful transition to proof-of-stake via The Merge, Ethereum is fully secured - by proof-of-stake validators. By running a validator, you'll be helping to secure the - Ethereum network. - - + + + + Overview + + + Becoming a validator is a big responsibility with important preparation steps. Only + start the deposit process when you're ready. + + + By running a validator, you'll be responsible for securing the network and receive + continuous payouts for actions that help the network reach consensus. + + + Since the successful transition to proof-of-stake via The Merge, Ethereum is fully + secured by proof-of-stake validators. By running a validator, you'll be helping to + secure the Ethereum network. + + + diff --git a/src/pages/ValidatorOnboarding/Overview/OverviewCard.tsx b/src/pages/ValidatorOnboarding/Overview/OverviewCard.tsx index bfa89698..4fee7b96 100644 --- a/src/pages/ValidatorOnboarding/Overview/OverviewCard.tsx +++ b/src/pages/ValidatorOnboarding/Overview/OverviewCard.tsx @@ -12,12 +12,12 @@ const OverviewCard = ({ text, value }: OverviewCardProps) => { style={{ borderRadius: '16px', border: '1px solid rgba(0, 0, 0, 0.15)', - width: '46%', + width: '44%', padding: '12px 16px', backgroundColor: '#FFF', }} > - + {text} diff --git a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx index c54acb67..971b6ba1 100644 --- a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx @@ -82,8 +82,8 @@ const ValidatorOnboarding = () => { { padding: '12px 16px', width: '29%', }} - space={'$10'} + space={'$8'} > - + {name} diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusGaugeCard.stories.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusGaugeCard.stories.tsx index 4f1b94e5..43d49ca5 100644 --- a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusGaugeCard.stories.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusGaugeCard.stories.tsx @@ -18,6 +18,9 @@ type Story = StoryObj export const Default: Story = { args: { - color: 'orange', synced: 140000, total: 200000, title: 'Synced Files' + color: 'orange', + synced: 140000, + total: 200000, + title: 'Synced Files', }, } diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusSelection.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusSelection.tsx index fed02a76..716b3bc0 100644 --- a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusSelection.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusSelection.tsx @@ -32,29 +32,29 @@ const ConsensusSelection = () => { ] return ( - - + + Validator Setup + - - + Consensus Client Detection - + No existing execution client installations have been detected on paired device. @@ -63,14 +63,14 @@ const ConsensusSelection = () => { - + Install Consensus client - The resource efficient Ethereum Clients. + The resource efficient Ethereum Clients. {selectedClient} is a client implementation for both execution and consensus layers that strives to be as lightweight as possible in terms of resources used. This allows it to @@ -81,6 +81,7 @@ const ConsensusSelection = () => { diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/PairedDeviceCard.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/PairedDeviceCard.tsx index 1507c05e..8fa4f9ed 100644 --- a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/PairedDeviceCard.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/PairedDeviceCard.tsx @@ -20,9 +20,9 @@ const PairedDeviceCard = ({ isVisibleState }: PairedDeviceCardProps) => { diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorActivation/ActivationValidatorSetup.stories.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorActivation/ActivationValidatorSetup.stories.tsx index f928722a..d3c9135f 100644 --- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorActivation/ActivationValidatorSetup.stories.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorActivation/ActivationValidatorSetup.stories.tsx @@ -4,16 +4,16 @@ import ActivationValidatorSetup from './ActivationValidatorSetup' import { withRouter } from 'storybook-addon-react-router-v6' const meta = { - title: 'ValidatorOnboarding/ActivationValidatorSetup', - component: ActivationValidatorSetup, + title: 'ValidatorOnboarding/ActivationValidatorSetup', + component: ActivationValidatorSetup, - tags: ['autodocs'], - decorators: [withRouter()], + tags: ['autodocs'], + decorators: [withRouter()], } satisfies Meta export default meta type Story = StoryObj export const Default: Story = { - args: { }, + args: {}, } diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorActivation/ActivationValidatorSetup.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorActivation/ActivationValidatorSetup.tsx index 33060c52..56c8b49c 100644 --- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorActivation/ActivationValidatorSetup.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorActivation/ActivationValidatorSetup.tsx @@ -19,21 +19,21 @@ const ActivationValidatorSetup = () => { }, []) return ( - + {showConfetti && } - - + + Activation - + Congratulations! You have successfully setup your Execution and Consensus clients and are currently syncing your nodes. You need to be sufficiently synced prior to setting up your validators and making a deposit. - + { border: isSelected ? '1px solid #2A4AF566' : '1px solid rgba(0, 0, 0, 0.15);', borderRadius: '16px', padding: '12px 16px', - width: '33%', + width: '32%', }} - space={'$12'} + space={'$8'} onPress={onClick} > - + {name} diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx index 9e1ea26d..74e0bb65 100644 --- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx @@ -13,7 +13,7 @@ const ValidatorSetupInstall = () => { const selectedClient = useSelector((state: RootState) => state.execClient.selectedClient) return ( - + Validator Setup @@ -23,7 +23,7 @@ const ValidatorSetupInstall = () => { - + {selectedClient} @@ -41,12 +41,12 @@ const ValidatorSetupInstall = () => { style={{ border: '1px solid #00000026', borderRadius: '16px', - padding: '6px 12px', + padding: '19px 16px', }} space={'$3'} > - Installing {selectedClient} - + Installing {selectedClient} + There are several ways to install Geth, including via a package manager, downloading a pre-built bundle, running as a docker container or building from downloaded source code. On this page the various installation options are explained for several major @@ -59,10 +59,10 @@ const ValidatorSetupInstall = () => { are also provided in each section. - + setSelectedOs('Mac')} /> @@ -80,17 +80,17 @@ const ValidatorSetupInstall = () => { /> - Package Managers + Package Managers MacOS via Homebrew - + The easiest way to install go-ethereum is to use the Geth Homebrew tap. The first step is to check that Homebrew is installed. The following command should return a version number. - + If a version number is returned, then Homebrew is installed. If not, Homebrew can be installed by following the instructions here. With Homebrew installed, the following commands add the Geth tap and install Geth: diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup/ExecClientCard.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup/ExecClientCard.tsx index 27300eb5..a9b5d117 100644 --- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup/ExecClientCard.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup/ExecClientCard.tsx @@ -24,19 +24,19 @@ const ExecClientCard = ({ name, icon, isComingSoon }: ExecClientCardProps) => { border: isComingSoon ? '1px solid #F5F6F8' : isSelected - ? '1px solid #2A4AF5' - : '1px solid #DCE0E5', + ? '1px solid #2A4AF5' + : '1px solid #DCE0E5', borderRadius: '16px', padding: '12px 16px', width: '19%', }} - space={'$12'} + space={'$8'} onClick={() => { dispatch(selectClient(name)) }} > - + {name} {isComingSoon && ( @@ -46,9 +46,9 @@ const ExecClientCard = ({ name, icon, isComingSoon }: ExecClientCardProps) => { display: 'flex', justifyContent: 'center', alignItems: 'center', - padding: '3px', + padding: '3px 6px', borderRadius: '67px', - width: '50%', + width: 'fit-content', }} > diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup/ValidatorSetup.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup/ValidatorSetup.tsx index ec66e782..94578de1 100644 --- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup/ValidatorSetup.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup/ValidatorSetup.tsx @@ -7,8 +7,12 @@ import LinkWithArrow from '../../../../components/General/LinkWithArrow' const ValidatorSetup = () => { return ( - - + + Validator Setup @@ -21,7 +25,7 @@ const ValidatorSetup = () => { Execution Client Detection - + No existing execution client installations have been detected on paired device. @@ -30,7 +34,7 @@ const ValidatorSetup = () => { - + Select Execution client @@ -43,7 +47,7 @@ const ValidatorSetup = () => { ) diff --git a/src/pages/ValidatorOnboarding/layoutGradient.css b/src/pages/ValidatorOnboarding/layoutGradient.css index a54fa521..bd143523 100644 --- a/src/pages/ValidatorOnboarding/layoutGradient.css +++ b/src/pages/ValidatorOnboarding/layoutGradient.css @@ -8,11 +8,11 @@ .gradient-wrapper:after { display: block; - content: ""; + content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; - background: linear-gradient(to bottom, rgba(113, 64, 253, 0.075) 15%, rgba(255,255,255,0) 50%); -} \ No newline at end of file + background: linear-gradient(to bottom, rgba(113, 64, 253, 0.075) 15%, rgba(255, 255, 255, 0) 50%); +} diff --git a/src/redux/Sidebars/slice.ts b/src/redux/Sidebars/slice.ts new file mode 100644 index 00000000..4f5a096b --- /dev/null +++ b/src/redux/Sidebars/slice.ts @@ -0,0 +1,46 @@ +import { createSlice, PayloadAction } from '@reduxjs/toolkit' + +interface SidebarButton { + id: string + isDotOn: boolean + isSelected: boolean + isDisabled?: boolean + +} + +interface LeftSidebarState { + buttons: SidebarButton[] +} + +const initialState: LeftSidebarState = { + buttons: [ + { id: 'dashboard', isDotOn: false, isSelected: true }, + { id: 'speed', isDotOn: false, isSelected: false }, + { id: 'chart', isDotOn: false, isSelected: false, isDisabled: true }, + { id: 'heart', isDotOn: false, isSelected: false }, + { id: 'codeBlock', isDotOn: false, isSelected: false }, + { id: 'communities', isDotOn: false, isSelected: false }, + { id: 'activityCenter', isDotOn: true, isSelected: false }, + { id: 'settings', isDotOn: false, isSelected: false }, + ], +} + +const leftSidebarSlice = createSlice({ + name: 'leftSidebar', + initialState, + reducers: { + toggleButtonSelection: (state, action: PayloadAction) => { + state.buttons.forEach(button => { + button.isSelected = button.id === action.payload + }) + }, + toggleDot: (state, action: PayloadAction) => { + const button = state.buttons.find(button => button.id === action.payload) + if (button) button.isDotOn = !button.isDotOn + }, + }, +}) + +export const { toggleButtonSelection, toggleDot } = leftSidebarSlice.actions + +export default leftSidebarSlice.reducer diff --git a/src/redux/store.ts b/src/redux/store.ts index 592f40af..cc78c421 100644 --- a/src/redux/store.ts +++ b/src/redux/store.ts @@ -4,6 +4,7 @@ import pinnedMessageReducer from './PinnedMessage/slice' import execClientReducer from './ValidatorOnboarding/ValidatorSetup/slice' import themeReducer from './theme/slice' import keyGenerationReducer from './ValidatorOnboarding/KeyGeneration/slice' +import leftSidebarReducer from './Sidebars/slice' const store = configureStore({ reducer: { @@ -12,6 +13,7 @@ const store = configureStore({ execClient: execClientReducer, theme: themeReducer, keyGeneration: keyGenerationReducer, + leftSidebar: leftSidebarReducer, }, }) diff --git a/src/utilities.ts b/src/utilities.ts index 786c99a5..27ae407f 100644 --- a/src/utilities.ts +++ b/src/utilities.ts @@ -26,13 +26,13 @@ export const convertSecondsToTimerFormat = (seconds: number) => { } export const formatNumbersWithComa = (n: number): string => { - const parts = n.toString().split('.'); - parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ','); - return parts.join('.'); -}; + const parts = n.toString().split('.') + parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',') + return parts.join('.') +} export const getMonthIndicesFromRange = (range: DateRange) => { if (!range.from || !range.to) return [0, 11] return [range.from.getMonth(), range.to.getMonth()] -} \ No newline at end of file +}