Merge pull request #30464 from woocommerce/update/restyle-tab-bar

Restyle Marketplace tab bar

assets/css/admin.scss

@@ -29,7 +29,6 @@
 		display: flex;
 		flex-direction: column;
 		justify-content: center;
-		margin-bottom: 32px;
 		min-height: 216px;
 		padding: 24px;
 		width: 100%;
@@ -81,6 +80,57 @@
 		}
 	}
 
+	.top-bar {
+		background: #fff;
+		box-shadow: inset 0 -1px 0 #ccc;
+		display: block;
+		margin: 0 0 16px;
+
+		@media only screen and ( min-width: 768px ) {
+			margin-bottom: 24px;
+		}
+
+		ul {
+			background: #fff;
+			box-shadow: inset 0 -1px 0 #ccc;
+			display: flex;
+			justify-content: left;
+			margin: 0 auto;
+			max-width: 1056px;
+			width: 100%;
+			overflow-x: scroll;
+
+			@media only screen and ( min-width: 1100px ) {
+				justify-content: center;
+			}
+
+			li {
+				font-weight: 600;
+				font-size: 14px;
+				line-height: 20px;
+				margin: 0;
+			}
+
+			a,
+			a:visited,
+			a:hover,
+			a:focus {
+				border: none;
+				box-shadow: none;
+				color: #1e1e1e;
+				display: inline-block;
+				text-decoration: none;
+				outline: none;
+				padding: 20px 12px;
+				white-space: nowrap;
+
+				&.current {
+					box-shadow: inset 0px -3px 0px #3171a6, inset 0px -1px 0px #ccc;
+				}
+			}
+		}
+	}
+
 	h1.search-form-title {
 		clear: left;
 		padding: 0;

includes/admin/views/html-admin-page-addons.php

@@ -34,6 +34,20 @@ if ( ! defined( 'ABSPATH' ) ) {
 		</form>
 	</div>
 
+	<div class="top-bar">
+			<ul>
+				<?php foreach ( $sections as $section ) : ?>
+					<li>
+						<a
+							class="<?php echo $current_section === $section->slug ? 'current' : ''; ?>"
+							href="<?php echo esc_url( admin_url( 'admin.php?page=wc-addons&section=' . esc_attr( $section->slug ) ) ); ?>">
+							<?php echo esc_html( $section->label ); ?>
+						</a>
+					</li>
+				<?php endforeach; ?>
+			</ul>
+		</div>
+
 	<div class="wp-header-end"></div>
 
 	<div class="wrap">
@@ -45,7 +59,6 @@ if ( ! defined( 'ABSPATH' ) ) {
 				</h1>
 			<?php endif; ?>
 
-
 			<?php if ( '_featured' === $current_section ) : ?>
 				<div class="addons-featured">
 					<?php