modal tweks

Author: kkartunov

src/shared/components/Contentful/Article/Article.jsx

@@ -23,7 +23,8 @@ import {
   config, Link, isomorphy,
 } from 'topcoder-react-utils';
 import qs from 'qs';
-import LoginModal from 'components/Gigs/LoginModal';
+import LoginModal from 'components/LoginModal';
+import modalStyle from 'components/LoginModal/modal.scss';
 // SVGs and assets
 import GestureIcon from 'assets/images/icon-gesture.svg';
 import ReadMoreArrow from 'assets/images/read-more-arrow.svg';
@@ -398,8 +399,17 @@ class Article extends React.Component {
         }
         </div>
         {
-          // eslint-disable-next-line no-restricted-globals
-          showLogin && <LoginModal retUrl={isomorphy.isClientSide() ? location.href : null} onCancel={() => this.setState({ showLogin: false })} utmSource="thrive_article" />
+          showLogin && (
+          <LoginModal
+            // eslint-disable-next-line no-restricted-globals
+            retUrl={isomorphy.isClientSide() ? location.href : null}
+            onCancel={() => this.setState({ showLogin: false })}
+            modalTitle="Want to vote?"
+            modalText="You must be a Topcoder member to do that."
+            utmSource="thrive_article"
+            infoNode={<p className={modalStyle.regTxt}>Discover <a href="/community/learn" target="_blank" rel="noreferrer">other features</a> you can access by becoming a member.</p>}
+          />
+          )
         }
       </React.Fragment>
     );

src/shared/components/LoginModal/index.jsx

@@ -0,0 +1,70 @@
+/**
+ * Generic Login Modal Dialog
+ */
+/* global window */
+
+import PT from 'prop-types';
+import React from 'react';
+import { Modal, PrimaryButton } from 'topcoder-react-ui-kit';
+import { config, Link } from 'topcoder-react-utils';
+import tc from 'components/buttons/themed/tc.scss';
+import modalStyle from './modal.scss';
+
+/** Themes for buttons
+ * those overwrite PrimaryButton style to match achieve various styles.
+ * Should implement pattern of classes.
+ */
+const buttonThemes = {
+  tc,
+};
+
+function LoginModal({
+  onCancel,
+  retUrl,
+  utmSource,
+  modalTitle,
+  modalText,
+  infoNode,
+}) {
+  return (
+    <Modal
+      onCancel={onCancel}
+      theme={modalStyle}
+    >
+      <div className={modalStyle.loginRequired}>
+        <h3 className={modalStyle.title}>{modalTitle}</h3>
+        <p className={modalStyle.loginMsg}>{modalText}</p>
+        <div className={modalStyle.ctaButtons}>
+          <PrimaryButton
+            onClick={() => {
+              window.location = `${config.URL.AUTH}/member?retUrl=${encodeURIComponent(retUrl)}`;
+            }}
+            theme={{
+              button: buttonThemes.tc['primary-green-md'],
+            }}
+          >
+            LOGIN
+          </PrimaryButton>
+          <Link to={`${config.URL.AUTH}/member/registration?retUrl=${encodeURIComponent(retUrl)}&mode=signUp${utmSource ? `&utm_source=${utmSource}` : ''}`} className={buttonThemes.tc['primary-white-md']}>REGISTER</Link>
+        </div>
+        {infoNode}
+      </div>
+    </Modal>
+  );
+}
+
+LoginModal.defaultProps = {
+  utmSource: null,
+  infoNode: null,
+};
+
+LoginModal.propTypes = {
+  onCancel: PT.func.isRequired,
+  retUrl: PT.string.isRequired,
+  utmSource: PT.string,
+  modalTitle: PT.string.isRequired,
+  modalText: PT.string.isRequired,
+  infoNode: PT.node,
+};
+
+export default LoginModal;

src/shared/components/LoginModal/modal.scss

@@ -0,0 +1,89 @@
+/* stylelint-disable no-descending-specificity */
+@import "~styles/mixins";
+@import "~components/Contentful/default";
+
+.container {
+  padding: 0;
+  width: auto;
+  max-width: 95vw;
+  height: auto;
+  max-height: 95vh;
+  border-radius: 10px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  @include gui-kit-headers;
+  @include gui-kit-content;
+
+  @include xs-to-sm {
+    width: 90vw;
+    max-width: 90vw;
+  }
+
+  .title {
+    color: #1e94a3;
+    font-family: BarlowCondensed, sans-serif;
+    font-size: 34px;
+    line-height: 38px;
+    font-weight: 500;
+    margin: 0;
+    margin-bottom: 20px;
+  }
+
+  .loginMsg {
+    color: #2a2a2a;
+    font-size: 24px;
+    line-height: 36px;
+    margin-bottom: 40px;
+  }
+
+  .ctaButtons {
+    display: flex;
+    align-content: center;
+    justify-content: center;
+
+    & > button:first-child {
+      margin-right: 10px !important;
+    }
+
+    & > a:first-child {
+      margin-right: 10px !important;
+    }
+  }
+
+  .loginRequired {
+    display: flex;
+    flex-direction: column;
+    padding: 100px 80px;
+    text-align: center;
+
+    @include xs-to-sm {
+      padding: 20px 15px;
+    }
+
+    .loginMsg {
+      font-size: 20px;
+    }
+
+    .regTxt {
+      font-size: 14px;
+      margin: 10px 0 0;
+    }
+
+    .ctaButtons {
+      @include xs-to-sm {
+        flex-direction: column;
+
+        > button {
+          margin: 0 0 20px !important;
+        }
+      }
+    }
+  }
+}
+
+.overlay {
+  background-color: #2a2a2a;
+  opacity: 0.95;
+}