mirror of
https://github.com/jhd3197/ServerKit.git
synced 2026-11-09 21:43:05 +09:00
refactor(setup): replace wizard inline styles with modifier classes
This commit is contained in:
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;
|
||||
|
||||
Reference in new issue
Block a user