Put border around lists

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._renderLoader()}
+        {this.hasCollection() && this._renderCollectionMetadata()}
-          {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">
-              <table className="sketches-table" summary="table containing all collections">
+              <thead>
-                <thead>
+                <tr>
-                  <tr>
+                  {this._renderFieldHeader('name', 'Name')}
-                    {this._renderFieldHeader('name', 'Name')}
+                  {this._renderFieldHeader('createdAt', 'Date Added')}
-                    {this._renderFieldHeader('createdAt', 'Date Added')}
+                  {this._renderFieldHeader('user', 'Owner')}
-                    {this._renderFieldHeader('user', 'Owner')}
+                  <th scope="col"></th>
-                    <th scope="col"></th>
+                </tr>
-                  </tr>
+              </thead>
-                </thead>
+              <tbody>
-                <tbody>
+                {this.props.collection.items.map(item =>
-                  {this.props.collection.items.map(item =>
+                  (<CollectionItemRow
-                    (<CollectionItemRow
+                    key={item.id}
-                      key={item.id}
+                    item={item}
-                      item={item}
+                    user={this.props.user}
-                      user={this.props.user}
+                    username={this.getUsername()}
-                      username={this.getUsername()}
+                    collection={this.props.collection}
-                      collection={this.props.collection}
+                  />))}
-                    />))}
+              </tbody>
-                </tbody>
+            </table>
-              </table>
-            </div>
           }
           {
             this.state.isAddingSketches && (

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;
+}

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) {

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;

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');
+  }
 }