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
This commit is contained in:
@@ -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>
|
||||
|
||||
|
||||
@@ -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)}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user