Merge pull request #39 from status-im/rd.remove-not-used-components

fix: remove not used components

src/components/DeviceCPULoad.tsx

@@ -1,7 +1,7 @@
 import StandartLineChart from './StandardLineChart'
-import ShadowBox from './ShadowBox'
 import IconText from './IconText'
 import { Paragraph, Separator, XStack, YStack } from 'tamagui'
+import { Shadow } from '@status-im/components'
 
 type DataPoint = {
   x: number
@@ -34,7 +34,7 @@ const DeviceCPULoad: React.FC<DeviceCPULoadProps> = ({ load }) => {
   const message = currentLoad < 80 ? 'Good' : 'Poor'
 
   return (
-    <ShadowBox boxStyle={{ width: '284px', height: '136px' }}>
+    <Shadow style={{ width: '284px', height: '136px', borderRadius: '16px' }}>
       <YStack>
         <XStack
           justifyContent="space-between"
@@ -63,7 +63,7 @@ const DeviceCPULoad: React.FC<DeviceCPULoadProps> = ({ load }) => {
           {/* <Text color={'#E95460'}>This is additional text</Text>  */}
         </XStack>
       </YStack>
-    </ShadowBox>
+    </Shadow>
   )
 }
 

src/components/DeviceStorageHealth.tsx

@@ -1,7 +1,7 @@
-import ShadowBox from './ShadowBox'
 import IconText from './IconText'
 import { Paragraph, Separator, XStack, YStack } from 'tamagui'
 import StandardGauge from './StandardGauge'
+import { Shadow } from '@status-im/components'
 interface DeviceStorageHealthProps {
   storage: number
   maxStorage: number
@@ -28,7 +28,7 @@ const DeviceStorageHealth: React.FC<DeviceStorageHealthProps> = ({ storage, maxS
     ]
   }
   return (
-    <ShadowBox boxStyle={{ width: '284px', height: '136px' }}>
+    <Shadow style={{ width: '284px', height: '136px', borderRadius: '16px' }}>
       <YStack>
         <XStack
           justifyContent="space-between"
@@ -64,7 +64,7 @@ const DeviceStorageHealth: React.FC<DeviceStorageHealthProps> = ({ storage, maxS
           {/* <Text color={'#E95460'}>This is additional text</Text>  */}
         </XStack>
       </YStack>
-    </ShadowBox>
+    </Shadow>
   )
 }
 

src/components/FormattedText.tsx

@@ -1,35 +1,27 @@
-import { Text } from 'tamagui'
+import { Text } from '@status-im/components'
 
 export type TextElement = {
   text: string
   bold?: boolean
   italic?: boolean
+  weight?: 'regular' | 'medium' | 'semibold'
 }
 
 type FormattedTextProps = {
   textElements: TextElement[]
   color?: string
-  fontSize?: string
+  size: 27 | 19 | 15 | 13 | 11
 }
 
-const FormattedText = ({ textElements, color, fontSize }: FormattedTextProps) => {
-  const calculateStyle = (textElement: TextElement) => {
-    const isBold = textElement.bold ?? false
-    const isItalic = textElement.italic ?? false
-
-    return { fontWeight: isBold ? 'bold' : '', fontStyle: isItalic ? 'italic' : '' }
-  }
-
+const FormattedText = ({ textElements, color, size }: FormattedTextProps) => {
   return (
-    <Text color={color} fontSize={fontSize}>
-      {textElements.map((textElement, index) => {
-        return (
-          <span style={calculateStyle(textElement)} key={index}>
-            {textElement.text}
-          </span>
-        )
-      })}
-    </Text>
+    <>
+      {textElements.map((textElement, index) => (
+        <Text key={index} size={size} color={color} weight={textElement.weight}>
+          {textElement.text}
+        </Text>
+      ))}
+    </>
   )
 }
 

src/components/Icon.tsx

@@ -1,14 +1,13 @@
-import { Image } from 'tamagui'
+import { Image } from '@status-im/components'
 
 export type IconProps = {
-  source: string
+  src: string
   width?: number
   height?: number
-  className?: string
 }
 
-const Icon = ({ source, width = 16, height = 16, ...props }: IconProps) => {
-  return <Image {...props} source={{ uri: source }} width={width} height={height} />
+const Icon = ({ src, width = 16, height = 16 }: IconProps) => {
+  return <Image src={src} source={{ uri: src }} width={width} height={height} />
 }
 
 export default Icon

src/components/IconButton.tsx

@@ -1,21 +0,0 @@
-import Icon from './Icon'
-import ReactButton from './ReactButton'
-
-type IconButtonProps = {
-  children: string
-  icon: string
-  style?: unknown
-  size?: string
-  fontSize?: string
-  onClick?: () => void
-}
-
-const IconButton = ({ icon, children, ...props }: IconButtonProps) => {
-  return (
-    <ReactButton {...props} icon={<Icon source={icon} />}>
-      {children}
-    </ReactButton>
-  )
-}
-
-export default IconButton

src/components/IconText.tsx

@@ -1,12 +1,13 @@
-import { Paragraph, XStack } from 'tamagui'
+import { XStack } from 'tamagui'
 import Icon from './Icon'
+import { Text } from '@status-im/components'
 
 type IconTextProps = {
   icon: string
   children: string
 }
 
-const IconText = ({ icon, children, ...props }: IconTextProps) => {
+const IconText = ({ icon, children }: IconTextProps) => {
   return (
     <XStack
       style={{
@@ -14,10 +15,10 @@ const IconText = ({ icon, children, ...props }: IconTextProps) => {
       }}
       space={'$2'}
     >
-      <Icon source={icon} />
-      <Paragraph {...props} color={'#000000'} fontWeight={'bold'}>
+      <Icon src={icon} />
+      <Text size={11} color={'#000000'} weight={"medium"} >
         {children}
-      </Paragraph>
+      </Text>
     </XStack>
   )
 }

src/components/InformationBox.tsx

@@ -1,29 +0,0 @@
-import { XStack } from 'tamagui'
-
-import Icon from './Icon'
-import FormattedText, { TextElement } from './FormattedText'
-
-type InformationBoxProps = {
-  icon: string
-  textElements: TextElement[]
-}
-
-const InformationBox = ({ icon, textElements }: InformationBoxProps) => {
-  return (
-    <XStack
-      style={{
-        border: '2px solid #E7EAEE',
-        borderRadius: '12px',
-        padding: '11px 16px',
-        maxWidth: '590px',
-        alignItems: 'start',
-      }}
-      space={'$2'}
-    >
-      <Icon source={icon} width={12} height={12} />
-      <FormattedText textElements={textElements} color={'#647084'} fontSize={'$3'} />
-    </XStack>
-  )
-}
-
-export default InformationBox

src/components/NimbusLogo.tsx

@@ -1,6 +1,7 @@
-import { Text, XStack } from 'tamagui'
+import { XStack } from 'tamagui'
 import Icon from './Icon'
 import Tag from './Tag'
+import { Text } from '@status-im/components'
 
 const NimbusLogo = () => {
   return (
@@ -11,8 +12,10 @@ const NimbusLogo = () => {
       }}
       space={'$2'}
     >
-      <Icon source={'/icons/marks.png'} width={55} height={60} />
-      <Text style={{ fontWeight: '650', fontSize: '24px' }}>Nimbus</Text>
+      <Icon src={'/icons/marks.png'} width={55} height={60} />
+      <Text size={27} weight={'medium'}>
+        Nimbus
+      </Text>
       <Tag text="BETA" />
     </XStack>
   )

src/components/NodesLogo.tsx

@@ -1,6 +1,7 @@
-import { Text, XStack } from 'tamagui'
+import { XStack } from 'tamagui'
 import Icon from './Icon'
 import Tag from './Tag'
+import { Text } from '@status-im/components'
 
 const NodesLogo = () => {
   return (
@@ -11,8 +12,10 @@ const NodesLogo = () => {
       }}
       space={'$2'}
     >
-      <Icon source={'src/assets/nodes-app-icon.png'} width={32} height={32} />
-      <Text style={{ fontWeight: '700', fontSize: '28px' }}>nodes</Text>
+      <Icon src={'src/assets/nodes-app-icon.png'} width={32} height={32} />
+      <Text size={27} weight={'semibold'}>
+        nodes
+      </Text>
       <Tag text="BETA" />
     </XStack>
   )

src/components/ReactButton.tsx

@@ -1,16 +0,0 @@
-import { Button } from 'tamagui'
-import { ReactNode } from 'react'
-
-type ReactButtonProps = {
-  children: string
-  style?: unknown
-  icon?: ReactNode
-  size?: string
-  onClick?: () => void
-}
-
-const ReactButton = ({ children, ...props }: ReactButtonProps) => {
-  return <Button {...props}>{children}</Button>
-}
-
-export default ReactButton

src/components/ShadowBox.tsx

@@ -1,24 +0,0 @@
-import { ReactNode } from 'react'
-import { Stack } from 'tamagui'
-
-type ShadowBoxProps = {
-  boxStyle?: React.CSSProperties
-  children: ReactNode
-}
-
-const ShadowBox = ({boxStyle, children }: ShadowBoxProps) => {
-  return (
-    <Stack
-      style={{
-        boxSizing: 'border-box',
-        borderRadius: '16px',
-        boxShadow: '0px 4px 20px 0px rgba(9, 16, 28, 0.08)',
-        ...boxStyle
-      }}
-    >
-      {children}
-    </Stack>
-  )
-}
-
-export default ShadowBox

src/components/SubTitle.tsx

@@ -1,9 +1,16 @@
-import { Paragraph, styled } from 'tamagui'
+import { Text } from '@status-im/components'
 
-const SubTitle = styled(Paragraph, {
-  name: 'SubTitle',
-  accessibilityRole: 'header',
-  size: '$3',
-})
+type SubTitleProps = {
+  color?: string
+  children: string
+}
+
+const SubTitle = ({ color, children }: SubTitleProps) => {
+  return (
+    <Text size={15} color={color}>
+      {children}
+    </Text>
+  )
+}
 
 export default SubTitle

src/components/Title.tsx

@@ -1,9 +1,16 @@
-import { Paragraph, styled } from 'tamagui'
+import { Text } from '@status-im/components'
 
-const Title = styled(Paragraph, {
-  name: 'Title',
-  accessibilityRole: 'header',
-  size: '$9',
-})
+type TitleProps = {
+  color?: string
+  children: string
+}
+
+const Title = ({ color, children }: TitleProps) => {
+  return (
+    <Text size={27} weight={'medium'} color={color}>
+      {children}
+    </Text>
+  )
+}
 
 export default Title

src/components/Titles.tsx

@@ -1,7 +1,8 @@
 import { XStack, YStack } from 'tamagui'
 import Title from './Title'
 import SubTitle from './SubTitle'
-import IconButton from './IconButton'
+import { Button } from '@status-im/components'
+import Icon from './Icon'
 
 type TitlesProps = {
   title: string
@@ -10,21 +11,12 @@ type TitlesProps = {
 
 const Titles = ({ title, subtitle }: TitlesProps) => {
   return (
-    <YStack>
-      <XStack justifyContent="space-between">
+    <YStack style={{ width: '100%' }}>
+      <XStack style={{ justifyContent: 'space-between', alignItems: 'center' }}>
         <Title color={'#09101C'}>{title}</Title>
-        <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>
       </XStack>
       <SubTitle color={'#09101C'}>{subtitle}</SubTitle>
     </YStack>