update onboarding image

This commit is contained in:
saml33 2023-05-22 15:24:04 +10:00
parent 88d956c5ba
commit cdd116dcb1
3 changed files with 20 additions and 18 deletions

View File

@ -9,7 +9,7 @@ const ColorBlur = ({
}) => { }) => {
return ( return (
<div <div
className={`absolute rounded-full bg-th-button opacity-10 mix-blend-screen blur-3xl filter ${className}`} className={`absolute rounded-full blur-3xl filter ${className}`}
style={{ height: height, width: width }} style={{ height: height, width: width }}
/> />
) )

View File

@ -27,7 +27,7 @@ import ButtonGroup from '../forms/ButtonGroup'
import Input from '../forms/Input' import Input from '../forms/Input'
import Label from '../forms/Label' import Label from '../forms/Label'
import WalletIcon from '../icons/WalletIcon' import WalletIcon from '../icons/WalletIcon'
import ParticlesBackground from '../ParticlesBackground' // import ParticlesBackground from '../ParticlesBackground'
// import EditNftProfilePic from '../profile/EditNftProfilePic' // import EditNftProfilePic from '../profile/EditNftProfilePic'
// import EditProfileForm from '../profile/EditProfileForm' // import EditProfileForm from '../profile/EditProfileForm'
import Button, { LinkButton } from '../shared/Button' import Button, { LinkButton } from '../shared/Button'
@ -209,26 +209,21 @@ const UserSetupModal = ({
return ( return (
<Modal isOpen={isOpen} onClose={onClose} fullScreen disableOutsideClose> <Modal isOpen={isOpen} onClose={onClose} fullScreen disableOutsideClose>
<div className="grid h-screen overflow-auto bg-th-bkg-1 text-left lg:grid-cols-2"> <div className="grid h-screen overflow-auto bg-th-bkg-1 text-left lg:grid-cols-2">
<img <ColorBlur
className={`absolute -bottom-20 left-1/2 mt-8 h-auto -translate-x-1/2 sm:w-[60%] md:w-[410px] lg:left-auto lg:-right-10 lg:w-[55%] lg:-translate-x-0 xl:-bottom-40 ${ width="66%"
showSetupStep !== 0 ? 'hidden lg:block' : 'hidden sm:block' height="300px"
}`} className="-top-20 -left-20 bg-th-button opacity-10 brightness-125"
src="/images/swap-trade@0.75x.png" />
srcSet="/images/swap-trade@0.75x.png 1098x, /images/swap-trade@1x.png 1463w, <ColorBlur
/images/swap-trade@2x.png 2926w" width="50%"
sizes="(max-width: 1600px) 1098px, (max-width: 2500px) 1463px, 2926px" height="100%"
alt="next" className="-bottom-20 -right-20 bg-th-bkg-1 opacity-30 mix-blend-multiply"
/> />
<img <img
className={`absolute top-6 left-6 h-10 w-10 flex-shrink-0`} className={`absolute top-6 left-6 h-10 w-10 flex-shrink-0`}
src="/logos/logo-mark.svg" src="/logos/logo-mark.svg"
alt="next" alt="next"
/> />
<ColorBlur
width="66%"
height="300px"
className="-top-20 left-0 opacity-20 brightness-125"
/>
<div className="absolute top-0 left-0 z-10 flex h-1.5 w-full flex-grow bg-th-bkg-3"> <div className="absolute top-0 left-0 z-10 flex h-1.5 w-full flex-grow bg-th-bkg-3">
<div <div
style={{ style={{
@ -544,8 +539,15 @@ const UserSetupModal = ({
) : null} ) : null}
</UserSetupTransition> </UserSetupTransition>
</div> </div>
<div className="col-span-1 hidden h-screen lg:block"> <div className="relative col-span-1 hidden h-screen lg:block">
<ParticlesBackground /> {/* <ParticlesBackground /> */}
<img
className={`absolute left-1/2 top-1/2 h-auto w-[95%] max-w-[700px] -translate-x-1/2 -translate-y-1/2 ${
showSetupStep !== 0 ? 'hidden lg:block' : 'hidden sm:block'
}`}
src="/images/onboarding-image@1x.png"
alt="next"
/>
</div> </div>
</div> </div>
</Modal> </Modal>

Binary file not shown.

After

Width:  |  Height:  |  Size: 296 KiB