From 15be39c674f8aabeba82c94c0b6deb8d909b4e35 Mon Sep 17 00:00:00 2001
From: Kushagra Gour <chinchang457@gmail.com>
Date: Thu, 21 Sep 2017 10:22:30 +0530
Subject: [PATCH] refactor onboard modal

---
 src/index.html | 110 ++++++++++++++++++++++++-------------------------
 src/style.css  |  57 ++++++++++++++-----------
 2 files changed, 87 insertions(+), 80 deletions(-)

diff --git a/src/index.html b/src/index.html
index bcea94a..9bb8aae 100644
--- a/src/index.html
+++ b/src/index.html
@@ -233,9 +233,8 @@
 				</a>
 				<!-- #00ACED -->
 				<a class="footer__link  hint--rounded  hint--top-right" data-hint="Tweet about 'Web Maker'" href="http://twitter.com/share?url=https://webmakerapp.com/&text=Web Maker - A blazing fast %26 offline web playground! via @webmakerApp&related=webmakerApp&hashtags=web,playground,chrome,extension" target="_blank">
-					<svg viewBox="0 0 16 16" style="width:20px; height:20px; vertical-align:text-bottom">
-						<path id="twitter-icon" d="M15.969,3.058c-0.586,0.26-1.217,0.436-1.878,0.515c0.675-0.405,1.194-1.045,1.438-1.809
-					c-0.632,0.375-1.332,0.647-2.076,0.793c-0.596-0.636-1.446-1.033-2.387-1.033c-1.806,0-3.27,1.464-3.27,3.27 c0,0.256,0.029,0.506,0.085,0.745C5.163,5.404,2.753,4.102,1.14,2.124C0.859,2.607,0.698,3.168,0.698,3.767 c0,1.134,0.577,2.135,1.455,2.722C1.616,6.472,1.112,6.325,0.671,6.08c0,0.014,0,0.027,0,0.041c0,1.584,1.127,2.906,2.623,3.206 C3.02,9.402,2.731,9.442,2.433,9.442c-0.211,0-0.416-0.021-0.615-0.059c0.416,1.299,1.624,2.245,3.055,2.271 c-1.119,0.877-2.529,1.4-4.061,1.4c-0.264,0-0.524-0.015-0.78-0.046c1.447,0.928,3.166,1.469,5.013,1.469 c6.015,0,9.304-4.983,9.304-9.304c0-0.142-0.003-0.283-0.009-0.423C14.976,4.29,15.531,3.714,15.969,3.058z"/>
+					<svg style="width:20px; height:20px; vertical-align:text-bottom">
+						<use xlink:href="#twitter-icon"></use>							
 					</svg>
 				</a>
 
@@ -315,63 +314,58 @@
 		<div class="modal" id="onboardModal">
 			<div class="modal__content">
 
