Responsive design (#140)

* make pages responsive * spacing tweaks * text alignment fix
stripe · May 13, 2024 · 72e708a · 72e708a
1 parent a38ac5a
commit 72e708a
Show file tree

Hide file tree

Showing 13 changed files with 99 additions and 81 deletions.
diff --git a/app/(auth)/layout.tsx b/app/(auth)/layout.tsx
@@ -12,16 +12,15 @@ export default function AuthLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <div className="min-h-screen bg-paw-pattern bg-[size:426px] py-[60px]">
-      <div className="mx-auto flex w-[450px] flex-col gap-12">
+    <div className="min-h-screen bg-paw-pattern bg-[size:426px] py-4 sm:py-16">
+      <div className="mx-auto flex max-w-[450px] flex-col gap-6 sm:gap-12 p-3">
         <div className="flex w-full justify-center">
           <Link href="/">
             <div className="flex items-center gap-4 text-3xl font-bold text-primary">
               <Image
                 src={FureverLogo}
                 alt="Furever Logo"
-                width={56}
-                height={56}
+                className="w-12 h-12 sm:w-16 sm:h-16"
               />
               Furever
             </div>
@@ -44,9 +43,7 @@ export default function AuthLayout({
             >
               Stripe Connect embedded components
             </a>
-            .
-            <br />
-            Furever is not a real product.
+            . Furever is not a real product.
           </p>
         </div>
       </div>

diff --git a/app/(dashboard)/finances/layout.tsx b/app/(dashboard)/finances/layout.tsx
@@ -7,15 +7,17 @@ export default function FinancesLayout({
 }>) {
   return (
     <>
-      <header className="flex flex-row justify-between">
+      <header className="flex flex-col md:flex-row justify-between">
         <h1 className="text-3xl font-bold">Finances</h1>
-        <SubNav
-          base="/finances"
-          routes={[
-            {path: '/finances', label: 'Overview'},
-            {path: '/finances/cards', label: 'Cards'},
-          ]}
-        />
+        <div className="mt-4 md:mt-0">
+          <SubNav
+            base="/finances"
+            routes={[
+              {path: '/finances', label: 'Overview'},
+              {path: '/finances/cards', label: 'Cards'},
+            ]}
+          />
+        </div>
       </header>
       {children}
     </>

diff --git a/app/(dashboard)/home/page.tsx b/app/(dashboard)/home/page.tsx
@@ -27,17 +27,17 @@ export default function Dashboard() {
           <ConnectNotificationBanner />
         </EmbeddedComponentContainer>
       </div>
-      <div className="flex flex-col xl:flex-row items-start gap-5">
-        <div className="min-w-[550px] w-full flex-1">
+      <div className="flex flex-col xl:flex-row items-start gap-2 md:gap-5">
+        <div className="w-full flex-1">
           <Schedule />
         </div>
-        <div className="flex flex-col w-[30%] w-full xl:w-[30%] -order-1 xl:order-2 min-w-[300px] gap-4">
-          <div className="flex flex-row flex-grow xl:flex-col gap-4">
+        <div className="flex flex-col w-full xl:w-[30%] -order-1 xl:order-2 gap-2 md:gap-4">
+          <div className="flex flex-grow flex-col md:max-xl:flex-row gap-2 md:gap-4">
             <BalanceWidget />
             <RecentPaymentsWidget />
           </div>
           <h2 className="pt-4 text-lg font-bold hidden xl:block">Performance</h2>
-          <div className="flex flex-row gap-4 xl:flex-col">
+          <div className="flex flex-grow flex-col md:max-xl:flex-row gap-2 md:gap-4">
             <MonthToDateWidget />
             <CustomersWidget />
           </div>

diff --git a/app/(dashboard)/layout.tsx b/app/(dashboard)/layout.tsx
@@ -12,10 +12,10 @@ export default function DashboardLayout({
     <AuthenticatedAndOnboardedRoute>
       <EmbeddedComponentWrapper>
         <DataRequest>
-          <div className="flex h-full min-h-screen bg-paw-pattern bg-[size:426px]">
+          <div className="flex flex-col sm:flex-row h-full min-h-screen bg-paw-pattern bg-[size:426px]">
             <Nav />
-            <div className="ml-64 flex flex-1 justify-center p-8">
-              <div className="min-w-[600px] max-w-[1200px] flex-1 space-y-5">
+            <div className="flex flex-1 justify-center p-3 mt-[74px] sm:mt-0 sm:p-8 sm:ml-52 lg:ml-64">
+              <div className="max-w-[1200px] w-full flex-1 space-y-4 md:space-y-5">
                 {children}
               </div>
             </div>

diff --git a/app/(dashboard)/payments/page.tsx b/app/(dashboard)/payments/page.tsx
@@ -41,7 +41,7 @@ export default function Payments() {
   return (
     <>
       <h1 className="text-3xl font-bold">Payments</h1>
-      <div className="flex flex-col gap-5 lg:flex-row">
+      <div className="flex flex-col gap-3 md:gap-5 lg:flex-row">
         <div className="flex-1">
           <MonthToDateWidget />
         </div>

diff --git a/app/(dashboard)/pets/page.tsx b/app/(dashboard)/pets/page.tsx
@@ -29,7 +29,7 @@ export default function Pets() {
           New Pet
         </Button>
       </div>
-      <div className="grid gap-5 sm:grid-cols-3 xl:grid-cols-4">
+      <div className="grid gap-2 md:gap-4 grid-cols-2 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
         {pets.map((pet, key) => {
           return (
             <Container

diff --git a/app/(dashboard)/settings/layout.tsx b/app/(dashboard)/settings/layout.tsx
@@ -12,16 +12,15 @@ export default function SettingsLayout({
 }>) {
   return (
     <>
-      <header className="flex flex-row justify-between">
+      <header className="flex flex-col md:flex-row justify-between">
         <div className="flex flex-row">
           <h1 className="text-3xl font-bold">Your account</h1>
         </div>
-        <div className="flex flex-row justify-between">
+        <div className="flex flex-row mt-4 md:mt-0">
           <SubNav
             base="/settings"
             routes={[
               {path: '/settings', label: 'General'},
-              // {path: '/settings/paymentmethods', label: 'Payment methods'},
               {path: '/settings/documents', label: 'Documents'},
             ]}
           />

diff --git a/app/(dashboard)/settings/page.tsx b/app/(dashboard)/settings/page.tsx
@@ -55,7 +55,7 @@ export default function Settings() {
             <EditAccountButton />
           </div>
         </div>
-        <div className="flex flex-row space-x-20">
+        <div className="flex flex-col lg:flex-row gap-4 lg:gap-20">
           <div>
             <div className="text-subdued">Business name</div>
             <div className="font-medium">{businessName}</div>
@@ -81,7 +81,7 @@ export default function Settings() {
         </div>
       </Container>
       <Container>
-        <div className="flex flex-row items-start justify-between">
+        <div className="flex flex-col sm:flex-row items-start justify-between">
           <header className="ml-2 mb-5">
             <h1 className="text-xl font-semibold">Account settings</h1>
             <h2 className="text-subdued">

diff --git a/app/components/CustomersWidget.tsx b/app/components/CustomersWidget.tsx
@@ -8,7 +8,7 @@ import {SparkLineChart} from '@mui/x-charts/SparkLineChart';
 const CustomersWidget = () => {
   return (
     <Container className="px-5 w-full">
-      <div className="flex flex-row justify-between gap-10">
+      <div className="flex flex-row justify-between gap-6">
         <div className="min-w-[110px] space-y-1">
           <h1 className="font-bold text-subdued">Customers</h1>
           <div className="flex flex-row items-center space-x-2">
@@ -19,21 +19,22 @@ const CustomersWidget = () => {
           </div>
         </div>
         <div className="relative w-full">
-          <div className={`absolute right-0 w-full max-w-[250px]`}>
+          <div className="absolute right-0 w-full max-w-[250px]">
             <SparkLineChart
               data={[0, 10, 5, 20, 10, 10, 0, 25, 25, 55, 35, 35, 40]}
               height={55}
               colors={['#DEDDE1']}
               curve="natural"
-              showHighlight={true}
+              className="w-full"
             />
           </div>
-          <div className={`absolute right-0 w-full max-w-[250px]`}>
+          <div className="absolute right-0 w-full max-w-[250px]">
             <SparkLineChart
               data={[15, 20, 20, 0, 15, 30, 30, 55, 45, 45, 35, 50, 45, 55]}
               height={55}
               colors={['var(--accent)']}
               curve="natural"
+              className="w-full"
             />
           </div>
         </div>

diff --git a/app/components/MonthToDateWidget.tsx b/app/components/MonthToDateWidget.tsx
@@ -8,7 +8,7 @@ import {SparkLineChart} from '@mui/x-charts/SparkLineChart';
 const MonthToDateWidget = () => {
   return (
     <Container className="px-5 w-full">
-      <div className="flex flex-row justify-between gap-10">
+      <div className="flex flex-row justify-between gap-6">
         <div className="min-w-[110px] space-y-1">
           <h1 className="font-bold text-subdued">Month-to-date</h1>
           <div className="flex flex-row items-center space-x-2">
@@ -19,22 +19,22 @@ const MonthToDateWidget = () => {
           </div>
         </div>
         <div className="relative w-full">
-          <div className={`absolute right-0 w-full max-w-[250px]`}>
+          <div className="absolute right-0 w-full max-w-[250px]">
             <SparkLineChart
               data={[0, 10, 25, 20, 15, 5, 30, 40, 55, 40, 45, 55]}
               height={55}
               colors={['#DEDDE1']}
               curve="natural"
-              className="right-0"
+              className="right-0 w-full"
             />
           </div>
-          <div className={`absolute right-0 w-full max-w-[250px]`}>
+          <div className="absolute right-0 w-full max-w-[250px]">
             <SparkLineChart
               data={[5, 10, 15, 0, 20, 25, 50, 40, 35, 30, 45, 55]}
               height={55}
               colors={['var(--accent)']}
               curve="natural"
-              className="right-0"
+              className="right-0 w-full"
             />
           </div>
         </div>

diff --git a/app/components/Nav.tsx b/app/components/Nav.tsx
@@ -12,10 +12,12 @@ import {
   Dog as PetsIcon,
   Settings as SettingsIcon,
   Sparkles as SparklesIcon,
+  Menu as MenuIcon
 } from 'lucide-react';
 import {Button} from '@/components/ui/button';
 import FureverLogo from '@/public/furever_logo.png';
 import Stripe from 'stripe';
+import React from 'react';
 
 const navigationMenuItems = [
   {
@@ -66,14 +68,23 @@ const Nav = () => {
 
   const stripeAccount = session?.user?.stripeAccount;
 
+  const [showMobileNavItems, setShowMobileNavItems] = React.useState(false)
+
   return (
-    <div className="fixed z-40 flex h-screen w-64 flex-col border-r bg-white p-3">
-      <div className="mb-4 flex items-center gap-3 p-3 text-xl font-bold text-primary">
-        <Image src={FureverLogo} alt="Furever Logo" width={40} height={40} />
-        Furever
+    <div className="fixed sm:flex w-full sm:w-52 lg:w-64 z-40 sm:fixed sm:h-screen flex-col border-b sm:border-r bg-white sm:p-1 lg:p-3">
+      <div className="flex justify-between items-center sm:mb-4 p-3">
+        <Link href="/home">
+          <div className="flex items-center gap-3 text-xl font-bold text-primary">
+            <Image src={FureverLogo} alt="Furever Logo" className="w-9 h-9 sm:w-10 sm:h-10" />
+            Furever
+          </div>
+        </Link>
+        <Button variant="ghost" className="sm:hidden" onClick={() => setShowMobileNavItems(!showMobileNavItems)}>
+          <MenuIcon />
+        </Button>
       </div>
-      <nav className="flex-1">
-        <ul className="flex-col items-start space-x-0">
+      <nav className={`${showMobileNavItems ? "flex" : "hidden"} w-full flex-1 sm:flex shadow-xl sm:shadow-none p-2 sm:p-0 pb-3 transition`}>
+        <ul className="flex-col w-full">
           {navigationMenuItems
             .filter(({shouldDisplayFilter}) => {
               // Not all pages require a filter.
@@ -92,6 +103,7 @@ const Nav = () => {
                         ? 'bg-accent-subdued text-accent'
                         : 'bg-white'
                     }`}
+                    onClick={() => setShowMobileNavItems(false)}
                     tabIndex={-1}
                   >
                     <item.icon

diff --git a/app/components/Schedule.tsx b/app/components/Schedule.tsx
@@ -78,13 +78,9 @@ const Schedule = () => {
   return (
     <Container className="px-5 py-5">
       <div className="space-y-4 relative">
-        <div className="flex flex-row justify-between">
+        <div className="flex gap-2 justify-between sm:items-center">
           <h1 className="text-xl font-bold">Today&apos;s schedule</h1>
-          <div className="flex flex-row space-x-2">
-            <ChevronLeft color="var(--accent)" />
-            <div className="font-bold text-accent">{getCurrentDate()}</div>
-            <ChevronRight color="var(--accent)" />
-          </div>
+          <div className="font-bold text-accent">{getCurrentDate()}</div>
         </div>
         <div className="relative z-40 left-0 flex w-full flex-row">
           {renderDayProgressBar()}
@@ -93,7 +89,7 @@ const Schedule = () => {
           {schedule.map(({id: id, groomer}) => (
             <h2
               key={id}
-              className="ml-8 flex flex-1 flex-row items-center space-x-1 text-lg font-bold"
+              className="ml-8 flex last:hidden md:last:flex flex-1 flex-row items-center space-x-1 text-lg font-bold"
             >
               <div>{groomer}</div>
               <ChevronDown color="#6c7688" />
@@ -118,7 +114,7 @@ const Schedule = () => {
               return (
                 <div
                   key={id}
-                  className="relative flex flex-grow flex-col"
+                  className="relative last:hidden md:last:flex flex flex-grow flex-col"
                 >
                   {sessions.map(
                     ({
@@ -158,7 +154,7 @@ const Schedule = () => {
                             <div className="text-md font-medium text-accent">
                               {startTime} - {endTime}
                             </div>
-                            <div className="text-md font-medium">{name}</div>
+                            <div className="text-md font-medium truncate">{name}</div>
                           </div>
                           <div className="text-md flex items-end gap-2">
                             <div className="relative flex flex-1 items-center gap-2 font-medium">