From c8778fedf15eaa14dadfecc2f04d03e854e856e9 Mon Sep 17 00:00:00 2001
From: Jason Crist <jcrist@pbking.com>
Date: Tue, 20 Feb 2024 14:56:32 -0500
Subject: [PATCH] Simplified and removed 'TabPanelLayout' component

---
 .../font-library-modal/font-collection.js     |  8 +-
 .../font-library-modal/style.scss             |  5 +-
 .../font-library-modal/tab-panel-layout.js    | 85 -------------------
 .../font-library-modal/upload-fonts.js        | 18 ++--
 4 files changed, 17 insertions(+), 99 deletions(-)
 delete mode 100644 packages/edit-site/src/components/global-styles/font-library-modal/tab-panel-layout.js

diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js b/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
index a0c8cc77f872b..02e3911261114 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
@@ -33,7 +33,6 @@ import { search, closeSmall, chevronLeft } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import TabPanelLayout from './tab-panel-layout';
 import { FontLibraryContext } from './context';
 import FontCard from './font-card';
 import filterFonts from './utils/filter-fonts';
@@ -235,12 +234,7 @@ function FontCollection( { slug } ) {
 	};
 
 	if ( renderConfirmDialog ) {
-		return (
-			<TabPanelLayout notice={ notice }>
-				<Spacer margin={ 8 } />
-				<GoogleFontsConfirmDialog />
-			</TabPanelLayout>
-		);
+		return <GoogleFontsConfirmDialog />;
 	}
 
 	return (
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/style.scss b/packages/edit-site/src/components/global-styles/font-library-modal/style.scss
index 9c6fd97adac90..cfc42aa63a5c5 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/style.scss
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/style.scss
@@ -123,6 +123,7 @@ button.font-library-modal__upload-area {
 	display: flex;
 	justify-content: center;
 	align-items: center;
+	margin-top: $grid-unit-80;
 
 	h3 {
 		font-size: 1.4rem;
@@ -130,7 +131,7 @@ button.font-library-modal__upload-area {
 
 	.components-card {
 		width: 50%;
-		min-width: 250px;
-		max-width: 350px;
+		min-width: 350px;
+		max-width: 400px;
 	}
 }
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/tab-panel-layout.js b/packages/edit-site/src/components/global-styles/font-library-modal/tab-panel-layout.js
deleted file mode 100644
index c959a5373190e..0000000000000
--- a/packages/edit-site/src/components/global-styles/font-library-modal/tab-panel-layout.js
+++ /dev/null
@@ -1,85 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useContext } from '@wordpress/element';
-import {
-	__experimentalText as Text,
-	__experimentalHeading as Heading,
-	__experimentalVStack as VStack,
-	__experimentalSpacer as Spacer,
-	__experimentalHStack as HStack,
-	Button,
-	Notice,
-	FlexBlock,
-} from '@wordpress/components';
-import { chevronLeft } from '@wordpress/icons';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { FontLibraryContext } from './context';
-
-function TabPanelLayout( {
-	title,
-	description,
-	notice,
-	handleBack,
-	children,
-	footer,
-} ) {
-	const { setNotice } = useContext( FontLibraryContext );
-
-	return (
-		<div className="font-library-modal__tabpanel-layout">
-			<Spacer margin={ 4 } />
-			<VStack spacing={ 4 } justify="space-between">
-				<VStack spacing={ 2 }>
-					<HStack justify="flex-start">
-						{ !! handleBack && (
-							<Button
-								variant="tertiary"
-								onClick={ handleBack }
-								icon={ chevronLeft }
-								size="small"
-								label={ __( 'Back' ) }
-							/>
-						) }
-						{ title && (
-							<Heading
-								level={ 2 }
-								size={ 13 }
-								className="edit-site-global-styles-header"
-							>
-								{ title }
-							</Heading>
-						) }
-					</HStack>
-					{ description && <Text>{ description }</Text> }
-					{ notice && (
-						<FlexBlock>
-							<Spacer margin={ 1 } />
-							<Notice
-								status={ notice.type }
-								onRemove={ () => setNotice( null ) }
-							>
-								{ notice.message }
-							</Notice>
-							<Spacer margin={ 1 } />
-						</FlexBlock>
-					) }
-				</VStack>
-				<div className="font-library-modal__tabpanel-layout__main">
-					{ children }
-				</div>
-				{ footer && (
-					<div className="font-library-modal__tabpanel-layout__footer">
-						{ footer }
-					</div>
-				) }
-			</VStack>
-		</div>
-	);
-}
-
-export default TabPanelLayout;
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/upload-fonts.js b/packages/edit-site/src/components/global-styles/font-library-modal/upload-fonts.js
index a40534861ae96..8b53ddcdbb38a 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/upload-fonts.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/upload-fonts.js
@@ -3,11 +3,12 @@
  */
 import { __ } from '@wordpress/i18n';
 import {
-	Button,
-	DropZone,
 	__experimentalSpacer as Spacer,
 	__experimentalText as Text,
 	__experimentalVStack as VStack,
+	Button,
+	DropZone,
+	Notice,
 	FormFileUpload,
 	FlexItem,
 	privateApis as componentsPrivateApis,
@@ -22,7 +23,6 @@ import { FontLibraryContext } from './context';
 import { Font } from '../../../../lib/lib-font.browser';
 import makeFamiliesFromFaces from './utils/make-families-from-faces';
 import { loadFontFaceInBrowser } from './utils';
-import TabPanelLayout from './tab-panel-layout';
 import { unlock } from '../../../lock-unlock';
 
 const { ProgressBar } = unlock( componentsPrivateApis );
@@ -171,9 +171,17 @@ function UploadFonts() {
 	};
 
 	return (
-		<TabPanelLayout notice={ notice }>
+		<div className="font-library-modal__tabpanel-layout">
 			<DropZone onFilesDrop={ handleDropZone } />
 			<VStack className="font-library-modal__local-fonts">
+				{ notice && (
+					<Notice
+						status={ notice.type }
+						onRemove={ () => setNotice( null ) }
+					>
+						{ notice.message }
+					</Notice>
+				) }
 				{ isUploading && (
 					<FlexItem>
 						<div className="font-library-modal__upload-area">
@@ -205,7 +213,7 @@ function UploadFonts() {
 					) }
 				</Text>
 			</VStack>
-		</TabPanelLayout>
+		</div>
 	);
 }