-				<div class="tac">
-					<svg width="130px" height="50px">
-					    <use xlink:href="#logo" />
-					</svg>
-					<h1 style="margin-top:20px">Welcome to Web Maker</h1>
-				</div>
-				<div class="tac">
-					<!-- <p>Web Maker lets you do web experiments quickly and even when you are offline.</p> -->
-
-					<p>
-						By default, Web Maker can be started by clicking the <svg class="relative" style="top:5px;" width="40" height="30"><use xlink:href="#logo" /></svg> button in top-right side of your browser. But you can choose to make Web Maker show in every new tab that you open:
-					</p>
-
-					<h2 style="text-decoration: underline;">Choose one:</h2>
-					<div class="onboard-selection-wrap flex">
-						<div class="onboard-selection selected" id="onboardDontShowInTabOptionBtn" d-click="onDontShowInTabClicked">
-							<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="150" viewBox="180 200 340 320" xml:space="preserve">
-							<path style="fill:#A5A5A5;stroke: #555;stroke-width: 11px;" d="M503.916,256v43.116H191.326V256c0-11.906,9.651-21.558,21.558-21.558h269.474
-								C494.264,234.442,503.916,244.094,503.916,256z"></path>
-							<path style="fill:#FED766;stroke-width: 11px;stroke: #555;" d="M503.916,288.337v194.021c0,11.906-9.651,21.558-21.558,21.558H212.884
-								c-11.906,0-21.558-9.651-21.558-21.558V288.337h43.116v-64.674c0-5.953,4.826-10.779,10.779-10.779h64.674
-								c5.953,0,10.779,4.826,10.779,10.779v64.674H503.916z"></path>
-							  <rect width="200px" height="20px" rx="5" ry="5" x="250" y="365px" style="fill:#f3f3f3;"></rect>
-							</svg>
-							<div class="onboard-selection-text">Don't show in new tab</div>
-						</div>
-
-						<div style="opacity:0.7;">OR</div>
-
-						<div class="onboard-selection" id="onboardShowInTabOptionBtn" d-click="onShowInTabClicked">
-							<!-- Awesome free vector from freepik.com -->
-							<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="150" viewBox="180 200 340 320" xml:space="preserve">
-							<path style="fill:#A5A5A5;stroke: #555;stroke-width: 11px;" d="M503.916,256v43.116H191.326V256c0-11.906,9.651-21.558,21.558-21.558h269.474
-							C494.264,234.442,503.916,244.094,503.916,256z"></path>
-							<path style="fill:#FED766;stroke-width: 11px;stroke: #555;" d="M503.916,288.337v194.021c0,11.906-9.651,21.558-21.558,21.558H212.884
-							c-11.906,0-21.558-9.651-21.558-21.558V288.337h43.116v-64.674c0-5.953,4.826-10.779,10.779-10.779h64.674
-							c5.953,0,10.779,4.826,10.779,10.779v64.674H503.916z"></path>
-							<rect width="120px" height="50px" rx="5" ry="5" x="210" y="315px" style="fill:rgba(0,0,0,0.25);"></rect>
-							<rect width="120px" height="50px" rx="5" ry="5" x="210" y="372px" style="fill:rgba(0,0,0,0.25);"></rect>
-							<rect width="120px" height="50px" rx="5" ry="5" x="210" y="430px" style="fill:rgba(0,0,0,0.25);"></rect>
-							<rect width="140px" height="165px" rx="5" ry="5" x="345" y="315px" style="fill:#f3f3f3;"></rect>
-							</svg>
-							<div class="onboard-selection-text">Show in every new tab</div>
-						</div>
+			<div class="tac">
+				<svg width="130px" height="50px">
+					<use xlink:href="#logo" />
+				</svg>
+				<h1 style="margin-top:20px">Welcome to Web Maker</h1>
+			</div>
+			<div class="flex" style="margin-top;: 100px;">
+				<div class="onboard-step">
+					<div class="tac">
+						<svg class="onboard-step__icon" viewBox="0 0 24 24">
+							<path d="M13.64,21.97C13.14,22.21 12.54,22 12.31,21.5L10.13,16.76L7.62,18.78C7.45,18.92 7.24,19 7,19A1,1 0 0,1 6,18V3A1,1 0 0,1 7,2C7.24,2 7.47,2.09 7.64,2.23L7.65,2.22L19.14,11.86C19.57,12.22 19.62,12.85 19.27,13.27C19.12,13.45 18.91,13.57 18.7,13.61L15.54,14.23L17.74,18.96C18,19.46 17.76,20.05 17.26,20.28L13.64,21.97Z"
+							/>
+						</svg>
 					</div>
-
 					<p>
-						You can change this later from Settings (<svg style="width:18px;height:18px;position:relative;top:3px;fill:#888" viewBox="0 0 24 24"><use xlink:href="#settings-icon"></use></svg>) in bottom right of the app.
-					</p>
-					<p>
-						Also, follow <a href="https://twitter.com/intent/follow?screen_name=webmakerApp">@webmakerApp</a> to know about the new upcoming features!
-					</p>
-
-					<p class="tac">
-						<button class="btn" d-click="closeAllOverlays">Lets start!</button>
+						Open Web Maker anytime by clicking the
+						<svg class="relative" style="top:5px;" width="40" height="30">
+							<use xlink:href="#logo" />
+						</svg> button in top-right side of your browser.
 					</p>
 				</div>
