From b751353243bf796d4fff9f1e246c5cc72d6cc3fe Mon Sep 17 00:00:00 2001
From: Cassie Tarakajian <ctarakajian@gmail.com>
Date: Thu, 14 Nov 2019 16:01:33 -0500
Subject: [PATCH 1/2] collections: add styling changes for dashboard pages

---
 client/modules/User/pages/DashboardView.jsx     |  4 ++--
 client/styles/components/_asset-size.scss       |  1 +
 client/styles/components/_dashboard-header.scss | 10 ++++++++--
 client/styles/layout/_dashboard.scss            |  3 +++
 4 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/client/modules/User/pages/DashboardView.jsx b/client/modules/User/pages/DashboardView.jsx
index af9c8752..9ba5a945 100644
--- a/client/modules/User/pages/DashboardView.jsx
+++ b/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>
         );
     }
diff --git a/client/styles/components/_asset-size.scss b/client/styles/components/_asset-size.scss
index 5793ef2b..5e6d4d00 100644
--- a/client/styles/components/_asset-size.scss
+++ b/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 {
diff --git a/client/styles/components/_dashboard-header.scss b/client/styles/components/_dashboard-header.scss
index ebb9c312..a42a510c 100644
--- a/client/styles/components/_dashboard-header.scss
+++ b/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) {
diff --git a/client/styles/layout/_dashboard.scss b/client/styles/layout/_dashboard.scss
index 850537a9..97e86737 100644
--- a/client/styles/layout/_dashboard.scss
+++ b/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');

From 00b788f90bd01210ed35498b2defaa0440dce86f Mon Sep 17 00:00:00 2001
From: Cassie Tarakajian <ctarakajian@gmail.com>
Date: Sun, 24 Nov 2019 14:58:16 -0500
Subject: [PATCH 2/2] update collection view, update nav list so that 'my
 collections' doesn't overflow

---
 client/styles/components/_collection.scss | 24 +++++++++++------------
 client/styles/components/_nav.scss        |  2 +-
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/client/styles/components/_collection.scss b/client/styles/components/_collection.scss
index b280109a..d3f0210c 100644
--- a/client/styles/components/_collection.scss
+++ b/client/styles/components/_collection.scss
@@ -1,11 +1,14 @@
 .collection-container {
-  width: 1012px;
-  margin: 0 auto;
+  padding: #{24 / $base-font-size}rem #{66 / $base-font-size}rem;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
 }
 
 .collection-metadata {
-  margin: 0px #{56 / $base-font-size}rem;
-  padding: #{24 / $base-font-size}rem 0;
+  width: #{1012 / $base-font-size}rem;
+  margin: 0 auto;
+  margin-bottom: #{24 / $base-font-size}rem;
 }
 
 .collection-metadata__columns {
@@ -30,7 +33,7 @@
 }
 
 .collection-metadata__name {
-  padding: #{8 / $base-font-size}rem 0;
+  // padding: #{8 / $base-font-size}rem 0;
 }
 
 .collection-metadata__name .editable-input__label span {
@@ -57,7 +60,7 @@
 }
 
 .collection-metadata__description {
-  padding-top: #{8 / $base-font-size}rem;
+  margin-top: #{8 / $base-font-size}rem;
   text-align: left;
   font-size: 14px;
 }
@@ -74,10 +77,6 @@
   width: 100%;
 }
 
-.collection-table-wrapper {
-  margin: #{28 / $base-font-size}rem #{56 / $base-font-size}rem;
-}
-
 .collection-add-sketch {
   min-width: #{600 / $base-font-size}rem;
   overflow: scroll;
@@ -106,8 +105,9 @@
 }
 
 .collection-table-wrapper {
-  min-height: 100%;
-
+  width: #{1012 / $base-font-size}rem;
+  margin: 0 auto;
+  flex: 1;
   @include themify() {
     border: 1px solid getThemifyVariable('modal-border-color');
   }
diff --git a/client/styles/components/_nav.scss b/client/styles/components/_nav.scss
index 65c243a5..7f5a45ac 100644
--- a/client/styles/components/_nav.scss
+++ b/client/styles/components/_nav.scss
@@ -109,7 +109,7 @@
   padding-right: #{20 / $base-font-size}rem;
 
   & .nav__dropdown {
-    width: #{121 / $base-font-size}rem;
+    width: #{122 / $base-font-size}rem;
   }
 }