Update #4017

kkartunov · kkartunov · commit 210f8c6160c4 · 2020-02-24T10:45:22.000+02:00
diff --git a/src/shared/components/Contentful/ContentBlock/themes/TCO19.scss b/src/shared/components/Contentful/ContentBlock/themes/TCO19.scss
@@ -45,7 +45,6 @@
   h6 {
     margin: 10px 0 10px;
     color: $tco-black;
-    text-transform: uppercase;
   }
 
   @include TCO19-default-headers;
diff --git a/src/shared/components/Contentful/ContentBlock/themes/TCO20.scss b/src/shared/components/Contentful/ContentBlock/themes/TCO20.scss
@@ -45,7 +45,6 @@
   h6 {
     margin: 20px 0 10px;
     color: $tco-black;
-    text-transform: uppercase;
   }
 
   @include TCO19-default-headers;
diff --git a/src/shared/components/Contentful/ContentBlock/themes/_TCO19_thypo.scss b/src/shared/components/Contentful/ContentBlock/themes/_TCO19_thypo.scss
@@ -4,6 +4,7 @@
 
     font-size: 80px;
     line-height: 74px;
+    text-transform: uppercase;
 
     @include xs-to-sm {
       font-size: 42px;
@@ -17,6 +18,7 @@
 
     font-size: 60px;
     line-height: 58px;
+    text-transform: uppercase;
 
     @include xs-to-sm {
       font-size: 36px;
@@ -29,6 +31,7 @@
 
     font-size: 48px;
     line-height: 50px;
+    text-transform: uppercase;
 
     @include xs-to-sm {
       font-size: 31px;
@@ -42,6 +45,7 @@
 
     font-size: 34px;
     line-height: 38px;
+    text-transform: uppercase;
 
     @include xs-to-sm {
       font-size: 25px;
@@ -56,6 +60,7 @@
     font-size: 24px;
     line-height: 26px;
     font-weight: 500;
+    text-transform: uppercase;
 
     @include xs-to-sm {
       font-size: 21px;
@@ -70,6 +75,7 @@
     font-size: 20px;
     line-height: 24px;
     font-weight: 500;
+    text-transform: uppercase;
 
     @include xs-to-sm {
       font-size: 18px;
diff --git a/src/shared/components/NewsletterSignupForMembers/ConfirmModal/index.jsx b/src/shared/components/NewsletterSignupForMembers/ConfirmModal/index.jsx
@@ -11,10 +11,21 @@
 
 import PT from 'prop-types';
 import React from 'react';
-import { Modal, PrimaryButton, SecondaryButton } from 'topcoder-react-ui-kit';
+import { Modal, PrimaryButton } from 'topcoder-react-ui-kit';
 import { config } from 'topcoder-react-utils';
 import { themr } from 'react-css-super-themr';
+import tc from 'components/buttons/themed/tc.scss';
 import defaultStyle from './style.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 ConfirmModal({
   customTcAuthModalText,
@@ -27,20 +38,20 @@ function ConfirmModal({
   let text;
   if (token) {
     text = (
-      <p>
-        Do you want to subscribe to this newsletter?
-      </p>
+      <div className={modalStyle.modalMsg}>
+        <h4>Sign up for the Topcoder Newsletter</h4>
+        <p style={{ 'font-size': '24px' }}>Do you want to subscribe to this newsletter?</p>
+      </div>
     );
     if (skipConfirmSignup) {
       setImmediate(() => signup());
     }
   } else {
     text = customTcAuthModalText || (
-      <div>
+      <div className={modalStyle.modalMsg}>
+        <h4>Sign up for the Topcoder Newsletter</h4>
         <p>
           You must be a Topcoder member before you can signup for Newsletter.
-        </p>
-        <p>
           To signup, login if you are already a member. If not, register first.
         </p>
       </div>
@@ -60,15 +71,21 @@ function ConfirmModal({
       { token ? (
         <div className={theme.signupButtons}>
           <PrimaryButton
-            onClick={() => signup()}
+            onClick={resetSignupButton}
+            theme={{
+              button: buttonThemes.tc['primary-white-md'],
+            }}
           >
-            Signup
+            CANCEL
           </PrimaryButton>
-          <SecondaryButton
-            onClick={resetSignupButton}
+          <PrimaryButton
+            onClick={() => signup()}
+            theme={{
+              button: buttonThemes.tc['primary-green-md'],
+            }}
           >
-            Cancel
-          </SecondaryButton>
+            SIGNUP
+          </PrimaryButton>
         </div>
       ) : (
         <div className={theme.loginButtons}>
@@ -77,8 +94,11 @@ function ConfirmModal({
               const url = encodeURIComponent(autoSignupUrl);
               window.location = `${config.URL.AUTH}/member?retUrl=${url}`;
             }}
+            theme={{
+              button: buttonThemes.tc['primary-white-md'],
+            }}
           >
-            Login
+            LOGIN
           </PrimaryButton>
           <PrimaryButton
             onClick={() => {
@@ -87,14 +107,12 @@ function ConfirmModal({
               url = encodeURIComponent(url);
               window.location = `${config.URL.AUTH}/member/registration?retUrl=${url}`;
             }}
+            theme={{
+              button: buttonThemes.tc['primary-green-md'],
+            }}
           >
-            Register
+            REGISTER
           </PrimaryButton>
-          <SecondaryButton
-            onClick={resetSignupButton}
-          >
-            Cancel
-          </SecondaryButton>
         </div>
       )}
     </Modal>
diff --git a/src/shared/components/NewsletterSignupForMembers/ConfirmModal/style.scss b/src/shared/components/NewsletterSignupForMembers/ConfirmModal/style.scss
@@ -1,35 +1,37 @@
 @import "~styles/mixins";
 
 .container {
-  padding: 10px;
-  width: 520px;
+  padding: 90px 60px;
+  width: 629px;
+  height: 440px;
+  border-radius: 10px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 }
 
-.confirmMsg {
-  @include tc-body-md;
-
-  color: #787d81;
-  text-align: center;
-  padding-bottom: 10px;
+.overlay {
+  background-color: #2a2a2a;
+  opacity: 0.95;
 }
 
-.signupButtons,
-.loginButtons {
+.confirmMsg {
   text-align: center;
 
-  button {
-    margin: 24px 12px 0;
+  h4 {
+    margin-bottom: 20px;
   }
-}
 
-.joinButtons {
-  button {
-    width: 100px;
+  p {
+    padding: 0 50px;
   }
 }
 
+.signupButtons,
 .loginButtons {
+  text-align: center;
+
   button {
-    width: 200px;
+    margin: 24px 12px 0;
   }
 }
diff --git a/src/shared/components/NewsletterSignupForMembers/index.jsx b/src/shared/components/NewsletterSignupForMembers/index.jsx
@@ -10,12 +10,20 @@ import LoadingIndicator from 'components/LoadingIndicator';
 import PT from 'prop-types';
 import React from 'react';
 import { Modal, PrimaryButton } from 'topcoder-react-ui-kit';
-import { COMPOSE } from 'react-css-super-themr';
+import tc from 'components/buttons/themed/tc.scss';
 import style from './style.scss';
 import modalStyle from './modal.scss';
 
 import ConfirmModal from './ConfirmModal';
 
+/** Themes for buttons
+ * those overwrite PrimaryButton style to match achieve various styles.
+ * Should implement pattern of classes.
+ */
+const buttonThemes = {
+  tc,
+};
+
 export const STATE = {
   CONFIRM_SIGNUP: 'confirm-signup',
   DEFAULT: 'default',
@@ -55,9 +63,12 @@ export default function NewsletterSignupForMembers({
           showSignupConfirmModal();
         }}
         className={state === STATE.SIGNING ? style.signing : ''}
-        {...(theme.link ? { theme: theme.link, composeContextTheme: COMPOSE.SWAP } : {})}
+        theme={{
+          button: buttonThemes.tc['primary-green-md'],
+          disabled: buttonThemes.tc.themedButtonDisabled,
+        }}
       >
-        { state === STATE.SIGNING ? (
+        {state === STATE.SIGNING ? (
           <div className={style.signingContainer}>
             <span>
               Signing...
@@ -66,31 +77,33 @@ export default function NewsletterSignupForMembers({
           </div>
         ) : label}
       </PrimaryButton>
-      { state === STATE.SIGNEDUP ? (
+      {state === STATE.SIGNEDUP ? (
         <Modal
           onCancel={hideSignupButton}
           theme={modalStyle}
         >
-          <h1 className={modalStyle.modalTitle}>
-            Congratulations!
-          </h1>
-          <p className={modalStyle.modalMsg}>
-            {
-              customSignupConfirmationText
-              || 'You are subscribed to the newsletter'
-            }
-          </p>
-          <PrimaryButton
-            onClick={hideSignupButton}
-            theme={{
-              button: style.returnToCommunityButton,
-            }}
-          >
-            Close
-          </PrimaryButton>
+          <div className={modalStyle.modalMsg}>
+            <h4>Congratulations!</h4>
+            <p style={{ 'font-size': '24px' }}>
+              {
+                customSignupConfirmationText
+                || 'You are subscribed to the newsletter.'
+              }
+            </p>
+          </div>
+          <div className={modalStyle.buttons}>
+            <PrimaryButton
+              onClick={hideSignupButton}
+              theme={{
+                button: buttonThemes.tc['primary-green-md'],
+              }}
+            >
+              RETURN TO PAGE
+            </PrimaryButton>
+          </div>
         </Modal>
       ) : null}
-      { state === STATE.CONFIRM_SIGNUP ? (
+      {state === STATE.CONFIRM_SIGNUP ? (
         <ConfirmModal
           customTcAuthModalText={customTcAuthModalText}
           signup={signup}
@@ -99,28 +112,30 @@ export default function NewsletterSignupForMembers({
           token={token}
         />
       ) : null}
-      { state === STATE.ERROR ? (
+      {state === STATE.ERROR ? (
         <Modal
           onCancel={resetSignupButton}
           theme={modalStyle}
         >
-          <h1 className={modalStyle.modalTitle}>
-            Sorry
-          </h1>
-          <p className={modalStyle.modalMsg}>
-            {
-              customSignupErrorText
-              || 'We are not able to subscribe you now. Please try later'
-            }
-          </p>
-          <PrimaryButton
-            onClick={resetSignupButton}
-            theme={{
-              button: style.returnToCommunityButton,
-            }}
-          >
-            Close
-          </PrimaryButton>
+          <div className={modalStyle.modalMsg}>
+            <h4>Sorry</h4>
+            <p>
+              {
+                customSignupErrorText
+                || 'We are not able to subscribe you now. Please try later.'
+              }
+            </p>
+          </div>
+          <div className={modalStyle.buttons}>
+            <PrimaryButton
+              onClick={resetSignupButton}
+              theme={{
+                button: buttonThemes.tc['primary-green-md'],
+              }}
+            >
+              Close
+            </PrimaryButton>
+          </div>
         </Modal>
       ) : null}
     </div>
@@ -131,7 +146,6 @@ NewsletterSignupForMembers.defaultProps = {
   customSignupConfirmationText: '',
   customSignupErrorText: '',
   customTcAuthModalText: '',
-  hiddenButtonText: '',
   skipConfirmSignup: false,
   theme: {},
   token: null,
@@ -141,7 +155,6 @@ NewsletterSignupForMembers.propTypes = {
   customSignupConfirmationText: PT.string,
   customSignupErrorText: PT.string,
   customTcAuthModalText: PT.string,
-  hiddenButtonText: PT.string,
   signup: PT.func.isRequired,
   label: PT.string.isRequired,
   hideSignupButton: PT.func.isRequired,
diff --git a/src/shared/components/NewsletterSignupForMembers/modal.scss b/src/shared/components/NewsletterSignupForMembers/modal.scss
diff --git a/src/shared/components/buttons/themed/tc.scss b/src/shared/components/buttons/themed/tc.scss

Original file line number	Diff line number	Diff line change
`@@ -45,7 +45,6 @@`
`45`	`45`	`h6 {`
`46`	`46`	`margin: 10px 0 10px;`
`47`	`47`	`color: $tco-black;`
`48`		`- text-transform: uppercase;`
`49`	`48`	`}`
`50`	`49`
`51`	`50`	`@include TCO19-default-headers;`