Resolved eslint warnings

2020-09-30 23:06:23 +05:30
parent 351dfbbde1
commit 6d0377a6a9
4 changed files with 38 additions and 37 deletions
@@ -31,6 +31,14 @@ const Addons = props => {
    tempElement.click()
    document.body.removeChild(tempElement)
  }
+
+  const blogPostKeyDown = (event) => {
+    const keycode = (event.keyCode ? event.keyCode : event.which);
+    if(keycode === '13'){
+      blogPostPorkflow();
+    }
+  }
+
  return (
    <div className="flex justify-center items-start flex-col w-full px-2 sm:px-6 mb-10">
      <div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2">
@@ -114,6 +122,7 @@ const Addons = props => {
            download
            <span
              onClick={blogPostPorkflow}
+              onKeyDown={blogPostKeyDown}
              role="button"
              tabIndex="0"
              style={{ cursor: "pointer", color: "#002ead" }}
@@ -2,7 +2,9 @@ import React from "react"
 const Donate = () => {
  return (
    <>
-      <div className="text-center text-4xl my-2">Support 🙏</div>
+      <div className="text-center text-4xl my-2">Support&nbsp;
+        <span role="img" aria-label="praying hand emoji">🙏</span>
+      </div>
      <div className="flex flex-col sm:flex-row items-start justify-between">
        <div className="w-full sm:w-2/3">
          <div className="text-2xl mb-2">
@@ -28,12 +30,13 @@ const Donate = () => {
          </div>
        </div>
        <div className="w-full sm:w-1/3 flex flex-col justify-center items-center">
-          Tip💰
+          <span>Tip<span role="img" aria-label="Dollar medal">💰</span></span>
          {/* Ko-Fi */}
          <a
            href="https://ko-fi.com/A0A81XXSX"
            className="flex items-center justify-evenly bg-red-500 text-white py-2 px-4 my-2"
            target="_blank"
+            rel="noreferrer"
          >
            <img
              className="w-6 h-6 mr-2"
@@ -47,6 +50,7 @@ const Donate = () => {
            href="https://www.paypal.me/rahuldkjain/10"
            className="flex items-center justify-evenly bg-blue-500 text-white py-2 px-4 my-2"
            target="_blank"
+            rel="noreferrer"
          >
            <img
              className="w-6 h-6 mr-2"
@@ -60,6 +64,7 @@ const Donate = () => {
            href="https://www.buymeacoffee.com/rahuldkjain"
            className="flex items-center justify-evenly bg-orange-500 text-white py-2 px-4 my-2"
            target="_blank"
+            rel="noreferrer"
          >
            <img
              className="w-6 h-6 mr-2"
@@ -266,7 +266,7 @@ const MarkdownPreview = props => {
    skills.forEach(skill => {
      if (props.skills[skill]) {
        listSkills.push(
-          <a href={skillWebsites[skill]} target="_blank">
+          <a href={skillWebsites[skill]} target="_blank" rel="noreferrer">
            <img
              className="my-4 mx-4 h-6 w-6 sm:h-10 sm:w-10"
              key={skill}
@@ -518,6 +518,7 @@ const IndexPage = () => {
              tabIndex="0"
              role="button"
              onClick={handleGenerate}
+              onKeyDown={(e) => e.key === 13 && handleGenerate()}
            >
              Generate README
            </div>
@@ -529,21 +530,17 @@ const IndexPage = () => {
        {generateMarkdown || generatePreview ? (
          <div className="markdown-section p-4 sm:py-4 sm:px-10">
            <div className="w-full flex justify-between items-center">
-              <div
-                className="cursor-pointer text-base w-1/6 border-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center p-1"
-                tabIndex="0"
-                role="button"
+              <button
+                className="text-base w-1/6 border-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center p-1"
                onClick={handleBackToEdit}
              >
-                <ArrowLeftIcon size={16} />
+                <ArrowLeftIcon size={24} />
                <span className="hidden sm:block"> back to edit</span>
-              </div>
+              </button>

-              <div
-                className="cursor-pointer text-base w-1/6 border-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center p-1"
-                tabIndex="0"
+              <button
+                className="text-base w-1/6 border-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center p-1"
                id="copy-button"
-                role="button"
                onClick={handleCopyToClipboard}
              >
                {copyObj.isCopied === true ? (
@@ -554,38 +551,32 @@ const IndexPage = () => {
                <span className="hidden sm:block" id="copy-markdown">
                  {copyObj.copiedText}
                </span>
-              </div>
+              </button>

-              <div
-                className="cursor-pointer text-base w-1/6 border-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center p-1"
-                tabIndex="0"
+              <button
+                className="text-base w-1/6 border-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center p-1"
                id="download-md-button"
-                role="button"
                onClick={handleDownloadMarkdown}
              >
                <DownloadIcon size={24} />
                <span className="hidden sm:block" id="download-markdown">
                  download markdown
                </span>
-              </div>
+              </button>

-              <div
-                className="cursor-pointer text-base w-1/6 border-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center p-1"
-                tabIndex="0"
+              <button
+                className="text-base w-1/6 border-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center p-1"
                id="download-json-button"
-                role="button"
                onClick={handleDownloadJson}
              >
                <FileCodeIcon size={24} />
                <span className="hidden sm:block" id="download-json">
                  download backup
                </span>
-              </div>
+              </button>

-              <div
-                className="cursor-pointer text-base w-1/6 border-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center p-1"
-                tabIndex="0"
-                role="button"
+              <button
+                className="text-base w-1/6 border-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center p-1"
                onClick={handleGeneratePreview}
              >
                {previewMarkdown.isPreview ? (
@@ -596,7 +587,7 @@ const IndexPage = () => {
                <span className="hidden sm:block ml-1" id="preview-markdown">
                  {previewMarkdown.buttonText}
                </span>
-              </div>
+              </button>
            </div>

            <div className="w-full flex justify-center items-center">
@@ -648,14 +639,12 @@ const IndexPage = () => {
                new feature
              </span>
            </div>
-            <div
+            <button
              className="text-xxs sm:text-sm border-2 w-auto px-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center"
-              role="button"
-              tabIndex="0"
              onClick={handleResetForm}
            >
              Reset form
-            </div>
+            </button>
          </div>
          <div className="w-full flex justify-start items-center my-4">
            <input
@@ -665,14 +654,12 @@ const IndexPage = () => {
              value={restore}
              onChange={e => setRestore(e.target.value)}
            />
-            <div
+            <button
              className="text-xxs sm:text-sm border-2 w-32 border-solid border-gray-900 bg-gray-100 flex items-center justify-center py-1"
-              role="button"
-              tabIndex="0"
              onClick={handleRestore}
            >
              Restore
-            </div>
+            </button>
          </div>
          <div className="flex flex-col items-start justify-center">
            <div className="text-green-700 font-medium">Tips</div>