style

integromat · Jan 28, 2019 · d180303 · d180303
1 parent d1d27bf
commit d180303
Show file tree

Hide file tree

Showing 11 changed files with 170 additions and 41 deletions.
diff --git a/html/imported.html b/html/imported.html
@@ -36,12 +36,72 @@
 		.p-15 {
 			padding: 15px
 		}
+		#errors li {
+			display: block;
+			padding: 10px 115px 10px 15px;
+			position: relative;
+			border-top: 1px solid #e3e4e8;
+		}
 		a.doc {
 			display: block;
 			text-decoration: none;
 			color: #2f8cbb;
-			border-top: 1px solid #e3e4e8;
-			padding: 10px 15px;
+			padding: 0;
+			padding-left: 30px;
+		}
+		ol {
+			counter-reset: my-counter;
+			list-style: none;
+			padding-left: 0px;
+		}
+		ol li {
+			counter-increment: my-counter;
+			position: relative;
+		}
+		ol li::before {
+			content: counter(my-counter);
+			color: #fff;
+			background: #2f8cbb;
+			text-align: center;
+			padding: 2px 5px;
+			margin-right: 10px;
+			width: 20px;
+			display: block;
+			position: absolute;
+			left: 0;
+			height: 100%;
+			top: 0;
+			line-height: 250%;
+		}
+		.button {
+			font-family: 'Roboto', sans-serif;
+			padding: .375rem .75rem;
+			border-radius: .25rem;
+			line-height: 1.5;
+			font-size: 16px;
+			outline: none;
+			cursor: pointer;
+			border: 0;
+			text-decoration: none;
+		}
+		.button.go-to-docs {
+			color: #fff;
+			background-color: #2f8cbb;
+			border-color: #2f8cbb;
+			position: absolute;
+			right: 15px;
+			top: 10px;
+		}
+		.button.go-to-docs:hover {
+			color: #fff;
+			background-color: #27759c;
+			border-color: #256d92;
+		}
+		.btn-xs {
+			padding: 1px 5px;
+			font-size: 12px;
+			line-height: 1.5;
+			border-radius: 3px;
 		}
 	</style>
 	<title>Imported</title>
@@ -61,8 +121,8 @@ <h1>App Has Been Imported!</h1>
 			They are linked to the docs, where you cand find more information about what has caused then and how to fix them.
 		</p>
 	</div>
-	<div id='errors'>
-	</div>
+	<ol id='errors'>
+	</ol>
 
 	<script src="imported.js"></script>
 </body>

diff --git a/html/imported.js b/html/imported.js
@@ -2,10 +2,10 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
 	if (message.routine === 'setErrors') {
 		const errorWrapper = document.getElementById('errors');
 		for (const error of message.errors) {
-			errorWrapper.innerHTML += `<div>
+			errorWrapper.innerHTML += `<li>
 			<a class="doc" target="_blank" href="https://docs.integromat.com/apps/primary/integromat-importer/errors/${error.code}">${error.description} - Severity: ${error.severity}</a>
-			<a target="_blank" href="https://docs.integromat.com/apps/primary/integromat-importer/errors/${error.code}">Open in Docs</a>
-			</div>`
+			<a class="button f-right go-to-docs btn-xs" target="_blank" href="https://docs.integromat.com/apps/primary/integromat-importer/errors/${error.code}">Open in Docs</a>
+			</li>`
 		}
 		sendResponse({ status: 0 })
 	}

diff --git a/html/landingPage.html b/html/landingPage.html
@@ -53,7 +53,7 @@
 			height: 32px;
 			margin-right: -2.5px;
 			position: relative;
-			top: -1px;
+			top: 0px;
 		}
 		input#apikey {
 			font-family: monospace;

diff --git a/html/loggedIn.html b/html/loggedIn.html
@@ -31,6 +31,11 @@
 			font-size: 16px;
 			outline: none;
 			cursor: pointer;
