Andal.LND/frontend-app-authn
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: update base component (#615)

Browse Source
This commit is contained in:
Zainab Amir
2022-08-29 10:07:33 +05:00
committed by GitHub
parent 7229d87fd1
commit e2899e66d1
15 changed files with 362 additions and 609 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@@ -1,7 +1,7 @@
<!doctype html>
<html lang="en-us">
<head>
<title>Authn | edX</title>
<title>Authn | <%= process.env.SITE_NAME %></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="<%=htmlWebpackPlugin.options.FAVICON_URL%>" type="image/x-icon" />

100
src/base-component/AuthExtraLargeLayout.jsx
View File

@@ -1,100 +0,0 @@
import React from 'react';
import { getConfig } from '@edx/frontend-platform';
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import {
Col, Hyperlink, Image, Row,
} from '@edx/paragon';
import classNames from 'classnames';
import PropTypes from 'prop-types';
import messages from './messages';
const AuthExtraLargeLayout = (props) => {
const { intl, username, variant } = props;
return (
<div className="container row p-0 m-0 large-screen-container">
<div className="col-md-9 p-0 screen-header-light">
<Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
<Image alt={getConfig().SITE_NAME} className="logo position-absolute" src={getConfig().LOGO_WHITE_URL} />
</Hyperlink>
<div className="min-vh-100 d-flex align-items-center">
<div>
<Row>
<Col xs={3}>
<svg
role="img"
aria-label=""
focusable={false}
className={classNames(
'ml-5 mt-5',
{
'extra-large-svg-line': variant === 'xl',
'extra-extra-large-svg-line': variant === 'xxl',
},
)}
>
<line x1="60" y1="0" x2="5" y2="220" />
</svg>
</Col>
<Col xs={9}>
<div className={classNames(
'data-hj-suppress',
{
h3: variant === 'xl',
h2: variant === 'xxl',
},
)}
>
{intl.formatMessage(
messages['welcome.to.platform'], { siteName: getConfig().SITE_NAME, username },
)}
</div>
<div
className={classNames(
'text-primary',
{
'display-1': variant === 'xl',
'display-2': variant === 'xxl',
},
)}
>
{intl.formatMessage(messages['complete.your.profile.1'])}
<span className="text-accent-a">
<br />
{intl.formatMessage(messages['complete.your.profile.2'])}
</span>
</div>
</Col>
</Row>
</div>
</div>
</div>
<div className="col-md-3 p-0 screen-polygon">
<svg
width="100%"
height="100%"
className="m1-n1 large-screen-svg-light"
preserveAspectRatio="xMaxYMin meet"
>
<g transform="skewX(171.6)">
<rect x="0" y="0" height="100%" width="100%" />
</g>
</svg>
</div>
</div>
);
};
AuthExtraLargeLayout.defaultProps = {
variant: 'xl',
};
AuthExtraLargeLayout.propTypes = {
intl: intlShape.isRequired,
username: PropTypes.string.isRequired,
variant: PropTypes.oneOf(['xl', 'xxl']),
};
export default injectIntl(AuthExtraLargeLayout);

46
src/base-component/AuthLargeLayout.jsx Normal file
View File

@@ -0,0 +1,46 @@
import React from 'react';
import { getConfig } from '@edx/frontend-platform';
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import { Hyperlink, Image } from '@edx/paragon';
import PropTypes from 'prop-types';
import messages from './messages';
const AuthLargeLayout = ({ intl, username }) => (
<div className="w-50 d-flex">
<div className="col-md-10 bg-light-200 p-0">
<Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
<Image className="logo position-absolute" alt={getConfig().SITE_NAME} src={getConfig().LOGO_URL} />
</Hyperlink>
<div className="min-vh-100 d-flex align-items-center">
<div className="large-screen-left-container mr-n4.5 large-yellow-line mt-5" />
<div>
<h1 className="welcome-to-platform data-hj-suppress">
{intl.formatMessage(messages['welcome.to.platform'], { siteName: getConfig().SITE_NAME, username })}
</h1>
<h2 className="complete-your-profile">
{intl.formatMessage(messages['complete.your.profile.1'])}
<div className="text-accent-a">
{intl.formatMessage(messages['complete.your.profile.2'])}
</div>
</h2>
</div>
</div>
</div>
<div className="col-md-2 bg-white p-0">
<svg className="m1-n1 w-100 h-100 large-screen-svg-light" preserveAspectRatio="xMaxYMin meet">
<g transform="skewX(171.6)">
<rect x="0" y="0" height="100%" width="100%" />
</g>
</svg>
</div>
</div>
);
AuthLargeLayout.propTypes = {
intl: intlShape.isRequired,
username: PropTypes.string.isRequired,
};
export default injectIntl(AuthLargeLayout);

68
src/base-component/AuthMediumLayout.jsx
View File

@@ -2,68 +2,44 @@ import React from 'react';
import { getConfig } from '@edx/frontend-platform';
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import {
Col, Hyperlink, Image, Row,
} from '@edx/paragon';
import { Hyperlink, Image } from '@edx/paragon';
import PropTypes from 'prop-types';
import messages from './messages';
const AuthMediumLayout = (props) => {
const { intl, username } = props;
return (
<div className="container row p-0 mb-3 medium-container">
<div className="col-md-10 p-0 screen-header-light">
const AuthMediumLayout = ({ intl, username }) => (
<>
<div className="w-100 medium-screen-top-stripe" />
<div className="w-100 p-0 mb-3 d-flex">
<div className="col-md-10 bg-light-200">
<Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
<Image alt={getConfig().SITE_NAME} className="logo" src={getConfig().LOGO_WHITE_URL} />
<Image className="logo" alt={getConfig().SITE_NAME} src={getConfig().LOGO_URL} />
</Hyperlink>
<div className="d-flex align-items-center justify-content-center ml-6">
<div className="d-flex align-items-center justify-content-center mb-4 ml-5">
<div className="medium-yellow-line mt-5 mr-n2" />
<div>
<Row>
<Col xs={3}>
<svg
role="img"
aria-label=""
focusable={false}
className="medium-svg-line ml-5 mt-5"
>
<line x1="60" y1="0" x2="5" y2="220" />
</svg>
</Col>
<Col xs={9}>
<h3 className="data-hj-suppress">
{intl.formatMessage(
messages['welcome.to.platform'], { siteName: getConfig().SITE_NAME, username },
)}
</h3>
<div className="display-1 text-primary">
{intl.formatMessage(messages['complete.your.profile.1'])}
<span className="text-accent-a">
<br />
{intl.formatMessage(messages['complete.your.profile.2'])}
</span>
</div>
</Col>
</Row>
<h1 className="h3 data-hj-suppress mw-320">
{intl.formatMessage(messages['welcome.to.platform'], { siteName: getConfig().SITE_NAME, username })}
</h1>
<h2 className="display-1">
{intl.formatMessage(messages['complete.your.profile.1'])}
<div className="text-accent-a">
{intl.formatMessage(messages['complete.your.profile.2'])}
</div>
</h2>
</div>
</div>
</div>
<div className="col-md-2 p-0 screen-polygon">
<svg
width="100%"
height="100%"
className="medium-screen-svg-light"
preserveAspectRatio="xMaxYMin meet"
>
<div className="col-md-2 bg-white p-0">
<svg className="w-100 h-100 medium-screen-svg-light" preserveAspectRatio="xMaxYMin meet">
<g transform="skewX(168)">
<rect x="0" y="0" height="100%" width="100%" />
</g>
</svg>
</div>
</div>
);
};
</>
);
AuthMediumLayout.propTypes = {
intl: intlShape.isRequired,

75
src/base-component/AuthSmallLayout.jsx
View File

@@ -2,70 +2,37 @@ import React from 'react';
import { getConfig } from '@edx/frontend-platform';
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import {
Col, Hyperlink, Image, Row,
} from '@edx/paragon';
import classNames from 'classnames';
import { Hyperlink, Image } from '@edx/paragon';
import PropTypes from 'prop-types';
import messages from './messages';
const AuthSmallLayout = (props) => {
const { intl, username, variant } = props;
return (
<div className="small-screen-header-light">
<Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
<Image alt={getConfig().SITE_NAME} className="logo" src={getConfig().LOGO_WHITE_URL} />
</Hyperlink>
<div className={classNames('d-flex mt-3', { 'pl-6': variant === 'sm' })}>
<div>
<Row>
<Col xs={3}>
<svg
role="img"
aria-label=""
focusable={false}
className={classNames(
'mt-4\.5', // eslint-disable-line no-useless-escape
{
'extra-small-svg-line': variant === 'xs',
'small-svg-line': variant === 'sm',
},
)}
>
<line x1="60" y1="0" x2="5" y2="220" />
</svg>
</Col>
<Col xs={9}>
<h5 className="data-hj-suppress">
{intl.formatMessage(
messages['welcome.to.platform'], { siteName: getConfig().SITE_NAME, username },
)}
</h5>
<h1>
{intl.formatMessage(messages['complete.your.profile.1'])}
<br />
<span className="text-accent-a">
{intl.formatMessage(messages['complete.your.profile.2'])}
</span>
</h1>
</Col>
</Row>
</div>
const AuthSmallLayout = ({ intl, username }) => (
<div className="min-vw-100 bg-light-200">
<div className="col-md-12 small-screen-top-stripe" />
<Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
<Image className="logo-small" alt={getConfig().SITE_NAME} src={getConfig().LOGO_URL} />
</Hyperlink>
<div className="d-flex align-items-center mb-3 mt-3 mr-3">
<div className="small-yellow-line mt-4.5" />
<div>
<h1 className="h5 data-hj-suppress">
{intl.formatMessage(messages['welcome.to.platform'], { siteName: getConfig().SITE_NAME, username })}
</h1>
<h2 className="h1">
{intl.formatMessage(messages['complete.your.profile.1'])}
<div className="text-accent-a">
{intl.formatMessage(messages['complete.your.profile.2'])}
</div>
</h2>
</div>
</div>
);
};
AuthSmallLayout.defaultProps = {
variant: 'sm',
};
</div>
);
AuthSmallLayout.propTypes = {
intl: intlShape.isRequired,
username: PropTypes.string.isRequired,
variant: PropTypes.oneOf(['sm', 'xs']),
};
export default injectIntl(AuthSmallLayout);

50
src/base-component/BaseComponent.jsx
View File

@@ -8,7 +8,7 @@ import classNames from 'classnames';
import PropTypes from 'prop-types';
import MediaQuery from 'react-responsive';
import AuthExtraLargeLayout from './AuthExtraLargeLayout';
import AuthLargeLayout from './AuthLargeLayout';
import AuthMediumLayout from './AuthMediumLayout';
import AuthSmallLayout from './AuthSmallLayout';
import LargeLayout from './LargeLayout';
@@ -17,51 +17,21 @@ import SmallLayout from './SmallLayout';
const BaseComponent = ({ children, showWelcomeBanner }) => {
const authenticatedUser = showWelcomeBanner ? getAuthenticatedUser() : null;
const username = authenticatedUser ? authenticatedUser.username : null;
return (
<>
<CookiePolicyBanner languageCode={getLocale()} />
<MediaQuery minWidth={breakpoints.extraLarge.minWidth} maxWidth={breakpoints.extraLarge.maxWidth}>
<div className="col-md-12 extra-large-screen-top-stripe" />
</MediaQuery>
<MediaQuery minWidth={breakpoints.extraExtraLarge.minWidth} maxWidth={breakpoints.extraExtraLarge.maxWidth}>
<div className="col-md-12 extra-large-screen-top-stripe" />
</MediaQuery>
<div className={classNames('layout', { authenticated: authenticatedUser })}>
<MediaQuery maxWidth={breakpoints.extraSmall.maxWidth}>
<div className="col-md-12 small-screen-top-stripe" />
{authenticatedUser ? <AuthSmallLayout variant="xs" username={authenticatedUser.username} /> : (
<SmallLayout />
)}
<div className="col-md-12 extra-large-screen-top-stripe" />
<div className="layout">
<MediaQuery maxWidth={breakpoints.small.maxWidth}>
{authenticatedUser ? <AuthSmallLayout username={username} /> : <SmallLayout />}
</MediaQuery>
<MediaQuery minWidth={breakpoints.small.minWidth} maxWidth={breakpoints.small.maxWidth}>
<div className="col-md-12 small-screen-top-stripe" />
{authenticatedUser ? <AuthSmallLayout username={authenticatedUser.username} /> : (
<SmallLayout />
)}
<MediaQuery minWidth={breakpoints.medium.minWidth} maxWidth={breakpoints.large.maxWidth}>
{authenticatedUser ? <AuthMediumLayout username={username} /> : <MediumLayout />}
</MediaQuery>
<MediaQuery minWidth={breakpoints.medium.minWidth} maxWidth={breakpoints.medium.maxWidth}>
<div className="w-100 medium-screen-top-stripe" />
{authenticatedUser ? <AuthMediumLayout username={authenticatedUser.username} /> : (
<MediumLayout />
)}
</MediaQuery>
<MediaQuery minWidth={breakpoints.large.minWidth} maxWidth={breakpoints.large.maxWidth}>
<div className="w-100 large-screen-top-stripe" />
{authenticatedUser ? <AuthMediumLayout username={authenticatedUser.username} /> : (
<MediumLayout />
)}
</MediaQuery>
<MediaQuery minWidth={breakpoints.extraLarge.minWidth} maxWidth={breakpoints.extraLarge.maxWidth}>
{authenticatedUser ? <AuthExtraLargeLayout username={authenticatedUser.username} /> : (
<LargeLayout />
)}
</MediaQuery>
<MediaQuery minWidth={breakpoints.extraExtraLarge.minWidth} maxWidth={breakpoints.extraExtraLarge.maxWidth}>
{authenticatedUser ? <AuthExtraLargeLayout variant="xxl" username={authenticatedUser.username} /> : (
<LargeLayout />
)}
<MediaQuery minWidth={breakpoints.extraLarge.minWidth} maxWidth={breakpoints.extraExtraLarge.maxWidth}>
{authenticatedUser ? <AuthLargeLayout username={username} /> : <LargeLayout />}
</MediaQuery>
<div className={classNames('content', { 'align-items-center mt-0': authenticatedUser })}>

35
src/base-component/LargeLayout.jsx
View File

@@ -1,25 +1,28 @@
import React from 'react';
import { getConfig } from '@edx/frontend-platform';
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import { Hyperlink, Image } from '@edx/paragon';
import LargeScreenLeftLayout from './LargeLeftLayout';
import messages from './messages';
const LargeLayout = () => (
<div className="container row p-0 m-0 large-screen-container">
<div className="col-md-9 p-0 screen-header-primary">
const LargeLayout = ({ intl }) => (
<div className="w-50 d-flex">
<div className="col-md-9 bg-primary-400">
<Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
<Image alt={getConfig().SITE_NAME} className="logo position-absolute" src={getConfig().LOGO_WHITE_URL} />
<Image className="logo position-absolute" alt={getConfig().SITE_NAME} src={getConfig().LOGO_WHITE_URL} />
</Hyperlink>
<LargeScreenLeftLayout />
<div className="min-vh-100 d-flex justify-content-center align-items-center">
<h1 className="display-2 text-white mw-xs ml-6">
{intl.formatMessage(messages['start.learning'])}
<div className="text-accent-a">
{intl.formatMessage(messages['with.site.name'], { siteName: getConfig().SITE_NAME })}
</div>
</h1>
</div>
</div>
<div className="col-md-3 p-0 screen-polygon">
<svg
width="100%"
height="100%"
className="ml-n1 large-screen-svg-primary"
preserveAspectRatio="xMaxYMin meet"
>
<div className="col-md-3 bg-white p-0">
<svg className="ml-n1 w-100 h-100 large-screen-svg-primary" preserveAspectRatio="xMaxYMin meet">
<g transform="skewX(171.6)">
<rect x="0" y="0" height="100%" width="100%" />
</g>
@@ -28,4 +31,8 @@ const LargeLayout = () => (
</div>
);
export default LargeLayout;
LargeLayout.propTypes = {
intl: intlShape.isRequired,
};
export default injectIntl(LargeLayout);

40
src/base-component/LargeLeftLayout.jsx
View File

@@ -1,40 +0,0 @@
import React from 'react';
import { getConfig } from '@edx/frontend-platform';
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import messages from './messages';
const LargeLeftLayout = (props) => {
const { intl } = props;
return (
<div className="min-vh-100 d-flex justify-content-left align-items-center">
<div className="d-flex pr-0 mt-lg-n2">
<svg
role="img"
aria-label=""
focusable={false}
className="large-screen-svg-line ml-5"
>
<line x1="50" y1="0" x2="10" y2="215" />
</svg>
<div>
<h1 className="large-heading">
{intl.formatMessage(messages['start.learning'])}
<span className="text-accent-a">
<br />
{intl.formatMessage(messages['with.site.name'], { siteName: getConfig().SITE_NAME })}
</span>
</h1>
</div>
</div>
</div>
);
};
LargeLeftLayout.propTypes = {
intl: intlShape.isRequired,
};
export default injectIntl(LargeLeftLayout);

44
src/base-component/MediumLayout.jsx
View File

@@ -6,46 +6,32 @@ import { Hyperlink, Image } from '@edx/paragon';
import messages from './messages';
const MediumLayout = (props) => {
const { intl } = props;
return (
<div className="container row p-0 mb-3 medium-screen-container">
<div className="col-md-10 p-0 screen-header-primary">
const MediumLayout = ({ intl }) => (
<>
<div className="w-100 medium-screen-top-stripe" />
<div className="w-100 p-0 mb-3 d-flex">
<div className="col-md-10 bg-primary-400">
<Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
<Image alt={getConfig().SITE_NAME} className="logo" src={getConfig().LOGO_WHITE_URL} />
</Hyperlink>
<div className="row mt-4 justify-content-center">
<svg
role="img"
aria-label=""
focusable={false}
className="medium-screen-svg-line pl-5"
>
<line x1="50" y1="0" x2="10" y2="215" />
</svg>
<div className="pb-4">
<h1 className="medium-heading">
{intl.formatMessage(messages['start.learning'])}
<span className="text-accent-a">
<br />
{intl.formatMessage(messages['with.site.name'], { siteName: getConfig().SITE_NAME })}
</span>
</h1>
</div>
</div>
<h1 className="display-1 text-white mt-5 mb-5 ml-4.5 mr-2">
{intl.formatMessage(messages['start.learning'])}
<span className="text-accent-a ml-2">
{intl.formatMessage(messages['with.site.name'], { siteName: getConfig().SITE_NAME })}
</span>
</h1>
<div />
</div>
<div className="col-md-2 p-0 screen-polygon">
<svg width="100%" height="100%" className="medium-screen-svg-primary" preserveAspectRatio="xMaxYMin meet">
<div className="col-md-2 bg-white p-0">
<svg className="w-100 h-100 medium-screen-svg-primary" preserveAspectRatio="xMaxYMin meet">
<g transform="skewX(168)">
<rect x="0" y="0" height="100%" width="100%" />
</g>
</svg>
</div>
</div>
);
};
</>
);
MediumLayout.propTypes = {
intl: intlShape.isRequired,

48
src/base-component/SmallLayout.jsx
View File

@@ -6,38 +6,22 @@ import { Hyperlink, Image } from '@edx/paragon';
import messages from './messages';
const SmallLayout = (props) => {
const { intl } = props;
return (
<>
<div className="small-screen-header-primary">
<Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
<Image alt={getConfig().SITE_NAME} className="logo" src={getConfig().LOGO_WHITE_URL} />
</Hyperlink>
<div className="d-flex mt-3">
<svg
role="img"
aria-label=""
focusable={false}
className="small-screen-svg-line"
>
<line x1="55" y1="0" x2="40" y2="65" />
</svg>
<div className="pb-3">
<h1 className="small-heading">
{intl.formatMessage(messages['start.learning'])}
<br />
<span className="text-accent-a">
{intl.formatMessage(messages['with.site.name'], { siteName: getConfig().SITE_NAME })}
</span>
</h1>
</div>
</div>
</div>
</>
);
};
const SmallLayout = ({ intl }) => (
<span className="bg-primary-400 w-100">
<div className="col-md-12 small-screen-top-stripe" />
<div>
<Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
<Image className="logo-small" alt={getConfig().SITE_NAME} src={getConfig().LOGO_WHITE_URL} />
</Hyperlink>
<h1 className="text-white mt-3.5 mb-3.5 ml-4.5 mr-3">
{intl.formatMessage(messages['start.learning'])}
<span className="text-accent-a ml-2">
{intl.formatMessage(messages['with.site.name'], { siteName: getConfig().SITE_NAME })}
</span>
</h1>
</div>
</span>
);
SmallLayout.propTypes = {
intl: intlShape.isRequired,

5
src/index.scss
View File

@@ -3,6 +3,5 @@
@import "~@edx/paragon/scss/core/core";
@import "~@edx/brand/paragon/overrides";
@import '@edx/frontend-component-cookie-policy-banner/build/_cookie-policy-banner';
@import "./style";
@import "@edx/frontend-component-cookie-policy-banner/build/_cookie-policy-banner";
@import "sass/style";

190
src/sass/_base_component.scss Normal file
View File

@@ -0,0 +1,190 @@
$accent-a-light: #c9f2f5;
.layout {
display: flex;
@include media-breakpoint-down('lg') {
flex-direction: column;
justify-content: center;
align-items: center;
}
@include media-breakpoint-up('xl') {
justify-content: space-between;
}
}
.content {
@include media-breakpoint-up('xl') {
display: flex;
justify-content: center;
width: 50vw;
margin-top: 4rem;
}
}
.logo-small {
width: 44.67px;
margin-top: 1.25rem;
margin-left: 1.5rem;
}
.logo {
width: 71px;
margin-top: 2rem;
margin-left: 1.5rem;
}
.mw-320 {
max-width: 320px;
}
.complete-your-profile {
font-weight: 700;
line-height: 1;
@include media-breakpoint-down('xl') {
font-size: 3.75rem;
}
@media (min-width: 1400px) {
font-size: 4.875rem;
}
}
.welcome-to-platform {
margin-bottom: 0.5rem;
font-weight: 700;
@include media-breakpoint-down('xl') {
font-size: 1.375rem;
line-height: 1.75rem;
}
@media (min-width: 1400px) {
font-size: 2rem;
line-height: 2.25rem;
}
}
.large-screen-left-container {
@include media-breakpoint-down('xl') {
flex: 0 0 25%;
max-width: 25%;
}
@media (min-width: 1400px) {
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%;
}
}
.small-screen-top-stripe {
height: 0.25rem;
background-image: linear-gradient(
102.02deg,
$brand-700,
$brand-700 20%,
$brand 20%,
);
background-repeat: no-repeat;
}
@include media-breakpoint-only('md') {
.medium-screen-top-stripe {
display: flex;
height: 0.5rem;
background-image: linear-gradient(
102.02deg,
$brand-700,
$brand-700 10%,
$brand 10%,
$brand 90%,
$primary-700 90%,
$primary-700 100%,
);
background-repeat: no-repeat;
}
}
@include media-breakpoint-only('lg') {
.medium-screen-top-stripe {
display: flex;
height: 0.5rem;
background-image: linear-gradient(
102.02deg,
$brand-700 10%,
$brand 10%,
$brand 65%,
$primary-700 65%,
$primary-700 75%,
$accent-a 75%,
$accent-a 75%
);
background-repeat: no-repeat;
}
}
.extra-large-screen-top-stripe { display: none; }
@include media-breakpoint-up('xl') {
.extra-large-screen-top-stripe {
display: flex;
height: 0.5rem;
background-image: linear-gradient(
102.02deg,
$brand-700 10%,
$brand 10%,
$brand 45%,
$primary-700 45%,
$primary-700 55%,
$accent-a 55%,
$accent-a 75%,
$accent-a-light 75%,
);
background-repeat: no-repeat;
}
}
.large-screen-svg-light,
.large-screen-svg-primary {
fill: $light-200;
overflow: hidden;
position: absolute;
}
.large-screen-svg-primary {
fill: $primary-400;
}
.medium-screen-svg-light,
.medium-screen-svg-primary {
fill: $light-200;
overflow: inherit;
position: absolute;
}
.medium-screen-svg-primary {
fill: $primary-400;
}
.small-yellow-line {
width: 80px;
height: 0;
border: 2px solid #F0CC00;
transform: rotate(102.02deg);
}
.medium-yellow-line {
width: 120px;
height: 0;
border: 3px solid #F0CC00;
transform: rotate(102.02deg);
}
.large-yellow-line {
width: 240px;
height: 0;
border: 3px solid #F0CC00;
transform: rotate(102.02deg);
}

262
src/_style.scss → src/sass/_style.scss
View File

@@ -1,3 +1,6 @@
// Load component based styles
@import "_base_component.scss";
//
// ----------------------------
// #COLORS
// ----------------------------
@@ -13,7 +16,6 @@ $microsoft-black: #2f2f2f;
$microsoft-focus-black: #000;
$apple-black: #000000;
$apple-focus-black: $apple-black;
$accent-a-light: #c9f2f5;
$elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
@@ -340,216 +342,6 @@ select.form-control {
}
}
.screen-header-light {
background-color: $light-200;
}
.screen-header-primary {
background-color: $primary-400;
}
.large-screen-container {
background-color: $white;
width: 50vw;
}
.large-screen-svg-light,
.large-screen-svg-primary {
fill: $light-200;
overflow: hidden;
position: absolute;
}
.large-screen-svg-primary {
fill: $primary-400;
}
.medium-screen-container {
flex-wrap: nowrap;
max-width: inherit;
height: 282px;
}
.medium-screen-svg-light,
.medium-screen-svg-primary {
fill: $light-200;
overflow: inherit;
position: absolute;
}
.medium-screen-svg-primary {
fill: $primary-400;
}
.screen-polygon {
background-color: $white;
}
.small-screen-header-light,
.small-screen-header-primary {
background-color: $light-200;
width: 100vw;
}
.small-screen-header-primary {
background-color: $primary-400;
}
.extra-large-screen-top-stripe {
height: 0.5rem;
background-image: linear-gradient(
102.02deg,
$brand-700 10%,
$brand 10%,
$brand 45%,
$primary-700 45%,
$primary-700 55%,
$accent-a 55%,
$accent-a 75%,
$accent-a-light 75%,
);
background-repeat: no-repeat;
}
.medium-screen-top-stripe {
height: 0.5rem;
background-image: linear-gradient(
102.02deg,
$brand-700,
$brand-700 10%,
$brand 10%,
$brand 90%,
$primary-700 90%,
$primary-700 100%,
);
background-repeat: no-repeat;
}
.large-screen-top-stripe {
height: 0.5rem;
background-image: linear-gradient(
102.02deg,
$brand-700 10%,
$brand 10%,
$brand 65%,
$primary-700 65%,
$primary-700 75%,
$accent-a 75%,
$accent-a 75%);
background-repeat: no-repeat;
}
.small-screen-top-stripe {
height: 0.25rem;
background-image: linear-gradient(
102.02deg,
$brand-700,
$brand-700 20%,
$brand 20%,
);
background-repeat: no-repeat;
}
// Progressive profiling base component classes
.medium-container {
flex-wrap: nowrap;
max-width: inherit;
height: 260px;
}
.extra-extra-large-svg-line {
stroke: $accent-b;
stroke-width: 0.5rem;
width: 5.5rem;
height: 150px;
}
.extra-large-svg-line {
stroke: $accent-b;
stroke-width: 0.5rem;
width: 5.5rem;
height: 110px;
}
.medium-svg-line {
stroke: $accent-b;
stroke-width: 0.5rem;
width: 7em;
height: 110px;
}
.small-svg-line {
stroke: $accent-b;
stroke-width: 0.25rem;
width: 4em;
height: 90px;
}
.extra-small-svg-line {
stroke: $accent-b;
stroke-width: 0.25rem;
width: 4em;
height: 80px;
}
// Non-Auth Screen Svg Lines
.large-screen-svg-line {
padding-top: 0.5rem;
stroke: $accent-b;
stroke-width: 0.5rem;
width: 5.5rem;
height: 240px;
}
.medium-screen-svg-line {
padding-top: 0.5rem;
stroke: $accent-b;
stroke-width: 0.5rem;
width: 7em;
height: 115px;
}
.small-screen-svg-line {
padding-top: 0.5rem;
stroke: $accent-b;
stroke-width: 0.25rem;
width: 4em;
height: 72px;
}
.large-heading {
margin-left: 7px;
color: $white;
max-width: 24.5rem;
line-height: 78px;
font-size: 78px;
}
.medium-heading {
padding-left: 1rem;
color: $white;
max-width: 27rem;
line-height: 60px;
font-size: 60px;
}
.small-heading {
padding-left: 0.5rem;
color: $white;
line-height: 40px;
font-size: 36px;
}
.logo {
width: 4.44rem;
margin-top: 1.5rem;
margin-left: 1.5rem;
}
.username-suggestion {
padding: 1px 0.5rem;
margin: 0.25rem;
@@ -682,6 +474,18 @@ select.form-control {
font-weight: 400;
}
.pp-page-heading {
line-height: 1.75rem;
font-size: 1.375rem;
margin-bottom: 0.5rem;
font-weight: 700;
@include media-breakpoint-down('md') {
line-height: 1.5rem;
font-size: 1.125rem;
}
}
@media (min-width: 1024px) {
.mw-500 {
width: 500px;
@@ -710,36 +514,6 @@ select.form-control {
.welcome-page-content {
padding-top: 1.5rem !important;
}
.layout {
display: flex;
align-items: center;
flex-direction:column;
justify-content: center;
}
}
@media (max-width: 1199px) and (min-width: 768px) {
.layout {
display: flex;
align-items: center;
flex-direction:column;
justify-content: center;
}
}
@media (min-width: 1200px) {
.layout{
display: flex;
justify-content: space-between;
}
.content {
width: 50vw;
display: flex;
justify-content: center;
margin-top: 4rem;
}
}
@media (max-width: 464px) {
@@ -751,12 +525,6 @@ select.form-control {
}
}
@media (max-height: 500px) {
.large-screen-svg-line, .large-heading {
margin-top: 5rem;
}
}
.alert {
p:last-child {
margin-bottom: 0;

4
src/welcome/ProgressiveProfiling.jsx
View File

@@ -136,8 +136,8 @@ const ProgressiveProfiling = (props) => {
/>
) : null}
<div className="mw-xs pp-page-content">
<div className="pp-page-heading">
<h2 className="h3 text-primary">{intl.formatMessage(messages['progressive.profiling.page.heading'])}</h2>
<div>
<h2 className="pp-page-heading text-primary">{intl.formatMessage(messages['progressive.profiling.page.heading'])}</h2>
</div>
<hr className="border-light-700 mb-4" />
{showError ? (

2
src/welcome/WelcomePage.jsx
View File

@@ -151,7 +151,7 @@ const WelcomePage = (props) => {
) : null}
<div className="mw-xs welcome-page-content">
<div className="welcome-page-heading">
<h2 className="h3 text-primary">{intl.formatMessage(messages['progressive.profiling.page.heading'])}</h2>
<h2 className="pp-page-heading text-primary">{intl.formatMessage(messages['progressive.profiling.page.heading'])}</h2>
</div>
<hr className="border-light-700 mb-4" />
{showError ? (