From d7a2cad7ead1d552ae4b08c522f584c06975f1f8 Mon Sep 17 00:00:00 2001 From: Kawa Date: Wed, 1 Apr 2026 09:29:52 +0200 Subject: [PATCH] feat(09-03): apply MD3 button styles and elevation across all wizard steps - BackendCard: rounded-lg -> rounded-xl, added shadow/shadow-md elevation - OutputBlock: pre rounded -> rounded-xl + shadow-sm; Copy/Download use MD3_BTN_OUTLINED small variant - BackendSelectionStep: added explicit Next submit button with MD3_BTN_FILLED - RemoteConfigStep: Back uses MD3_BTN_OUTLINED, Next uses MD3_BTN_FILLED - DeploymentStep: Back uses MD3_BTN_OUTLINED, Next/Review uses MD3_BTN_FILLED - ReviewStep: Back uses MD3_BTN_OUTLINED, Download All (ZIP) uses MD3_BTN_FILLED - All 179 tests pass (zero regressions) --- src/components/ui/BackendCard.tsx | 6 +++--- src/components/wizard/BackendSelectionStep.tsx | 6 ++++++ src/components/wizard/DeploymentStep.tsx | 5 +++-- src/components/wizard/OutputBlock.tsx | 9 ++++++--- src/components/wizard/RemoteConfigStep.tsx | 5 +++-- src/components/wizard/ReviewStep.tsx | 5 +++-- 6 files changed, 24 insertions(+), 12 deletions(-) diff --git a/src/components/ui/BackendCard.tsx b/src/components/ui/BackendCard.tsx index 07ecb6d..7e7e18e 100644 --- a/src/components/ui/BackendCard.tsx +++ b/src/components/ui/BackendCard.tsx @@ -14,10 +14,10 @@ export function BackendCard({ name, description, selected = false, onClick, ...r onClick={onClick} data-selected={selected} className={[ - 'flex flex-col items-start gap-1 rounded-lg border-2 p-4 text-left transition-colors', + 'flex flex-col items-start gap-1 rounded-xl border-2 p-4 text-left transition-all', selected - ? 'border-primary bg-primary/10' - : 'border-outline bg-surface-container hover:border-primary hover:bg-surface', + ? 'border-primary bg-primary/10 shadow-md' + : 'border-outline bg-surface-container shadow hover:border-primary hover:bg-surface hover:shadow-md', ].join(' ')} {...rest} > diff --git a/src/components/wizard/BackendSelectionStep.tsx b/src/components/wizard/BackendSelectionStep.tsx index 0d99da3..e835317 100644 --- a/src/components/wizard/BackendSelectionStep.tsx +++ b/src/components/wizard/BackendSelectionStep.tsx @@ -6,6 +6,7 @@ import { useWizard } from '../../store/context'; import type { BackendType } from '../../store/types'; import { BACKEND_REGISTRY } from '../../schemas/registry'; import { BackendCard } from '../ui/BackendCard'; +import { MD3_BTN_FILLED } from '../../styles/md3-buttons'; const remoteNameSchema = z.object({ name: z @@ -71,6 +72,11 @@ export function BackendSelectionStep() { /> ))} +
+ +
); diff --git a/src/components/wizard/DeploymentStep.tsx b/src/components/wizard/DeploymentStep.tsx index 9d783ca..b271907 100644 --- a/src/components/wizard/DeploymentStep.tsx +++ b/src/components/wizard/DeploymentStep.tsx @@ -3,6 +3,7 @@ // Dispatches SET_DEPLOYMENT live on every control change (no submit needed for deployment options). import { useWizard } from '../../store/context'; +import { MD3_BTN_FILLED, MD3_BTN_OUTLINED } from '../../styles/md3-buttons'; export function DeploymentStep() { const { state, dispatch } = useWizard(); @@ -91,14 +92,14 @@ export function DeploymentStep() { diff --git a/src/components/wizard/OutputBlock.tsx b/src/components/wizard/OutputBlock.tsx index 1a5e821..fb08ccd 100644 --- a/src/components/wizard/OutputBlock.tsx +++ b/src/components/wizard/OutputBlock.tsx @@ -3,6 +3,7 @@ // disabled prop gates both actions (SECU-01 security acknowledgement gate). import { useState } from 'react'; import { downloadFile } from '../../utils/downloadFile'; +import { MD3_BTN_OUTLINED } from '../../styles/md3-buttons'; export interface OutputBlockProps { label: string; @@ -20,6 +21,8 @@ export function OutputBlock({ label, content, filename, disabled = false }: Outp setTimeout(() => setCopied(false), 2000); } + const smallBtn = `${MD3_BTN_OUTLINED} !text-xs !px-3 !py-1.5`; + return (
@@ -29,7 +32,7 @@ export function OutputBlock({ label, content, filename, disabled = false }: Outp type="button" disabled={disabled} onClick={handleCopy} - className="text-xs px-2 py-1 rounded border border-outline disabled:opacity-40" + className={smallBtn} > {copied ? 'Copied!' : 'Copy'} @@ -38,14 +41,14 @@ export function OutputBlock({ label, content, filename, disabled = false }: Outp type="button" disabled={disabled} onClick={() => downloadFile(content, filename)} - className="text-xs px-2 py-1 rounded border border-outline disabled:opacity-40" + className={smallBtn} > Download )}
- 
+      
         {content}
       

     
diff --git a/src/components/wizard/RemoteConfigStep.tsx b/src/components/wizard/RemoteConfigStep.tsx
index 0c865cd..5b64a5c 100644
--- a/src/components/wizard/RemoteConfigStep.tsx
+++ b/src/components/wizard/RemoteConfigStep.tsx
@@ -11,6 +11,7 @@ import { FieldRenderer } from '../ui/FieldRenderer';
 import { AzureAuthToggle } from './AzureAuthToggle';
 import { SftpAuthToggle } from './SftpAuthToggle';
 import type { FieldError } from 'react-hook-form';
+import { MD3_BTN_FILLED, MD3_BTN_OUTLINED } from '../../styles/md3-buttons';
 
 export function RemoteConfigStep() {
   const { state, dispatch } = useWizard();
@@ -110,13 +111,13 @@ export function RemoteConfigStep() {
           
           
diff --git a/src/components/wizard/ReviewStep.tsx b/src/components/wizard/ReviewStep.tsx
index 670bd79..70ac134 100644
--- a/src/components/wizard/ReviewStep.tsx
+++ b/src/components/wizard/ReviewStep.tsx
@@ -3,6 +3,7 @@
 // Covers CONF-02, CONF-03, DOWN-01–DOWN-06, SECU-01, SECU-02.
 import { useMemo, useState } from 'react';
 import { useWizard } from '../../store/context';
+import { MD3_BTN_FILLED, MD3_BTN_OUTLINED } from '../../styles/md3-buttons';
 import {
   buildRcloneConf,
   buildIntuneInstall,
@@ -128,7 +129,7 @@ export function ReviewStep() {
         
@@ -139,7 +140,7 @@ export function ReviewStep() {
         type="button"
         disabled={!acknowledged}
         onClick={handleDownloadZip}
-        className="w-full py-2 px-4 bg-primary text-on-primary rounded font-medium disabled:opacity-40 disabled:cursor-not-allowed hover:bg-primary"
+        className={`w-full mt-4 ${MD3_BTN_FILLED}`}
       >
         Download All (ZIP)