Adjust styles

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

Author: mdomasevicius

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

@@ -30,7 +30,17 @@ import { devices } from '../../../../theme/themes'
 
 const { api } = tequila
 
-const { Page, StartButton, GTitle, GSubTitle, GDescription, GradientCard, Welcome, WhiteCard } = PasswordSetComponents
+const {
+  Page,
+  LockRow,
+  StartButton,
+  GTitle,
+  GSubTitle,
+  GDescription,
+  GradientCard,
+  Welcome,
+  WhiteCard,
+} = PasswordSetComponents
 
 const PasswordInputs = styled.div`
   display: flex;
@@ -242,6 +252,7 @@ export const AdvancedBoardingPage = () => {
                 Easy setup? <InternalLink to={ROUTES.QUICK_ONBOARDING + location.search}>Quick onboarding</InternalLink>
               </GDescription>
             )}
+            <LockRow />
           </GradientCard>
         </WhiteCard>
       </Form>

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

@@ -8,8 +8,12 @@ import styled from 'styled-components'
 import { Welcome } from './Welcome'
 import { Button } from '../../../../Components/Inputs/Button'
 import { devices } from '../../../../theme/themes'
+import { ReactComponent as LockIcon } from '../../../../assets/images/onboarding/lock.svg'
 
 const Page = styled.div`
+  display: flex;
+  justify-content: center;
+
   padding: 66px;
 
   @media ${devices.tablet} {
@@ -28,18 +32,18 @@ const WhiteCard = styled.div`
   background: ${({ theme }) => theme.onboarding.bgCard};
   border-radius: 30px;
   box-shadow: 0 20px 60px 0 #0000651a;
+  width: 1100px;
 
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 32px;
+  gap: 16px;
 
-  min-height: calc(100vh - 66px - 66px);
-
-  padding: 20px;
+  padding: 20px 20px 40px 20px;
 
   @media ${devices.tablet} {
     padding: 15px;
+    width: unset;
   }
 
   @media ${devices.mobileS} {
@@ -54,7 +58,7 @@ const GradientCard = styled.div`
   position: relative;
   background: ${({ theme }) => theme.onboarding.bgCardGradient};
   box-shadow: 0 20px 60px 0 #0000651a;
-  max-width: 70%;
+  width: 650px;
   border-radius: 40px;
   padding: 62px 62px 62px 62px;
 
@@ -66,6 +70,7 @@ const GradientCard = styled.div`
 
   @media ${devices.tablet} {
     max-width: unset;
+    width: unset;
     padding: 30px 10px 50px 10px;
   }
 
@@ -126,6 +131,44 @@ const StartButton = styled(Button)`
   }
 `
 
+const LockRow = () => (
+  <LockContainer>
+    <Lock />
+  </LockContainer>
+)
+
+const LockContainer = styled.div`
+  position: relative;
+  width: 100%;
+
+  @media ${devices.tablet} {
+  }
+
+  @media ${devices.mobileS} {
+    display: none;
+  }
+`
+
+const Lock = styled(LockIcon)`
+  position: absolute;
+  top: -20px;
+  right: -130px;
+  width: 186px;
+  height: 160px;
+
+  @media ${devices.tablet} {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 16px;
+    margin-left: auto;
+    margin-right: auto;
+
+    width: 106px;
+    height: 80px;
+  }
+`
+
 export const PasswordSetComponents = {
   Page,
   WhiteCard,
@@ -135,4 +178,6 @@ export const PasswordSetComponents = {
   GDescription,
   StartButton,
   GSubTitle,
+  Lock,
+  LockRow,
 }

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

@@ -19,7 +19,7 @@ import { urls } from '../../../../commons/urls'
 import { ANDROID_DEEPLINK_CLICKBOARDING } from '../../../../constants/urls'
 import toasts from '../../../../commons/toasts'
 
-const { Page, StartButton, GTitle, GDescription, GradientCard, Welcome, WhiteCard } = PasswordSetComponents
+const { Page, LockRow, StartButton, GTitle, GDescription, GradientCard, Welcome, WhiteCard } = PasswordSetComponents
 
 export const QuickOnboardingPage = () => {
   const config = useAppSelector(selectors.currentConfig)
@@ -63,8 +63,10 @@ export const QuickOnboardingPage = () => {
           />
           <StartButton size="large" label="START" rounded onClick={getLinkAndRedirect} />
           <GDescription $textAlign="center">
-            Advanced onboarding <InternalLink to={ROUTES.ADVANCED_ONBOARDING + location.search}>Sign Up</InternalLink>
+            Advanced onboarding{' '}
+            <InternalLink to={ROUTES.ADVANCED_ONBOARDING + location.search}>Start here</InternalLink>
           </GDescription>
+          <LockRow />
         </GradientCard>
       </WhiteCard>
     </Page>

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

@@ -9,12 +9,6 @@ import { devices } from '../../../../theme/themes'
 import React from 'react'
 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;
@@ -29,44 +23,41 @@ const Container = styled.div`
   }
 `
 const Logo = styled(LoginLogo)`
