Temporarily disable mobile version

Author: wzrdx

src/components/deeploys/ApplicationCard.tsx

@@ -7,19 +7,19 @@ export default function ApplicationCard({ app }: { app: DeeployApp }) {
     return (
         <BorderedCard>
             <div className="row justify-between gap-3 lg:gap-6">
-                <div className="min-w-[212px]">
-                    <CardItem label="Version" value={<>{app.alias}</>} isBold />
+                <div className="min-w-[168px]">
+                    <CardItem label="Alias" value={<>{app.alias}</>} isBold />
                 </div>
 
-                <div className="min-w-[212px]">
+                <div className="min-w-[168px]">
                     <CardItem label="Plugin Signature" value={<>{app.pluginSignature}</>} />
                 </div>
 
-                <div className="min-w-[92px]">
+                <div className="min-w-[64px]">
                     <CardItem label="Nodes" value={<>{app.nodes}</>} />
                 </div>
 
-                <div className="min-w-[92px]">
+                <div className="min-w-[64px]">
                     <CardItem
                         label="GPU/CPU"
                         value={<SmallTag variant={app.processor === 'GPU' ? 'green' : 'blue'}>{app.processor}</SmallTag>}

src/components/deeploys/Running.tsx

@@ -19,10 +19,10 @@ function Running() {
     return (
         <div className="list">
             <ListHeader>
-                <div className="min-w-[212px]">Alias</div>
-                <div className="min-w-[212px]">Plugin Signature</div>
-                <div className="min-w-[92px]">Nodes</div>
-                <div className="min-w-[92px]">GPU/CPU</div>
+                <div className="min-w-[168px]">Alias</div>
+                <div className="min-w-[168px]">Plugin Signature</div>
+                <div className="min-w-[64px]">Nodes</div>
+                <div className="min-w-[64px]">GPU/CPU</div>
                 <div className="min-w-[112px]">Running Nodes</div>
                 <div className="min-w-[112px]">Expiration Date</div>
             </ListHeader>

src/components/layout/Content.tsx

@@ -1,4 +1,3 @@
-import Logo from '@assets/token.svg';
 import { routeInfo } from '@lib/routes/routes';
 import { ConnectKitButton } from 'connectkit';
 import { useEffect, useState } from 'react';
@@ -26,11 +25,11 @@ function Content() {
     }, [location]);
 
     return (
-        <div className="col mx-auto h-full max-w-6xl gap-6 px-4 md:gap-8 md:px-8 lg:px-10 larger:gap-12">
-            <div className="flex flex-col-reverse items-center justify-between gap-8 lg:gap-8 larger:flex-row larger:items-start">
+        <div className="col mx-auto h-full max-w-6xl gap-6 px-4 md:gap-8 md:px-8 lg:gap-12 lg:px-10">
+            <div className="flex flex-col-reverse items-center justify-between gap-8 lg:flex-row lg:items-start lg:gap-8">
                 <div className="col gap-1.5">
                     {!!title && (
-                        <div className="row justify-center larger:justify-start">
+                        <div className="row justify-center lg:justify-start">
                             <div className="text-[26px] font-bold leading-none lg:text-[28px]">{title}</div>
                         </div>
                     )}
@@ -40,18 +39,12 @@ function Content() {
                     )}
                 </div>
 
-                <div className="row w-full justify-between larger:w-auto">
-                    <div className="mobile-only-block">
-                        <img src={Logo} alt="Logo" className="h-10" />
-                    </div>
-
+                <div className="flex">
                     <ConnectKitButton showBalance />
                 </div>
             </div>
 
             <Outlet />
-
-            <div className="layoutBreak:hidden">{/* TODO: Display a message to inform the user to switch to desktop */}</div>
         </div>
     );
 }

src/components/layout/Layout.tsx

@@ -1,16 +1,27 @@
+import Logo from '@assets/logo.svg';
 import Content from './Content';
 import Sider from './Sider';
 
 function Layout() {
     return (
         <div className="flex min-h-dvh items-stretch bg-light">
-            <div className="hidden layoutBreak:block">
-                <Sider />
-            </div>
+            <Sider />
 
-            <div className="relative mb-[76px] min-h-dvh w-full py-6 layoutBreak:mb-0 layoutBreak:ml-sider-with-padding layoutBreak:py-10 lg:py-12">
+            <div className="ml-small-sider-with-padding relative hidden min-h-dvh w-full py-6 md:py-10 lg:block lg:py-12 larger:ml-sider-with-padding">
                 <Content />
             </div>
+
+            <div className="lg:hidden">
+                <div className="center-all col fixed bottom-0 left-0 right-0 top-0 gap-6 bg-slate-50 p-8">
+                    <div className="center-all">
+                        <img src={Logo} alt="Logo" className="h-6" />
+                    </div>
+
+                    <div className="text-center">
+                        Please switch to the <span className="font-medium">desktop</span> version
+                    </div>
+                </div>
+            </div>
         </div>
     );
 }

src/components/layout/Sider.tsx

@@ -4,7 +4,7 @@ import Navigation from './Navigation';
 
 function Sider() {
     return (
-        <div className="col w-sider fixed bottom-0 left-0 top-0 m-4 justify-between rounded-xl bg-slate-100 px-6 pb-12 pt-12">
+        <div className="col w-small-sider fixed bottom-0 left-0 top-0 m-4 justify-between rounded-xl bg-slate-100 px-6 pb-12 pt-12 larger:w-sider">
             <div className="col gap-8">
                 <div className="center-all">
                     <img src={Logo} alt="Logo" className="h-7" />
@@ -14,14 +14,6 @@ function Sider() {
             </div>
 
             <div className="col text-center">
-                {/* <NavLink to={routePath.privacyPolicy} className="text-[15px] font-medium leading-none hover:opacity-70">
-                    {routeInfo[routePath.privacyPolicy].title}
-                </NavLink>
-
-                <NavLink to={routePath.termsAndConditions} className="text-[15px] font-medium leading-none hover:opacity-70">
-                    {routeInfo[routePath.termsAndConditions].title}
-                </NavLink> */}
-
                 <div className="pt-1">
                     <NetworkAndStatus />
                 </div>

src/index.css

@@ -27,30 +27,6 @@ body {
     @apply row justify-center;
 }
 
-.web-only-block {
-    @apply hidden md:block;
-}
-
-.mobile-only-block {
-    @apply block md:hidden;
-}
-
-.web-only-flex {
-    @apply hidden md:flex;
-}
-
-.mobile-only-flex {
-    @apply flex md:hidden;
-}
-
-.web-only-xl-flex {
-    @apply hidden xl:flex;
-}
-
-.mobile-only-xl-flex {
-    @apply flex xl:hidden;
-}
-
 .active {
     @apply text-primary;
 }
@@ -63,16 +39,10 @@ body {
     @apply col w-full gap-3 overflow-x-auto;
 }
 
-/* bg-[#e6ebf1] TODO: Remove */
 .slate-button {
     @apply bg-[#e9edf2] hover:!opacity-75;
 }
 
-/* Safe padding for mobile devices */
-.nav-safe-padding {
-    padding-bottom: env(safe-area-inset-bottom);
-}
-
 /* Scrollbar */
 *::-webkit-scrollbar {
     width: 8px;

src/lib/providers/Web3Provider.tsx

@@ -22,6 +22,7 @@ const siweConfig: SIWEConfig = {
             nonce,
             issuedAt: new Date().toISOString(),
             statement:
+                // TODO: Modify for Deeploy
                 `By confirming this signature and engaging with our platform,` +
                 ` you confirm your status as the rightful account manager or authorized representative for the wallet address ${address}. ` +
                 `This action grants permission for a login attempt on the https://${window.location.host} portal. ` +
@@ -76,6 +77,7 @@ const siweConfig: SIWEConfig = {
 };
 
 const wagmiConfig = createConfig(
+    // TODO: Modify for Deeploy
     getDefaultConfig({
         chains: config.networks,
         walletConnectProjectId: projectId,

src/shared/deployment/JobList.tsx

@@ -74,7 +74,7 @@ export default function JobList({
             </div>
 
             {jobs.map((job) => (
-                <div key={job.id} className="row justify-between border-t-2 border-slate-200/65 px-4 py-3 text-sm">
+                <div key={job.id} className="row justify-between gap-2 border-t-2 border-slate-200/65 px-4 py-3 text-sm">
                     {renderJob(job)}
 
                     <ContextMenuWithTrigger

tailwind.config.js

@@ -32,19 +32,20 @@ export default {
                 custom: '0 0 0 3px #e2e8f0',
             },
             width: {
-                sider: '270px',
+                sider: '262px',
+                'small-sider': '240px',
             },
             margin: {
-                'sider-with-padding': 'calc(270px + 1rem)',
+                'sider-with-padding': 'calc(262px + 1rem)',
+                'small-sider-with-padding': 'calc(240px + 1rem)',
             },
         },
         screens: {
             xs: '400px',
             sm: '480px',
             md: '768px',
-            layoutBreak: '836px',
             lg: '1024px',
-            larger: '1232px',
+            larger: '1176px',
             xl: '1410px',
         },
     },