ci:adding empty UI

Author: dengjun

src/App.jsx

@@ -112,7 +112,7 @@ const App = () => {
           </div>
           <div className="sidebar-footer">
             <a
-              className="button button-primary"
+              className="button"
               href="https://discussions.topcoder.com/discussion/8870/new-beta-site-discuss?new=1"
               target="_blank"
             >

src/components/Empty/index.jsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { EMPTY_GIGS_TEXT } from "../../constants";
+import Button from "../Button";
+import "./styles.scss";
+
+const Empty = () => {
+  return (
+    <div styleName="empty-wrapper">
+      <div styleName="empty-inner">
+        <h6>{EMPTY_GIGS_TEXT}</h6>
+        <span>Interested in getting a gig?</span>
+        <Button
+          isPrimary
+          size="lg"
+          onClick={() => {
+            window.location.href = `${process.env.URL.BASE}/gigs`;
+          }}
+        >
+          VIEW GIGS
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default Empty;

src/components/Empty/styles.scss

@@ -0,0 +1,34 @@
+@import "styles/variables";
+@import "styles/mixins";
+@import "styles/animations";
+
+.empty-wrapper {
+  width: 100%;
+  border-radius: $border-radius-lg;
+  background-color: #ffffff;
+  padding: 81px 0px 330px 0px;
+  min-width: 650px;
+    .empty-inner {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        & > h6 {
+            font-size: 20px;
+            color: $tc-black;
+            line-height: 24px;
+            @include barlow-semibold;
+        }
+        & > span {
+            font-size: 16px;
+            color: $tc-black;
+            line-height: 26px;
+            margin-top: 30px;
+            @include roboto-regular;
+        }
+        & > button {
+            margin-top: 20px;
+            letter-spacing: 0.8px;
+        }
+    }
+}

src/components/Loading/styles.scss

@@ -6,7 +6,7 @@
   width: 100%;
   border-radius: $border-radius-lg;
   background-color: rgba(42,42,42, 0.07);
-  padding: 232px 0px;
+  padding: 223px 0px;
     .loading-inner {
         display: flex;
         flex-direction: column;

src/constants/index.js

@@ -351,6 +351,6 @@ export const GIG_STATUS_TOOLTIP = {
 };
 
 export const EMPTY_GIGS_TEXT =
-  "Looks like you haven't applied to any gig opportunities yet.";
+  "LOOKS LIKE YOU HAVEN'T APPLIED TO ANY GIG OPPORTUNITIES YET.";
 
 export const CHECKING_GIG_TIMES = 3;

src/containers/MyGigs/index.jsx

@@ -5,9 +5,9 @@ import { connect } from "react-redux";
 import Modal from "../../components/Modal";
 import Button from "../../components/Button";
 import Loading from "../../components/Loading";
+import Empty from "../../components/Empty";
 import JobListing from "./JobListing";
 import actions from "../../actions";
-import { EMPTY_GIGS_TEXT } from "../../constants";
 import * as utils from "../../utils";
 
 import UpdateGigProfile from "./modals/UpdateGigProfile";
@@ -98,9 +98,7 @@ const MyGigs = ({
             </Button>
           </div>
         </h1>
-        {!checkingGigs && myGigs && myGigs.length == 0 && (
-          <h3 styleName="empty-label">{EMPTY_GIGS_TEXT}</h3>
-        )}
+        {!checkingGigs && myGigs && myGigs.length == 0 && <Empty />}
         {!checkingGigs && myGigs && myGigs.length > 0 && (
           <JobListing
             jobs={myGigs}