Commit 3e6be97b authored by tom's avatar tom

design fixes for auth modal and user profile menu

parent 805ad3de
......@@ -140,6 +140,7 @@ const AuthModal = ({ initialScreen, onClose, mixpanelConfig }: Props) => {
<AuthModalScreenSuccessEmail
email={ currentStep.email }
onConnectWallet={ onNextStep }
onClose={ onModalClose }
isAuth={ currentStep.isAuth }
profile={ currentStep.profile }
/>
......@@ -149,6 +150,7 @@ const AuthModal = ({ initialScreen, onClose, mixpanelConfig }: Props) => {
<AuthModalScreenSuccessWallet
address={ currentStep.address }
onAddEmail={ onNextStep }
onClose={ onModalClose }
isAuth={ currentStep.isAuth }
profile={ currentStep.profile }
/>
......
......@@ -9,22 +9,32 @@ import config from 'configs/app';
interface Props {
email: string;
onConnectWallet: (screen: Screen) => void;
onClose: () => void;
isAuth?: boolean;
profile: UserInfo | undefined;
}
const AuthModalScreenSuccessEmail = ({ email, onConnectWallet, isAuth, profile }: Props) => {
const AuthModalScreenSuccessEmail = ({ email, onConnectWallet, onClose, isAuth, profile }: Props) => {
const handleConnectWalletClick = React.useCallback(() => {
onConnectWallet({ type: 'connect_wallet', isAuth: true });
}, [ onConnectWallet ]);
if (isAuth) {
return (
<Box>
<Text>
Your account was linked to{ ' ' }
<chakra.span fontWeight="700">{ email }</chakra.span>{ ' ' }
email. Use for the next login.
</Text>
<Button
mt={ 6 }
variant="outline"
onClick={ onClose }
>
Got it!
</Button>
</Box>
);
}
......@@ -34,11 +44,19 @@ const AuthModalScreenSuccessEmail = ({ email, onConnectWallet, isAuth, profile }
<chakra.span fontWeight="700">{ email }</chakra.span>{ ' ' }
email has been successfully used to log in to your Blockscout account.
</Text>
{ !profile?.address_hash && config.features.blockchainInteraction.isEnabled && (
{ !profile?.address_hash && config.features.blockchainInteraction.isEnabled ? (
<>
<Text mt={ 6 }>Add your web3 wallet to safely interact with smart contracts and dapps inside Blockscout.</Text>
<Button mt={ 6 } onClick={ handleConnectWalletClick }>Connect wallet</Button>
</>
) : (
<Button
variant="outline"
mt={ 6 }
onClick={ onClose }
>
Got it!
</Button>
) }
</Box>
);
......
......@@ -9,22 +9,32 @@ import shortenString from 'lib/shortenString';
interface Props {
address: string;
onAddEmail: (screen: Screen) => void;
onClose: () => void;
isAuth?: boolean;
profile: UserInfo | undefined;
}
const AuthModalScreenSuccessWallet = ({ address, onAddEmail, isAuth, profile }: Props) => {
const AuthModalScreenSuccessWallet = ({ address, onAddEmail, onClose, isAuth, profile }: Props) => {
const handleAddEmailClick = React.useCallback(() => {
onAddEmail({ type: 'email', isAuth: true });
}, [ onAddEmail ]);
if (isAuth) {
return (
<Box>
<Text>
Your account was linked to{ ' ' }
<chakra.span fontWeight="700">{ shortenString(address) }</chakra.span>{ ' ' }
wallet. Use for the next login.
</Text>
<Button
mt={ 6 }
variant="outline"
onClick={ onClose }
>
Got it!
</Button>
</Box>
);
}
......@@ -35,11 +45,19 @@ const AuthModalScreenSuccessWallet = ({ address, onAddEmail, isAuth, profile }:
<chakra.span fontWeight="700">{ shortenString(address) }</chakra.span>{ ' ' }
has been successfully used to log in to your Blockscout account.
</Text>
{ !profile?.email && (
{ !profile?.email ? (
<>
<Text mt={ 6 }>Add your email to receive notifications about addresses in your watch list.</Text>
<Button mt={ 6 } onClick={ handleAddEmailClick }>Add email</Button>
</>
) : (
<Button
mt={ 6 }
variant="outline"
onClick={ onClose }
>
Got it!
</Button>
) }
</Box>
);
......
......@@ -99,7 +99,7 @@ const UserProfileContent = ({ data, onClose, onLogin, onAddEmail, onAddAddress }
/>
{ data?.address_hash ?
<Box>{ shortenString(data?.address_hash) }</Box> :
<Link onClick={ onAddAddress } color="icon_info" _hover={{ color: 'link_hovered', textDecoration: 'none' }}>Add address</Link>
<Link onClick={ onAddAddress } _hover={{ color: 'link_hovered', textDecoration: 'none' }}>Add address</Link>
}
</Flex>
) }
......@@ -107,7 +107,7 @@ const UserProfileContent = ({ data, onClose, onLogin, onAddEmail, onAddAddress }
<Box mr="auto">Email</Box>
{ data?.email ?
<TruncatedValue value={ data.email }/> :
<Link onClick={ onAddEmail } color="icon_info" _hover={{ color: 'link_hovered', textDecoration: 'none' }}>Add email</Link>
<Link onClick={ onAddEmail } _hover={{ color: 'link_hovered', textDecoration: 'none' }}>Add email</Link>
}
</Flex>
</Box>
......
......@@ -41,7 +41,7 @@ const UserProfileContentWallet = ({ onClose, className }: Props) => {
isTooltipDisabled
truncation="dynamic"
fontSize="sm"
fontWeight={ 700 }
fontWeight={ 500 }
/>
<IconButton
aria-label="Open wallet"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment