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

added new oboarding panel

Browse source
This commit is contained in:
Kendall Werts 2020-02-10 12:38:45 -06:00
parent 7ed5085f10
commit 06b43c47c0
2 changed files with 35 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
src/css/popup.css
View file

@ -356,6 +356,35 @@ table {
transition: background-color 75ms; transition: background-color 75ms;
} }
.half-button-wrapper {
width: 100%;
flex-direction: row;
display: flex;
align-items: center;
height: 44px;
}
.half-onboarding-button {
align-items: center;
background-color: #0996f8;
border-radius: 3px;
color: white;
display: flex;
font-size: 14px;
inline-size: 50%;
justify-content: center;
text-decoration: none;
transition: background-color 75ms;
flex: 1 0 auto;
height: 44px;
margin: 0 4px 0 0;
}
.grey-button {
background-color: #E3E3E3;
color: #000;
}
.onboarding-button:hover, .onboarding-button:hover,
.onboarding-button:active { .onboarding-button:active {
background-color: #0675d3; background-color: #0675d3;
@ -974,9 +1003,3 @@ span ~ .panel-header-text {
.amo-rate-cta { .amo-rate-cta {
background: #0f1126; background: #0f1126;
} }
.no-sync {
line-height: 0;
margin-left: 160px;
text-decoration: underline;
}

10
src/popup.html
View file

@ -69,10 +69,12 @@
<div class="panel onboarding onboarding-panel-6 hide" id="onboarding-panel-6"> <div class="panel onboarding onboarding-panel-6 hide" id="onboarding-panel-6">
<img class="onboarding-img" alt="Click below to start syncing" src="/img/onboarding-3.png" /> <img class="onboarding-img" alt="Click below to start syncing" src="/img/onboarding-3.png" />
<h3 class="onboarding-title">Container and site assignments everywhere.</h3> <h3 class="onboarding-title">Syncing Containers is now Available!</h3>
<p>Now containers will sync between installs of the add-on.</p> <p>Turn on Sync to share container and site assignments with any computer connected to your Firefox Account.</p>
<a href="#" id="start-sync-button" class="onboarding-button">Start Syncing</a> <div class="half-button-wrapper">
<div><a herf="#" id="no-sync" class="no-sync">No Thanks</a></div> <a herf="#" id="no-sync" class="half-onboarding-button grey-button">No Thanks</a>
<a href="https://accounts.firefox.com/?service=sync&utm_source=addon&utm_medium=panel&utm_campaign=container-sync" id="start-sync-button" class="half-onboarding-button">Start Syncing</a>
</div>
</div> </div>
<div class="panel achievement-panel hide" id="achievement-panel"> <div class="panel achievement-panel hide" id="achievement-panel">