From f7fed9a0cf666c1e0e663c6b63585d00859e8c86 Mon Sep 17 00:00:00 2001
From: Jeff Ong <jonger4@gmail.com>
Date: Wed, 15 Feb 2023 15:53:39 -0500
Subject: [PATCH] Cleanup manage fonts UI.

---
 admin/class-manage-fonts.php      | 10 +++++----
 src/fonts-context.js              |  6 +++---
 src/manage-fonts/font-face.js     |  2 +-
 src/manage-fonts/font-family.js   |  1 -
 src/manage-fonts/manage-fonts.css | 35 ++++++++++++++++++++++++++++++-
 5 files changed, 44 insertions(+), 10 deletions(-)

diff --git a/admin/class-manage-fonts.php b/admin/class-manage-fonts.php
index 9b91461f..15e97d39 100644
--- a/admin/class-manage-fonts.php
+++ b/admin/class-manage-fonts.php
@@ -91,7 +91,7 @@ function load_fonts_react_app () {
 
         // Enqueue CSS of the app
         wp_enqueue_style( 'fonts-app', plugins_url( 'build/index.css', __DIR__ ), array(), $asset_file['version'] );
-     
+
         // Load our app.js.
         array_push( $asset_file['dependencies'], 'wp-i18n' );
         wp_enqueue_script( 'create-block-theme-app', plugins_url( 'build/index.js', __DIR__ ), $asset_file['dependencies'], $asset_file['version'] );
@@ -130,9 +130,11 @@ function manage_fonts_admin_page () {
         
     ?>
     <div class="wrap">
-        <h1 class="wp-heading-inline"><?php _e('Manage Theme Fonts', 'create-block-theme'); ?></h1>
-        <a href="<?php echo admin_url( 'themes.php?page=add-google-font-to-theme-json' ); ?>" class="page-title-action"><?php _e('Add Google Font', 'create-block-theme'); ?></a>
-        <a href="<?php echo admin_url( 'themes.php?page=add-local-font-to-theme-json' ); ?>" class="page-title-action"><?php _e('Add Local Font', 'create-block-theme'); ?></a>
+        <div class="manage-fonts-header-flex">
+            <h1 class="wp-heading-inline"><?php _e('Manage Theme Fonts', 'create-block-theme'); ?></h1>
+            <a href="<?php echo admin_url( 'themes.php?page=add-google-font-to-theme-json' ); ?>" class="components-button page-title-action"><?php _e('Add Google Font', 'create-block-theme'); ?></a>
+            <a href="<?php echo admin_url( 'themes.php?page=add-local-font-to-theme-json' ); ?>" class="components-button page-title-action"><?php _e('Add Local Font', 'create-block-theme'); ?></a>
+        </div>
         <hr class="wp-header-end" />
         <p name="theme-fonts-json" id="theme-fonts-json" class="hidden"><?php echo $fonts_json_string;  ?></p>
         
diff --git a/src/fonts-context.js b/src/fonts-context.js
index a50c82c3..ab3f1f7a 100644
--- a/src/fonts-context.js
+++ b/src/fonts-context.js
@@ -15,21 +15,21 @@ export const DEMO_DEFAULTS = {
         text: DEFAULT_HEADING_TEXT,
         size: 40,
         lineHeight: 1.1,
-        margin: "0.5em",
+        margin: "0.5em 0",
         component: "h2",
     },
     sentence: {
         text: DEFAULT_SENTENCE_TEXT,
         size: 24,
         lineHeight: 1.3,
-        margin: "0.5em",
+        margin: "0.5em 0",
         component: "p",
     },
     paragraph: {
         text: DEFAULT_PARAGRAPH_TEXT,
         size: 16,
         lineHeight: 1.5,
-        margin: "0.5em",
+        margin: "0.5em 0",
         component: "p",
     },
 };
diff --git a/src/manage-fonts/font-face.js b/src/manage-fonts/font-face.js
index df4c1ad7..dddbfce6 100644
--- a/src/manage-fonts/font-face.js
+++ b/src/manage-fonts/font-face.js
@@ -37,7 +37,7 @@ function FontFace ( {
                 {/* <input style={ demoStyles } onChange={ handleChange } value={ demoText }/> */}
                 <Demo style={ demoStyles } />
             </td>
-            { deleteFontFace && <td><Button variant="tertiary" isDestructive={true} onClick={deleteFontFace}>{__('Remove', 'create-block-theme')}</Button></td> }
+            { deleteFontFace && <td><Button variant="tertiary" onClick={deleteFontFace}>{__('Remove', 'create-block-theme')}</Button></td> }
         </tr>
     );
 }
diff --git a/src/manage-fonts/font-family.js b/src/manage-fonts/font-family.js
index 29488644..70f5a46e 100644
--- a/src/manage-fonts/font-family.js
+++ b/src/manage-fonts/font-family.js
@@ -26,7 +26,6 @@ function FontFamily ( { fontFamily, fontFamilyIndex, deleteFontFamily, deleteFon
                         <div>
                             <Button
                                 variant="tertiary"
-                                isDestructive={true}
                                 onClick={(e) => {
                                     e.stopPropagation();
                                     deleteFontFamily(fontFamilyIndex)
diff --git a/src/manage-fonts/manage-fonts.css b/src/manage-fonts/manage-fonts.css
index 9a5351fe..0708fe55 100644
--- a/src/manage-fonts/manage-fonts.css
+++ b/src/manage-fonts/manage-fonts.css
@@ -67,13 +67,46 @@
     vertical-align: middle;
 }
 
-.font-family-head {
+.widefat td {
+    padding: .5rem 2rem;
+}
+
+td.font-family-head {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    padding: 1rem;
+    background-color: #f6f7f7;
 }
 
 .font-family-head div:last-of-type {
     display: flex;
     gap: 1rem;
 }
+
+.slide.open {
+    margin: 0;
+    border: none;
+}
+
+table.widefat.wp-list-table {
+    border-radius: 2px;
+}
+
+table.widefat table {
+    border: none;
+}
+
+.manage-fonts-header-flex {
+    display: flex;
+    align-items: flex-end;
+}
+
+.manage-fonts-header-flex .wp-heading-inline+.page-title-action {
+    margin-left: auto;
+}
+
+.components-button.page-title-action {
+    font-weight: normal;
+    margin-left: .75rem;
+}
\ No newline at end of file