Added CSS styling to options page.

getvictor · Jul 6, 2024 · c2e2938 · c2e2938
1 parent 74619b4
commit c2e2938
Show file tree

Hide file tree

Showing 9 changed files with 51 additions and 46 deletions.
diff --git a/src/common.css b/src/common.css
@@ -0,0 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.ob-input {
+  @apply block m-1.5 p-2 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500;
+}
diff --git a/src/options.css b/src/options.css
@@ -0,0 +1 @@
+@import "./common.css";
diff --git a/src/options.ts b/src/options.ts
@@ -1,4 +1,5 @@
 import { NUMBER_OF_CSS_SELECTORS, StoredConfig } from "./constants"
+import "./options.css"
 
 chrome.storage.sync.get(null, (data) => {
   const config = data as StoredConfig

diff --git a/src/popup.css b/src/popup.css
@@ -1,13 +1,15 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "./common.css";
 
-.ob-enable {
-  @apply m-1.5 relative w-16 h-8 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:start-[4px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-7 after:w-7 after:transition-all peer-checked:bg-blue-600;
+.ob-center {
+  @apply w-full inline-flex items-center justify-center;
 }
 
-.ob-secret {
-  @apply block w-52 m-1.5 p-2 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500;
+.ob-enable-input {
+  @apply sr-only;
+}
+
+.ob-enable-span {
+  @apply m-1.5 relative w-16 h-8 bg-gray-200 rounded-full after:content-[''] after:absolute after:top-0.5 after:start-[4px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-7 after:w-7 after:transition-all;
 }
 
 .ob-button-link {

diff --git a/static/options.css b/static/options.css
diff --git a/static/options.html b/static/options.html
@@ -2,20 +2,21 @@
 <html lang="en">
   <head>
     <title>OpenBlur advanced options</title>
-    <link rel="stylesheet" type="text/css" href="options.css" />
   </head>
-  <body>
-    <h2>OpenBlur advanced options</h2>
-    <h3>CSS selectors to blur</h3>
-    <input class="css_selector" id="css_selector_0" type="text" />
+  <body class="m-1.5">
+    <h1 class="text-3xl m-1.5 font-extrabold">OpenBlur advanced options</h1>
     <br />
-    <input class="css_selector" id="css_selector_1" type="text" />
-    <br />
-    <input class="css_selector" id="css_selector_2" type="text" />
-    <br />
-    <input class="css_selector" id="css_selector_3" type="text" />
-    <br />
-    <input class="css_selector" id="css_selector_4" type="text" />
+    <h2 class="text-xl m-1.5 font-bold">CSS selectors to blur</h2>
+    <label for="css_selector_0" class="invisible"></label>
+    <input id="css_selector_0" class="ob-input w-96" type="text" placeholder="CSS selector" />
+    <label for="css_selector_1" class="invisible"></label>
+    <input id="css_selector_1" class="ob-input w-96" type="text" placeholder="CSS selector" />
+    <label for="css_selector_2" class="invisible"></label>
+    <input id="css_selector_2" class="ob-input w-96" type="text" placeholder="CSS selector" />
+    <label for="css_selector_3" class="invisible"></label>
+    <input id="css_selector_3" class="ob-input w-96" type="text" placeholder="CSS selector" />
+    <label for="css_selector_4" class="invisible"></label>
+    <input id="css_selector_4" class="ob-input w-96" type="text" placeholder="CSS selector" />
     <script src="options.js"></script>
   </body>
 </html>
diff --git a/static/popup.html b/static/popup.html
@@ -1,41 +1,38 @@
 <html lang="en">
   <head>
     <title>OpenBlur popup</title>
-    <link rel="stylesheet" type="text/css" href="popup.css" />
   </head>
   <body>
-    <label class="w-full inline-flex items-center justify-center cursor-pointer">
-      <input id="enabled" type="checkbox" class="sr-only peer" />
-      <span class="ob-enable"></span>
+    <label class="ob-center cursor-pointer">
+      <input id="enabled" type="checkbox" class="ob-enable-input peer" />
+      <span
+        class="ob-enable-span peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white peer-checked:bg-blue-600"
+      ></span>
     </label>
 
     <label for="item_0" class="invisible"></label>
-    <input id="item_0" class="ob-secret" type="password" placeholder="secret" />
+    <input id="item_0" class="ob-input w-52" type="password" placeholder="secret" />
     <label for="item_1" class="invisible"></label>
-    <input id="item_1" class="ob-secret" type="password" placeholder="secret" />
+    <input id="item_1" class="ob-input w-52" type="password" placeholder="secret" />
     <label for="item_2" class="invisible"></label>
-    <input id="item_2" class="ob-secret" type="password" placeholder="secret" />
+    <input id="item_2" class="ob-input w-52" type="password" placeholder="secret" />
     <label for="item_3" class="invisible"></label>
-    <input id="item_3" class="ob-secret" type="password" placeholder="secret" />
+    <input id="item_3" class="ob-input w-52" type="password" placeholder="secret" />
     <label for="item_4" class="invisible"></label>
-    <input id="item_4" class="ob-secret" type="password" placeholder="secret" />
+    <input id="item_4" class="ob-input w-52" type="password" placeholder="secret" />
     <label for="item_5" class="invisible"></label>
-    <input id="item_5" class="ob-secret" type="password" placeholder="secret" />
+    <input id="item_5" class="ob-input w-52" type="password" placeholder="secret" />
     <label for="item_6" class="invisible"></label>
-    <input id="item_6" class="ob-secret" type="password" placeholder="secret" />
+    <input id="item_6" class="ob-input w-52" type="password" placeholder="secret" />
     <label for="item_7" class="invisible"></label>
-    <input id="item_7" class="ob-secret" type="password" placeholder="secret" />
+    <input id="item_7" class="ob-input w-52" type="password" placeholder="secret" />
     <label for="item_8" class="invisible"></label>
-    <input id="item_8" class="ob-secret" type="password" placeholder="secret" />
+    <input id="item_8" class="ob-input w-52" type="password" placeholder="secret" />
     <label for="item_9" class="invisible"></label>
-    <input id="item_9" class="ob-secret" type="password" placeholder="secret" />
-    <div class="w-full inline-flex items-center justify-center">
-      <button
-        id="go-to-options"
-        class="text-indigo-400 background-transparent m-1.5 px-3 py-1 text-xs outline-none focus:outline-none ease-linear transition-all duration-150"
-      >
-        Advanced options
-      </button>
+    <input id="item_9" class="ob-input w-52" type="password" placeholder="secret" />
+
+    <div class="ob-center">
+      <button id="go-to-options" class="ob-button-link">Advanced options</button>
     </div>
     <script src="popup.js"></script>
   </body>

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -2,7 +2,7 @@ import type { Config } from "tailwindcss"
 
 // noinspection JSUnusedGlobalSymbols
 export default {
-  content: ["./static/popup.html"],
+  content: ["./static/*.html"],
   theme: {
     extend: {},
   },

diff --git a/webpack.common.ts b/webpack.common.ts
@@ -28,7 +28,7 @@ const config: Configuration = {
             loader: "postcss-loader",
             options: {
               postcssOptions: {
-                plugins: ["tailwindcss"],
+                plugins: ["postcss-import", "tailwindcss"],
               },
             },
           },