feat: clickable username with context menu

src/App.css

@@ -29,7 +29,6 @@ footer {
   left: 8px;
 }
 
-
 /*=========Network Controls=========*/
 
 .infobutton {
@@ -367,7 +366,11 @@ button,
   position: relative;
   text-align: center;
   height: 140px;
-  margin-bottom: 20px;
+
+  span {
+    display: block;
+    margin: 2px;
+  }
 
   img {
     display: block;
@@ -390,6 +393,14 @@ button,
   }
 }
 
+.avatar {
+  background-color: lightsteelblue;
+  padding: 2px 8px;
+  width: fit-content;
+  margin: auto;
+  z-index: 3;
+}
+
 .networkroute {
   z-index: 10;
   position: absolute;

src/App.tsx

@@ -7,34 +7,25 @@ import { BrowserRouter, Routes, Route } from "react-router";
 import { SessionProvider } from "./Session";
 import { GraphComponent } from "./Network";
 import MVPChart from "./MVPChart";
+import Avatar from "./Avatar";
 
 function App() {
   return (
     <BrowserRouter>
+      <SessionProvider>
         <Header />
+        <Avatar />
         <Routes>
           <Route index element={<Rankings />} />
 
-        <Route path="/network" element={
+          <Route path="/network" element={<GraphComponent />} />
-          <SessionProvider>
-            <GraphComponent />
-          </SessionProvider>
-        } />
 
-        <Route path="/analysis" element={
+          <Route path="/analysis" element={<Analysis />} />
-          <SessionProvider>
-            <Analysis />
-          </SessionProvider>
-        } />
-
-        <Route path="/mvp" element={
-          <SessionProvider>
-            <MVPChart />
-          </SessionProvider>
-        } />
 
+          <Route path="/mvp" element={<MVPChart />} />
         </Routes>
         <Footer />
+      </SessionProvider>
     </BrowserRouter>
   );
 }

src/Header.tsx

@@ -1,9 +1,11 @@
 export default function Header() {
-  return <div className="logo" id="logo">
+  return (
+    <div className="logo" id="logo">
       <a href={"/"}>
         <img alt="logo" height="66%" src="logo.svg" />
         <h3 className="centered">cutt</h3>
       </a>
       <span className="grey">cool ultimate team tool</span>
     </div>
+  );
 }

src/Network.tsx

@@ -49,7 +49,8 @@ export const GraphComponent = () => {
   }
   const footer = document.getElementsByTagName("footer");
   if (footer) {
-    (footer.item(0) as HTMLElement).className = "fixed-footer";
+    footer.length &&
+      ((footer.item(0) as HTMLElement).className = "fixed-footer");
   }
 
   async function loadData() {