From ff86e45e0a98017a838f2558d9b66436318e8b5a Mon Sep 17 00:00:00 2001
From: Andrew Nicolaou <me@andrewnicolaou.co.uk>
Date: Sun, 10 Nov 2019 19:35:44 +0100
Subject: [PATCH] Put border around lists

---
 client/modules/User/components/Collection.jsx | 56 +++++++++----------
 client/styles/components/_collection.scss     | 27 +++++++--
 .../styles/components/_dashboard-header.scss  |  5 --
 client/styles/components/_sketch-list.scss    |  7 ---
 client/styles/layout/_dashboard.scss          |  4 ++
 5 files changed, 52 insertions(+), 47 deletions(-)

diff --git a/client/modules/User/components/Collection.jsx b/client/modules/User/components/Collection.jsx
index 68b99f30..31858181 100644
--- a/client/modules/User/components/Collection.jsx
+++ b/client/modules/User/components/Collection.jsx
@@ -354,8 +354,6 @@ class Collection extends React.Component {
               }
             </h2>
 
-            <p className="collection-metadata__user">By {owner.username}</p>
-
             <p className="collection-metadata__description">
               {
                 this.isOwner() ?
@@ -368,6 +366,8 @@ class Collection extends React.Component {
               }
             </p>
 
+            <p className="collection-metadata__user">Collection by {owner.username}</p>
+
             <p className="collection-metadata__user">{items.length} sketch{items.length === 1 ? '' : 'es'}</p>
           </div>
 
@@ -404,7 +404,7 @@ class Collection extends React.Component {
     const hasCollectionItems = this.props.collection != null && this.props.collection.items.length > 0;
 
     if (!isLoading && !hasCollectionItems) {
-      return (<p className="sketches-table__empty">No sketches in collection</p>);
+      return (<p className="collection-empty-message">No sketches in collection</p>);
     }
     return null;
   }
@@ -434,37 +434,35 @@ class Collection extends React.Component {
     const title = this.hasCollection() ? this.getCollectionName() : null;
 
     return (
-      <section className="collection-container">
+      <section className="collection-container" data-has-items={this.hasCollectionItems() ? 'true' : 'false'}>
         <Helmet>
           <title>{this.getTitle()}</title>
         </Helmet>
-        <div className="">
-          {this._renderLoader()}
-          {this.hasCollection() && this._renderCollectionMetadata()}
+        {this._renderLoader()}
+        {this.hasCollection() && this._renderCollectionMetadata()}
+        <div className="collection-table-wrapper">
           {this._renderEmptyTable()}
           {this.hasCollectionItems() &&
-            <div className="collection-table-wrapper">
-              <table className="sketches-table" summary="table containing all collections">
-                <thead>
-                  <tr>
-                    {this._renderFieldHeader('name', 'Name')}
-                    {this._renderFieldHeader('createdAt', 'Date Added')}
-                    {this._renderFieldHeader('user', 'Owner')}
-                    <th scope="col"></th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {this.props.collection.items.map(item =>
-                    (<CollectionItemRow
-                      key={item.id}
-                      item={item}
-                      user={this.props.user}
-                      username={this.getUsername()}
-                      collection={this.props.collection}
-                    />))}
-                </tbody>
-              </table>
-            </div>
+            <table className="sketches-table" summary="table containing all collections">
+              <thead>
+                <tr>
+                  {this._renderFieldHeader('name', 'Name')}
+                  {this._renderFieldHeader('createdAt', 'Date Added')}
+                  {this._renderFieldHeader('user', 'Owner')}
+                  <th scope="col"></th>
+                </tr>
+              </thead>
+              <tbody>
+                {this.props.collection.items.map(item =>
+                  (<CollectionItemRow
+                    key={item.id}
+                    item={item}
+                    user={this.props.user}
+                    username={this.getUsername()}
+                    collection={this.props.collection}
+                  />))}
+              </tbody>
+            </table>
           }
           {
             this.state.isAddingSketches && (
diff --git a/client/styles/components/_collection.scss b/client/styles/components/_collection.scss
index 88e1fa53..28c7ce14 100644
--- a/client/styles/components/_collection.scss
+++ b/client/styles/components/_collection.scss
@@ -1,15 +1,11 @@
 .collection-container {
-
+  width: 1012px;
+  margin: 0 auto;
 }
 
 .collection-metadata {
   margin: 0px #{56 / $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');
-  }
 }
 
 .collection-metadata__columns {
@@ -109,3 +105,22 @@
   @extend %primary-button;
   flex-grow: 0;
 }
+
+.collection-table-wrapper {
+  min-height: 100%;
+
+  @include themify() {
+    border: 1px solid getThemifyVariable('modal-border-color');
+  }
+}
+
+[data-has-items=false] .collection-table-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.collection-empty-message {
+  text-align: center;
+  font-size: #{16 / $base-font-size}rem;
+}
diff --git a/client/styles/components/_dashboard-header.scss b/client/styles/components/_dashboard-header.scss
index 65fb367b..ebb9c312 100644
--- a/client/styles/components/_dashboard-header.scss
+++ b/client/styles/components/_dashboard-header.scss
@@ -72,11 +72,6 @@
   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 > *:not(:first-child) {
diff --git a/client/styles/components/_sketch-list.scss b/client/styles/components/_sketch-list.scss
index a78ec308..8367517a 100644
--- a/client/styles/components/_sketch-list.scss
+++ b/client/styles/components/_sketch-list.scss
@@ -95,9 +95,6 @@
   font-weight: normal;
 }
 
-.sketches-table__row--is-add-mode {
-  cursor: pointer;
-}
 
 .sketch-list__dropdown-button {
   width:#{25 / $base-font-size}rem;
@@ -124,10 +121,6 @@
   right: calc(100% - 26px);
 }
 
-.sketch-list__action-option {
-
-}
-
 .sketches-table__empty {
   text-align: center;
   font-size: #{16 / $base-font-size}rem;
diff --git a/client/styles/layout/_dashboard.scss b/client/styles/layout/_dashboard.scss
index 74a94d23..850537a9 100644
--- a/client/styles/layout/_dashboard.scss
+++ b/client/styles/layout/_dashboard.scss
@@ -14,4 +14,8 @@
   flex-direction: column;
   flex: 1;
   overflow: hidden;
+
+  @include themify() {
+    border: 1px solid getThemifyVariable('modal-border-color');
+  }
 }