ci:adding buttons

Author: dengjun

src/shared/components/Gigs/GigApply/index.jsx

@@ -108,7 +108,10 @@ export default function GigApply(props) {
                           <Link to={`${config.GIGS_PAGES_PATH}`}>VIEW OTHER GIGS</Link>
                         </React.Fragment>
                       ) : (
-                        <a href={`${config.GIGS_PAGES_PATH}`} styleName="primaryBtn">GO TO GIGS LIST</a>
+                        <React.Fragment>
+                          <a href={`${config.GIGS_PAGES_PATH}`} styleName="gig-list-btn">GO TO GIGS LIST</a>
+                          <a href={`${config.PLATFORM_SITE_URL}/earn/my-gigs`} styleName="primaryBtn">CHECK GIG APPLICATION STATUS</a>
+                        </React.Fragment>
                       )
                     }
                   </div>

src/shared/components/Gigs/GigApply/style.scss

@@ -313,6 +313,9 @@
         margin-left: 20px;
       }
     }
+    .gig-list-btn {
+      margin-right: 12px;
+    }
   }
   /* stylelint-enable */
 }

src/shared/components/Gigs/GigHeader/index.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { config, Link } from 'topcoder-react-utils';
+import BannerInfoIcon from 'assets/images/banner-info.svg';
+import './style.scss';
+
+const GigHeader = () => {
+  return (
+    <div
+      styleName="gig-header"
+    >
+      <div styleName="content">
+        <div styleName="banner-info">
+          <BannerInfoIcon />
+        </div>
+        <span>
+          You have 3 applied Gigs in the system
+        </span>
+      </div>
+
+      <div styleName="row-btn">
+        <Link styleName="primary-white-md" to={`${config.PLATFORM_SITE_URL}/earn/my-gigs`}>CHECK GIG APPLICATION STATUS</Link>
+      </div>
+    </div>
+  );
+};
+
+export default GigHeader;

src/shared/components/Gigs/GigHeader/style.scss

@@ -0,0 +1,83 @@
+@import "~styles/mixins";
+@import "~components/GUIKit/Assets/Styles/default";
+@import "~components/Contentful/default";
+
+.gig-header {
+  @include roboto-medium;
+
+  @include xs-to-sm {
+    height: 81px;
+    line-height: 22px;
+    padding-left: 20px;
+  }
+
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+  align-items: center;
+  margin-top: 15px;
+  height: 70px;
+  background: linear-gradient(90deg, #6F308B 0%, #1470AC 100%);
+  border-radius: 10px;
+  color: #fff;
+  font-size: 16px;
+
+  .content {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: row;
+    align-items: center;
+    color: #fff;
+
+    .banner-info {
+      width: 24px;
+      height: 24px;
+      margin-left: 20px;
+      margin-right: 10px;
+
+      @include xs-to-sm {
+        display: none;
+      }
+    }
+
+    @include xs-to-sm {
+      width: 80%;
+    }
+  }
+
+  .row-btn {
+    display: flex;
+    justify-content: flex-end;
+    flex: 1;
+    padding-right: 20px;
+
+    @include xs-to-sm {
+      justify-content: flex-start;
+    }
+
+    button.primary-white-md {
+      outline: none;
+
+      @include primary-white;
+      @include md;
+
+      &:hover {
+        @include primary-white;
+      }
+    }
+  }
+
+  .banner-close {
+    width: 14px;
+    height: 14px;
+    margin-right: 30px;
+
+    &:hover {
+      cursor: pointer;
+    }
+
+    @include xs-to-sm {
+      margin-bottom: 20px;
+    }
+  }
+}

src/shared/containers/Gigs/RecruitCRMJobs.jsx

@@ -17,6 +17,7 @@ import IconBlackLocation from 'assets/images/icon-black-location.svg';
 import { config, Link, isomorphy } from 'topcoder-react-utils';
 import { getQuery, updateQuery } from 'utils/url';
 import { withOptimizely } from '@optimizely/react-sdk';
+import GigHeader from 'components/Gigs/GigHeader';
 import './jobLisingStyles.scss';
 
 const cookies = require('browser-cookies');
@@ -249,6 +250,7 @@ class RecruitCRMJobsContainer extends React.Component {
             <Dropdown label="Location" onChange={this.onLocation} options={locations} size="xs" />
             <Dropdown label="Sort by" onChange={this.onSort} options={sortByOptions} size="xs" />
           </div>
+          <GigHeader />
           <div styleName="jobs-list-container">
             {
               jobsToDisplay.length