From 459ed4dc12f4de69697a97faf5cf8ba4713983fd Mon Sep 17 00:00:00 2001
From: abhijithvijayan <34790378+abhijithvijayan@users.noreply.github.com>
Date: Tue, 31 Mar 2020 00:44:00 +0530
Subject: [PATCH] chore: add sample options page

---
 src/Options/Options.tsx | 17 ++++++++++++++++-
 src/Popup/Popup.tsx     |  9 +++++++++
 src/Popup/styles.scss   | 20 +++++++++++++++++---
 3 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/src/Options/Options.tsx b/src/Options/Options.tsx
index 0816685..a44c173 100644
--- a/src/Options/Options.tsx
+++ b/src/Options/Options.tsx
@@ -3,7 +3,22 @@ import React from 'react';
 import './styles.scss';
 
 const Options: React.FC = () => {
-    return <div>Hello World</div>;
+    return (
+        <div>
+            <form>
+                <p>
+                    <label htmlFor="name">Name</label>
+                    <br />
+                    <input type="text" id="name" name="name" spellCheck="false" autoComplete="off" required />
+                </p>
+                <p>
+                    <label htmlFor="logging">
+                        <input type="checkbox" name="logging" /> Show the features enabled on each page in the console
+                    </label>
+                </p>
+            </form>
+        </div>
+    );
 };
 
 export default Options;
diff --git a/src/Popup/Popup.tsx b/src/Popup/Popup.tsx
index fa2bcd1..ba115d2 100644
--- a/src/Popup/Popup.tsx
+++ b/src/Popup/Popup.tsx
@@ -11,6 +11,15 @@ const Popup: React.FC = () => {
     return (
         <section id="popup">
             <h2>WEB-EXTENSION-STARTER</h2>
+            <button
+                id="options__button"
+                type="button"
+                onClick={(): Promise<Tabs.Tab> => {
+                    return openWebPage('options.html');
+                }}
+            >
+                Options Page
+            </button>
             <div className="links__holder">
                 <ul>
                     <li>
diff --git a/src/Popup/styles.scss b/src/Popup/styles.scss
index 97605b8..0ee6041 100644
--- a/src/Popup/styles.scss
+++ b/src/Popup/styles.scss
@@ -17,6 +17,20 @@ body {
     text-align: center;
   }
 
+  #options__button {
+    width: 50%;
+    background: green;
+    color: white;
+    font-weight: 500;
+    border-radius: 15px;
+    padding: 5px 10px;
+    justify-content: center;
+    margin: 20px auto;
+    cursor: pointer;
+    opacity: 0.8;
+    display: flex;
+  }
+
   .links__holder {
     ul {
       display: flex;
@@ -25,13 +39,13 @@ body {
 
       li {
         button {
-          border-radius: 8%;
+          border-radius: 25px;
           font-size: 20px;
           font-weight: 600;
-          background-color: rgba(0, 0 ,255, 0.7);
+          padding: 10px 17px;
+          background-color: rgba(0, 0, 255, 0.7);
           color: white;
           cursor: pointer;
-          padding: 8px 12px;
         }
       }
     }