Address PR comments.

Automattic · Dec 10, 2024 · cf57e33 · cf57e33
1 parent ea72921
commit cf57e33
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 18 deletions.
diff --git a/client/a8c-for-agencies/components/a4a-migration-offer-v3/index.tsx b/client/a8c-for-agencies/components/a4a-migration-offer-v3/index.tsx
@@ -110,7 +110,7 @@ const MigrationOfferV3 = ( { isExpanded, onToggleView }: Props ) => {
 				) }
 			</div>
 
-			<Button className="a4a-migration-offer-v3__view-toggle" onClick={ onToggleView }>
+			<Button className="a4a-migration-offer-v3__view-toggle">
 				<Icon icon={ chevronDown } size={ 24 } />
 			</Button>
 		</div>

diff --git a/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/hero-section/style.scss b/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/hero-section/style.scss
@@ -12,7 +12,7 @@ $tab-background-selected: var(--color-surface);
 	flex-direction: column;
 	justify-content: space-between;
 	gap: 39px;
-	transition: height 200ms ease-out;
+	transition: height .35s ease-out;
 
 	&:not(.is-compact) {
 		height: 389px;
@@ -78,41 +78,43 @@ $tab-background-selected: var(--color-surface);
 	margin: 0;
 	padding: 0;
 	height: 74px;
-
-	> li {
-		flex-grow: 1;
-	}
-
-
-	li:first-child .hosting-v3-hero-section__tab.section-nav-tab {
-		border-start-start-radius: 4px;
-	}
-
-	li:last-child .hosting-v3-hero-section__tab.section-nav-tab {
-		border-start-end-radius: 4px;
-	}
 }
 
 .hosting-v3-hero-section__tab.section-nav-tab {
+	flex-grow: 1;
 	border-bottom: none;
 
 	&,
 	&:hover:not(.is-selected) {
 		background: $tab-background;
 	}
 
-	&.is-selected {
+	&.is-selected,
+	&.is-selected .section-nav-tab__link {
 		background: var(--color-surface);
 
 		.section-nav-tab__link:hover {
 			background: none
 		}
 	}
+
+	&:first-child {
+		border-start-start-radius: 4px;
+	}
+
+	&:last-child {
+		border-start-end-radius: 4px;
+	}
 }
 
 .hosting-v3__nav-item-label {
-	@include a4a-font-heading-lg;
+	@include a4a-font-body-md($font-weight: 500);
 	color: var( --color-text );
+	text-align: center;
+
+	@include break-medium {
+		@include a4a-font-heading-lg;
+	}
 }
 
 .hosting-v3__nav-item-subtitle {

diff --git a/.../a8c-for-agencies/sections/marketplace/hosting-overview-v3/hooks/use-compact-on-scroll.ts b/.../a8c-for-agencies/sections/marketplace/hosting-overview-v3/hooks/use-compact-on-scroll.ts
@@ -2,7 +2,7 @@ import { useCallback, useRef, useState } from 'react';
 
 const SCROLL_THRESHOLD_PERCENTAGE = 0.2;
 const SCROLL_THRESHOLD_NORMAL_BUFFER = 5;
-const SCROLL_THRESHOLD_COMPACT_BUFFER = 20;
+const SCROLL_THRESHOLD_COMPACT_BUFFER = 15;
 
 export default function useCompactOnScroll() {
 	const [ isCompact, setIsCompact ] = useState( false );