Styling tweaks

Automattic · Feb 6, 2025 · 243e94b · 243e94b
1 parent 25a8285
commit 243e94b
Showing 1 changed file with 66 additions and 57 deletions.
diff --git a/projects/packages/my-jetpack/_inc/components/products-table-view/style.scss b/projects/packages/my-jetpack/_inc/components/products-table-view/style.scss
@@ -2,40 +2,73 @@
 @import '@wordpress/components/build-style/style.css';
 
 :root {
-    --font-size: 13px;
     --tag-color: #DAFFDC;
 }
 
-button.dataviews-view-list__item {
-    display: none;
-}
-
-svg.table-view-icon {
-    width: 52px;
-    height: 52px;
-}
-
-button[aria-controls="dataviews-view-config-dropdown-0"] {
-    display: none;
-}
-
-div.dataviews__view-actions {
-    padding-left: 24px;
-    padding-right: 24px;
-    justify-content: flex-start;
-    align-items: center;
-}
-
-div.dataviews-filters__container {
-    padding-left: 24px;
-}
-
-button.components-button.is-secondary {
-    padding: calc( var(--spacing-base) / 2 ) var(--spacing-base) !important;
-    font-weight: normal;
+div.dataviews-wrapper {
+    button.dataviews-view-list__item {
+        display: none;
+    }
 
-    span {
-        font-size: var(--font-size);
+    div.dataviews-filters__container {
+        padding-left: 24px;
+    }
+
+    svg.table-view-icon {
+        width: 52px;
+        height: 52px;
+    }
+
+    button[aria-controls="dataviews-view-config-dropdown-0"] {
+        display: none;
+    }  
+
+    div.dataviews__view-actions {
+        padding-left: 24px;
+        padding-right: 24px;
+        justify-content: flex-start;
+        align-items: center;
+    }
+
+    button.components-button.is-secondary {
+        padding: calc( var(--spacing-base) / 2 ) var(--spacing-base);
+        font-weight: normal;
+    }
+
+    div.components-base-control__field {
+        margin-bottom: 0;
+    }
+
+    div.components-toggle-group-control {
+        padding: 0;
+        min-height: 32px;
+    }
+
+    div.dataviews-title-field {
+        font-size: var(--font-title-small);
+    }
+
+    span.dataviews-view-list__field-value {
+        font-size: var(--font-body-small);
+    }
+
+    div.dataviews-view-list {
+        div[role="row"] {
+            border: none;
+
+            .dataviews-view-list__fields {
+                justify-content: space-between;
+            }
+
+            &:not(.is-selected).is-hovered,
+            &:not(.is-selected):hover {
+                background-color: transparent;
+
+                .dataviews-view-list__fields {
+                    color: #757575;
+                }
+            }
+        }
     }
 }
 
@@ -45,32 +78,8 @@ div.dataviews-filters__search-widget-listitem {
     }
 }
 
-div.components-base-control__field {
-    margin-bottom: 0;
-}
-
-div.components-toggle-group-control {
-    padding: 0;
-    min-height: 32px;
-}
-
-div.dataviews-view-list {
-    div[role="row"] {
-        border: none;
-
-        .dataviews-view-list__fields {
-            justify-content: space-between;
-        }
-
-        &:not(.is-selected).is-hovered,
-        &:not(.is-selected):hover {
-            background-color: transparent;
-
-            .dataviews-view-list__fields {
-                color: #757575;
-            }
-        }
-    }
+span.dataviews-filters__summary-filter-text-value {
+    text-transform: capitalize;
 }
 
 div.dataviews-filters__search-widget-listitem:hover,
@@ -88,4 +97,4 @@ div.dataviews-filters__summary-chip-container div.dataviews-filters__summary-chi
 div.dataviews-filters__summary-chip-container div.dataviews-filters__summary-chip.has-values:hover,
 div.dataviews-filters__summary-chip-container button.dataviews-filters__summary-chip-remove.has-values:hover {
     background-color: var(--tag-color);
-}
+}