Skip to content

Commit

Permalink
login - replaced px with rem; updated design
Browse files Browse the repository at this point in the history
  • Loading branch information
@Hamaad102
Hamaad102 committed Jan 17, 2023
1 parent 4d162f2 commit cf048a0
Showing 1 changed file with 104 additions and 92 deletions.
196 changes: 104 additions & 92 deletions src/modules/login.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,82 +9,90 @@ import Loader from '../components/loader'


const BG_IMAGE_URL = 'https://images.unsplash.com/photo-1558591710-4b4a1ae0f04d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80'
const styles = makeStyles({
siderContainer: { padding: '80px 70px' },
siderImage: {
position: 'absolute',
backgroundImage: `url(${BG_IMAGE_URL})`,
backgroundBlendMode: 'multiply',
backgroundPosition: 'center',
backgroundSize: 'cover',
transform: 'scale(1.5)',
},
welContainer: {
width: '400px',
marginTop: '80px',
},
welTitle: {
fontFamily: "'PT Sans', sans-serif",
fontSize: '34px',
lineHeight: '36px',
},
welDescription: {
marginTop: '20px',
fontFamily: "'PT Sans', sans-serif",
fontSize: '16px',
lineHeight: '24px',
letterSpacing: '0.15px',
},
contentContainer: {
width: '400px',
marginLeft: '80px',
},
login: {
fontFamily: "'PT Sans', sans-serif",
fontSize: '60px',
lineHeight: '72px',
letterSpacing: '-0.5px',
},
verificationDescription: {
marginTop: '40px',
fontFamily: "'PT Sans', sans-serif",
fontSize: '14px',
lineHeight: '20px',
letterSpacing: '0.25px',
},
emailChangeDescription: {
marginTop: '20px',
fontFamily: "'PT Sans', sans-serif",
fontSize: '12px',
lineHeight: '20px',
letterSpacing: '0.25px',
},
loginDescription: {
marginTop: '40px',
fontFamily: "'PT Sans', sans-serif",
fontSize: '16px',
lineHeight: '24px',
letterSpacing: '0.15px',
},
spacingMargin: {
marginTop: '40px',
},
logo: {
width: '114px',
height: '64px',
},
footerLogo: {
marginTop: '100px',
width: '215px',
height: '80px',
},
copyrightMsg: {
marginTop: '20px',
fontFamily: "'PT Sans', sans-serif",
fontSize: '10px',
lineHeight: '56px',
},
})
const customClasses = (showPasscode) => {
return makeStyles({
siderContainer: { padding: '5rem 4.375rem' },
siderImage: {
position: 'absolute',
backgroundImage: `url(${BG_IMAGE_URL})`,
backgroundBlendMode: 'multiply',
backgroundPosition: 'center',
backgroundSize: 'cover',
transform: 'scale(1.5)',
backgroundColor: '#00599A',
},
welContainer: {
width: '25rem',
marginTop: '5rem',
},
welTitle: {
fontFamily: "'PT Sans', sans-serif",
fontSize: '2.125rem',
lineHeight: '2.25rem',
},
welDescription: {
marginTop: '2.25rem',
fontFamily: "'PT Sans', sans-serif",
fontSize: '1rem',
lineHeight: '1.5rem',
letterSpacing: '0.009rem',
color: '#FFFFFF',
},
contentContainer: {
width: showPasscode ? '40.313rem' : '27.438rem',
marginLeft: '5rem',
},
login: {
fontFamily: 'Radio Canada',
fontSize: '3rem',
lineHeight: '3.5rem',
},
verificationDescription: {
marginTop: '2.25rem',
fontFamily: 'Radio Canada',
fontSize: '1rem',
lineHeight: '1.25rem',
letterSpacing: '0.016rem',
},
emailChangeDescription: {
marginTop: '1rem',
fontFamily: 'Radio Canada',
fontSize: '1rem',
lineHeight: '1.25rem',
letterSpacing: '0.016rem',
},
loginDescription: {
marginTop: '2.25rem',
fontFamily: 'Radio Canada',
fontSize: '1rem',
lineHeight: '1.25rem',
letterSpacing: '0.016rem',
},
spacingMargin: {
marginTop: '2.5rem',
},
logo: {
width: '6.601rem',
height: '4rem',
},
footerLogo: {
marginTop: '6.25rem',
width: '13.438rem',
height: '5rem',
},
copyrightMsg: {
marginTop: '1.25rem',
fontFamily: "'PT Sans', sans-serif",
fontSize: '0.625rem',
lineHeight: '3.5rem',
},
largeWidth: {
width: showPasscode ? '16rem' : '25rem',
},
buttonMargin: {
marginTop: showPasscode ? '1rem' : '2.5rem',
},
})}

