diff --git a/plugins/woocommerce-admin/client/marketplace/components/footer/footer.scss b/plugins/woocommerce-admin/client/marketplace/components/footer/footer.scss
index 9811fb962a6..5883ad65579 100644
--- a/plugins/woocommerce-admin/client/marketplace/components/footer/footer.scss
+++ b/plugins/woocommerce-admin/client/marketplace/components/footer/footer.scss
@@ -11,7 +11,7 @@
box-sizing: content-box;
max-width: $content-max-width;
margin: auto;
- padding: 48px $content-spacing-large;
+ padding: $content-spacing-xlarge $content-spacing-small;
&-title {
color: $gutenberg-gray-900;
@@ -45,6 +45,10 @@
}
@media screen and (min-width: $breakpoint-medium) {
+ .woocommerce-marketplace__footer {
+ padding: $content-spacing-xlarge $content-spacing-large;
+ }
+
.woocommerce-marketplace__footer-columns {
flex-direction: row;
}
diff --git a/plugins/woocommerce-admin/client/marketplace/components/header-title/header-title.tsx b/plugins/woocommerce-admin/client/marketplace/components/header-title/header-title.tsx
index d1fdf245def..8990968b67e 100644
--- a/plugins/woocommerce-admin/client/marketplace/components/header-title/header-title.tsx
+++ b/plugins/woocommerce-admin/client/marketplace/components/header-title/header-title.tsx
@@ -9,8 +9,8 @@ import { __ } from '@wordpress/i18n';
export default function HeaderTitle() {
return (
-
+
{ __( 'Extensions', 'woocommerce' ) }
-
+
);
}
diff --git a/plugins/woocommerce-admin/client/marketplace/components/header/header.scss b/plugins/woocommerce-admin/client/marketplace/components/header/header.scss
index 3f2927e150a..414d221d835 100644
--- a/plugins/woocommerce-admin/client/marketplace/components/header/header.scss
+++ b/plugins/woocommerce-admin/client/marketplace/components/header/header.scss
@@ -8,7 +8,7 @@
grid-template: 'mktpl-title mktpl-search mktpl-meta' 60px
'mktpl-tabs mktpl-tabs mktpl-tabs' auto / 1fr 320px 36px;
left: 0;
- padding: 10px $content-spacing-large 0;
+ padding: 0 $content-spacing-large;
position: absolute;
top: -60px;
width: 100%;
@@ -21,14 +21,23 @@
'mktpl-search mktpl-search' auto / auto 48px;
padding: 0;
}
+
+ .woocommerce-marketplace__header-title {
+ font-size: 14px;
+ font-weight: 600;
+ margin: 0;
+ padding: 10px 0 0;
+
+ @media (width <= $breakpoint-medium) {
+ padding-left: var(--large-gap);
+ }
+ }
}
.woocommerce-marketplace__header-title {
align-items: center;
align-self: stretch;
display: flex;
- font-size: 16px;
- font-weight: 700;
grid-area: mktpl-title;
line-height: 18px;
@@ -40,9 +49,11 @@
.woocommerce-marketplace__header-meta {
grid-area: mktpl-meta;
justify-self: end;
+ padding-top: 10px;
@media (width <= $breakpoint-medium) {
margin-right: $content-spacing-small;
+ padding: 0;
}
}
@@ -56,13 +67,8 @@
}
.woocommerce-marketplace__search {
- grid-area: mktpl-search;
- background: #f0f0f0;
- border-radius: 2px;
- display: flex;
- height: 40px;
margin-right: $medium-gap;
- padding: 4px 8px 4px 12px;
+ margin-top: 10px;
input[type='search'] {
all: unset;
@@ -73,9 +79,3 @@
margin: $content-spacing-small;
}
}
-
-.woocommerce-marketplace__search-button {
- all: unset;
- cursor: pointer;
-}
-
diff --git a/plugins/woocommerce-admin/client/marketplace/components/header/header.tsx b/plugins/woocommerce-admin/client/marketplace/components/header/header.tsx
index e4e28da5319..8ac0ae91461 100644
--- a/plugins/woocommerce-admin/client/marketplace/components/header/header.tsx
+++ b/plugins/woocommerce-admin/client/marketplace/components/header/header.tsx
@@ -28,10 +28,10 @@ export default function Header( props: HeaderProps ) {
selectedTab={ selectedTab }
setSelectedTab={ setSelectedTab }
/>
+
-
);
}
diff --git a/plugins/woocommerce-admin/client/marketplace/components/product-card/product-card.scss b/plugins/woocommerce-admin/client/marketplace/components/product-card/product-card.scss
index 14dcda880dc..d3ec5dd893c 100644
--- a/plugins/woocommerce-admin/client/marketplace/components/product-card/product-card.scss
+++ b/plugins/woocommerce-admin/client/marketplace/components/product-card/product-card.scss
@@ -4,7 +4,6 @@
&__product-card {
padding: $large-gap;
border-radius: $grid-unit-05 !important;
- margin-top: $large-gap;
&:hover {
outline: 1.5px solid var(--wp-admin-theme-color);
@@ -99,8 +98,9 @@
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
- text-overflow: ellipsis;
+ margin: 0;
overflow: hidden;
+ text-overflow: ellipsis;
}
&__price {
@@ -110,7 +110,7 @@
text-decoration: none !important;
color: $gray-900 !important;
font-style: normal;
- font-weight: 600;
+ font-weight: 500;
line-height: $medium-gap;
}
diff --git a/plugins/woocommerce-admin/client/marketplace/components/product-list-header/product-list-header.scss b/plugins/woocommerce-admin/client/marketplace/components/product-list-header/product-list-header.scss
index 76b21aae5f5..45b3aed3408 100644
--- a/plugins/woocommerce-admin/client/marketplace/components/product-list-header/product-list-header.scss
+++ b/plugins/woocommerce-admin/client/marketplace/components/product-list-header/product-list-header.scss
@@ -13,6 +13,7 @@
font-size: 20px;
font-style: normal;
font-weight: 500;
+ margin-bottom: $medium-gap;
margin-top: $small-gap;
}
diff --git a/plugins/woocommerce-admin/client/marketplace/components/search/search.scss b/plugins/woocommerce-admin/client/marketplace/components/search/search.scss
index 323f3dc8160..d65c24f36b1 100644
--- a/plugins/woocommerce-admin/client/marketplace/components/search/search.scss
+++ b/plugins/woocommerce-admin/client/marketplace/components/search/search.scss
@@ -2,7 +2,7 @@
.woocommerce-marketplace__search {
grid-area: mktpl-search;
- background: $gray-0;
+ background: $gutenberg-gray-100;
border-radius: 2px;
display: flex;
height: 40px;
@@ -13,6 +13,11 @@
flex-grow: 1;
}
+ &:focus-within {
+ background: #fff;
+ border: 1.5px solid var(--wp-admin-theme-color, #3858e9);
+ }
+
@media (width <= $breakpoint-medium) {
margin: $content-spacing-small;
}
diff --git a/plugins/woocommerce-admin/client/marketplace/components/tabs/tabs.scss b/plugins/woocommerce-admin/client/marketplace/components/tabs/tabs.scss
index 0e843a4ecdd..dd8a98363b0 100644
--- a/plugins/woocommerce-admin/client/marketplace/components/tabs/tabs.scss
+++ b/plugins/woocommerce-admin/client/marketplace/components/tabs/tabs.scss
@@ -16,7 +16,6 @@
font-weight: 600;
height: 48px;
line-height: 16px;
- margin: 0 1.5rem 0 0;
padding: 0;
&:focus:not(:disabled) {
diff --git a/plugins/woocommerce-admin/client/marketplace/stylesheets/_variables.scss b/plugins/woocommerce-admin/client/marketplace/stylesheets/_variables.scss
index 251db7b91c0..8b706adf973 100644
--- a/plugins/woocommerce-admin/client/marketplace/stylesheets/_variables.scss
+++ b/plugins/woocommerce-admin/client/marketplace/stylesheets/_variables.scss
@@ -23,7 +23,7 @@ $breakpoint-xlarge: 1500px;
$breakpoint-huge: 1920px;
// Header
-$header-height-desktop: 89px;
+$header-height-desktop: 96px;
$header-height-mobile: 129px;
// Colours