cleanup: put component in correct directories

src/components/ConnectionPage.tsx

@@ -1,10 +1,10 @@
 import { useState } from 'react'
-import BreadcrumbBar from '../BreadcrumbBar/BreadcrumbBar'
+import BreadcrumbBar from './BreadcrumbBar'
 import { Button as StatusButton, Tag, Text, Avatar, Checkbox } from '@status-im/components'
 import { Label, Separator, XStack, YStack } from 'tamagui'
-import LayoutComponent from '../LayoutComponent/LayoutComponent'
-import Logo from '../Logo'
-import Titles from '../Titles'
+import LayoutComponent from './LayoutComponent'
+import NimbusLogo from './NimbusLogo'
+import Titles from './Titles'
 import NodeIcon from './NodeIcon'
 import ConnectIcon from './ConnectIcon'
 import PairIcon from './PairIcon'
@@ -21,7 +21,7 @@ function Content() {
   return (
     <div className="container-inner connection-page">
       <header>
-        <Logo />
+        <NimbusLogo />
         <XStack space={'$2'} alignItems="center">
           <Tag icon={ConnectIcon} label="Connect" size={32} selected />
           <Tag icon={PairIcon} label="Pair" size={32} />

src/components/DeviceNetworkHealth.tsx

@@ -1,7 +1,8 @@
 import StandartLineChart from './StandardLineChart'
-import ShadowBox from './ShadowBox'
+// import ShadowBox from './ShadowBox'
 import IconText from './IconText'
 import { Paragraph, Separator, XStack, YStack } from 'tamagui'
+import { Shadow as ShadowBox } from '@status-im/components'
 
 type DataPoint = {
   x: number
@@ -43,7 +44,7 @@ const DeviceNetworkHealth = ({ uploadRate, downloadRate }: DeviceNetworkHealthPr
   const message = currentLoad < 80 ? 'Good' : 'Poor'
 
   return (
-    <ShadowBox boxStyle={{ width: '284px', height: '136px' }}>
+    <ShadowBox style={{ width: '284px', height: '136px' }}>
       <YStack>
         <XStack
           justifyContent="space-between"

src/components/LandingPage.tsx

@@ -1,7 +1,6 @@
 import LayoutComponent from './LayoutComponent'
 import './LandingPage.css'
 import QuickStartBar from './QuickStartBar'
-import DeviceNetworkHealth from './DeviceNetworkHealth'
 
 function LandingPage() {
   return (
@@ -96,10 +95,6 @@ function Content() {
           Discover Nodes
         </button>
       </article>
-      <DeviceNetworkHealth
-        uploadRate={[6, 63, 123, 59, 12, 6, 63, 123, 59, 12]}
-        downloadRate={[123, 56, 90, 10, 50, 123, 56, 90, 130, 40]}
-      />
     </div>
   )
 }

src/components/Titles.tsx

@@ -1,6 +1,6 @@
 import { XStack, YStack } from 'tamagui'
-import IconButton from './IconButton'
-import { Text } from '@status-im/components'
+import { Button, Text } from '@status-im/components'
+import Icon from './Icon'
 
 type TitlesProps = {
   title: string
@@ -16,18 +16,9 @@ const Titles = ({ title, subtitle, button }: TitlesProps) => {
           {title}
         </Text>
         {button ? (
-          <IconButton
-            style={{
-              backgroundColor: 'transparent',
-              border: '1px solid #DCE0E5',
-              color: '#09101C',
-            }}
-            size={'$3'}
-            icon={'/icons/reveal.png'}
-            fontSize={'$5'}
-          >
+          <Button variant="outline" size={32} icon={<Icon src={'/icons/reveal.png'} />}>
             Advanced Settings
-          </IconButton>
+          </Button>
         ) : null}
       </XStack>
       <Text size={15} weight="regular">

src/components/breadcrumbbar.css

@@ -19,7 +19,7 @@
 }
 .breadcrumb-bar-li::after {
     display: inline-block;
-    content: url("./chevron.svg");
+    content: url("../assets/chevron.svg");
     color: #09101C;
     position: absolute;
     top: -2px;