Added Tailwind styling to popup.

getvictor · Jul 5, 2024 · e92d233 · e92d233
1 parent 7f3238e
commit e92d233
Show file tree

Hide file tree

Showing 8 changed files with 1,329 additions and 92 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,8 +17,13 @@
     "@types/chrome": "^0.0.266",
     "@types/eslint__js": "^8.42.3",
     "copy-webpack-plugin": "^12.0.2",
+    "css-loader": "^7.1.2",
     "eslint": "^8.57.0",
+    "postcss": "^8.4.39",
+    "postcss-loader": "^8.1.1",
     "prettier": "3.3.2",
+    "style-loader": "^4.0.0",
+    "tailwindcss": "^3.4.4",
     "ts-loader": "^9.5.1",
     "ts-node": "^10.9.2",
     "typescript": "^5.4.5",

diff --git a/src/popup.css b/src/popup.css
@@ -0,0 +1,15 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.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-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-button-link {
+  @apply text-indigo-400 m-1.5 px-3 py-1 text-xs outline-none focus:outline-none ease-linear transition-all duration-150;
+}
diff --git a/src/popup.ts b/src/popup.ts
@@ -1,4 +1,5 @@
 import { MODES, NUMBER_OF_LITERALS, StoredConfig } from "./constants"
+import "./popup.css"
 
 console.debug("OpenBlur popup script loaded")
 

diff --git a/static/popup.css b/static/popup.css
diff --git a/static/popup.html b/static/popup.html
@@ -4,21 +4,39 @@
     <link rel="stylesheet" type="text/css" href="popup.css" />
   </head>
   <body>
-    <label class="switch">
-      <input type="checkbox" id="enabled" />
-      <span class="slider round"></span>
+    <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>
-    <input class="secret" type="password" id="item_0" />
-    <input class="secret" type="password" id="item_1" />
-    <input class="secret" type="password" id="item_2" />
-    <input class="secret" type="password" id="item_3" />
-    <input class="secret" type="password" id="item_4" />
-    <input class="secret" type="password" id="item_5" />
-    <input class="secret" type="password" id="item_6" />
-    <input class="secret" type="password" id="item_7" />
-    <input class="secret" type="password" id="item_8" />
-    <input class="secret" type="password" id="item_9" />
-    <button id="go-to-options" class="button-link">Advanced options</button>
+
+    <label for="item_0" class="invisible"></label>
+    <input id="item_0" class="ob-secret" type="password" placeholder="secret" />
+    <label for="item_1" class="invisible"></label>
+    <input id="item_1" class="ob-secret" type="password" placeholder="secret" />
+    <label for="item_2" class="invisible"></label>
+    <input id="item_2" class="ob-secret" type="password" placeholder="secret" />
+    <label for="item_3" class="invisible"></label>
+    <input id="item_3" class="ob-secret" type="password" placeholder="secret" />
+    <label for="item_4" class="invisible"></label>
+    <input id="item_4" class="ob-secret" type="password" placeholder="secret" />
+    <label for="item_5" class="invisible"></label>
+    <input id="item_5" class="ob-secret" type="password" placeholder="secret" />
+    <label for="item_6" class="invisible"></label>
+    <input id="item_6" class="ob-secret" type="password" placeholder="secret" />
+    <label for="item_7" class="invisible"></label>
+    <input id="item_7" class="ob-secret" type="password" placeholder="secret" />
+    <label for="item_8" class="invisible"></label>
+    <input id="item_8" class="ob-secret" 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>
+    </div>
     <script src="popup.js"></script>
   </body>
 </html>
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./static/popup.html"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
diff --git a/webpack.common.ts b/webpack.common.ts
@@ -10,7 +10,7 @@ const config: Configuration = {
     popup: "./src/popup.ts",
   },
   resolve: {
-    extensions: [".ts"],
+    extensions: [".ts", ".css"],
   },
   module: {
     rules: [
@@ -19,6 +19,21 @@ const config: Configuration = {
         loader: "ts-loader",
         exclude: /node_modules/,
       },
+      {
+        test: /\.css$/,
+        use: [
+          "style-loader",
+          "css-loader",
+          {
+            loader: "postcss-loader",
+            options: {
+              postcssOptions: {
+                plugins: ["tailwindcss"],
+              },
+            },
+          },
+        ],
+      },
     ],
   },
   output: {