Build [v1.14.32]

frontend/components/AIOnboarding.tsx

@@ -256,7 +256,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
                     id="save-photo-check"
                     checked={!extractedItems[editingIndex]._skipPhoto}
                     onChange={(e) => updateEditingItem({ _skipPhoto: !e.target.checked })}
-                    className="w-4 h-4 rounded border-outline accent-primary cursor-pointer"
+                    className="toggle-pill"
                   />
                   <label htmlFor="save-photo-check" className="text-xs text-[#CCCCCC] font-normal cursor-pointer">
                     Save this photo with the item

frontend/components/ImageAdjustmentModal.tsx

@@ -300,7 +300,7 @@ export function ImageAdjustmentModal({ imageUrl, onConfirm, onCancel }: ImageAdj
               type="checkbox"
               checked={useImage}
               onChange={(e) => setUseImage(e.target.checked)}
-              className="w-4 h-4"
+              className="toggle-pill"
             />
             Use this image
           </label>

frontend/components/StatCard.tsx

@@ -13,7 +13,7 @@ export default function StatCard({ label, value, icon: Icon }: StatCardProps) {
       <div className="flex items-center gap-2.5 min-w-0">
         {Icon && <Icon className="w-5 h-5 text-primary flex-shrink-0" aria-hidden="true" />}
         <span className="text-base md:text-lg text-secondary font-normal truncate">
-          {label}
+          &nbsp; {label}
         </span>
       </div>
 

frontend/components/admin/LdapManager.tsx

@@ -43,18 +43,12 @@ export default function LdapManager({
             </p>
           </div>
         </div>
-        <button 
-          onClick={() => setLdapConfig({...ldapConfig, ldap_enabled: !ldapConfig.ldap_enabled})}
-          className={cn(
-            "w-10 h-5 relative transition-all duration-300 border",
-            ldapConfig.ldap_enabled ? "bg-primary border-primary" : "bg-surface-bright border-border"
-          )}
-        >
-          <div className={cn(
-            "absolute top-0.5 w-3.5 h-3.5 bg-surface-container-lowest transition-all",
-            ldapConfig.ldap_enabled ? "right-0.5" : "left-0.5"
-          )} />
-        </button>
+        <input
+          type="checkbox"
+          checked={ldapConfig.ldap_enabled}
+          onChange={(e) => setLdapConfig({...ldapConfig, ldap_enabled: e.target.checked})}
+          className="toggle-pill"
+        />
       </div>
 
       <div className="grid sm:grid-cols-2 gap-3">
@@ -130,18 +124,12 @@ export default function LdapManager({
             </p>
           </div>
         </div>
-        <button 
-          onClick={() => setLdapConfig({...ldapConfig, use_tls: !ldapConfig.use_tls})}
-          className={cn(
-            "w-10 h-5 relative transition-all duration-300 border",
-            ldapConfig.use_tls ? "bg-primary border-primary" : "bg-surface-bright border-border"
-          )}
-        >
-          <div className={cn(
-            "absolute top-0.5 w-3.5 h-3.5 bg-surface-container-lowest transition-all",
-            ldapConfig.use_tls ? "right-0.5" : "left-0.5"
-          )} />
-        </button>
+        <input
+          type="checkbox"
+          checked={ldapConfig.use_tls}
+          onChange={(e) => setLdapConfig({...ldapConfig, use_tls: e.target.checked})}
+          className="toggle-pill"
+        />
       </div>
 
       <div className="flex gap-2 pt-0">