From 1f4dfd38d5b28411fa95df6a8cd10d8d6f64d3df Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@daubenschuetz.de>
Date: Wed, 3 Jan 2024 15:30:59 +0100
Subject: [PATCH] Sidebar improvements

- Show text on desktop
- Add notification when not delegated
---
 src/public/news.css              | 31 ++++++++++++++++---------------
 src/views/components/sidebar.mjs |  1 +
 src/views/settings.mjs           |  2 +-
 src/web/src/Navigation.jsx       | 19 +++++++++++++++++--
 4 files changed, 35 insertions(+), 18 deletions(-)

diff --git a/src/public/news.css b/src/public/news.css
index b341cd2e..860c66d4 100644
--- a/src/public/news.css
+++ b/src/public/news.css
@@ -431,7 +431,7 @@ body {
      width: 100%;
 }
 /* Media query for larger screens */
- @media (min-width: 900px) {
+ @media (min-width: 1024px) {
      #hnmain > table:first-of-type > tbody > tr:first-of-type {
          background-color: #e6e6df;
     }
@@ -461,13 +461,11 @@ body {
     }
      .sidebar .kiwi-logo {
          display: flex;
-         justify-content: center;
          align-items: center;
          font-size: 1.9rem;
-         margin: 14px 14px 14px 10px;
+         margin: 14px 14px 14px 20px;
     }
      .sidebar {
-
          z-index: 6;
          overflow: hidden;
          background-color: rgb(246, 246, 239);
@@ -506,28 +504,31 @@ body {
          width: auto;
     }
      .svg-container + span {
-         display: none;
+       margin: 0 0.25rem 0 0.75rem;
+       font-size: 1rem;
     }
      .sidebar a {
          font-size: 2em;
         /* Adjust to preferred size */
     }
-     #nav-profile, #nav-settings, #nav-disconnect {
-         height: 32px;
+     .sidebar a:not(.kiwi-logo):hover{
+       background-color: rgba(0,0,0,0.1);
+       border-radius: 5px;
     }
      .sidebar .icon-svg {
          width: 36px;
          height: 36px;
     }
      .sidebar-div {
-         font-size: 2em;
-        /* Adjust to preferred size */
+       /* This has to have same font-size as sidebar a */
+         font-size: 1.7em;
     }
 }
  .sidebar a {
-     margin: 1.25rem 10px 10px 10px;
-     font-size: 1.7rem;
-     font-weight: bold;
+    padding: 0.3rem 0 0.3rem 0;
+    margin: 0.5rem 10px 0.2rem 10px;
+    font-size: 1.7rem;
+    font-weight: bold;
 }
  .svg-container {
      width: 19%;
@@ -553,15 +554,15 @@ body {
      color: black;
      text-decoration: none;
      display: block;
-     margin: 1.25rem 10px 10px 10px;
+     padding: 0.3rem 0 0.3rem 0;
+     margin: 0.5rem 10px 0.2rem 10px;
      font-size: 1.7rem;
      font-weight: bold;
      cursor: pointer;
 }
  @media (min-width: 768px) {
      .sidebar-div {
-         font-size: 2em;
-        /* Adjust to preferred size */
+         font-size: 1.7em;
     }
 }
  #overlay {
diff --git a/src/views/components/sidebar.mjs b/src/views/components/sidebar.mjs
index 2311f336..0f5ff3da 100644
--- a/src/views/components/sidebar.mjs
+++ b/src/views/components/sidebar.mjs
@@ -335,6 +335,7 @@ const sidebar = (path) => html`
         <div class="svg-container">
           ${path === "/submit" ? submitfull : submit}
         </div>
+        <span>Submit</span>
       </div>
     </a>
     <a
diff --git a/src/views/settings.mjs b/src/views/settings.mjs
index a8e41c35..8405bf20 100644
--- a/src/views/settings.mjs
+++ b/src/views/settings.mjs
@@ -82,7 +82,7 @@ export default async function index(theme, identity) {
                       style="color: black; font-style: italic; margin-bottom: 10px;"
                     >
                       Cost:
-                      <span style="font-weight: bold;"> 0.1 USD</span> (Optimism
+                      <span style="font-weight: bold;"> $0.4</span> (Optimism
                       gas fees)
                     </p>
                     <div
diff --git a/src/web/src/Navigation.jsx b/src/web/src/Navigation.jsx
index 5acf89af..5abfbcf1 100644
--- a/src/web/src/Navigation.jsx
+++ b/src/web/src/Navigation.jsx
@@ -250,11 +250,26 @@ const Settings = (props) => {
         }}
       >
         <div style={{ display: "flex", alignItems: "center" }}>
-          <div className="svg-container">
+          <div className="svg-container" style={{ position: "relative" }}>
             {window.location.pathname === "/settings" ? (
               <SettingsSVGFull />
             ) : (
-              <SettingsSVG />
+              <>
+                <SettingsSVG />
+                {!localAccount && (
+                  <span
+                    style={{
+                      position: "absolute",
+                      top: "0",
+                      left: "10px",
+                      backgroundColor: "red",
+                      borderRadius: "50%",
+                      minWidth: "12px",
+                      height: "12px",
+                    }}
+                  />
+                )}
+              </>
             )}
           </div>
           <span>Settings</span>