fix: pro notice update, translation, renaming default theme

Author: Arukuen

src/components/font-pair-picker/index.js

@@ -32,13 +32,13 @@ const FontPairPicker = props => {
 				style={ omit( { ...headingStyles }, [ 'fontSize', 'lineHeight' ] ) }
 				className="ugb-global-settings-font-pair__label"
 			>
-				{ headingStyles?.fontFamily ? headingStyles.fontFamily : 'Theme Heading Default' }
+				{ headingStyles?.fontFamily ? headingStyles.fontFamily : __( 'Default Heading', i18n ) }
 			</span>
 			<span
 				style={ omit( { ...paragraphStyles }, [ 'fontSize', 'lineHeight' ] ) }
 				className="ugb-global-settings-font-pair__sub-label"
 			>
-				{ paragraphStyles?.fontFamily ? paragraphStyles?.fontFamily : 'Theme Body Default' }
+				{ paragraphStyles?.fontFamily ? paragraphStyles?.fontFamily : __( 'Default Body', i18n ) }
 			</span>
 		</div>
 	)

src/components/pro-control/index.js

@@ -117,6 +117,13 @@ const LABELS = {
 			<li>{ __( 'Organize your custom icons in your library', i18n ) }</li>
 		</ul>,
 	},
+	'font-pairs': {
+		title: __( 'Customize 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>
+		</ul>,
+	},
 }
 
 const ProControl = props => {

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

@@ -13,7 +13,9 @@ import {
 	PanelAdvancedSettings, AdvancedSelectControl, ControlSeparator, FontPairPicker, ProControl,
 } from '~stackable/components'
 import { fetchSettings } from '~stackable/util'
-import { i18n, isPro } from 'stackable'
+import {
+	i18n, isPro, showProNotice,
+} from 'stackable'
 import {
 	omit, head, isEqual,
 } from 'lodash'
@@ -286,7 +288,7 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-typography',
 						<ControlSeparator />
 
 						<div className="ugb-global-settings-font-pair__heading">
-							<h3>Preset Font Pairs</h3>
+							<h3>{ __( 'Preset Font Pairs' ) }</h3>
 							{ isPro && applyFilters(
 								'stackable.global-settings.typography.font-pairs.addFontPair',
 								[ ...FONT_PAIRS, ...customFontPairs ],
@@ -346,7 +348,7 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-typography',
 								/>
 							} ) }
 						</div>
-						{ ! isPro && <ProControl type="global-font-pairs" title="Creating and editing Custom Font Pairs are premium features" /> }
+						{ showProNotice && <ProControl type="font-pairs" /> }
 						<ControlSeparator />
 					</div>
 				}
@@ -364,7 +366,7 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-typography',
 					)
 				}
 
-				<h3>Typography Settings</h3>
+				<h3>{ __( 'Typography Settings' ) }</h3>
 				<style> { getThemeStyles() } </style>
 				{ TYPOGRAPHY_TAGS.map( ( {
 					label, selector, help,