Skip to content

Commit

Permalink
updated login and register flow
Browse files Browse the repository at this point in the history
  • Loading branch information
okeino committed Jan 29, 2024
1 parent 8537f20 commit 9c16dc3
Show file tree
Hide file tree
Showing 13 changed files with 62 additions and 19 deletions.
6 changes: 3 additions & 3 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions public/img/icons-raw/fa-apple.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion public/img/icons-raw/fa-facebook.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions public/img/icons-raw/fa-google.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 15 additions & 1 deletion src/components/molecules/button.module.scss
Original file line number Diff line number Diff line change
Expand Up @@ -111,8 +111,22 @@ $button-height: 31px;
}

.iconLeftOfText {
margin-right: 4px;
margin-right: 0px;
}
.leftIcon {
float: left;
margin-left: 20%;
}
.iconRightOfText {
margin-left: 4px;
}
.spaceIcon {
flex: 1;
flex-direction: row;
//justify-content: center;
//align-content: center;
}
.text {
text-align: center;
width: 80%;
}
17 changes: 12 additions & 5 deletions src/components/molecules/button.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -50,13 +50,20 @@ export default function Button({
};

const inner = (
<>
{IconLeft && <IconLeft className={clsx(text && styles.iconLeftOfText)} />}
{text}
<div className={IconLeft ? styles.spaceIcon : ''}>
{IconLeft && (
<div className={styles.leftIcon}>
<IconLeft className={clsx(text && styles.iconLeftOfText)} />
</div>
)}

<div className={styles.text}>{text}</div>
{IconRight && (
<IconRight className={clsx(text && styles.iconRightOfText)} />
<div>
<IconRight className={clsx(text && styles.iconRightOfText)} />
</div>
)}
</>
</div>
);
return href ? (
<Link href={href} legacyBehavior>
Expand Down
2 changes: 1 addition & 1 deletion src/components/molecules/buttonGuest.module.scss
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
display: flex;
align-items: center;
justify-content: center;
margin: 0;
margin-left: 0;
padding: 0;
background: none;
border: none;
Expand Down
2 changes: 1 addition & 1 deletion src/components/molecules/buttonGuest.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -158,7 +158,7 @@ export default function ButtonGuest({
/>
<Button
onClick={() => setIsGuestModal2Open(false)}
href={redirectRoute}
href="/"
className={styles.link}
type="none"
text={
Expand Down
2 changes: 1 addition & 1 deletion src/components/molecules/loginLanding.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ export default function Login(): JSX.Element {
})}
legacyBehavior
>
<a>
<a className={styles.loginText}>
{intl.formatMessage({
id: 'regularLogin__loginTxt',
defaultMessage: 'Log In',
Expand Down
3 changes: 3 additions & 0 deletions src/components/molecules/socialLogin.module.scss
Original file line number Diff line number Diff line change
Expand Up @@ -20,3 +20,6 @@
.centerText {
justify-content: center;
}
.loginText {
padding: 4px;
}
8 changes: 6 additions & 2 deletions src/components/molecules/socialLogin.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import { useQueryClient } from '@tanstack/react-query';
import fafacebook from 'public/img/icons-raw/fa-facebook.svg';
import fagoogle from 'public/img/icons-raw/fa-google.svg';
import React, { useState } from 'react';
import {
ReactFacebookFailureResponse,
Expand Down Expand Up @@ -100,7 +102,7 @@ export default function SocialLogin({
appId={FACEBOOK_APP_ID}
render={(renderProps) => (
<Button
type="primary"
type="secondary"
text={
isRegister
? intl.formatMessage({
Expand All @@ -114,6 +116,7 @@ export default function SocialLogin({
}
onClick={renderProps.onClick}
centered
IconLeft={fafacebook}
/>
)}
callback={(response) => {
Expand Down Expand Up @@ -143,7 +146,7 @@ export default function SocialLogin({
/>

<Button
type="primary"
type="secondary"
text={
isRegister
? intl.formatMessage({
Expand All @@ -157,6 +160,7 @@ export default function SocialLogin({
}
onClick={signIn}
centered
IconLeft={fagoogle}
/>
</div>
</>
Expand Down
10 changes: 9 additions & 1 deletion src/components/templates/andOnboarding.module.scss
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,15 @@
text-align: center;
margin-bottom: 32px;
}

.whySignUp {
display: flex;
flex-direction: row;
align-items: center;
padding-left: 20%;
}
.guest {
margin-left: 10%;
}
.intro {
font-size: 18px;
line-height: 21.78px;
Expand Down
11 changes: 8 additions & 3 deletions src/components/templates/andOnboarding.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,18 @@ export default function AndOnboarding({
}): JSX.Element {
const languageRoute = useLanguageRoute();
const features = getAppFeatures(languageRoute);
const classes = `${styles.logo} ${styles.whySignUp}`;

return (
<div className={styles.page}>
<div className={styles.form}>
<div className={styles.logo}>
<LogoLarge />
<ButtonGuest />
<div className={classes}>
<div>
<LogoLarge />
</div>
<div className={styles.guest}>
<ButtonGuest />
</div>
</div>
<div className={styles.intro}>
<FormattedMessage
Expand Down

0 comments on commit 9c16dc3

Please sign in to comment.