add searchbar to sketches dashboard view, adjust sketch list and asset list styling to have sticky header

Author: catarak

client/modules/IDE/components/Searchbar.jsx

@@ -58,7 +58,7 @@ class Searchbar extends React.Component {
           className="searchbar__input"
           type="text"
           value={searchValue}
-          placeholder="Search files..."
+          placeholder="Search sketches..."
           onChange={this.handleSearchChange}
           onKeyUp={this.handleSearchEnter}
         />

client/modules/User/pages/DashboardView.jsx

@@ -9,6 +9,7 @@ import Nav from '../../../components/Nav';
 
 import AssetList from '../../IDE/components/AssetList';
 import SketchList from '../../IDE/components/SketchList';
+import Searchbar from '../../IDE/components/Searchbar';
 
 import DashboardTabSwitcher, { TabKey } from '../components/DashboardTabSwitcher';
 
@@ -75,6 +76,7 @@ class DashboardView extends React.Component {
             <h2 className="dashboard-header__header__title">{this.ownerName()}</h2>
 
             <DashboardTabSwitcher currentTab={currentTab} isOwner={isOwner} username={username} />
+            { currentTab === TabKey.sketches && <Searchbar /> }
           </div>
 
           <div className="dashboard-content">

client/styles/components/_asset-list.scss

@@ -7,7 +7,7 @@
 
 .asset-table {
   width: 100%;
-  padding: #{10 / $base-font-size}rem 0;
+  padding-bottom: #{10 / $base-font-size}rem;
   max-height: 100%;
   border-spacing: 0;
   & .asset-list__delete-column {
@@ -22,8 +22,15 @@
   }
 
   & th {
+    padding-top: #{10 / $base-font-size}rem;
+    padding-bottom: #{15 / $base-font-size}rem;
     height: #{32 / $base-font-size}rem;
     font-weight: normal;
+    position: sticky;
+    top: #{15 / $base-font-size}rem;
+    @include themify() {
+      background-color: getThemifyVariable('background-color');
+    }
   }
 }
 
@@ -57,4 +64,9 @@
 
 .asset-table__total {
   padding: 0 #{20 / $base-font-size}rem;
+  position: sticky;
+  top: 0; 
+  @include themify() {
+    background-color: getThemifyVariable('background-color');
+  }
 }

client/styles/components/_dashboard-header.scss

@@ -1,5 +1,10 @@
 .dashboard-header {
   padding: #{24 / $base-font-size}rem #{66 / $base-font-size}rem;
+  position: relative;
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  flex-direction:column;
 }
 
 .dashboard-header__tabs {

client/styles/components/_searchbar.scss

@@ -2,8 +2,8 @@
   position: absolute;
   display: flex;
   padding-left: #{17 / $base-font-size}rem;
-  right: #{50 / $base-font-size}rem;
-  top: #{14 / $base-font-size}rem;
+  right: #{66 / $base-font-size}rem;
+  top: #{65 / $base-font-size}rem;
 }
 
 .searchbar__input {
@@ -18,15 +18,26 @@
   }
 }
 
-.searchbar__button {
+button[type="submit"].searchbar__button {
+  background-color: unset;
   width: #{31 / $base-font-size}rem;
   height: #{36 / $base-font-size}rem;
   position: absolute;
   padding: 0;
+  border: 0;
   border-right: solid 1px;
   @include themify() {
     border-right-color: getThemifyVariable('input-border-color');
   }
+  &:enabled:hover {
+    background-color: unset;
+    @include themify() {
+      border-right-color: getThemifyVariable('input-border-color');
+    }
+    & g {
+      fill: unset;
+    }
+  }
 }
 
 .searchbar__icon {

client/styles/components/_sketch-list.scss

@@ -17,6 +17,11 @@
 
 .sketches-table thead th {
   height: #{32 / $base-font-size}rem;
+  position: sticky;
+  top: 0;
+  @include themify() {
+    background-color: getThemifyVariable('background-color');
+  }
 }
 
 .sketch-list__sort-button {

client/styles/layout/_dashboard.scss

@@ -6,4 +6,12 @@
     color: getThemifyVariable('primary-text-color');
     background-color: getThemifyVariable('background-color');
   }
+  height: 100%;
+}
+
+.dashboard-content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: hidden;
 }