Improve the settings UI.

10up · Dec 6, 2024 · 92c5b3a · 92c5b3a
1 parent 9fcec5d
commit 92c5b3a
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 15 deletions.
diff --git a/src/js/settings/components/classifai-settings/index.js b/src/js/settings/components/classifai-settings/index.js
@@ -61,6 +61,7 @@ const FeatureSettingsWrapper = () => {
 		<FeatureContext.Provider value={ { featureName: feature } }>
 			<Button
 				icon={ <Icon icon="arrow-left-alt2" /> }
+				iconSize={ 16 }
 				onClick={ () => navigate( -1 ) }
 			>
 				{ __( 'Back to dashboard', 'classifai' ) }
@@ -189,15 +190,6 @@ export const ClassifAISettings = () => {
 			<HashRouter>
 				<Header />
 				<div className="classifai-settings-wrapper">
-					<h1 className="classifai-settings__main-title">
-						{ __( 'ClassifAI Settings ', 'classifai' ) }
-					</h1>
-					<p>
-						{ __(
-							'Turn features on or off and adjust your settings.',
-							'classifai'
-						) }
-					</p>
 					<div className="classifai-admin-notices wrap"></div>
 					<ServiceNavigation />
 					<Routes>

diff --git a/src/js/settings/components/service-settings/index.js b/src/js/settings/components/service-settings/index.js
@@ -134,7 +134,6 @@ export const ServiceSettings = () => {
 								<NavLink to={ feature } key={ feature }>
 									<Button
 										variant="secondary"
-										size="small"
 										disabled={
 											'0' ===
 											getFeatureSettings(
@@ -143,7 +142,7 @@ export const ServiceSettings = () => {
 											)
 										}
 									>
-										{ __( 'Edit', 'classifai' ) }
+										{ __( 'Settings', 'classifai' ) }
 									</Button>
 								</NavLink>
 							</FlexItem>

diff --git a/src/scss/settings.scss b/src/scss/settings.scss
@@ -131,6 +131,8 @@
 		width: 100%;
 		max-width: 1280px;
 		margin: 0 auto;
+		padding-right: 20px;
+		box-sizing: border-box;
 
 		.classifai-tabs {
 			display: flex;
@@ -139,7 +141,6 @@
 			justify-content: flex-start;
 			border-bottom: 1px solid #ccd0d4;
 			padding-bottom: 0;
-			margin-right: 20px;
 
 			&[aria-orientation="vertical"] {
 				flex-direction: column;
@@ -184,8 +185,7 @@
 			}
 
 			@media screen and (max-width: 782px) {
-				margin-right: 10px;
-				margin-top: 12px;
+				margin-top: 16px;
 			}
 
 			.classifai-tabs-item {
@@ -360,6 +360,10 @@
 		.components-radio-control__option {
 			margin-bottom: 4px;
 		}
+
+		@media screen and (max-width: 782px) {
+			padding-right: 10px;
+		}
 	}
 
 	.service-settings-wrapper {
@@ -576,7 +580,10 @@
 
 .classifai-settings-dashboard {
 	margin-top: 36px;
-	max-width: 700px;
+
+	@media screen and (max-width: 782px) {
+		margin-top: 12px;
+	}
 }
 
 .classifai-feature-status {