Mirror/robosats
1
0
Fork 0
mirror of https://github.com/RoboSats/robosats.git synced 2025-01-31 10:31:35 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Welcome Update

Browse Source
This commit is contained in:
sahil-tgs 2024-07-16 00:10:51 +05:30
parent 6729babdb5
commit 6a9e6263ad
2 changed files with 201 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

196
frontend/src/basic/RobotPage/Welcome.tsx
View File

@ -1,8 +1,8 @@
import React from 'react'; import React from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { Box, Button, Grid, Typography, useTheme } from '@mui/material'; import { Box, Button, Typography, styled, useTheme } from '@mui/material';
import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
import { RoboSatsTextIcon } from '../../components/Icons'; import { RoboSatsTextIcon } from '../../components/Icons';
import { FastForward, RocketLaunch, Key } from '@mui/icons-material';
import { genBase62Token } from '../../utils'; import { genBase62Token } from '../../utils';
interface WelcomeProps { interface WelcomeProps {
@ -11,113 +11,167 @@ interface WelcomeProps {
width: number; width: number;
} }
const Welcome = ({ setView, width, getGenerateRobot }: WelcomeProps): JSX.Element => { const BUTTON_COLORS = {
primary: '#2196f3',
secondary: '#9c27b0',
text: '#ffffff',
};
const Welcome = ({ setView, getGenerateRobot, width }: WelcomeProps): JSX.Element => {
const { t } = useTranslation(); const { t } = useTranslation();
const theme = useTheme(); const theme = useTheme();
const COLORS = {
background: theme.palette.background.paper,
textPrimary: theme.palette.text.primary,
shadow: theme.palette.mode === 'dark' ? '#ffffff' : '#000000',
};
const StyledButton = styled(Button)(({ theme }) => ({
justifyContent: 'space-between',
textAlign: 'left',
padding: theme.spacing(2),
height: '100%',
borderRadius: 0,
border: `2px solid ${theme.palette.mode === 'dark' ? '#ffffff' : '#000000'}`,
boxShadow: `8px 8px 0px 0px ${COLORS.shadow}`,
'&:not(:last-child)': {
borderBottom: 'none',
},
'&:hover': {
boxShadow: `12px 12px 0px 0px ${COLORS.shadow}`,
},
}));
return ( return (
<Grid <Box
container sx={{
direction='column' width: '100%',
alignItems='center' maxWidth: 800,
spacing={1.8} mx: 'auto',
paddingTop={2.2} display: 'flex',
padding={0.5} flexDirection: { xs: 'column', md: 'row' },
mb: 8,
}}
>
<Box
sx={{
flexGrow: 1,
flexBasis: 0,
bgcolor: COLORS.background,
border: `2px solid ${COLORS.textPrimary}`,
borderRight: 'none',
borderRadius: { xs: '8px 8px 0 0', md: '8px 0 0 8px' },
boxShadow: `8px 8px 0px 0px ${COLORS.shadow}`,
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
p: 4,
}}
> >
<Grid item style={{ paddingTop: '2em', paddingBottom: '1.5em' }}>
<svg width={0} height={0}> <svg width={0} height={0}>
<linearGradient id='linearColors' x1={1} y1={0} x2={1} y2={1}> <linearGradient id='linearColors' x1={1} y1={0} x2={1} y2={1}>
<stop offset={0} stopColor={theme.palette.primary.main} /> <stop offset={0} stopColor={theme.palette.primary.main} />
<stop offset={1} stopColor={theme.palette.secondary.main} /> <stop offset={1} stopColor={theme.palette.secondary.main} />
</linearGradient> </linearGradient>
</svg> </svg>
<Box sx={{ width: '80%', maxWidth: '400px', height: 'auto' }}>
<RoboSatsTextIcon <RoboSatsTextIcon
sx={{ sx={{
fill: 'url(#linearColors)', fill: 'url(#linearColors)',
height: `${Math.min(width * 0.66, 17) * 0.25}em`, width: '100%',
width: `${Math.min(width * 0.66, 17)}em`, height: 'auto',
}} }}
/> />
<Typography </Box>
lineHeight={0.82} <Typography variant='subtitle1' sx={{ fontSize: '1rem', mt: 2, textAlign: 'center' }}>
sx={{ position: 'relative', bottom: '0.3em' }} A Simple and Private ⚡ Lightning P2P Exchange
color='secondary'
align='center'
component='h6'
variant='h6'
>
{t('A Simple and Private LN P2P Exchange')}
</Typography> </Typography>
</Grid> </Box>
<Grid item>
<Box <Box
sx={{ sx={{
backgroundColor: 'background.paper', flexGrow: 1,
border: '1px solid', flexBasis: 0,
borderRadius: '4px', display: 'flex',
borderColor: theme.palette.mode === 'dark' ? '#434343' : '#c4c4c4', flexDirection: 'column',
'&:hover': { bgcolor: 'transparent',
borderColor: theme.palette.mode === 'dark' ? '#ffffff' : '#2f2f2f',
},
}} }}
> >
<Grid container direction='column' alignItems='center' spacing={1} padding={1.5}> <StyledButton
<Grid item> fullWidth
<Typography align='center'>
{t('Create a new robot and learn to use RoboSats')}
</Typography>
</Grid>
<Grid item>
<Button
size='large'
color='primary'
variant='contained' variant='contained'
sx={{
bgcolor: BUTTON_COLORS.primary,
color: BUTTON_COLORS.text,
borderRadius: { xs: '0', md: '0 8px 0 0' },
'&:hover': {
backgroundColor: BUTTON_COLORS.primary,
boxShadow: `12px 12px 0px 0px ${COLORS.shadow}`,
},
}}
endIcon={<ArrowForwardIcon />}
onClick={() => { onClick={() => {
setView('onboarding'); setView('onboarding');
}} }}
> >
<RocketLaunch /> <Box>
<div style={{ width: '0.5em' }} /> <Typography variant='body2'>Create a new robot and</Typography>
{t('Start')} <Typography variant='body2'>learn to use RoboSats.</Typography>
</Button> <Typography variant='h6' sx={{ mt: 1, fontWeight: 'bold' }}>
</Grid> Start
<Grid item>
<Typography align='center'>
{t('Recover an existing robot using your token')}
</Typography> </Typography>
</Grid> </Box>
<Grid item> </StyledButton>
<Button <StyledButton
size='small' fullWidth
color='secondary'
variant='contained' variant='contained'
sx={{
bgcolor: BUTTON_COLORS.secondary,
color: BUTTON_COLORS.text,
borderRadius: { xs: '0', md: '0' },
'&:hover': {
backgroundColor: BUTTON_COLORS.secondary,
boxShadow: `12px 12px 0px 0px ${COLORS.shadow}`,
},
}}
endIcon={<ArrowForwardIcon />}
onClick={() => { onClick={() => {
setView('recovery'); setView('recovery');
}} }}
> >
<Key /> <div style={{ width: '0.5em' }} /> <Box>
{t('Recovery')} <Typography variant='body2'>Recover an existing</Typography>
</Button> <Typography variant='body2'>Robot using your token.</Typography>
</Grid> <Typography variant='h6' sx={{ mt: 1, fontWeight: 'bold' }}>
</Grid> Recover
</Typography>
</Box> </Box>
</Grid> </StyledButton>
<Grid item sx={{ position: 'relative', bottom: '0.5em' }}> <StyledButton
<Button fullWidth
size='small' variant='contained'
color='primary' sx={{
bgcolor: COLORS.background,
color: BUTTON_COLORS.primary,
borderRadius: { xs: '0 0 8px 8px', md: '0 0 8px 0' },
'&:hover': {
backgroundColor: COLORS.background,
boxShadow: `12px 12px 0px 0px ${COLORS.shadow}`,
},
justifyContent: 'flex-start',
}}
onClick={() => { onClick={() => {
setView('profile'); setView('profile');
getGenerateRobot(genBase62Token(36)); getGenerateRobot(genBase62Token(36));
}} }}
> >
<FastForward /> <div style={{ width: '0.5em' }} /> <Typography variant='body1' sx={{ fontWeight: 'bold' }}>
{t('Fast Generate Robot')} ▶ Fast Generate Robot
</Button> </Typography>
</Grid> </StyledButton>
</Grid> </Box>
</Box>
); );
}; };

39
frontend/src/basic/RobotPage/index.tsx
View File

@ -85,11 +85,10 @@ const RobotPage = (): JSX.Element => {
if (settings.useProxy && !(window.NativeRobosats === undefined) && !(torStatus === 'ON')) { if (settings.useProxy && !(window.NativeRobosats === undefined) && !(torStatus === 'ON')) {
return ( return (
<Paper <Box
elevation={12} sx={{
style={{ width: '100vw',
width: `${width}em`, height: 'auto',
maxHeight: `${maxHeight}em`,
}} }}
> >
<Grid container direction='column' alignItems='center' spacing={1} padding={2}> <Grid container direction='column' alignItems='center' spacing={1} padding={2}>
@ -129,21 +128,36 @@ const RobotPage = (): JSX.Element => {
</Alert> </Alert>
</Grid> </Grid>
</Grid> </Grid>
</Paper> </Box>
); );
} else { } else {
return ( return (
<Box
sx={{
width: '100vw',
height: 'auto',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
padding: '2em',
}}
>
<Paper <Paper
elevation={12} elevation={0}
style={{ sx={{
width: `${width}em`, width: '80vw',
maxHeight: `${maxHeight}em`, maxWidth: '1200px',
maxHeight: '85vh',
overflow: 'auto', overflow: 'auto',
overflowX: 'clip', overflowX: 'clip',
backgroundColor: 'transparent',
border: 'none',
boxShadow: 'none',
padding: '1em',
}} }}
> >
{view === 'welcome' ? ( {view === 'welcome' ? (
<Welcome setView={setView} getGenerateRobot={getGenerateRobot} width={width} /> <Welcome setView={setView} getGenerateRobot={getGenerateRobot} width={1200} />
) : null} ) : null}
{view === 'onboarding' ? ( {view === 'onboarding' ? (
@ -160,7 +174,7 @@ const RobotPage = (): JSX.Element => {
<RobotProfile <RobotProfile
setView={setView} setView={setView}
logoutRobot={logoutRobot} logoutRobot={logoutRobot}
width={width} width={1200}
inputToken={inputToken} inputToken={inputToken}
setInputToken={setInputToken} setInputToken={setInputToken}
getGenerateRobot={getGenerateRobot} getGenerateRobot={getGenerateRobot}
@ -177,6 +191,7 @@ const RobotPage = (): JSX.Element => {
/> />
) : null} ) : null}
</Paper> </Paper>
</Box>
); );
} }
}; };