improved structure

added store to control the popup
changed popup colors

build/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('lodash', 'wp-block-editor', 'wp-components', 'wp-compose', 'wp-data', 'wp-dom-ready', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-react-refresh-runtime'), 'version' => '7a7febaf218bcb4733d0');
+<?php return array('dependencies' => array('lodash', 'wp-block-editor', 'wp-components', 'wp-compose', 'wp-data', 'wp-dom-ready', 'wp-element', 'wp-hooks', 'wp-i18n'), 'version' => '6dac87034627fdfc401f');

build/style-index.css

@@ -1,57 +1,5 @@
-/*!***************************************************************************************************************************************************************************************************************************************!*\
+:root{--mind-brand-color:#e455df}
-  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/style.scss ***!
+.mind-popup{color:#000;margin-top:0;max-height:380px;position:relative;top:15%;width:750px}.mind-popup .components-modal__content{padding:0}.mind-popup .components-modal__content>div{display:flex;flex-direction:column;height:100%}.mind-popup-overlay{z-index:1000001}.mind-popup-content{flex:1;overflow:auto;padding:10px}.mind-popup-footer{background-color:#f6f6f6;border-top:1px solid #e8e7e7;padding:10px}.mind-popup-footer-logo{color:var(--mind-brand-color);display:flex;font-weight:500;gap:6px}.mind-popup-prompts{display:flex;flex-direction:column}.mind-popup-prompts .mind-popup-prompts-category{color:#b5b1b1;font-weight:500;padding:20px 10px 10px}.mind-popup-prompts .mind-popup-prompts-button{background-color:transparent;border:none;border-radius:5px;color:#000;padding:10px;text-align:left}.mind-popup-prompts .mind-popup-prompts-button:focus,.mind-popup-prompts .mind-popup-prompts-button:hover{background-color:rgba(0,0,0,.05)}
-  \***************************************************************************************************************************************************************************************************************************************/
+.mind-icon{color:var(--mind-brand-color);height:20px;width:20px}
-.mind-toolbar-icon {
+.mind-toolbar-dropdown-wrapper{width:100%}.mind-toolbar-dropdown-wrapper button{padding-left:8px;padding-right:8px;width:100%}.mind-toolbar-dropdown-wrapper button .dashicon{margin-left:auto}
-  color: #e455df;
+.mind-post-toolbar-toggle{flex:100%;white-space:nowrap}.mind-post-toolbar-toggle button{--wp-components-color-accent:var(--mind-brand-color);color:var(--mind-brand-color);font-weight:500;position:relative}.mind-post-toolbar-toggle button:after{bottom:0;content:"";left:0;opacity:.05;position:absolute;right:0;top:0}.mind-post-toolbar-toggle button:focus,.mind-post-toolbar-toggle button:hover{color:var(--mind-brand-color)}.mind-post-toolbar-toggle button:focus:after,.mind-post-toolbar-toggle button:hover:after{background-color:var(--mind-brand-color)}.mind-post-toolbar-toggle svg{margin-bottom:-2px;margin-right:6px;margin-top:-2px}
-  width: 20px;
-  height: 20px;
-}
-
-.mind-toolbar-dropdown-wrapper {
-  width: 100%;
-}
-.mind-toolbar-dropdown-wrapper button {
-  width: 100%;
-  padding-left: 8px;
-  padding-right: 8px;
-}
-.mind-toolbar-dropdown-wrapper button .dashicon {
-  margin-left: auto;
-}
-
-.mind-editor-toolbar-toggle {
-  flex: 100%;
-  white-space: nowrap;
-}
-.mind-editor-toolbar-toggle button {
-  color: #e455df;
-}
-.mind-editor-toolbar-toggle button:hover, .mind-editor-toolbar-toggle button:focus {
-  color: #e455df;
-  background: rgba(228, 85, 223, 0.05);
-}
-.mind-editor-toolbar-toggle svg {
-  margin-top: -2px;
-  margin-right: 6px;
-  margin-bottom: -2px;
-}
-
-.mind-popup {
-  width: 800px;
-  margin-top: 100px;
-  background-color: rgb(243, 243, 243);
-  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2), 0 25px 70px 10px rgba(0, 0, 0, 0.25);
-  border: 1px solid rgba(255, 255, 255, 0.4);
-}
-.mind-popup .components-modal__header {
-  padding: 24px 20px 12px;
-}
-.mind-popup .components-modal__content {
-  padding: 0 20px 20px;
-}
-
-.mind-popup-overlay {
-  background-color: rgba(143, 135, 143, 0.25);
-}
-
-/*# sourceMappingURL=style-index.css.map*/

