Use CSS variables and polish layout (#104)

* Replace deprecated `isSmall` prop * Settings Page: Use new 32px/40px default size * Use CSS variables and polish layout * Use compact size
t-hamano · Mar 8, 2024 · 2399596 · 2399596
1 parent 537ec99
commit 2399596
Show file tree

Hide file tree

Showing 24 changed files with 110 additions and 121 deletions.
diff --git a/src/admin/components/header/style.scss b/src/admin/components/header/style.scss
@@ -1,33 +1,33 @@
 .chbe-admin-header {
-	padding: 16px 0 8px;
-	background-color: #fff;
+	padding: $grid-unit-20 0 $grid-unit-10;
+	background-color: $white;
 
 	.chbe-admin-header__title {
 		display: flex;
-		gap: 16px;
+		gap: $grid-unit-20;
 		align-items: center;
 		justify-content: center;
-		margin: 0 0 8px;
+		margin: 0 0 $grid-unit-10;
 		line-height: 1;
 
 		@media screen and (max-width: 782px) {
 			font-size: 20px;
 		}
 
 		svg {
-			width: 30px;
+			width: $grid-unit-40;
 		}
 	}
 
 	.chbe-admin-header__info {
 		position: absolute;
 		top: 0;
-		right: 16px;
+		right: $grid-unit-20;
 		margin: 0;
 
 		@media screen and (max-width: 782px) {
 			position: static;
-			margin-top: 16px;
+			margin-top: $grid-unit-20;
 		}
 	}
 }
diff --git a/src/admin/components/shortcut/index.js b/src/admin/components/shortcut/index.js
@@ -14,12 +14,9 @@ export default function Shortcut() {
 			<Button
 				className="chbe-admin-shortcut-toggle"
 				variant="tertiary"
-				// TODO: Remove this prop and add size="small" prop when
-				// the supported minimum WordPress version is 6.3 or higher.
-				// See: https://github.com/WordPress/gutenberg/pull/51842
-				isSmall
+				size="small"
 				icon={ info }
-				iconSize="18"
+				iconSize="16"
 				onClick={ () => setIsModalOpen( true ) }
 			>
 				{ __( 'About shortcut', 'custom-html-block-extension' ) }

diff --git a/src/admin/components/shortcut/style.scss b/src/admin/components/shortcut/style.scss
@@ -1,7 +1,7 @@
 .chbe-admin-shortcut-modal {
 
 	p {
-		margin: 0 0 16px 0;
+		margin: 0 0 $grid-unit-20 0;
 	}
 
 	ul {

diff --git a/src/admin/components/welcome-guide/index.js b/src/admin/components/welcome-guide/index.js
@@ -34,12 +34,9 @@ export default function WelcomeGuide() {
 			<Button
 				className="chbe-admin-welcome-guide-toggle"
 				variant="tertiary"
-				// TODO: Remove this prop and add size="small" prop when
-				// the supported minimum WordPress version is 6.3 or higher.
-				// See: https://github.com/WordPress/gutenberg/pull/51842
-				isSmall
+				size="small"
 				icon={ info }
-				iconSize="18"
+				iconSize="16"
 				onClick={ () => setIsModalOpen( true ) }
 			>
 				{ __( 'About this plugin', 'custom-html-block-extension' ) }

diff --git a/src/admin/components/welcome-guide/style.scss b/src/admin/components/welcome-guide/style.scss
@@ -2,15 +2,15 @@
 	max-width: 350px;
 
 	h1 {
-		padding: 0 32px;
-		margin: 0 0 16px 0;
+		padding: 0 $grid-unit-40;
+		margin: 0 0 $grid-unit-20 0;
 		font-size: 24px;
 		line-height: 1.4;
 	}
 
 	p {
-		padding: 0 32px;
-		margin: 0 0 24px 0;
+		padding: 0 $grid-unit-40;
+		margin: 0 0 $grid-unit-30 0;
 		font-size: 13px;
 		line-height: 1.4;
 	}

diff --git a/src/admin/editor-config/components/controls/index.js b/src/admin/editor-config/components/controls/index.js
@@ -17,6 +17,7 @@ export default function Controls( { isWaiting, onUpdateOptions, onResetOptions }
 						variant="primary"
 						disabled={ isWaiting }
 						onClick={ onUpdateOptions }
+						__next40pxDefaultSize
 					>
 						{ __( 'Save settings', 'custom-html-block-extension' ) }
 					</Button>
@@ -27,6 +28,7 @@ export default function Controls( { isWaiting, onUpdateOptions, onResetOptions }
 						variant="secondary"
 						disabled={ isWaiting }
 						onClick={ () => setIsModalOpen( true ) }
+						__next40pxDefaultSize
 					>
 						{ __( 'Reset', 'custom-html-block-extension' ) }
 					</Button>

diff --git a/src/admin/editor-config/components/controls/style.scss b/src/admin/editor-config/components/controls/style.scss
@@ -8,7 +8,7 @@
 	}
 
 	.chbe-admin-editor-config-controls__submit {
-		padding-right: 56px;
-		padding-left: 56px;
+		padding-right: $grid-unit-50;
+		padding-left: $grid-unit-50;
 	}
 }
diff --git a/src/admin/editor-config/components/filter/index.js b/src/admin/editor-config/components/filter/index.js
@@ -48,6 +48,7 @@ export default function Filter( { editorMode, setEditorMode, searchQuery, setSea
 						variant={ editorMode === mode.value ? 'primary' : 'secondary' }
 						onClick={ () => onChangeMode( mode.value ) }
 						disabled={ searchQuery }
+						__next40pxDefaultSize
 					>
 						{ mode.label }
 					</Button>

diff --git a/src/admin/editor-config/components/filter/style.scss b/src/admin/editor-config/components/filter/style.scss
@@ -1,28 +1,26 @@
 .chbe-admin-editor-config-filter {
 	display: flex;
-	gap: 16px;
+	gap: $grid-unit-20;
 
 	.chbe-admin-editor-config-filter__mode {
 		display: flex;
-		width: 260px;
+		flex: 1;
 
 		.components-button {
 			flex: 1;
 			justify-content: center;
 
 			&.is-secondary {
-				background: #fff;
+				background: $white;
 			}
 		}
 	}
 
 	.chbe-admin-editor-config-filter__search {
 		flex: 1;
 
-		input[type="search"].components-search-control__input {
-			height: 36px;
-			background: #fff;
-			border: 1px solid #d6e2ed;
+		.components-input-control__container {
+			background: $white;
 		}
 	}
 }
diff --git a/src/admin/editor-config/components/item-help/style.scss b/src/admin/editor-config/components/item-help/style.scss
@@ -15,34 +15,14 @@
 		max-width: 100%;
 	}
 
-	.components-form-toggle {
-
-		.components-form-toggle__track {
-			width: 48px;
-			height: 24px;
-			border-radius: 12px;
-		}
-
-		.components-form-toggle__thumb {
-			top: 4px;
-			left: 5px;
-			width: 16px;
-			height: 16px;
-		}
-
-		&.is-checked .components-form-toggle__thumb {
-			transform: translateX(23px);
-		}
-	}
-
 	.chbe-admin-editor-config-item-help-modal__content {
 
 		> * {
 			margin: 0;
 		}
 
 		> * + * {
-			margin-top: 16px;
+			margin-top: $grid-unit-20;
 		}
 	}
 
@@ -57,7 +37,7 @@
 		}
 
 		> * + * {
-			margin: 16px 0 0;
+			margin: $grid-unit-20 0 0;
 		}
 
 		ul {
@@ -66,10 +46,6 @@
 			list-style: disc outside;
 		}
 
-		.components-notice {
-			padding: 6px 12px;
-		}
-
 		.components-notice__content {
 			margin: 0;
 		}
@@ -78,7 +54,7 @@
 	.chbe-admin-editor-config-item-help-modal__items {
 		display: flex;
 		flex-wrap: wrap;
-		gap: 24px;
+		gap: $grid-unit-30;
 
 		@media screen and (max-width: 782px) {
 			flex-flow: column;
@@ -104,7 +80,7 @@
 	.chbe-admin-editor-config-item-help-modal__item {
 		display: flex;
 		flex-flow: column;
-		gap: 16px;
+		gap: $grid-unit-20;
 		align-items: flex-start;
 
 		> * {
@@ -113,7 +89,7 @@
 
 		.components-button {
 			height: auto;
-			padding: 6px;
+			padding: $grid-unit-05;
 		}
 	}
 }
diff --git a/src/admin/editor-config/editor-options/minimap/side.js b/src/admin/editor-config/editor-options/minimap/side.js
@@ -57,6 +57,7 @@ export default function MinimapSide() {
 							key={ index }
 							variant={ editorOptions.minimap.side === item.value ? 'primary' : undefined }
 							onClick={ () => onChange( item.value ) }
+							size="compact"
 						>
 							{ item.label }
 						</Button>

diff --git a/src/admin/editor-config/editor-options/multi-cursor-modifier.js b/src/admin/editor-config/editor-options/multi-cursor-modifier.js
@@ -54,6 +54,7 @@ export default function MultiCursorModifier() {
 							key={ index }
 							variant={ editorOptions.multiCursorModifier === item.value ? 'primary' : undefined }
 							onClick={ () => onChange( item.value ) }
+							size="compact"
 						>
 							{ item.label }
 						</Button>

diff --git a/src/admin/editor-config/editor-options/multi-cursor-paste.js b/src/admin/editor-config/editor-options/multi-cursor-paste.js
@@ -57,6 +57,7 @@ export default function MultiCursorPaste() {
 							key={ index }
 							variant={ editorOptions.multiCursorPaste === item.value ? 'primary' : undefined }
 							onClick={ () => onChange( item.value ) }
+							size="compact"
 						>
 							{ item.label }
 						</Button>

diff --git a/src/admin/editor-config/editor-settings/insert-spaces.js b/src/admin/editor-config/editor-settings/insert-spaces.js
@@ -52,6 +52,7 @@ export default function InsertSpaces() {
 							key={ index }
 							variant={ editorSettings.insertSpaces === item.value ? 'primary' : undefined }
 							onClick={ () => onChange( item.value ) }
+							size="compact"
 						>
 							{ item.label }
 						</Button>

diff --git a/src/admin/editor-config/style.scss b/src/admin/editor-config/style.scss
@@ -6,7 +6,7 @@
 .chbe-admin-editor-config {
 	display: flex;
 	flex-flow: row-reverse;
-	gap: 32px;
+	gap: $grid-unit-40;
 
 	@media screen and (max-width: 782px) {
 		flex-flow: column;
@@ -21,28 +21,28 @@
 		display: flex;
 		flex: 1;
 		flex-flow: column;
-		gap: 32px;
+		gap: $grid-unit-40;
 	}
 
 	.chbe-admin-editor-config__basic-settings {
 		display: flex;
 		flex-flow: column;
-		gap: 16px;
-		padding: 24px;
-		background: #fff;
-		border: 1px solid #d6e2ed;
+		gap: $grid-unit-20;
+		padding: $grid-unit-30;
+		background: $white;
+		border: $border-width solid $gray-300;
 	}
 
 	.chbe-admin-editor-config__advanced-settings {
 		display: flex;
 		flex-flow: column;
-		gap: 8px;
+		gap: $grid-unit-10;
 	}
 
 	.chbe-admin-editor-config__item {
 		display: flex;
 		flex-wrap: wrap;
-		gap: 8px;
+		gap: $grid-unit-10;
 		align-items: flex-start;
 		justify-content: flex-start;
 		min-height: auto;
@@ -54,10 +54,10 @@
 
 	.chbe-admin-editor-config__preview {
 		position: sticky;
-		top: 40px;
+		top: $grid-unit-50;
 		display: flex;
 		flex-flow: column;
-		gap: 32px;
+		gap: $grid-unit-40;
 		width: 50%;
 		height: 100%;
 

diff --git a/src/admin/options/style.scss b/src/admin/options/style.scss
@@ -1,7 +1,7 @@
 .chbe-admin-options {
 	display: flex;
 	flex-flow: column;
-	gap: 32px;
+	gap: $grid-unit-30;
 
 	> .components-button {
 		align-self: flex-start;