Merge pull request #31 from status-im/rd.create-nodes-logo

feat: create nodes logo

src/components/LayoutComponent/LandingPage.tsx

@@ -1,6 +1,7 @@
 import LayoutComponent from './LayoutComponent'
 import './LandingPage.css'
 import QuickStartBar from '../QuickStartBar/QuickStartBar'
+import NodesLogo from '../NodesLogo'
 
 function LandingPage() {
   return (
@@ -15,14 +16,7 @@ function Content() {
   return (
     <div className="container-inner landing-page">
       <header>
-        <div>
-          <div>
-            <img src="src/assets/nodes-app-icon.png" alt="" />
-          </div>
-          <p className="logo-title">
-            nodes<span className="beta">BETA</span>
-          </p>
-        </div>
+        <NodesLogo />
       </header>
       <article className="content">
         <div className="avatar">

src/components/Logo.tsx

@@ -1,20 +0,0 @@
-import { XStack } from 'tamagui'
-import Icon from './Icon'
-import Tag from './Tag'
-
-const Logo = () => {
-  return (
-    <XStack
-      style={{
-        alignItems: 'center',
-      }}
-      space={'$2'}
-    >
-      <Icon source={'/icons/marks.png'} width={45} height={50} />
-      <Icon source={'/icons/nimbus.png'} width={80} height={16} />
-      <Tag bc="#2A4AF5" text="BETA" />
-    </XStack>
-  )
-}
-
-export default Logo

src/components/NimbusLogo.tsx

@@ -0,0 +1,21 @@
+import { Text, XStack } from 'tamagui'
+import Icon from './Icon'
+import Tag from './Tag'
+
+const NimbusLogo = () => {
+  return (
+    <XStack
+      style={{
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+      space={'$2'}
+    >
+      <Icon source={'/icons/marks.png'} width={55} height={60} />
+      <Text style={{ fontWeight: '650', fontSize: '24px' }}>Nimbus</Text>
+      <Tag text="BETA" />
+    </XStack>
+  )
+}
+
+export default NimbusLogo

src/components/NodesLogo.tsx

@@ -0,0 +1,21 @@
+import { Text, XStack } from 'tamagui'
+import Icon from './Icon'
+import Tag from './Tag'
+
+const NodesLogo = () => {
+  return (
+    <XStack
+      style={{
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+      space={'$2'}
+    >
+      <Icon source={'src/assets/nodes-app-icon.png'} width={32} height={32} />
+      <Text style={{ fontWeight: '700', fontSize: '28px' }}>nodes</Text>
+      <Tag text="BETA" />
+    </XStack>
+  )
+}
+
+export default NodesLogo

src/components/Tag.tsx

@@ -1,25 +1,26 @@
-import { Paragraph } from 'tamagui'
+import { Text, XStack } from 'tamagui'
 
 type TagProps = {
-  bc: string
+  bc?: string
   text: string
 }
 
-const Tag = ({ bc, text }: TagProps) => {
+const Tag = ({ bc = '#2A4AF5', text }: TagProps) => {
   return (
-    <div
+    <XStack
       style={{
         backgroundColor: bc,
         display: 'flex',
-        padding: '0px 8px',
+        justifyContent: 'center',
         alignItems: 'center',
+        padding: '1px 6px',
         borderRadius: '67px',
       }}
     >
-      <Paragraph fontWeight={'500'} fontSize={'10px'}>
+      <Text fontWeight={'450'} fontSize={'10px'} color={'white'}>
         {text}
-      </Paragraph>
-    </div>
+      </Text>
+    </XStack>
   )
 }