build/style-index.css.map

@@ -1 +0,0 @@
-{"version":3,"file":"./style-index.css","mappings":";;;AAGA;EACC,cAJO;EAKP;EACA;AAFD;;AAKA;EACC;AAFD;AAIC;EACC;EACA;EACA;AAFF;AAIE;EACC;AAFH;;AAQA;EACC;EACA;AALD;AAOC;EACC,cA7BM;AAwBR;AAOE;EAEC,cAjCK;EAkCL;AANH;AAUC;EACC;EACA;EACA;AARF;;AAaA;EACC;EACA;EACA;EACA;EACA;AAVD;AAYC;EACC;AAVF;AAYC;EACC;AAVF;;AAaA;EACC;AAVD,C","sources":["webpack://mind/./src/style.scss"],"sourcesContent":["$color: #e455df;\n$popup_padding: 20px;\n\n.mind-toolbar-icon {\n\tcolor: $color;\n\twidth: 20px;\n\theight: 20px;\n}\n\n.mind-toolbar-dropdown-wrapper {\n\twidth: 100%;\n\n\tbutton {\n\t\twidth: 100%;\n\t\tpadding-left: 8px;\n\t\tpadding-right: 8px;\n\n\t\t.dashicon {\n\t\t\tmargin-left: auto;\n\t\t}\n\t}\n}\n\n// Button in editor Toolbar.\n.mind-editor-toolbar-toggle {\n\tflex: 100%;\n\twhite-space: nowrap;\n\n\tbutton {\n\t\tcolor: $color;\n\n\t\t&:hover,\n\t\t&:focus {\n\t\t\tcolor: $color;\n\t\t\tbackground: rgba($color, 5%);\n\t\t}\n\t}\n\n\tsvg {\n\t\tmargin-top: -2px;\n\t\tmargin-right: 6px;\n\t\tmargin-bottom: -2px;\n\t}\n}\n\n// Popup.\n.mind-popup {\n\twidth: 800px;\n\tmargin-top: 100px;\n\tbackground-color: rgb(243, 243, 243);\n\tbox-shadow: 0 0 2px 0 rgba(0, 0, 0, 20%), 0 25px 70px 10px rgba(0, 0, 0, 25%);\n\tborder: 1px solid rgba(255, 255, 255, 40%);\n\n\t.components-modal__header {\n\t\tpadding: 24px $popup_padding 12px;\n\t}\n\t.components-modal__content {\n\t\tpadding: 0 $popup_padding $popup_padding;\n\t}\n}\n.mind-popup-overlay {\n\tbackground-color: rgba(143, 135, 143, 25%);\n}\n"],"names":[],"sourceRoot":""}

src/extensions/block-toolbar/index.js

@@ -1,8 +1,16 @@
+/**
+ * Styles
+ */
+import './style.scss';
+
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
+import { addFilter } from '@wordpress/hooks';
+import { BlockControls } from '@wordpress/block-editor';
+import { createHigherOrderComponent } from '@wordpress/compose';
+import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	ToolbarGroup,
 	DropdownMenu,
