Team fixes 2

Author: kkartunov

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

@@ -53,15 +53,15 @@
       }
 
       &:nth-child(2) {
-        width: 204px;
+        width: 174px;
       }
 
       &:nth-child(3) {
-        width: 263px;
+        width: 233px;
       }
 
       &:nth-child(4) {
-        width: 195px;
+        width: 225px;
       }
 
       &:last-child {

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

@@ -21,7 +21,10 @@ function SearchCombo({
   return (
     <div styleName="container">
       <div styleName="input-wrap">
-        <input type="text" placeholder={placeholder} styleName="input" value={inputVal} onChange={event => setVal(event.target.value)} />
+        {
+          !inputVal ? <span styleName="search-placeholder">{placeholder}</span> : null
+        }
+        <input type="text" styleName="input" value={inputVal} onChange={event => setVal(event.target.value)} />
         {
           inputVal ? <IconClearSearch onClick={clearSearch} styleName="clear-search" /> : null
         }

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

@@ -9,26 +9,33 @@
     width: 100%;
     position: relative;
     margin-right: 10px;
+    z-index: 1;
 
     input.input {
-      background-color: #fff;
+      background: transparent;
       border: 1px solid #aaa;
       border-radius: 6px;
       height: 39px;
       margin: 0;
+    }
 
-      &::placeholder {
-        color: #aaa;
-        font-size: 14px;
-        line-height: 22px;
-        text-transform: none;
-      }
+    .search-placeholder {
+      color: #aaa;
+      font-size: 14px;
+      font-family: Roboto, sans-serif;
+      line-height: 22px;
+      text-transform: none;
+      position: absolute;
+      z-index: 0;
+      top: 8px;
+      left: 15px;
     }
 
     .clear-search {
       position: absolute;
       top: calc(50% - 5px);
       right: 15px;
+      cursor: pointer;
     }
   }
 

src/shared/components/Gigs/GigDetails.jsx

@@ -35,6 +35,8 @@ export default function GigDetails(props) {
   if (isomorphy.isClientSide()) {
     shareUrl = encodeURIComponent(window.location.href);
   }
+  let skills = getCustomField(job.custom_fields, 'Technologies Required');
+  if (skills !== 'n/a') skills = skills.split(',').join(', ');
 
   return (
     <div styleName="container">
@@ -88,6 +90,8 @@ export default function GigDetails(props) {
             </div>
             <div styleName="content">
               <div styleName="left">
+                <h4>Required Tech Skills</h4>
+                <p>{skills}</p>
                 <h4>Description</h4>
                 <p>{ReactHtmlParser(job.job_description_text, ReactHtmlParserOptions)}
                 </p>

src/shared/components/Gigs/style.scss

@@ -134,6 +134,10 @@
             }
           }
         }
+
+        .gig-skills {
+          display: flex;
+        }
       }
 
       .left {
@@ -146,8 +150,15 @@
           line-height: 30px;
           display: inline-block;
         }
-
         /* stylelint-enable */
+
+        h4 {
+          margin-top: 35px;
+
+          &:first-child {
+            margin-top: 0;
+          }
+        }
       }
     }
   }

src/shared/containers/Gigs/RecruitCRMJobs.jsx

@@ -114,11 +114,11 @@ class RecruitCRMJobsContainer extends React.Component {
     return (
       <div styleName="container">
         <div styleName="filters">
-          <SearchCombo placeholder="Search Gig Listings by Name, Skills or Location" onSearch={this.onSearch} term={term} />
+          <SearchCombo placeholder="Search Gig Listings by Name, Skills, or Location" onSearch={this.onSearch} term={term} />
         </div>
         <div styleName="jobs-list-container">
           {
-            jobsToDisplay.map(job => <JobListCard job={job} />)
+            jobsToDisplay.map(job => <JobListCard job={job} key={job.slug} />)
           }
         </div>
         <Paginate onChange={this.onPaginate} pages={pages} page={page} />