From 6ddeb0dad4fc8e2ece2f85545dda3462ae77d4e2 Mon Sep 17 00:00:00 2001
From: Juan Denis <jhd3197@gmail.com>
Date: Fri, 21 Aug 2026 23:45:03 -0400
Subject: [PATCH] refactor(setup): replace wizard inline styles with modifier
 classes

---
 .../src/components/setup/SetupStepAccount.jsx |  6 ++----
 .../components/setup/SetupStepCapacity.jsx    |  2 +-
 .../src/components/setup/SetupStepIntent.jsx  |  2 +-
 .../components/setup/SetupStepSecurity.jsx    |  8 ++++----
 .../src/components/setup/SetupStepSummary.jsx |  4 ++--
 frontend/src/styles/pages/_setup-wizard.scss  | 19 +++++++++++++++++++
 6 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/setup/SetupStepAccount.jsx b/frontend/src/components/setup/SetupStepAccount.jsx
index 84871fff..402db358 100644
--- a/frontend/src/components/setup/SetupStepAccount.jsx
+++ b/frontend/src/components/setup/SetupStepAccount.jsx
@@ -105,9 +105,8 @@ const SetupStepAccount = ({ onComplete }) => {
 
                     <button
                         type="submit"
-                        className="btn-wizard-next"
+                        className="btn-wizard-next btn-wizard-next--block"
                         disabled={loading}
-                        style={{ width: '100%', justifyContent: 'center' }}
                     >
                         {loading ? 'Signing in...' : 'Sign In & Continue'}
                     </button>
@@ -184,9 +183,8 @@ const SetupStepAccount = ({ onComplete }) => {
 
                 <button
                     type="submit"
-                    className="btn-wizard-next"
+                    className="btn-wizard-next btn-wizard-next--block"
                     disabled={loading}
-                    style={{ width: '100%', justifyContent: 'center' }}
                 >
                     {loading ? 'Creating account...' : 'Continue'}
                 </button>
diff --git a/frontend/src/components/setup/SetupStepCapacity.jsx b/frontend/src/components/setup/SetupStepCapacity.jsx
index d4444556..a4f13538 100644
--- a/frontend/src/components/setup/SetupStepCapacity.jsx
+++ b/frontend/src/components/setup/SetupStepCapacity.jsx
@@ -196,7 +196,7 @@ const SetupStepCapacity = ({ useCases, onComplete }) => {
                 </div>
             )}
 
-            <div className="wizard-nav" style={{ borderTop: 'none', marginTop: 0, paddingTop: 0 }}>
+            <div className="wizard-nav wizard-nav--flush">
                 <button
                     type="button"
                     className="btn-wizard-next"
diff --git a/frontend/src/components/setup/SetupStepIntent.jsx b/frontend/src/components/setup/SetupStepIntent.jsx
index eb4d4983..f0a26a60 100644
--- a/frontend/src/components/setup/SetupStepIntent.jsx
+++ b/frontend/src/components/setup/SetupStepIntent.jsx
@@ -80,7 +80,7 @@ const SetupStepIntent = ({ selections, onComplete }) => {
                 })}
             </div>
 
-            <div className="wizard-nav" style={{ borderTop: 'none', marginTop: 0, paddingTop: 0 }}>
+            <div className="wizard-nav wizard-nav--flush">
                 <button type="button" className="btn-wizard-next" onClick={handleContinue}>
                     {t('app.setupStepIntent.continue', 'Continue')}
                 </button>
diff --git a/frontend/src/components/setup/SetupStepSecurity.jsx b/frontend/src/components/setup/SetupStepSecurity.jsx
index 803c97e4..cd887d38 100644
--- a/frontend/src/components/setup/SetupStepSecurity.jsx
+++ b/frontend/src/components/setup/SetupStepSecurity.jsx
@@ -117,7 +117,7 @@ const SetupStepSecurity = ({ onComplete }) => {
                     </div>
                 </div>
 
-                <div className="wizard-nav" style={{ borderTop: 'none', marginTop: 0, paddingTop: 0 }}>
+                <div className="wizard-nav wizard-nav--flush">
                     <button
                         type="button"
                         className="btn-wizard-next"
@@ -159,7 +159,7 @@ const SetupStepSecurity = ({ onComplete }) => {
                     </div>
                 )}
 
