💾 Replaced Button Text with Icons

Author: aromalanil

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "markdown-editor",
-  "version": "1.9.0",
+  "version": "1.9.1",
   "description": "A react app to preview and edit Markdown",
   "private": true,
   "author": {
@@ -21,6 +21,7 @@
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-full-screen": "^0.3.1",
+    "react-icons": "^3.11.0",
     "react-scripts": "3.4.1",
     "react-split": "^2.0.7"
   },

package.json

@@ -40,20 +40,21 @@ body {
   width: 0%;
 }
 
-.btn {
+.btn{
+  display:flex;
+  align-items: center;
+  justify-content: center;
   cursor: pointer;
-  font-size: 0.9rem;
-  padding: 0.4rem 1rem;
-  font-weight: 600;
-  border-radius: 0.2rem;
+  font-size: 1.1rem;
+  border-radius: 0.3rem;
   display: inline-block;
-  line-height: 1.2rem;
   color: var(--nav-item-color);
   background-color: var(--primary-color);
   transition: color, background-color var(--color-transition);
   border: none;
   transition: filter 200ms ease;
   margin: 0 0.5rem;
+  padding:0.4rem .4rem .15rem;
   &:hover {
     filter: brightness(1.1);
   }

src/App.scss

@@ -2,6 +2,9 @@ import React, { useEffect, useState, useRef } from "react";
 import Snackbar from "@material-ui/core/Snackbar";
 import { Alert, AlertTitle } from "@material-ui/lab";
 import placeholder from "../data/placeholder";
+import { MdContentCopy as CopyIcon } from "react-icons/md";
+import { MdDelete as CleanIcon } from "react-icons/md";
+import { Tooltip } from "@material-ui/core";
 
 function MarkdownEdit({ content, changeContent }) {
   const [open, setOpen] = useState(false);
@@ -39,12 +42,16 @@ function MarkdownEdit({ content, changeContent }) {
       <div className="section-title">
         <h3>Markdown</h3>
         <div className="right-section">
-          <button onClick={handleCopyButton} className="btn">
-          Copy
-          </button>
-          <button onClick={handleClearButton} className="btn">
-            Clear
-          </button>
+          <Tooltip title="Copy to Clipboard">
+            <button onClick={handleCopyButton} className="btn">
+              <CopyIcon />
+            </button>
+          </Tooltip>
+          <Tooltip title="Clean">
+            <button onClick={handleClearButton} className="btn">
+              <CleanIcon />
+            </button>
+          </Tooltip>
         </div>
       </div>
       <textarea

src/components/MarkdownEdit.jsx

@@ -1,9 +1,11 @@
 import React, { useState, useEffect } from "react";
 import * as marked from "marked";
-import Prism from "prismjs";
+import Prism from "prismjs"; //css for Prism is imported in ThemeSelector
 import "../utils/prism-imports";
 import { FullScreen, useFullScreenHandle } from "react-full-screen";
-//css for Prism is imported in ThemeSelector
+import { CgSoftwareDownload as SaveIcon } from "react-icons/cg";
+import { RiFullscreenFill as FullScreenIcon } from "react-icons/ri";
+import { Tooltip } from "@material-ui/core";
 
 function MarkdownPreview({ content }) {
   const [html, setHtml] = useState(getHtml(content));
@@ -22,8 +24,8 @@ function MarkdownPreview({ content }) {
 
   const handleSaveClick = () => {
     let link = document.createElement("a");
-    link.href=`data:text/html,${html}`;
-    link.download="export.html";
+    link.href = `data:text/html,${html}`;
+    link.download = "export.html";
     link.click();
   };
 
@@ -32,12 +34,16 @@ function MarkdownPreview({ content }) {
       <div className="section-title">
         <h3>Preview</h3>
         <div className="right-section">
+        <Tooltip title="FullScreen" title="Download HTML">
           <button className="btn" onClick={handleSaveClick}>
-            Save
-          </button>
-          <button className="btn" onClick={handleFullScreen}>
-            Fullscreen
+            <SaveIcon />
           </button>
+          </Tooltip>
+          <Tooltip title="FullScreen">
+            <button className="btn" onClick={handleFullScreen}>
+              <FullScreenIcon />
+            </button>
+          </Tooltip>
         </div>
       </div>
       <FullScreen handle={handle}>