diff --git a/public/icons/alert.png b/public/icons/alert.png deleted file mode 100644 index 149dff5b..00000000 Binary files a/public/icons/alert.png and /dev/null differ diff --git a/public/icons/block.svg b/public/icons/block.svg deleted file mode 100644 index 4a98b7a2..00000000 --- a/public/icons/block.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/public/icons/check-circle.png b/public/icons/check-circle.png deleted file mode 100644 index e42c84fb..00000000 Binary files a/public/icons/check-circle.png and /dev/null differ diff --git a/public/icons/checkmark-circle-green.png b/public/icons/checkmark-circle-green.png deleted file mode 100644 index af6880d1..00000000 Binary files a/public/icons/checkmark-circle-green.png and /dev/null differ diff --git a/public/icons/close.png b/public/icons/close.png deleted file mode 100644 index 454b4407..00000000 Binary files a/public/icons/close.png and /dev/null differ diff --git a/public/icons/refresh-black.svg b/public/icons/refresh-black.svg deleted file mode 100644 index feb66937..00000000 --- a/public/icons/refresh-black.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/public/icons/refresh.svg b/public/icons/refresh.svg deleted file mode 100644 index ead09ed3..00000000 --- a/public/icons/refresh.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/public/icons/remove-circle-red.png b/public/icons/remove-circle-red.png deleted file mode 100644 index 6b102d88..00000000 Binary files a/public/icons/remove-circle-red.png and /dev/null differ diff --git a/public/icons/reveal.png b/public/icons/reveal.png deleted file mode 100644 index 36bc9e75..00000000 Binary files a/public/icons/reveal.png and /dev/null differ diff --git a/public/icons/token.svg b/public/icons/token.svg deleted file mode 100644 index cf171b59..00000000 --- a/public/icons/token.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/src/components/Charts/DeviceCPULoad.tsx b/src/components/Charts/DeviceCPULoad.tsx index 79cb64ce..9d4b6821 100644 --- a/src/components/Charts/DeviceCPULoad.tsx +++ b/src/components/Charts/DeviceCPULoad.tsx @@ -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 = ({ load }) => { : } weight={'semibold'} > {message} diff --git a/src/components/Charts/DeviceMemoryHealth.tsx b/src/components/Charts/DeviceMemoryHealth.tsx index b7b2d2bc..1dbfc560 100644 --- a/src/components/Charts/DeviceMemoryHealth.tsx +++ b/src/components/Charts/DeviceMemoryHealth.tsx @@ -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 - + : } + > {message} {message === 'Poor' && ( diff --git a/src/components/Charts/DeviceNetworkHealth.tsx b/src/components/Charts/DeviceNetworkHealth.tsx index 967002b9..93a17067 100644 --- a/src/components/Charts/DeviceNetworkHealth.tsx +++ b/src/components/Charts/DeviceNetworkHealth.tsx @@ -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 - + : } + > {message} {message === 'Poor' && ( diff --git a/src/components/Charts/DeviceStorageHealth.tsx b/src/components/Charts/DeviceStorageHealth.tsx index 356c22aa..4ff8ccca 100644 --- a/src/components/Charts/DeviceStorageHealth.tsx +++ b/src/components/Charts/DeviceStorageHealth.tsx @@ -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 = ({ storage, maxS : } weight={'semibold'} > {message} diff --git a/src/components/General/IconText.tsx b/src/components/General/IconText.tsx index c65979e9..6f6e8119 100644 --- a/src/components/General/IconText.tsx +++ b/src/components/General/IconText.tsx @@ -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} {children} diff --git a/src/components/General/StatusIconText.tsx b/src/components/General/StatusIconText.tsx index 7954b318..e1f43490 100644 --- a/src/components/General/StatusIconText.tsx +++ b/src/components/General/StatusIconText.tsx @@ -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 ? : const text = isGood ? goodText : badText return {text} diff --git a/src/components/General/TagContainer.tsx b/src/components/General/TagContainer.tsx index 42dbfd0d..4b11be71 100644 --- a/src/components/General/TagContainer.tsx +++ b/src/components/General/TagContainer.tsx @@ -1,14 +1,13 @@ import { Tag } from '@status-im/components' import { XStack } from 'tamagui' -import PairIcon from '../Icons/PairIcon' -import CreateIcon from '../Icons/CreateIcon' import './TagContainer.css' +import { AddSmallIcon, SwapIcon } from '@status-im/icons' const TagContainer = () => { return ( - - + + ) } diff --git a/src/components/General/Titles.tsx b/src/components/General/Titles.tsx index 4e5f790a..c9105389 100644 --- a/src/components/General/Titles.tsx +++ b/src/components/General/Titles.tsx @@ -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) => { {title} {isAdvancedSettings && ( - )} diff --git a/src/components/Icons/ConnectIcon.tsx b/src/components/Icons/ConnectIcon.tsx deleted file mode 100644 index 530659a7..00000000 --- a/src/components/Icons/ConnectIcon.tsx +++ /dev/null @@ -1,18 +0,0 @@ -function ConnectIcon() { - return ( - - - - - - ) -} - -export default ConnectIcon diff --git a/src/components/Icons/CreateIcon.tsx b/src/components/Icons/CreateIcon.tsx deleted file mode 100644 index 07a051b9..00000000 --- a/src/components/Icons/CreateIcon.tsx +++ /dev/null @@ -1,16 +0,0 @@ -function CreateIcon() { - return ( - - - - - ) -} - -export default CreateIcon diff --git a/src/components/Icons/NodeIcon.tsx b/src/components/Icons/NodeIcon.tsx deleted file mode 100644 index 9c25f8fa..00000000 --- a/src/components/Icons/NodeIcon.tsx +++ /dev/null @@ -1,34 +0,0 @@ -function NodeIcon() { - return ( - - - - - - - - - - - - - - ) -} - -export default NodeIcon diff --git a/src/components/Icons/PairIcon.tsx b/src/components/Icons/PairIcon.tsx deleted file mode 100644 index 51a93aef..00000000 --- a/src/components/Icons/PairIcon.tsx +++ /dev/null @@ -1,61 +0,0 @@ -function PairIcon() { - return ( - - - - - - - - - - - - - - - - - - - - - - ) -} - -export default PairIcon diff --git a/src/components/Icons/ReactionIcon.tsx b/src/components/Icons/ReactionIcon.tsx deleted file mode 100644 index 74a71de2..00000000 --- a/src/components/Icons/ReactionIcon.tsx +++ /dev/null @@ -1,16 +0,0 @@ -function ReactionIcon() { - return ( - - - - - - ) -} -export default ReactionIcon diff --git a/src/constants.ts b/src/constants.ts index 592cd99d..0967460f 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -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.' diff --git a/src/pages/ConnectDevicePage/ConnectDevicePage.tsx b/src/pages/ConnectDevicePage/ConnectDevicePage.tsx index 9c785f32..2a517885 100644 --- a/src/pages/ConnectDevicePage/ConnectDevicePage.tsx +++ b/src/pages/ConnectDevicePage/ConnectDevicePage.tsx @@ -5,11 +5,8 @@ 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 NodeIcon from '../../components/Icons/NodeIcon' -import ConnectIcon from '../../components/Icons/ConnectIcon' -import PairIcon from '../../components/Icons/PairIcon' -import CreateIcon from '../../components/Icons/CreateIcon' import LabelInputField from '../../components/General/LabelInputField' +import { AddSmallIcon, ConnectionIcon, NodeIcon, SwapIcon } from '@status-im/icons' const ConnectDevicePage = () => { const [autoConnectChecked, setAutoConnectChecked] = useState(false) @@ -24,9 +21,9 @@ const ConnectDevicePage = () => { - - - + + +
@@ -105,7 +102,7 @@ const ConnectDevicePage = () => { - }>Connect Device + }>Connect Device
diff --git a/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx b/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx index 2807a4b9..4172fe24 100644 --- a/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx +++ b/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx @@ -5,10 +5,9 @@ import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow' import NimbusLogo from '../../components/Logos/NimbusLogo' import TagContainer from '../../components/General/TagContainer' 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 { NodeIcon, ReactionIcon } from '@status-im/icons' const CreateLocalNodePage = () => { const [autoConnectChecked, setAutoConnectChecked] = useState(false) @@ -36,7 +35,7 @@ const CreateLocalNodePage = () => { - } backgroundColor={'white'} /> + @@ -66,7 +65,7 @@ const CreateLocalNodePage = () => { - }>Continue + }>Continue diff --git a/src/pages/DeviceHealthCheck/DeviceHealthCheck.tsx b/src/pages/DeviceHealthCheck/DeviceHealthCheck.tsx index 727f5138..53a87d0e 100644 --- a/src/pages/DeviceHealthCheck/DeviceHealthCheck.tsx +++ b/src/pages/DeviceHealthCheck/DeviceHealthCheck.tsx @@ -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 ( { networkLatency={75} /> } + icon={} 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." /> diff --git a/src/pages/DeviceSyncStatus/SyncStatusCardConsensus.tsx b/src/pages/DeviceSyncStatus/SyncStatusCardConsensus.tsx index 441cbc51..57987f10 100644 --- a/src/pages/DeviceSyncStatus/SyncStatusCardConsensus.tsx +++ b/src/pages/DeviceSyncStatus/SyncStatusCardConsensus.tsx @@ -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 = ({ synced, t - {message} - + }>{message} {formatNumber(synced)} / {formatNumber(total)} diff --git a/src/pages/DeviceSyncStatus/SyncStatusCardExecution.tsx b/src/pages/DeviceSyncStatus/SyncStatusCardExecution.tsx index 92143096..8604a122 100644 --- a/src/pages/DeviceSyncStatus/SyncStatusCardExecution.tsx +++ b/src/pages/DeviceSyncStatus/SyncStatusCardExecution.tsx @@ -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 = ({ synced, t - {message} - + }>{message} {' '} {formatNumber(synced)} / {formatNumber(total)} diff --git a/src/pages/LandingPage/LandingPage.tsx b/src/pages/LandingPage/LandingPage.tsx index 83f83190..1a17ce81 100644 --- a/src/pages/LandingPage/LandingPage.tsx +++ b/src/pages/LandingPage/LandingPage.tsx @@ -3,9 +3,9 @@ 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 NodeIcon from '../../components/Icons/NodeIcon' import NimbusLogo from '../../components/Logos/NimbusLogo' import { XStack, YStack } from 'tamagui' +import { NodeIcon } from '@status-im/icons' function LandingPage() { return ( @@ -21,7 +21,7 @@ function LandingPage() { subtitle="Nimbus Nodes allows you to take control and ownership of the services you wish to run in a completely trustless and decentralized manner." /> - }>Get Started + }>Get Started diff --git a/src/pages/PairDevice/CreateAvatar.tsx b/src/pages/PairDevice/CreateAvatar.tsx index c55f7b1e..d23c9127 100644 --- a/src/pages/PairDevice/CreateAvatar.tsx +++ b/src/pages/PairDevice/CreateAvatar.tsx @@ -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 ( @@ -18,7 +17,7 @@ export const CreateAvatar = () => { - } backgroundColor={'white'} /> + @@ -31,3 +30,5 @@ export const CreateAvatar = () => { ) } + +export default CreateAvatar diff --git a/src/pages/PairDevice/PairDevice.tsx b/src/pages/PairDevice/PairDevice.tsx index b9bf4446..b19bb3fc 100644 --- a/src/pages/PairDevice/PairDevice.tsx +++ b/src/pages/PairDevice/PairDevice.tsx @@ -5,19 +5,17 @@ import { Button, Checkbox, Tag, Text } from '@status-im/components' import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow' import SyncStatus from './SyncStatus' import NimbusLogo from '../../components/Logos/NimbusLogo' -import PairIcon from '../../components/Icons/PairIcon' -import CreateIcon from '../../components/Icons/CreateIcon' -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 { AddSmallIcon, NodeIcon, SwapIcon } from '@status-im/icons' 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) @@ -34,8 +32,8 @@ const PairDevice = () => { - - + + @@ -63,10 +61,10 @@ const PairDevice = () => { /> Auto Connect Paired Device - {isPaired && } + {isPaired && } - diff --git a/src/pages/PairDevice/SyncStatus.tsx b/src/pages/PairDevice/SyncStatus.tsx index 67634e21..e7c689a6 100644 --- a/src/pages/PairDevice/SyncStatus.tsx +++ b/src/pages/PairDevice/SyncStatus.tsx @@ -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 = ({ )} } + icon={} onPress={resetTimer} variant="ghost" + disabled={!isPairing} /> {isPairing ? ( @@ -79,7 +79,7 @@ const SyncStatus = ({ } + icon={} /> )} {isAwaitingPairing && (