Add icons

package.json

@@ -10,11 +10,13 @@
     "tauri": "tauri"
   },
   "dependencies": {
+    "@icons-pack/react-simple-icons": "^9.1.0",
     "@tanstack/react-router": "0.0.1-beta.204",
     "@tauri-apps/api": "^1.5.0",
     "@uidotdev/usehooks": "^2.4.1",
     "events": "^3.3.0",
     "immer": "^10.0.3",
+    "lucide-react": "^0.292.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.18.0",

src/App.tsx

@@ -19,19 +19,21 @@ function App() {
     appWindow.setAlwaysOnTop(true);
   }, []);
 
-  useEffect(() => { 
-    invalidateWindowShadows()
+  useEffect(() => {
+    invalidateWindowShadows();
   }, [location]);
 
   return (
-    <div className="container text-white">
+    <div className="text-white">
       <NavBar />
-      <Routes>
-        <Route path="/" Component={Main} />
-        <Route path="/channel" Component={Channel} />
-        <Route path="/settings" Component={Settings} />
-        <Route path="/error" Component={Error} />
-      </Routes>
+      <div className="container">
+        <Routes>
+          <Route path="/" Component={Main} />
+          <Route path="/channel" Component={Channel} />
+          <Route path="/settings" Component={Settings} />
+          <Route path="/error" Component={Error} />
+        </Routes>
+      </div>
     </div>
   );
 }

src/components/nav-bar.tsx

@@ -1,33 +1,37 @@
 import { useCallback } from "react";
 import { Link, useLocation } from "react-router-dom";
+import { Settings, Home } from "lucide-react";
 
 export const NavBar = () => {
   const location = useLocation();
 
   const getNavLink = useCallback(() => {
     if (["/channel", "/"].includes(location.pathname)) {
-      return <Link to="/settings">Settings</Link>; 
+      return (
+        <Link to="/settings">
+          <Settings size={20} />
+        </Link>
+      );
     }
 
     if (location.pathname === "/error") {
-      return <Link to="/">Home</Link>; 
+      return null; 
     }
 
     if (location.pathname === "/settings") {
-      return <Link to="/channel">Channel</Link>; 
+      return <Link to="/channel">
+        <Home size={20} />
+      </Link>;
     }
-
-  }, [location.pathname])
+  }, [location.pathname]);
 
   return (
     <div
       data-tauri-drag-region
       className="cursor-default rounded-t-md font-bold select-none p-2 bg-zinc-900 text-white"
     >
       overlayed
-      <div className="float-right">
-        {getNavLink()}
-      </div>
+      <div className="float-right">{getNavLink()}</div>
     </div>
   );
 };

src/styles.css

@@ -2,3 +2,9 @@
 @tailwind components;
 @tailwind utilities;
 
+body {
+	position: fixed;
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+}

src/views/error.tsx

@@ -2,17 +2,17 @@ import { Link } from "react-router-dom";
 
 export const Error = () => {
   return (
-    <>
-      <div className="text-white pt-8 text-3xl flex items-center justify-center">
-        There was an error trying to connect to discord client
+    <div className="h-screen p-2 bg-zinc-800">
+      <div className="pt-8 text-2xl text-center">
+        <p>⚠️ There was an error trying to connect to discord client.</p>
       </div>
-      <div>
+      <div className="pt-8 text-2xl flex items-center justify-center">
         <Link to="/">
-          <button className="bg-blue-800 text-white p-2 rounded-md">
+          <button className="bg-blue-800 p-2 rounded-md">
             Try logging in again
           </button>
         </Link>
       </div>
-    </>
+    </div>
   );
 };

src/views/settings.tsx

@@ -1,9 +1,7 @@
 export const Settings = () => {
   return (
-    <>
-      <div className="pt-2 text-3xl">
-        settings
-      </div>
-    </>
+    <div className="h-screen pt-2 bg-zinc-800 p-2">
+      <h1 className="text-xl pl-2 pt-2 font-bold">Settings</h1>
+    </div>
   );
 };