+			top: 2px;
+			position: relative;
+			margin-left: -4px;
+			border-top-left-radius: 0;
+			border-bottom-left-radius: 0;
 		}
 		button.primary {
 			background: #2f8cbb;
@@ -66,6 +71,20 @@
 		.f-right {
 			float: right;
 		}
+		.custom-select {
+			display: inline-block;
+			width: 50%;
+			height: calc(2.25rem + 2px);
+			padding: .375rem 1.75rem .375rem .75rem;
+			line-height: 1.5;
+			color: #495057;
+			vertical-align: middle;
+			background-size: 8px 10px;
+			border: 1px solid #cecece;
+			border-radius: .25rem;
+			border-top-right-radius: 0;
+			border-bottom-right-radius: 0;
+		}
 	</style>
 </head>
 
@@ -77,20 +96,18 @@
 	</header>
 	<div class="center pb-30">
 		<h1 id="welcome">You are all set!</h1>
-		<p class="pb-30">Now you can start importing apps!</p>
+		<p class="pb-30">Now you can start importing apps! Choose importing mode:</p>
 		<form>
-			<span>Choose importing mode:</span>
-			<select id="modeselect" name="mode">
+			<select class="custom-select" id="modeselect" name="mode">
 				<option value="zapier">Zapier</option>
 			</select>
+			<button type="button" class="primary" id="letsgo">Set mode</button>
 		</form>
-		<button type="button" class="primary" id="letsgo">Set mode</button>
 	</div>
 	<footer>
 		<span id="currentUser" class="o-6"></span>
-		<a class="logout f-right" id="buttonLogout">Logout &raquo;</a>
-		<br>
-		<span id="currentMode" class="o-6">Mode not set</span>
+		<a class="logout" id="buttonLogout">(Logout)</a>
+		<span id="currentMode" class="o-6 f-right">Mode not set</span>
 	</footer>
 	<script type="module" src="./loggedIn.mjs"></script>
 </body>

diff --git a/html/loggedIn.mjs b/html/loggedIn.mjs
@@ -5,7 +5,7 @@ import Common from '../bin/Common.mjs'
  */
 (async () => {
 	document.getElementById("buttonLogout").addEventListener("click", Common.logout);
-	document.getElementById("currentUser").innerText = `Currently logged in as ${(await Common.getUserData(await Common.getStoredApiKey())).name}.`;
+	document.getElementById("currentUser").innerText = `Logged in as ${(await Common.getUserData(await Common.getStoredApiKey())).name}.`;
 })();
 /**
  * PAGE FUNCTIONS

diff --git a/html/zapierImport.html b/html/zapierImport.html
@@ -171,6 +171,9 @@
 			height: 162px;
 			overflow-y: auto;
 		}
+		#errors li {
+			display: none;
+		}
 		button {
 			font-family: 'Roboto', sans-serif;
 			padding: .375rem .75rem;
@@ -198,6 +201,9 @@
 			line-height: 1.5;
 			border-radius: 3px;
 		}
+		#currentMode {
+			margin-right: 3px;
+		}
 		@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
 	</style>
 </head>
@@ -217,10 +223,9 @@ <h2 id="sr"></h2>
 	</div>
 	<footer>
 		<span id="currentUser" class="o-6"></span>
-		<a class="logout f-right" id="buttonLogout">Logout &raquo;</a>
-		<br>
-		<span id="currentMode" class="o-6"></span>
-		<a class="logout f-right" id="buttonChangeMode">Change Mode &raquo;</a>
+		<a class="logout" id="buttonLogout">(Logout)</a>
+		<a class="logout f-right" id="buttonChangeMode">(Change)</a>
+		<span id="currentMode" class="o-6 f-right"></span>
 	</footer>
 
 	<script type="module" src="zapierImport.mjs"></script>

diff --git a/html/zapierImport.mjs b/html/zapierImport.mjs
@@ -7,8 +7,8 @@ import Common from '../bin/Common.mjs'
 (async () => {
 	document.getElementById("buttonLogout").addEventListener("click", Common.logout);
 	document.getElementById("buttonChangeMode").addEventListener("click", Common.demode);
-	document.getElementById("currentUser").innerText = `Currently logged in as ${(await Common.getUserData(await Common.getStoredApiKey())).name}.`;
-	document.getElementById("currentMode").innerText = `Current import mode is ${await Common.getMode()}.`
+	document.getElementById("currentUser").innerText = `Logged in as ${(await Common.getUserData(await Common.getStoredApiKey())).name}.`;
+	document.getElementById("currentMode").innerText = `Mode: ${await Common.getMode()}`
 })();
 
 /**
@@ -147,14 +147,14 @@ async function importApp(id) {
 	 */
 	body.innerHTML = `
 	<h1 class="p-15">DONE!</h1>
-	<div id="errors" class="errors"></div>
+	<ol id="errors" class="errors"></ol>
 	`
 	const errorWrapper = document.getElementById('errors');
 	for (const error of requests.errors) {
-		errorWrapper.innerHTML += `<div>
+		errorWrapper.innerHTML += `<li>
 			<a class="doc" target="_blank" href="https://docs.integromat.com/apps/primary/integromat-importer/errors/${error.code}">${error.description} - Severity: ${error.severity}</a>
 			<a target="_blank" href="https://docs.integromat.com/apps/primary/integromat-importer/errors/${error.code}">Open in Docs</a>
-		</div>`
+		</li>`
 	}
 	const newTab = await Common.createNewTab('html/imported.html', false);
 	await Common.sendMessageToTab(newTab, { routine: 'setErrors', errors: requests.errors })

diff --git a/html/zapierLogin.html b/html/zapierLogin.html
@@ -54,6 +54,9 @@
 		p {
 			margin-bottom: 42px;
 		}
+		#currentMode {
+			margin-right: 3px;
+		}
 	</style>
 </head>
 
@@ -69,10 +72,9 @@ <h1 id="welcome" class="h-icon">&#9919;</h1>
 	</div>
 	<footer>
 		<span id="currentUser" class="o-6"></span>
