Quick patch up for the new design

- set different width for each tab - fixed some text wrapping
Lodestone-Team · Feb 22, 2023 · 20f83c9 · 20f83c9
1 parent 3479f69
commit 20f83c9
Show file tree

Hide file tree

Showing 8 changed files with 88 additions and 42 deletions.
diff --git a/src/components/DashboardCard.tsx b/src/components/DashboardCard.tsx
@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { cn } from 'utils/util';
 
 export default function DashboardCard({
   children,
@@ -9,7 +10,7 @@ export default function DashboardCard({
 }) {
   return (
     <div
-      className={`flex h-fit w-full flex-col justify-evenly gap-8 rounded-2xl bg-gray-850 p-4 ${className} border border-gray-faded/30`}
+      className={cn(`flex h-fit w-full flex-col justify-evenly gap-8 rounded-2xl border border-gray-faded/30 bg-gray-850 p-4`, className)}
     >
       {children}
     </div>

diff --git a/src/components/DashboardLayout/LeftNav.tsx b/src/components/DashboardLayout/LeftNav.tsx
@@ -63,6 +63,7 @@ export default function LeftNav({ className }: { className?: string }) {
                 icon={faSquarePlus}
                 disabled={!canCreateInstance}
                 onClick={() => setShowCreateInstance(true)}
+                align="start"
               />
             </div>
           </InstanceList>

diff --git a/src/components/Minecraft/MinecraftGeneralCard.tsx b/src/components/Minecraft/MinecraftGeneralCard.tsx
@@ -133,7 +133,7 @@ export default function MinecraftGeneralCard() {
 
   return (
     <div className="flex flex-col gap-4 @4xl:flex-row">
-      <div className="w-72 shrink-0">
+      <div className="w-80 shrink-0">
         <h2 className="text-h2 font-bold tracking-medium"> Server Settings </h2>
         <h3 className="text-h3 font-medium italic tracking-medium text-white/50">
           Technical settings for the server

diff --git a/src/components/Minecraft/MinecraftSettingCard.tsx b/src/components/Minecraft/MinecraftSettingCard.tsx
@@ -224,7 +224,7 @@ export default function MinecraftSettingCard() {
         Please backup any important data before proceeding.
       </ConfirmDialog>
       <div className="flex flex-col gap-4 @4xl:flex-row">
-        <div className="w-72 shrink-0">
+        <div className="w-80 shrink-0">
           <h2 className="text-h2 font-bold tracking-medium">
             General Game Settings
           </h2>
@@ -261,12 +261,12 @@ export default function MinecraftSettingCard() {
         </div>
       </div>
       <div className="flex flex-col gap-4 @4xl:flex-row">
-        <div className="w-72 shrink-0">
+        <div className="w-80 shrink-0">
           <h2 className="text-h2 font-bold tracking-medium">
             Advanced Game Settings
           </h2>
           <h3 className="text-h3 font-medium italic tracking-medium text-white/50">
-            Less commoningly used Minecraft world settings
+            Less commonly used Minecraft world settings
           </h3>
         </div>
         <div className="w-full min-w-0 rounded-lg border border-gray-faded/30 child:w-full child:border-b child:border-gray-faded/30 first:child:rounded-t-lg last:child:rounded-b-lg last:child:border-b-0">
@@ -298,7 +298,7 @@ export default function MinecraftSettingCard() {
         </div>
       </div>
       <div className="mb-16 flex flex-col gap-4 @4xl:flex-row">
-        <div className="w-72 shrink-0">
+        <div className="w-80 shrink-0">
           <h2 className="text-h2 font-bold tracking-medium"> Danger Zone </h2>
           <h3 className="text-h3 font-medium italic tracking-medium text-white/50">
             These settings can cause irreversible damage to your server!

diff --git a/src/data/InstanceTabListMap.tsx b/src/data/InstanceTabListMap.tsx
@@ -20,44 +20,54 @@ const InstanceTabListMap = {
     {
       title: 'Overview',
       path: 'overview',
+      width: 'max-w-4xl',
       icon: <FontAwesomeIcon icon={faChartLine} />,
-      content: <MinecraftPerformanceCard />,
+      content: (
+        <>
+          <p>Work in Progress</p>
+          <MinecraftPerformanceCard />
+        </>
+      ),
     },
     {
       title: 'Settings',
       path: 'settings',
+      width: 'max-w-2xl',
       icon: <FontAwesomeIcon icon={faCog} />,
       content: (
-        <>
+        <div className="flex flex-col gap-8">
           <MinecraftGeneralCard />
           <MinecraftSettingCard />
-        </>
+        </div>
       ),
     },
     {
       title: 'Console',
       path: 'console',
+      width: 'max-w-6xl',
       icon: <FontAwesomeIcon icon={faServer} />,
       content: <GameConsole />,
     },
     {
       title: 'Files',
       path: 'files',
+      width: 'max-w-6xl',
       icon: <FontAwesomeIcon icon={faFolder} />,
       content: <FileViewer />,
     },
     {
       title: 'Tasks',
       path: 'tasks',
+      width: 'max-w-4xl',
       icon: <FontAwesomeIcon icon={faCodeCompare} />,
       content: (
-        <DashboardCard className="grow !justify-center !gap-4">
+        <DashboardCard className="grow justify-center gap-4">
           <img
             src="/assets/placeholder-cube.png"
             alt="placeholder"
             className="mx-auto w-20"
           />
-          <p className="text-xl text-center font-medium text-white/50">
+          <p className="text-center font-medium text-white/50">
             Coming soon to a dashboard near you!
           </p>
         </DashboardCard>
@@ -66,15 +76,16 @@ const InstanceTabListMap = {
     {
       title: 'Event Logs',
       path: 'logs',
+      width: 'max-w-4xl',
       icon: <FontAwesomeIcon icon={faInbox} />,
       content: (
-        <DashboardCard className="grow !justify-center !gap-4">
+        <DashboardCard className="grow justify-center gap-4">
           <img
             src="/assets/placeholder-cube.png"
             alt="placeholder"
             className="mx-auto w-20"
           />
-          <p className="text-xl text-center font-medium text-white/50">
+          <p className="text-center font-medium text-white/50">
             Coming soon to a dashboard near you!
           </p>
         </DashboardCard>

diff --git a/src/pages/InstanceTabs/InstanceTabs.tsx b/src/pages/InstanceTabs/InstanceTabs.tsx
@@ -4,7 +4,7 @@ import { useDocumentTitle } from 'usehooks-ts';
 import { useLocation } from 'react-router-dom';
 import InstanceTabListMap from '../../data/InstanceTabListMap';
 import Label from 'components/Atoms/Label';
-import { stateToLabelColor } from 'utils/util';
+import { cn, stateToLabelColor } from 'utils/util';
 import Spinner from 'components/DashboardLayout/Spinner';
 const InstanceTabs = () => {
   useDocumentTitle('Dashboard - Lodestone');
@@ -44,36 +44,69 @@ const InstanceTabs = () => {
       );
     }
   }
+
+  const tabs = InstanceTabListMap[instance.game_type];
+  if (!tabs) {
+    return (
+      <div
+        className="relative flex h-full w-full flex-row justify-center overflow-y-auto px-4 pt-8 pb-10 @container"
+        key={uuid}
+      >
+        <div className="flex h-fit min-h-full w-full grow flex-col items-start gap-2">
+          <div className="flex min-w-0 flex-row items-center gap-4">
+            <h1 className="dashboard-instance-heading truncate whitespace-pre">
+              Unknown game type {instance.game_type}
+            </h1>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  const tab = tabs.find((tab) => tab.path === path);
+
+  if (!tab) {
+    return (
+      <div
+        className="relative flex h-full w-full flex-row justify-center overflow-y-auto px-4 pt-8 pb-10 @container"
+        key={uuid}
+      >
+        <div className="flex h-fit min-h-full w-full grow flex-col items-start gap-2">
+          <div className="flex min-w-0 flex-row items-center gap-4">
+            <h1 className="dashboard-instance-heading truncate whitespace-pre">
+              Unknown tab {path}
+            </h1>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div
-      className="relative mx-auto flex h-full w-full max-w-4xl flex-row justify-center @container"
+      className={cn("relative mx-auto flex h-full w-full flex-row justify-center @container", tab.width)}
       key={uuid}
     >
-      {InstanceTabListMap[instance.game_type].map(
-        (tab) =>
-          tab.path === path && (
-            <div
-              className="gutter-stable -mx-3 flex grow flex-row items-stretch overflow-y-auto pl-4 pr-2"
-              key={`${instance.name}-${tab.title}`}
-            >
-              <div className="flex h-fit min-h-full w-full flex-col gap-16 pt-6 pb-10 focus:outline-none">
-                <div className="flex font-title text-h1 font-bold leading-tight text-gray-300">
-                  {tab.title}
-                  {tab.title === 'Console' && (
-                    <Label
-                      size="medium"
-                      className="ml-2 mt-[6px]"
-                      color={stateToLabelColor[instance.state]}
-                    >
-                      {instance.state}
-                    </Label>
-                  )}
-                </div>
-                {tab.content}
-              </div>
-            </div>
-          )
-      )}
+      <div
+        className="gutter-stable -mx-3 flex grow flex-row items-stretch overflow-y-auto pl-4 pr-2"
+        key={`${instance.name}-${tab.title}`}
+      >
+        <div className="flex h-fit min-h-full w-full flex-col gap-8 pt-10 pb-8 focus:outline-none">
+          <div className="flex font-title text-h1 font-bold leading-tight text-gray-300">
+            {tab.title}
+            {tab.title === 'Console' && (
+              <Label
+                size="medium"
+                className="ml-2 mt-[6px]"
+                color={stateToLabelColor[instance.state]}
+              >
+                {instance.state}
+              </Label>
+            )}
+          </div>
+          {tab.content}
+        </div>
+      </div>
     </div>
   );
 };

diff --git a/src/pages/dashboard.tsx b/src/pages/dashboard.tsx
@@ -200,7 +200,7 @@ const Dashboard = () => {
           <Tab.Panels className="gutter-stable -mx-4 flex grow flex-row items-stretch overflow-y-auto pl-4 pr-2">
             {tabList[instance.game_type].map((tab) => (
               <Tab.Panel
-                className="flex h-fit min-h-full w-full flex-col gap-16 pt-6 pb-10 focus:outline-none"
+                className="flex h-fit min-h-full w-full flex-col gap-8 pt-10 pb-8 focus:outline-none"
                 key={tab.title}
               >
                 {tab.content}

diff --git a/src/pages/settings.tsx b/src/pages/settings.tsx
@@ -56,7 +56,7 @@ const SettingsPage = () => {
           <Tab.Panels className="gutter-stable -mx-4 flex grow flex-row items-stretch overflow-y-auto pl-4 pr-2">
             {tabList.map((tab) => (
               <Tab.Panel
-                className="flex h-fit min-h-full w-full flex-col gap-16 pt-6 pb-10 focus:outline-none"
+                className="flex h-fit min-h-full w-full flex-col gap-8 pt-10 pb-8 focus:outline-none"
                 key={tab.title}
               >
                 {tab.content}