Foundry376/Mailspring
1
1
Fork 0
mirror of https://github.com/Foundry376/Mailspring.git synced 2024-09-20 23:36:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(onboarding): restyle step 3

Browse source
This commit is contained in:
Evan Morikawa 2016-03-04 16:47:55 -05:00
parent 7cfe045b6d
commit bc4123a045
3 changed files with 15 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
internal_packages/onboarding/assets/cloud@2x.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 54 KiB

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

@ -68,7 +68,7 @@ class WelcomePage extends React.Component
<RetinaImg className="wrench" mode={RetinaImg.Mode.ContentPreserve}
url="nylas://onboarding/assets/wrench@2x.png" />
<p className="sub-text">Nylas N1 and the cloud sync engine are available on <a href="https://github.com/nylas/n1">GitHub</a></p>
<p className="sub-text">Nylas N1 and the cloud sync engine are available on <a onClick={=> @_open("https://github.com/nylas/n1")}>GitHub</a></p>
{@_renderNavBubble(1)}
</div>
@ -84,22 +84,12 @@ class WelcomePage extends React.Component
_renderStep2: ->
<div className={@_stepClass(2)} key="step-2">
<p className="hero-text" style={marginTop: 40}>N1 is made possible by the Nylas Sync Engine</p>
<div className="cell-wrap">
<div className="cell" style={float: "left"}>
<RetinaImg mode={RetinaImg.Mode.ContentPreserve}
style={paddingTop: 4, paddingBottom: 4}
url="nylas://onboarding/assets/cloud@2x.png" />
<p>A modern API layer for<br/>email, contacts &amp; calendar</p>
<a onClick={=> @_open("https://github.com/nylas/sync-engine")}>more info</a>
</div>
<div className="cell" style={float: "right"}>
<RetinaImg mode={RetinaImg.Mode.ContentPreserve}
url="nylas://onboarding/assets/lock@2x.png" />
<p>Secured using<br/>bank-grade encryption</p>
<a onClick={=> @_open("https://nylas.com/security/")}>more info</a>
</div>
</div>
<p className="hero-text" style={marginTop: 26}>Powered by Cloud Sync.</p>
<RetinaImg mode={RetinaImg.Mode.ContentPreserve}
style={paddingTop: 4, paddingBottom: 4}
url="nylas://onboarding/assets/cloud@2x.png" />
<p style={fontSize: 17, opacity: 0.7, marginTop: 18}>Nylas syncs your mail in the cloud. This makes N1 blazing fast<br/>and is needed for features like Snooze and Send Later.</p>
<p><a onClick={=> @_open("https://github.com/nylas/sync-engine")}>Learn more</a></p>
{@_renderNavBubble(2)}
</div>

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

@ -528,6 +528,9 @@
&.step-1 {
background: #4e575c;
}
&.step-2 {
background-image: linear-gradient(to right, rgba(136,208,184,1) 0%,rgba(105,199,210,1) 100%);
}
.btn-continue {
font-size: 17px;
@ -583,7 +586,7 @@
}
.nylas-blue-wash-bg {
background-image: linear-gradient(to right, rgba(79,186,151,1) 0%,rgba(113,193,154,1) 50%,rgba(34,172,187,1) 100%);
background-image: linear-gradient(to right, rgba(79,186,151,1) 0%, rgba(34,172,187,1) 100%);
color: white;
}
@ -611,7 +614,7 @@
border: 1px solid #161f25;
width: 210px;
height: 210px;
margin: 20px auto;
margin: 20px auto 15px auto;
border-radius: 105px;
}
.gear-container {
@ -711,13 +714,14 @@
}
.hero-text {
font-size: 27px;
font-size: 39px;
opacity: 0.7;
}
}
.nav-bubbles {
position: absolute;
bottom: 14px;
bottom: 7px;
left: 50%;
margin-left: -24px;
display: flex;