Update allows allow button

Author: gcurbelo123

service/templates/authorize.html

@@ -44,9 +44,9 @@ <h1>
       <button type="submit" name="approve" value="true" required>Connect</button>
     </footer>
     <div id="always-allow-field">
-      <label aria-labelledby="always-allow-label">
-        Always allow? 
-        <input type="checkbox" id="always_allow" name="always_allow">
+      <label for="always_allow" class="always-allow-label">
+        <input type="checkbox" id="always_allow" name="always_allow" class="always-allow-checkbox">
+        <span class="always-allow-text">Always allow?</span>
       </label>
     </div>
   </form>
@@ -95,5 +95,62 @@ <h1>
 #auth-form h1 {
   margin-bottom: 0; /* override Core-Styles */
 }
+
+/* Always allow checkbox styling */
+#always-allow-field {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 1rem;
+  margin-bottom: 0;
+}
+
+.always-allow-label {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  padding: 0.5rem 1rem;
+  border-radius: 0.375rem;
+  transition: background-color 0.2s ease;
+  user-select: none;
+  color: inherit;
+  vertical-align: middle;
+}
+
+.always-allow-label::after,
+.always-allow-label::before,
+.always-allow-label *::after,
+.always-allow-label *::before {
+  content: none !important;
+  display: none !important;
+}
+
+.always-allow-label:hover {
+  background-color: rgba(0, 0, 0, 0.03);
+}
+
+.always-allow-checkbox {
+  width: 1.25rem;
+  height: 1.25rem;
+  cursor: pointer;
+  accent-color: #0066cc;
+  margin: 0;
+  vertical-align: middle;
+  align-self: center;
+}
+
+.always-allow-text {
+  display: inline-flex;
+  align-items: center;
+  font-size: 1.25rem;
+  color: #333;
+  font-weight: 400;
+  line-height: 1.25rem;
+  height: 1.25rem;
+  visibility: visible;
+  vertical-align: middle;
+}
 </style>
 {% endblock %}