Foundry376/Mailspring
1
1
Fork 0
mirror of https://github.com/Foundry376/Mailspring.git synced 2024-11-10 17:48:50 +08:00
Code Issues Projects Releases Packages Wiki Activity

feat(onboarding): style page 2

Browse source
This commit is contained in:
Evan Morikawa 2016-03-04 16:01:41 -05:00
parent 2f0630b0e8
commit 7cfe045b6d
4 changed files with 17 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
internal_packages/onboarding/assets/gear-large-outer@2x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 59 KiB

BIN
internal_packages/onboarding/assets/gear-large@2x.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 54 KiB

After

Width:  |  Height:  |  Size: 67 KiB

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

@ -59,7 +59,7 @@ class WelcomePage extends React.Component
_renderStep1: ->
<div className={@_stepClass(1)} key="step-1">
<p className="hero-text" style={marginTop: 40}>Developers welcome.</p>
<p className="hero-text" style={marginTop: 40}>Open source & made for developers.</p>
<div className="gear-outer-container"><div className="gear-container">
{@_gears()}
</div></div>
@ -68,16 +68,18 @@ class WelcomePage extends React.Component
<RetinaImg className="wrench" mode={RetinaImg.Mode.ContentPreserve}
url="nylas://onboarding/assets/wrench@2x.png" />
<p className="sub-text">N1 is built with modern web technologies and is easy to extend with JavaScript.</p>
<p className="sub-text">Nylas N1 and the cloud sync engine are available on <a href="https://github.com/nylas/n1">GitHub</a></p>
{@_renderNavBubble(1)}
</div>
_gears: ->
gears = []
gear = "gear-large@2x.png"
for i in [0..3]
if i isnt 0 then gear = "gear-large-outer@2x.png"
gears.push <RetinaImg className="gear-large gear-large-#{i}"
mode={RetinaImg.Mode.ContentPreserve}
url="nylas://onboarding/assets/gear-large@2x.png" />
url="nylas://onboarding/assets/#{gear}" />
return gears
_renderStep2: ->

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

@ -519,13 +519,15 @@
.footer {
text-align: center;
background: #ececec;
border-top: 1px solid #d4d4d4;
border-top: 1px solid rgba(0,0,0,0.10);
box-shadow: 0 1px 1px solid rgba(255,255,255,0.25);
&.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%);
}
&.step-1 {
background: #4e575c;
}
.btn-continue {
font-size: 17px;
@ -650,11 +652,12 @@
}
.gear-large-0 {
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
left: 51%;
top: 51%;
margin-left: -148px;
margin-top: -149px;
transform: rotate(7deg);
zoom: 0.525 !important;
}
.gear-large-1 {
left: -147px;
@ -666,8 +669,8 @@
}
.gear-large-3 {
left: 50%;
margin-left: -148px;
bottom: -226px;
margin-left: -143px;
bottom: -223px;
}
.gear-small {