refactor(setup): replace wizard inline styles with modifier classes

This commit is contained in:
Juan Denis committed 2026-08-21 23:45:03 -04:00
1 parent 9f1aed7943
commit 6ddeb0dad4
6 files changed
+29 -12

No files matched your search

@@ -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>
@@ -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"
@@ -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>
@@ -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"
@@ -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"
@@ -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;