[add]: reset, restore option

src/components/header.js

@@ -6,7 +6,7 @@ import gsap from "gsap"
 import axios from "axios"
 import {Link} from "gatsby"
 
-const Header = props => {
+const Header = (props) => {
   const fetchData = async () => {
     var response = await axios.get(
       "https://api.github.com/repos/rahuldkjain/github-profile-readme-generator"

src/pages/index.css

@@ -409,7 +409,12 @@ a {
   font-size: 12px;
   border: 2px solid var(--grey-15);
 }
-
+.new-tag {
+  font-size: 14px;
+  padding: 2px 4px;
+  background: var(--dark-green);
+  color: white;
+}
 .actions {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
@@ -525,6 +530,7 @@ a {
   }
 
   .actions {
+    grid-template-columns: 1fr;
     flex-direction: column;
   }
 }

src/pages/index.js

@@ -417,9 +417,9 @@ const IndexPage = () => {
   return (
     <>
       <SEO title="GitHub Profile Readme Generator" />
-      <>
+      <div>
         <Header heading="GitHub Profile README Generator" />
-      </>
+      </div>
 
       <div className="form">
         <Title
@@ -597,11 +597,10 @@ const IndexPage = () => {
           ""
         )}
       <div className="config-options">
-        <div className="section-title">Config options</div>
+        <div className="section-title">Config options <span className="new-tag">new feature</span></div>
         <div className="actions">
           <div className="data">
             <input type="text" className="inputField md" placeholder="JSON Backup" value={restore} onChange={e => setRestore(e.target.value)} />
-
             <div className="button github-button" role="button" tabIndex="0" onClick={handleRestore}>
               Restore
           </div>