diff --git a/src/index.html b/src/index.html index fbbbaf5..c09f0d5 100644 --- a/src/index.html +++ b/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> diff --git a/src/partials/login-modal.html b/src/partials/login-modal.html index b8e44b5..f84b79f 100644 --- a/src/partials/login-modal.html +++ b/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> diff --git a/src/script.js b/src/script.js index 3aea014..74387ae 100644 --- a/src/script.js +++ b/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); diff --git a/src/style.css b/src/style.css index 3112c1a..748c15f 100644 --- a/src/style.css +++ b/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 {