Tweak notifications number

src/element/Relay.css

@@ -12,9 +12,6 @@
     padding: 5px;
 }
 
-.relay > div:first-child {
-}
-
 .relay-extra {
     padding: 5px;
     margin: 0 5px;

src/index.css

@@ -111,7 +111,7 @@ code {
 }
 
 .btn-rnd {
-  border-radius: 25px;
+  border-radius: 100%;
 }
 
 textarea {

src/nostr/Connection.js

@@ -211,7 +211,7 @@ export default class Connection {
         this.CurrentState.events.send = this.Stats.EventsSent;
         this.CurrentState.avgLatency = this.Stats.Latency.length > 0 ? (this.Stats.Latency.reduce((acc, v) => acc + v, 0) / this.Stats.Latency.length) : 0;
         this.CurrentState.disconnects = this.Stats.Disconnects;
-        this.Stats.Latency = this.Stats.Latency.slice(this.Stats.Latency.length - 20); // trim
+        this.Stats.Latency = this.Stats.Latency.slice(-20); // trim
         this.HasStateChange = true;
         this._NotifyState();
     }

src/pages/Layout.css

@@ -1,7 +1,15 @@
-.notifications {
-    margin-right: 10px;
-}
-
 .unread-count {
-  margin-left: .2em;
+  width: 20px;
+  height: 20px;
+  border: 1px solid;
+  border-radius: 100%;
+  position: relative;
+  padding: 3px;
+  line-height: 1.5em;
+  top: -10px;
+  left: -10px;
+  font-size: small;
+  background-color: var(--error);
+  font-weight: bold;
+  text-align: center;
 }

src/pages/Layout.js

@@ -59,12 +59,10 @@ export default function Layout(props) {
             <>
                 <div className="btn btn-rnd notifications" onClick={(e) => goToNotifications(e)}>
                     <FontAwesomeIcon icon={faBell} size="xl" />
-                    {unreadNotifications !== 0 && (
-                      <span className="unread-count">
-                        {unreadNotifications}
-                      </span>
-                    )}
                 </div>
+                <span className="unread-count">
+                    {unreadNotifications > 1000 ? "..." : unreadNotifications}
+                </span>
                 <ProfileImage pubkey={key} showUsername={false} />
             </>
         )