From 6742a5f870c3078080243ca5a5b2f68137e58a25 Mon Sep 17 00:00:00 2001 From: Kiril Kartunov Date: Mon, 5 Apr 2021 14:30:42 +0300 Subject: [PATCH 1/5] Implement #5448 --- .../components/Gigs/LoginModal/index.jsx | 34 +++++- .../components/Gigs/LoginModal/modal.scss | 103 +++++++++++++++--- 2 files changed, 118 insertions(+), 19 deletions(-) diff --git a/src/shared/components/Gigs/LoginModal/index.jsx b/src/shared/components/Gigs/LoginModal/index.jsx index 7bc255789b..af1ce8903f 100644 --- a/src/shared/components/Gigs/LoginModal/index.jsx +++ b/src/shared/components/Gigs/LoginModal/index.jsx @@ -8,6 +8,8 @@ import PT from 'prop-types'; import React from 'react'; import { Modal, PrimaryButton } from 'topcoder-react-ui-kit'; import { config } from 'topcoder-react-utils'; +import SVG from 'react-inlinesvg'; +import MediaQuery from 'react-responsive'; import tc from 'components/buttons/themed/tc.scss'; import modalStyle from './modal.scss'; @@ -19,6 +21,13 @@ const buttonThemes = { tc, }; +const blobYellow = 'https://images.ctfassets.net/b5f1djy59z3a/3wYRUnrUj3v765abrGRwlM/b0f9b49b4f49dc163e6913559a19b9e3/blob-yellow.svg'; +const progressBar = 'https://images.ctfassets.net/b5f1djy59z3a/2BX7LOrvVzKEarIJ8boCFm/bba0dd3e0180d2dc355809e6c1954631/progress-bar.svg'; +const progressBarMid = 'https://images.ctfassets.net/b5f1djy59z3a/517ZRt9geweW3QTtzlUqJu/11e33e876426f97e0725ba5fff9755f8/progress-bar-mid.svg'; +const progressBarXS = 'https://images.ctfassets.net/b5f1djy59z3a/6QxH7uVKCngtzBaXDn3Od1/3e0222a1ce773cead3f3a45f291f43a6/progress-bar-mobile.svg'; +const blobPurple = 'https://images.ctfassets.net/b5f1djy59z3a/1ZRCwp1uoShcES16lQmeu/ba084734120ffedebcb92b4e3fa2d667/blob-purple.svg'; +const thinkingFace = 'https://images.ctfassets.net/b5f1djy59z3a/1ARy0M8tnHLo5baDRY1GcB/7d15b488029574a8de7adeeda41d38d9/thinking_icon_-_desktop_and_tablet.png'; + function LoginModal({ retUrl, onCancel }) { return (
-

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? face icon  + 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..9a5a6cdc9a 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: 532px; border-radius: 10px; display: flex; flex-direction: column; @@ -15,21 +15,51 @@ @include gui-kit-headers; @include gui-kit-content; + @media (max-width: 768px) and (min-width: 630px) { + width: 600px; + max-height: 596px; + } + + @media (max-width: 630px) { + width: calc(100vw - 30px); + max-height: none; + } + .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: 425px !important; + } } .ctaButtons { @@ -61,20 +91,65 @@ } } - .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; + + @include xs { + max-width: 62px; + } + } + + .blobPurple { + bottom: -5px; + left: 0; + + @include xs { + max-width: 84px; + bottom: -40px; + } } .regTxt { - font-size: 14px; - margin: 10px 0 0; + font-size: 16px; + margin: 30px 0 0; } } } From 5767bc572677df3e04b5c9a6de8fe399e7994e40 Mon Sep 17 00:00:00 2001 From: Kiril Kartunov Date: Tue, 6 Apr 2021 09:21:13 +0300 Subject: [PATCH 2/5] ci: on test --- .circleci/config.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 From 5bd2b5c745373089da23f63ce4c96ba7a78a7838 Mon Sep 17 00:00:00 2001 From: Kiril Kartunov Date: Tue, 6 Apr 2021 09:55:56 +0300 Subject: [PATCH 3/5] face icon updated --- .../images/thinking-face-laptop-tablet.svg | 433 ++++++++++++++++++ src/assets/images/thinking-face-mobile.svg | 433 ++++++++++++++++++ .../components/Gigs/LoginModal/index.jsx | 6 +- .../components/Gigs/LoginModal/modal.scss | 16 +- 4 files changed, 885 insertions(+), 3 deletions(-) create mode 100644 src/assets/images/thinking-face-laptop-tablet.svg create mode 100644 src/assets/images/thinking-face-mobile.svg 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/Gigs/LoginModal/index.jsx b/src/shared/components/Gigs/LoginModal/index.jsx index af1ce8903f..59ed1e78b9 100644 --- a/src/shared/components/Gigs/LoginModal/index.jsx +++ b/src/shared/components/Gigs/LoginModal/index.jsx @@ -1,3 +1,4 @@ +/* eslint-disable max-len */ /** * The modal used for login enforcing */ @@ -11,6 +12,8 @@ import { config } from 'topcoder-react-utils'; import SVG from 'react-inlinesvg'; import MediaQuery from 'react-responsive'; import tc from 'components/buttons/themed/tc.scss'; +import ThinkingFaceMobile from 'assets/images/thinking-face-mobile.svg'; +import ThinkingFace from 'assets/images/thinking-face-laptop-tablet.svg'; import modalStyle from './modal.scss'; /** Themes for buttons @@ -26,7 +29,6 @@ const progressBar = 'https://images.ctfassets.net/b5f1djy59z3a/2BX7LOrvVzKEarIJ8 const progressBarMid = 'https://images.ctfassets.net/b5f1djy59z3a/517ZRt9geweW3QTtzlUqJu/11e33e876426f97e0725ba5fff9755f8/progress-bar-mid.svg'; const progressBarXS = 'https://images.ctfassets.net/b5f1djy59z3a/6QxH7uVKCngtzBaXDn3Od1/3e0222a1ce773cead3f3a45f291f43a6/progress-bar-mobile.svg'; const blobPurple = 'https://images.ctfassets.net/b5f1djy59z3a/1ZRCwp1uoShcES16lQmeu/ba084734120ffedebcb92b4e3fa2d667/blob-purple.svg'; -const thinkingFace = 'https://images.ctfassets.net/b5f1djy59z3a/1ARy0M8tnHLo5baDRY1GcB/7d15b488029574a8de7adeeda41d38d9/thinking_icon_-_desktop_and_tablet.png'; function LoginModal({ retUrl, onCancel }) { return ( @@ -39,7 +41,7 @@ function LoginModal({ retUrl, onCancel }) {

YAY! You are almost done!

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

diff --git a/src/shared/components/Gigs/LoginModal/modal.scss b/src/shared/components/Gigs/LoginModal/modal.scss index 9a5a6cdc9a..b1ee9d37b5 100644 --- a/src/shared/components/Gigs/LoginModal/modal.scss +++ b/src/shared/components/Gigs/LoginModal/modal.scss @@ -58,7 +58,10 @@ margin-bottom: 40px; @media (max-width: 425px) { - text-align: 425px !important; + text-align: left !important; + font-size: 20px; + line-height: 30px; + margin-bottom: 30px; } } @@ -147,6 +150,17 @@ } } + .thinkingFace { + width: 23px; + margin: 0 5px; + transform: translateY(4px); + + @media (max-width: 425px) { + width: 21px; + transform: translateY(2px); + } + } + .regTxt { font-size: 16px; margin: 30px 0 0; From 93c595f9b5eddae3f24683772afd9f9d5fa94c71 Mon Sep 17 00:00:00 2001 From: Kiril Kartunov Date: Tue, 6 Apr 2021 18:19:06 +0300 Subject: [PATCH 4/5] updated max height and mobile views --- src/shared/components/Contentful/Route.jsx | 5 ++++- src/shared/components/Gigs/LoginModal/modal.scss | 9 ++++++--- 2 files changed, 10 insertions(+), 4 deletions(-) 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 ? ( ) : ( Date: Wed, 7 Apr 2021 12:17:14 +0300 Subject: [PATCH 5/5] modal tweaks --- src/shared/components/Gigs/LoginModal/index.jsx | 4 ++-- src/shared/components/Gigs/LoginModal/modal.scss | 7 ++++--- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/src/shared/components/Gigs/LoginModal/index.jsx b/src/shared/components/Gigs/LoginModal/index.jsx index 59ed1e78b9..673a390a7f 100644 --- a/src/shared/components/Gigs/LoginModal/index.jsx +++ b/src/shared/components/Gigs/LoginModal/index.jsx @@ -47,10 +47,10 @@ function LoginModal({ retUrl, onCancel }) { - + - +
diff --git a/src/shared/components/Gigs/LoginModal/modal.scss b/src/shared/components/Gigs/LoginModal/modal.scss index 53244e2c5a..aa641aec6a 100644 --- a/src/shared/components/Gigs/LoginModal/modal.scss +++ b/src/shared/components/Gigs/LoginModal/modal.scss @@ -24,8 +24,9 @@ } @media (max-width: 630px) { - width: calc(100vw - 30px); + width: 290px; max-height: none; + top: 42%; } .title { @@ -138,7 +139,7 @@ top: 0; right: 0; - @include xs { + @media (max-width: 425px) { max-width: 62px; } } @@ -147,7 +148,7 @@ bottom: -5px; left: 0; - @include xs { + @media (max-width: 425px) { max-width: 84px; bottom: -40px; }