ui

static/backup.html

@@ -55,7 +55,6 @@
       <div class="checkbox-container">
         <div class="checkbox" style="margin-top: 12px">
           <input type="radio" id="backup" name="backup-option" />
-          <div class="checkbox-shape"></div>
           <label for="backup">
             Encrypted Backup to Nostr Relay
           </label>
@@ -64,7 +63,6 @@
       <div class="checkbox-container">
         <div class="checkbox manual-checkbox" style="margin-top: 12px">
           <input type="radio" id="manual-backup" name="backup-option" />
-          <div class="checkbox-shape"></div>
           <label for="manual-backup">
             DO NOT store on relay (Manual Backups)
           </label>

static/css/styles.css

@@ -133,6 +133,10 @@ a {
   display: none;
 }
 
+.checkbox input[type="radio"] {
+  display: none;
+}
+
 /* Create a new box */
 .checkbox label {
   padding-left: 32px;
@@ -157,6 +161,31 @@ a {
   z-index: -1;
 }
 
+.checkbox input[type="radio"] + label::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 20px;
+  height: 20px;
+  border: 1px solid #a3a3a3;
+  border-radius: 50%;
+  background-color: transparent;
+}
+
+.checkbox input[type="radio"]:checked + label::after {
+    content: '';
+    position: absolute;
+    left: 5px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background-color: #a012c7;
+}
+
 /* Display a checkmark when the checkbox is checked */
 .checkbox input[type="checkbox"]:checked + .checkbox-shape::before {
   content: "✓";

static/liquidity.html

@@ -38,7 +38,6 @@
     <section class="setup-content">
       <div class="checkbox" style="margin-top: 60px">
         <input type="radio" id="automate" name="service" data-group="service" />
-        <div class="checkbox-shape"></div>
         <label for="automate" class="automate">
           Use Automation Service
           <div class="question-box">
@@ -58,7 +57,6 @@
       </div>
       <div class="checkbox" style="margin-top: 30px">
         <input type="radio" id="manual" name="service" data-group="service" />
-        <div class="checkbox-shape"></div>
         <label for="manual">Manage my channels manually</label>
       </div>
       <div>