Merge pull request #5468 from topcoder-platform/gig-login-modal-update

Gig login modal update

Author: luizrrodrigues

.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      

src/assets/images/thinking-face-laptop-tablet.svg

@@ -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 ? (
           <RedirectWithStatus status={301} from={url} to={redirectToUrl} />
         ) : (
           <Route

src/assets/images/thinking-face-mobile.svg

@@ -1,3 +1,4 @@
+/* eslint-disable max-len */
 /**
  * The modal used for login enforcing
  */
@@ -8,7 +9,11 @@ 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 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
@@ -19,28 +24,49 @@ 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';
+
 function LoginModal({ retUrl, onCancel }) {
   return (
     <Modal
       theme={modalStyle}
       onCancel={onCancel}
     >
       <div className={modalStyle.loginRequired}>
-        <h3 className={modalStyle.title}>WARNING</h3>
-        <p className={modalStyle.loginMsg}>You must be a Topcoder member to apply!</p>
+        <SVG src={blobYellow} className={modalStyle.blobYellow} />
+        <h3 className={modalStyle.title}>YAY! You are almost done!</h3>
+        <p className={modalStyle.loginMsg}>
+          Looks like you&apos;re not a Topcoder member yet. Or maybe
+          you&apos;re not logged in?<MediaQuery maxDeviceWidth={425}><ThinkingFaceMobile className={modalStyle.thinkingFace} /></MediaQuery><MediaQuery minDeviceWidth={426}><ThinkingFace className={modalStyle.thinkingFace} /></MediaQuery>
+          It&apos;s quick to register and it&apos;s free!
+        </p>
+        <MediaQuery minDeviceWidth={769}>
+          <SVG src={progressBar} className={modalStyle.progressBar} />
+        </MediaQuery>
+        <MediaQuery maxDeviceWidth={768} minDeviceWidth={630}>
+          <SVG src={progressBarMid} className={modalStyle.progressBar} />
+        </MediaQuery>
+        <MediaQuery maxDeviceWidth={630}>
+          <SVG src={progressBarXS} className={modalStyle.progressBar} />
+        </MediaQuery>
         <div className={modalStyle.ctaButtons}>
           <PrimaryButton
             onClick={() => {
-              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
           </PrimaryButton>
         </div>
-        <p className={modalStyle.regTxt}>Not a member? It is free to <a href={`${config.URL.AUTH}/member/registration?retUrl=${encodeURIComponent(retUrl)}&mode=signUp&utm_source=gig_listing`}>register</a>!</p>
+        <p className={modalStyle.regTxt}>Already a member? <a href={`${config.URL.AUTH}/member?retUrl=${encodeURIComponent(retUrl)}`}>Login here</a></p>
+        <SVG src={blobPurple} className={modalStyle.blobPurple} />
       </div>
     </Modal>
   );

src/shared/components/Contentful/Route.jsx

@@ -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;
     }
   }
 }