improve toolbar styles

packages/editor/src/components/CodeMirrorEditor/Toolbar/TextFormatTools.module.scss

@@ -0,0 +1,4 @@
+// == Colors
+.btn-text-format-tools-toggler {
+  --bs-btn-active-bg: var(--bs-secondary-bg);
+}

packages/editor/src/components/CodeMirrorEditor/Toolbar/TextFormatTools.tsx

@@ -3,6 +3,11 @@ import { useCallback, useState } from 'react';
 import { Collapse } from 'reactstrap';
 
 
+import styles from './TextFormatTools.module.scss';
+
+const btnTextFormatToolsTogglerClass = styles['btn-text-format-tools-toggler'];
+
+
 type TogglarProps = {
   isOpen: boolean,
   onClick?: () => void,
@@ -10,17 +15,17 @@ type TogglarProps = {
 
 const TextFormatToolsToggler = (props: TogglarProps): JSX.Element => {
 
-  const { onClick } = props;
+  const { isOpen, onClick } = props;
 
-  // TODO: change color by isOpen
+  const activeClass = isOpen ? 'active' : '';
 
   return (
     <button
       type="button"
-      className="btn btn-toolbar-button"
+      className={`btn btn-toolbar-button ${btnTextFormatToolsTogglerClass} ${activeClass}`}
       onClick={onClick}
     >
-      <span className="material-symbols-outlined fs-5">match_case</span>
+      <span className="material-symbols-outlined fs-3">match_case</span>
     </button>
   );
 };

packages/editor/src/components/CodeMirrorEditor/Toolbar/scss/toolbar-button.scss

@@ -1,9 +1,21 @@
+// styles
+.btn-toolbar-button {
+  --bs-btn-border-width: 0;
+}
+
+// set size
 .btn-toolbar-button {
   --bs-btn-padding-x: 0;
   --bs-btn-padding-y: 0;
-  --bs-btn-line-height: 1;
-  --bs-btn-border-width: 0;
 
   width: 24px !important;
   height: 24px !important;
 }
+
+// set icon center
+.btn-toolbar-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+