keejef
/
session-desktop
mirror of https://github.com/oxen-io/session-desktop
2
0
Fork 0
Code Issues 8 Projects Releases Wiki Activity

feat: updated onboarding header

Browse Source 
added external link buttons, removed accentText and added new svgs
pull/3056/head
William Grant 1 year ago
parent 090ddc07a9
commit f6a6b11f7b
9 changed files with 127 additions and 107 deletions
Show Stats Download Patch File Download Diff File

1
_locales/en/messages.json
Unescape Escape View File

@ -403,7 +403,6 @@
"linkDevice": "Link Device", "linkDevice": "Link Device",
"restoreUsingRecoveryPhrase": "Restore your account", "restoreUsingRecoveryPhrase": "Restore your account",
"or": "or", "or": "or",
"beginYourSession": "Begin your Session.",
"welcomeToYourSession": "Welcome to your Session", "welcomeToYourSession": "Welcome to your Session",
"searchFor...": "Search conversations and contacts", "searchFor...": "Search conversations and contacts",
"searchForContactsOnly": "Search for contacts", "searchForContactsOnly": "Search for contacts",

18
ts/components/icon/Icons.tsx
View File

File diff suppressed because one or more lines are too long

7
ts/components/registration/AccentText.tsx
Unescape Escape View File

@ -1,7 +0,0 @@
import { FC } from 'react';
export const AccentText: FC = () => (
<div className="session-content-accent-text">
<div className="session-content-accent-text title">{window.i18n('beginYourSession')}</div>
</div>
);

41
ts/components/registration/RegistrationStages.tsx
Unescape Escape View File

@ -1,3 +1,4 @@
import { shell } from 'electron';
import { useDispatch } from 'react-redux'; import { useDispatch } from 'react-redux';
import { useMount } from 'react-use'; import { useMount } from 'react-use';
import styled from 'styled-components'; import styled from 'styled-components';
@ -27,15 +28,17 @@ import {
} from '../../util/accountManager'; } from '../../util/accountManager';
import { Storage, setSignInByLinking, setSignWithRecoveryPhrase } from '../../util/storage'; import { Storage, setSignInByLinking, setSignWithRecoveryPhrase } from '../../util/storage';
import { Flex } from '../basic/Flex'; import { Flex } from '../basic/Flex';
import { SpacerSM } from '../basic/Text';
import { SessionIcon, SessionIconButton } from '../icon';
import { ModalContainer } from './ModalContainer'; import { ModalContainer } from './ModalContainer';
import { SignInTab, SignUpTab } from './stages'; import { SignInTab, SignUpTab } from './stages';
const StyledRegistrationContainer = styled(Flex)` const StyledRegistrationContainer = styled(Flex)`
width: 289px; width: 348px;
.session-button { .session-button {
width: 80%; width: 100%;
margin: auto; margin: 0;
} }
`; `;
@ -207,6 +210,38 @@ export const RegistrationStages = () => {
<> <>
<ModalContainer /> <ModalContainer />
<StyledRegistrationContainer container={true} flexDirection="column"> <StyledRegistrationContainer container={true} flexDirection="column">
<Flex container={true} alignItems="center">
<SessionIcon iconColor="var(--primary-color)" iconSize={'huge'} iconType="brand" />
<SpacerSM />
<div style={{ flexGrow: 1 }}>
<SessionIcon iconSize={'small'} iconType="session" />
</div>
<Flex container={true} alignItems="center">
<SessionIconButton
aria-label="external link to Session FAQ web page"
iconType="question"
iconSize={'medium'}
iconPadding="4px"
iconColor="var(--text-primary-color)"
style={{ border: '2px solid var(--text-primary-color)', borderRadius: '9999px' }}
onClick={() => {
void shell.openExternal('https://getsession.org/faq');
}}
/>
<SpacerSM />
<SessionIconButton
aria-label="external link to Session FAQ web page"
iconType="link"
iconSize="medium"
iconColor="var(--text-primary-color)"
iconPadding="4px"
style={{ border: '2px solid var(--text-primary-color)', borderRadius: '9999px' }}
onClick={() => {
void shell.openExternal('https://getsession.org');
}}
/>
</Flex>
</Flex>
{(step === Onboarding.Start || step === Onboarding.CreateAccount) && <SignUpTab />} {(step === Onboarding.Start || step === Onboarding.CreateAccount) && <SignUpTab />}
{(step === Onboarding.Start || step === Onboarding.RestoreAccount) && <SignInTab />} {(step === Onboarding.Start || step === Onboarding.RestoreAccount) && <SignInTab />}
</StyledRegistrationContainer> </StyledRegistrationContainer>

41
ts/components/registration/SessionRegistrationView.tsx
Unescape Escape View File

@ -1,14 +1,12 @@
import { useEffect } from 'react'; import { useEffect } from 'react';
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
import styled from 'styled-components'; import styled from 'styled-components';
import { AccentText } from './AccentText';
import { onboardingStore } from '../../state/onboarding/store'; import { onboardingStore } from '../../state/onboarding/store';
import { SessionTheme } from '../../themes/SessionTheme'; import { SessionTheme } from '../../themes/SessionTheme';
import { setSignInByLinking } from '../../util/storage'; import { setSignInByLinking } from '../../util/storage';
import { SessionToastContainer } from '../SessionToastContainer'; import { SessionToastContainer } from '../SessionToastContainer';
import { Flex } from '../basic/Flex'; import { Flex } from '../basic/Flex';
import { SessionIcon } from '../icon';
import { RegistrationStages } from './RegistrationStages'; import { RegistrationStages } from './RegistrationStages';
import { Hero } from './components'; import { Hero } from './components';
@ -62,27 +60,24 @@ export const SessionRegistrationView = () => {
}, []); }, []);
return ( return (
<SessionTheme> <Provider store={onboardingStore}>
<StyledFullscreenContainer container={true} alignItems="center"> <SessionTheme>
<Hero /> <StyledFullscreenContainer container={true} alignItems="center">
<StyledSessionContent <Hero />
flexDirection="column" <StyledSessionContent
alignItems="center" flexDirection="column"
container={true} alignItems="center"
height="100%" container={true}
flexGrow={1} height="100%"
> flexGrow={1}
<Flex container={true} margin="auto" alignItems="center" flexDirection="column"> >
<SessionToastContainer /> <Flex container={true} margin="auto" alignItems="center" flexDirection="column">
<SessionIcon iconSize={150} iconType="brand" /> <SessionToastContainer />
<AccentText />
<Provider store={onboardingStore}>
<RegistrationStages /> <RegistrationStages />
</Provider> </Flex>
</Flex> </StyledSessionContent>
</StyledSessionContent> </StyledFullscreenContainer>
</StyledFullscreenContainer> </SessionTheme>
</SessionTheme> </Provider>
); );
}; };

