Merge pull request #241 from transloadit/feature/better-provider-ui

Provider UI overhaul

src/generic-provider-views/AuthView.js

@@ -7,7 +7,7 @@ module.exports = (props) => {
       <h1 class="UppyProvider-authTitle">
         Please authenticate with <span class="UppyProvider-authTitleName">${props.pluginName}</span><br> to select files
       </h1>
-      <button class="UppyProvider-authBtn" onclick=${props.handleAuth}>Authenticate</button>
+      <button type="button" class="UppyProvider-authBtn" onclick=${props.handleAuth}>Authenticate</button>
       ${demoLink}
     </div>
   `

src/generic-provider-views/Breadcrumb.js

@@ -3,7 +3,7 @@ const html = require('yo-yo')
 module.exports = (props) => {
   return html`
     <li>
-      <button onclick=${props.getFolder}>${props.title}</button>
+      <button type="button" onclick=${props.getFolder}>${props.title}</button>
     </li>
   `
 }

src/generic-provider-views/Breadcrumbs.js

@@ -5,10 +5,10 @@ module.exports = (props) => {
   return html`
     <ul class="UppyProvider-breadcrumbs">
       ${
-        props.directories.map((directory) => {
+        props.directories.map((directory, i) => {
           return Breadcrumb({
             getFolder: () => props.getFolder(directory.id),
-            title: directory.title
+            title: i === 0 ? props.title : directory.title
           })
         })
       }

src/generic-provider-views/Browser.js

@@ -12,41 +12,51 @@ module.exports = (props) => {
   }
 
   return html`
-    <div class="Browser">
-      <header>
-        <input
-          type="text"
-          class="Browser-search"
-          placeholder="Search Drive"
-          onkeyup=${props.filterQuery}
-          value=${props.filterInput}/>
+    <div class="Browser Browser-viewType--${props.defaultViewType}">
+      <header class="Browser-header">
+        <div class="Browser-search" aria-hidden="${!props.isSearchVisible}">
+          <input type="text" class="Browser-searchInput" placeholder="Search"
+                 onkeyup=${props.filterQuery} value="${props.filterInput}"/>
+          <button type="button" class="Browser-searchClose" 
+                  onclick=${props.toggleSearch}>
+            <svg class="UppyIcon" viewBox="0 0 19 19">
+              <path d="M17.318 17.232L9.94 9.854 9.586 9.5l-.354.354-7.378 7.378h.707l-.62-.62v.706L9.318 9.94l.354-.354-.354-.354L1.94 1.854v.707l.62-.62h-.706l7.378 7.378.354.354.354-.354 7.378-7.378h-.707l.622.62v-.706L9.854 9.232l-.354.354.354.354 7.378 7.378.708-.707-7.38-7.378v.708l7.38-7.38.353-.353-.353-.353-.622-.622-.353-.353-.354.352-7.378 7.38h.708L2.56 1.23 2.208.88l-.353.353-.622.62-.353.355.352.353 7.38 7.38v-.708l-7.38 7.38-.353.353.352.353.622.622.353.353.354-.353 7.38-7.38h-.708l7.38 7.38z"/>
+            </svg>
+          </button>
+        </div>
+        <div class="Browser-headerBar">
+          <button type="button" class="Browser-searchToggle"
+                  onclick=${props.toggleSearch}>
+            <svg class="UppyIcon" viewBox="0 0 100 100">
+              <path d="M87.533 80.03L62.942 55.439c3.324-4.587 5.312-10.207 5.312-16.295 0-.312-.043-.611-.092-.908.05-.301.093-.605.093-.922 0-15.36-12.497-27.857-27.857-27.857-.273 0-.536.043-.799.08-.265-.037-.526-.08-.799-.08-15.361 0-27.858 12.497-27.858 27.857 0 .312.042.611.092.909a5.466 5.466 0 0 0-.093.921c0 15.36 12.496 27.858 27.857 27.858.273 0 .535-.043.8-.081.263.038.524.081.798.081 5.208 0 10.071-1.464 14.245-3.963L79.582 87.98a5.603 5.603 0 0 0 3.976 1.647 5.621 5.621 0 0 0 3.975-9.597zM39.598 55.838c-.265-.038-.526-.081-.8-.081-9.16 0-16.612-7.452-16.612-16.612 0-.312-.042-.611-.092-.908.051-.301.093-.605.093-.922 0-9.16 7.453-16.612 16.613-16.612.272 0 .534-.042.799-.079.263.037.525.079.799.079 9.16 0 16.612 7.452 16.612 16.612 0 .312.043.611.092.909-.05.301-.094.604-.094.921 0 9.16-7.452 16.612-16.612 16.612-.274 0-.536.043-.798.081z"/>
+            </svg>
+          </button>
+          ${Breadcrumbs({
+            getFolder: props.getFolder,
+            directories: props.directories,
+            title: props.title
+          })}
+          <button type="button" onclick=${props.logout} class="Browser-userLogout">Log out</button>
+        </div>
       </header>
-      <div class="Browser-subHeader">
-        ${Breadcrumbs({
-          getFolder: props.getFolder,
-          directories: props.directories
-        })}
-        <button onclick=${props.logout} class="Browser-userLogout">Log out</button>
-      </div>
       <div class="Browser-body">
-        <main class="Browser-content">
-          ${Table({
-            columns: [{
-              name: 'Name',
-              key: 'title'
-            }],
-            folders: filteredFolders,
-            files: filteredFiles,
-            activeRow: props.isActiveRow,
-            sortByTitle: props.sortByTitle,
-            sortByDate: props.sortByDate,
-            handleFileClick: props.addFile,
-            handleFolderClick: props.getNextFolder,
-            getItemName: props.getItemName,
-            getItemIcon: props.getItemIcon,
-            handleScroll: props.handleScroll
-          })}
-        </main>
+        ${Table({
+          columns: [{
+            name: 'Name',
+            key: 'title'
+          }],
+          folders: filteredFolders,
+          files: filteredFiles,
+          isGrid: false,
+          activeRow: props.isActiveRow,
+          sortByTitle: props.sortByTitle,
+          sortByDate: props.sortByDate,
+          handleFileClick: props.addFile,
+          handleFolderClick: props.getNextFolder,
+          getItemName: props.getItemName,
+          getItemIcon: props.getItemIcon,
+          handleScroll: props.handleScroll
+        })}
       </div>
     </div>
   `

src/generic-provider-views/Error.js

@@ -3,9 +3,7 @@ const html = require('yo-yo')
 module.exports = (props) => {
   return html`
     <div class="UppyProvider-error">
-      <span>
-        Something went wrong.  Probably our fault. ${props.error}
-      </span>
+      <span>Something went wrong. Probably our fault. ${props.error}</span>
     </div>
   `
 }

src/generic-provider-views/Loader.js

@@ -3,9 +3,7 @@ const html = require('yo-yo')
 module.exports = (props) => {
   return html`
     <div class="UppyProvider-loading">
-      <span>
-        Loading ...
-      </span>
+      <span>Loading...</span>
     </div>
   `
 }

src/generic-provider-views/Table.js

@@ -2,21 +2,20 @@ const html = require('yo-yo')
 const Row = require('./TableRow')
 
 module.exports = (props) => {
-  const headers = props.columns.map((column) => {
-    return html`
-      <th class="BrowserTable-headerColumn BrowserTable-column" onclick=${props.sortByTitle}>
-        ${column.name}
-      </th>
-    `
-  })
+  // const headers = props.columns.map((column) => {
+  //   return html`
+  //     <th class="BrowserTable-headerColumn BrowserTable-column" onclick=${props.sortByTitle}>
+  //       ${column.name}
+  //     </th>
+  //   `
+  // })
+
+  // <thead class="BrowserTable-header">
+  //   <tr>${headers}</tr>
+  // </thead>
 
   return html`
     <table class="BrowserTable">
-      <thead class="BrowserTable-header">
-        <tr>
-          ${headers}
-        </tr>
-      </thead>
       <tbody onscroll=${props.handleScroll}>
         ${props.folders.map((folder) => {
           return Row({

src/generic-provider-views/index.js

@@ -41,14 +41,23 @@ module.exports = class View {
   /**
    * @param {object} instance of the plugin
    */
-  constructor (plugin) {
+  constructor (plugin, opts) {
     this.plugin = plugin
     this.Provider = plugin[plugin.id]
 
+    // set default options
+    const defaultOptions = {
+      defaultViewType: 'list'
+    }
+
+    // merge default options with the ones set by user
+    this.opts = Object.assign({}, defaultOptions, opts)
+
     // Logic
     this.addFile = this.addFile.bind(this)
     this.filterItems = this.filterItems.bind(this)
     this.filterQuery = this.filterQuery.bind(this)
+    this.toggleSearch = this.toggleSearch.bind(this)
     this.getFolder = this.getFolder.bind(this)
     this.getNextFolder = this.getNextFolder.bind(this)
     this.logout = this.logout.bind(this)
@@ -150,6 +159,12 @@ module.exports = class View {
       this.plugin.core.log('Adding remote file')
       this.plugin.core.emitter.emit('core:file-add', tagFile)
     })
+
+    // feels like a hack
+    // this.updateState({
+    //   filterInput: '',
+    //   isSearchVisible: false
+    // })
   }
 
   /**
@@ -178,6 +193,21 @@ module.exports = class View {
     }))
   }
 
+  toggleSearch () {
+    const state = this.plugin.core.getState()[this.plugin.stateId]
+    const searchInputEl = document.querySelector('.Browser-searchInput')
+
+    this.updateState(Object.assign({}, state, {
+      isSearchVisible: !state.isSearchVisible,
+      filterInput: ''
+    }))
+
+    searchInputEl.value = ''
+    if (!state.isSearchVisible) {
+      searchInputEl.focus()
+    }
+  }
+
   filterItems (items) {
     const state = this.plugin.core.getState()[this.plugin.stateId]
     return items.filter((folder) => {
@@ -339,6 +369,7 @@ module.exports = class View {
       addFile: this.addFile,
       filterItems: this.filterItems,
       filterQuery: this.filterQuery,
+      toggleSearch: this.toggleSearch,
       sortByTitle: this.sortByTitle,
       sortByDate: this.sortByDate,
       logout: this.logout,
@@ -346,7 +377,9 @@ module.exports = class View {
       isActiveRow: this.isActiveRow,
       getItemName: this.plugin.getItemName,
       getItemIcon: this.plugin.getItemIcon,
-      handleScroll: this.handleScroll
+      handleScroll: this.handleScroll,
+      title: this.plugin.title,
+      defaultViewType: this.opts.defaultViewType
     })
 
     return Browser(browserProps)

src/plugins/Dashboard/FileItem.js

@@ -94,7 +94,7 @@ module.exports = function fileItem (props) {
         }
       </h4>
       <div class="UppyDashboardItem-status">
-        <span class="UppyDashboardItem-statusSize">${file.data.size ? prettyBytes(file.data.size) : '?'}</span>
+        <span class="UppyDashboardItem-statusSize">${file.data.size ? prettyBytes(file.data.size) : ''}</span>
       </div>
       ${!uploadInProgressOrComplete
         ? html`<button class="UppyDashboardItem-edit"

src/plugins/Dashboard/Tabs.js

@@ -42,6 +42,7 @@ module.exports = (props) => {
         ${props.acquirers.map((target) => {
           return html`<li class="UppyDashboardTab">
             <button class="UppyDashboardTab-btn"
+                    type="button"
                     role="tab"
                     tabindex="0"
                     aria-controls="UppyDashboardContent-panel--${target.id}"

src/plugins/Dropbox/index.js

@@ -53,7 +53,8 @@ module.exports = class Dropbox extends Plugin {
         folders: [],
         directories: [],
         activeRow: -1,
-        filterInput: ''
+        filterInput: '',
+        isSearchVisible: false
       }
     })
 

src/plugins/GoogleDrive/index.js

@@ -51,7 +51,8 @@ module.exports = class Google extends Plugin {
         folders: [],
         directories: [],
         activeRow: -1,
-        filterInput: ''
+        filterInput: '',
+        isSearchVisible: false
       }
     })
 

src/plugins/Instagram/index.js

@@ -44,7 +44,9 @@ module.exports = class Instagram extends Plugin {
   }
 
   install () {
-    this.view = new View(this)
+    this.view = new View(this, {
+      defaultViewType: 'grid'
+    })
     // Set default state for Google Drive
     this.core.setState({
       // writing out the key explicitly for readability the key used to store
@@ -55,7 +57,8 @@ module.exports = class Instagram extends Plugin {
         folders: [],
         directories: [],
         activeRow: -1,
-        filterInput: ''
+        filterInput: '',
+        isSearchVisible: false
       }
     })
 

src/scss/_dashboard.scss

@@ -218,6 +218,8 @@
   height: 40px;
   width: 100%;
   border-bottom: 1px solid rgba($color-gray, 0.3);
+  z-index: $zIndex-4;
+  background-color: darken($color-white, 4%);
 
   .UppyDashboard--wide & {
     height: 50px;
@@ -289,10 +291,14 @@
   will-change: transform;
   background-color: darken($color-white, 4%);
   box-shadow: 0 0 10px 5px rgba($color-black, 0.15);
-  padding: 15px;
-  padding-top: 60px;
+  // padding: 15px;
+  padding-top: 40px;
   overflow: hidden;
   z-index: $zIndex-3;
+
+  .UppyDashboard--wide & {
+    padding-top: 50px;
+  }
 }
 
 .UppyDashboardContent-panel[aria-hidden=false] {

src/scss/_provider.scss

@@ -5,11 +5,11 @@
 // @import 'vendor/bootstrap/bootstrap-grid';
 
 .UppyProvider-auth, .UppyProvider-error, .UppyProvider-loading {
-  align-items: center;
   display: flex;
+  align-items: center;
+  justify-content: center;
   flex-flow: column wrap;
   height: 100%;
-  justify-content: center;
 }
 
 .UppyProvider-authTitle {
@@ -28,12 +28,9 @@
 
 .UppyProvider-authBtn {
   @include reset-button;
-  // background-color: transparent;
-  // border: 1px solid $color-cornflower-blue;
   border-radius: 6px;
   background-color: $color-cornflower-blue;
   color: $color-white;
-  // color: $color-cornflower-blue;
   font-size: 20px;
   padding: 12px 46px;
   transition: background-color 0.3s;
@@ -47,22 +44,21 @@
   }
 }
 
-.UppyProvider-breadcrumbs {
-  color: #222;
-  font-size: 12px;
-  list-style-type: none;
-  margin: 0;
-  margin-left: 16px;
-  padding: 8px 0;
-}
+// .UppyProvider-breadcrumbs {
+//   color: $color-black;
+//   font-size: 12px;
+//   line-height: 40px;
+//   list-style-type: none;
+//   margin: 0;
+//   margin-left: 16px;
+//   // padding: 15px 0;
+// }
 
 .UppyProvider-breadcrumbs button,
 .UppyGoogleDrive-sidebar button {
-  background: transparent;
-  border: 0;
+  @include reset-button;
   cursor: pointer;
   font-size: 14px;
-  outline: 0;
 }
 
 .UppyProvider-breadcrumbs button:hover {
@@ -81,133 +77,217 @@
 
 .UppyProvider-breadcrumbs li {
   display: inline-block;
-}
-
-.UppyProvider-breadcrumbs li:after {
-  content: '>';
-}
-
-.UppyProvider-breadcrumbs li:last-child:after {
-  content: '';
-}
-
-.UppyGoogleDrive-sidebar {
-  height: 100%;
-  list-style-type: none;
   margin: 0;
-  padding: 16px 0 16px 16px;
-}
+  margin-right: 6px;
+}
+
+.UppyProvider-breadcrumbs li:not(:last-child):after {
+  content: '/';
+}
+
+// .UppyGoogleDrive-sidebar {
+//   height: 100%;
+//   list-style-type: none;
+//   margin: 0;
+//   padding: 16px 0 16px 16px;
+// }
+
+// .UppyGoogleDrive-sidebar li {
+//   margin: 0 auto 16px;
+//   padding: 0;
+// }
+
+// .UppyGoogleDrive-sidebar img {
+//   margin-right: 8px;
+// }
+
+// .UppyGoogleDrive-browser {
+//   border: 1px solid #eee;
+//   border-collapse: collapse;
+// }
+
+// .UppyGoogleDrive-browser td {
+//   border-bottom: 1px solid #eee;
+//   padding: 8px;
+// }
+
+// .UppyGoogleDrive-browser tbody tr:last-child td {
+//   border-bottom: 0;
+// }
+
+// .UppyGoogleDrive-browser tbody tr .UppyGoogleDrive-fileIcon {
+//   background-color: #fff;
+//   border-radius: 50%;
+//   padding: 6px 8px 5px 8px;
+// }
+
+// .UppyGoogleDrive-browser tbody tr .UppyGoogleDrive-folderIcon {
+//   background-color: #fff;
+//   border-radius: 50%;
+//   padding: 6px 8px 5px 8px;
+//   margin-top: 2px;
+// }
+
+// .UppyGoogleDrive-browser tbody tr.is-active {
+//   background-color: #78BDF2;
+//   color: #fff;
+// }
+
+// .UppyGoogleDrive-fileInfo {
+//   padding: 0 16px;
+// }
+
+// .UppyGoogleDrive-fileInfo .UppyGoogleDrive-fileThumbnail {
+//   width: 50%;
+// }
+
+// .UppyGoogleDrive-fileInfo .UppyGoogleDrive-fileIcon {
+//   margin-right: 8px;
+// }
+
+// .UppyGoogleDrive-sidebar label {
+//   display: block;
+//   margin-bottom: 8px;
+// }
+
+// .UppyGoogleDrive-sidebar input {
+//   margin-bottom: 8px;
+//   padding: 4px;
+// }
+
+// .UppyGoogleDrive-filter {
+//   border: 1px solid #eee;
+// }
+
+// .UppyGoogleDrive-sortableHeader:hover {
+//   background-color: #eee;
+//   cursor: pointer;
+// }
+
+// .UppyGoogleDrive-fileInfo ul {
+//   list-style-type: none;
+//   padding: 0;
+// }
+
+// .UppyGoogleDrive-browserContainer {
+//   height: calc(80vh - 40px);
+//   overflow: hidden;
+//   overflow-y: scroll;
+// }
+
+// .UppyGoogleDrive-browser td {
+//   cursor: default;
+//   max-width: 25%;
+//   padding-right: 8px;
+//   overflow: hidden;
+//   text-overflow: ellipsis;
+//   white-space: nowrap;
+//   width: 25%;
+// }
 
-.UppyGoogleDrive-sidebar li {
-  margin: 0 auto 16px;
-  padding: 0;
-}
 
-.UppyGoogleDrive-sidebar img {
-  margin-right: 8px;
-}
+/** NEW PLUGIN BROWSER STYLES */
 
-.UppyGoogleDrive-browser {
-  border: 1px solid #eee;
-  border-collapse: collapse;
+.Browser {
+  // border: 1px solid #ddd;
+  // border-radius: 5px;
+  display: flex;
+  flex-direction: column;
+  font-size: 13px;
+  font-weight: 400;
+  height: 100%;
+  // height: 475px;
+  // overflow: hidden;
+  // width: 718px;
 }
 
-.UppyGoogleDrive-browser td {
-  border-bottom: 1px solid #eee;
-  padding: 8px;
+.Browser-user {
+  margin: 16px 0;
 }
 
-.UppyGoogleDrive-browser tbody tr:last-child td {
-  border-bottom: 0;
+.Browser-header {
+  z-index: 1000;
+  border-bottom: 1px solid #e5e5e5;
+  position: relative;
 }
 
-.UppyGoogleDrive-browser tbody tr .UppyGoogleDrive-fileIcon {
-  background-color: #fff;
-  border-radius: 50%;
-  padding: 6px 8px 5px 8px;
+::-webkit-input-placeholder {
+   color: rgba(119,119,119,0.75);
 }
 
-.UppyGoogleDrive-browser tbody tr .UppyGoogleDrive-folderIcon {
-  background-color: #fff;
-  border-radius: 50%;
-  padding: 6px 8px 5px 8px;
-  margin-top: 2px;
+:-moz-placeholder { /* Firefox 18- */
+   color: rgba(119,119,119,0.75);
 }
 
-.UppyGoogleDrive-browser tbody tr.is-active {
-  background-color: #78BDF2;
-  color: #fff;
+::-moz-placeholder {  /* Firefox 19+ */
+   color: rgba(119,119,119,0.75);
 }
 
-.UppyGoogleDrive-fileInfo {
-  padding: 0 16px;
+:-ms-input-placeholder {
+   color: rgba(119,119,119,0.75);
 }
 
-.UppyGoogleDrive-fileInfo .UppyGoogleDrive-fileThumbnail {
-  width: 50%;
+.Browser-headerBar {
+  height: 50px;
+  line-height: 50px;
+  display: flex;
+  align-items: center;
+  padding-left: 16px;
 }
 
-.UppyGoogleDrive-fileInfo .UppyGoogleDrive-fileIcon {
-  margin-right: 8px;
+.Browser-search {
+  height: 50px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: $zIndex-3;
+  background-color: lighten($color-gray, 40%);
+  transform: translate(0, -50px);
+  transition: all .2s;
+  display: flex;
+  align-items: center;
 }
 
-.UppyGoogleDrive-sidebar label {
-  display: block;
-  margin-bottom: 8px;
-}
+  .Browser-search[aria-hidden=false] {
+    transform: translate(0, 0);
+  }
 
-.UppyGoogleDrive-sidebar input {
-  margin-bottom: 8px;
-  padding: 4px;
+.Browser-search input {
+  flex: 1;
+  background-color: transparent;
+  outline: 0;
+  font-size: 15px;
+  font-weight: 400;
+  line-height: 50px;
+  border: 0;
+  padding: 0 16px;
 }
 
-.UppyGoogleDrive-filter {
-  border: 1px solid #eee;
-}
 
-.UppyGoogleDrive-sortableHeader:hover {
-  background-color: #eee;
+.Browser-searchToggle {
+  @include reset-button();
+  width: 15px;
   cursor: pointer;
-}
-
-.UppyGoogleDrive-fileInfo ul {
-  list-style-type: none;
-  padding: 0;
-}
-
-.UppyGoogleDrive-browserContainer {
-  height: calc(80vh - 40px);
-  overflow: hidden;
-  overflow-y: scroll;
-}
+  color: $color-gray;
+  transition: all .2s;
 
-.UppyGoogleDrive-browser td {
-  cursor: default;
-  max-width: 25%;
-  padding-right: 8px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  width: 25%;
+  &:hover {
+    color: $color-black;
+  }
 }
 
+.Browser-searchClose {
+  @include reset-button();
+  cursor: pointer;
+  width: 12px;
+  color: $color-gray;
+  transition: all .2s;
+  margin-right: 16px;
 
-/** NEW PLUGIN BROWSER STYLES */
-
-.Browser {
-  border: 1px solid #ddd;
-  border-radius: 5px;
-  display: flex;
-  flex-direction: column;
-  font-size: 13px;
-  font-weight: 400;
-  height: 475px;
-  overflow: hidden;
-  width: 718px;
-}
-
-.Browser-user {
-  margin: 16px 0;
+  &:hover {
+    color: $color-black;
+  }
 }
 
 .Browser-userLogout {
@@ -220,64 +300,15 @@
   }
 }
 
-.Browser header {
-  align-items: center;
-  border-bottom: 1px solid #e5e5e5;
-  display: flex;
-  flex-direction: row;
-  height: 65px;
-}
-
-.Browser-body {
-  display: flex;
-  flex: 1;
-}
-
-.Browser-content {
-  display: flex;
+.UppyProvider-breadcrumbs {
   flex: 1;
-  flex-direction: column;
-}
-
-.Browser-search {
-  background-color: #f5f5f5;
-  border: 0;
-  font-size: 15px;
-  font-weight: 400;
-  height: 48px;
-  margin: 0 16px;
-  outline: 0;
-  // padding: 0 16px;
-  width: 100%;
-}
-
-::-webkit-input-placeholder {
-   color: rgba(119,119,119,0.75);
-}
-
-:-moz-placeholder { /* Firefox 18- */
-   color: rgba(119,119,119,0.75);
-}
-
-::-moz-placeholder {  /* Firefox 19+ */
-   color: rgba(119,119,119,0.75);
-}
-
-:-ms-input-placeholder {
-   color: rgba(119,119,119,0.75);
-}
-
-.Browser-subHeader {
-  justify-content: space-between;
-  align-items: center;
-  background-color: #fafafa;
-  display: flex;
-  flex-direction: row;
-  height: 55px;
-  // -webkit-box-shadow: 0px 3px 3px 0px rgba(121,121,121,0.25);
-  // -moz-box-shadow: 0px 3px 3px 0px rgba(121,121,121,0.25);
-  box-shadow: 0px 3px 3px 0px rgba(121,121,121,0.25);
-  z-index: 1000;
+  color: $color-black;
+  font-size: 12px;
+  // line-height: 40px;
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+  margin-left: 16px;
 }
 
 .Browser-breadcrumbs span {
@@ -291,39 +322,76 @@
   font-weight: 500;
 }
 
+// .Browser-subHeader {
+//   display: flex;
+//   justify-content: space-between;
+//   align-items: center;
+//   // background-color: #fafafa;
+//   // flex-direction: row;
+//   // height: 55px;
+//   // box-shadow: 0px 3px 3px 0px rgba(121,121,121,0.25);
+//   z-index: 1000;
+// }
+
+.Browser-body {
+  flex: 1;
+}
+
 .BrowserTable {
+  display: block;
+  width: 100%;
+  height: 100%;
   background-color: white;
-  flex: 1;
+  border-spacing: 0;
+  position: relative;
+}
+
+.Browser-viewType--grid {
+  .BrowserTable tbody {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-around;
+  }
 }
 
 .BrowserTable tbody {
   display: block;
-  height: 300px;
   overflow-x: hidden;
   overflow-y: auto;
-}
-
-.BrowserTable td {
-  cursor: default;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
 }
 
 .BrowserTable-row {
-  border-bottom: 1px solid #eee;
-  height: 50px;
+  // border-bottom: 1px solid #eee;
+  display: block;
+  cursor: pointer;
+  // height: 50px;
 }
 
 .BrowserTable-header {
-  border-bottom: 1px solid #eee;
+  display: block;
+  // border-bottom: 1px solid #eee;
 }
 
-.BrowserTable-header:hover {
-  background-color: #eee;
-}
+  .BrowserTable-header:hover {
+    background-color: $color-gray;
+  }
 
 .BrowserTable-column {
-  color: #666;
+  color: $color-asphalt-gray;
+  line-height: 1.2;
   font-weight: bold;
-  padding: 18px;
+  padding: 17px 16px;
+}
+
+.BrowserTable-column img {
+  vertical-align: text-top;
+  margin-right: 3px;
 }
 
 .BrowserTable-headerColumn {
@@ -339,10 +407,10 @@
   background-color: #fafafa;
 }
 
-.BrowserTable-rowColumn.BrowserTable-column {
-  display: block;
-  width: 708px;
-}
+// .BrowserTable-rowColumn.BrowserTable-column {
+//   display: block;
+//   // width: 708px;
+// }
 
 .nav-active {
   font-weight: bold;