From 240328a6c51d7ddeb3c569a23ee473da2bfa2772 Mon Sep 17 00:00:00 2001 From: Reckless_Satoshi Date: Sat, 18 Feb 2023 09:32:15 -0800 Subject: [PATCH] Minor fixes --- frontend/src/basic/RobotPage/Onboarding.tsx | 386 +++++++++--------- frontend/src/basic/RobotPage/RobotProfile.tsx | 24 ++ frontend/src/basic/RobotPage/Welcome.tsx | 54 ++- frontend/src/basic/RobotPage/index.tsx | 60 +-- 4 files changed, 296 insertions(+), 228 deletions(-) diff --git a/frontend/src/basic/RobotPage/Onboarding.tsx b/frontend/src/basic/RobotPage/Onboarding.tsx index db2e9923..071170e0 100644 --- a/frontend/src/basic/RobotPage/Onboarding.tsx +++ b/frontend/src/basic/RobotPage/Onboarding.tsx @@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next'; import { useHistory } from 'react-router-dom'; import { Alert, + Box, Button, ButtonGroup, Collapse, @@ -10,6 +11,7 @@ import { LinearProgress, Link, Typography, + useTheme, } from '@mui/material'; import { Page } from '../NavBar'; import { Robot } from '../../models'; @@ -43,6 +45,7 @@ const Onboarding = ({ }: OnboardingProps): JSX.Element => { const { t } = useTranslation(); const history = useHistory(); + const theme = useTheme(); const [step, setStep] = useState<'1' | '2' | '3'>('1'); const [generatedToken, setGeneratedToken] = useState(false); @@ -61,91 +64,97 @@ const Onboarding = ({ }; return ( - + {t('1. Generate a token')} - - - - {t( - 'This temporary key gives you access to a unique and private robot identity for your trade.', - )} - - - {!generatedToken ? ( + - + + {t( + 'This temporary key gives you access to a unique and private robot identity for your trade.', + )} + - ) : ( - - - - - - {`${t('Store it somewhere safe!')} `} - {t( - `This token is the one and only key to your robot and trade. You will need it later to recover your order or check it's status.`, + {!generatedToken ? ( + + + + ) : ( + + + + + + {`${t('Store it somewhere safe!')} `} + {t( + `This token is the one and only key to your robot and trade. You will need it later to recover your order or check its status.`, + )} + + + + {showMimickProgress ? ( + + ) : ( + null} + badRequest={badRequest} + /> )} - - - - {showMimickProgress ? ( - - ) : ( - null} - badRequest={badRequest} - /> - )} - - - - {t('You can also add your own random characters into the token or')} - - - + + + + {t('You can also add your own random characters into the token or')} + + + - - + + + - - - - )} - + + + )} + + @@ -155,82 +164,88 @@ const Onboarding = ({ - - - - {robot.avatarLoaded && robot.nickname ? ( - t('This is your trading avatar') - ) : ( - {t('Building your robot!')} - )} - - - - - - - - {robot.avatarLoaded && robot.nickname ? ( + - {t('Hi! My name is')} - -
- - {robot.nickname} - -
+ + {robot.avatarLoaded && robot.nickname ? ( + t('This is your trading avatar') + ) : ( + {t('Building your robot!')} + )} - ) : null} - - - - + + + + + + {robot.avatarLoaded && robot.nickname ? ( + + {t('Hi! My name is')} + +
+ + {robot.nickname} + +
+ + + ) : null} + + + + + - + @@ -239,50 +254,57 @@ const Onboarding = ({ {t('3. Browse or create an order')} - - - - {t( - 'RoboSats is a peer-to-peer marketplace. You can browse the public offers or create a new one.', - )} - - + + + + {t( + 'RoboSats is a peer-to-peer marketplace. You can browse the public offers or create a new one.', + )} + + - - - - - - + + + + + + - - - {`${t('If you need help on your RoboSats journey, join our public support')} `} - - {t('Telegram group')} - - + + + {`${t('If you need help on your RoboSats journey join our public support')} `} + + {t('Telegram group')} + + + - - - - - + + + + ); }; diff --git a/frontend/src/basic/RobotPage/RobotProfile.tsx b/frontend/src/basic/RobotPage/RobotProfile.tsx index e69de29b..388d8b64 100644 --- a/frontend/src/basic/RobotPage/RobotProfile.tsx +++ b/frontend/src/basic/RobotPage/RobotProfile.tsx @@ -0,0 +1,24 @@ +import React, { useState } from 'react'; +import { useTranslation } from 'react-i18next'; +import { Box, Button, Grid, Typography, useTheme } from '@mui/material'; +import { RoboSatsTextIcon } from '../../components/Icons'; +import { FastForward, RocketLaunch } from '@mui/icons-material'; +import SmartToy from '@mui/icons-material/SmartToy'; + +interface RobotProfileProps { + setView: (state: 'welcome' | 'onboarding' | 'recovery' | 'profile') => void; + width: number; +} + +const RobotProfile = ({ setView, width }: RobotProfileProps): JSX.Element => { + const { t } = useTranslation(); + const theme = useTheme(); + + return ( + + + + ); +}; + +export default RobotProfile; diff --git a/frontend/src/basic/RobotPage/Welcome.tsx b/frontend/src/basic/RobotPage/Welcome.tsx index a123008e..86f6d177 100644 --- a/frontend/src/basic/RobotPage/Welcome.tsx +++ b/frontend/src/basic/RobotPage/Welcome.tsx @@ -1,9 +1,8 @@ import React, { useState } from 'react'; import { useTranslation } from 'react-i18next'; import { Box, Button, Grid, Typography, useTheme } from '@mui/material'; -import { RoboSatsNoTextIcon, RoboSatsTextIcon } from '../../components/Icons'; -import { FastForward, RocketLaunch } from '@mui/icons-material'; -import SmartToy from '@mui/icons-material/SmartToy'; +import { RoboSatsTextIcon } from '../../components/Icons'; +import { FastForward, RocketLaunch, Key } from '@mui/icons-material'; interface WelcomeProps { setView: (state: 'welcome' | 'onboarding' | 'recovery' | 'profile') => void; @@ -15,22 +14,43 @@ const Welcome = ({ setView, width }: WelcomeProps): JSX.Element => { const theme = useTheme(); return ( - - - - {t('Simple and Private LN P2P Exchange')} - + + + + + + + + + + + {t('Simple and Private LN P2P Exchange')} + + { - +