From 728dc6f2c46f81ff78189cd574bf1f081edc502f Mon Sep 17 00:00:00 2001
From: Sacha Weatherstone <sachaw100@hotmail.com>
Date: Sun, 20 Feb 2022 23:31:11 +1100
Subject: [PATCH] Add myNode indicators to sidebar

---
 src/pages/Extensions/Logs.tsx |  2 +-
 src/pages/Nodes/NodeCard.tsx  | 15 ++++++++++++++-
 src/pages/Nodes/index.tsx     | 15 ++++++++++++++-
 3 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/src/pages/Extensions/Logs.tsx b/src/pages/Extensions/Logs.tsx
index 644fb8a3..d67f1c7e 100644
--- a/src/pages/Extensions/Logs.tsx
+++ b/src/pages/Extensions/Logs.tsx
@@ -49,7 +49,7 @@ export const Logs = (): JSX.Element => {
 
   return (
     <div className="flex h-full flex-col gap-4 p-4">
-      <Card className="flex-grow">
+      <Card className="flex-grow overflow-y-auto">
         <table className="table-cell flex-grow">
           <tbody
             className="
diff --git a/src/pages/Nodes/NodeCard.tsx b/src/pages/Nodes/NodeCard.tsx
index b57803d1..eb7218a9 100644
--- a/src/pages/Nodes/NodeCard.tsx
+++ b/src/pages/Nodes/NodeCard.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 
+import { m } from 'framer-motion';
 import mapbox from 'mapbox-gl';
+import { BiCrown } from 'react-icons/bi';
 import {
   FiAlignLeft,
   FiCode,
@@ -12,6 +14,7 @@ import { IoTelescope } from 'react-icons/io5';
 import { MdGpsFixed, MdGpsNotFixed, MdGpsOff } from 'react-icons/md';
 import JSONPretty from 'react-json-pretty';
 
+import { Tooltip } from '@app/components/generic/Tooltip';
 import { IconButton } from '@components/generic/button/IconButton';
 import { CollapsibleSection } from '@components/generic/Sidebar/CollapsibleSection';
 import { SidebarOverlay } from '@components/generic/Sidebar/SidebarOverlay';
@@ -96,7 +99,17 @@ export const NodeCard = ({
         }
       >
         <div className="flex dark:text-white">
-          <div className="m-auto">
+          <div className="relative m-auto">
+            {isMyNode && (
+              <Tooltip content="Your Node">
+                <m.div
+                  whileHover={{ scale: 1.05 }}
+                  className="absolute -right-1 -top-1 rounded-full bg-yellow-500 p-0.5"
+                >
+                  <BiCrown className="h-3 w-3" />
+                </m.div>
+              </Tooltip>
+            )}
             <Hashicon value={node.number.toString()} size={32} />
           </div>
         </div>
diff --git a/src/pages/Nodes/index.tsx b/src/pages/Nodes/index.tsx
index 3a5e96db..52471be2 100644
--- a/src/pages/Nodes/index.tsx
+++ b/src/pages/Nodes/index.tsx
@@ -1,10 +1,13 @@
 import React from 'react';
 
+import { m } from 'framer-motion';
 import type { Edge, Node } from 'react-flow-renderer';
 import ReactFlow, { Background, Controls, MiniMap } from 'react-flow-renderer';
+import { BiCrown } from 'react-icons/bi';
 import { FiSettings } from 'react-icons/fi';
 import { RiMindMap } from 'react-icons/ri';
 
+import { Tooltip } from '@app/components/generic/Tooltip';
 import { IconButton } from '@components/generic/button/IconButton';
 import { Layout } from '@components/layout';
 import { SidebarItem } from '@components/layout/Sidebar/SidebarItem';
@@ -97,7 +100,17 @@ export const Nodes = (): JSX.Element => {
               }
             >
               <div className="flex dark:text-white">
-                <div className="m-auto">
+                <div className="relative m-auto">
+                  {node.number === myNodeNum && (
+                    <Tooltip content="Your Node">
+                      <m.div
+                        whileHover={{ scale: 1.05 }}
+                        className="absolute -right-1 -top-1 rounded-full bg-yellow-500 p-0.5"
+                      >
+                        <BiCrown className="h-3 w-3" />
+                      </m.div>
+                    </Tooltip>
+                  )}
                   <Hashicon value={node.number.toString()} size={32} />
                 </div>
               </div>