From 5cbc13db1e24a9e622b10b76eecc229ec71e0c99 Mon Sep 17 00:00:00 2001
From: Kushagra Gour <chinchang457@gmail.com>
Date: Wed, 14 Mar 2018 10:23:54 +0530
Subject: [PATCH] improve onboarding

---
 src/partials/changelog.html     |  2 +-
 src/partials/onboard-modal.html | 12 +++++++++---
 src/style.css                   | 16 ++++++++++++----
 3 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/src/partials/changelog.html b/src/partials/changelog.html
index 32f99c9..78d50de 100644
--- a/src/partials/changelog.html
+++ b/src/partials/changelog.html
@@ -10,7 +10,7 @@
 	<span class="notification__version">3.0.0</span>
 	<ul>
 		<li>After months of work, here is Web Maker 3.0. <a href="https://medium.com/web-maker/web-maker-3-0-is-here-f158a40eeaee" target="_blank">Read the blog post about it</a>.</li>
-		<li>Web Maker is no more just a Chrome extension, it is also available as web app that runs offline just like the extension!</li>
+		<li>Web Maker is no more just a Chrome extension, it is also available as web app that runs offline just like the extension! Checkout it out -> <a href="https://webmakerapp.com/app/" target="_blank">https://webmakerapp.com/app/</a>.</li>
 		<li>Now use Web Maker web app on any modern browser (tested with Chrome and Firefox).</li>
 		<li><strong>User Accounts</strong> - The much requested user accounts are here. Now maintain your account and store all your creations in the cloud and access them anywhere anytime.
 		<li><strong>New layout mode</strong> - One more layout mode, that lets you align all the panes vertically.
diff --git a/src/partials/onboard-modal.html b/src/partials/onboard-modal.html
index 2071123..1e5d35d 100644
--- a/src/partials/onboard-modal.html
+++ b/src/partials/onboard-modal.html
@@ -14,7 +14,13 @@
 			</svg>
 		</div>
 		<p>
-			Open Web Maker anytime by visiting <a>https://webmakerapp.com/app/</a> - Even when you are offline! It just works! 😱
+			Open Web Maker anytime by visiting <a>https://webmakerapp.com/app/</a> - Even when you are offline! It just works! 😱 <strong>Drag the following bookmarklet</strong> on your bookmark bar to create a quick access shortcut:
+			<a class="ml-1 bookmarklet" href="https://webmakerapp.com/app/">
+				<svg width="20" height="20" aria-hidden="true">
+					<use xlink:href="#logo" />
+				</svg>
+				Web Maker
+			</a>
 		</p>
 	</div>
 	<div class="onboard-step show-when-extension">
@@ -52,13 +58,13 @@
 			</svg>
 		</div>
 		<p>
-			Follow <a href="https://twitter.com/intent/follow?screen_name=webmakerApp">@webmakerApp</a> to know about the new upcoming
+			Follow <a href="https://twitter.com/intent/follow?screen_name=webmakerApp" targe="_blank">@webmakerApp</a> to know about the new upcoming
 			features!
 		</p>
 	</div>
 </div>
 
-<p class="ta-c">
+<p class="tac show-when-app">
 	If you are an existing Chrome extension user, you can import your creations from there to here. <a href="https://medium.com/web-maker/importing-exporting-your-creations-d92e7de5c3dc" target="_blank">Learn how to export/import</a>.
 </p>
 
diff --git a/src/style.css b/src/style.css
index 0d95b69..7f3c239 100644
--- a/src/style.css
+++ b/src/style.css
@@ -990,11 +990,11 @@ body > #demo-frame {
 	animation-delay: 0.4s;
 }
 .onboard-step__icon {
-	fill: transparent !important;
+	fill: #fff2ed;
 	stroke-width: 0.5px;
-	stroke: #eeb096;
-	width: 150px;
-	height: 150px;
+	stroke: #e79f80;
+	width: 80px;
+	height: 80px;
 }
 
 @keyframes onboard-step-show {
@@ -1179,6 +1179,14 @@ body:not(.is-app) .show-when-app {
 	background: white
 		url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="width:32px;height:32px" viewBox="0 0 24 24"><path fill="limegreen" d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M11,16.5L18,9.5L16.59,8.09L11,13.67L7.91,10.59L6.5,12L11,16.5Z" /></svg>');
 }
+.bookmarklet {
+	display: inline-flex;
+	align-items: center;
+	border: 1px #aaa solid;
+	padding: 0 5px;
+	border-style: dashed;
+	color: #333;
+}
 
 /* Codemirror themes basic bg styles. This is here so that there is no big FOUC
 while the theme CSS file is loading */