style: Polish style of command panel

miyanokomiya · Dec 11, 2024 · 0b351e0 · 0b351e0
1 parent 4644300
commit 0b351e0
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git a/src/components/molecules/CommandExamPanel.tsx b/src/components/molecules/CommandExamPanel.tsx
@@ -20,7 +20,9 @@ export const CommandExamPanel: React.FC<Props> = ({ commandExams }) => {
     <div className="transition-opacity duration-500 bg-gray-300 bg-opacity-80 px-2 rounded" style={{ opacity }}>
       {commandExams.map((c) => (
         <div key={c.title} className="flex">
-          {c.command ? <div className="mr-2 font-semibold">{c.command}:</div> : undefined}
+          {c.command ? (
+            <div className="mr-2 px-1 font-semibold bg-gray-400 bg-opacity-70 rounded min-w-4">{c.command}</div>
+          ) : undefined}
           <div>{c.title}</div>
         </div>
       ))}

diff --git a/src/composables/states/appCanvas/commandExams.ts b/src/composables/states/appCanvas/commandExams.ts
@@ -29,7 +29,7 @@ export const COMMAND_EXAM_SRC = {
   TEXT_MOVE_CURSOR: { command: "Ctrl + p, n, b, f", title: "Move cursor" },
   TEXT_BACKSPACE: { command: "Ctrl + h", title: "Backspace" },
   TEXT_DELETE: { command: "Ctrl + d", title: "Delete" },
-  TEXT_EMOJI_PICKER: { command: `${getCtrlOrMetaStr()} + ":"`, title: "Emoji picker" },
+  TEXT_EMOJI_PICKER: { command: `${getCtrlOrMetaStr()} + :`, title: "Emoji picker" },
 
   TOGGLE_GRID: { command: "g", title: "Grid on/off" },
   TOGGLE_PREVIEW: { command: "p", title: "Preview on/off" },
@@ -38,7 +38,7 @@ export const COMMAND_EXAM_SRC = {
 
   NEW_TEXT: { command: "t", title: "New Text" },
   NEW_LINE: { command: "l", title: "New Line" },
-  NEW_EMOJI: { command: `${getCtrlOrMetaStr()} + ":"`, title: "New Emoji" },
+  NEW_EMOJI: { command: `${getCtrlOrMetaStr()} + :`, title: "New Emoji" },
 
   GROUP: { command: `${getCtrlOrMetaStr()} + g`, title: "Group" },
   UNGROUP: { command: `${getCtrlOrMetaStr()} + G`, title: "Ungroup" },