feat(#94): various button styling

bigbite · Feb 26, 2025 · 6d4b7cb · 6d4b7cb
1 parent 564d94e
commit 6d4b7cb
Show file tree

Hide file tree

Showing 4 changed files with 104 additions and 59 deletions.
diff --git a/src/editor/components/ComponentSettings/TypographySettings/FontFace.js b/src/editor/components/ComponentSettings/TypographySettings/FontFace.js
@@ -78,14 +78,15 @@ const FontFace = ( { familyIndex, selector } ) => {
 	};
 
 	return (
-		<div>
+		<div className="themer--typography-font-face-options">
 			<span className="themer--settings__item__title">
 				{ __( 'Font Face', 'themer' ) }
 			</span>
 			<Button
 				disabled={ familyIndex === '' }
 				icon={ plus }
 				onClick={ () => setShow( ! show ) }
+				variant="secondary"
 			/>
 			{ fontFaces.map( ( fontFace, index ) => {
 				if ( familyIndex === '' ) {
@@ -104,6 +105,7 @@ const FontFace = ( { familyIndex, selector } ) => {
 							} )
 						}
 						key={ index }
+						variant="secondary"
 					>
 						{ fontFace.fontFamily }
 					</Button>
@@ -144,6 +146,7 @@ const FontFace = ( { familyIndex, selector } ) => {
 					<Button
 						label={ 'Save New Font Face' }
 						onClick={ pushNewFontFace }
+						variant="primary"
 					>
 						{ __( 'Save', 'themer' ) }
 					</Button>
@@ -193,27 +196,32 @@ const FontFace = ( { familyIndex, selector } ) => {
 						familyIndex={ familyIndex }
 						fontFaceIndex={ currentFontFace.index }
 					/>
-					<Button
-						label={ 'Save Font Face' }
-						onClick={ () =>
-							setCurrentFontFace( {
-								fontFamily: '',
-								fontStretch: '',
-								fontStyle: '',
-								fontWeight: '',
-							} )
-						}
-					>
-						{ __( 'Save', 'themer' ) }
-					</Button>
-					<Button
-						label={ __( 'Delete Font Face', 'themer' ) }
-						onClick={ () =>
-							handleDeleteFontFace( currentFontFace.index )
-						}
-					>
-						{ __( 'Delete', 'themer' ) }
-					</Button>
+					<div className="themer-settings--modal__actions">
+						<Button
+							label={ 'Save Font Face' }
+							onClick={ () =>
+								setCurrentFontFace( {
+									fontFamily: '',
+									fontStretch: '',
+									fontStyle: '',
+									fontWeight: '',
+								} )
+							}
+							variant="primary"
+						>
+							{ __( 'Save', 'themer' ) }
+						</Button>
+						<Button
+							label={ __( 'Delete Font Face', 'themer' ) }
+							isDestructive
+							variant="primary"
+							onClick={ () =>
+								handleDeleteFontFace( currentFontFace.index )
+							}
+						>
+							{ __( 'Delete', 'themer' ) }
+						</Button>
+					</div>
 				</Modal>
 			) }
 		</div>

diff --git a/src/editor/components/ComponentSettings/TypographySettings/FontFamilies.js b/src/editor/components/ComponentSettings/TypographySettings/FontFamilies.js
@@ -98,6 +98,7 @@ const FontFamilies = ( { selector } ) => {
 							} )
 						}
 						key={ index }
+						variant="secondary"
 					>
 						{ font.name }
 					</Button>
@@ -114,6 +115,9 @@ const FontFamilies = ( { selector } ) => {
 						} )
 					}
 				>
+					<div className="themer--settings__item__title">
+						{ __( 'Font Families', 'themer' ) }
+					</div>
 					<TextControl
 						label={ __( 'Font Family', 'themer' ) }
 						value={ currentFont.fontFamily }
@@ -135,25 +139,30 @@ const FontFamilies = ( { selector } ) => {
 							setCurrentFont( { ...currentFont, slug } );
 						} }
 					/>
