fix: pro notice button

Author: Arukuen

src/components/pro-control/index.js

@@ -118,10 +118,10 @@ const LABELS = {
 		</ul>,
 	},
 	'font-pairs': {
-		title: __( 'Customize Font Pairs', i18n ),
+		title: __( 'Add Your Own Font Pairs', i18n ),
 		description: <ul>
 			<li>{ __( 'Add your own custom Font Pairs', i18n ) }</li>
-			<li>{ __( 'Edit custom Font Pairs based on the selected preset', i18n ) }</li>
+			<li>{ __( 'Manage your custom Font Pairs', i18n ) }</li>
 		</ul>,
 	},
 }

src/plugins/global-settings/typography/editor.scss

@@ -115,6 +115,7 @@
 	padding: 0;
 	width: calc(100% - 16px);
 	margin: 0;
+	margin-bottom: 24px;
 	.ugb-global-settings-font-pair__selected {
 		.components-base-control__field {
 			border: 2px solid #000;

src/plugins/global-settings/typography/index.js

@@ -10,7 +10,7 @@ import FONT_PAIRS from './font-pairs.json'
  * External dependencies
  */
 import {
-	PanelAdvancedSettings, AdvancedSelectControl, ControlSeparator, FontPairPicker, ProControl,
+	PanelAdvancedSettings, AdvancedSelectControl, ControlSeparator, FontPairPicker, ProControlButton,
 } from '~stackable/components'
 import { fetchSettings } from '~stackable/util'
 import {
@@ -341,7 +341,7 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-typography',
 								/>
 							} ) }
 						</div>
-						{ showProNotice && <ProControl type="font-pairs" /> }
+						{ showProNotice && <ProControlButton type="font-pairs" /> }
 						<ControlSeparator />
 
 						<h3>{ __( 'Typography Settings' ) }</h3>