show last logged in social provider in login modal

src/index.html

@@ -355,7 +355,7 @@
 			<div class="modal__content" d-html="partials/onboard-modal.html"></div>
 		</div>
 
-		<div class="modal" id="loginModal">
+		<div class="modal login-modal" id="loginModal">
 			<div class="modal__content" d-html="partials/login-modal.html"></div>
 		</div>
 

src/partials/login-modal.html

@@ -8,17 +8,29 @@
 
 <div>
     <p>
-        <button d-click="login" class="btn btn-icon btn--big full-width social-login-btn--github" data-auth-provider="github">
+        <button
+            d-click="login"
+            class="social-login-btn social-login-btn--github  btn btn-icon btn--big full-width hint--right hint--always"
+            data-auth-provider="github"
+            data-hint="You logged in with Github last time">
             <svg><use xlink:href="#github-icon"></use></svg>Login with Github
         </button>
     </p>
     <p>
-        <button d-click="login" class="btn btn-icon btn--big full-width social-login-btn--google" data-auth-provider="google">
+        <button
+            d-click="login"
+            class="social-login-btn social-login-btn--google  btn btn-icon btn--big full-width hint--right hint--always"
+            data-auth-provider="google"
+            data-hint="You logged in with Google last time">
             <svg><use xlink:href="#google-icon"></use></svg>Login with Google
         </button>
     </p>
     <p class="mb-2">
-        <button d-click="login" class="btn btn-icon btn--big full-width social-login-btn--facebook" data-auth-provider="facebook">
+        <button
+            d-click="login"
+            class="social-login-btn social-login-btn--facebook  btn btn-icon btn--big full-width hint--right hint--always"
+            data-auth-provider="facebook"
+            data-hint="You logged in with Facebook last time">
             <svg><use xlink:href="#fb-icon"></use></svg>Login with Facebook
         </button>
     </p>

src/script.js

@@ -2175,6 +2175,12 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
 
 		CodeMirror.modeURL = `lib/codemirror/mode/%N/%N.js`;
 
+		window.db.local.get({ lastAuthProvider: '' }, result => {
+			if (result.lastAuthProvider) {
+				document.body.classList.add(`last-login-${result.lastAuthProvider}`);
+			}
+		});
+
 		function getToggleLayoutButtonListener(mode) {
 			return function() {
 				saveSetting('layoutMode', mode);

src/style.css

@@ -96,6 +96,7 @@ label {
 	text-transform: none;
 	font-weight: normal;
 	letter-spacing: 0.5px;
+	font-size: 14px;
 }
 .line {
 	display: block;
@@ -582,7 +583,7 @@ body > #demo-frame {
 	position: relative;
 	border-radius: 8px;
 	opacity: 0;
-	padding: 2em;
+	padding: 3em;
 	font-size: 1.1em;
 	line-height: 1.4;
 	max-width: 85vw;
@@ -631,6 +632,9 @@ body > #demo-frame {
 .ask-to-import-modal .modal__content {
 	max-width: 800px;
 }
+.login-modal .modal__content {
+	overflow-y: initial;
+}
 .saved-items-pane {
 	position: fixed;
 	right: 0;
@@ -1193,6 +1197,25 @@ body:not(.is-app) .show-when-app {
 	color: #333;
 }
 
+.social-login-btn:after,
+.social-login-btn:before,
+.social-login-btn:hover:before,
+.social-login-btn:hover:after {
+	visibility: hidden;
+}
+.last-login-github .social-login-btn--github:before,
+.last-login-github .social-login-btn--github:after {
+	visibility: visible;
+}
+.last-login-facebook .social-login-btn--facebook:before,
+.last-login-facebook .social-login-btn--facebook:after {
+	visibility: visible;
+}
+.last-login-google .social-login-btn--google:before,
+.last-login-google .social-login-btn--google:after {
+	visibility: visible;
+}
+
 /* Codemirror themes basic bg styles. This is here so that there is no big FOUC
 while the theme CSS file is loading */
 .cm-s-paraiso-dark.CodeMirror {