Add text hint for CreateSchemaButton

nk2028 · Dec 8, 2024 · f505543 · f505543
1 parent 6a52736
commit f505543
Showing 1 changed file with 6 additions and 1 deletion.
diff --git a/src/Components/SchemaEditor.tsx b/src/Components/SchemaEditor.tsx
@@ -128,15 +128,19 @@ const CreateSchemaButton = styled.button`
   align-items: center;
   justify-content: center;
   border-radius: 9999px;
-  min-width: 1.75rem;
   min-height: 1.75rem;
+  padding: 0 0.375rem;
+  gap: 0.125rem;
   font-size: 1rem;
   color: #555;
   transition: background-color 150ms;
   &:hover,
   &:focus {
     background-color: #ccc;
   }
+  & > .fa-fw {
+    width: 1em;
+  }
 `;
 const EditorArea = styled.div`
   position: relative;
@@ -748,6 +752,7 @@ export default function SchemaEditor({ state, setState, commonOptions, evaluateH
         ))}
         <CreateSchemaButton title="新增方案" onClick={createSchema.current}>
           <FontAwesomeIcon icon={faPlus} fixedWidth />
+          <div>加載更多注音方案</div>
         </CreateSchemaButton>
       </TabBar>
       <EditorArea ref={setEditorArea} lang="en-x-code">