feat: 🔥 [EXL-66] auth page aligned with public version (#306)

Exlint · Sep 12, 2022 · 50d064f · 50d064f
2 parents 7377f33 + 33b9a91
commit 50d064f
Show file tree

Hide file tree

Showing 20 changed files with 402 additions and 244 deletions.
diff --git a/apps/frontend/.depcheckrc.json b/apps/frontend/.depcheckrc.json
@@ -6,6 +6,7 @@
 		"stylelint-config-standard-scss",
 		"react-scripts",
 		"postcss-flexbugs-fixes",
-		"typescript-plugin-css-modules"
+		"typescript-plugin-css-modules",
+		"stylelint-declaration-strict-value"
 	]
 }
diff --git a/apps/frontend/package.json b/apps/frontend/package.json
@@ -62,6 +62,7 @@
 		"stylelint-config-prettier-scss": "0.0.1",
 		"stylelint-config-recess-order": "3.0.0",
 		"stylelint-config-standard-scss": "5.0.0",
+		"stylelint-declaration-strict-value": "1.9.0",
 		"tsconfig-paths-webpack-plugin": "4.0.0",
 		"typescript-plugin-css-modules": "3.4.0"
 	},

diff --git a/apps/frontend/src/assets/images/auth-background.png b/apps/frontend/src/assets/images/auth-background.png
diff --git a/apps/frontend/src/assets/images/auth-brand-logo.png b/apps/frontend/src/assets/images/auth-brand-logo.png
diff --git a/apps/frontend/src/assets/images/github-brand-logo.png b/apps/frontend/src/assets/images/github-brand-logo.png
diff --git a/apps/frontend/src/assets/images/google-brand-logo.png b/apps/frontend/src/assets/images/google-brand-logo.png
diff --git a/apps/frontend/src/components/containers/Auth/Auth.module.scss b/apps/frontend/src/components/containers/Auth/Auth.module.scss
@@ -1,137 +1,4 @@
-@use 'sass:map';
-
-@import '../../../styles/variables.scss';
-
 .main {
 	display: flex;
-	font-family: poppins, sans-serif;
-
-	.leftSideContainer {
-		position: relative;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		width: 50%;
-		padding: 0 80px;
-		background-image: url('../../../assets/images/auth-background.png');
-		background-repeat: no-repeat;
-		background-position: center;
-		background-size: cover;
-
-		&__brandLogo {
-			position: absolute;
-			top: 34px;
-			inset-inline-end: 34px;
-			width: 168px;
-			object-fit: contain;
-		}
-
-		&__header {
-			margin-bottom: 9px;
-			font-size: 5.5rem;
-			font-weight: 700;
-			line-height: 65.25px;
-			text-align: center;
-			background: linear-gradient(270deg, #9072a7 46.97%, #f2f2f2 93.64%);
-			background-clip: text;
-			-webkit-text-fill-color: transparent;
-		}
-
-		&__subHeader {
-			font-size: 3.6rem;
-			font-weight: 400;
-			color: #bbb8ca;
-			text-align: center;
-		}
-	}
-
-	.rightSideContainer {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		width: 50%;
-
-		&__header {
-			font-size: 4rem;
-			font-weight: 700;
-			color: map.get($colors, purple-text);
-		}
-
-		&__subHeader {
-			margin-bottom: 45px;
-			font-size: 3.5rem;
-			font-weight: 400;
-			color: map.get($colors, purple-text);
-		}
-
-		.rightSideExternalAuthContainer {
-			display: flex;
-			align-items: center;
-			width: 360px;
-			height: 67px;
-			padding: 12px 50px 12px 21px;
-			text-decoration: none;
-			border-radius: 7.5px;
-
-			&:not(:last-child) {
-				margin-bottom: 19px;
-			}
-
-			&--github {
-				background-color: #242337;
-				border: 1.5px solid transparent;
-			}
-
-			&--google {
-				background-color: #fefefe;
-				border: 1.5px solid #e7e7e7;
-			}
-
-			&__brandLogo {
-				height: 43px;
-				margin-inline-end: 34px;
-				object-fit: contain;
-			}
-
-			&__text {
-				font-size: 1.9rem;
-				font-weight: 500;
-
-				&--github {
-					color: #f2f2f2;
-				}
-
-				&--google {
-					color: #202428;
-				}
-			}
-		}
-
-		&__divider {
-			width: 203px;
-			height: 1px;
-			margin: 44px 0;
-			background-color: #4b4a65;
-		}
-
-		&__permissionsDisclaimer {
-			margin-bottom: 10px;
-			font-size: 1.6rem;
-			font-weight: 300;
-			color: #4b4a65;
-		}
-
-		&__policyText {
-			font-size: 1.6rem;
-			font-weight: 300;
-			color: #4b4a65;
-			text-align: center;
-		}
-
-		&__textLink {
-			color: #4b4a65;
-		}
-	}
+	font-family: Poppins, sans-serif;
 }
diff --git a/apps/frontend/src/components/containers/Auth/Auth.tsx b/apps/frontend/src/components/containers/Auth/Auth.tsx
@@ -1,16 +1,11 @@
 import React from 'react';
-import { useSearchParams } from 'react-router-dom';
 
 import AuthView from './Auth.view';
 
 interface IProps {}
 
 const Auth: React.FC<IProps> = () => {
-	const [searchParams] = useSearchParams();
-
-	const port = searchParams.get('port');
-
-	return <AuthView port={port} />;
+	return <AuthView />;
 };
 
 Auth.displayName = 'Auth';

diff --git a/apps/frontend/src/components/containers/Auth/Auth.view.tsx b/apps/frontend/src/components/containers/Auth/Auth.view.tsx
@@ -1,109 +1,17 @@
 import React from 'react';
-import { useTranslation, Trans } from 'react-i18next';
 
-import { concatClasses } from '@/utils/component';
-
-import authBrandLogo from '@/images/auth-brand-logo.png';
-import githubBrandLogo from '@/images/github-brand-logo.png';
-import googleBrandLogo from '@/images/google-brand-logo.png';
+import LeftSide from './LeftSide';
+import RightSide from './RightSide';
 
 import classes from './Auth.module.scss';
 
-interface IProps {
-	readonly port: string | null;
-}
-
-const AuthView: React.FC<IProps> = (props: React.PropsWithChildren<IProps>) => {
-	const { t } = useTranslation();
-
-	let githubAuthUrl = `${process.env.REACT_APP_BACKEND_URL}/user/auth/github-auth`;
-	let googleAuthUrl = `${process.env.REACT_APP_BACKEND_URL}/user/auth/google-auth`;
-
-	if (props.port) {
-		githubAuthUrl += `?port=${props.port}`;
-		googleAuthUrl += `?port=${props.port}`;
-	}
+interface IProps {}
 
+const AuthView: React.FC<IProps> = () => {
 	return (
 		<main className={classes['main']}>
-			<section className={classes['leftSideContainer']}>
-				<img className={classes['leftSideContainer__brandLogo']} src={authBrandLogo} alt="Exlint" />
-				<h2 className={classes['leftSideContainer__header']}>
-					<Trans i18nKey="auth.backgroundHeader" />
-				</h2>
-				<h4 className={classes['leftSideContainer__subHeader']}>{t('auth.backgroundSubHeader')}</h4>
-			</section>
-			<section className={classes['rightSideContainer']}>
-				<h3 className={classes['rightSideContainer__header']}>{t('auth.formHeader')}</h3>
-				<h4 className={classes['rightSideContainer__subHeader']}>{t('auth.formSubHeader')}</h4>
-
-				<a
-					className={concatClasses(
-						classes,
-						'rightSideExternalAuthContainer',
-						'rightSideExternalAuthContainer--github',
-					)}
-					href={githubAuthUrl}
-				>
-					<img
-						className={classes['rightSideExternalAuthContainer__brandLogo']}
-						src={githubBrandLogo}
-						alt={t('auth.githubAuth')}
-					/>
-					<span
-						className={concatClasses(
-							classes,
-							'rightSideExternalAuthContainer__text',
-							'rightSideExternalAuthContainer__text--github',
-						)}
-					>
-						{t('auth.githubAuth')}
-					</span>
-				</a>
-				<a
-					className={concatClasses(
-						classes,
-						'rightSideExternalAuthContainer',
-						'rightSideExternalAuthContainer--google',
-					)}
-					href={googleAuthUrl}
-				>
-					<img
-						className={classes['rightSideExternalAuthContainer__brandLogo']}
-						src={googleBrandLogo}
-						alt={t('auth.googleAuth')}
-					/>
-					<span
-						className={concatClasses(
-							classes,
-							'rightSideExternalAuthContainer__text',
-							'rightSideExternalAuthContainer__text--google',
-						)}
-					>
-						{t('auth.googleAuth')}
-					</span>
-				</a>
-
-				<hr className={classes['rightSideContainer__divider']} />
-
-				<span className={classes['rightSideContainer__permissionsDisclaimer']}>
-					{t('auth.permissionsDisclaimer')}
-				</span>
-
-				<span className={classes['rightSideContainer__policyText']}>
-					{t('auth.policiesDiscalimer.prefix')}
-					<br />
-					<a className={classes['rightSideContainer__textLink']} href="">
-						{t('auth.policiesDiscalimer.termsOfService')}
-					</a>
-					&nbsp;
-					{t('auth.policiesDiscalimer.and')}
-					&nbsp;
-					<a className={classes['rightSideContainer__textLink']} href="">
-						{t('auth.policiesDiscalimer.privacyPolicy')}
-					</a>
-				</span>
-			</section>
+			<LeftSide />
+			<RightSide />
 		</main>
 	);
 };

diff --git a/apps/frontend/src/components/containers/Auth/LeftSide/LeftSide.module.scss b/apps/frontend/src/components/containers/Auth/LeftSide/LeftSide.module.scss
@@ -0,0 +1,43 @@
+@use 'sass:map';
+
+@import '../../../../styles/variables.scss';
+
+.container {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	width: 50%;
+	padding-inline: map.get($sizes, spacing-xxl-2);
+	background-image: url('../../../../assets/images/auth-background.png');
+	background-repeat: no-repeat;
+	background-position: center;
+	background-size: cover;
+
+	&__brandLogo {
+		position: absolute;
+		top: map.get($sizes, spacing-l);
+		inset-inline-start: map.get($sizes, spacing-l);
+		width: 168px;
+		object-fit: contain;
+	}
+
+	&__header {
+		margin-bottom: map.get($sizes, spacing-xl);
+		font-size: 4.5rem;
+		font-weight: 700;
+		line-height: 58.75px;
+		text-align: center;
+		background: linear-gradient(250deg, #dc6794 6.97%, #9747ff 93.64%);
+		background-clip: text;
+		-webkit-text-fill-color: transparent;
+	}
+
+	&__subHeader {
+		font-size: 3.6rem;
+		font-weight: 400;
+		color: map.get($colors, greys-gainsboro);
+		text-align: center;
+	}
+}
diff --git a/apps/frontend/src/components/containers/Auth/LeftSide/LeftSide.tsx b/apps/frontend/src/components/containers/Auth/LeftSide/LeftSide.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+import LeftSideView from './LeftSide.view';
+
+interface IProps {}
+
+const LeftSide: React.FC<IProps> = () => {
+	return <LeftSideView />;
+};
+
+LeftSide.displayName = 'LeftSide';
+LeftSide.defaultProps = {};
+
+export default React.memo(LeftSide);
diff --git a/apps/frontend/src/components/containers/Auth/LeftSide/LeftSide.view.tsx b/apps/frontend/src/components/containers/Auth/LeftSide/LeftSide.view.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { useTranslation, Trans } from 'react-i18next';
+
+import authBrandLogo from '@/images/auth-brand-logo.png';
+
+import classes from './LeftSide.module.scss';
+
+interface IProps {}
+
+const AuthView: React.FC<IProps> = () => {
+	const { t } = useTranslation();
+
+	return (
+		<section className={classes['container']}>
+			<img className={classes['container__brandLogo']} src={authBrandLogo} alt="Exlint" />
+			<h2 className={classes['container__header']}>
+				<Trans i18nKey="auth.backgroundHeader" />
+			</h2>
+			<h4 className={classes['container__subHeader']}>{t('auth.backgroundSubHeader')}</h4>
+		</section>
+	);
+};
+
+AuthView.displayName = 'AuthView';
+AuthView.defaultProps = {};
+
+export default React.memo(AuthView);
diff --git a/apps/frontend/src/components/containers/Auth/LeftSide/index.ts b/apps/frontend/src/components/containers/Auth/LeftSide/index.ts
@@ -0,0 +1,3 @@
+import LeftSide from './LeftSide';
+
+export default LeftSide;