kawa/Ready2Blob
1
0
Fork 0
Code Issues Pull Requests Actions Packages Activity

feat(12-01): style DeploymentStep form controls and ReviewStep checkbox

Browse Source 
- 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
This commit is contained in:
kawa
2026-04-01 14:05:14 +02:00
parent f6b4070ff9
commit 945f90d789
2 changed files with 21 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/wizard/DeploymentStep.tsx
+20 -15
View File
@@ -28,25 +28,27 @@ export function DeploymentStep() {
</p> </p>
{/* Include rclone installation toggle */} {/* Include rclone installation toggle */}
<div> <div className="flex flex-col gap-2 mb-4">
<label> <label className="flex items-center gap-2 text-sm text-on-surface cursor-pointer">
<input <input
type="checkbox" type="checkbox"
className="accent-primary"
checked={includeInstall} checked={includeInstall}
onChange={(e) => onChange={(e) =>
dispatch({ type: 'SET_DEPLOYMENT', payload: { includeInstall: e.target.checked } }) dispatch({ type: 'SET_DEPLOYMENT', payload: { includeInstall: e.target.checked } })
} }
/> />
{' '}Include rclone installation Include rclone installation
</label> </label>
</div> </div>
{/* Config deployment path radio group */} {/* Config deployment path radio group */}
<fieldset> <fieldset className="mb-4">
<legend>Config deployment path</legend> <legend className="text-sm font-medium text-on-surface-container mb-2">Config deployment path</legend>
<label> <label className="flex items-center gap-2 text-sm text-on-surface cursor-pointer">
<input <input
type="radio" type="radio"
className="accent-primary"
name="configPath" name="configPath"
value="machine-wide" value="machine-wide"
checked={configPath === 'machine-wide'} checked={configPath === 'machine-wide'}
@@ -54,11 +56,12 @@ export function DeploymentStep() {
dispatch({ type: 'SET_DEPLOYMENT', payload: { configPath: 'machine-wide' } }) dispatch({ type: 'SET_DEPLOYMENT', payload: { configPath: 'machine-wide' } })
} }
/> />
{' '}Machine-wide (C:\ProgramData\rclone\) Machine-wide (C:\ProgramData\rclone\)
</label> </label>
<label> <label className="flex items-center gap-2 text-sm text-on-surface cursor-pointer">
<input <input
type="radio" type="radio"
className="accent-primary"
name="configPath" name="configPath"
value="user-profile" value="user-profile"
checked={configPath === 'user-profile'} checked={configPath === 'user-profile'}
@@ -66,28 +69,30 @@ export function DeploymentStep() {
dispatch({ type: 'SET_DEPLOYMENT', payload: { configPath: 'user-profile' } }) dispatch({ type: 'SET_DEPLOYMENT', payload: { configPath: 'user-profile' } })
} }
/> />
{' '}User profile (%APPDATA%\rclone\) User profile (%APPDATA%\rclone\)
</label> </label>
</fieldset> </fieldset>
{/* Script targets checkboxes */} {/* Script targets checkboxes */}
<fieldset> <fieldset className="mb-4">
<legend>Script targets</legend> <legend className="text-sm font-medium text-on-surface-container mb-2">Script targets</legend>
<label> <label className="flex items-center gap-2 text-sm text-on-surface cursor-pointer">
<input <input
type="checkbox" type="checkbox"
className="accent-primary"
checked={scriptTargets.includes('intune')} checked={scriptTargets.includes('intune')}
onChange={(e) => handleScriptTargetChange('intune', e.target.checked)} onChange={(e) => handleScriptTargetChange('intune', e.target.checked)}
/> />
{' '}Intune Intune
</label> </label>
<label> <label className="flex items-center gap-2 text-sm text-on-surface cursor-pointer">
<input <input
type="checkbox" type="checkbox"
className="accent-primary"
checked={scriptTargets.includes('rmm')} checked={scriptTargets.includes('rmm')}
onChange={(e) => handleScriptTargetChange('rmm', e.target.checked)} onChange={(e) => handleScriptTargetChange('rmm', e.target.checked)}
/> />
{' '}RMM RMM
</label> </label>
</fieldset> </fieldset>
src/components/wizard/ReviewStep.tsx
+1
View File
@@ -91,6 +91,7 @@ export function ReviewStep() {
<label className="flex items-center gap-2 text-sm text-warning cursor-pointer"> <label className="flex items-center gap-2 text-sm text-warning cursor-pointer">
<input <input
type="checkbox" type="checkbox"
className="accent-[var(--r2b-warning)]"
checked={acknowledged} checked={acknowledged}
onChange={(e) => setAcknowledged(e.target.checked)} onChange={(e) => setAcknowledged(e.target.checked)}
/> />