Green button

src/App.tsx

@@ -57,7 +57,7 @@
   useEffect(() => void insideUseEffect(), [markdown]);
   async function insideUseEffect() {
     // prepare dictionary
     let d = ExtractDefinitions(markdown, opts.prefix, opts.suffix);
     const newd = new Map<string, string>();
     const promises: Promise<Map<string, string>>[] = [];
     d.forEach((v, k) => {
@@ -69,10 +69,10 @@
     Promise.all(promises).then(() => setDict(newd));
 
     // prepare HTML
     var md;
     try {
       md = replaceExternalSyntax(markdown.replace(/!define[\s\S]*$/m, "")); // !define以下をすべて取り去る。
     } catch (e: any) {
       md = e.toString();
     }
     MDToHTML(md.replaceAll(opts.prefix, "##").replaceAll(opts.suffix, ""))
@@ -142,27 +142,27 @@
   };
 
   return (
     <>
       <div className="save_container">
         <div className="upload_save">
           <UploadMarkdown onFileContentChange={setFileContent} />
-          <Button variant="text" onClick={saveFile}>
+          <Button variant="text" onClick={saveFile} color="success">
             保存
           </Button>
         </div>
         <div className="upload_save">
           <UploadImage onImageChange={handleImageChange} />
         </div>
       </div>
       {visualize == false && (
         <>
-          <div className="upload_save">
+        <div className="upload_save">
             <Button
               variant="text"
               onClick={() => {
                 setVisualize(true);
               }}
-            >
+              color="success">
               編集画面の表示
             </Button>
           </div>
@@ -180,7 +180,7 @@
               onClick={() => {
                 setVisualize(false);
               }}
-            >
+              color="success">
               編集画面の非表示
             </Button>
           </div>

src/index.css

@@ -79,7 +79,7 @@ button {
   font-size: 1em;
   font-weight: 500;
   font-family: inherit;
-  background-color: #70ffe0;
+  background-color: #C9F569;
   cursor: pointer;
   transition: border-color 0.25s;
 }

src/uploadImage.tsx

@@ -13,7 +13,7 @@
 };
 
 export default function UploadImage({ onImageChange }: ImageUploadProps) {
   const [imageFile, setImageFile] = useState<File | null>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
   // 初回ロード時に localStorage から画像データを読み込む
@@ -60,10 +60,10 @@
         />
       </label>
 
-      <Button onClick={() => fileInputRef.current?.click()}>
+      <Button variant="contained" onClick={() => fileInputRef.current?.click()}color="success">
         ファイルを選択
       </Button>
-      <Button onClick={deleteStoredImage}>
+      <Button variant="contained" onClick={deleteStoredImage} color="success">
         消去する
       </Button>
     </>

src/uploadMarkdown.tsx

@@ -13,13 +13,13 @@
 };
 
 export default function UploadMarkdown({ onFileContentChange }: MarkdownProps) {
   const [textFile, setTextFile] = useState<File | null>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
   // 初回ロード時に localStorage からデータを読み込む
   useEffect(() => {
     const storedText = localStorage.getItem('item');
     const fileName = localStorage.getItem('filename');
     if (storedText) {
       onFileContentChange(storedText); // 親コンポーネントにデータを渡す
     }
@@ -63,10 +63,10 @@
         />
       </label>
 
-      <Button onClick={() => fileInputRef.current?.click()}>
+      <Button variant="contained" onClick={() => fileInputRef.current?.click()} color="success">
         ファイルを選択
       </Button>
-      <Button onClick={deleteStoredText}>
+      <Button variant="contained" onClick={deleteStoredText} color="success">
         消去する
       </Button>
     </>