Foundry376/Mailspring
1
1
Fork 0
mirror of https://github.com/Foundry376/Mailspring.git synced 2025-02-24 08:04:11 +08:00
Code Issues Projects Releases Packages Wiki Activity

feat(onboarding): style page 1

Browse source
This commit is contained in:
Evan Morikawa 2016-03-04 15:40:10 -05:00
parent 5a3f7ad26c
commit 6a690723ae
7 changed files with 20 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
internal_packages/onboarding/assets/icons-bg@2x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 299 KiB

BIN
internal_packages/onboarding/assets/nylas-logo@2x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 46 KiB

BIN
internal_packages/onboarding/assets/nylas-pictographB@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 16 KiB

BIN
internal_packages/onboarding/assets/shapes-left@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 10 KiB

BIN
internal_packages/onboarding/assets/shapes-right@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 8.4 KiB

25
internal_packages/onboarding/lib/welcome-page.cjsx
View file

@ -20,14 +20,18 @@ class WelcomePage extends React.Component
<RetinaImg name="onboarding-close.png" mode={RetinaImg.Mode.ContentPreserve}/>
</div>
<div className="steps-container">{@_renderSteps()}</div>
<div className="footer">{@_renderButtons()}</div>
<div className="footer step-#{@state.step}">{@_renderButtons()}</div>
</div>
_renderButtons: ->
buttons = []
# if @state.step > 0
# buttons.push <span key="back" className="btn-back" onClick={@_onBack}>Back</span>
btnText = if @state.step is 2 then "Get Started" else "Continue"
btnText = ""
if @state.step is 0
btnText = "Let’s get started"
else if @state.step is 1
btnText = "Continue"
else if @state.step is 2
btnText = "Get started"
buttons.push <button key="next" className="btn btn-large btn-continue" onClick={@_onContinue}>{btnText}</button>
return buttons
@ -47,16 +51,9 @@ class WelcomePage extends React.Component
_renderStep0: ->
<div className={@_stepClass(0)} key="step-0">
<RetinaImg className="logo" style={zoom: 0.20, marginTop: 60, opacity: 0.7} url="nylas://onboarding/assets/nylas-pictographB@2x.png" mode={RetinaImg.Mode.ContentPreserve}/>
<p className="hero-text" style={marginTop: 30, fontSize: 44}>Say hello to N1.</p>
<p className="sub-text" style={marginTop: 0, fontSize: 24}>The next-generation email platform.</p>
<div style={fontSize:17, marginTop: 45}>
Built with
<RetinaImg url="nylas://onboarding/assets/nylas-love@2x.png" mode={RetinaImg.Mode.ContentPreserve}/>
by Nylas
</div>
<RetinaImg className="icons" style={position: "absolute", left: -45, top: 130} url="nylas://onboarding/assets/shapes-left@2x.png" mode={RetinaImg.Mode.ContentIsMask} />
<RetinaImg className="icons" style={position: "absolute", right: -40, top: 130} url="nylas://onboarding/assets/shapes-right@2x.png" mode={RetinaImg.Mode.ContentIsMask} />
<RetinaImg className="logo" style={marginTop: 86} url="nylas://onboarding/assets/nylas-logo@2x.png" mode={RetinaImg.Mode.ContentPreserve}/>
<p className="hero-text" style={fontSize: 46, marginTop: 57}>Welcome to Nylas N1</p>
<RetinaImg className="icons" style={position: "absolute", top: 0, left: 0} url="nylas://onboarding/assets/icons-bg@2x.png" mode={RetinaImg.Mode.ContentPreserve} />
{@_renderNavBubble(0)}
</div>

11
internal_packages/onboarding/stylesheets/onboarding.less
View file

@ -469,7 +469,7 @@
.welcome-page {
width: 675px;
height: 480px;
height: 470px;
display: flex;
flex-direction: column;
@ -501,6 +501,7 @@
.step-wrap {
position: absolute;
overflow: hidden;
top: 0;
left: 0;
right: 0;
@ -520,6 +521,12 @@
background: #ececec;
border-top: 1px solid #d4d4d4;
&.step-0 {
border-top: 1px solid rgba(0,0,0,0.15);
box-shadow: 0 1px 1px solid rgba(255,255,255,0.25);
background-image: linear-gradient(to right, rgba(167,214,134,1) 0%,rgba(122,201,201,1) 100%);
}
.btn-continue {
font-size: 17px;
font-weight: 300;
@ -561,7 +568,7 @@
}
.nylas-static-wash-bg {
background-image: linear-gradient(to right, rgba(162,210,128,1) 0%,rgba(113,193,154,1) 50%,rgba(89,187,187,1) 100%);
background-image: linear-gradient(to right, rgba(149,205,107,1) 0%,rgba(60,176,176,1) 100%);
color: white;
}