From 945f90d789a4f59813df40c0e6a88befef839257 Mon Sep 17 00:00:00 2001
From: Kawa <us.fame.sq@gmail.com>
Date: Wed, 1 Apr 2026 14:05:14 +0200
Subject: [PATCH] feat(12-01): style DeploymentStep form controls and
 ReviewStep checkbox

- DeploymentStep: include-install label uses text-on-surface, checkbox uses accent-primary
- DeploymentStep: fieldset legends use text-on-surface-container font-medium
- DeploymentStep: all radio/checkbox labels use flex gap-2 text-on-surface cursor-pointer
- DeploymentStep: all radios and checkboxes use accent-primary
- ReviewStep: security checkbox uses accent-[var(--r2b-warning)] for warning-themed accent
---
 src/components/wizard/DeploymentStep.tsx | 35 ++++++++++++++----------
 src/components/wizard/ReviewStep.tsx     |  1 +
 2 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/src/components/wizard/DeploymentStep.tsx b/src/components/wizard/DeploymentStep.tsx
index 7d27da3..ba81ddf 100644
--- a/src/components/wizard/DeploymentStep.tsx
+++ b/src/components/wizard/DeploymentStep.tsx
@@ -28,25 +28,27 @@ export function DeploymentStep() {
       </p>
 
       {/* Include rclone installation toggle */}
-      <div>
-        <label>
+      <div className="flex flex-col gap-2 mb-4">
+        <label className="flex items-center gap-2 text-sm text-on-surface cursor-pointer">
           <input
             type="checkbox"
+            className="accent-primary"
             checked={includeInstall}
             onChange={(e) =>
               dispatch({ type: 'SET_DEPLOYMENT', payload: { includeInstall: e.target.checked } })
             }
           />
-          {' '}Include rclone installation
+          Include rclone installation
         </label>
       </div>
 
       {/* Config deployment path radio group */}
-      <fieldset>
-        <legend>Config deployment path</legend>
-        <label>
+      <fieldset className="mb-4">
+        <legend className="text-sm font-medium text-on-surface-container mb-2">Config deployment path</legend>
+        <label className="flex items-center gap-2 text-sm text-on-surface cursor-pointer">
           <input
             type="radio"
+            className="accent-primary"
             name="configPath"
             value="machine-wide"
             checked={configPath === 'machine-wide'}
@@ -54,11 +56,12 @@ export function DeploymentStep() {
               dispatch({ type: 'SET_DEPLOYMENT', payload: { configPath: 'machine-wide' } })
             }
           />
-          {' '}Machine-wide (C:\ProgramData\rclone\)
+          Machine-wide (C:\ProgramData\rclone\)
         </label>
-        <label>
+        <label className="flex items-center gap-2 text-sm text-on-surface cursor-pointer">
           <input
             type="radio"
+            className="accent-primary"
             name="configPath"
             value="user-profile"
             checked={configPath === 'user-profile'}
@@ -66,28 +69,30 @@ export function DeploymentStep() {
               dispatch({ type: 'SET_DEPLOYMENT', payload: { configPath: 'user-profile' } })
             }
           />
-          {' '}User profile (%APPDATA%\rclone\)
+          User profile (%APPDATA%\rclone\)
         </label>
       </fieldset>
 
       {/* Script targets checkboxes */}
-      <fieldset>
-        <legend>Script targets</legend>
-        <label>
+      <fieldset className="mb-4">
+        <legend className="text-sm font-medium text-on-surface-container mb-2">Script targets</legend>
+        <label className="flex items-center gap-2 text-sm text-on-surface cursor-pointer">
           <input
             type="checkbox"
+            className="accent-primary"
             checked={scriptTargets.includes('intune')}
             onChange={(e) => handleScriptTargetChange('intune', e.target.checked)}
           />
-          {' '}Intune
+          Intune
         </label>
-        <label>
+        <label className="flex items-center gap-2 text-sm text-on-surface cursor-pointer">
           <input
             type="checkbox"
+            className="accent-primary"
             checked={scriptTargets.includes('rmm')}
             onChange={(e) => handleScriptTargetChange('rmm', e.target.checked)}
           />
-          {' '}RMM
+          RMM
         </label>
       </fieldset>
 
diff --git a/src/components/wizard/ReviewStep.tsx b/src/components/wizard/ReviewStep.tsx
index aea453a..e3e4fdd 100644
--- a/src/components/wizard/ReviewStep.tsx
+++ b/src/components/wizard/ReviewStep.tsx
@@ -91,6 +91,7 @@ export function ReviewStep() {
         <label className="flex items-center gap-2 text-sm text-warning cursor-pointer">
           <input
             type="checkbox"
+            className="accent-[var(--r2b-warning)]"
             checked={acknowledged}
             onChange={(e) => setAcknowledged(e.target.checked)}
           />