-                <div className="wizard-nav" style={{ borderTop: 'none', marginTop: 0, paddingTop: 0 }}>
+                <div className="wizard-nav wizard-nav--flush">
                     <Button variant="ghost" onClick={() => onComplete(false)} disabled={busy}>
                         {t('app.setupStepSecurity.skipForNow', 'Skip for now')}
                     </Button>
@@ -229,7 +229,7 @@ const SetupStepSecurity = ({ onComplete }) => {
                     </div>
                 )}
 
-                <div className="wizard-nav" style={{ borderTop: 'none', marginTop: 0, paddingTop: 0 }}>
+                <div className="wizard-nav wizard-nav--flush">
                     <Button variant="ghost" onClick={() => onComplete(false)} disabled={busy}>
                         {t('app.setupStepSecurity.skipForNow2', 'Skip for now')}
                     </Button>
@@ -279,7 +279,7 @@ const SetupStepSecurity = ({ onComplete }) => {
                 )}
             </div>
 
-            <div className="wizard-nav" style={{ borderTop: 'none', marginTop: 0, paddingTop: 0 }}>
+            <div className="wizard-nav wizard-nav--flush">
                 <button
                     type="button"
                     className="btn-wizard-next"
diff --git a/frontend/src/components/setup/SetupStepSummary.jsx b/frontend/src/components/setup/SetupStepSummary.jsx
index 05d1e518..d5562ada 100644
--- a/frontend/src/components/setup/SetupStepSummary.jsx
+++ b/frontend/src/components/setup/SetupStepSummary.jsx
@@ -251,7 +251,7 @@ const SetupStepSummary = ({ accountInfo, useCases, twoFactorEnabled, onFinish })
                 {(recsLoading || recommendations.length > 0) && (
                     <div className="summary-section">
                         <div className="summary-section-title">
-                            <Sparkles size={14} style={{ display: 'inline', verticalAlign: 'middle', marginRight: 6 }} />
+                            <Sparkles size={14} className="summary-rec-ico" />
                             {t('app.setupStepSummary.recommendedForYou', 'Recommended for you')}
                         </div>
                         {recsLoading ? (
@@ -298,7 +298,7 @@ const SetupStepSummary = ({ accountInfo, useCases, twoFactorEnabled, onFinish })
                 )}
             </div>
 
-            <div className="wizard-nav" style={{ borderTop: 'none', marginTop: 0, paddingTop: 0 }}>
+            <div className="wizard-nav wizard-nav--flush">
                 <button
                     type="button"
                     className="btn-wizard-next"
diff --git a/frontend/src/styles/pages/_setup-wizard.scss b/frontend/src/styles/pages/_setup-wizard.scss
index 2d6fd859..629e9979 100644
--- a/frontend/src/styles/pages/_setup-wizard.scss
+++ b/frontend/src/styles/pages/_setup-wizard.scss
@@ -756,6 +756,25 @@
     border-top: 1px solid $border-default;
 }
 
+// Steps whose content already ends on a divider carry no chrome of their own.
+.wizard-nav--flush {
+    margin-top: 0;
+    padding-top: 0;
+    border-top: none;
+}
+
+// Full-width step submit button.
+.btn-wizard-next--block {
+    width: 100%;
+    justify-content: center;
+}
+
+.summary-rec-ico {
+    display: inline;
+    vertical-align: middle;
+    margin-right: 6px;
+}
+
 .btn-wizard-prev {
     @include button-base();
     color: $text-secondary;