Options page revamp

dtinth · Apr 3, 2020 · c787db4 · c787db4
1 parent edb3e60
commit c787db4
Show file tree

Hide file tree

Showing 7 changed files with 71,259 additions and 42 deletions.
diff --git a/options.html b/options.html
@@ -3,49 +3,67 @@
   <head>
     <title>vxchrome</title>
     <style>
-      body {
-        background: #353433;
-        color: #e9e8e7;
-        font: 18px Arimo, sans-serif;
-        padding: 8px 24px;
-      }
-      #log {
-        font: 16px Cousine, Menlo, monospace;
-        min-height: 100vh;
-      }
-      #text {
-        margin: 0;
-        font: bold 32px Arimo, Noto Sans Thai, sans-serif;
-        min-height: 100vh;
-      }
-      #final {
-        color: #d7fc70;
-      }
-      #listening {
-        color: #8b8685;
-        font-weight: normal;
-        font-size: 0.5em;
-      }
+      @import 'tailwind.css';
     </style>
   </head>
-  <body>
-    <!--
-      - TODO [#4]: Use a select box for specifying a language.
-      - The list of available languages is available here: https://www.google.com/intl/en/chrome/demos/speech.html
-      -->
-    first language:
-    <input id="first_language" type="text" placeholder="Enter First language" />
-    <br />
-    second language:
-    <input
-      id="second_language"
-      type="text"
-      placeholder="Enter Second language"
-    />
-    <br />
-    <button id="btn_save">save</button>
+  <body class="bg-353433 text-e9e8e7 p-8 text-base">
+    <h1 class="text-8b8685 text-4xl">
+      vx options
+    </h1>
+    <div class="max-w-lg">
+      <div class="flex items-center mt-6">
+        <div class="w-1/3">
+          <label
+            class="block font-bold md:text-right mb-1 md:mb-0 pr-4"
+            for="first_language"
+          >
+            First language
+          </label>
+        </div>
+        <div class="w-2/3">
+          <input
+            class="block appearance-none w-full bg-090807 border border-454443 hover:border-656463 px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline placeholder-8b8685"
+            id="first_language"
+            type="text"
+            placeholder="Enter second language"
+          />
+        </div>
+      </div>
+
+      <div class="flex items-center mt-4">
+        <div class="w-1/3">
+          <label
+            class="block font-bold md:text-right mb-1 md:mb-0 pr-4"
+            for="second_language"
+          >
+            Second language
+          </label>
+        </div>
+        <div class="w-2/3">
+          <input
+            class="block appearance-none w-full bg-090807 border border-454443 hover:border-656463 px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline placeholder-8b8685"
+            id="second_language"
+            type="text"
+            placeholder="Enter second language"
+          />
+        </div>
+      </div>
+
+      <div class="flex items-center mt-4">
+        <div class="w-1/3"></div>
+        <div class="w-2/3">
+          <button
+            id="btn_save"
+            class="shadow bg-d7fc70 text-090807 focus:shadow-outline focus:outline-none font-bold py-2 px-4 rounded"
+            type="button"
+          >
+            Save
+          </button>
+        </div>
+      </div>
+    </div>
+
     <div id="status"></div>
-    <script src="VXDefaultSettings.js"></script>
-    <script src="options.js"></script>
+    <script type="module" src="options.js"></script>
   </body>
 </html>
diff --git a/options.js b/options.js
@@ -1,4 +1,6 @@
 // Saves options to chrome.storage
+import { defaultSettings } from './src/VXDefaultSettings.js'
+
 function save_options() {
   let firstLanguage = document.getElementById('first_language').value
   let secondLanguage = document.getElementById('second_language').value

diff --git a/package.json b/package.json
@@ -1,5 +1,9 @@
 {
   "devDependencies": {
-    "@types/chrome": "^0.0.103"
+    "@types/chrome": "^0.0.103",
+    "tailwindcss": "^1.2.0"
+  },
+  "scripts": {
+    "prepare": "tailwindcss build tailwind.src.css -o tailwind.css"
   }
 }
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -0,0 +1,19 @@
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        e9e8e7: '#e9e8e7',
+        '8b8685': '#8b8685',
+        '656463': '#656463',
+        '454443': '#454443',
+        '353433': '#353433',
+        '252423': '#252423',
+        '090807': '#090807',
+        bbeeff: '#bbeeff',
+        d7fc70: '#d7fc70',
+      },
+    },
+  },
+  variants: {},
+  plugins: [],
+}