diff --git a/public/index.html b/public/index.html index c7497599..571440aa 100644 --- a/public/index.html +++ b/public/index.html @@ -1,7 +1,7 @@ - Authn | edX + Authn | <%= process.env.SITE_NAME %> diff --git a/src/base-component/AuthExtraLargeLayout.jsx b/src/base-component/AuthExtraLargeLayout.jsx deleted file mode 100644 index bff78fae..00000000 --- a/src/base-component/AuthExtraLargeLayout.jsx +++ /dev/null @@ -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 ( -
-
- - {getConfig().SITE_NAME} - -
-
- - - - - - - -
- {intl.formatMessage( - messages['welcome.to.platform'], { siteName: getConfig().SITE_NAME, username }, - )} -
-
- {intl.formatMessage(messages['complete.your.profile.1'])} - -
- {intl.formatMessage(messages['complete.your.profile.2'])} - -
- - -
-
-
-
- - - - - -
-
- ); -}; - -AuthExtraLargeLayout.defaultProps = { - variant: 'xl', -}; - -AuthExtraLargeLayout.propTypes = { - intl: intlShape.isRequired, - username: PropTypes.string.isRequired, - variant: PropTypes.oneOf(['xl', 'xxl']), -}; - -export default injectIntl(AuthExtraLargeLayout); diff --git a/src/base-component/AuthLargeLayout.jsx b/src/base-component/AuthLargeLayout.jsx new file mode 100644 index 00000000..bea59cf3 --- /dev/null +++ b/src/base-component/AuthLargeLayout.jsx @@ -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 }) => ( +
+
+ + {getConfig().SITE_NAME} + +
+
+
+

+ {intl.formatMessage(messages['welcome.to.platform'], { siteName: getConfig().SITE_NAME, username })} +

+

+ {intl.formatMessage(messages['complete.your.profile.1'])} +
+ {intl.formatMessage(messages['complete.your.profile.2'])} +
+

+
+
+
+
+ + + + + +
+
+); + +AuthLargeLayout.propTypes = { + intl: intlShape.isRequired, + username: PropTypes.string.isRequired, +}; + +export default injectIntl(AuthLargeLayout); diff --git a/src/base-component/AuthMediumLayout.jsx b/src/base-component/AuthMediumLayout.jsx index 52d1b874..7ef1f8ac 100644 --- a/src/base-component/AuthMediumLayout.jsx +++ b/src/base-component/AuthMediumLayout.jsx @@ -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 ( -
-
+const AuthMediumLayout = ({ intl, username }) => ( + <> +
+
+
- {getConfig().SITE_NAME} + {getConfig().SITE_NAME} -
+
+
- - - - - - - -

- {intl.formatMessage( - messages['welcome.to.platform'], { siteName: getConfig().SITE_NAME, username }, - )} -

-
- {intl.formatMessage(messages['complete.your.profile.1'])} - -
- {intl.formatMessage(messages['complete.your.profile.2'])} - -
- - +

+ {intl.formatMessage(messages['welcome.to.platform'], { siteName: getConfig().SITE_NAME, username })} +

+

+ {intl.formatMessage(messages['complete.your.profile.1'])} +
+ {intl.formatMessage(messages['complete.your.profile.2'])} +
+

-
- +
+
- ); -}; + +); AuthMediumLayout.propTypes = { intl: intlShape.isRequired, diff --git a/src/base-component/AuthSmallLayout.jsx b/src/base-component/AuthSmallLayout.jsx index 390728bd..543fb58b 100644 --- a/src/base-component/AuthSmallLayout.jsx +++ b/src/base-component/AuthSmallLayout.jsx @@ -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 ( -
- - {getConfig().SITE_NAME} - -
-
- - - - - - - -
- {intl.formatMessage( - messages['welcome.to.platform'], { siteName: getConfig().SITE_NAME, username }, - )} -
-

- {intl.formatMessage(messages['complete.your.profile.1'])} -
- - {intl.formatMessage(messages['complete.your.profile.2'])} - -

- - -
+const AuthSmallLayout = ({ intl, username }) => ( +
+
+ + {getConfig().SITE_NAME} + +
+
+
+

+ {intl.formatMessage(messages['welcome.to.platform'], { siteName: getConfig().SITE_NAME, username })} +

+

+ {intl.formatMessage(messages['complete.your.profile.1'])} +
+ {intl.formatMessage(messages['complete.your.profile.2'])} +
+

- ); -}; - -AuthSmallLayout.defaultProps = { - variant: 'sm', -}; +
+); AuthSmallLayout.propTypes = { intl: intlShape.isRequired, username: PropTypes.string.isRequired, - variant: PropTypes.oneOf(['sm', 'xs']), }; export default injectIntl(AuthSmallLayout); diff --git a/src/base-component/BaseComponent.jsx b/src/base-component/BaseComponent.jsx index bd55c7fb..f704bd69 100644 --- a/src/base-component/BaseComponent.jsx +++ b/src/base-component/BaseComponent.jsx @@ -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 ( <> - -
- - -
- - -
- -
- {authenticatedUser ? : ( - - )} +
+
+ + {authenticatedUser ? : } - -
- {authenticatedUser ? : ( - - )} + + {authenticatedUser ? : } - -
- {authenticatedUser ? : ( - - )} - - -
- {authenticatedUser ? : ( - - )} - - - {authenticatedUser ? : ( - - )} - - - {authenticatedUser ? : ( - - )} + + {authenticatedUser ? : }
diff --git a/src/base-component/LargeLayout.jsx b/src/base-component/LargeLayout.jsx index 8ad5e005..f6eaa4d6 100644 --- a/src/base-component/LargeLayout.jsx +++ b/src/base-component/LargeLayout.jsx @@ -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 = () => ( -
-
+const LargeLayout = ({ intl }) => ( +
+
- {getConfig().SITE_NAME} + {getConfig().SITE_NAME} - +
+

+ {intl.formatMessage(messages['start.learning'])} +
+ {intl.formatMessage(messages['with.site.name'], { siteName: getConfig().SITE_NAME })} +
+

+
-
- +
+ @@ -28,4 +31,8 @@ const LargeLayout = () => (
); -export default LargeLayout; +LargeLayout.propTypes = { + intl: intlShape.isRequired, +}; + +export default injectIntl(LargeLayout); diff --git a/src/base-component/LargeLeftLayout.jsx b/src/base-component/LargeLeftLayout.jsx deleted file mode 100644 index 29bbee2e..00000000 --- a/src/base-component/LargeLeftLayout.jsx +++ /dev/null @@ -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 ( -
-
- - - -
-

- {intl.formatMessage(messages['start.learning'])} - -
- {intl.formatMessage(messages['with.site.name'], { siteName: getConfig().SITE_NAME })} - -

-
-
-
- ); -}; - -LargeLeftLayout.propTypes = { - intl: intlShape.isRequired, -}; - -export default injectIntl(LargeLeftLayout); diff --git a/src/base-component/MediumLayout.jsx b/src/base-component/MediumLayout.jsx index 8a8ba044..a431c8f5 100644 --- a/src/base-component/MediumLayout.jsx +++ b/src/base-component/MediumLayout.jsx @@ -6,46 +6,32 @@ import { Hyperlink, Image } from '@edx/paragon'; import messages from './messages'; -const MediumLayout = (props) => { - const { intl } = props; - - return ( -
-
+const MediumLayout = ({ intl }) => ( + <> +
+
+
{getConfig().SITE_NAME} -
- - - -
-

- {intl.formatMessage(messages['start.learning'])} - -
- {intl.formatMessage(messages['with.site.name'], { siteName: getConfig().SITE_NAME })} - -

-
-
+

+ {intl.formatMessage(messages['start.learning'])} + + {intl.formatMessage(messages['with.site.name'], { siteName: getConfig().SITE_NAME })} + +

-
- +
+
- ); -}; + +); MediumLayout.propTypes = { intl: intlShape.isRequired, diff --git a/src/base-component/SmallLayout.jsx b/src/base-component/SmallLayout.jsx index 60d83671..ce60e8ef 100644 --- a/src/base-component/SmallLayout.jsx +++ b/src/base-component/SmallLayout.jsx @@ -6,38 +6,22 @@ import { Hyperlink, Image } from '@edx/paragon'; import messages from './messages'; -const SmallLayout = (props) => { - const { intl } = props; - - return ( - <> -
- - {getConfig().SITE_NAME} - -
- - - -
-

- {intl.formatMessage(messages['start.learning'])} -
- - {intl.formatMessage(messages['with.site.name'], { siteName: getConfig().SITE_NAME })} - -

-
-
-
- - ); -}; +const SmallLayout = ({ intl }) => ( + +
+
+ + {getConfig().SITE_NAME} + +

+ {intl.formatMessage(messages['start.learning'])} + + {intl.formatMessage(messages['with.site.name'], { siteName: getConfig().SITE_NAME })} + +

+
+ +); SmallLayout.propTypes = { intl: intlShape.isRequired, diff --git a/src/index.scss b/src/index.scss index a408de5b..c8ebba30 100755 --- a/src/index.scss +++ b/src/index.scss @@ -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"; diff --git a/src/sass/_base_component.scss b/src/sass/_base_component.scss new file mode 100644 index 00000000..ee68ca56 --- /dev/null +++ b/src/sass/_base_component.scss @@ -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); +} diff --git a/src/_style.scss b/src/sass/_style.scss similarity index 70% rename from src/_style.scss rename to src/sass/_style.scss index 195b4122..2672be6e 100644 --- a/src/_style.scss +++ b/src/sass/_style.scss @@ -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; diff --git a/src/welcome/ProgressiveProfiling.jsx b/src/welcome/ProgressiveProfiling.jsx index 7b8fce35..16aa8247 100644 --- a/src/welcome/ProgressiveProfiling.jsx +++ b/src/welcome/ProgressiveProfiling.jsx @@ -136,8 +136,8 @@ const ProgressiveProfiling = (props) => { /> ) : null}
-
-

{intl.formatMessage(messages['progressive.profiling.page.heading'])}

+
+

{intl.formatMessage(messages['progressive.profiling.page.heading'])}

{showError ? ( diff --git a/src/welcome/WelcomePage.jsx b/src/welcome/WelcomePage.jsx index 5aa38995..2bbb6b8d 100644 --- a/src/welcome/WelcomePage.jsx +++ b/src/welcome/WelcomePage.jsx @@ -151,7 +151,7 @@ const WelcomePage = (props) => { ) : null}
-

{intl.formatMessage(messages['progressive.profiling.page.heading'])}

+

{intl.formatMessage(messages['progressive.profiling.page.heading'])}

{showError ? (