feat: Working on layout and design of prediction page

Author: kn-dev-code

client/wildfire-ui/src/App.tsx

@@ -1,19 +1,33 @@
-import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";
 import SignIn from "./routes/auth/log/signin";
 import SignUp from "./routes/auth/log/signup";
 import Navbar from "./routes/constants/navbar";
 import Dashboard from "./routes/home/dashboard";
 import { Toaster } from "sonner";
+import Intelligence from "./routes/data/intelligence";
 
+const NavbarLayout = () => {
+  return (
+    <>
+      <Navbar />
+      <Outlet /> 
+    </>
+  );
+};
 const App = () => {
   return (
     <BrowserRouter>
-      <Navbar />
-      <Toaster/>
+    <Toaster />
+    {/* With Navbar */}
       <Routes>
+        <Route element = {<NavbarLayout/>}>
         <Route path="/" element={<Dashboard />} />
         <Route path="/login" element={<SignIn />} />
         <Route path="/register" element={<SignUp />} />
+        </Route>
+      
+      {/* No Navbar */}
+      <Route path = "/predictions" element = {<Intelligence/>}/>
       </Routes>
     </BrowserRouter>
   );

client/wildfire-ui/src/routes/auth/log/signin.tsx

@@ -81,6 +81,7 @@ const SignIn = () => {
             <GoogleLogin
               onSuccess={(res) => handleGoogleResponse(res)}
               onError={() => console.log("Google pop-up failed")}
+              width="400"
             />
             <div className="flex h-px grow shrink-0 basis-0 flex-col items-center gap-2 bg-neutral-border" />
             <span className="text-caption font-caption text-subtext-color text-md">

client/wildfire-ui/src/routes/auth/log/signup.tsx

@@ -78,8 +78,8 @@ const SignUp = () => {
           <div className="flex flex-col pb-[50%] gap-y-1">
             <GoogleLogin
               onSuccess={(res) => handleGoogleResponse(res)}
-              
               onError={() => console.log("Google pop-up failed")}
+              width="400"
             />
             <div className="flex h-px grow shrink-0 basis-0 flex-col items-center gap-2 bg-neutral-border" />
             <span className="text-caption font-caption text-subtext-color text-md">

client/wildfire-ui/src/routes/constants/sidebar.tsx

@@ -0,0 +1,41 @@
+
+import { FeatherCloudSun } from "@subframe/core";
+import { FeatherFlame } from "@subframe/core";
+import { FeatherMap } from "@subframe/core";
+import { FeatherMapPin } from "@subframe/core";
+import { FeatherMoreHorizontal } from "@subframe/core";
+import { FeatherSatellite } from "@subframe/core";
+import { FeatherScan } from "@subframe/core";
+import { FeatherShieldCheck } from "@subframe/core";
+import { FeatherTriangleAlert } from "@subframe/core";
+import { FeatherZap } from "@subframe/core";
+import { IconWithBackground } from "../../ui";
+
+const SideBar = () => {
+    return (
+        <div className="flex flex-initial flex-col justify-between pl-10 border-r-2 w-[15%] border-b-2 h-screen [&>div[class*='items-start']]:">
+            {/* Header */}
+            <div className = "flex flex-col items-start">  
+                <span className="text-md">Pyro Intelligence</span>
+                <span className="text-md">Wildfire Engine</span>
+                </div>
+
+            {/* Access Menu */}
+            <div className = "flex flex-col justify-center"> 
+                <span className="text-sm text-[#868686]"><FeatherMap />Dashboard / Map</span>
+                <span className="text-sm text-[#868686]"><FeatherCloudSun />Micro Climate</span>
+                <span className="text-sm text-[#868686]"><FeatherFlame />Incident Logger</span>
+                </div>
+
+
+            {/* Bottom Header */}
+            <div className = "flex flex-col justify-end">
+                <span className="text-sm text-[#000000] font-bold">Example Name</span>
+                <span className="text-sm text-[#808080]">Example Role</span>
+                </div>
+
+        </div>
+    )
+}
+
+export default SideBar

client/wildfire-ui/src/routes/data/intelligence.tsx

@@ -1,9 +1,38 @@
 
+import { FeatherShieldCheck } from "@subframe/core"
+import { Button } from "../../ui/components/ui/button"
+import SideBar from "../constants/sidebar"
 
 const Intelligence = () => {
   return (
-    <div>
-      
+    <div className="bg-white h-full"> {/* Main Box */}
+      {/* Top Bar */}
+      <div className="flex flex-row justify-between border-2 border-black w-[86%] relative left-[14.9%] place-items-center">
+        <div className="flex flex-col justify-center pl-4">
+          <h1 className = " text-shadow-black font-bold text-xl">Wildfire Risk Intelligence</h1>
+          <span className = "text-sm">NASA FIRMS Ingestion • XGBoost Inference</span>
+        </div>
+        <div className="grow shrink-0 relative left-[65%]">
+          <Button className="p-1 bg-[#DAFBE6] text-[#639273] w-[9%] h-[15%]"><FeatherShieldCheck/>user</Button>
+        </div>
+      </div>
+      <SideBar />
+
+      {/* Coordinate Box */}
+      <div>
+
+      </div>
+
+      {/* Hotspot Box */}
+      <div>
+
+      </div>
+
+      {/* Result Box */}
+      <div>
+
+      </div>
+
     </div>
   )
 }

client/wildfire-ui/src/ui/components/Avatar/Avatar.tsx

@@ -54,11 +54,10 @@ const AvatarRoot = React.forwardRef<HTMLDivElement, AvatarRootProps>(
             className={SubframeUtils.twClassNames(
               "line-clamp-1 w-full font-['Inter'] text-[14px] font-[500] leading-[14px] text-brand-800 text-center absolute",
               {
-                "font-['Inter'] text-[10px] font-[500] leading-[10px] tracking-normal":
+                "text-[10px] leading-[10px] tracking-normal":
                   size === "x-small" || size === "small",
-                "font-['Inter'] text-[18px] font-[500] leading-[18px] tracking-normal":
-                  size === "large",
-                "font-['Inter'] text-[24px] font-[500] leading-[24px] tracking-normal":
+                "text-[18px] leading-[18px] tracking-normal": size === "large",
+                "text-[24px] leading-[24px] tracking-normal":
                   size === "x-large",
                 "text-warning-800": variant === "warning",
                 "text-success-800": variant === "success",