Bug 1370459 - Polish the onboarding overlay UI to align with new visual spec;r=rexboy,fischer,mossop
MozReview-Commit-ID: AOsjcvuuWCZ
new file mode 100644
--- /dev/null
+++ b/browser/extensions/onboarding/content/img/icons_tour-complete.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+ <title>Tip / Check</title>
+ <desc>Created with Sketch.</desc>
+ <defs></defs>
+ <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+ <g id="Tips-/-Navigation" transform="translate(-30.000000, -117.000000)" stroke-width="2">
+ <g id="Group">
+ <g id="Tip-/-Check" transform="translate(30.000000, 117.000000)">
+ <circle id="Oval-2" stroke="#FFFFFF" fill="#33F70C" fill-rule="evenodd" cx="10" cy="10" r="9"></circle>
+ <polyline id="Path-31" stroke="#165866" stroke-linecap="round" stroke-linejoin="round" points="5.5 10.5 8.5 13.5 14.5 6.5"></polyline>
+ </g>
+ </g>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
--- a/browser/extensions/onboarding/content/onboarding.css
+++ b/browser/extensions/onboarding/content/onboarding.css
@@ -50,42 +50,44 @@
padding: 12px;
}
#onboarding-overlay-close-btn:hover {
background-color: rgba(204, 204, 204, 0.6);
}
#onboarding-overlay.onboarding-opened > #onboarding-overlay-dialog {
- width: 1200px;
- height: 550px;
+ width: 960px;
+ height: 510px;
background: #f5f5f7;
border: 1px solid rgba(9, 6, 13, 0.1); /* #09060D, 0.1 opacity */
+ border-radius: 3px;
position: relative;
- margin: 0 calc(50% - 600px);
- top: calc(50% - 275px);
+ margin: 0 calc(50% - 480px);
+ top: calc(50% - 255px);
display: grid;
- grid-template-rows: [dialog-start] 76px [page-start] 1fr [footer-start] 40px [dialog-end];
- grid-template-columns: [dialog-start] 240px [page-start] 1fr [dialog-end];
+ grid-template-rows: [dialog-start] 76px [page-start] 1fr [footer-start] 30px [dialog-end];
+ grid-template-columns: [dialog-start] 230px [page-start] 1fr [dialog-end];
}
-@media (max-height: 550px) {
+@media (max-height: 510px) {
#onboarding-overlay.onboarding-opened > #onboarding-overlay-dialog {
top: 0;
}
}
#onboarding-overlay-dialog > header {
grid-row: dialog-start / page-start;
grid-column: dialog-start / tour-end;
- margin-top: 36px;
+ margin-top: 24px;
margin-bottom: 0;
margin-inline-end: 0;
margin-inline-start: 36px;
font-size: 22px;
+ font-weight: 200;
}
#onboarding-overlay-dialog > nav {
grid-row: dialog-start / footer-start;
grid-column-start: dialog-start;
margin-top: 40px;
margin-bottom: 0;
margin-inline-end: 0;
@@ -107,57 +109,74 @@
/* Onboarding tour list */
#onboarding-tour-list {
margin: 40px 0 0 0;
padding: 0;
}
#onboarding-tour-list > li {
list-style: none;
- height: 48px;
border-inline-start: 6px solid transparent;
- padding-inline-start: 66px;
- line-height: 48px;
+ border-radius: 2px;
+ padding-inline-start: 49px;
+ padding-top: 14px;
+ padding-bottom: 14px;
+ margin-inline-start: 10px;
+ margin-bottom: 9px;
background-repeat: no-repeat;
- background-position: left 27px center;
+ background-position: left 10px top 7px;
background-size: 34px;
font-size: 16px;
cursor: pointer;
}
#onboarding-tour-list > li:dir(rtl) {
background-position: right 27px center;
}
+#onboarding-tour-list > li.onboarding-complete::before {
+ content: url("img/icons_tour-complete.svg");
+ position: relative;
+ left: 6px;
+ top: -10px;
+}
+
+#onboarding-tour-list > li.onboarding-complete {
+ padding-inline-start: 29px;
+}
+
#onboarding-tour-list > li.onboarding-active,
#onboarding-tour-list > li:hover {
border-inline-start-color: #5ce6e6;
background-color: #fff;
}
/* Onboarding tour pages */
.onboarding-tour-page {
grid-row: page-start / footer-end;
grid-column: page-start;
display: grid;
grid-template-rows: [tour-page-start] 393px [tour-button-start] 1fr [tour-page-end];
- grid-template-columns: [tour-page-start] 480px [tour-content-start] 1fr [tour-page-end];
+ grid-template-columns: [tour-page-start] 368px [tour-content-start] 1fr [tour-page-end];
}
.onboarding-tour-description {
grid-row: tour-page-start / tour-page-end;
grid-column: tour-page-start / tour-content-start;
- padding: 40px;
font-size: 15px;
- padding-inline-end: 40px;
+ line-height: 22px;
+ padding-inline-start: 40px;
+ padding-inline-end: 28px;
}
.onboarding-tour-description > h1 {
font-size: 36px;
- margin: 40px 0 20px 0;
+ margin-top: 16px;
+ font-weight: 300;
+ line-height: 44px;
}
.onboarding-tour-content {
grid-row: tour-page-start / tour-button-start;
grid-column: tour-content-start / tour-page-end;
padding-top: 0;
padding-bottom: 0;
padding-inline-start: 0;
@@ -187,25 +206,29 @@
.onboarding-tour-page.onboarding-no-button > .onboarding-tour-button {
display: none;
grid-row: tour-page-end;
grid-column: tour-page-end;
}
.onboarding-tour-button > button {
+ padding: 10px 20px;
+ font-size: 15px;
+ font-weight: 600;
+ line-height: 21px;
background: #0d96ff;
border: none;
border-radius: 3px;
- padding: 10px 20px;
- font-size: 14px;
color: #fff;
box-shadow: 0 1px 0 rgba(0,0,0,0.23);
+ cursor: pointer;
float: inline-end;
- margin-inline-end: 70px;
+ margin-inline-end: 26px;
+ margin-top: -32px;
}
.onboarding-tour-button > button:active {
background: #0881dd;
}
/* Tour Icons */
#onboarding-tour-search {