From 9dc1446c0756dba2552b46647a6551d743f1f5ca Mon Sep 17 00:00:00 2001
From: abhijithvijayan <34790378+abhijithvijayan@users.noreply.github.com>
Date: Thu, 30 Jan 2020 20:41:52 +0530
Subject: [PATCH] chore: add sample UI

---
 src/ContentScript/index.ts |  2 ++
 src/Options/Options.tsx    |  2 +-
 src/Popup/Popup.tsx        | 37 +++++++++++++++++++++++++++++++++++--
 src/Popup/popup.scss       | 31 +++++++++++++++++++++++++++++++
 4 files changed, 69 insertions(+), 3 deletions(-)

diff --git a/src/ContentScript/index.ts b/src/ContentScript/index.ts
index 1cd57e2..05f7d18 100644
--- a/src/ContentScript/index.ts
+++ b/src/ContentScript/index.ts
@@ -1 +1,3 @@
 document.body.style.filter = 'invert(1)';
+
+export {};
diff --git a/src/Options/Options.tsx b/src/Options/Options.tsx
index 9b4befc..6d5ac5a 100644
--- a/src/Options/Options.tsx
+++ b/src/Options/Options.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-const Options = () => {
+const Options: React.FC = () => {
     return <div>Hello World</div>;
 };
 
diff --git a/src/Popup/Popup.tsx b/src/Popup/Popup.tsx
index 2c0b34d..eed9fc3 100644
--- a/src/Popup/Popup.tsx
+++ b/src/Popup/Popup.tsx
@@ -1,7 +1,40 @@
 import React from 'react';
+import { browser, Tabs } from 'webextension-polyfill-ts';
 
-const Popup = () => {
-    return <div>Hello world</div>;
+function openWebPage(url: string): Promise<Tabs.Tab> {
+    return browser.tabs.create({ url });
+}
+
+const Popup: React.FC = () => {
+    return (
+        <section id="popup">
+            <h2>WEB-EXTENSION-STARTER</h2>
+            <div className="links__holder">
+                <ul>
+                    <li>
+                        <button
+                            type="button"
+                            onClick={(): Promise<Tabs.Tab> => {
+                                return openWebPage('https://github.com/abhijithvijayan/web-extension-starter');
+                            }}
+                        >
+                            GitHub
+                        </button>
+                    </li>
+                    <li>
+                        <button
+                            type="button"
+                            onClick={(): Promise<Tabs.Tab> => {
+                                return openWebPage('https://www.buymeacoffee.com/abhijithvijayan');
+                            }}
+                        >
+                            Buy Me A Coffee
+                        </button>
+                    </li>
+                </ul>
+            </div>
+        </section>
+    );
 };
 
 export default Popup;
diff --git a/src/Popup/popup.scss b/src/Popup/popup.scss
index 991ad79..97605b8 100644
--- a/src/Popup/popup.scss
+++ b/src/Popup/popup.scss
@@ -6,3 +6,34 @@ body {
   color: $black;
   background-color: $greyWhite;
 }
+
+
+#popup {
+  min-width: 350px;
+  padding: 30px 20px;
+
+  h2 {
+    font-size: 25px;
+    text-align: center;
+  }
+
+  .links__holder {
+    ul {
+      display: flex;
+      margin-top: 1em;
+      justify-content: space-around;
+
+      li {
+        button {
+          border-radius: 8%;
+          font-size: 20px;
+          font-weight: 600;
+          background-color: rgba(0, 0 ,255, 0.7);
+          color: white;
+          cursor: pointer;
+          padding: 8px 12px;
+        }
+      }
+    }
+  }
+}
\ No newline at end of file