Update logo

Signed-off-by: Mantas Domaševičius <mantas@mysterium.network>

Author: mdomasevicius

src/Pages/Authenticated/Onboarding/Password/PasswordSetComponents.tsx

@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 import styled from 'styled-components'
-import { ReactComponent as Lock } from '../../../../assets/images/onboarding/lock.svg'
 import { Welcome } from './Welcome'
 import { Button } from '../../../../Components/Inputs/Button'
 import { devices } from '../../../../theme/themes'
@@ -17,10 +16,12 @@ const Page = styled.div`
     height: unset;
     padding: 15px;
   }
-`
 
-const LockIcon = styled(Lock)`
-  border: 1px solid salmon;
+  @media ${devices.mobileS} {
+    min-width: unset;
+    max-height: unset;
+    padding: unset;
+  }
 `
 
 const WhiteCard = styled.div`
@@ -40,6 +41,13 @@ const WhiteCard = styled.div`
   @media ${devices.tablet} {
     padding: 15px;
   }
+
+  @media ${devices.mobileS} {
+    min-width: unset;
+    max-height: unset;
+    padding: unset;
+    min-height: unset;
+  }
 `
 
 const GradientCard = styled.div`
@@ -60,6 +68,12 @@ const GradientCard = styled.div`
     max-width: unset;
     padding: 30px 10px 50px 10px;
   }
+
+  @media ${devices.mobileS} {
+    min-width: unset;
+    max-height: unset;
+    border-radius: unset;
+  }
 `
 
 type TextAlign = {
@@ -106,6 +120,10 @@ const GDescription = styled.div<TextAlign>`
 
 const StartButton = styled(Button)`
   width: 300px;
+
+  @media ${devices.mobileS} {
+    width: unset;
+  }
 `
 
 export const PasswordSetComponents = {
@@ -115,7 +133,6 @@ export const PasswordSetComponents = {
   Welcome,
   GTitle,
   GDescription,
-  LockIcon,
   StartButton,
   GSubTitle,
 }

src/Pages/Authenticated/Onboarding/Password/Welcome.tsx

@@ -7,24 +7,31 @@
 import styled from 'styled-components'
 import { devices } from '../../../../theme/themes'
 import React from 'react'
-import { ReactComponent as LoginLogo } from '../../../../assets/images/onboarding/login.svg'
+import { ReactComponent as LoginLogo } from '../../../../assets/images/onboarding/logo.svg'
 
 const LogoContainer = styled.div`
+  position: relative;
+  width: 180px;
+  height: 100px;
+`
+
+const Container = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   @media ${devices.tablet} {
     align-self: center;
   }
+
+  @media ${devices.mobileS} {
+    display: none;
+  }
 `
 const Logo = styled(LoginLogo)`
-  height: 180px;
-  width: 180px;
-  @media ${devices.tablet} {
-    height: 250px;
-    width: 250px;
-  }
+  position: absolute;
+  right: -35%;
+  top: -44%;
   @media ${devices.mobileS} {
     display: none;
   }
@@ -72,13 +79,16 @@ const Group = styled.div`
 
 export const Welcome = () => {
   return (
-    <LogoContainer>
-      <Logo />
+    <Container>
+      <LogoContainer>
+        <Logo />
+      </LogoContainer>
+
       <Group>
         <Title>Welcome</Title>
         <SubTitle>node runner!</SubTitle>
         <Comment>Let's get you up and running</Comment>
       </Group>
-    </LogoContainer>
+    </Container>
   )
 }