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

By {owner.username}

-

{ this.isOwner() ? @@ -368,6 +366,8 @@ class Collection extends React.Component { }

+

Collection by {owner.username}

+

{items.length} sketch{items.length === 1 ? '' : 'es'}

@@ -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 (

No sketches in collection

); + return (

No sketches in collection

); } return null; } @@ -434,37 +434,35 @@ class Collection extends React.Component { const title = this.hasCollection() ? this.getCollectionName() : null; return ( -
+
{this.getTitle()} -
- {this._renderLoader()} - {this.hasCollection() && this._renderCollectionMetadata()} + {this._renderLoader()} + {this.hasCollection() && this._renderCollectionMetadata()} +
{this._renderEmptyTable()} {this.hasCollectionItems() && -
- - - - {this._renderFieldHeader('name', 'Name')} - {this._renderFieldHeader('createdAt', 'Date Added')} - {this._renderFieldHeader('user', 'Owner')} - - - - - {this.props.collection.items.map(item => - ())} - -
-
+ + + + {this._renderFieldHeader('name', 'Name')} + {this._renderFieldHeader('createdAt', 'Date Added')} + {this._renderFieldHeader('user', 'Owner')} + + + + + {this.props.collection.items.map(item => + ())} + +
} { 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'); + } }