const Login = ({
classes,
Expand All @@ -107,6 +115,8 @@ const Login = ({
const [errors, setErrors] = useState({})
const [loading, setLoading] = useState({})

const styles = customClasses(showPasscode)

useEffect(() => {
if (loadingConfig) {
setLoading(loadingConfig)
Expand Down Expand Up @@ -196,36 +206,36 @@ const Login = ({
classes={{ root: 'flex flex-col justify-between items-center', message: 'mt-2' }}
/>
<Layout.Sider className={`border ${styles.siderContainer} relative w-5/12 h-full overflow-hidden`}>
<div className={`w-full h-full bg-primary-500 ${styles.siderImage} ${classes.siderImage}`} />
<div className={`w-full h-full ${styles.siderImage} ${classes.siderImage}`} />
<div className='relative w-full h-full'>
<div className={`${classes.logo} ${styles.logo} text-secondary-50`}>{secondaryLogo}</div>
<div className={styles.welContainer}>
{!showPasscode && <div className={styles.welContainer}>
<p className={`${classes.welcomeTitle} ${styles.welTitle} font-normal text-left text-secondary-50`}>
{welcomeTitle}
</p>
<p className={`${classes.welcomeDescription} ${styles.welDescription} font-bold text-left text-secondary-50`}>
<p className={`${classes.welcomeDescription} ${styles.welDescription} font-bold text-left`}>
{welcomeDescription}
</p>
</div>
</div>}
</div>
</Layout.Sider>
<Layout.Content className='w-7/12 h-full flex justify-center items-center'>
<div className={`flex flex-col justify-center items-start ${styles.contentContainer}`}>
<div className={`flex flex-col justify-center items-center ${styles.contentContainer}`}>
<p className={`${styles.login} font-normal text-secondary-900`}>
{showPasscode ? 'Verify Account' : 'Log In'}</p>
{!showPasscode && <p className={`${styles.loginDescription} font-normal text-secondary-900`}>
To begin using {product}, please enter your associated email address to authenticate your account.
{!showPasscode && <p className={`${styles.loginDescription} font-normal text-secondary-700 text-center`}>
To begin using {product}, please enter your associated email address and authenticate your account.
</p>}
{showPasscode &&
<>
<p className={`${styles.verificationDescription} font-normal text-secondary-900`}>
Account authentication methods have been sent to <b className='text-primary-600'>{email}</b>
<p className={`${styles.verificationDescription} font-normal text-center text-secondary-700`}>
Account authentication methods have been sent to <span className='text-secondary-900'>{email}</span>
</p>
<a
className={`${styles.emailChangeDescription} font-normal text-primary-500 cursor-pointer hover:underline`}
onClick={emailChangeToggle}
>
Change my email address
Change email address
</a>
</>
}
Expand All @@ -239,9 +249,10 @@ const Login = ({
value={email}
onChange={(val) => handleChange('email', val)}
onSubmit={handleEmailSubmit}
classes={{ container: `w-full ${styles.spacingMargin}` }}
classes={{ container: `${styles.largeWidth} ${styles.spacingMargin}` }}
/>}
{showPasscode && <>
{showPasscode &&
<div className={`flex flex-col ${styles.spacingMargin}`}>
<TextField
autoFocus
variant='linked'
Expand All @@ -252,19 +263,20 @@ const Login = ({
value={passcode}
onChange={(val) => handleChange('passcode', val)}
onSubmit={handlePasscodeSubmit}
classes={{ container: styles.spacingMargin }}
classes={{ container: `${styles.largeWidth} ` }}
/>
<a
className={`${styles.emailChangeDescription} font-normal text-primary-500 cursor-pointer hover:underline`}
onClick={handleEmailSubmit}
>
Did not receive a code?
{/* eslint-disable-next-line react/no-unescaped-entities */}
Didn't receive a code?
</a>
</>}
</div>}
<Button
size='lg'
variant='filled'
classes={{ button: `w-full ${styles.spacingMargin}` }}
classes={{ button: `${styles.largeWidth} ${styles.buttonMargin}` }}
disabled={showPasscode ? !passcode : !email}
onClick={showPasscode ? handlePasscodeSubmit : handleEmailSubmit}
>Submit</Button>
Expand Down

0 comments on commit cf048a0

Please sign in to comment.