-					<Button
-						onClick={ () => {
-							setCurrentFont( {
-								...currentFont,
-								index: currentFont.index,
-							} );
-							handleUpdateValue( currentFont.index );
-						} }
-					>
-						{ __( 'Save', 'themer' ) }
-					</Button>
-					<Button
-						disabled={ currentFont.index === '' }
-						onClick={ () =>
-							handleDeleteFontFamily( currentFont.index )
-						}
-					>
-						{ __( 'Delete Font Family', 'themer' ) }
-					</Button>
+					<div className="themer-settings--modal__actions">
+						<Button
+							onClick={ () => {
+								setCurrentFont( {
+									...currentFont,
+									index: currentFont.index,
+								} );
+								handleUpdateValue( currentFont.index );
+							} }
+							variant="primary"
+						>
+							{ __( 'Save', 'default' ) }
+						</Button>
+						<Button
+							disabled={ currentFont.index === '' }
+							isDestructive
+							variant="primary"
+							onClick={ () =>
+								handleDeleteFontFamily( currentFont.index )
+							}
+						>
+							{ __( 'Delete', 'default' ) }
+						</Button>
+					</div>
 					<FontFace
 						familyIndex={ currentFont.index }
 						selector={ `${ selector }` }
@@ -162,6 +171,9 @@ const FontFamilies = ( { selector } ) => {
 			) }
 			{ isOpen && (
 				<Modal onRequestClose={ () => setIsOpen( ! isOpen ) }>
+					<div className="themer--settings__item__title">
+						{ __( 'Font Families', 'themer' ) }
+					</div>
 					<TextControl
 						label={ __( 'Font Family', 'themer' ) }
 						value={ newFont.fontFamily }
@@ -188,8 +200,9 @@ const FontFamilies = ( { selector } ) => {
 							handleFontFamilyChange();
 							setIsOpen( ! isOpen );
 						} }
+						variant='primary'
 					>
-						{ __( 'Save', 'themer' ) }
+						{ __( 'Save', 'default' ) }
 					</Button>
 				</Modal>
 			) }

diff --git a/src/editor/components/ComponentSettings/TypographySettings/FontSizes.js b/src/editor/components/ComponentSettings/TypographySettings/FontSizes.js
@@ -64,6 +64,7 @@ const FontFaces = ( { selector } ) => {
 							} );
 						} }
 						key={ index }
+						variant="secondary"
 					>
 						{ size?.name }
 					</Button>
@@ -117,8 +118,9 @@ const FontFaces = ( { selector } ) => {
 						onClick={ () => {
 							handleNewFontSize();
 						} }
+						variant="primary"
 					>
-						Save
+						{ __( 'Save', 'default' ) }
 					</Button>
 				</Modal>
 			) }
@@ -167,20 +169,25 @@ const FontFaces = ( { selector } ) => {
 							)
 						}
 					/>
-					<Button
-						onClick={ () => {
-							setCurrentSize( {} );
-						} }
-					>
-						Save
-					</Button>
-					<Button
-						onClick={ () => {
-							handleDelete( currentSize.index );
-						} }
-					>
-						Delete
-					</Button>
+					<div className="themer-settings--modal__actions">
+						<Button
+							onClick={ () => {
+								setCurrentSize( {} );
+							} }
+							variant="primary"
+						>
+							{ __( 'Save', 'default' ) }
+						</Button>
+						<Button
+							onClick={ () => {
+								handleDelete( currentSize.index );
+							} }
+							variant="primary"
+							isDestructive
+						>
+							{ __( 'Delete', 'default' ) }
+						</Button>
+					</div>
 				</Modal>
 			) }
 		</div>

diff --git a/src/editor/styles/components/styles.scss b/src/editor/styles/components/styles.scss
@@ -108,7 +108,7 @@
 .themer--settings__item__title {
 	font-weight: 600;
 	font-size: 14px;
-	line-height: 20px;
+	line-height: 40px;
 }
 
 .themer-styles-container .components-navigator-screen:has(.themer--settings) {
@@ -130,4 +130,21 @@
 
 .themer-settings--modal__content > div {
 	padding-bottom: 20px;
-}
+}
+
+.themer--typography-options {
+	padding-bottom: 20px;
+}
+
+.themer--typography-options button {
+	margin: 0 10px 10px 0;
+}
+
+.themer--typography-font-face-options {
+	display: flex;
+	flex-wrap: wrap;
+}
+
+.themer--typography-font-face-options > * {
+	margin-right: 10px;
+}