@@ -14,7 +22,7 @@ import {
 /**
  * Internal dependencies
  */
-import TOOLBAR_ICON from './icon';
+import TOOLBAR_ICON from '../../utils/icon';
 
 const ALLOWED_BLOCKS = ['core/paragraph', 'core/heading'];
 
@@ -24,11 +32,11 @@ const ALLOWED_BLOCKS = ['core/paragraph', 'core/heading'];
  * @param {Object} data - block data.
  * @return {boolean} allowed.
  */
-export function isToolbarAllowed(data) {
+function isToolbarAllowed(data) {
 	return ALLOWED_BLOCKS.includes(data.name);
 }
 
-export function Toolbar() {
+function Toolbar() {
 	const { selectedBlocks, selectedClientIds, canRemove } = useSelect(
 		(select) => {
 			const {
@@ -47,6 +55,8 @@ export function Toolbar() {
 		[]
 	);
 
+	const { open } = useDispatch('mind/popup');
+
 	console.log(selectedClientIds);
 
 	// const { replaceBlocks } = useDispatch( blockEditorStore );
@@ -71,11 +81,21 @@ export function Toolbar() {
 					return (
 						<>
 							<MenuGroup>
-								<MenuItem>{__('Improve', 'mind')}</MenuItem>
+								<MenuItem onClick={open}>
-								<MenuItem>{__('Paraphrase', 'mind')}</MenuItem>
+									{__('Improve', 'mind')}
-								<MenuItem>{__('Simplify', 'mind')}</MenuItem>
+								</MenuItem>
-								<MenuItem>{__('Expand', 'mind')}</MenuItem>
+								<MenuItem onClick={open}>
-								<MenuItem>{__('Shorten', 'mind')}</MenuItem>
+									{__('Paraphrase', 'mind')}
+								</MenuItem>
+								<MenuItem onClick={open}>
+									{__('Simplify', 'mind')}
+								</MenuItem>
+								<MenuItem onClick={open}>
+									{__('Expand', 'mind')}
+								</MenuItem>
+								<MenuItem onClick={open}>
+									{__('Shorten', 'mind')}
+								</MenuItem>
 							</MenuGroup>
 							<MenuGroup>
 								<DropdownMenu
@@ -95,13 +115,13 @@ export function Toolbar() {
 										return (
 											<>
 												<MenuGroup>
-													<MenuItem>
+													<MenuItem onClick={open}>
 														{__('Casual', 'mind')}
 													</MenuItem>
-													<MenuItem>
+													<MenuItem onClick={open}>
 														{__('Neutral', 'mind')}
 													</MenuItem>
-													<MenuItem>
+													<MenuItem onClick={open}>
 														{__('Formal', 'mind')}
 													</MenuItem>
 												</MenuGroup>
@@ -126,25 +146,25 @@ export function Toolbar() {
 										return (
 											<>
 												<MenuGroup>
-													<MenuItem>
+													<MenuItem onClick={open}>
 														{__('Friendly', 'mind')}
 													</MenuItem>
-													<MenuItem>
+													<MenuItem onClick={open}>
 														{__(
 															'Professional',
 															'mind'
 														)}
 													</MenuItem>
-													<MenuItem>
+													<MenuItem onClick={open}>
 														{__('Witty', 'mind')}
 													</MenuItem>
-													<MenuItem>
+													<MenuItem onClick={open}>
 														{__(
 															'Heartfelt',
 															'mind'
 														)}
 													</MenuItem>
-													<MenuItem>
+													<MenuItem onClick={open}>
 														{__(
 															'Educational',
 															'mind'
@@ -163,3 +183,34 @@ export function Toolbar() {
 		</ToolbarGroup>
 	);
 }
+
+/**
+ * Override the default edit UI to include a new block inspector control for
+ * assigning the custom attribute if needed.
+ *
+ * @param {Function} BlockEdit Original component.
+ *
+ * @return {string} Wrapped component.
+ */
+const withToolbarControl = createHigherOrderComponent((OriginalComponent) => {
+	function MindToolbarToggle(props) {
+		const allow = isToolbarAllowed(props);
+
+		if (!allow) {
+			return <OriginalComponent {...props} />;
+		}
+
+		return (
+			<>
+				<OriginalComponent {...props} />
+				<BlockControls group="other">
+					<Toolbar />
+				</BlockControls>
+			</>
+		);
+	}
+
+	return MindToolbarToggle;
+}, 'withToolbarControl');
+
+addFilter('editor.BlockEdit', 'mind/block-toolbar-toggle', withToolbarControl);

src/extensions/block-toolbar/style.scss

@@ -0,0 +1,13 @@
+.mind-toolbar-dropdown-wrapper {
+	width: 100%;
+
+	button {
+		width: 100%;
+		padding-left: 8px;
+		padding-right: 8px;
+
+		.dashicon {
+			margin-left: auto;
+		}
+	}
+}

src/extensions/post-toolbar/index.js

@@ -1,9 +1,11 @@
+import './style.scss';
+
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { createRoot, useState } from '@wordpress/element';
+import { createRoot } from '@wordpress/element';
-import { subscribe } from '@wordpress/data';
+import { subscribe, useDispatch } from '@wordpress/data';
 import domReady from '@wordpress/dom-ready';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { throttle } from 'lodash';
@@ -11,13 +13,12 @@ import { throttle } from 'lodash';
 /**
  * Internal dependencies
  */
-import TOOLBAR_ICON from './icon';
+import TOOLBAR_ICON from '../../utils/icon';
-import Popup from './popup';
 
-const TOOLBAR_TOGGLE_CONTAINER_CLASS = 'mind-editor-toolbar-toggle';
+const TOOLBAR_TOGGLE_CONTAINER_CLASS = 'mind-post-toolbar-toggle';
 
 function Toggle() {
-	const [isOpened, setIsOpened] = useState(false);
+	const { toggle } = useDispatch('mind/popup');
 
 	return (
 		<>
@@ -27,19 +28,12 @@ function Toggle() {
 				onClick={(e) => {
 					e.preventDefault();
 
-					setIsOpened(!isOpened);
+					toggle();
 				}}
 			>
 				{TOOLBAR_ICON}
 				{__('Open Mind', '@@text_domain')}
 			</button>
-			{isOpened ? (
-				<Popup
-					onClose={() => {
-						setIsOpened(!isOpened);
-					}}
-				/>
-			) : null}
 		</>
 	);
 }

src/extensions/post-toolbar/style.scss

@@ -0,0 +1,37 @@
+.mind-post-toolbar-toggle {
+	flex: 100%;
+	white-space: nowrap;
+
+	button {
+		--wp-components-color-accent: var(--mind-brand-color);
+
+		position: relative;
+		color: var(--mind-brand-color);
+		font-weight: 500;
+
+		&::after {
+			content: "";
+			position: absolute;
+			top: 0;
+			right: 0;
+			bottom: 0;
+			left: 0;
+			opacity: 0.05;
+		}
+
+		&:hover,
+		&:focus {
+			color: var(--mind-brand-color);
+
+			&::after {
+				background-color: var(--mind-brand-color);
+			}
+		}
+	}
+
+	svg {
+		margin-top: -2px;
+		margin-right: 6px;
+		margin-bottom: -2px;
+	}
+}

src/index.js

@@ -3,48 +3,10 @@
  */
 import './style.scss';
 
-/**
- * WordPress dependencies
- */
-import { addFilter } from '@wordpress/hooks';
-import { BlockControls } from '@wordpress/block-editor';
-import { createHigherOrderComponent } from '@wordpress/compose';
-
-console.log(2);
-
 /**
  * Internal dependencies
  */
-import './editor-toolbar-toggle';
+import './store';
-import { Toolbar, isToolbarAllowed } from './toolbar';
+import './popup';
-
+import './extensions/block-toolbar';
-/**
+import './extensions/post-toolbar';
- * Override the default edit UI to include a new block inspector control for
- * assigning the custom attribute if needed.
- *
- * @param {Function} BlockEdit Original component.
- *
- * @return {string} Wrapped component.
- */
-const withToolbarControl = createHigherOrderComponent((OriginalComponent) => {
-	function MindToolbarToggle(props) {
-		const allow = isToolbarAllowed(props);
-
-		if (!allow) {
-			return <OriginalComponent {...props} />;
-		}
-
-		return (
-			<>
-				<OriginalComponent {...props} />
-				<BlockControls group="other">
-					<Toolbar />
-				</BlockControls>
-			</>
-		);
-	}
-
-	return MindToolbarToggle;
-}, 'withToolbarControl');
-
-addFilter('editor.BlockEdit', 'mind/block-toolbar-toggle', withToolbarControl);

src/popup.js

@@ -1,30 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { Button, Modal } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import TOOLBAR_ICON from './icon';
-
-export default function Popup(props) {
-	const { onClose } = props;
-
-	return (
-		<Modal
-			title={
-				<>
-					{TOOLBAR_ICON}
-					{__('Mind', '@@text_domain')}
-				</>
-			}
-			className="mind-popup"
-			overlayClassName="mind-popup-overlay"
-			onRequestClose={onClose}
-		>
-			{__('Hello there :)', '@@text_domain')}
-		</Modal>
-	);
-}

src/popup/index.js

@@ -0,0 +1,175 @@
+/**
+ * Styles
+ */
+import './style.scss';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { createRoot } from '@wordpress/element';
+import { Modal } from '@wordpress/components';
+import { useSelect, useDispatch } from '@wordpress/data';
+import domReady from '@wordpress/dom-ready';
+
+/**
+ * Internal dependencies
+ */
+import TOOLBAR_ICON from '../utils/icon';
+
+const POPUP_CONTAINER_CLASS = 'mind-popup-container';
+
+const prompts = [
+	// Base.
+	{
+		type: 'prompt',
+		label: __('Improve', 'mind'),
+	},
+	{
+		type: 'prompt',
+		label: __('Paraphrase', 'mind'),
+	},
+	{
+		type: 'prompt',
+		label: __('Simplify', 'mind'),
+	},
+	{
+		type: 'prompt',
+		label: __('Expand', 'mind'),
+	},
+	{
+		type: 'prompt',
+		label: __('Shorten', 'mind'),
+	},
+
+	// Formality.
+	{
+		type: 'category',
+		label: __('Formality', 'mind'),
+	},
+	{
+		type: 'prompt',
+		label: __('Casual', 'mind'),
+	},
+	{
+		type: 'prompt',
+		label: __('Neutral', 'mind'),
+	},
+	{
+		type: 'prompt',
+		label: __('Formal', 'mind'),
+	},
+
+	// Tone.
+	{
+		type: 'category',
+		label: __('Tone', 'mind'),
+	},
+	{
+		type: 'prompt',
+		label: __('Friendly', 'mind'),
+	},
+	{
+		type: 'prompt',
+		label: __('Professional', 'mind'),
+	},
+	{
+		type: 'prompt',
+		label: __('Witty', 'mind'),
+	},
+	{
+		type: 'prompt',
+		label: __('Heartfelt', 'mind'),
+	},
+	{
+		type: 'prompt',
+		label: __('Educational', 'mind'),
+	},
+];
+
+export default function Popup(props) {
+	const { onClose } = props;
+
+	const { close } = useDispatch('mind/popup');
+
+	const { isOpen } = useSelect((select) => {
+		const { isOpen: checkIsOpen } = select('mind/popup');
+
+		return { isOpen: checkIsOpen() };
+	});
+
+	if (!isOpen) {
+		return null;
+	}
+
+	return (
+		<Modal
+			title={false}
+			className="mind-popup"
+			overlayClassName="mind-popup-overlay"
+			onRequestClose={() => {
+				close();
+
+				if (onClose) {
+					onClose();
+				}
+			}}
+			__experimentalHideHeader
+		>
+			<div className="mind-popup-content">
+				<div className="mind-popup-prompts">
+					{prompts.map((data) => {
+						if (data.type === 'category') {
+							return (
+								<span
+									key={data.type + data.label}
+									className="mind-popup-prompts-category"
+								>
+									{data.label}
+								</span>
+							);
+						}
+
+						return (
+							<button
+								key={data.type + data.label}
+								className="mind-popup-prompts-button"
+							>
+								{data.label}
+							</button>
+						);
+					})}
+				</div>
+			</div>
+			<div className="mind-popup-footer">
+				<div className="mind-popup-footer-logo">
+					{TOOLBAR_ICON}
+					{__('Mind', '@@text_domain')}
+				</div>
+			</div>
+		</Modal>
+	);
+}
+
+// .block-editor
+// Insert popup renderer in editor.
+domReady(() => {
+	// Check if popup exists already.
+	if (document.querySelector(`.${POPUP_CONTAINER_CLASS}`)) {
+		return;
+	}
+
+	const blockEditor = document.querySelector('.block-editor');
+
+	if (!blockEditor) {
+		return;
+	}
+
+	const toggleContainer = document.createElement('div');
+	toggleContainer.classList.add(POPUP_CONTAINER_CLASS);
+
+	blockEditor.appendChild(toggleContainer);
+
+	const root = createRoot(toggleContainer);
+	root.render(<Popup />);
+});

src/popup/style.scss

@@ -0,0 +1,66 @@
+// Popup.
+.mind-popup {
+	position: relative;
+	top: 15%;
+	margin-top: 0;
+	width: 750px;
+	max-height: 380px;
+	color: #000;
+
+	.components-modal__content {
+		padding: 0;
+
+		> div {
+			display: flex;
+			flex-direction: column;
+			height: 100%;
+		}
+	}
+}
+.mind-popup-overlay {
+	// Upper then dropdown.
+	z-index: 1000001;
+}
+
+.mind-popup-content {
+	overflow: auto;
+	flex: 1;
+	padding: 10px;
+}
+.mind-popup-footer {
+	padding: 10px;
+	background-color: #f6f6f6;
+	border-top: 1px solid #e8e7e7;
+}
+.mind-popup-footer-logo {
+	display: flex;
+	gap: 6px;
+	font-weight: 500;
+	color: var(--mind-brand-color);
+}
+
+.mind-popup-prompts {
+	display: flex;
+	flex-direction: column;
+
+	.mind-popup-prompts-category {
+		font-weight: 500;
+		padding: 10px;
+		padding-top: 20px;
+		color: #b5b1b1;
+	}
+
+	.mind-popup-prompts-button {
+		background-color: transparent;
+		color: #000;
+		border: none;
+		text-align: left;
+		padding: 10px;
+		border-radius: 5px;
+
+		&:hover,
+		&:focus {
+			background-color: rgba(#000, 5%);
+		}
+	}
+}

src/store/actions.js

@@ -0,0 +1,17 @@
+export function open() {
+	return {
+		type: 'OPEN',
+	};
+}
+
+export function close() {
+	return {
+		type: 'CLOSE',
+	};
+}
+
+export function toggle() {
+	return {
+		type: 'TOGGLE',
+	};
+}

src/store/index.js

@@ -0,0 +1,17 @@
+/**
+ * Internal dependencies
+ */
+import reducer from './reducer';
+import * as selectors from './selectors';
+import * as actions from './actions';
+
+/**
+ * WordPress dependencies
+ */
+import { registerStore } from '@wordpress/data';
+
+registerStore('mind/popup', {
+	reducer,
+	selectors,
+	actions,
+});

src/store/reducer.js

@@ -0,0 +1,26 @@
+function reducer(state = { isOpen: false }, action = {}) {
+	switch (action.type) {
+		case 'CLOSE':
+			if (state.isOpen) {
+				return {
+					isOpen: false,
+				};
+			}
+			break;
+		case 'OPEN':
+			if (!state.isOpen) {
+				return {
+					isOpen: true,
+				};
+			}
+			break;
+		case 'TOGGLE':
+			return {
+				isOpen: !state.isOpen,
+			};
+	}
+
+	return state;
+}
+
+export default reducer;

src/store/selectors.js

@@ -0,0 +1,3 @@
+export function isOpen(state) {
+	return state?.isOpen || false;
+}

src/style.scss

@@ -1,63 +1,3 @@
-$color: #e455df;
+:root {
-$popup_padding: 20px;
+	--mind-brand-color: #e455df;
-
-.mind-toolbar-icon {
-	color: $color;
-	width: 20px;
-	height: 20px;
-}
-
-.mind-toolbar-dropdown-wrapper {
-	width: 100%;
-
-	button {
-		width: 100%;
-		padding-left: 8px;
-		padding-right: 8px;
-
-		.dashicon {
-			margin-left: auto;
-		}
-	}
-}
-
-// Button in editor Toolbar.
-.mind-editor-toolbar-toggle {
-	flex: 100%;
-	white-space: nowrap;
-
-	button {
-		color: $color;
-
-		&:hover,
-		&:focus {
-			color: $color;
-			background: rgba($color, 5%);
-		}
-	}
-
-	svg {
-		margin-top: -2px;
-		margin-right: 6px;
-		margin-bottom: -2px;
-	}
-}
-
-// Popup.
-.mind-popup {
-	width: 800px;
-	margin-top: 100px;
-	background-color: rgb(243, 243, 243);
-	box-shadow: 0 0 2px 0 rgba(0, 0, 0, 20%), 0 25px 70px 10px rgba(0, 0, 0, 25%);
-	border: 1px solid rgba(255, 255, 255, 40%);
-
-	.components-modal__header {
-		padding: 24px $popup_padding 12px;
-	}
-	.components-modal__content {
-		padding: 0 $popup_padding $popup_padding;
-	}
-}
-.mind-popup-overlay {
-	background-color: rgba(143, 135, 143, 25%);
 }

src/utils/icon/index.js

@@ -1,3 +1,8 @@
+/**
+ * Styles
+ */
+import './style.scss';
+
 export default (
 	<svg
 		width="20"
@@ -5,7 +10,7 @@ export default (
 		viewBox="0 0 66 66"
 		fill="none"
 		xmlns="http://www.w3.org/2000/svg"
-		className="mind-toolbar-icon"
+		className="mind-icon"
 	>
 		<path
 			fillRule="evenodd"

src/utils/icon/style.scss

@@ -0,0 +1,5 @@
+.mind-icon {
+	color: var(--mind-brand-color);
+	width: 20px;
+	height: 20px;
+}