FuelLabs · sdankel · Apr 18, 2025 · Apr 17, 2025 · Apr 17, 2025 · Apr 17, 2025
diff --git a/app/package-lock.json b/app/package-lock.json
diff --git a/app/package.json b/app/package.json
@@ -3,9 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@emotion/react": "^11.11.0",
-    "@emotion/styled": "^11.11.0",
-    "@mui/base": "^5.0.0-beta.40",
+    "@microlink/react-json-view": "^1.26.1",
     "@mui/icons-material": "^5.15.14",
     "@mui/material": "^5.15.14",
     "@testing-library/jest-dom": "^5.17.0",
@@ -32,6 +30,7 @@
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
+    "analyze": "source-map-explorer 'build/static/js/*.js'",
     "format": "npx prettier . --write",
     "format-check": "npx prettier ."
   },
@@ -58,6 +57,7 @@
     "eslint": "^8.57.1",
     "eslint-config-prettier": "^10.0.2",
     "prettier": "3.5.3",
+    "source-map-explorer": "^2.5.3",
     "typescript-eslint": "^8.26.0"
   },
   "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"

diff --git a/app/public/index.html b/app/public/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

diff --git a/app/src/App.css b/app/src/App.css
@@ -11,7 +11,7 @@
 }
 
 .app-toolbar {
-  background-color: #181818 !important;
+  background-color: #181818;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
 }
 
@@ -46,28 +46,28 @@ body {
 
 /* Button overrides */
 .MuiButton-containedPrimary {
-  background-color: #0d47a1 !important;
-  color: #ffffff !important;
+  background-color: #0d47a1;
+  color: #ffffff;
 }
 
 .MuiButton-containedPrimary:hover {
-  background-color: #1565c0 !important;
+  background-color: #1565c0;
 }
 
 .MuiButton-containedSecondary {
-  background-color: #00f58c !important;
-  color: #111111 !important;
+  background-color: #00f58c;
+  color: #111111;
 }
 
 .MuiButton-containedSecondary:hover {
-  background-color: #2dffa0 !important;
+  background-color: #2dffa0;
 }
 
 .MuiButton-containedWarning {
-  background-color: #bf360c !important;
-  color: #ffffff !important;
+  background-color: #bf360c;
+  color: #ffffff;
 }
 
 .MuiButton-containedWarning:hover {
-  background-color: #e64a19 !important;
+  background-color: #e64a19;
 }
diff --git a/app/src/App.tsx b/app/src/App.tsx
@@ -1,13 +1,11 @@
 import React, { ReactNode } from "react";
-import AppBar from "@mui/material/AppBar/AppBar";
-import Toolbar from "@mui/material/Toolbar/Toolbar";
+import { ThemeProvider } from "@mui/material/styles";
+import { AppBar, Toolbar, Box } from "@mui/material";
 import { useNavigate } from "react-router-dom";
 import UserButton from "./features/toolbar/components/UserButton";
 import { useIsMobile } from "./features/toolbar/hooks/useIsMobile";
 import SearchBar from "./features/toolbar/components/SearchBar";
-import "./App.css";
-
-export const FUEL_GREEN = "#00f58c";
+import theme from "./theme/theme";
 
 interface AppProps {
   children?: ReactNode;
@@ -18,20 +16,61 @@ function App({ children }: AppProps) {
   const isMobile = useIsMobile();
 
   return (
-    <div className="app-container">
-      <AppBar position="static">
-        <Toolbar className="app-toolbar">
-          <div className="app-logo" onClick={() => navigate("/")}>
-            forc.pub
-          </div>
-
-          {!isMobile && <SearchBar />}
-          <UserButton />
-        </Toolbar>
-        {isMobile && <SearchBar />}
-      </AppBar>
-      <div className="app-content">{children}</div>
-    </div>
+    <ThemeProvider theme={theme}>
+      <Box
+        sx={{
+          width: "100%",
+          display: "flex",
+          flexDirection: "column",
+          textAlign: "center",
+          backgroundColor: theme.palette.background.default,
+          height: "100vh",
+          color: theme.palette.text.primary,
+          overflow: "hidden",
+        }}
+      >
+        <AppBar position="static">
+          <Toolbar
+            sx={{
+              backgroundColor: "#181818",
+              boxShadow: "0 2px 8px rgba(0, 0, 0, 0.3)",
+            }}
+          >
+            <Box
+              onClick={() => navigate("/")}
+              sx={{
+                flexGrow: 1,
+                display: "block",
+                color: theme.palette.primary.main,
+                fontSize: "24px",
+                fontFamily: "monospace",
+                cursor: "pointer",
+                fontWeight: "bold",
+                transition: "color 0.2s ease-in-out",
+                "&:hover": {
+                  color: theme.palette.primary.light,
+                },
+              }}
+            >
+              forc.pub
+            </Box>
+            {!isMobile && <SearchBar />}
+            <UserButton />
+          </Toolbar>
+          {isMobile && <SearchBar />}
+        </AppBar>
+        <Box
+          component="main"
+          sx={{
+            flex: 1,
+            display: "flex",
+            flexDirection: "column",
+          }}
+        >
+          {children}
+        </Box>
+      </Box>
+    </ThemeProvider>
   );
 }
 

diff --git a/app/src/features/dahboard/components/PackageDashboard.css b/app/src/features/dahboard/components/PackageDashboard.css
diff --git a/app/src/features/dashboard/components/PackageDashboard.css b/app/src/features/dashboard/components/PackageDashboard.css
@@ -0,0 +1,58 @@
+/* Dark mode styling for Package Dashboard */
+.dashboard-container {
+  margin-top: 24px;
+}
+
+.section-title {
+  border-bottom: 2px solid #90caf9;
+  padding-bottom: 8px;
+  color: #ffffff;
+  font-weight: 500;
+}
+
+.package-card {
+  margin-bottom: 16px;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+  cursor: pointer;
+  transition:
+    transform 0.2s,
+    background-color 0.2s;
+  background-color: #2a2a2a;
+  border: 1px solid #333;
+}
+
+.package-card-hover {
+  background-color: #383838;
+  transform: translateY(-2px);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
+}
+
+.card-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: transparent;
+}
+
+.package-name {
+  color: #90caf9;
+  margin-bottom: 8px;
+}
+
+.package-timestamp {
+  color: #b0b0b0;
+  font-size: 0.85rem;
+}
+
+.package-description {
+  color: #e0e0e0;
+  margin-top: 8px;
+}
+
+.arrow-icon {
+  color: #90caf9;
+  margin-left: 16px;
+  align-self: center;
+  font-size: 1.2rem;
+}
diff --git a/.../dahboard/components/PackageDashboard.tsx → ...dashboard/components/PackageDashboard.tsx b/.../dahboard/components/PackageDashboard.tsx → ...dashboard/components/PackageDashboard.tsx
diff --git a/.../dahboard/hooks/useFetchRecentPackages.ts → ...dashboard/hooks/useFetchRecentPackages.ts b/.../dahboard/hooks/useFetchRecentPackages.ts → ...dashboard/hooks/useFetchRecentPackages.ts