adding controls to the bottom of line details page and small minor details

packages/desktop/src/pages/lineDetailsTerminal/index.tsx

@@ -1,3 +1,4 @@
+import { FiActivity, FiSettings, FiSun } from "react-icons/fi";
 import { GlobalHotKeys, KeyMap } from "react-hotkeys";
 import { useCallback, useMemo } from "react";
 
@@ -33,7 +34,7 @@ export default function LineDetailsTerminal() {
     <>
       <GlobalHotKeys handlers={handlers} keyMap={keyMap} allowChanges />
 
-      <div className="flex flex-col bg-gray-100 w-[400px]">
+      <div className="flex flex-col bg-gray-100 w-[400px] items-stretch justify-start relative">
         {/* line overview header */}
         <div className="flex flex-row p-3 items-center gap-1">
           {/* <LineIcon sourceImages={selectedLine.profilePictures} />
@@ -52,6 +53,25 @@ export default function LineDetailsTerminal() {
             </span>
           </span> */}
         </div>
+
+        {/* controls */}
+        <div
+          className="absolute bottom-0 p-4 shadow-2xl
+        flex flex-row items-center gap-2 justify-end w-full"
+        >
+          <button className="p-3 flex justify-center items-center hover:bg-gray-300 transition-all">
+            <FiSettings className="text-gray-400 text-md" />
+          </button>
+
+          <button className="bg-gray-800 p-3 flex justify-center items-center shadow-lg">
+            <FiActivity className="text-white text-lg" />
+          </button>
+
+          {/* TODO: change to border and inset color for when inactive button */}
+          <button className="bg-teal-800 p-3 flex justify-center items-center shadow-lg">
+            <FiSun className="text-white text-lg" />
+          </button>
+        </div>
       </div>
     </>
   );

packages/desktop/src/pages/router/index.tsx

@@ -313,7 +313,7 @@ export default function NirvanaRouter() {
 
   return (
     <LineDataProvider>
-      <div className="flex flex-col">
+      <div className="flex flex-col flex-1">
         <NirvanaHeader onHeaderFocus={() => setDesktopMode("terminal")} />
 
         <div className="flex flex-row flex-1">

packages/desktop/src/styles/index.css

@@ -1,14 +1,21 @@
 @import "~antd/dist/antd.css";
 
-#root {
-  padding: 0 !important;
-  font-family: "IBM Plex Sans", sans-serif;
-}
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
+body {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+#root {
+  @apply flex flex-col flex-1;
+  padding: 0 !important;
+  font-family: "IBM Plex Sans", sans-serif;
+}
+
 /* button {
   @apply transition-all;
 } */