rowan/multi-account-containers
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix #20: additional onboarding styles

Browse source
This commit is contained in:
groovecoder 2017-01-30 11:31:24 -06:00
parent 670a081f8a
commit 41990a9775
3 changed files with 28 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
webextension/css/popup.css
View file

@ -35,20 +35,27 @@ table {
margin-block-start: 16px;
margin-inline-end: 16px;
margin-inline-start: 16px;
min-block-size: 480px;
}
.onboarding h3 {
margin-block-start: 16px;
}
.onboarding * {
text-align: center;
}
/* Make button placement to be consistent on tour */
.onboarding .spacing {
margin-block-start: auto;
.onboarding-img {
inline-size: 180px;
block-size: 132px;
}
.onboarding-title {
margin-block-start: 20px;
margin-block-end: 10px;
font-size: 14px;
color: #43484E;
}
.onboarding-subtext {
font-size: 10px;
color: #4a4a4a;
}
.popup-bumper {

2
webextension/js/popup.js
View file

@ -169,7 +169,7 @@ Logic.registerPanel(P_ONBOARDING_2, {
},
});
// P_ONBOARDING_2: Second page for Onboarding.
// P_ONBOARDING_3: Third page for Onboarding.
// ----------------------------------------------------------------------------
Logic.registerPanel(P_ONBOARDING_3, {

21
webextension/popup.html
View file

@ -8,24 +8,27 @@
<body>
<div class="panel onboarding onboarding-panel-1 hide" id="onboarding-panel-1">
<img alt="Container Tabs Overview" src="/img/onboarding-1.png" />
<h3>A better way to manage all the things you do online</h3>
<p>Use containers to organize tasks, manage accounts, and keep your focus where you want it.</p>
<p class="spacing" ><a href="#">Learn more</a></p>
<a href="#" id="onboarding-start-button" class="button expanded">Get Started</a>
<img class="onboarding-img" alt="Container Tabs Overview" src="/img/onboarding-1.png" />
<h3 class="onboarding-title">A better way to manage all the things you do online</h3>
<p>
Use containers to organize tasks, manage accounts, and keep your focus where you want it.
<br/>
<a href="#">Learn more</a>
</p>
<a href="#" id="onboarding-start-button" class="button expanded onboarding-button">Get Started</a>
</div>
<div class="panel onboarding onboarding-panel-2 hide" id="onboarding-panel-2">
<img alt="How Containers Work" src="/img/onboarding-2.png" />
<h3>Put containers to work for you.</h3>
<img class="onboarding-img" alt="How Containers Work" src="/img/onboarding-2.png" />
<h3 class="onboarding-title">Put containers to work for you.</h3>
<p>Features like color-coding and separate container tabs help you find things easily, focus your attention, and minimize distractions.</p>
<a href="#" id="onboarding-next-button" class="button expanded spacing">Next</a>
</div>
<div class="panel onboarding onboarding-panel-3 hide" id="onboarding-panel-3">
<img alt="How Containers Work" src="/img/onboarding-3.png" />
<h3>A place for everything, and everything in its place.</h3>
<img class="onboarding-img" alt="How Containers Work" src="/img/onboarding-3.png" />
<h3 class="onboarding-title">A place for everything, and everything in its place.</h3>
<p>Start with the containers we've created, or create your own.</p>
<a href="#" id="onboarding-done-button" class="button expanded spacing">Done</a>
</div>