status-im/nimbus-gui
2
0
Fork 0
mirror of https://github.com/status-im/nimbus-gui.git synced 2025-01-21 00:40:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #61 from nimbus-gui/main

Browse Source 
fix: tweaks on node pages
This commit is contained in:
Rickard Andersson 2023-08-22 11:52:47 +03:00 committed by GitHub
commit 7323b324e9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 136 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/General/BreadcrumbBar/BreadcrumbBar.tsx
View File

@ -8,8 +8,10 @@ const BreadcrumbBar = ({ breadcrumbList }: BreadcrumbBarProps) => {
return (
<nav className="breadcrumb-bar-nav">
<ul className="breadcrumb-bar-ul">
{breadcrumbList.map(item => (
<li className="breadcrumb-bar-li">{item}</li>
{breadcrumbList.map((item, index) => (
<li className="breadcrumb-bar-li" key={index}>
{item}
</li>
))}
</ul>
</nav>

18
src/components/General/Header.tsx Normal file
View File

@ -0,0 +1,18 @@
import { XStack } from 'tamagui'
import NimbusLogo from '../Logos/NimbusLogo'
import TagContainer from './TagContainer'
type HeaderProps = {
selectedTag: 'pair' | 'create' | 'connect'
}
const Header = ({ selectedTag }: HeaderProps) => {
return (
<XStack justifyContent="space-between" py={'25px'} mt={'70px'}>
<NimbusLogo />
<TagContainer selectedTag={selectedTag} />
</XStack>
)
}
export default Header

2
src/components/General/QuickStartBar/QuickStartBar.css
View File

@ -10,7 +10,7 @@
margin: 0 auto;
padding: 12px 1rem;
position: relative;
top: -120px;
top: -18vh;
}
.quick-start-bar > div {
width: 100%;

5
src/components/General/TagContainer.css
View File

@ -1,4 +1,3 @@
.tag-container div:nth-child(1) {
/* .tag-container div:nth-child(1) {
background:transparent;
}
} */

15
src/components/General/TagContainer.tsx
View File

@ -1,13 +1,20 @@
import { Tag } from '@status-im/components'
import { XStack } from 'tamagui'
import './TagContainer.css'
import { AddSmallIcon, SwapIcon } from '@status-im/icons'
import { ConnectionIcon, AddSmallIcon, SwapIcon } from '@status-im/icons'
const TagContainer = () => {
type TagContainerProps = {
selectedTag: 'pair' | 'create' | 'connect'
}
const TagContainer = ({ selectedTag }: TagContainerProps) => {
return (
<XStack space={'$2'} alignItems="center" className="tag-container">
<Tag icon={SwapIcon} label="Pair" size={32} />
<Tag selected icon={AddSmallIcon} label="Create" size={32} />
{selectedTag === 'connect' ? (
<Tag selected={selectedTag === 'connect'} icon={ConnectionIcon} label="Connect" size={32} />
) : null}
<Tag selected={selectedTag === 'pair'} icon={SwapIcon} label="Pair" size={32} />
<Tag selected={selectedTag === 'create'} icon={AddSmallIcon} label="Create" size={32} />
</XStack>
)
}

9
src/components/Logos/NimbusLogo.css
View File

@ -1,5 +1,10 @@
.nimbus-logomark{
width: auto;
height: 30%;
display: flex;
justify-content: center;
align-items: center;
}
.nimbus-logomark svg {
width: auto;
height: 24px;
}

3
src/components/Logos/NimbusLogo.tsx
View File

@ -1,6 +1,7 @@
import { XStack } from 'tamagui'
import BetaTag from './BetaTag'
import './NimbusLogo.css'
import NimbusLogoMark from './NimbusLogoMark'
const NimbusLogo = () => {
return (
@ -11,7 +12,7 @@ const NimbusLogo = () => {
}}
space={'$3'}
>
<img src={'./icons/marks.svg'} alt="marks" className="nimbus-logomark" />
<NimbusLogoMark />
<img src={'./icons/nimbus.svg'} alt="marks" />
<BetaTag />
</XStack>

20
src/components/Logos/NimbusLogoMark.tsx Normal file
View File

@ -0,0 +1,20 @@
const NimbusLogoMark = () => {
return (
<div className="nimbus-logomark">
<svg
xmlns="http://www.w3.org/2000/svg"
width="147"
height="73"
viewBox="0 0 147 73"
fill="none"
>
<path
d="M110.25 36.5002V73C90.0427 73 79.625 71.1754 67.375 54.7503C55.125 38.3252 47.2108 36.4998 36.75 36.4998V73H0V36.4998H36.75V1.4385e-08C55.6049 -2.9897e-08 67.375 2.43335 79.625 18.2501C91.875 34.0669 98.3343 36.5002 110.25 36.5002V0H147V36.5002H110.25Z"
fill="currentColor"
/>
</svg>
</div>
)
}
export default NimbusLogoMark

12
src/components/PageWrappers/PageWrapperShadow.tsx
View File

@ -1,13 +1,20 @@
import { ReactNode } from 'react'
import './layout.css'
import NimbusLogoMark from '../Logos/NimbusLogoMark'
type PageWrapperShadowProps = {
breadcrumbBar?: ReactNode
rightImageSrc?: string
rightImageLogo?: boolean
children: ReactNode
}
const PageWrapperShadow = ({ breadcrumbBar, rightImageSrc, children }: PageWrapperShadowProps) => {
const PageWrapperShadow = ({
breadcrumbBar,
rightImageSrc,
rightImageLogo,
children,
}: PageWrapperShadowProps) => {
return (
<div className="layout">
<section className="layout-left">
@ -18,7 +25,8 @@ const PageWrapperShadow = ({ breadcrumbBar, rightImageSrc, children }: PageWrapp
</section>
<section className="layout-right">
<div className="image-container">
<img src={rightImageSrc} alt="background" />
<img src={rightImageSrc} alt="background" className="background-img" />
{rightImageLogo ? <NimbusLogoMark /> : null}
</div>
</section>
</div>

14
src/components/PageWrappers/layout.css
View File

@ -26,7 +26,7 @@
flex-wrap: wrap;
justify-content: end;
height: 100%;
padding: 70px 0 0;
/* padding: 70px 0 0; */
}
.container-inner {
max-width: 70%;
@ -49,6 +49,7 @@
height: 100%;
position: relative;
overflow: hidden;
color: #FFF;
}
.image-container::before {
display: block;
@ -65,7 +66,7 @@
height: 100%;
background: linear-gradient(to right, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 0.0));
}
.image-container img {
.image-container .background-img {
position: absolute;
top: 50%;
left: 50%;
@ -73,3 +74,12 @@
height: 140%;
width: auto;
}
.image-container .nimbus-logomark {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.image-container .nimbus-logomark svg {
height: 73px;
}

35
src/pages/ConnectDevicePage/ConnectDevicePage.tsx
View File

@ -1,12 +1,12 @@
import { useState } from 'react'
import BreadcrumbBar from '../../components/General/BreadcrumbBar/BreadcrumbBar'
import { Button as StatusButton, Tag, Text, Avatar, Checkbox } from '@status-im/components'
import { Button as StatusButton, Text, Avatar, Checkbox } from '@status-im/components'
import { Label, Separator, XStack, YStack } from 'tamagui'
import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow'
import NimbusLogo from '../../components/Logos/NimbusLogo'
import Titles from '../../components/General/Titles'
import LabelInputField from '../../components/General/LabelInputField'
import { AddSmallIcon, ConnectionIcon, NodeIcon, SwapIcon } from '@status-im/icons'
import Header from '../../components/General/Header'
import { NodeIcon } from '@status-im/icons'
const ConnectDevicePage = () => {
const [autoConnectChecked, setAutoConnectChecked] = useState(false)
@ -16,24 +16,17 @@ const ConnectDevicePage = () => {
<PageWrapperShadow
breadcrumbBar={<BreadcrumbBar breadcrumbList={['Nodes', 'Nimbus', 'Connect Device']} />}
rightImageSrc="./background-images/day-night-bg.png"
rightImageLogo={true}
>
<div className="connection-page">
<XStack justifyContent={'space-between'}>
<NimbusLogo />
<XStack space={'$2'} alignItems="center">
<Tag icon={ConnectionIcon} label="Connect" size={32} selected />
<Tag icon={SwapIcon} label="Pair" size={32} />
<Tag icon={AddSmallIcon} label="Create" size={32} />
</XStack>
</XStack>
<YStack space={'$3'}>
<Header selectedTag="connect" />
<article className="content">
<section className="mb-1">
<Titles
title="Connect Device"
subtitle="Configure your device to connect to the Nimbus Node Manager"
/>
</section>
<section className="mb-1">
<YStack my={16}>
<XStack
width={'100%'}
alignItems="center"
@ -65,8 +58,8 @@ const ConnectDevicePage = () => {
<XStack width={'100%'} alignItems="center">
<LabelInputField labelText="API Token" placeholderText="****_*****_*****" />
</XStack>
</section>
<section className="mb-1">
</YStack>
<YStack my={16}>
<YStack>
<Text size={13} weight="regular" color={'#647084'}>
Device Avatar
@ -79,9 +72,9 @@ const ConnectDevicePage = () => {
<LabelInputField labelText="Device Color" placeholderText="#011892" />
</XStack>
</YStack>
</section>
</YStack>
<Separator alignSelf="stretch" borderColor={'#F0F2F5'} />
<section className="my-1">
<YStack my={16}>
<YStack>
<Text size={19} weight="semibold">
Settings
@ -101,10 +94,10 @@ const ConnectDevicePage = () => {
</Label>
</XStack>
<Separator alignSelf="stretch" borderColor={'#F0F2F5'} />
</section>
</YStack>
<StatusButton icon={<NodeIcon size={20} />}>Connect Device</StatusButton>
</article>
</div>
</YStack>
</PageWrapperShadow>
)
}

20
src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx
View File

@ -1,24 +1,20 @@
import { useState } from 'react'
import { Button as StatusButton, Text, Avatar, Checkbox } from '@status-im/components'
import { NodeIcon, ReactionIcon } from '@status-im/icons'
import { Label, Separator, XStack, YStack } from 'tamagui'
import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow'
import NimbusLogo from '../../components/Logos/NimbusLogo'
import TagContainer from '../../components/General/TagContainer'
import Header from '../../components/General/Header'
import Titles from '../../components/General/Titles'
import LabelInputField from '../../components/General/LabelInputField'
import ColorPicker from '../../components/General/ColorPicker'
import { NodeIcon, ReactionIcon } from '@status-im/icons'
const CreateLocalNodePage = () => {
const [autoConnectChecked, setAutoConnectChecked] = useState(false)
return (
<PageWrapperShadow rightImageSrc="./background-images/day-night-bg.png">
<div className="connection-page">
<XStack justifyContent={'space-between'}>
<NimbusLogo />
<TagContainer />
</XStack>
<PageWrapperShadow rightImageSrc="./background-images/day-night-bg.png" rightImageLogo={true}>
<YStack space={'$3'}>
<Header selectedTag="create" />
<article className="content">
<Titles
title="Create Local Node"
@ -35,7 +31,7 @@ const CreateLocalNodePage = () => {
</Text>
<XStack my={10}>
<Avatar type="account" size={80} name="Device Avatar" />
<ReactionIcon size={20} />
<Avatar type="icon" size={32} icon={<ReactionIcon size={20} />} />
</XStack>
</YStack>
<YStack>
@ -65,9 +61,9 @@ const CreateLocalNodePage = () => {
</XStack>
<Separator alignSelf="stretch" borderColor={'#F0F2F5'} />
</YStack>
<StatusButton icon={<NodeIcon size={16} />}>Continue</StatusButton>
<StatusButton icon={<NodeIcon size={20} />}>Continue</StatusButton>
</article>
</div>
</YStack>
</PageWrapperShadow>
)
}

29
src/pages/LandingPage/LandingPage.tsx
View File

@ -1,30 +1,33 @@
import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow'
import './LandingPage.css'
import QuickStartBar from '../../components/General/QuickStartBar/QuickStartBar'
import Titles from '../../components/General/Titles'
import { Button as StatusButton } from '@status-im/components'
import NimbusLogo from '../../components/Logos/NimbusLogo'
import { XStack, YStack } from 'tamagui'
import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow'
import Title from '../../components/General/Title'
import NimbusLogo from '../../components/Logos/NimbusLogo'
import { NodeIcon } from '@status-im/icons'
import { Button as StatusButton, Text } from '@status-im/components'
import QuickStartBar from '../../components/General/QuickStartBar/QuickStartBar'
function LandingPage() {
return (
<>
<PageWrapperShadow rightImageSrc="./background-images/landing-page-bg.png">
<div className="landing-page">
<XStack>
<YStack className="landing-page">
<XStack pt={'70px'}>
<NimbusLogo />
</XStack>
<YStack>
<Titles
title="Light and performant clients, for all Ethereum validators."
subtitle="Nimbus Nodes allows you to take control and ownership of the services you wish to run in a completely trustless and decentralized manner."
/>
<YStack style={{ width: '100%', margin: '30vh 0 4vh' }}>
<Title>Light and performant clients, for all Ethereum validators.</Title>
<Text size={15} weight="regular">
<strong>Nimbus Nodes</strong> allows you to take control and ownership of the services
you wish to run in a completely trustless and decentralized manner.
</Text>
</YStack>
<XStack>
<StatusButton icon={<NodeIcon size={20} />}>Get Started</StatusButton>
</XStack>
</YStack>
</div>
</PageWrapperShadow>
<QuickStartBar />
</>

16
src/pages/PairDevice/PairDevice.tsx
View File

@ -1,15 +1,15 @@
import { Separator, XStack, YStack } from 'tamagui'
import { useState } from 'react'
import { Button, Checkbox, Tag, Text } from '@status-im/components'
import { Button, Checkbox, Text } from '@status-im/components'
import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow'
import SyncStatus from './SyncStatus'
import NimbusLogo from '../../components/Logos/NimbusLogo'
import Titles from '../../components/General/Titles'
import PairedSuccessfully from './PairedSuccessfully'
import CreateAvatar from './CreateAvatar'
import GenerateId from './GenerateId'
import { AddSmallIcon, NodeIcon, SwapIcon } from '@status-im/icons'
import { NodeIcon } from '@status-im/icons'
import Header from '../../components/General/Header'
const PairDevice = () => {
const [autoChecked, setAutoChecked] = useState(false)
@ -22,20 +22,14 @@ const PairDevice = () => {
}
return (
<PageWrapperShadow rightImageSrc="./background-images/day-night-bg.png">
<PageWrapperShadow rightImageSrc="./background-images/day-night-bg.png" rightImageLogo={true}>
<YStack
space={'$3'}
style={{
maxWidth: '100%',
}}
>
<XStack style={{ justifyContent: 'space-between' }}>
<NimbusLogo />
<XStack space={'$2'} style={{ alignItems: 'center' }}>
<Tag icon={SwapIcon} label="Pair" size={32} selected />
<Tag icon={AddSmallIcon} label="Create" size={32} />
</XStack>
</XStack>
<Header selectedTag="pair" />
<Titles title="Pair Device" subtitle="Pair your device to the Nimbus Node Manager" />
{isPaired ? <PairedSuccessfully /> : <GenerateId isAwaitingPairing={isAwaitingPairing} />}
{!isPaired && (