Merge pull request #58 from pablo-kitz/ui/footer-mobile

ui optimizations and mobile support on the dashboard
Codehagen · Jan 13, 2024 · 6511572 · 6511572
2 parents 60d4690 + f1e5f60
commit 6511572
Show file tree

Hide file tree

Showing 7 changed files with 13 additions and 61 deletions.
diff --git a/app/(dashboard)/dashboard/accounts/page.tsx b/app/(dashboard)/dashboard/accounts/page.tsx
@@ -33,23 +33,7 @@ export default async function DashboardPage() {
 
   return (
     <>
-      <div className="md:hidden">
-        <Image
-          src="/examples/mail-dark.png"
-          width={1280}
-          height={727}
-          alt="Mail"
-          className="hidden dark:block"
-        />
-        <Image
-          src="/examples/mail-light.png"
-          width={1280}
-          height={727}
-          alt="Mail"
-          className="block dark:hidden"
-        />
-      </div>
-      <div className="hidden flex-col md:flex">
+      <div className="flex flex-col">
         <AccountsDashboard
           accounts={accounts}
           mails={mails}

diff --git a/app/(dashboard)/dashboard/layout.tsx b/app/(dashboard)/dashboard/layout.tsx
@@ -20,11 +20,10 @@ export default async function DashboardLayout({
   }
 
   return (
-    <div className="flex min-h-screen flex-col space-y-6">
+    <div className="flex min-h-screen flex-col">
       <NavBar user={user} items={dashboardConfig.mainNav} scroll={false} />
-
-      {children}
-      <SiteFooter className="border-t" />
+      <div className="flex-1">{children}</div>
+      <SiteFooter />
     </div>
   );
 }
diff --git a/app/(dashboard)/dashboard/page.tsx b/app/(dashboard)/dashboard/page.tsx
@@ -36,23 +36,7 @@ export default async function DashboardPage() {
 
   return (
     <>
-      <div className="md:hidden">
-        <Image
-          src="/examples/mail-dark.png"
-          width={1280}
-          height={727}
-          alt="Mail"
-          className="hidden dark:block"
-        />
-        <Image
-          src="/examples/mail-light.png"
-          width={1280}
-          height={727}
-          alt="Mail"
-          className="block dark:hidden"
-        />
-      </div>
-      <div className="hidden flex-col md:flex">
+      <div className="flex flex-col">
         <Dashboard
           accounts={accounts}
           mails={mails}

diff --git a/app/(dashboard)/dashboard/transactions/page.tsx b/app/(dashboard)/dashboard/transactions/page.tsx
@@ -36,23 +36,7 @@ export default async function DashboardPage() {
 
   return (
     <>
-      <div className="md:hidden">
-        <Image
-          src="/examples/mail-dark.png"
-          width={1280}
-          height={727}
-          alt="Mail"
-          className="hidden dark:block"
-        />
-        <Image
-          src="/examples/mail-light.png"
-          width={1280}
-          height={727}
-          alt="Mail"
-          className="block dark:hidden"
-        />
-      </div>
-      <div className="hidden flex-col md:flex">
+      <div className="flex flex-col">
         <TransactionsDashboard
           accounts={accounts}
           mails={mails}

diff --git a/app/(dashboard2)/dashboard2/layout.tsx b/app/(dashboard2)/dashboard2/layout.tsx
@@ -20,7 +20,7 @@ export default async function DashboardLayout({
   }
 
   return (
-    <div className="flex min-h-screen flex-col space-y-6">
+    <div className="flex min-h-screen flex-col">
       <NavBar user={user} items={dashboardConfig.mainNav} scroll={false} />
 
       <div className="container grid flex-1 gap-12 md:grid-cols-[200px_1fr]">
@@ -31,7 +31,8 @@ export default async function DashboardLayout({
           {children}
         </main>
       </div>
-      <SiteFooter className="border-t" />
+
+      <SiteFooter />
     </div>
   );
 }
diff --git a/app/(docs)/layout.tsx b/app/(docs)/layout.tsx
@@ -43,7 +43,7 @@ export default async function DocsLayout({ children }: DocsLayoutProps) {
         <DocsSidebarNav items={docsConfig.sidebarNav} />
       </NavBar>
       <div className="container flex-1">{children}</div>
-      <SiteFooter className="border-t" />
+      <SiteFooter />
     </div>
   );
 }
diff --git a/components/layout/site-footer.tsx b/components/layout/site-footer.tsx
@@ -7,9 +7,9 @@ import { Icons } from "@/components/shared/icons";
 
 export function SiteFooter({ className }: React.HTMLAttributes<HTMLElement>) {
   return (
-    <footer className={cn(className)}>
-      <div className="container flex flex-col items-center justify-between gap-4 py-10 md:h-24 md:flex-row md:py-0">
-        <div className="flex flex-col items-center gap-4 px-8 md:flex-row md:gap-2 md:px-0">
+    <footer className={cn(className, "border-t")}>
+      <div className="container flex h-12 flex-row items-center justify-between gap-4">
+        <div className="flex flex-row items-center gap-4 md:gap-2 md:px-0">
           <Icons.logo />
           <p className="text-center text-sm leading-loose md:text-left">
             Built by{" "}