Style DashboardActions below tabs

client/modules/IDE/components/AssetList.jsx

@@ -40,13 +40,9 @@ class AssetList extends React.Component {
 
   render() {
     const username = this.props.username !== undefined ? this.props.username : this.props.user.username;
-    const { assetList, totalSize } = this.props;
+    const { assetList } = this.props;
     return (
       <div className="asset-table-container">
-        {/* Eventually, this copy should be Total / 250 MB Used */}
-        {this.hasAssets() &&
-          <p className="asset-table__total">{`${prettyBytes(totalSize)} Total`}</p>
-        }
         <Helmet>
           <title>{this.getAssetsTitle()}</title>
         </Helmet>
@@ -93,7 +89,6 @@ AssetList.propTypes = {
     sketchName: PropTypes.string.isRequired,
     sketchId: PropTypes.string.isRequired
   })).isRequired,
-  totalSize: PropTypes.number.isRequired,
   getAssets: PropTypes.func.isRequired,
   loading: PropTypes.bool.isRequired
 };

client/modules/IDE/components/AssetSize.jsx

@@ -0,0 +1,46 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { connect } from 'react-redux';
+import prettyBytes from 'pretty-bytes';
+
+const MB_TO_B = 1000 * 1000;
+const MAX_SIZE_B = 250 * MB_TO_B;
+
+const formatPercent = (percent) => {
+  const percentUsed = percent * 100;
+  if (percentUsed < 1) {
+    return '0%';
+  }
+
+  return `${Math.round(percentUsed)}%`;
+};
+
+/* Eventually, this copy should be Total / 250 MB Used */
+const AssetSize = ({ totalSize }) => {
+  if (!totalSize) {
+    return null;
+  }
+
+  const currentSize = prettyBytes(totalSize);
+  const sizeLimit = prettyBytes(MAX_SIZE_B);
+  const percent = formatPercent(totalSize / MAX_SIZE_B);
+
+  return (
+    <div>
+      <p className="">{`${currentSize} used / ${sizeLimit} max (${percent})`}</p>
+    </div>
+  );
+};
+
+AssetSize.propTypes = {
+  totalSize: PropTypes.number.isRequired,
+};
+
+function mapStateToProps(state) {
+  return {
+    user: state.user,
+    totalSize: state.assets.totalSize,
+  };
+}
+
+export default connect(mapStateToProps)(AssetSize);

client/modules/User/pages/DashboardView.jsx

@@ -8,6 +8,7 @@ import Nav from '../../../components/Nav';
 import Overlay from '../../App/components/Overlay';
 
 import AssetList from '../../IDE/components/AssetList';
+import AssetSize from '../../IDE/components/AssetSize';
 import CollectionList from '../../IDE/components/CollectionList';
 import SketchList from '../../IDE/components/SketchList';
 import SketchSearchbar from '../../IDE/components/Searchbar';
@@ -72,21 +73,17 @@ class DashboardView extends React.Component {
   }
 
   renderActionButton(tabKey, username) {
-    if (!this.isOwner()) {
-      return null;
-    }
-
     switch (tabKey) {
       case TabKey.assets:
-        return null;
+        return this.isOwner() && <AssetSize />;
       case TabKey.collections:
-        return <Link className="dashboard__action-button" to={`/${username}/collections/create`}>Create collection</Link>;
+        return this.isOwner() && <Link className="dashboard__action-button" to={`/${username}/collections/create`}>Create collection</Link>;
       case TabKey.sketches:
       default:
         return (
           <React.Fragment>
             <SketchSearchbar />
-            <Link className="dashboard__action-button" to="/">New sketch</Link>
+            {this.isOwner() && <Link className="dashboard__action-button" to="/">New sketch</Link>}
           </React.Fragment>
         );
     }
@@ -108,6 +105,7 @@ class DashboardView extends React.Component {
     const currentTab = this.selectedTabKey();
     const isOwner = this.isOwner();
     const { username } = this.props.params;
+    const actions = this.renderActionButton(currentTab, username);
 
     return (
       <div className="dashboard">
@@ -118,9 +116,11 @@ class DashboardView extends React.Component {
             <h2 className="dashboard-header__header__title">{this.ownerName()}</h2>
             <div className="dashboard-header__nav">
               <DashboardTabSwitcher currentTab={currentTab} isOwner={isOwner} username={username} />
+              {actions &&
                 <div className="dashboard-header__actions">
-                {this.renderActionButton(currentTab, username)}
+                  {actions}
                 </div>
+              }
             </div>
           </div>
 
@@ -145,7 +145,7 @@ function mapStateToProps(state) {
   return {
     previousPath: state.ide.previousPath,
     user: state.user,
-    theme: state.preferences.theme
+    theme: state.preferences.theme,
   };
 }
 

client/styles/components/_dashboard-header.scss

@@ -22,7 +22,7 @@
 .dashboard-header__tabs {
   display: flex;
   padding-top: #{24 / $base-font-size}rem;
-  margin-bottom: #{24 / $base-font-size}rem;
+  
   @include themify() {
     border-bottom: 1px solid getThemifyVariable('inactive-text-color');
   }
@@ -65,17 +65,21 @@
 }
 
 .dashboard-header__nav {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
 }
 
 .dashboard-header__actions {
   display: flex;
   align-items: center;
+  margin-bottom: #{24 / $base-font-size}rem;
+  padding: #{24 / $base-font-size}rem #{10 / $base-font-size}rem;
+
+  @include themify() {
+    background-color: getThemifyVariable('modal-background-color');
+    border-bottom: 1px dotted getThemifyVariable('modal-border-color');
+  }
 }
 
-.dashboard-header__actions > * {
+.dashboard-header__actions > *:not(:first-child) {
   margin-left: #{15 / $base-font-size}rem;
 }
 

client/styles/components/_searchbar.scss

@@ -1,7 +1,6 @@
 .searchbar {
   position: relative;
   display: flex;
-  padding-left: #{17 / $base-font-size}rem;
 }
 
 .searchbar__input {
@@ -58,7 +57,7 @@ button[type="submit"].searchbar__button {
   align-self: center;
   position: absolute;
   padding: #{3 / $base-font-size}rem #{4 / $base-font-size}rem;
-  left: #{216 / $base-font-size}rem;;
+  right: #{7 / $base-font-size}rem;
   @include themify() {
     color: getThemifyVariable('primary-text-color');
     background-color: getThemifyVariable('search-clear-background-color');