2.0 Overhaul start

src/pages/Extensions/Environment.tsx

@@ -1,17 +1,15 @@
 import type React from "react";
 
-import { Pane } from "evergreen-ui";
-
 import { useDevice } from "@core/providers/useDevice.js";
 
 export const Environment = (): JSX.Element => {
   const { nodes } = useDevice();
 
   return (
-    <Pane>
+    <div>
       {nodes.map((node, index) => (
-        <Pane key={index}>{JSON.stringify(node.environmentMetrics)}</Pane>
+        <div key={index}>{JSON.stringify(node.environmentMetrics)}</div>
       ))}
-    </Pane>
+    </div>
   );
 };

src/pages/Extensions/FileBrowser.tsx

@@ -1,8 +1,6 @@
 import type React from "react";
 import { useEffect, useState } from "react";
 
-import { Pane } from "evergreen-ui";
-
 export interface File {
   nameModified: string;
   name: string;
@@ -33,9 +31,9 @@ export const FileBrowser = (): JSX.Element => {
   });
 
   return (
-    <Pane>
+    <div>
       {data?.data.files.map((file) => (
-        <Pane key={file.name}>
+        <div key={file.name}>
           <a
             target="_blank"
             rel="noopener noreferrer"
@@ -43,8 +41,8 @@ export const FileBrowser = (): JSX.Element => {
           >
             {file.name.replace("static/", "").replace(".gz", "")}
           </a>
-        </Pane>
+        </div>
       ))}
-    </Pane>
+    </div>
   );
 };

src/pages/Extensions/Index.tsx

@@ -1,9 +1,12 @@
 import type React from "react";
 
-import { DocumentIcon, GanttChartIcon, RainIcon } from "evergreen-ui";
-
 import { TabbedContent, TabType } from "@components/layout/page/TabbedContent";
 import { useDevice } from "@core/providers/useDevice.js";
+import {
+  CloudIcon,
+  DocumentIcon,
+  SignalIcon,
+} from "@heroicons/react/24/outline";
 import { Environment } from "@pages/Extensions/Environment.js";
 import { FileBrowser } from "@pages/Extensions/FileBrowser";
 
@@ -13,19 +16,19 @@ export const ExtensionsPage = (): JSX.Element => {
   const tabs: TabType[] = [
     {
       name: "File Browser",
-      icon: DocumentIcon,
+      icon: <DocumentIcon className="h-4" />,
       element: FileBrowser,
       disabled: !hardware.hasWifi,
     },
     {
       name: "Range Test",
-      icon: GanttChartIcon,
+      icon: <SignalIcon className="h-4" />,
       element: FileBrowser,
       disabled: !hardware.hasWifi,
     },
     {
       name: "Environment",
-      icon: RainIcon,
+      icon: <CloudIcon className="h-4" />,
       element: Environment,
     },
   ];