fix(welcome): small ui tweaks in welcome/onboarding

Summary: Change the white logo to have an inner shadow, and set to PreserveContent. Fix typo in welcome page. Tweak some text opacity for readability.

Test Plan: manual

Reviewers: evan, bengotow

Reviewed By: bengotow

Subscribers: bengotow

Differential Revision: https://phab.nylas.com/D2090
This commit is contained in:
Drew Regitsky 2015-10-02 15:34:56 -07:00
parent 59042fdfab
commit 36711a4e67
4 changed files with 4 additions and 10 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

View file

@ -30,7 +30,7 @@ class AccountChoosePage extends React.Component
<RetinaImg name="onboarding-close.png" mode={RetinaImg.Mode.ContentPreserve}/>
</div>
<RetinaImg url="nylas://onboarding/assets/nylas-pictograph@2x.png" mode={RetinaImg.Mode.ContentIsMask} style={zoom: 0.29} className="logo"/>
<RetinaImg url="nylas://onboarding/assets/nylas-pictographB@2x.png" mode={RetinaImg.Mode.ContentPreserve} style={zoom: 0.29, opacity: 0.55} className="logo"/>
<div className="caption" style={marginTop: 15, marginBottom:20}>Select your email provider</div>

View file

@ -45,7 +45,7 @@ class WelcomePage extends React.Component
_renderStep0: ->
<div className={@_stepClass(0)} key="step-0">
<RetinaImg className="logo" style={zoom: 0.20, marginTop: 60} url="nylas://onboarding/assets/nylas-pictograph@2x.png" mode={RetinaImg.Mode.ContentIsMask} />
<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 ❤︎ by Nylas</div>
@ -65,7 +65,7 @@ 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 easy to extend with JavaScript.</p>
<p className="sub-text">N1 is built with modern web technologies and is easy to extend with JavaScript.</p>
{@_renderNavBubble(1)}
</div>

View file

@ -312,9 +312,6 @@
.page.account-choose {
width: 388px;
height: 615px;
img.logo.content-mask {
background-color: rgba(255,255,255,0.4);
}
.caption {
font-size: 17px;
@ -539,9 +536,6 @@
line-height: 41px;
}
img.logo.content-mask {
background-color: rgba(255,255,255,0.4);
}
img.icons.content-mask {
background-color: rgba(255,255,255,0.7);
}
@ -647,7 +641,7 @@
p {
margin-top: 1em;
color: rgba(255,255,255,0.7);
color: rgba(255,255,255,0.9);
font-size: 17px;
line-height: 24px;
}