+				<div class="onboard-step">
+					<div class="tac">
+						<svg class="onboard-step__icon" viewBox="0 0 24 24">
+							<use xlink:href="#settings-icon"></use>
+						</svg>
+					</div>
+					<p>
+						Configure and customize settings by clicking the gear icon (
+						<svg style="width:18px;height:18px;position:relative;top:3px;fill:#888"
+						viewBox="0 0 24 24">
+							<use xlink:href="#settings-icon"></use>
+						</svg>) in bottom right of the app.
+					</p>
+				</div>
+				<div class="onboard-step">
+					<div class="tac">
+						<svg class="onboard-step__icon" style="stroke-width:0.2px;">
+							<use xlink:href="#twitter-icon"></use>
+						</svg>
+					</div>
+					<p>
+						Follow <a href="https://twitter.com/intent/follow?screen_name=webmakerApp">@webmakerApp</a> to know about the new upcoming
+						features!
+					</p>
+				</div>
+			</div>
+
+				
+				<p class="tac">
+					<button class="btn" d-click="closeAllOverlays">Lets start!</button>
+				</p>
 			</div>
 		</div>
 
@@ -562,6 +556,10 @@
 			<symbol id="settings-icon" viewBox="0 0 24 24">
 				<path d="M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z"></path>
 			</symbol>
+			<symbol	id="twitter-icon" viewBox="0 0 16 16">
+				<path d="M15.969,3.058c-0.586,0.26-1.217,0.436-1.878,0.515c0.675-0.405,1.194-1.045,1.438-1.809
+			c-0.632,0.375-1.332,0.647-2.076,0.793c-0.596-0.636-1.446-1.033-2.387-1.033c-1.806,0-3.27,1.464-3.27,3.27 c0,0.256,0.029,0.506,0.085,0.745C5.163,5.404,2.753,4.102,1.14,2.124C0.859,2.607,0.698,3.168,0.698,3.767 c0,1.134,0.577,2.135,1.455,2.722C1.616,6.472,1.112,6.325,0.671,6.08c0,0.014,0,0.027,0,0.041c0,1.584,1.127,2.906,2.623,3.206 C3.02,9.402,2.731,9.442,2.433,9.442c-0.211,0-0.416-0.021-0.615-0.059c0.416,1.299,1.624,2.245,3.055,2.271 c-1.119,0.877-2.529,1.4-4.061,1.4c-0.264,0-0.524-0.015-0.78-0.046c1.447,0.928,3.166,1.469,5.013,1.469 c6.015,0,9.304-4.983,9.304-9.304c0-0.142-0.003-0.283-0.009-0.423C14.976,4.29,15.531,3.714,15.969,3.058z"/>
+			</symbol>
 			<symbol id="heart-icon" viewBox="0 0 24 24">
 				<path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z" />
 			</symbol>
diff --git a/src/style.css b/src/style.css
index b9b2a1a..aacafa2 100644
--- a/src/style.css
+++ b/src/style.css
@@ -792,33 +792,42 @@ body > #demo-frame {
 	padding: 1px 6px;
 	font-weight: bold;
 }
-.onboard-selection-wrap {
-	justify-content: center;
-	align-items: center;
+.onboard-step {
+	background: #f7f2f1;
+	border: 1px solid #ecdede;
+	margin: 15px;
+	padding: 20px 30px;
+	background-color: white;
+	border-radius: 10px;
+	box-shadow: 0 16px 22px rgba(0, 0, 0, 0.1);
+	flex: 1;
+	opacity: 0;
+	animation: onboard-step-show 0.6s ease forwards;
+	animation-delay: 0.1s;
 }
-.onboard-selection {
-	padding: 10px;
-	margin: 0 40px;
-	border-radius: 5px;
-	transition: 0.25s ease;
-	position: relative;
-	border: 1px solid transparent;
+.onboard-step:nth-child(2) {
+	animation-delay: 0.2s;
 }
-.onboard-selection:hover {
-	cursor: pointer;
-	/*background-color: rgba(0,0,0,0.3);*/
-	transform: scale(1.15);
-	/*border-color: rgba(0,0,0,0.4);*/
+.onboard-step:nth-child(3) {
+	animation-delay: 0.4s;
 }
-.onboard-selection.selected:after {
-	content: '';
-	position: absolute;
-	right: -20px;
-	bottom: 40px;
-	width: 80px;
-	height: 80px;
-	border-radius: 50%;
-	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>');
+.onboard-step__icon {
+	fill: transparent!important;
+	stroke-width: 0.3px;
+	stroke: #eeb096;
+	width: 150px;
+	height: 150px;
+}
+
+@keyframes onboard-step-show {
+	from {
+		transform: translateY(10px);
+		opacity: 0;
+	}
+	to {
+		transform: translateY(0);
+		opacity: 1;
+	}
 }
 
 .autocomplete-dropdown {