update UI

Author: kaeizen

src/components/block-styles-control/editor.scss

@@ -1,78 +1,24 @@
 .ugb-block-styles-controls {
-	padding: 8px 16px;
-	&.components-panel__body {
-		border-top: none;
-		margin-bottom: 1px;
-	}
+	padding: 0 16px 8px 8px;
+	position: relative;
+	border-top: none !important;
 
-	.ugb-block-styles-controls__label {
-		display: inline-flex;
-		align-items: center;
-		height: 24px;
-		gap: 6px;
-	}
-
-	.components-base-control__field {
-		display: grid;
-		grid-template-columns: 1fr auto;
-		row-gap: 4px;
+	.ugb-block-styles-controls__wrapper {
 		position: relative;
 
-		> .components-base-control__label {
-			margin-bottom: 0;
-			align-self: center;
-		}
-
-		> .ugb-block-styles__actions {
-			display: flex;
-			align-items: center;
-			gap: 4px;
-			:where(.ugb-button-component:has(.dashicons-update-alt)) {
-				background: #fff;
-				gap: 0;
-				padding: 2px 8px 2px 2px;
-			}
+		.ugb-block-styles-controls__block-style-button {
+			padding-right: 6px;
 		}
 
-		> .components-base-control:has(.ugb-block-styles__select-control) {
-			grid-column: 1/3;
-			margin-bottom: 0;
-			.components-base-control__field {
-				margin-bottom: 0;
-			}
-		}
+		&.has-modified {
+			padding-right: 28px;
 
-		> .ugb-block-styles__select-control {
-			&.has-modified {
-				padding-right: 28px;
-			}
-			> .ugb-button-component {
-				background: #fff;
-				width: 100%;
-				border: 1px solid #00000070;
-				padding: 0px 8px;
-				height: 32px;
-				border-radius: 2px;
-
-				&:focus:not(:disabled) {
-					box-shadow: 0 0 0 1px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-				}
-
-				> .ugb-block-styles__dropdown-icon {
-					margin-right: 0;
-					margin-left: auto;
-					display: inline-flex;
-					gap: 4px;
-				}
+			.stk-control__reset-button {
+				right: 0;
+				top: 0;
+				color: var(--stk-skin-error);
 			}
 		}
-
-		> .stk-control__reset-button {
-			right: unset;
-			top: unset;
-			bottom: 4px;
-			color: var(--stk-skin-error);
-		}
 	}
 
 	.ugb-button-component.has-icon:hover {
@@ -120,3 +66,49 @@
 	gap: 8px;
 	justify-content: flex-end;
 }
+
+.ugb-block-styles-controls__popover {
+	.ugb-block-styles-controls__list .components-button:focus:not(:disabled) {
+		box-shadow: none;
+		outline: 1px solid #e0e0e0;
+	}
+	.components-button {
+		width: 100%;
+		position: relative;
+		padding: 0 4px;
+		height: 28px;
+		outline: 1px solid #e0e0e0;
+
+		&.ugb-block-styles-controls__selected {
+			outline: 2px solid var(--stk-skin-dark) !important;
+		}
+
+		.dashicons-lock {
+			position: absolute;
+			right: 8px;
+		}
+	}
+
+	.components-panel__body-description {
+		margin: 0;
+	}
+
+	.ugb-block-styles-controls__selected-icon {
+		position: absolute;
+	}
+	.ugb-block-styles-controls__label {
+		margin-inline-start: 24px;
+	}
+
+	.ugb-block-styles-controls__action {
+		margin: 0 auto;
+		display: inline-flex;
+		align-items: center;
+		gap: 4px;
+	}
+
+	.ugb-control-separator {
+		width: 100% !important;
+		margin: 0 auto !important;
+	}
+}