Adjust to new design

Author: nightnei

src/components/empty-studio/empty-studio.svg

@@ -0,0 +1,32 @@
+import { useI18n } from '@wordpress/react-i18n';
+import Button from 'src/components/button';
+import emptyStudioIllustration from 'src/components/empty-studio/empty-studio.svg';
+
+type EmptyStudioProps = {
+	onSubmit: () => void;
+};
+
+export function EmptyStudio( { onSubmit }: EmptyStudioProps ) {
+	const { __ } = useI18n();
+
+	return (
+		<div className="w-full h-full flex items-center app-no-drag-region">
+			<div className="mx-auto px-[85px] flex items-center gap-[44px] max-w-[786px]">
+				<div>
+					<div className="text-[16px] font-semibold text-black mb-[4px]">
+						{ __( 'Ready for a new start?' ) }
+					</div>
+					<p className="text-[13px] text-gray-700 mb-[32px]">
+						{ __( "You don't have any sites right now. Add a new one to get started again." ) }
+					</p>
+
+					<Button variant="primary" onClick={ onSubmit }>
+						{ __( 'Add site' ) }
+					</Button>
+				</div>
+
+				<img src={ emptyStudioIllustration } alt={ __( 'Empty Studio illustration' ) } />
+			</div>
+		</div>
+	);
+}

src/components/empty-studio/index.tsx

@@ -1,6 +1,7 @@
 import { __ } from '@wordpress/i18n';
 import { RunningSites } from 'src/components/running-sites';
 import SiteMenu from 'src/components/site-menu';
+import { useSiteDetails } from 'src/hooks/use-site-details';
 import { isMac } from 'src/lib/app-globals';
 import { cx } from 'src/lib/cx';
 import AddSite from 'src/modules/add-site';
@@ -10,6 +11,8 @@ interface MainSidebarProps {
 }
 
 export default function MainSidebar( { className }: MainSidebarProps ) {
+	const { data: localSites } = useSiteDetails();
+
 	return (
 		<div
 			data-testid="main-sidebar"
@@ -20,22 +23,28 @@ export default function MainSidebar( { className }: MainSidebarProps ) {
 				className
 			) }
 		>
-			<div className="flex flex-col h-full">
-				<div
-					className={ cx(
-						'flex-1 overflow-y-auto sites-scrollbar app-no-drag-region',
-						isMac() ? 'ms-4' : 'ms-3'
-					) }
-				>
-					<SiteMenu />
+			{ ! localSites.length ? (
+				<div className="flex h-full px-[20px] justify-center items-center app-no-drag-region text-center text-[12px] text-a8c-gray-50">
+					{ __( 'Your sites will show up here once you create them' ) }
 				</div>
-				<div className="flex flex-col gap-4 pt-5 border-white border-t border-opacity-10 app-no-drag-region">
-					<RunningSites />
-					<div className={ cx( isMac() ? 'mx-5' : 'mx-4' ) }>
-						<AddSite className="min-w-[168px] w-full mb-4" />
+			) : (
+				<div className="flex flex-col h-full">
+					<div
+						className={ cx(
+							'flex-1 overflow-y-auto sites-scrollbar app-no-drag-region',
+							isMac() ? 'ms-4' : 'ms-3'
+						) }
+					>
+						<SiteMenu />
+					</div>
+					<div className="flex flex-col gap-4 pt-5 border-white border-t border-opacity-10 app-no-drag-region">
+						<RunningSites />
+						<div className={ cx( isMac() ? 'mx-5' : 'mx-4' ) }>
+							<AddSite className="min-w-[168px] w-full mb-4" />
+						</div>
 					</div>
 				</div>
-			</div>
+			) }
 		</div>
 	);
 }

src/components/main-sidebar.tsx

@@ -5,6 +5,7 @@ import { ContentTabImportExport } from 'src/components/content-tab-import-export
 import { ContentTabOverview } from 'src/components/content-tab-overview';
 import { ContentTabPreviews } from 'src/components/content-tab-previews';
 import { ContentTabSettings } from 'src/components/content-tab-settings';
+import { EmptyStudio } from 'src/components/empty-studio';
 import Header from 'src/components/header';
 import { SiteLoadingIndicator } from 'src/components/site-loading-indicator';
 import { MIN_WIDTH_CLASS_TO_MEASURE } from 'src/constants';
@@ -21,13 +22,7 @@ export function SiteContentTabs() {
 	const { __ } = useI18n();
 
 	if ( ! localSites.length ) {
-		return (
-			<div className="w-full h-full flex items-center justify-center app-no-drag-region">
-				<p className="text-lg text-gray-600">
-					{ __( 'All sites removed. Add a new one to get started again.' ) }
-				</p>
-			</div>
-		);
+		return <EmptyStudio onSubmit={ () => {} } />;
 	}
 
 	if ( ! selectedSite ) {