playing around with new resource page, etc

frontend/src/layouts/resource.tsx

@@ -1,4 +1,3 @@
-import { Card, CardHeader, CardTitle } from "@ui/card";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@ui/tabs";
 import { ReactNode } from "react";
 
@@ -11,34 +10,28 @@ interface ResourceProps {
 
 export const Resource = ({ title, info, actions, tabs }: ResourceProps) => (
   <Tabs defaultValue={tabs[0].title}>
-    <div className="flex flex-col w-full gap-4">
-      <Card>
-        <CardHeader className="gap-4">
-          <div className="flex flex-col">
-            <div className="flex flex-col gap-2 md:flex-row md:justify-between">
-              <CardTitle className="text-3xl">{title}</CardTitle>
-              {info}
-            </div>
-          </div>
-          <div className="flex gap-4 flex-col md:flex-row md:justify-between">
-            <TabsList>
-              {tabs.map(({ title }) => (
-                <TabsTrigger key={title} value={title}>
-                  {title}
-                </TabsTrigger>
-              ))}
-            </TabsList>
-            <div className="flex gap-4 place-self-end md:place-self-auto">
-              {actions}
-            </div>
-          </div>
-        </CardHeader>
-      </Card>
-      {tabs.map((t, i) => (
-        <TabsContent key={i} value={t.title}>
-          {t.component}
-        </TabsContent>
-      ))}
+    <div className="flex flex-col w-full gap-12">
+      <div className="flex flex-col lg:flex-row gap-2 justify-between">
+        <div>
+          <div className="text-4xl">{title}</div>
+          <h2 className="text-xl">{info}</h2>
+        </div>
+        <div className="flex gap-4">{actions}</div>
+      </div>
+      <div className="flex flex-col gap-2">
+        <TabsList className=" w-fit">
+          {tabs.map(({ title }) => (
+            <TabsTrigger key={title} value={title}>
+              {title}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+        {tabs.map((t, i) => (
+          <TabsContent key={i} value={t.title}>
+            {t.component}
+          </TabsContent>
+        ))}
+      </div>
     </div>
   </Tabs>
 );

frontend/src/layouts/resources.tsx

@@ -20,17 +20,17 @@ export const Resources = ({
   return (
     <div className="flex flex-col gap-12">
       <div className="flex justify-between">
-        <div className="flex flex-col gap-2">
-          <div className="flex items-center gap-4">
+        <div>
+          <h1 className="text-4xl">{type}s</h1>
+          <div className="flex items-center gap-2 text-muted-foreground">
             {icon}
-            <h1 className="text-3xl">{type}s</h1>
+            <h2 className="text-xl">{info}</h2>
           </div>
-          <div className="text-muted-foreground">{info}</div>
         </div>
         <div className="flex gap-4">
           <Input
             className="w-[300px]"
-            placeholder={`Search ${type}`}
+            placeholder={`Search ${type}s`}
             value={search}
             onChange={(e) => setSearch(e.target.value)}
           />

frontend/src/pages/dashboard/components/recently-viewed.tsx

@@ -71,7 +71,7 @@ export const RecentlyViewed = () => {
 
   const recents = useGetRecentlyViewed();
   return (
-    <div className="w-full flex flex-col gap-6">
+    <div className="w-full flex flex-col gap-12">
       <div className="flex justify-between">
         <div>
           <h1 className="text-4xl"> Hello, {user?.username}.</h1>

frontend/src/pages/dashboard/index.tsx

@@ -7,13 +7,17 @@ import { Box } from "lucide-react";
 
 export const Dashboard = () => {
   return (
-    <div className="flex flex-col gap-12">
+    <div className="flex flex-col gap-24">
       <RecentlyViewed />
       <div className="flex flex-col gap-6 w-full">
-        <div className="flex items-center gap-2">
-          <Box className="w-6 h-6" />
-          <h1 className="text-4xl"> Resources </h1>
+        {/* <h1 className="text-4xl"> All Resources </h1> */}
+        <div>
+          <div className="flex items-center gap-2 text-muted-foreground">
+            <Box className="w-4 h-4" />
+            <h2 className="text-xl">My Resources</h2>
+          </div>
         </div>
+
         <div className="flex gap-4">
           <div className="flex gap-4 w-full h-fit">
             <DeploymentsChart />

frontend/src/resources/build/page.tsx

@@ -14,7 +14,11 @@ export const Build = () => {
   return (
     <Resource
       title={<BuildName id={buildId} />}
-      info={<BuildVersion id={buildId} />}
+      info={
+        <div className="text-muted-foreground">
+          <BuildVersion id={buildId} />
+        </div>
+      }
       actions={<RebuildBuild buildId={buildId} />}
       tabs={[
         {

frontend/src/resources/deployment/page.tsx

@@ -27,13 +27,12 @@ export const Deployment = () => {
       title={<DeploymentName deploymentId={deploymentId} />}
       info={
         <div className="flex flex-col gap-2 md:flex-row md:items-center md:gap-4">
-          <CardDescription className="flex items-center gap-2">
-            <DeploymentStatus deploymentId={deploymentId} />
+          <div className="flex items-center gap-2 text-muted-foreground">
             <DeploymentStatusIcon deploymentId={deploymentId} />
-          </CardDescription>
+            <DeploymentStatus deploymentId={deploymentId} />
+          </div>
           <CardDescription className="hidden md:block">|</CardDescription>
           <DeploymentInfo deploymentId={deploymentId} />
-          <CardDescription className="hidden md:block">|</CardDescription>
         </div>
       }
       actions={

frontend/src/resources/deployment/util.tsx

@@ -1,5 +1,4 @@
 import { useRead } from "@hooks";
-import { CardDescription } from "@ui/card";
 import { cn } from "@util/helpers";
 import { Circle, HardDrive, Server } from "lucide-react";
 
@@ -47,17 +46,17 @@ export const DeploymentInfo = ({ deploymentId }: { deploymentId: string }) => {
   const deployment = deployments?.find((d) => d.id === deploymentId);
 
   return (
-    <div className="flex flex-col gap-2 md:flex-row md:gap-4">
-      <CardDescription className="flex items-center">
-        <HardDrive className="w-4 h-4 mr-2" />
-        {/* {data ? deployment?.container?.image ?? "no image" : "..."} */}
-        build.name @ build.version {deployment?.image}
-      </CardDescription>
-      <CardDescription className="flex items-center gap-2">
+    <div className="flex flex-col gap-2 md:flex-row md:gap-4 text-muted-foreground">
+      <div className="flex items-center gap-2">
         <Server className="w-4 h-4" />
         server name
         {/* <ServerName serverId={deployment?.deployment.server_id} /> */}
-      </CardDescription>
+      </div>
+      <div className="flex items-center">
+        <HardDrive className="w-4 h-4 mr-2" />
+        {/* {data ? deployment?.container?.image ?? "no image" : "..."} */}
+        build.name @ build.version {deployment?.status}
+      </div>
     </div>
   );
 };

frontend/src/resources/pages.tsx

@@ -13,7 +13,7 @@ export const Deployments = () => {
     <Resources
       type="Deployment"
       info={`${summary?.total} Total, ${summary?.running} Running, ${summary?.stopped} Stopped, ${summary?.unknown} Unknown`}
-      icon={<Rocket className="w-6 h-6" />}
+      icon={<Rocket className="w-4 h-4" />}
       components={(search) => (
         <>
           {deployments

frontend/src/resources/server/util.tsx

@@ -15,11 +15,11 @@ export const ServerInfo = ({ serverId }: { serverId: string | undefined }) => {
   const servers = useRead({ type: "ListServers", params: {} }).data;
   const server = servers?.find((s) => s.id === serverId);
   return (
-    <div className="flex items-center gap-4">
+    <div className="flex items-center gap-4 text-muted-foreground">
       {serverId && <ServerStats serverId={serverId} />}
-      <CardDescription>|</CardDescription>
-      <div className="flex items-center gap-2">
-        <CardDescription> Status: {server?.status}</CardDescription>
+      <div>|</div>
+      <div className="flex items-center gap-4">
+        <div> Status: {server?.status}</div>
         <ServerStatusIcon serverId={serverId} />
       </div>
     </div>
@@ -40,19 +40,19 @@ export const ServerStats = ({ serverId }: { serverId: string }) => {
   }, [refetch]);
 
   return (
-    <div className="flex gap-4">
-      <CardDescription className="flex gap-2 items-center">
+    <div className="flex gap-4 text-muted-foreground">
+      <div className="flex gap-2 items-center ">
         <Cpu className="w-4 h-4" />
         {data?.cpu_perc.toFixed(2)}%
-      </CardDescription>
-      <CardDescription className="flex gap-2 items-center">
+      </div>
+      <div className="flex gap-2 items-center">
         <MemoryStick className="w-4 h-4" />
         {data?.mem_total_gb.toFixed(2)} GB
-      </CardDescription>
-      <CardDescription className="flex gap-2 items-center">
+      </div>
+      <div className="flex gap-2 items-center">
         <Database className="w-4 h-4" />
         {data?.disk_total_gb.toFixed(2)} GB
-      </CardDescription>
+      </div>
     </div>
   );
 };