From 4e92d49261671413270090ad834e5bc57cfaf1e6 Mon Sep 17 00:00:00 2001
From: Bastard Operator <bofh@nogafam.es>
Date: Wed, 6 Jan 2021 19:51:54 +0100
Subject: [PATCH] New UI improvements + URL interval handler made faster

* Log in button now has mastodon white icon
* Home navigation with FediLove icon added
---
 src/intl/en-US.js               |   2 +-
 src/routes/_components/Nav.html |  19 +++++++++++++----
 src/scss/themes/ozark.scss      |  36 ++++++++++++++++++++++++++++++--
 static/fedilove-no-react.js     |   2 +-
 static/mastoicon.png            | Bin 0 -> 1556 bytes
 5 files changed, 51 insertions(+), 8 deletions(-)
 create mode 100644 static/mastoicon.png

diff --git a/src/intl/en-US.js b/src/intl/en-US.js
index ed8aabc4..7a239ba8 100644
--- a/src/intl/en-US.js
+++ b/src/intl/en-US.js
@@ -10,7 +10,7 @@ export default {
     <p>
       Start your journey to <b>meet your crush</b> !!
     </p>`,
-  logIn: 'Log in using <b>Mastodon</b>',
+  logIn: 'Log in <img id="btn-masto" src="/mastoicon.png"/>',
   logInText: 'Log In',
   footer: `
     <p>
diff --git a/src/routes/_components/Nav.html b/src/routes/_components/Nav.html
index 5a703d23..500512e9 100644
--- a/src/routes/_components/Nav.html
+++ b/src/routes/_components/Nav.html
@@ -1,6 +1,14 @@
 <nav id="main-nav" class="main-nav">
-  <div id="dummy-nav" style="height: 5em;"></div>
-	<ul class="main-nav-ul" style="display: none">
+
+  <div id="dummy-nav">
+    <div class="banner">
+       <a href="/">
+        <SvgIcon className="not-logged-header-svg" href="#pinafore-logo" />
+       </a>
+    </div>
+  </div>
+
+  <ul class="main-nav-ul" style="display: none">
     {#each $navPages as navPage (navPage.href)}
       <li class="main-nav-li">
         <NavItem
@@ -12,7 +20,8 @@
         />
       </li>
     {/each}
-	</ul>
+  </ul>
+
 <div id="chat-party-hide" style="display: none !important">
   <div style="width: 100%;background:#fff">
   <div id="chat-party-global">
@@ -74,6 +83,7 @@
 </style>
 <script>
   import NavItem from './NavItem'
+  import SvgIcon from './SvgIcon.html'
   import { importNavShortcuts } from '../_utils/asyncModules/importNavShortcuts.js'
   import { store } from '../_store/store'
 
@@ -84,7 +94,8 @@
     },
     store: () => store,
     components: {
-      NavItem
+      NavItem,
+      SvgIcon
     },
     data: () => ({
       navShortcuts: undefined
diff --git a/src/scss/themes/ozark.scss b/src/scss/themes/ozark.scss
index 3860e3ce..b77af90c 100644
--- a/src/scss/themes/ozark.scss
+++ b/src/scss/themes/ozark.scss
@@ -20,8 +20,8 @@ $nav-a-border: #ffa700;
 $nav-a-border-hover: #fff;
 $nav-active-bg: lighten($nav-a-selected-bg-hover, 15%);
 $button-primary: #ff1b3b;
-$button-primary-hover: lighten($button-primary, 25%);
-$button-primary-active: lighten($button-primary, 10%);
+$button-primary-hover: lighten($button-primary, 12%);
+$button-primary-active: lighten($button-primary, 6%);
 $main-border: #ececec;
 $article-bg: #fff;
 $deemphasized-text-color: #939393;
@@ -38,6 +38,9 @@ $deemphasized-text-color: #939393;
     --button-primary-bg: #{$button-primary};
     --button-primary-bg-hover: #{$button-primary-hover};
     --button-primary-bg-active: #{$button-primary-active};
+    --scrollbar-face-color: #{$button-primary-active};
+    --scrollbar-face-color-hover: #{$button-primary-active};
+    --scrollbar-face-color-active: #{$button-primary-active};
     --main-bg: #{$main-bg-color};
     --nav-bg: #{$nav-bg};
     --nav-text-color: #{$nav-text-color};
@@ -54,6 +57,8 @@ $deemphasized-text-color: #939393;
     --nav-total-height: 3.8em;
     --main-border: #{$main-border};
     --article-bg: #{$article-bg};
+    --focus-outline: #{$button-primary-hover};
+    --focus-width: 1px;
     --deemphasized-text-color: #{$deemphasized-text-color};
     --very-deemphasized-text-color: #{$deemphasized-text-color};
 }
@@ -85,8 +90,35 @@ div.main-content { background: var(--main-bg); }
 div.no-script { display: none; }
 
 body.not-logged-in {
+  nav#main-nav {
+    border-bottom: 4px solid #fbb8b8;
+
+    #dummy-nav {
+      display: flex;
+      height: 4em;
+
+      div.banner {
+        margin: auto 0;
+        padding-left: .5em;
+        display: flex;
+
+        svg.not-logged-header-svg {
+          width: 2.5em;
+          height: 2.5em;
+          fill: url(#grad1);
+        }
+      }
+    }
+  }
   div.not-logged-in-home h1 { color: #dd6374 !important; }
   svg.not-logged-in-home-svg { fill: url(#grad1); }
+  a.button.primary > img#btn-masto,
+  button.primary > img#btn-masto {
+    width: 1.2em;
+    margin-left: .2em;
+    position: relative;
+    top: .3em;
+  }
 }
 
 body.not-logged-in.home {
diff --git a/static/fedilove-no-react.js b/static/fedilove-no-react.js
index 1f3ee4e7..712abdea 100644
--- a/static/fedilove-no-react.js
+++ b/static/fedilove-no-react.js
@@ -602,5 +602,5 @@ setInterval(function() {
         __window_url     = newurl;
         fedilove_customization();
     }
-}, 250);
+}, 100);
 
diff --git a/static/mastoicon.png b/static/mastoicon.png
new file mode 100644
index 0000000000000000000000000000000000000000..2e00f2ada3d2f6b64aef96a63aa3de0f814d7202
GIT binary patch
literal 1556
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
GLSTYc6V;ml

literal 0
HcmV?d00001