chore: onboarding

gulpfile.js/index.js

@@ -142,7 +142,8 @@ function makeDistAll() {
 
 function makeJSDist() {
     return src(['src/**/*.js', '!src/**/unittest-files/**/*', "!src/thirdparty/prettier/**/*",
-        "!src/thirdparty/no-minify/**/*", "!src/LiveDevelopment/BrowserScripts/RemoteFunctions.js"])
+        "!src/thirdparty/no-minify/**/*", "!src/LiveDevelopment/BrowserScripts/RemoteFunctions.js",
+        "!src/extensionsIntegrated/phoenix-pro/onboarding/**/*"])
         .pipe(minify({
             ext:{
                 min:'.js'
@@ -174,7 +175,8 @@ function makeNonMinifyDist() {
     // we dont minify remote functions as its in live preview context and the prod minify is stripping variables
     // used by plugins in live preview. so we dont minify this for now.
     return src(["src/thirdparty/no-minify/**/*",
-        "src/LiveDevelopment/BrowserScripts/RemoteFunctions.js"], {base: 'src'})
+        "src/LiveDevelopment/BrowserScripts/RemoteFunctions.js",
+        "src/extensionsIntegrated/phoenix-pro/onboarding/**/*"], {base: 'src'})
         .pipe(dest('dist'));
 }
 

src/nls/root/strings.js

@@ -1871,6 +1871,16 @@ define({
     "DEMO_ALT_MORE_OPTIONS_ICON": "More options",
     "DEMO_ALT_CARD_IMAGE": "Card image",
     "DEMO_ALT_ROCKET": "Rocket",
-    "DEMO_ALT_ARROW": "Arrow"
+    "DEMO_ALT_ARROW": "Arrow",
+
+    "DEMO_JS_BUTTON_BACK": "Back",
+    "DEMO_JS_BUTTON_PREVIOUS": "Previous",
+    "DEMO_JS_BUTTON_NEXT": "Next",
+    "DEMO_JS_BUTTON_TIP": "Tip",
+    "DEMO_JS_BUTTON_FINISH": "Finish",
+    "DEMO_JS_BUTTON_ONE_MORE": "One more thing",
+    "DEMO_JS_BUTTON_START_AGAIN": "Start Again",
+    "DEMO_JS_CARD_COUNT_TEMPLATE": "{NUM_DONE}/3 cards",
+    "DEMO_JS_DELETE_COUNT_TEMPLATE": "{NUM_DONE}/1 deleted"
     // demo end
 });

src/styles/UserProfile.less

@@ -11,6 +11,39 @@
     z-index: @z-index-brackets-context-menu-base;
     transform-origin: 0 0;
 
+    .popup-header-row {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .popup-close-btn {
+        width: 24px;
+        height: 24px;
+        padding: 0;
+        background: none;
+        border: none;
+        border-radius: @bc-border-radius;
+        cursor: pointer;
+        color: @bc-text-medium;
+        font-size: 14px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: color 0.2s ease, background-color 0.2s ease;
+        flex-shrink: 0;
+
+        &:hover {
+            color: @bc-text-emphasized;
+            background-color: @bc-btn-bg;
+        }
+
+        &:focus {
+            outline: none;
+            box-shadow: 0 0 0 2px @bc-btn-border-focused;
+        }
+    }
+
     .popup-header {
         padding: 12px 15px;
         border-bottom: 1px solid @bc-menu-separator;
@@ -204,6 +237,19 @@
     color: @dark-bc-menu-text;
     box-shadow: 0 3px 9px @dark-bc-shadow;
 
+    .popup-close-btn {
+        color: @dark-bc-text-thin-quiet;
+
+        &:hover {
+            color: @dark-bc-text;
+            background-color: @dark-bc-btn-bg;
+        }
+
+        &:focus {
+            box-shadow: 0 0 0 2px @dark-bc-btn-border-focused;
+        }
+    }
+
     .popup-header {
         border-bottom: 1px solid @dark-bc-menu-separator;
     }

src/styles/phoenix-pro.less

@@ -410,3 +410,58 @@
     }
   }
 }
+
+#notification-bar {
+  display: block;
+  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.53);
+  padding: 5px 0px;
+  width: 100%;
+  min-height: 39px;
+  position: absolute;
+  z-index: 16;
+  left: 0px;
+  bottom: 25px;
+  outline: none;
+  overflow: hidden;
+  color: rgb(51, 51, 51);
+  background-color: rgb(223, 226, 226);
+}
+
+.dark #notification-bar {
+  color: #ccc;
+  background: #2c2c2c;
+}
+
+#notification-bar .content-container {
+  padding: 5px 10px;
+  float: left;
+  width: 100%;
+}
+
+#notification-bar .close-icon-container {
+  height: auto;
+  position: absolute;
+  float: right;
+  text-align: center;
+  width: auto;
+  min-width: 66px;
+  right: 20px;
+  top: 10px;
+}
+
+#notification-bar .close-icon-container .close-icon {
+  display: block;
+  font-size: 18px;
+  line-height: 18px;
+  text-decoration: none;
+  width: 18px;
+  height: 18px;
+  background-color: transparent;
+  border: none;
+  padding: 0px; /*This is needed to center the icon*/
+  float: right;
+}
+
+.dark #notification-bar .close-icon-container .close-icon {
+  color: #ccc;
+}

tracking-repos.json

@@ -1,5 +1,5 @@
 {
   "phoenixPro": {
-    "commitID": "d72beedc81737f4b408ada7eb37f38b8bff94a6e"
+    "commitID": "80dc7514f9263a4a2938cb467155de14aa587761"
   }
 }