diff --git a/packages/dataviews/src/dataviews.js b/packages/dataviews/src/dataviews.js
index 13397242953b7..9e7b45d04ef87 100644
--- a/packages/dataviews/src/dataviews.js
+++ b/packages/dataviews/src/dataviews.js
@@ -49,8 +49,11 @@ export default function DataViews( {
}, [ fields ] );
return (
-
-
+
+
{ search && (
div {
@@ -10,13 +9,18 @@
}
}
+.dataviews__filters-view-actions {
+ padding: $grid-unit-15 $grid-unit-40;
+}
+
.dataviews-pagination {
margin-top: auto;
position: sticky;
bottom: 0;
background-color: $white;
- padding: $grid-unit-20 0;
- border-top: $border-width solid $gray-200;
+ padding: $grid-unit-15 $grid-unit-40;
+ border-top: $border-width solid $gray-100;
+ color: $gray-700;
}
.dataviews-filters-options {
@@ -29,9 +33,12 @@
border-color: inherit;
border-collapse: collapse;
position: relative;
+ color: $gray-700;
a {
text-decoration: none;
+ color: $gray-900;
+ font-weight: 500;
}
th {
text-align: left;
@@ -42,6 +49,7 @@
td,
th {
padding: $grid-unit-15;
+ min-width: 160px;
&[data-field-id="actions"] {
text-align: right;
}
@@ -49,6 +57,16 @@
tr {
border-bottom: 1px solid $gray-100;
+ td:first-child,
+ th:first-child {
+ padding-left: $grid-unit-40;
+ }
+
+ td:last-child,
+ th:last-child {
+ padding-right: $grid-unit-40;
+ }
+
&:last-child {
border-bottom: 0;
}
@@ -59,9 +77,12 @@
}
th {
position: sticky;
- top: - #{$grid-unit-40}; // Offset the container padding
- background-color: $white;
- box-shadow: inset 0 -#{$border-width} 0 $gray-200;
+ top: -1px;
+ background-color: lighten($gray-100, 4%);
+ box-shadow: inset 0 -#{$border-width} 0 $gray-100;
+ border-top: 1px solid $gray-100;
+ padding-top: $grid-unit-05;
+ padding-bottom: $grid-unit-05;
}
}
}
@@ -69,6 +90,7 @@
.dataviews-grid-view {
margin-bottom: $grid-unit-30;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
+ padding: 0 $grid-unit-40;
@include break-xlarge() {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important; // Todo: eliminate !important dependency
@@ -128,9 +150,14 @@
}
.dataviews-list-view {
+ margin: 0;
+
li {
border-bottom: $border-width solid $gray-100;
margin: 0;
+ &:first-child {
+ border-top: $border-width solid $gray-100;
+ }
&:last-child {
border-bottom: 0;
}
@@ -210,3 +237,8 @@
.dataviews-action-modal {
z-index: z-index(".dataviews-action-modal");
}
+
+.dataviews-no-results,
+.dataviews-loading {
+ padding: 0 $grid-unit-40;
+}
diff --git a/packages/dataviews/src/view-table.js b/packages/dataviews/src/view-table.js
index dece8a55107c0..943e0fc8b10f9 100644
--- a/packages/dataviews/src/view-table.js
+++ b/packages/dataviews/src/view-table.js
@@ -122,6 +122,7 @@ function HeaderMenu( { dataView, header } ) {
iconPosition="right"
text={ text }
style={ { padding: 0 } }
+ size="compact"
/>
}
>
@@ -543,7 +544,11 @@ function ViewTable( {
const hasRows = !! rows?.length;
if ( isLoading ) {
// TODO:Add spinner or progress bar..
- return { __( 'Loading' ) }
;
+ return (
+
+
{ __( 'Loading' ) }
+
+ );
}
return (
@@ -607,7 +612,11 @@ function ViewTable( {
) }
- { ! hasRows &&
{ __( 'no results' ) }
}
+ { ! hasRows && (
+
+
{ __( 'No results' ) }
+
+ ) }
);
}
diff --git a/packages/edit-site/src/components/page-pages/style.scss b/packages/edit-site/src/components/page-pages/style.scss
index fde960ca1a72c..933fdadb8d070 100644
--- a/packages/edit-site/src/components/page-pages/style.scss
+++ b/packages/edit-site/src/components/page-pages/style.scss
@@ -1,3 +1,5 @@
.edit-site-page-pages__featured-image {
- border-radius: $radius-block-ui;
+ border-radius: $grid-unit-05;
+ width: $grid-unit-40;
+ height: $grid-unit-40;
}
diff --git a/packages/edit-site/src/components/page/header.js b/packages/edit-site/src/components/page/header.js
index 06de80c25685b..274fd395a16f1 100644
--- a/packages/edit-site/src/components/page/header.js
+++ b/packages/edit-site/src/components/page/header.js
@@ -19,7 +19,8 @@ export default function Header( { title, subTitle, actions } ) {
{ title }
diff --git a/packages/edit-site/src/components/page/style.scss b/packages/edit-site/src/components/page/style.scss
index 8da7df8e0385b..72ecbb4e2b7d7 100644
--- a/packages/edit-site/src/components/page/style.scss
+++ b/packages/edit-site/src/components/page/style.scss
@@ -12,8 +12,8 @@
}
.edit-site-page-header {
- padding: 0 $grid-unit-40;
- min-height: $header-height;
+ padding: $grid-unit-20 $grid-unit-40;
+ min-height: $grid-unit * 9;
border-bottom: 1px solid $gray-100;
background: $white;
position: sticky;