Change icon for clarity

Codeinwp · Jul 23, 2024 · 0350644 · 0350644
1 parent 343d5b1
commit 0350644
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 2 deletions.
diff --git a/src/blocks/plugins/dynamic-content/editor.scss b/src/blocks/plugins/dynamic-content/editor.scss
@@ -33,6 +33,22 @@ o-dynamic-link {
 	cursor: pointer;
 }
 
+.components-toolbar {
+	.o-dynamic-button {
+		opacity: 1;
+
+		&.is-pressed {
+			&::before {
+				background: rgba(237, 111, 87, 0.1);
+			}
+		}
+
+		svg {
+			fill: #ED6F57;
+		}
+	}
+}
+
 .wp-block.is-selected o-dynamic,
 .wp-block:not(.is-selected) o-dynamic:not([data-preview]),
 .wp-block:not(.is-selected) o-dynamic[data-preview=""] {

diff --git a/src/blocks/plugins/dynamic-content/link/edit.js b/src/blocks/plugins/dynamic-content/link/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies.
  */
-import { globe } from '@wordpress/icons';
+import { link } from '@wordpress/icons';
 
 /**
  * WordPress dependencies.
@@ -99,11 +99,12 @@ const Edit = ({
 			<BlockControls>
 				<ToolbarGroup>
 					<ToolbarButton
-						icon={ globe }
+						icon={ link }
 						title={ __( 'Dynamic Link', 'otter-blocks' ) }
 						onClick={ () => setOpen( true ) }
 						isDisabled={ isActive }
 						isActive={ isActive }
+						className="o-dynamic-button"
 					/>
 				</ToolbarGroup>
 			</BlockControls>

diff --git a/src/blocks/plugins/dynamic-content/value/edit.js b/src/blocks/plugins/dynamic-content/value/edit.js
@@ -121,6 +121,7 @@ const Edit = ({
 						onClick={ () => setOpen( true ) }
 						isDisabled={ isActive }
 						isActive={ isActive }
+						className="o-dynamic-button"
 					/>
 				</ToolbarGroup>
 			</BlockControls>