Gui kit components

__tests__/shared/components/GUIKit/Checkbox/__snapshots__/index.jsx.snap

@@ -15,9 +15,10 @@ exports[`Default render 1`] = `
     <IconCheckSolid
       className="src-shared-components-GUIKit-Checkbox-___style__after___2rEBg"
       height={13}
-      viewBox="0 0 15 13"
+      viewBox="0 0 18 15"
       width={13}
       xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
     />
   </div>
 </label>

src/shared/components/Contentful/AppComponent/index.jsx

@@ -32,7 +32,7 @@ export function AppComponentSwitch(appComponent) {
     );
   }
   if (appComponent.fields.type === 'RecruitCRM-Jobs') {
-    return <RecruitCRMJobs {...appComponent.fields.props} />;
+    return <RecruitCRMJobs {...appComponent.fields.props} key={appComponent.sys.id} />;
   }
   fireErrorMessage('Unsupported app component type from contentful', '');
   return null;

src/shared/components/GUIKit/Assets/Styles/Includes/_mixin.scss

@@ -2,6 +2,7 @@
 $gui-kit-gray-30: #aaa;
 $gui-kit-gray-90: #2a2a2a;
 $gui-kit-level-2: #0ab88a;
+$gui-kit-level-5: #ef476f;
 
 @mixin textInputLabel {
   font-size: 12px;
@@ -22,6 +23,7 @@ $gui-kit-level-2: #0ab88a;
   padding: 15px;
   margin-bottom: 0;
   margin-top: 12px;
+  color: $gui-kit-gray-90;
 
   &::-webkit-input-placeholder {
     /* Edge */
@@ -50,6 +52,12 @@ $gui-kit-level-2: #0ab88a;
     border: 1px solid $gui-kit-gray-30;
     box-shadow: none;
   }
+
+  &:focus-within {
+    label {
+      color: #229174;
+    }
+  }
 }
 
 @mixin textInputXs {
@@ -75,8 +83,10 @@ $gui-kit-level-2: #0ab88a;
   line-height: 20px;
   margin-top: 10px;
   margin-left: 15px;
+  color: $gui-kit-gray-90;
 }
 
 @mixin errorMessageXs {
   margin-top: 8px;
+  color: $gui-kit-gray-90;
 }

src/shared/components/GUIKit/Checkbox/index.jsx

@@ -5,7 +5,7 @@
  */
 import React, { useRef, useState } from 'react';
 import PT from 'prop-types';
-import IconCheckSolid from 'assets/images/dashboard/ico-checkmark.svg';
+import IconCheckSolid from 'assets/images/check-mark.svg';
 import _ from 'lodash';
 import './style.scss';
 

src/shared/components/GUIKit/Datepicker/style.scss

@@ -20,7 +20,7 @@
 
   &.haveError .label,
   &.haveError.isFocused .label {
-    color: $tc-level-5;
+    color: $gui-kit-level-5;
   }
 
   :global {
@@ -153,8 +153,17 @@
                             border-radius: 50%;
                           }
 
+                          &.CalendarDay__default {
+                            color: #2a2a2a;
+                          }
+
+                          &.CalendarDay__blocked_out_of_range {
+                            color: #aaa;
+                          }
+
                           &.CalendarDay__selected {
                             background: transparent !important;
+                            color: #fff;
 
                             div {
                               background: $gui-kit-level-2;
@@ -190,7 +199,7 @@
       .SingleDatePickerInput {
         .DateInput {
           input {
-            border: 2px solid $tc-level-5;
+            border: 2px solid $gui-kit-level-5;
           }
         }
       }

src/shared/components/GUIKit/Dropdown/style.scss

@@ -43,7 +43,7 @@
 
   &.haveError .label,
   &.haveError.isFocused .label {
-    color: $tc-level-5;
+    color: $gui-kit-level-5;
   }
 
   :global {
@@ -80,6 +80,7 @@
         height: 22px;
         line-height: 22px;
         font-size: 16px;
+        color: $gui-kit-gray-90 !important;
       }
     }
 
@@ -163,7 +164,7 @@
   &.haveError {
     :global {
       .Select-control {
-        border: 2px solid $tc-level-5 !important;
+        border: 2px solid $gui-kit-level-5 !important;
       }
     }
   }
@@ -200,6 +201,7 @@
       .Select-value {
         .Select-value-label {
           font-size: 14px;
+          color: $gui-kit-gray-90 !important;
         }
       }
 

src/shared/components/GUIKit/TextInput/style.scss

@@ -51,13 +51,13 @@
 
   input:not([type='checkbox']).haveError + label,
   input:not([type='checkbox']).haveError:focus + label {
-    color: $tc-level-5;
+    color: $gui-kit-level-5;
   }
 
   input:not([type='checkbox']).haveError,
   input:not([type='checkbox']).haveError:active,
   input:not([type='checkbox']).haveError:focus,
   input:not([type='checkbox']).haveError:hover {
-    border: 2px solid $tc-level-5;
+    border: 2px solid $gui-kit-level-5;
   }
 }

src/shared/components/GUIKit/Textarea/style.scss

@@ -30,7 +30,7 @@
 
     &.haveError ~ label,
     &.haveError:focus ~ label {
-      color: $tc-level-5;
+      color: $gui-kit-level-5;
     }
   }
 
@@ -52,7 +52,7 @@
   textarea.haveError:active,
   textarea.haveError:focus,
   textarea.haveError:hover {
-    border: 2px solid $tc-level-5;
+    border: 2px solid $gui-kit-level-5;
   }
 
   textarea.haveError ~ .labelMask {

src/shared/components/Gigs/GigDetails.jsx

@@ -8,6 +8,7 @@ import PT from 'prop-types';
 import { isomorphy, Link, config } from 'topcoder-react-utils';
 import ReactHtmlParser from 'react-html-parser';
 import { getSalaryType, getCustomField } from 'utils/gigs';
+import SubscribeMailChimpTag from 'containers/SubscribeMailChimpTag';
 import './style.scss';
 import IconFacebook from 'assets/images/icon-facebook.svg';
 import IconTwitter from 'assets/images/icon-twitter.svg';
@@ -21,7 +22,6 @@ import iconSkills from 'assets/images/icon-skills-blue.png';
 import iconLabel1 from 'assets/images/l1.png';
 import iconLabel2 from 'assets/images/l2.png';
 import iconLabel3 from 'assets/images/l3.png';
-import iconLabel4 from 'assets/images/l4.png';
 
 // Cleanup HTML from style tags
 // so it won't affect other parts of the UI
@@ -127,8 +127,12 @@ export default function GigDetails(props) {
                     <IconTwitter />
                   </a>
                 </div>
+                <div styleName="subscribe-area">
+                  <h6>SUBSCRIBE TO WEEKLY UPDATES</h6>
+                  <p>Not ready to apply? Want to stay tuned for any new gigs that may be upcoming? Join our weekly Gig Work list.</p>
+                  <SubscribeMailChimpTag listId="28bfd3c062" tags={['Gig Work']} />
+                </div>
                 <div styleName="info-area">
-                  <p>Thank you for checking out our latest gig at Topcoder. Gig work through us is simple and effective for those that would like traditional freelance work. To learn more about how Gigs work with us, go <a target="_blank" rel="noreferrer" href="https://www.topcoder.com/thrive/tracks?track=Topcoder&amp;tax=Gig%20Work">here</a>.</p>
                   <p>At Topcoder, we pride ourselves in bringing our customers the very best candidates to help fill their needs. Want to improve your chances? You can do a few things:</p>
                   <ul>
                     <li>
@@ -137,14 +141,10 @@ export default function GigDetails(props) {
                     </li>
                     <li>
                       <img src={iconLabel2} alt="label 2" />
-                      <div><strong>Subscribe to our <a target="_blank" rel="noreferrer" href="https://www.topcoder.com/community/taas">Gig notifications email</a>.</strong> We’ll send you a weekly update on gigs available so you don’t miss a beat.</div>
+                      <div><strong>Let us know you’re here!</strong> Check in on our <a target="_blank" rel="noreferrer" href="https://apps.topcoder.com/forums/?module=ThreadList&forumID=703475">Gig Work forum</a> and tell us you’re looking for a gig. It’s great visibility for the Gig team.</div>
                     </li>
                     <li>
                       <img src={iconLabel3} alt="label 3" />
-                      <div><strong>Let us know you’re here!</strong> Check in on our <a target="_blank" rel="noreferrer" href="https://apps.topcoder.com/forums/">Gig Work forum</a> and tell us you’re looking for a gig. It’s great visibility for the Gig team.</div>
-                    </li>
-                    <li>
-                      <img src={iconLabel4} alt="label 4" />
                       <div><strong>Check out our <a target="_blank" rel="noreferrer" href="https://www.topcoder.com/challenges">Topcoder challenges</a> and participate.</strong> Challenges showing your technology skills make you a “qualified” candidate so we know you’re good. The proof is in the pudding!</div>
                     </li>
                   </ul>

src/shared/components/Gigs/style.scss

@@ -101,6 +101,7 @@
         .shareButtons {
           display: flex;
           align-items: center;
+          margin-bottom: 12px;
 
           a {
             margin-right: 5px;
@@ -111,11 +112,27 @@
           }
         }
 
+        .subscribe-area {
+          background-image: linear-gradient(135.29deg, #2c95d7 0%, #06d6a0 100%);
+          border-radius: 10px;
+          padding: 25px 32px 30px 20px;
+
+          h6 {
+            margin: 0 0 6px;
+            color: #fff;
+          }
+
+          p {
+            color: #fff;
+            margin-bottom: 15px;
+          }
+        }
+
         .info-area {
           background-color: #f4f4f4;
           padding: 20px;
           border-radius: 10px;
-          margin-top: 18px;
+          margin-top: 20px;
 
           /* stylelint-disable */
           p,

src/shared/components/examples/GUIKit/TextInput/index.jsx

@@ -40,6 +40,7 @@ function TextInputExample({ size }) {
       value: 'Adam Morehead',
       required: true,
       errorMsg: '',
+      sectionTitle: 'Required',
     },
   ];
 

src/shared/containers/Gigs/RecruitCRMJobs.jsx

@@ -21,9 +21,7 @@ const sortByOptions = [
   { label: 'Latest Updated Descending', selected: false },
 ];
 // Locations
-const locations = [{
-  label: 'Anywhere', selected: true,
-}];
+let locations = [];
 
 class RecruitCRMJobsContainer extends React.Component {
   constructor(props) {
@@ -33,7 +31,7 @@ class RecruitCRMJobsContainer extends React.Component {
       term: '',
       page: 0,
       sortBy: 'created_on',
-      location: 'Anywhere',
+      location: 'Any Location',
     };
     // binds
     this.onSearch = this.onSearch.bind(this);
@@ -127,6 +125,8 @@ class RecruitCRMJobsContainer extends React.Component {
       if (location === 'Anywhere' || location === 'Any' || location === 'Any Location') return true;
       return location.toLowerCase() === job.country.toLowerCase();
     });
+    // sort location dropdown
+    locations = _.sortBy(locations, ['label']);
     // Filter by term
     if (term) {
       jobsToDisplay = _.filter(jobsToDisplay, (job) => {
@@ -178,11 +178,12 @@ class RecruitCRMJobsContainer extends React.Component {
 
 RecruitCRMJobsContainer.defaultProps = {
   jobs: [],
+  loading: true,
 };
 
 RecruitCRMJobsContainer.propTypes = {
   getJobs: PT.func.isRequired,
-  loading: PT.bool.isRequired,
+  loading: PT.bool,
   jobs: PT.arrayOf(PT.shape),
 };