Bug 1370459 - Polish the onboarding overlay UI to align with new visual spec;r=rexboy,fischer,mossop draft
authorgasolin <gasolin@gmail.com>
Mon, 19 Jun 2017 09:52:04 +0800
changeset 596268 ffb9e0dd33817da38d14fc03c9669eef227383db
parent 596219 95543bdc59bd038a3d5d084b85a4fec493c349ee
child 633898 b0302ab96f47f0ff31d75a1ac1b2bec34d6c581d
push id64564
push userbmo:gasolin@mozilla.com
push dateMon, 19 Jun 2017 03:08:12 +0000
reviewersrexboy, fischer, mossop
bugs1370459
milestone56.0a1
Bug 1370459 - Polish the onboarding overlay UI to align with new visual spec;r=rexboy,fischer,mossop MozReview-Commit-ID: AOsjcvuuWCZ
browser/extensions/onboarding/content/img/icons_tour-complete.svg
browser/extensions/onboarding/content/onboarding.css
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 {