97
ts/components/registration/stages/SignUpTab.tsx → ts/components/registration/stages/create/SignUpTab.tsx
Unescape Escape View File

@ -6,61 +6,26 @@ import {
Onboarding, Onboarding,
setAccountCreationStep, setAccountCreationStep,
setOnboardingStep, setOnboardingStep,
} from '../../../state/onboarding/ducks/registration'; } from '../../../../state/onboarding/ducks/registration';
import { import {
useOnboardAccountCreationStep, useOnboardAccountCreationStep,
useOnboardGeneratedRecoveryPhrase, useOnboardGeneratedRecoveryPhrase,
useOnboardHexGeneratedPubKey, useOnboardHexGeneratedPubKey,
} from '../../../state/onboarding/selectors/registration'; } from '../../../../state/onboarding/selectors/registration';
import { Noop } from '../../../types/Util'; import { Flex } from '../../../basic/Flex';
import { Flex } from '../../basic/Flex'; import { SessionButton } from '../../../basic/SessionButton';
import { SessionButton } from '../../basic/SessionButton'; import { SessionIdEditable } from '../../../basic/SessionIdEditable';
import { SessionIdEditable } from '../../basic/SessionIdEditable'; import { signUp } from '../../RegistrationStages';
import { signUp } from '../RegistrationStages'; import { RegistrationUserDetails } from '../../RegistrationUserDetails';
import { RegistrationUserDetails } from '../RegistrationUserDetails'; import { TermsAndConditions } from '../../TermsAndConditions';
import { TermsAndConditions } from '../TermsAndConditions'; import { BackButton } from '../../components';
import { BackButton } from '../components'; import { sanitizeDisplayNameOrToast } from '../restore/SignInTab';
import { sanitizeDisplayNameOrToast } from './SignInTab';
const StyledContainer = styled.div` const StyledContainer = styled.div`
width: 100%; width: 100%;
padding-top: 20px; padding-top: 20px;
`; `;
const CreateSessionIdButton = ({ createSessionID }: { createSessionID: any }) => {
return <SessionButton onClick={createSessionID} text={window.i18n('createSessionID')} />;
};
const ContinueSignUpButton = ({ continueSignUp }: { continueSignUp: any }) => {
return <SessionButton onClick={continueSignUp} text={window.i18n('continue')} />;
};
const SignUpDefault = (props: { createSessionID: Noop }) => {
return (
<div className="session-registration__content">
<CreateSessionIdButton createSessionID={props.createSessionID} />
</div>
);
};
const SignUpSessionIDShown = (props: { continueSignUp: Noop }) => {
return (
<div className="session-registration__content">
<Flex flexDirection="row" container={true} alignItems="center">
<BackButton />
<div className="session-registration__unique-session-id">
{window.i18n('yourUniqueSessionID')}
</div>
</Flex>
<SessionIdEditable editable={false} placeholder={undefined} dataTestId="session-id-signup" />
<div className="session-description-long">{window.i18n('allUsersAreRandomly...')}</div>
<ContinueSignUpButton continueSignUp={props.continueSignUp} />
<TermsAndConditions />
</div>
);
};
export const SignUpTab = () => { export const SignUpTab = () => {
const step = useOnboardAccountCreationStep(); const step = useOnboardAccountCreationStep();
const generatedRecoveryPhrase = useOnboardGeneratedRecoveryPhrase(); const generatedRecoveryPhrase = useOnboardGeneratedRecoveryPhrase();
@ -79,22 +44,42 @@ export const SignUpTab = () => {
if (step === AccountCreation.Start) { if (step === AccountCreation.Start) {
return ( return (
<SignUpDefault <div className="session-registration__content">
createSessionID={() => { <SessionButton
dispatch(setAccountCreationStep(AccountCreation.SessionIDShown)); onClick={() => {
dispatch(setOnboardingStep(Onboarding.CreateAccount)); dispatch(setAccountCreationStep(AccountCreation.SessionIDShown));
}} dispatch(setOnboardingStep(Onboarding.CreateAccount));
/> }}
text={window.i18n('createSessionID')}
/>
</div>
); );
} }
if (step === AccountCreation.SessionIDShown) { if (step === AccountCreation.SessionIDShown) {
return ( return (
<SignUpSessionIDShown <div className="session-registration__content">
continueSignUp={() => { <Flex flexDirection="row" container={true} alignItems="center">
dispatch(setAccountCreationStep(AccountCreation.DisplayName)); <BackButton />
}}
/> <div className="session-registration__unique-session-id">
{window.i18n('yourUniqueSessionID')}
</div>
</Flex>
<SessionIdEditable
editable={false}
placeholder={undefined}
dataTestId="session-id-signup"
/>
<div className="session-description-long">{window.i18n('allUsersAreRandomly...')}</div>
<SessionButton
onClick={() => {
dispatch(setAccountCreationStep(AccountCreation.DisplayName));
}}
text={window.i18n('continue')}
/>
<TermsAndConditions />
</div>
); );
} }

4
ts/components/registration/stages/index.tsx
Unescape Escape View File

@ -1,4 +1,4 @@
import { SignInTab } from './SignInTab'; import { SignUpTab } from './create/SignUpTab';
import { SignUpTab } from './SignUpTab'; import { SignInTab } from './restore/SignInTab';
export { SignInTab, SignUpTab }; export { SignInTab, SignUpTab };

24
ts/components/registration/stages/SignInTab.tsx → ts/components/registration/stages/restore/SignInTab.tsx
Unescape Escape View File

@ -1,22 +1,22 @@
import { useState } from 'react'; import { useState } from 'react';
import { useDispatch } from 'react-redux'; import { useDispatch } from 'react-redux';
import { ToastUtils } from '../../../session/utils'; import { ToastUtils } from '../../../../session/utils';
import { sanitizeSessionUsername } from '../../../session/utils/String'; import { sanitizeSessionUsername } from '../../../../session/utils/String';
import { import {
AccountRestoration, AccountRestoration,
Onboarding, Onboarding,
setAccountRestorationStep, setAccountRestorationStep,
setOnboardingStep, setOnboardingStep,
} from '../../../state/onboarding/ducks/registration'; } from '../../../../state/onboarding/ducks/registration';
import { useOnboardAccountRestorationStep } from '../../../state/onboarding/selectors/registration'; import { useOnboardAccountRestorationStep } from '../../../../state/onboarding/selectors/registration';
import { Flex } from '../../basic/Flex'; import { Flex } from '../../../basic/Flex';
import { SessionButton } from '../../basic/SessionButton'; import { SessionButton } from '../../../basic/SessionButton';
import { SpacerLG } from '../../basic/Text'; import { SpacerLG } from '../../../basic/Text';
import { SessionSpinner } from '../../loading'; import { SessionSpinner } from '../../../loading';
import { signInWithLinking, signInWithRecovery } from '../RegistrationStages'; import { signInWithLinking, signInWithRecovery } from '../../RegistrationStages';
import { RegistrationUserDetails } from '../RegistrationUserDetails'; import { RegistrationUserDetails } from '../../RegistrationUserDetails';
import { TermsAndConditions } from '../TermsAndConditions'; import { TermsAndConditions } from '../../TermsAndConditions';
import { BackButton } from '../components'; import { BackButton } from '../../components';
const LinkDeviceButton = (props: { onLinkDeviceButtonClicked: () => any }) => { const LinkDeviceButton = (props: { onLinkDeviceButtonClicked: () => any }) => {
return ( return (

1
ts/types/LocalizerKeys.ts
Unescape Escape View File

@ -37,7 +37,6 @@ export type LocalizerKeys =
| 'autoUpdateSettingTitle' | 'autoUpdateSettingTitle'
| 'banUser' | 'banUser'
| 'banUserAndDeleteAll' | 'banUserAndDeleteAll'
| 'beginYourSession'
| 'blindedMsgReqsSettingDesc' | 'blindedMsgReqsSettingDesc'
| 'blindedMsgReqsSettingTitle' | 'blindedMsgReqsSettingTitle'
| 'block' | 'block'

Write Preview
Loading…
Cancel
Save