collections: add styling changes for dashboard pages

client/modules/User/pages/DashboardView.jsx

@@ -79,17 +79,17 @@ class DashboardView extends React.Component {
       case TabKey.collections:
         return this.isOwner() && (
           <React.Fragment>
-            <CollectionSearchbar />
             <Link className="dashboard__action-button" to={`/${username}/collections/create`}>
               Create collection
             </Link>
+            <CollectionSearchbar />
           </React.Fragment>);
       case TabKey.sketches:
       default:
         return (
           <React.Fragment>
-            <SketchSearchbar />
             {this.isOwner() && <Link className="dashboard__action-button" to="/">New sketch</Link>}
+            <SketchSearchbar />
           </React.Fragment>
         );
     }

client/styles/components/_asset-size.scss

@@ -1,5 +1,6 @@
 .asset-size {
   font-size: #{14 / $base-font-size}rem;
+  margin-bottom: #{18 / $base-font-size}rem;
 }
 
 .asset-size-bar {

client/styles/components/_dashboard-header.scss

@@ -7,6 +7,12 @@
   flex-direction:column;
 }
 
+.dashboard-header__header {
+  max-width: #{1012 / $base-font-size}rem;
+  margin: 0 auto;
+  width: 100%;
+}
+
 .dashboard-header--no-vertical-padding {
   padding: 0 66px;
 }
@@ -70,8 +76,8 @@
 .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;
+  padding: #{24 / $base-font-size}rem 0;
+  justify-content: space-between;
 }
 
 .dashboard-header__actions > *:not(:first-child) {

client/styles/layout/_dashboard.scss

@@ -14,6 +14,9 @@
   flex-direction: column;
   flex: 1;
   overflow: hidden;
+  max-width: #{1012 / $base-font-size}rem;
+  margin: 0 auto;
+  width: 100%;
 
   @include themify() {
     border: 1px solid getThemifyVariable('modal-border-color');