LaconicNetwork/vega-frontend-monorepo
3
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

chore(trading): adjust the get started checkboxes slightly (#4622)

Browse Source
This commit is contained in:
Matthew Russell 2023-08-25 10:52:52 -07:00 committed by GitHub
parent 52dea6d0dc
commit e765c247ef
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 56 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
apps/trading/components/welcome-dialog/get-started.tsx
View File

@ -105,38 +105,29 @@ export const GetStarted = ({ lead }: Props) => {
{lead && <h2>{lead}</h2>} {lead && <h2>{lead}</h2>}
<h3 className="text-lg">{t('Get started')}</h3> <h3 className="text-lg">{t('Get started')}</h3>
<div> <div>
<ul className="list-inside -ml-5" role="list"> <ul className="list-none">
<li className="flex"> <Step
<div className="w-5"> step={1}
{currentStep > OnboardingStep.ONBOARDING_WALLET_STEP && ( text={t('Get a Vega wallet')}
<VegaIcon name={VegaIconNames.TICK} size={20} /> complete={currentStep > OnboardingStep.ONBOARDING_WALLET_STEP}
)} />
</div> <Step
<div className="ml-1">1. {t('Get a Vega wallet')}</div> step={2}
</li> text={t('Connect')}
<li className="flex"> complete={Boolean(
<div className="w-5"> currentStep > OnboardingStep.ONBOARDING_CONNECT_STEP || pubKey
{(currentStep > OnboardingStep.ONBOARDING_CONNECT_STEP || )}
pubKey) && <VegaIcon name={VegaIconNames.TICK} size={20} />} />
</div> <Step
<div className="ml-1">2. {t('Connect')}</div> step={3}
</li> text={t('Deposit funds')}
<li className="flex"> complete={currentStep > OnboardingStep.ONBOARDING_DEPOSIT_STEP}
<div className="w-5"> />
{currentStep > OnboardingStep.ONBOARDING_DEPOSIT_STEP && ( <Step
<VegaIcon name={VegaIconNames.TICK} size={20} /> step={4}
)} text={t('Open a position')}
</div> complete={currentStep > OnboardingStep.ONBOARDING_ORDER_STEP}
<div className="ml-1">3. {t('Deposit funds')}</div> />
</li>
<li className="flex">
<div className="w-5">
{currentStep > OnboardingStep.ONBOARDING_ORDER_STEP && (
<VegaIcon name={VegaIconNames.TICK} size={20} />
)}
</div>
<div className="ml-1">4. {t('Open a position')}</div>
</li>
</ul> </ul>
</div> </div>
<div> <div>
@ -165,7 +156,7 @@ export const GetStarted = ({ lead }: Props) => {
if (!pubKey) { if (!pubKey) {
return ( return (
<div className={wrapperClasses}> <div className={wrapperClasses}>
<p className="text-sm mb-1"> <p className="mb-1 text-sm">
You need a{' '} You need a{' '}
<ExternalLink href="https://vega.xyz/wallet"> <ExternalLink href="https://vega.xyz/wallet">
Vega wallet Vega wallet
@ -186,3 +177,34 @@ export const GetStarted = ({ lead }: Props) => {
return null; return null;
}; };
const Step = ({
step,
text,
complete,
}: {
step: number;
text: string;
complete: boolean;
}) => {
return (
<li
className={classNames('flex', {
'text-vega-clight-200 dark:text-vega-cdark-200': complete,
})}
>
<div className="flex justify-center w-5">
{complete ? <Tick /> : <span>{step}.</span>}
</div>
<div className="ml-1">{text}</div>
</li>
);
};
const Tick = () => {
return (
<span className="relative right-[2px]">
<VegaIcon name={VegaIconNames.TICK} size={18} />
</span>
);
};

2
libs/ui-toolkit/src/components/icon/vega-icons/vega-icon.tsx
View File

@ -5,7 +5,7 @@ import { VegaIconNameMap } from './vega-icon-record';
export interface VegaIconProps { export interface VegaIconProps {
name: VegaIconNames; name: VegaIconNames;
size?: 8 | 10 | 12 | 13 | 14 | 16 | 20 | 24 | 32; size?: 8 | 10 | 12 | 13 | 14 | 16 | 18 | 20 | 24 | 32;
} }
export const VegaIcon = ({ size = 16, name }: VegaIconProps) => { export const VegaIcon = ({ size = 16, name }: VegaIconProps) => {