-  position: absolute;
-  right: -35%;
-  top: -44%;
+  width: 70px;
+  height: 85px;
   @media ${devices.mobileS} {
     display: none;
   }
 `
 
 const SubTitle = styled.h1`
-  font-size: 50px;
+  font-size: 30px;
   margin-top: 0;
-  line-height: 30px;
   color: ${({ theme }) => theme.text.colorMain};
+  text-align: center;
   @media ${devices.tablet} {
-    font-size: 40px;
-    line-height: 60px;
+    font-size: 26px;
   }
 `
 
 const Title = styled.h1`
   color: ${({ theme }) => theme.common.colorKey};
-  line-height: 80px;
-  font-size: 60px;
+
+  font-size: 40px;
+  text-align: center;
   @media ${devices.tablet} {
-    font-size: 50px;
-    line-height: 60px;
+    font-size: 30px;
   }
   @media ${devices.mobileS} {
-    font-size: 40px;
-    line-height: 40px;
+    font-size: 20px;
   }
 `
 const Comment = styled.div`
   color: ${({ theme }) => theme.common.colorKeyLight};
-  margin-top: 20px;
-  font-size: 27px;
-  line-height: 40px;
+  margin-top: 10px;
+  font-size: 18px;
   font-weight: 400;
+  text-align: center;
   @media ${devices.tablet} {
     font-size: ${({ theme }) => theme.common.fontSizeBig};
   }
@@ -80,9 +71,7 @@ const Group = styled.div`
 export const Welcome = () => {
   return (
     <Container>
-      <LogoContainer>
-        <Logo />
-      </LogoContainer>
+      <Logo />
 
       <Group>
         <Title>Welcome</Title>

src/Pages/ClickBoarding.tsx

@@ -51,12 +51,29 @@ export const ClickBoarding = () => {
       setLoading(true)
       const info = await verifyOnboardingGrant({ authorizationGrantToken })
 
+      // Following actions must happen in this particular order
+      const newPassword = strings.generate(16)
+
+      if (!info.isEligibleForFreeRegistration) {
+        setLoading(false)
+
+        await tequila.api.authChangePassword({ oldPassword: DEFAULT_PASSWORD, newPassword, username: DEFAULT_USERNAME })
+        await tequila.api.setMMNApiKey(info.apiKey) // calls mystnodes.com and marks node for free registration if it is first one
+
+        setTimeout(() => {
+          navigate(ROUTES.DASHBOARD, { replace: true })
+        }, 3000)
+        return
+      }
+
       if ([IdentityRegistrationStatus.InProgress, IdentityRegistrationStatus.Registered].includes(registrationStatus)) {
         //Error - identity already registered or in progress
         setLoading(false)
-        setError('Identity was already registered or registration is in progress!')
+
+        await tequila.api.authChangePassword({ oldPassword: DEFAULT_PASSWORD, newPassword, username: DEFAULT_USERNAME })
+
         setTimeout(() => {
-          navigate(ROUTES.HOME, { replace: true })
+          navigate(ROUTES.DASHBOARD, { replace: true })
         }, 3000)
         return
       }
@@ -83,9 +100,6 @@ export const ClickBoarding = () => {
       }
 
       // Following actions must happen in this particular order
-      const newPassword = strings.generate(16)
-      await tequila.api.authChangePassword({ oldPassword: DEFAULT_PASSWORD, newPassword, username: DEFAULT_USERNAME })
-      await tequila.api.setMMNApiKey(info.apiKey) // calls mystnodes.com and marks node for free registration if it is first one
       await tequila.api.identityRegister(id, { beneficiary: info.walletAddress, stake: 0 })
       await complexActions.loadAppStateAfterAuthenticationAsync({ isDefaultPassword: false })
       setLoading(false)

src/api/tequila.ts

@@ -105,18 +105,19 @@ const loginWithAuthorizationGrant = async ({ authorizationGrantToken }: { author
 
 const getUIFeatures = async () => await http.get('/config/ui/features').then((r) => r.data)
 
-export type LWAGResponse = {
+export type GrantVerificationResponse = {
   apiKey: string
   walletAddress?: string
+  isEligibleForFreeRegistration: boolean
 }
 
 const verifyOnboardingGrant = async ({
   authorizationGrantToken,
 }: {
   authorizationGrantToken: string
-}): Promise<LWAGResponse> =>
+}): Promise<GrantVerificationResponse> =>
   http
-    .post<LWAGResponse>('/mmn/onboarding/verify-grant', { authorization_grant: authorizationGrantToken })
+    .post<GrantVerificationResponse>('/mmn/onboarding/verify-grant', { authorization_grant: authorizationGrantToken })
     .then((r) => r.data)
 
 const exportIdentity = async (request: any): Promise<unknown> =>