refactor: update for patterns

components/editor/intelli/menu/menu-bubble.jsx

@@ -1,5 +1,6 @@
 import { BubbleMenu } from '@tiptap/react'
 import React from 'react'
+import { MagicWandIcon } from '@radix-ui/react-icons'
 
 export const MenuBubble = ({ editor }) => {
   const selection = editor.commands.getSelectedText()
@@ -12,7 +13,7 @@ export const MenuBubble = ({ editor }) => {
       value="left" aria-label="Left aligned"
       className={editor.isActive('bold') ? 'is-active BubbleMenuItem' : 'BubbleMenuItem'}
     >
-      优化表达
+      <MagicWandIcon /> 优化表达
     </button>
     }
   </BubbleMenu>

pages/editor.css

@@ -56,13 +56,13 @@ button {
 }
 
 .ToggleGroup {
-    display: inline-flex;
-    background-color: var(--mauve-6);
+    display: flex;
     border-radius: 4px;
-    box-shadow: 0 2px 2px var(--black-a7);
+    justify-content: center;
 }
 
 .ToggleGroupItem {
+    cursor: pointer;
     background-color: white;
     color: var(--mauve-11);
     height: 35px;
@@ -73,6 +73,7 @@ button {
     align-items: center;
     justify-content: center;
     margin-left: 1px;
+    box-shadow: 0 2px 2px var(--black-a7);
 }
 
 .ToggleGroupItem:first-child {
@@ -102,7 +103,17 @@ button {
 
 .BubbleMenuItem {
     padding: 0.5em;
-    color: var(--mauve-11);
+    background: #fff;
+    border-radius: 4px;
+    color: #000;
+    box-shadow: 0 2px 2px var(--black-a7);
+    cursor: pointer;
+}
+
+.BubbleMenuItem svg {
+    color: var(--violet-11);
+    font-weight: bold;
+    display: inline;
 }
 
 :root {

styles/Home.module.css

@@ -79,7 +79,7 @@
   height: 1em;
 }
 
-@media (max-width: 800px) {
+@media (max-width: 600px) {
   .grid {
     width: 100%;
     flex-direction: column;

styles/global.css

@@ -97,6 +97,7 @@ input {
     padding-left: 25px;
     user-select: none;
     outline: none;
+    cursor: pointer;
 }
 
 .DropdownMenuSubTrigger[data-state='open'] {