Some more nice styling.

Shared (Extension)/Resources/options.build.css

@@ -711,6 +711,17 @@ select {
   color: rgb(134 25 143 / var(--tw-text-opacity));
 }
 
+[type="checkbox"] {
+  height: 1.25rem;
+  width: 1.25rem;
+  border-radius: 9999px;
+  --tw-bg-opacity: 1;
+  background-color: rgb(245 208 254 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(134 25 143 / var(--tw-text-opacity));
+  accent-color: #f5d0fe;
+}
+
 .visible {
   visibility: visible;
 }

Shared (Extension)/Resources/options.css

@@ -10,4 +10,8 @@
   .input {
     @apply bg-fuchsia-200 text-fuchsia-800 rounded-lg p-1.5;
   }
+
+  [type="checkbox"] {
+    @apply text-fuchsia-800 bg-fuchsia-200 rounded-full accent-fuchsia-200 w-5 h-5;
+  }
 }

Shared (Extension)/Resources/options.html

@@ -30,10 +30,12 @@
     <template x-for="(relay, index) in relays" :key="index">
       <tr>
         <td class="p-2 w-1/3" x-text="relay.url"></td>
-        <td class="p-2 text-center"><input type="checkbox" x-model="relay.read"
+        <td class="p-2 text-center">
-            @change="await saveRelaysForProfile(index)"></td>
+          <input type="checkbox" x-model="relay.read" @change="await saveRelaysForProfile(index)">
-        <td class="p-2 text-center"><input type="checkbox" x-model="relay.write"
+        </td>
-            @change="await saveRelaysForProfile(index)"></td>
+        <td class="p-2 text-center">
+          <input type="checkbox" x-model="relay.write" @change="await saveRelaysForProfile(index)">
+        </td>
         <td class="p-2 text-center">
           <button class="btn" @click="await deleteRelay(index)">Delete</button>
         </td>

package-lock.json

@@ -10,11 +10,11 @@
       "license": "ISC",
       "dependencies": {
         "alpinejs": "^3.10.5",
-        "esbuild": "^0.16.17",
         "nostr-tools": "^1.1.1"
       },
       "devDependencies": {
         "@tailwindcss/forms": "^0.5.3",
+        "esbuild": "^0.16.17",
         "prettier": "^2.8.3",
         "tailwindcss": "^3.2.4"
       }
@@ -26,6 +26,7 @@
       "cpu": [
         "arm"
       ],
+      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -41,6 +42,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -56,6 +58,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -71,6 +74,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "optional": true,
       "os": [
         "darwin"
@@ -86,6 +90,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "optional": true,
       "os": [
         "darwin"
@@ -101,6 +106,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "optional": true,
       "os": [
         "freebsd"
@@ -116,6 +122,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "optional": true,
       "os": [
         "freebsd"
@@ -131,6 +138,7 @@
       "cpu": [
         "arm"
       ],
+      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -146,6 +154,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -161,6 +170,7 @@
       "cpu": [
         "ia32"
       ],
+      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -176,6 +186,7 @@
       "cpu": [
         "loong64"
       ],
+      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -191,6 +202,7 @@
       "cpu": [
         "mips64el"
       ],
+      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -206,6 +218,7 @@
       "cpu": [
         "ppc64"
       ],
+      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -221,6 +234,7 @@
       "cpu": [
         "riscv64"
       ],
+      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -236,6 +250,7 @@
       "cpu": [
         "s390x"
       ],
+      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -251,6 +266,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -266,6 +282,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "optional": true,
       "os": [
         "netbsd"
@@ -281,6 +298,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "optional": true,
       "os": [
         "openbsd"
@@ -296,6 +314,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "optional": true,
       "os": [
         "sunos"
@@ -311,6 +330,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -326,6 +346,7 @@
       "cpu": [
         "ia32"
       ],
+      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -341,6 +362,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -677,6 +699,7 @@
       "version": "0.16.17",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.16.17.tgz",
       "integrity": "sha512-G8LEkV0XzDMNwXKgM0Jwu3nY3lSTwSGY6XbxM9cr9+s0T/qSV1q1JVPBGzm3dcjhCic9+emZDmMffkwgPeOeLg==",
+      "dev": true,
       "hasInstallScript": true,
       "bin": {
         "esbuild": "bin/esbuild"

package.json

@@ -18,10 +18,10 @@
   "license": "ISC",
   "dependencies": {
     "alpinejs": "^3.10.5",
-    "esbuild": "^0.16.17",
     "nostr-tools": "^1.1.1"
   },
   "devDependencies": {
+    "esbuild": "^0.16.17",
     "@tailwindcss/forms": "^0.5.3",
     "prettier": "^2.8.3",
     "tailwindcss": "^3.2.4"

tailwind.config.js

@@ -1,6 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-    content: ['./Shared (Extension)/Resources/*.{html,js}'],
+    content: ['./Shared (Extension)/**/*.{html,js}'],
     theme: {
         extend: {},
     },