-		<a class="logout f-right" id="buttonLogout">Logout &raquo;</a>
-		<br>
-		<span id="currentMode" class="o-6"></span>
-		<a class="logout f-right" id="buttonChangeMode">Change Mode &raquo;</a>
+		<a class="logout" id="buttonLogout">(Logout)</a>
+		<a class="logout f-right" id="buttonChangeMode">(Change)</a>
+		<span id="currentMode" class="o-6 f-right"></span>
 	</footer>
 
 	<script type="module" src="./zapierLogin.mjs"></script>

diff --git a/html/zapierLogin.mjs b/html/zapierLogin.mjs
@@ -6,6 +6,6 @@ import Common from '../bin/Common.mjs'
 (async () => {
 	document.getElementById("buttonLogout").addEventListener("click", Common.logout);
 	document.getElementById("buttonChangeMode").addEventListener("click", Common.demode);
-	document.getElementById("currentUser").innerText = `Currently logged in as ${(await Common.getUserData(await Common.getStoredApiKey())).name}.`;
-	document.getElementById("currentMode").innerText = `Current import mode is ${await Common.getMode()}.`
+	document.getElementById("currentUser").innerText = `Logged in as ${(await Common.getUserData(await Common.getStoredApiKey())).name}.`;
+	document.getElementById("currentMode").innerText = `Mode: ${await Common.getMode()}`
 })();
diff --git a/html/zapierNotOn.html b/html/zapierNotOn.html
@@ -3,6 +3,10 @@
 
 <head>
 	<style>
+		@import url('https://fonts.googleapis.com/css?family=Roboto:300,400&subset=latin-ext');
+		* {
+			box-sizing: border-box;
+		}
 		body {
 			width: 512px;
 			margin: 0 2px;
@@ -19,11 +23,12 @@
 		h1 {
 			font-family: 'Roboto', sans-serif;
 			font-weight: 300;
+			margin-top: 45px;
 		}
 
 		.center {
 			text-align: center;
-			margin-top: 75px;
+			margin-top: 30px;
 		}
 
 		.pb-30 {
@@ -35,6 +40,46 @@
 			font-size: 5em;
 			margin: 10px;
 		}
+		button {
+			font-family: 'Roboto', sans-serif;
+			padding: .375rem .75rem;
+			border-radius: .25rem;
+			line-height: 1.5;
+			font-size: 16px;
+			outline: none;
+			cursor: pointer;
+			margin-bottom: 19px;
+		}
+		button.primary {
+			background: #2f8cbb;
+			border: 1px solid #2f8cbb;
+			color: #fff;
+		}
+		button.primary:hover {
+			color: #fff;
+			background-color: #27759c;
+			border-color: #256d92;
+		}
+		footer {
+			border-top: 1px solid #e3e4e8;
+			padding: 15px;
+		}
+		a.logout {
+			color: #eb5768;
+			cursor: pointer;
+		}
+		a.logout:hover, a.logout:focus, a.logout:active {
+			color: #A43C48;
+		}
+		.o-6 {
+			opacity: .6;
+		}
+		.f-right {
+			float: right;
+		}
+		#currentMode {
+			margin-right: 3px;
+		}
 	</style>
 </head>
 
@@ -45,19 +90,19 @@
 		</a>
 	</header>
 	<div class="center pb-30">
-		<h1 class="h-icon">&#9919;</h1>
+		<h1>Almost there</h1>
 		<p class="pb-30">
-			It looks like you're not Zapier and the Zapier mode is set.
-			Either change the mode in the footer orgo to Zapier.
+			It looks like you're not on Zapier and the Zapier mode is set.
+			<br>
+			Either change the mode in the footer or go to Zapier.
 		</p>
 		<button class="primary" type="button" id="getStarted">Visit Zapier</button>
 	</div>
 	<footer>
 		<span id="currentUser" class="o-6"></span>
-		<a class="logout f-right" id="buttonLogout">Logout &raquo;</a>
-		<br>
-		<span id="currentMode" class="o-6"></span>
-		<a class="logout f-right" id="buttonChangeMode">Change Mode &raquo;</a>
+		<a class="logout" id="buttonLogout">(Logout)</a>
+		<a class="logout f-right" id="buttonChangeMode">(Change)</a>
+		<span id="currentMode" class="o-6 f-right"></span>
 	</footer>
 
 	<script type="module" src="./zapierNotOn.mjs"></script>

diff --git a/html/zapierNotOn.mjs b/html/zapierNotOn.mjs
@@ -6,8 +6,8 @@ import Common from '../bin/Common.mjs'
 (async () => {
 	document.getElementById("buttonLogout").addEventListener("click", Common.logout);
 	document.getElementById("buttonChangeMode").addEventListener("click", Common.demode);
-	document.getElementById("currentUser").innerText = `Currently logged in as ${(await Common.getUserData(await Common.getStoredApiKey())).name}.`;
-	document.getElementById("currentMode").innerText = `Current import mode is ${await Common.getMode()}.`
+	document.getElementById("currentUser").innerText = `Logged in as ${(await Common.getUserData(await Common.getStoredApiKey())).name}.`;
+	document.getElementById("currentMode").innerText = `Mode: ${await Common.getMode()}`
 })();
 
 document.getElementById("getStarted").addEventListener("click", callLanding);