Merge branch 'main' of github.com:nimbus-gui/nimbus-gui into ia.correcting-styles
This commit is contained in:
Ivana Andersson
commit
8e6fd573ca
Binary file not shown.
|
Before Width: | Height: | Size: 499 B |
|
|
@ -1,10 +0,0 @@
|
|||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="16/placeholder" clip-path="url(#clip0_1311_16617)">
|
||||
<path id="body" fill-rule="evenodd" clip-rule="evenodd" d="M0.900146 7.9999C0.900146 4.07868 4.07892 0.899902 8.00015 0.899902C11.9214 0.899902 15.1001 4.07868 15.1001 7.9999C15.1001 11.9211 11.9214 15.0999 8.00015 15.0999C4.07893 15.0999 0.900146 11.9211 0.900146 7.9999ZM8.00015 2.0999C6.58695 2.0999 5.2898 2.59676 4.27385 3.42531L7.99995 7.15142L11.7262 3.42514C10.7103 2.59669 9.41325 2.0999 8.00015 2.0999ZM12.5748 4.27366L8.84848 7.99995L12.5747 11.7262C13.4033 10.7103 13.9001 9.4131 13.9001 7.9999C13.9001 6.58673 13.4033 5.2896 12.5748 4.27366ZM7.15143 7.99995L3.42534 4.27387C2.59692 5.28978 2.10015 6.58683 2.10015 7.9999C2.10015 9.413 2.59693 10.7101 3.42539 11.726L7.15143 7.99995ZM4.2739 12.5745L7.99995 8.84848L11.7262 12.5747C10.7103 13.4031 9.41322 13.8999 8.00015 13.8999C6.58697 13.8999 5.28984 13.4031 4.2739 12.5745Z" fill="#E95460"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_1311_16617">
|
||||
<rect width="16" height="16" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 446 B |
Binary file not shown.
|
Before Width: | Height: | Size: 541 B |
Binary file not shown.
|
Before Width: | Height: | Size: 427 B |
|
|
@ -1,6 +0,0 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="20/refresh">
|
||||
<path id="body" fill-rule="evenodd" clip-rule="evenodd" d="M12.6404 3.62514C11.2371 3.04387 9.68124 2.94189 8.21407 3.33502C6.7469 3.72814 5.45045 4.59441 4.52578 5.79945C3.60112 7.0045 3.09992 8.48098 3.09992 9.99991C3.09992 11.5188 3.60112 12.9953 4.52578 14.2004C5.45045 15.4054 6.7469 16.2717 8.21407 16.6648C9.68124 17.0579 11.2371 16.9559 12.6404 16.3747C14.0437 15.7934 15.216 14.7653 15.9755 13.4499L17.0147 14.0499C16.1232 15.5941 14.747 16.801 13.0997 17.4833C11.4523 18.1657 9.62582 18.2854 7.90349 17.8239C6.18116 17.3624 4.65923 16.3455 3.57376 14.9309C2.48828 13.5163 1.89992 11.783 1.89992 9.99991C1.89992 8.21682 2.48828 6.48356 3.57376 5.06894C4.65923 3.65432 6.18116 2.6374 7.90349 2.17591C9.62582 1.71441 11.4523 1.83412 13.0997 2.51648C14.166 2.95819 15.1188 3.61967 15.9 4.45017L15.9 2.99978L17.1 2.99979L17.1 6.49979L17.0999 7.09979H16.5L13 7.09979V5.89979L15.5496 5.89979C14.8075 4.89526 13.8033 4.1068 12.6404 3.62514Z" fill="#09101C"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.1 KiB |
|
|
@ -1,5 +0,0 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="20/refresh">
|
||||
<path id="body" fill-rule="evenodd" clip-rule="evenodd" d="M12.6404 3.62514C11.2371 3.04387 9.68124 2.94189 8.21407 3.33502C6.7469 3.72814 5.45045 4.59441 4.52578 5.79945C3.60112 7.0045 3.09992 8.48098 3.09992 9.99991C3.09992 11.5188 3.60112 12.9953 4.52578 14.2004C5.45045 15.4054 6.7469 16.2717 8.21407 16.6648C9.68124 17.0579 11.2371 16.9559 12.6404 16.3747C14.0437 15.7934 15.216 14.7653 15.9755 13.4499L17.0147 14.0499C16.1232 15.5941 14.747 16.801 13.0997 17.4833C11.4523 18.1657 9.62582 18.2854 7.90349 17.8239C6.18116 17.3624 4.65923 16.3455 3.57376 14.9309C2.48828 13.5163 1.89992 11.783 1.89992 9.99991C1.89992 8.21682 2.48828 6.48356 3.57376 5.06894C4.65923 3.65432 6.18116 2.6374 7.90349 2.17591C9.62582 1.71441 11.4523 1.83412 13.0997 2.51648C14.166 2.95819 15.1188 3.61967 15.9 4.45017L15.9 2.99978L17.1 2.99979L17.1 6.49979L17.0999 7.09979H16.5L13 7.09979V5.89979L15.5496 5.89979C14.8075 4.89526 13.8033 4.1068 12.6404 3.62514Z" fill="#A1ABBD"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 486 B |
Binary file not shown.
|
Before Width: | Height: | Size: 557 B |
|
|
@ -1,10 +0,0 @@
|
|||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="16/token" clip-path="url(#clip0_101_177067)">
|
||||
<path id="body" fill-rule="evenodd" clip-rule="evenodd" d="M2.0999 8.00002C2.0999 4.74154 4.74142 2.10002 7.9999 2.10002C11.2584 2.10002 13.8999 4.74154 13.8999 8.00002C13.8999 11.2585 11.2584 13.9 7.9999 13.9C4.74142 13.9 2.0999 11.2585 2.0999 8.00002ZM7.9999 0.900024C4.07868 0.900024 0.899902 4.0788 0.899902 8.00002C0.899902 11.9212 4.07868 15.1 7.9999 15.1C11.9211 15.1 15.0999 11.9212 15.0999 8.00002C15.0999 4.0788 11.9211 0.900024 7.9999 0.900024ZM7.31034 5.76572C7.64449 5.59963 8.00358 5.55901 8.34841 5.64132C8.69532 5.72413 9.03172 5.93274 9.30682 6.26287L10.2287 5.49464C9.80453 4.98565 9.25002 4.62282 8.62702 4.47411L8.59999 4.46781V3.50007H7.39999V4.46782C7.18648 4.5165 6.97733 4.59119 6.77622 4.69115C6.19937 4.97788 5.7242 5.45404 5.3971 6.04147C5.07015 6.62866 4.89999 7.30995 4.89999 8.00008C4.89999 8.6902 5.07015 9.37149 5.3971 9.95868C5.7242 10.5461 6.19937 11.0223 6.77622 11.309C6.97725 11.4089 7.18632 11.4836 7.39975 11.5323V12.5001H8.59975V11.5324C8.60884 11.5303 8.61793 11.5282 8.62702 11.526C9.25002 11.3773 9.80453 11.0145 10.2287 10.5055L9.30682 9.73728C9.03172 10.0674 8.69532 10.276 8.34841 10.3588C8.00358 10.4411 7.64449 10.4005 7.31034 10.2344C6.97357 10.067 6.66784 9.77415 6.44553 9.3749C6.22308 8.97539 6.09999 8.49664 6.09999 8.00008C6.09999 7.50351 6.22308 7.02476 6.44553 6.62525C6.66784 6.226 6.97357 5.93312 7.31034 5.76572Z" fill="#647084"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_101_177067">
|
||||
<rect width="16" height="16" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.6 KiB |
|
|
@ -2,6 +2,7 @@ import StandartLineChart from './StandardLineChart'
|
|||
import IconText from '../General/IconText'
|
||||
import { Paragraph, Separator, XStack, YStack } from 'tamagui'
|
||||
import { Shadow, Text } from '@status-im/components'
|
||||
import { CheckCircleIcon, IncorrectIcon } from '@status-im/icons'
|
||||
|
||||
type DataPoint = {
|
||||
x: number
|
||||
|
|
@ -67,7 +68,7 @@ const DeviceCPULoad: React.FC<DeviceCPULoadProps> = ({ load }) => {
|
|||
<Separator borderColor={'#e3e3e3'} />
|
||||
<XStack space={'$4'} style={{ padding: '10px 16px 10px 16px' }}>
|
||||
<IconText
|
||||
icon={message === 'Good' ? './icons/check-circle.png' : './icons/alert.png'}
|
||||
icon={message === 'Good' ? <CheckCircleIcon size={16} /> : <IncorrectIcon size={16} />}
|
||||
weight={'semibold'}
|
||||
>
|
||||
{message}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import StandartLineChart from './StandardLineChart'
|
|||
import IconText from '../General/IconText'
|
||||
import { Paragraph, Separator, XStack, YStack } from 'tamagui'
|
||||
import { Shadow as ShadowBox, Text } from '@status-im/components'
|
||||
import { CheckCircleIcon, IncorrectIcon } from '@status-im/icons'
|
||||
|
||||
type DataPoint = {
|
||||
x: number
|
||||
|
|
@ -70,7 +71,9 @@ const DeviceMemoryHealth = ({ currentMemory, maxMemory }: DeviceMemoryHealthProp
|
|||
</XStack>
|
||||
<Separator borderColor={'#e3e3e3'} />
|
||||
<XStack space={'$4'} style={{ padding: '10px 16px 10px 16px' }}>
|
||||
<IconText icon={message === 'Good' ? './icons/check-circle.png' : './icons/alert.png'}>
|
||||
<IconText
|
||||
icon={message === 'Good' ? <CheckCircleIcon size={16} /> : <IncorrectIcon size={16} />}
|
||||
>
|
||||
{message}
|
||||
</IconText>
|
||||
{message === 'Poor' && (
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import StandartLineChart from './StandardLineChart'
|
|||
import IconText from '../General/IconText'
|
||||
import { Paragraph, Separator, XStack, YStack } from 'tamagui'
|
||||
import { Shadow as ShadowBox, Text } from '@status-im/components'
|
||||
import { CheckCircleIcon, IncorrectIcon } from '@status-im/icons'
|
||||
|
||||
type DataPoint = {
|
||||
x: number
|
||||
|
|
@ -75,7 +76,9 @@ const DeviceNetworkHealth = ({ uploadRate, downloadRate }: DeviceNetworkHealthPr
|
|||
</XStack>
|
||||
<Separator borderColor={'#e3e3e3'} />
|
||||
<XStack space={'$4'} style={{ padding: '10px 16px 10px 16px' }}>
|
||||
<IconText icon={message === 'Good' ? './icons/check-circle.png' : './icons/alert.png'}>
|
||||
<IconText
|
||||
icon={message === 'Good' ? <CheckCircleIcon size={16} /> : <IncorrectIcon size={16} />}
|
||||
>
|
||||
{message}
|
||||
</IconText>
|
||||
{message === 'Poor' && (
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import IconText from '../General/IconText'
|
|||
import { Paragraph, Separator, XStack, YStack } from 'tamagui'
|
||||
import StandardGauge from './StandardGauge'
|
||||
import { Shadow, Text } from '@status-im/components'
|
||||
import { CheckCircleIcon, IncorrectIcon } from '@status-im/icons'
|
||||
interface DeviceStorageHealthProps {
|
||||
storage: number
|
||||
maxStorage: number
|
||||
|
|
@ -69,7 +70,7 @@ const DeviceStorageHealth: React.FC<DeviceStorageHealthProps> = ({ storage, maxS
|
|||
<Separator borderColor={'#e3e3e3'} />
|
||||
<XStack space={'$4'} style={{ padding: '10px 16px 10px 16px' }}>
|
||||
<IconText
|
||||
icon={message === 'Good' ? './icons/check-circle.png' : './icons/alert.png'}
|
||||
icon={message === 'Good' ? <CheckCircleIcon size={16} /> : <IncorrectIcon size={16} />}
|
||||
weight={'semibold'}
|
||||
>
|
||||
{message}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import { XStack } from 'tamagui'
|
||||
import Icon from './Icon'
|
||||
import { Text } from '@status-im/components'
|
||||
import { ReactNode } from 'react'
|
||||
|
||||
type IconTextProps = {
|
||||
icon: string
|
||||
icon: ReactNode
|
||||
children: string
|
||||
weight?: 'regular' | 'medium' | 'semibold'
|
||||
}
|
||||
|
|
@ -16,7 +16,7 @@ const IconText = ({ icon, children, weight }: IconTextProps) => {
|
|||
}}
|
||||
space={'$2'}
|
||||
>
|
||||
<Icon src={icon} />
|
||||
{icon}
|
||||
<Text size={13} color={'#000000'} weight={weight}>
|
||||
{children}
|
||||
</Text>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { GREEN_CHECKMARK_ICON, RED_CHECKMARK_ICON } from '../../constants'
|
||||
import { CheckCircleIcon, IncorrectIcon } from '@status-im/icons'
|
||||
import IconText from './IconText'
|
||||
|
||||
type StatusIconTextProps = {
|
||||
|
|
@ -10,7 +10,7 @@ type StatusIconTextProps = {
|
|||
|
||||
const StatusIconText = ({ percentage, threshold, goodText, badText }: StatusIconTextProps) => {
|
||||
const isGood = percentage < threshold
|
||||
const icon = isGood ? GREEN_CHECKMARK_ICON : RED_CHECKMARK_ICON
|
||||
const icon = isGood ? <CheckCircleIcon size={16} /> : <IncorrectIcon size={16} />
|
||||
const text = isGood ? goodText : badText
|
||||
|
||||
return <IconText icon={icon}>{text}</IconText>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,7 @@
|
|||
import { Tag } from '@status-im/components'
|
||||
import { XStack } from 'tamagui'
|
||||
import PairIcon from '../Icons/PairIcon'
|
||||
import CreateIcon from '../Icons/CreateIcon'
|
||||
import './TagContainer.css'
|
||||
import ConnectIcon from '../Icons/ConnectIcon'
|
||||
import { ConnectionIcon, AddSmallIcon, SwapIcon } from '@status-im/icons'
|
||||
|
||||
type TagContainerProps = {
|
||||
selectedTag: 'pair' | 'create' | 'connect'
|
||||
|
|
@ -13,10 +11,10 @@ const TagContainer = ({ selectedTag }: TagContainerProps) => {
|
|||
return (
|
||||
<XStack space={'$2'} alignItems="center" className="tag-container">
|
||||
{selectedTag === 'connect' ? (
|
||||
<Tag selected={selectedTag === 'connect'} icon={ConnectIcon} label="Connect" size={32} />
|
||||
<Tag selected={selectedTag === 'connect'} icon={ConnectionIcon} label="Connect" size={32} />
|
||||
) : null}
|
||||
<Tag selected={selectedTag === 'pair'} icon={PairIcon} label="Pair" size={32} />
|
||||
<Tag selected={selectedTag === 'create'} icon={CreateIcon} label="Create" size={32} />
|
||||
<Tag selected={selectedTag === 'pair'} icon={SwapIcon} label="Pair" size={32} />
|
||||
<Tag selected={selectedTag === 'create'} icon={AddSmallIcon} label="Create" size={32} />
|
||||
</XStack>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { XStack, YStack } from 'tamagui'
|
||||
import { Button, Text } from '@status-im/components'
|
||||
import Icon from './Icon'
|
||||
import Title from './Title'
|
||||
import { RevealIcon } from '@status-im/icons'
|
||||
|
||||
type TitlesProps = {
|
||||
title: string
|
||||
|
|
@ -15,7 +15,7 @@ const Titles = ({ title, subtitle, isAdvancedSettings }: TitlesProps) => {
|
|||
<XStack style={{ justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<Title color={'#09101C'}>{title}</Title>
|
||||
{isAdvancedSettings && (
|
||||
<Button size={32} variant="outline" icon={<Icon src={'./icons/reveal.png'} />}>
|
||||
<Button size={32} variant="outline" icon={<RevealIcon size={20} />}>
|
||||
Advanced Settings
|
||||
</Button>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -1,18 +0,0 @@
|
|||
function ConnectIcon() {
|
||||
return (
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="20/connection">
|
||||
<path
|
||||
id="body"
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M9.99978 1.8999C8.21669 1.8999 6.48343 2.48826 5.06881 3.57374C3.6542 4.65921 2.63728 6.18114 2.17578 7.90347L3.33489 8.21405C3.72802 6.74688 4.59428 5.45043 5.79933 4.52576C7.00437 3.6011 8.48086 3.0999 9.99978 3.0999C11.5187 3.0999 12.9952 3.6011 14.2002 4.52577C15.4053 5.45043 16.2715 6.74688 16.6647 8.21405L17.8238 7.90347C17.3623 6.18114 16.3454 4.65922 14.9307 3.57374C13.5161 2.48827 11.7829 1.8999 9.99978 1.8999ZM9.99988 4.9C8.87719 4.9 7.78588 5.27045 6.8952 5.9539C6.00451 6.63734 5.36423 7.59559 5.07366 8.68002L6.23277 8.9906C6.45497 8.16133 6.9446 7.42856 7.62571 6.90592C8.30682 6.38329 9.14136 6.1 9.99988 6.1C10.8584 6.1 11.6929 6.38329 12.374 6.90592C13.0552 7.42856 13.5448 8.16134 13.767 8.99061L14.9261 8.68002C14.6355 7.59559 13.9952 6.63735 13.1046 5.9539C12.2139 5.27045 11.1226 4.9 9.99988 4.9ZM9.99988 10.1C8.95054 10.1 8.09988 10.9507 8.09988 12C8.09988 13.0493 8.95054 13.9 9.99988 13.9C11.0492 13.9 11.8999 13.0493 11.8999 12C11.8999 10.9507 11.0492 10.1 9.99988 10.1ZM6.89988 12C6.89988 10.2879 8.2878 8.9 9.99988 8.9C11.712 8.9 13.0999 10.2879 13.0999 12C13.0999 13.5068 12.0248 14.7625 10.5999 15.042V17.5H9.39988V15.042C7.97494 14.7625 6.89988 13.5068 6.89988 12Z"
|
||||
fill="#1B273D"
|
||||
fillOpacity="0.7"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default ConnectIcon
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
function CreateIcon() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<circle cx="10" cy="10" r="7.5" stroke="#1B273D" strokeOpacity="0.7" strokeWidth="1.2" />
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M10.6 9.4V6.5H9.4V9.4L6.5 9.4V10.6L9.4 10.6V13.5H10.6V10.6L13.5 10.6L13.5 9.4L10.6 9.4Z"
|
||||
fill="#1B273D"
|
||||
fillOpacity="0.7"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default CreateIcon
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
function NodeIcon() {
|
||||
return (
|
||||
<span>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
>
|
||||
<g clipPath="url(#clip0_760_1602)">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M4.9999 2.60002C3.67442 2.60002 2.5999 3.67454 2.5999 5.00002C2.5999 6.32551 3.67442 7.40002 4.9999 7.40002C6.32539 7.40002 7.3999 6.32551 7.3999 5.00002C7.3999 3.67454 6.32539 2.60002 4.9999 2.60002ZM1.3999 5.00002C1.3999 3.0118 3.01168 1.40002 4.9999 1.40002C6.98813 1.40002 8.5999 3.0118 8.5999 5.00002C8.5999 5.77749 8.35345 6.4974 7.9344 7.08587L9.48712 8.63859C10.4478 7.86383 11.6697 7.4 13 7.4C16.0928 7.4 18.6 9.90721 18.6 13C18.6 16.0928 16.0928 18.6 13 18.6C9.9072 18.6 7.4 16.0928 7.4 13C7.4 11.6697 7.86383 10.4478 8.63859 9.48712L7.08589 7.93442C6.49739 8.35353 5.77743 8.60002 4.9999 8.60002C3.01168 8.60002 1.3999 6.98825 1.3999 5.00002ZM8.6 13C8.6 10.5699 10.5699 8.6 13 8.6C15.4301 8.6 17.4 10.5699 17.4 13C17.4 15.4301 15.4301 17.4 13 17.4C10.5699 17.4 8.6 15.4301 8.6 13Z"
|
||||
fill="white"
|
||||
fillOpacity="0.7"
|
||||
/>
|
||||
<path
|
||||
d="M7.9344 7.08587L7.52711 6.79585C7.3855 6.99472 7.40821 7.26679 7.58085 7.43943L7.9344 7.08587ZM9.48712 8.63859L9.13357 8.99215C9.31425 9.17283 9.6021 9.18821 9.801 9.0278L9.48712 8.63859ZM8.63859 9.48712L9.0278 9.801C9.18821 9.6021 9.17283 9.31425 8.99215 9.13357L8.63859 9.48712ZM7.08589 7.93442L7.43945 7.58087C7.26681 7.40823 6.99472 7.38552 6.79585 7.52715L7.08589 7.93442ZM3.0999 5.00002C3.0999 3.95068 3.95056 3.10002 4.9999 3.10002V2.10002C3.39828 2.10002 2.0999 3.3984 2.0999 5.00002H3.0999ZM4.9999 6.90002C3.95056 6.90002 3.0999 6.04937 3.0999 5.00002H2.0999C2.0999 6.60165 3.39828 7.90002 4.9999 7.90002V6.90002ZM6.8999 5.00002C6.8999 6.04937 6.04924 6.90002 4.9999 6.90002V7.90002C6.60153 7.90002 7.8999 6.60165 7.8999 5.00002H6.8999ZM4.9999 3.10002C6.04924 3.10002 6.8999 3.95068 6.8999 5.00002H7.8999C7.8999 3.3984 6.60153 2.10002 4.9999 2.10002V3.10002ZM4.9999 0.900024C2.73553 0.900024 0.899902 2.73566 0.899902 5.00002H1.8999C1.8999 3.28794 3.28782 1.90002 4.9999 1.90002V0.900024ZM9.0999 5.00002C9.0999 2.73566 7.26427 0.900024 4.9999 0.900024V1.90002C6.71198 1.90002 8.0999 3.28794 8.0999 5.00002H9.0999ZM8.34169 7.3759C8.81905 6.70553 9.0999 5.88483 9.0999 5.00002H8.0999C8.0999 5.67015 7.88784 6.28926 7.52711 6.79585L8.34169 7.3759ZM9.84068 8.28504L8.28795 6.73232L7.58085 7.43943L9.13357 8.99215L9.84068 8.28504ZM9.801 9.0278C10.676 8.32213 11.788 7.9 13 7.9V6.9C11.5514 6.9 10.2196 7.40554 9.17324 8.24939L9.801 9.0278ZM13 7.9C15.8167 7.9 18.1 10.1833 18.1 13H19.1C19.1 9.63106 16.3689 6.9 13 6.9V7.9ZM18.1 13C18.1 15.8167 15.8167 18.1 13 18.1V19.1C16.3689 19.1 19.1 16.3689 19.1 13H18.1ZM13 18.1C10.1833 18.1 7.9 15.8167 7.9 13H6.9C6.9 16.3689 9.63106 19.1 13 19.1V18.1ZM7.9 13C7.9 11.788 8.32213 10.676 9.0278 9.801L8.24939 9.17324C7.40554 10.2196 6.9 11.5514 6.9 13H7.9ZM6.73234 8.28798L8.28504 9.84068L8.99215 9.13357L7.43945 7.58087L6.73234 8.28798ZM4.9999 9.10002C5.88478 9.10002 6.70554 8.81913 7.37594 8.3417L6.79585 7.52715C6.28924 7.88793 5.67008 8.10002 4.9999 8.10002V9.10002ZM0.899902 5.00002C0.899902 7.26439 2.73553 9.10002 4.9999 9.10002V8.10002C3.28782 8.10002 1.8999 6.71211 1.8999 5.00002H0.899902ZM13 8.1C10.2938 8.1 8.1 10.2938 8.1 13H9.1C9.1 10.8461 10.8461 9.1 13 9.1V8.1ZM17.9 13C17.9 10.2938 15.7062 8.1 13 8.1V9.1C15.1539 9.1 16.9 10.8461 16.9 13H17.9ZM13 17.9C15.7062 17.9 17.9 15.7062 17.9 13H16.9C16.9 15.1539 15.1539 16.9 13 16.9V17.9ZM8.1 13C8.1 15.7062 10.2938 17.9 13 17.9V16.9C10.8461 16.9 9.1 15.1539 9.1 13H8.1Z"
|
||||
fill="white"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_760_1602">
|
||||
<rect width="20" height="20" fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
export default NodeIcon
|
||||
|
|
@ -1,61 +0,0 @@
|
|||
function PairIcon() {
|
||||
return (
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M13.4517 10.8951L16.952 6.89508L17.2978 6.49996L16.952 6.10484L13.4517 2.10489L12.5486 2.89514L15.7032 6.49997L12.5486 10.1049L13.4517 10.8951ZM6.5487 9.10488L3.0484 13.1049L2.70264 13.5001L3.0484 13.8952L6.5487 17.8951L7.45176 17.1049L4.29722 13.5L7.45176 9.89512L6.5487 9.10488Z"
|
||||
fill="#1B273D"
|
||||
fillOpacity="0.7"
|
||||
/>
|
||||
<rect
|
||||
x="4"
|
||||
y="7.5"
|
||||
width="2"
|
||||
height="12"
|
||||
transform="rotate(-90 4 7.5)"
|
||||
fill="url(#paint0_linear_760_2959)"
|
||||
/>
|
||||
<g mask="url(#mask0_760_2959)">
|
||||
<path d="M4.5 6.50006L16 6.50006" stroke="#1B273D" strokeOpacity="0.7" strokeWidth="1.2" />
|
||||
</g>
|
||||
<rect
|
||||
x="16"
|
||||
y="12.5"
|
||||
width="2"
|
||||
height="12"
|
||||
transform="rotate(90 16 12.5)"
|
||||
fill="url(#paint1_linear_760_2959)"
|
||||
/>
|
||||
<g mask="url(#mask1_760_2959)">
|
||||
<path d="M15.5 13.4999L4 13.4999" stroke="#1B273D" strokeOpacity="0.7" strokeWidth="1.2" />
|
||||
</g>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="paint0_linear_760_2959"
|
||||
x1="5"
|
||||
y1="8"
|
||||
x2="5"
|
||||
y2="13.5"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stopColor="#09101C" stopOpacity="0" />
|
||||
<stop offset="1" stopColor="#09101C" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint1_linear_760_2959"
|
||||
x1="17"
|
||||
y1="13"
|
||||
x2="17"
|
||||
y2="18.5"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stopColor="#09101C" stopOpacity="0" />
|
||||
<stop offset="1" stopColor="#09101C" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default PairIcon
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
function ReactionIcon() {
|
||||
return (
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="20/reaction">
|
||||
<path
|
||||
id="body"
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M9.2416 3.15729C10.5065 2.96514 11.7973 3.25797 12.9173 4.00409L13.5826 3.0054C12.2242 2.10051 10.6337 1.73206 9.06137 1.9709C7.49044 2.20954 6.04779 3.03734 4.9503 4.30368C3.8539 5.56876 3.15891 7.20428 2.95938 8.95297C2.75985 10.7017 3.06503 12.4813 3.83416 14.0184C4.60352 15.556 5.80023 16.7757 7.25373 17.4704C8.70989 18.1663 10.3311 18.2901 11.8595 17.8176C13.3854 17.3458 14.7159 16.312 15.6563 14.8979C16.5962 13.4846 17.0999 11.763 17.0999 9.99994H15.8999C15.8999 10.2934 15.8839 10.585 15.8524 10.8732C15.8428 10.8931 15.8307 10.9166 15.816 10.943C15.7594 11.0449 15.6664 11.185 15.5256 11.3258C15.2556 11.5958 14.7804 11.9 13.9499 11.9C13.1194 11.9 12.6442 11.5958 12.3742 11.3258C12.2334 11.185 12.1404 11.0449 12.0838 10.943C12.0556 10.8924 12.0372 10.8524 12.0268 10.8281C12.0216 10.8161 12.0185 10.8081 12.0173 10.8048L12.0169 10.8037L12.0177 10.806L12.0183 10.8079L12.0187 10.809L12.0189 10.8096C12.019 10.81 12.0191 10.8103 11.4499 11C10.8807 11.1898 10.8808 11.1901 10.8809 11.1905L10.8812 11.1912L10.8817 11.1927L10.8829 11.1963L10.8859 11.205L10.8947 11.2289C10.9018 11.2477 10.9114 11.2719 10.9238 11.3008C10.9486 11.3586 10.9848 11.4358 11.0348 11.5258C11.1344 11.7052 11.2914 11.94 11.5256 12.1743C12.0056 12.6542 12.7804 13.1 13.9499 13.1C14.514 13.1 14.9863 12.9963 15.3779 12.8351C15.1868 13.3304 14.9453 13.8001 14.6571 14.2334C13.8554 15.4389 12.7433 16.2883 11.505 16.6712C10.2691 17.0533 8.95894 16.9554 7.77119 16.3877C6.58079 15.8187 5.56884 14.8035 4.90732 13.4814C4.24558 12.159 3.97764 10.614 4.15165 9.08901C4.32565 7.56394 4.92997 6.15939 5.85712 5.08959C6.78319 4.02105 7.97527 3.34966 9.2416 3.15729ZM10.4999 8.49994C11.0522 8.49994 11.4999 7.82836 11.4999 6.99994C11.4999 6.17151 11.0522 5.49993 10.4999 5.49993C9.94762 5.49993 9.49991 6.17151 9.49991 6.99994C9.49991 7.82836 9.94762 8.49994 10.4999 8.49994ZM16.9999 6.99994C16.9999 7.82836 16.5522 8.49994 15.9999 8.49994C15.4476 8.49994 14.9999 7.82836 14.9999 6.99994C14.9999 6.17151 15.4476 5.49993 15.9999 5.49993C16.5522 5.49993 16.9999 6.17151 16.9999 6.99994Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
export default ReactionIcon
|
||||
|
|
@ -1,6 +1,3 @@
|
|||
export const GREEN_CHECKMARK_ICON = './icons/checkmark-circle-green.png'
|
||||
export const RED_CHECKMARK_ICON = './icons/remove-circle-red.png'
|
||||
|
||||
export const GOOD_STORAGE_TEXT =
|
||||
'You have plenty of storage available for additional node services.'
|
||||
export const GOOD_CPU_CLOCK_RATE_TEXT = '2.4GHz is recommended for CPU.'
|
||||
|
|
|
|||
|
|
@ -4,9 +4,10 @@ import { Button as StatusButton, Text, Avatar, Checkbox } from '@status-im/compo
|
|||
import { Label, Separator, XStack, YStack } from 'tamagui'
|
||||
import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow'
|
||||
import Titles from '../../components/General/Titles'
|
||||
import NodeIcon from '../../components/Icons/NodeIcon'
|
||||
|
||||
import LabelInputField from '../../components/General/LabelInputField'
|
||||
import Header from '../../components/General/Header'
|
||||
import { NodeIcon } from '@status-im/icons'
|
||||
|
||||
const ConnectDevicePage = () => {
|
||||
const [autoConnectChecked, setAutoConnectChecked] = useState(false)
|
||||
|
|
@ -95,7 +96,7 @@ const ConnectDevicePage = () => {
|
|||
</XStack>
|
||||
<Separator alignSelf="stretch" borderColor={'#F0F2F5'} />
|
||||
</YStack>
|
||||
<StatusButton icon={<NodeIcon />}>Connect Device</StatusButton>
|
||||
<StatusButton icon={<NodeIcon size={20} />}>Connect Device</StatusButton>
|
||||
</article>
|
||||
</YStack>
|
||||
</PageWrapperShadow>
|
||||
|
|
|
|||
|
|
@ -3,11 +3,10 @@ import { Button as StatusButton, Text, Avatar, Checkbox } from '@status-im/compo
|
|||
import { Label, Separator, XStack, YStack } from 'tamagui'
|
||||
import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow'
|
||||
import Titles from '../../components/General/Titles'
|
||||
import NodeIcon from '../../components/Icons/NodeIcon'
|
||||
import LabelInputField from '../../components/General/LabelInputField'
|
||||
import ReactionIcon from '../../components/Icons/ReactionIcon'
|
||||
import ColorPicker from '../../components/General/ColorPicker'
|
||||
import Header from '../../components/General/Header'
|
||||
import { NodeIcon, ReactionIcon } from '@status-im/icons'
|
||||
|
||||
const CreateLocalNodePage = () => {
|
||||
const [autoConnectChecked, setAutoConnectChecked] = useState(false)
|
||||
|
|
@ -32,7 +31,12 @@ const CreateLocalNodePage = () => {
|
|||
</Text>
|
||||
<XStack my={10}>
|
||||
<Avatar type="account" size={80} name="Device Avatar" />
|
||||
<Avatar type="icon" size={32} icon={<ReactionIcon />} backgroundColor={'white'} />
|
||||
<Avatar
|
||||
type="icon"
|
||||
size={32}
|
||||
icon={<ReactionIcon size={20} />}
|
||||
backgroundColor={'white'}
|
||||
/>
|
||||
</XStack>
|
||||
</YStack>
|
||||
<YStack>
|
||||
|
|
@ -62,7 +66,7 @@ const CreateLocalNodePage = () => {
|
|||
</XStack>
|
||||
<Separator alignSelf="stretch" borderColor={'#F0F2F5'} />
|
||||
</YStack>
|
||||
<StatusButton icon={<NodeIcon />}>Continue</StatusButton>
|
||||
<StatusButton icon={<NodeIcon size={20} />}>Continue</StatusButton>
|
||||
</article>
|
||||
</YStack>
|
||||
</PageWrapperShadow>
|
||||
|
|
|
|||
|
|
@ -6,15 +6,15 @@ import DeviceStorageHealth from '../../components/Charts/DeviceStorageHealth'
|
|||
import DeviceCPULoad from '../../components/Charts/DeviceCPULoad'
|
||||
import HealthInfoSection from '../../components/General/HealthInfoSection'
|
||||
import { Button, InformationBox } from '@status-im/components'
|
||||
import Icon from '../../components/General/Icon'
|
||||
import DeviceMemory from '../../components/Charts/DeviceMemoryHealth'
|
||||
import DeviceNetworkHealth from '../../components/Charts/DeviceNetworkHealth'
|
||||
import { CloseCircleIcon } from '@status-im/icons'
|
||||
import { useSelector } from 'react-redux'
|
||||
import { RootState } from '../../redux/store'
|
||||
|
||||
const DeviceHealthCheck = () => {
|
||||
const deviceHealthState = useSelector((state: RootState) => state.deviceHealth)
|
||||
console.log(deviceHealthState)
|
||||
|
||||
return (
|
||||
<PageWrapperShadow rightImageSrc="./background-images/eye-background.png">
|
||||
<YStack
|
||||
|
|
@ -58,7 +58,7 @@ const DeviceHealthCheck = () => {
|
|||
networkLatency={75}
|
||||
/>
|
||||
<InformationBox
|
||||
icon={<Icon src="./icons/close.png" width={11} height={11} />}
|
||||
icon={<CloseCircleIcon size={20} />}
|
||||
message="The information provided in the Nodes Health Check is meant to utilized as a guide to guage the readiness of your device, however please do your own due diligence prior to commiting any funds. Read our Health Check Disclosure for more information."
|
||||
/>
|
||||
<Stack style={{ marginTop: '1rem' }}>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import { Shadow, Text } from '@status-im/components'
|
|||
import Icon from '../../components/General/Icon'
|
||||
import StandardGauge from '../../components/Charts/StandardGauge'
|
||||
import IconText from '../../components/General/IconText'
|
||||
import { TokenIcon } from '@status-im/icons'
|
||||
|
||||
interface DeviceStorageHealthProps {
|
||||
synced: number
|
||||
|
|
@ -71,8 +72,7 @@ const SyncStatusCardConsensus: React.FC<DeviceStorageHealthProps> = ({ synced, t
|
|||
<Separator borderColor={'#e3e3e3'} />
|
||||
|
||||
<XStack space={'$2'} style={{ padding: '10px 16px 10px 16px' }}>
|
||||
<IconText icon="./icons/token.svg">{message}</IconText>
|
||||
|
||||
<IconText icon={<TokenIcon size={16} />}>{message}</IconText>
|
||||
<Text size={13}>
|
||||
{formatNumber(synced)} / {formatNumber(total)}
|
||||
</Text>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import { Separator, Stack, XStack, YStack } from 'tamagui'
|
|||
import { Shadow, Text } from '@status-im/components'
|
||||
import StandardGauge from '../../components/Charts/StandardGauge'
|
||||
import IconText from '../../components/General/IconText'
|
||||
import { TokenIcon } from '@status-im/icons'
|
||||
|
||||
interface DeviceStorageHealthProps {
|
||||
synced: number
|
||||
|
|
@ -72,8 +73,7 @@ const SyncStatusCardExecution: React.FC<DeviceStorageHealthProps> = ({ synced, t
|
|||
<Separator borderColor={'#e3e3e3'} />
|
||||
|
||||
<XStack space={'$2'} style={{ padding: '10px 16px 10px 16px' }}>
|
||||
<IconText icon="./icons/token.svg">{message}</IconText>
|
||||
|
||||
<IconText icon={<TokenIcon size={16} />}>{message}</IconText>
|
||||
<Text size={13}>
|
||||
{' '}
|
||||
{formatNumber(synced)} / {formatNumber(total)}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ 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 '../../components/Icons/NodeIcon'
|
||||
import { NodeIcon } from '@status-im/icons'
|
||||
import { Button as StatusButton, Text } from '@status-im/components'
|
||||
import QuickStartBar from '../../components/General/QuickStartBar/QuickStartBar'
|
||||
|
||||
|
|
@ -25,7 +25,7 @@ function LandingPage() {
|
|||
</YStack>
|
||||
|
||||
<XStack>
|
||||
<StatusButton icon={<NodeIcon />}>Get Started</StatusButton>
|
||||
<StatusButton icon={<NodeIcon size={20} />}>Get Started</StatusButton>
|
||||
</XStack>
|
||||
</YStack>
|
||||
</PageWrapperShadow>
|
||||
|
|
|
|||
|
|
@ -2,10 +2,9 @@ import { XStack, YStack } from 'tamagui'
|
|||
import LabelInputField from '../../components/General/LabelInputField'
|
||||
import { Avatar, Text } from '@status-im/components'
|
||||
import ColorPicker from '../../components/General/ColorPicker'
|
||||
import { ReactionIcon } from '@status-im/icons'
|
||||
|
||||
import ReactionIcon from '../../components/Icons/ReactionIcon'
|
||||
// create func component
|
||||
export const CreateAvatar = () => {
|
||||
const CreateAvatar = () => {
|
||||
return (
|
||||
<YStack my={16}>
|
||||
<XStack space>
|
||||
|
|
@ -18,7 +17,7 @@ export const CreateAvatar = () => {
|
|||
</Text>
|
||||
<XStack my={10}>
|
||||
<Avatar type="account" size={80} name="Device Avatar" />
|
||||
<Avatar type="icon" size={32} icon={<ReactionIcon />} backgroundColor={'white'} />
|
||||
<ReactionIcon size={20} />
|
||||
</XStack>
|
||||
</YStack>
|
||||
<YStack>
|
||||
|
|
@ -31,3 +30,5 @@ export const CreateAvatar = () => {
|
|||
</YStack>
|
||||
)
|
||||
}
|
||||
|
||||
export default CreateAvatar
|
||||
|
|
|
|||
|
|
@ -4,18 +4,18 @@ import { Button, Checkbox, Text } from '@status-im/components'
|
|||
|
||||
import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow'
|
||||
import SyncStatus from './SyncStatus'
|
||||
import NodeIcon from '../../components/Icons/NodeIcon'
|
||||
import Titles from '../../components/General/Titles'
|
||||
import PairedSuccessfully from './PairedSuccessfully'
|
||||
import { CreateAvatar } from './CreateAvatar'
|
||||
import CreateAvatar from './CreateAvatar'
|
||||
import GenerateId from './GenerateId'
|
||||
import { NodeIcon } from '@status-im/icons'
|
||||
import Header from '../../components/General/Header'
|
||||
|
||||
const PairDevice = () => {
|
||||
const [autoChecked, setAutoChecked] = useState(false)
|
||||
const [isAwaitingPairing, setIsAwaitingPairing] = useState(false)
|
||||
const isPaired = false
|
||||
const isPairing = true
|
||||
const isPairing = false
|
||||
|
||||
const changeSetIsAwaitingPairing = (result: boolean) => {
|
||||
setIsAwaitingPairing(result)
|
||||
|
|
@ -55,10 +55,10 @@ const PairDevice = () => {
|
|||
/>
|
||||
<Text size={15}>Auto Connect Paired Device</Text>
|
||||
</XStack>
|
||||
{isPaired && <CreateAvatar></CreateAvatar>}
|
||||
{isPaired && <CreateAvatar />}
|
||||
<Separator borderColor={'#e3e3e3'} />
|
||||
<XStack>
|
||||
<Button icon={<NodeIcon />} disabled={!isPaired}>
|
||||
<Button icon={<NodeIcon size={20} />} disabled={!isPaired}>
|
||||
Continue
|
||||
</Button>
|
||||
</XStack>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,12 @@
|
|||
import { useEffect, useState } from 'react'
|
||||
import { XStack, YStack } from 'tamagui'
|
||||
import { Button, IconButton, InformationBox, Text } from '@status-im/components'
|
||||
import { CloseCircleIcon } from '@status-im/icons'
|
||||
|
||||
import Icon from '../../components/General/Icon'
|
||||
import RefreshBlackIcon from '../../../public/icons/refresh-black.svg'
|
||||
import RefreshIcon from '../../../public/icons/refresh.svg'
|
||||
import BlockIcon from '../../../public/icons/block.svg'
|
||||
import ConnectionIcon from '../../../public/icons/connection.svg'
|
||||
import ConnectionIcon from '/icons/connection.svg'
|
||||
import { convertSecondsToTimerFormat } from '../../utilities'
|
||||
import { RefreshIcon } from '@status-im/icons'
|
||||
|
||||
type SyncStatusProps = {
|
||||
isPairing: boolean
|
||||
|
|
@ -61,9 +60,10 @@ const SyncStatus = ({
|
|||
</Text>
|
||||
)}
|
||||
<IconButton
|
||||
icon={<Icon src={isPairing ? RefreshBlackIcon : RefreshIcon} />}
|
||||
icon={<RefreshIcon size={16} />}
|
||||
onPress={resetTimer}
|
||||
variant="ghost"
|
||||
disabled={!isPairing}
|
||||
/>
|
||||
</XStack>
|
||||
{isPairing ? (
|
||||
|
|
@ -79,7 +79,7 @@ const SyncStatus = ({
|
|||
<InformationBox
|
||||
message="No connection has been created to a Nimbus service for over 3 minutes. Please ensure that the generated pairing ID was input into the CLI. If you are unable to pair device, consider connect via IP. "
|
||||
variant="error"
|
||||
icon={<Icon src={BlockIcon} />}
|
||||
icon={<CloseCircleIcon size={20} />}
|
||||
/>
|
||||
)}
|
||||
{isAwaitingPairing && (
|
||||
|
|
|
|||
Loading…
Reference in New Issue