Domain management revamp: update domain list column styles in sidebar

client/my-sites/domains/domain-management/domain-overview-pane/index.tsx

@@ -12,6 +12,7 @@ import type {
 	ItemData,
 	FeaturePreviewInterface,
 } from 'calypso/a8c-for-agencies/components/items-dashboard/item-preview-pane/types';
+import './style.scss';
 
 interface Props {
 	selectedDomainPreview: React.ReactNode;

client/my-sites/domains/domain-management/domain-overview-pane/style.scss

@@ -0,0 +1,10 @@
+@import "@wordpress/base-styles/breakpoints";
+@import "@wordpress/base-styles/mixins";
+
+.a4a-layout.domains-overview .domains-overview__details .item-preview__content {
+    @include break-large {
+        padding-top: 24px;
+        padding-left: 24px;
+        padding-right: 24px;
+    }
+}

client/my-sites/domains/domain-management/list/bulk-all-domains.tsx

@@ -230,6 +230,44 @@ export default function BulkAllDomains( props: BulkAllDomainsProps ) {
 				}
 			}
 
+			.domains-overview__list.a4a-layout-column,
+			.domains-overview__list .a4a-layout-column__container,
+			.a4a-layout-column.domains-overview__list.main .a4a-layout-column__container .main {
+				height: 100%;
+			}
+
+			.a4a-layout-column.domains-overview__list.main .a4a-layout-column__container .main {
+				display: flex;
+				flex-direction: column;
+				padding-bottom: 0;
+
+				.domains-table {
+					flex-grow: 1;
+					margin-top: 0;
+					overflow: auto;
+					padding-bottom: 0;
+
+					table {
+						max-height: unset;
+					}
+				}
+			}
+
+			.domains-overview__list {
+				.domains-table__row {
+					.gridicons-ellipsis {
+						rotate: 90deg;
+						visibility: hidden;
+					}
+
+					&:hover {
+						.gridicons-ellipsis {
+							visibility: visible;
+						}
+					}
+				}
+			}
+
 			@media only screen and ( min-width: 782px ) {
 				.is-global-sidebar-visible {
 					header.navigation-header {
@@ -269,6 +307,7 @@ export default function BulkAllDomains( props: BulkAllDomainsProps ) {
 				.domains-overview__list .domains-table {
 					table {
 						grid-template-columns: 4fr auto;
+						max-height: 100%;
 
 						.domains-table__domain-name {
 							overflow-wrap: anywhere;
@@ -360,7 +399,13 @@ export default function BulkAllDomains( props: BulkAllDomainsProps ) {
 
 	const isDomainsEmpty = isFetched && domains.length === 0;
 	const buttons = ! isDomainsEmpty
-		? [ <OptionsDomainButton key="breadcrumb_button_1" allDomainsList /> ]
+		? [
+				<OptionsDomainButton
+					key="breadcrumb_button_1"
+					allDomainsList
+					sidebarMode={ props.sidebarMode }
+				/>,
+		  ]
 		: [];
 	const purchaseActions = usePurchaseActions();
 

client/my-sites/domains/domain-management/list/options-domain-button.jsx

@@ -20,10 +20,12 @@ class AddDomainButton extends Component {
 	static propTypes = {
 		selectedSiteSlug: PropTypes.string,
 		allDomainsList: PropTypes.bool,
+		sidebarMode: PropTypes.bool,
 	};
 
 	static defaultProps = {
 		allDomainsList: false,
+		sidebarMode: false,
 	};
 
 	constructor( props ) {
@@ -87,8 +89,8 @@ class AddDomainButton extends Component {
 		return (
 			<SplitButton
 				className="options-domain-button"
-				primary
-				whiteSeparator
+				primary={ ! this.props.sidebarMode }
+				whiteSeparator={ ! this.props.sidebarMode }
 				label={ isBreakpointActive ? undefined : translate( 'Add new domain' ) }
 				toggleIcon={ isBreakpointActive ? 'plus' : undefined }
 				href={ this.getAddNewDomainUrl() }

client/my-sites/domains/domain-management/list/style.scss

@@ -327,4 +327,60 @@
 
 .domains-overview .main.domains-overview__list {
 	max-width: 400px;
+}
+
+main.domains-overview main.domains-overview__list .a4a-layout-column__container {
+	// Header navigation styles
+	.navigation-header {
+		padding: 0;
+
+		.navigation-header__main {
+			padding-inline: 0;
+			padding: 16px 24px;
+			margin: 0;
+		}
+	}
+
+	// Header title styles
+	.formatted-header__title {
+		display: flex;
+		align-items: center;
+		min-height: 40px;
+		font-size: 1.25rem;
+		font-weight: 500;
+		letter-spacing: normal;
+	}
+
+	// Split button styles
+	.navigation-header__main .options-domain-button {
+		&.split-button {
+			--white-separator-color: rgba(255, 255, 255, 0.3);
+			display: inline-block;
+			white-space: nowrap;
+		}
+
+		.split-button__main,
+		.split-button__toggle {
+			display: inline-flex;
+			align-items: center;
+			height: 28px;
+			padding: 0 12px;
+			font-size: 0.75rem;
+			line-height: 14px;
+		}
+
+		.split-button__main {
+			font-weight: 400;
+			border-radius: 2px 0 0 2px;
+			-webkit-font-smoothing: antialiased;
+		}
+
+		.split-button__toggle.button svg.gridicon {
+			position: relative;
+			top: 2px;
+			width: 18px;
+			height: 18px;
+			margin-top: -2px;
+		}
+	}
 }

client/my-sites/domains/index.js

@@ -18,6 +18,13 @@ import {
 } from './domain-management/domain-overview-pane/constants';
 import * as paths from './paths';
 
+/**
+ * Registers a multi-page route.
+ *
+ * @param {Object} options - The options object.
+ * @param {Array} options.paths - The paths to register.
+ * @param {Array} options.handlers - The handlers to register. These will be applied to each path.
+ */
 function registerMultiPage( { paths: givenPaths, handlers } ) {
 	givenPaths.forEach( ( path ) => page( path, ...handlers ) );
 }

packages/domains-table/src/domains-table/index.tsx

@@ -21,7 +21,7 @@ export function DomainsTable( props: DomainsTableProps & { footer?: ReactNode }
 
 	const state = useGenerateDomainsTableState( allProps );
 
-	const { isAllSitesView, domains } = props;
+	const { isAllSitesView, domains, sidebarMode } = props;
 
 	const showDomainsToolbar =
 		isAllSitesView ||
@@ -43,7 +43,7 @@ export function DomainsTable( props: DomainsTableProps & { footer?: ReactNode }
 							'has-checkbox': state.canSelectAnyDomains && ! hideCheckbox,
 						} ) }
 					>
-						<DomainsTableHeader />
+						{ ! sidebarMode && <DomainsTableHeader /> }
 						<DomainsTableBody />
 					</table>
 				) }

packages/domains-table/src/domains-table/style.scss

@@ -424,3 +424,38 @@ a.domains-table-view-email-button {
 		color: var(--color-link);
 	}
 }
+
+main.domains-overview main.domains-overview__list .a4a-layout-column__container {
+	.domains-table {
+		margin-top: 0;
+	}
+
+	.domains-table .domains-table-toolbar {
+		padding-inline: 0;
+		padding: 12px 24px;
+		margin: 0;
+	}
+
+	.domains-table-search {
+		width: 100%;
+	}
+
+	.domains-table-search .components-base-control__field {
+		margin-bottom: 0;
+	}
+
+	.domains-table-search .components-input-base {
+		max-width: 100%;
+		width: 100%;
+	}
+
+	.domains-table-toolbar {
+		border-block-end: 1px solid var(--color-border-secondary);
+	}
+
+	.domains-table__row td.domains-table-row__domain,
+	.domains-table__row td.domains-table-row__actions {
+		padding: 16px 24px;
+		margin-inline-start: 0;
+	}
+}