diff --git a/.circleci/config.yml b/.circleci/config.yml index 21613be979..795e7d8648 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -283,7 +283,7 @@ workflows: filters: branches: only: - - FAQ-theme + - gig-login-modal-update # This is alternate dev env for parallel testing - "build-qa": context : org-global diff --git a/src/assets/images/thinking-face-laptop-tablet.svg b/src/assets/images/thinking-face-laptop-tablet.svg new file mode 100644 index 0000000000..809839b5ec --- /dev/null +++ b/src/assets/images/thinking-face-laptop-tablet.svg @@ -0,0 +1,433 @@ + + + + + + + + + + + diff --git a/src/assets/images/thinking-face-mobile.svg b/src/assets/images/thinking-face-mobile.svg new file mode 100644 index 0000000000..cb818ced0c --- /dev/null +++ b/src/assets/images/thinking-face-mobile.svg @@ -0,0 +1,433 @@ + + + + + + + + + + + diff --git a/src/shared/components/Contentful/Route.jsx b/src/shared/components/Contentful/Route.jsx index 8af288d58f..fc63cd348b 100644 --- a/src/shared/components/Contentful/Route.jsx +++ b/src/shared/components/Contentful/Route.jsx @@ -14,6 +14,7 @@ import { Route, Switch, Redirect } from 'react-router-dom'; import Viewport from 'components/Contentful/Viewport'; import PasswordScreen from 'components/Contentful/PasswordScreen'; import { isomorphy } from 'topcoder-react-utils'; +import { removeTrailingSlash } from 'utils/url'; // Concatenates a base and segment and handles optional trailing slashes const buildUrl = (base, segment) => `${_.trimEnd(base, '/')}/${_.trim(segment, '/')}`; @@ -169,8 +170,10 @@ export default function ContentfulRoute(props) { render={(data) => { const { fields } = Object.values(data.entries.items)[0]; const url = path || buildUrl(baseUrl, fields.url); + // eslint-disable-next-line no-restricted-globals + const currentPathname = typeof location === 'undefined' ? '' : removeTrailingSlash(location.pathname); const redirectToUrl = _.trim(fields.redirectToUrl); - return redirectToUrl ? ( + return redirectToUrl && currentPathname === url ? ( ) : (
-

WARNING

-

You must be a Topcoder member to apply!

+ +

YAY! You are almost done!

+

+ Looks like you're not a Topcoder member yet. Or maybe + you're not logged in? + It's quick to register and it's free! +

+ + + + + + + + +
{ - window.location = `${config.URL.AUTH}/member?retUrl=${encodeURIComponent(retUrl)}`; + window.location = `${config.URL.AUTH}/member/registration?retUrl=${encodeURIComponent(retUrl)}&mode=signUp&utm_source=gig_listing`; }} theme={{ button: buttonThemes.tc['primary-green-md'], }} > - LOGIN + REGISTER NOW
-

Not a member? It is free to register!

+

Already a member? Login here

+
); diff --git a/src/shared/components/Gigs/LoginModal/modal.scss b/src/shared/components/Gigs/LoginModal/modal.scss index 7b6dea3fb2..aa641aec6a 100644 --- a/src/shared/components/Gigs/LoginModal/modal.scss +++ b/src/shared/components/Gigs/LoginModal/modal.scss @@ -4,9 +4,9 @@ .container { padding: 0; width: auto; - max-width: 95vw; + max-width: 727px; height: auto; - max-height: 95vh; + max-height: none; border-radius: 10px; display: flex; flex-direction: column; @@ -15,21 +15,58 @@ @include gui-kit-headers; @include gui-kit-content; + @media (min-width: 757px) { + width: 727px; + } + + @media (min-width: 630px) and (max-width: 757px) { + width: 600px; + } + + @media (max-width: 630px) { + width: 290px; + max-height: none; + top: 42%; + } + .title { - color: #1e94a3; + color: #9d41c9; font-family: BarlowCondensed, sans-serif; - font-size: 34px; - line-height: 38px; + font-size: 60px; + line-height: 58px; font-weight: 500; margin: 0; - margin-bottom: 20px; + margin-bottom: 30px; + + @include xs-to-sm { + max-width: 400px; + margin: auto; + font-size: 60px !important; + line-height: 58px !important; + margin-bottom: 30px; + } + + @media (max-width: 425px) { + max-width: 230px; + margin: auto; + font-size: 36px !important; + line-height: 34px !important; + margin-bottom: 30px; + } } .loginMsg { - color: #ef476f; + color: #2a2a2a; font-size: 24px; line-height: 36px; - margin-bottom: 20px; + margin-bottom: 40px; + + @media (max-width: 425px) { + text-align: left !important; + font-size: 20px; + line-height: 30px; + margin-bottom: 30px; + } } .ctaButtons { @@ -61,20 +98,76 @@ } } - .loginRequired, - .referrSucess { + .loginRequired { display: flex; flex-direction: column; - padding: 100px 80px; + padding: 80px 55px 40px 60px; text-align: center; + position: relative; @include xs-to-sm { - padding: 50px 40px; + padding: 50px 35px 40px; + } + + @media (max-width: 425px) { + padding: 50px 15px 70px; + } + + .progressBar { + width: 100%; + + @include xs { + margin-bottom: 40px; + } + + svg { + max-width: 100%; + } + } + + .blobYellow, + .blobPurple { + position: absolute; + z-index: -1; + + svg { + max-width: 100%; + } + } + + .blobYellow { + top: 0; + right: 0; + + @media (max-width: 425px) { + max-width: 62px; + } + } + + .blobPurple { + bottom: -5px; + left: 0; + + @media (max-width: 425px) { + max-width: 84px; + bottom: -40px; + } + } + + .thinkingFace { + width: 23px; + margin: 0 5px; + transform: translateY(4px); + + @media (max-width: 425px) { + width: 21px; + transform: translateY(2px); + } } .regTxt { - font-size: 14px; - margin: 10px 0 0; + font-size: 16px; + margin: 30px 0 0; } } }