Added menu bar for smaller screens and updated some spacing

PaddleHQ · Sep 18, 2024 · 5be4abf · 5be4abf
1 parent bdcb0b9
commit 5be4abf
Show file tree

Hide file tree

Showing 14 changed files with 65 additions and 28 deletions.
diff --git a/README.md b/README.md
@@ -53,7 +53,7 @@ This starter kit is built with:
 
 Click this button to clone this repo and create a new project in your Vercel account:
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FPaddleHQ%2Fpaddle-nextjs-starter-kit&env=PADDLE_API_KEY,PADDLE_NOTIFICATION_WEBHOOK_SECRET,NEXT_PUBLIC_PADDLE_ENV,NEXT_PUBLIC_PADDLE_CLIENT_TOKEN&integration-ids=oac_VqOgBHqhEoFTPzGkPd7L0iH6)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FPaddleHQ%2Fpaddle-nextjs-starter-kit&env=PADDLE_API_KEY,NEXT_PUBLIC_PADDLE_ENV,NEXT_PUBLIC_PADDLE_CLIENT_TOKEN&integration-ids=oac_VqOgBHqhEoFTPzGkPd7L0iH6&external-id=https%3A%2F%2Fgithub.com%2FPaddleHQ%2Fpaddle-nextjs-starter-kit%2Ftree%2Fmain)
 
 You can also [create a new application manually](https://vercel.com/new).
 

diff --git a/src/components/dashboard/landing/components/dashboard-subscription-card-group.tsx b/src/components/dashboard/landing/components/dashboard-subscription-card-group.tsx
@@ -17,9 +17,12 @@ export async function DashboardSubscriptionCardGroup() {
           </Button>
         </CardTitle>
       </CardHeader>
-      <CardContent className={'p-0 pt-6'}>
+      <CardContent className={'p-0 pt-6 @container'}>
         {subscriptions?.data ? (
-          <SubscriptionCards className={'grid-cols-2 gap-6'} subscriptions={subscriptions.data.slice(0, 2) ?? []} />
+          <SubscriptionCards
+            className={'grid-cols-1 gap-6 @[600px]:grid-cols-2'}
+            subscriptions={subscriptions.data.slice(0, 2) ?? []}
+          />
         ) : (
           <ErrorContent />
         )}

diff --git a/src/components/dashboard/landing/dashboard-landing-page.tsx b/src/components/dashboard/landing/dashboard-landing-page.tsx
@@ -6,11 +6,11 @@ import { DashboardTeamMembersCard } from '@/components/dashboard/landing/compone
 export function DashboardLandingPage() {
   return (
     <div className={'grid flex-1 items-start gap-6 p-0 md:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3'}>
-      <div className={'grid auto-rows-max items-start gap-8 lg:col-span-2'}>
+      <div className={'grid auto-rows-max items-start gap-6 lg:col-span-2'}>
         <DashboardUsageCardGroup />
         <DashboardSubscriptionCardGroup />
       </div>
-      <div className={'grid auto-rows-max items-start gap-8'}>
+      <div className={'grid auto-rows-max items-start gap-6'}>
         <DashboardTeamMembersCard />
         <DashboardTutorialCard />
       </div>

diff --git a/src/components/dashboard/layout/dashboard-page-header.tsx b/src/components/dashboard/layout/dashboard-page-header.tsx
@@ -1,4 +1,5 @@
 import { Separator } from '@/components/ui/separator';
+import { MobileSidebar } from '@/components/dashboard/layout/mobile-sidebar';
 
 interface Props {
   pageTitle: string;
@@ -7,7 +8,10 @@ interface Props {
 export function DashboardPageHeader({ pageTitle }: Props) {
   return (
     <div>
-      <h1 className="text-lg font-semibold md:text-4xl">{pageTitle}</h1>
+      <div className={'flex items-center gap-6'}>
+        <MobileSidebar />
+        <h1 className="text-lg font-semibold md:text-4xl">{pageTitle}</h1>
+      </div>
       <Separator className={'relative bg-border my-8 dashboard-header-highlight'} />
     </div>
   );

diff --git a/src/components/dashboard/layout/mobile-sidebar.tsx b/src/components/dashboard/layout/mobile-sidebar.tsx
@@ -0,0 +1,22 @@
+import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
+import { Button } from '@/components/ui/button';
+import { Menu } from 'lucide-react';
+import { Sidebar } from '@/components/dashboard/layout/sidebar';
+import { SidebarUserInfo } from '@/components/dashboard/layout/sidebar-user-info';
+
+export function MobileSidebar() {
+  return (
+    <Sheet>
+      <SheetTrigger asChild>
+        <Button variant="ghost" size="icon" className="shrink-0 md:hidden">
+          <Menu className="h-5 w-5" />
+          <span className="sr-only">Toggle navigation menu</span>
+        </Button>
+      </SheetTrigger>
+      <SheetContent side="left" className="flex flex-col">
+        <Sidebar />
+        <SidebarUserInfo />
+      </SheetContent>
+    </Sheet>
+  );
+}
diff --git a/src/components/dashboard/payments/components/columns.tsx b/src/components/dashboard/payments/components/columns.tsx
@@ -44,12 +44,14 @@ export const columns: ColumnDef<Transaction>[] = [
     size: columnSize,
     cell: ({ row }) => {
       return (
-        <div className={'whitespace-nowrap flex gap-1'}>
-          <span className={'font-semibold'}>{getPaymentReason(row.original.origin)}</span>
-          <span className={'font-medium'}>{row.original.details?.lineItems[0].product?.name}</span>
-          {row.original.details?.lineItems && row.original.details?.lineItems.length > 1 && (
-            <span className={'font-medium'}>+{row.original.details?.lineItems.length - 1} more</span>
-          )}
+        <div className={'max-w-[250px]'}>
+          <div className={'whitespace-nowrap flex gap-1 truncate'}>
+            <span className={'font-semibold'}>{getPaymentReason(row.original.origin)}</span>
+            <span className={'font-medium truncate'}>{row.original.details?.lineItems[0].product?.name}</span>
+            {row.original.details?.lineItems && row.original.details?.lineItems.length > 1 && (
+              <span className={'font-medium'}>+{row.original.details?.lineItems.length - 1} more</span>
+            )}
+          </div>
         </div>
       );
     },

diff --git a/src/components/dashboard/subscriptions/components/payment-method-section.tsx b/src/components/dashboard/subscriptions/components/payment-method-section.tsx
@@ -20,7 +20,7 @@ export function PaymentMethodSection({ transactions, updatePaymentMethodUrl }: P
     return null;
   }
   return (
-    <div className={'flex gap-6 pt-6 items-end justify-between'}>
+    <div className={'flex gap-6 pt-6 items-end justify-between @16xs:flex-wrap'}>
       <div className={'flex flex-col gap-4'}>
         <div className={'text-base text-secondary leading-4 whitespace-nowrap'}>Payment method</div>
         <div className={'flex gap-1 items-end'}>
@@ -31,7 +31,7 @@ export function PaymentMethodSection({ transactions, updatePaymentMethodUrl }: P
         <div>
           <Button asChild={true} size={'sm'} className={'text-sm rounded-sm border-border'} variant={'outline'}>
             <Link target={'_blank'} href={updatePaymentMethodUrl}>
-              Manage
+              Update
             </Link>
           </Button>
         </div>

diff --git a/src/components/dashboard/subscriptions/components/subscription-cards.tsx b/src/components/dashboard/subscriptions/components/subscription-cards.tsx
@@ -21,7 +21,7 @@ export function SubscriptionCards({ subscriptions, className }: Props) {
         {subscriptions.map((subscription) => {
           const subscriptionItem = subscription.items[0];
           const price = subscriptionItem.quantity * parseFloat(subscriptionItem.price.unitPrice.amount);
-          const formattedPrice = parseMoney(price.toString(), subscriptionItem.price.unitPrice.currencyCode);
+          const formattedPrice = parseMoney(price.toString(), subscription.currencyCode);
           const frequency =
             subscription.billingCycle.frequency === 1
               ? `/${subscription.billingCycle.interval}`
@@ -30,7 +30,12 @@ export function SubscriptionCards({ subscriptions, className }: Props) {
             <Card key={subscription.id} className={'bg-background/50 backdrop-blur-[24px] border-border p-6'}>
               <CardHeader className="p-0 space-y-0">
                 <CardTitle className="flex flex-col justify-between items-start mb-6">
-                  <div className={'flex mb-4 justify-between w-full'}>
+                  <div
+                    className={cn('flex mb-4 w-full', {
+                      'justify-between': subscriptionItem.product.imageUrl,
+                      'justify-end': !subscriptionItem.product.imageUrl,
+                    })}
+                  >
                     {subscriptionItem.product.imageUrl && (
                       <Image
                         src={subscriptionItem.product.imageUrl}

diff --git a/src/components/dashboard/subscriptions/components/subscription-detail.tsx b/src/components/dashboard/subscriptions/components/subscription-detail.tsx
@@ -49,12 +49,12 @@ export function SubscriptionDetail({ subscriptionId }: Props) {
           <SubscriptionHeader subscription={subscription.data} />
           <Separator className={'relative bg-border mb-8 dashboard-header-highlight'} />
         </div>
-        <div className={'grid flex-1 items-start gap-8 xl:grid-cols-4'}>
-          <div className={'grid auto-rows-max items-start gap-8'}>
+        <div className={'grid gap-6 grid-cols-1 xl:grid-cols-6'}>
+          <div className={'grid auto-rows-max gap-6 grid-cols-1 xl:col-span-2'}>
             <SubscriptionNextPaymentCard transactions={transactions.data} subscription={subscription.data} />
             <SubscriptionPastPaymentsCard transactions={transactions.data} subscriptionId={subscriptionId} />
           </div>
-          <div className={'grid auto-rows-max items-start gap-8 xl:col-span-3'}>
+          <div className={'grid auto-rows-max gap-6 grid-cols-1 xl:col-span-4'}>
             <SubscriptionLineItems subscription={subscription.data} />
           </div>
         </div>

diff --git a/src/components/dashboard/subscriptions/components/subscription-header.tsx b/src/components/dashboard/subscriptions/components/subscription-header.tsx
@@ -4,8 +4,8 @@ import { Status } from '@/components/shared/status/status';
 import { parseMoney } from '@/utils/paddle/parse-money';
 import dayjs from 'dayjs';
 import { SubscriptionHeaderActionButton } from '@/components/dashboard/subscriptions/components/subscription-header-action-button';
-import { Alert } from '@/components/ui/alert';
 import { SubscriptionAlerts } from '@/components/dashboard/subscriptions/components/subscription-alerts';
+import { MobileSidebar } from '@/components/dashboard/layout/mobile-sidebar';
 
 interface Props {
   subscription: Subscription;
@@ -24,16 +24,17 @@ export function SubscriptionHeader({ subscription }: Props) {
   const formattedStartedDate = dayjs(subscription.startedAt).format('MMM DD, YYYY');
 
   return (
-    <div className={'flex justify-between items-center'}>
+    <div className={'flex justify-between items-start sm:items-center flex-col sm:flex-row mb-6 sm:mb-0'}>
       <div className={'flex flex-col w-full'}>
         <SubscriptionAlerts subscription={subscription} />
         <div className={'flex items-center gap-5'}>
+          <MobileSidebar />
           {subscriptionItem.product.imageUrl && (
             <Image src={subscriptionItem.product.imageUrl} alt={subscriptionItem.product.name} width={48} height={48} />
           )}
           <span className={'text-4xl leading-9 font-medium'}>{subscriptionItem.product.name}</span>
         </div>
-        <div className={'flex items-center gap-8 py-8 pb-6'}>
+        <div className={'flex items-center gap-6 py-8 pb-6 flex-wrap md:flex-wrap'}>
           <div className={'flex gap-1 items-end'}>
             <span className={'text-4xl leading-9 font-medium'}>{formattedPrice}</span>
             <span className={'text-secondary text-sm leading-[14px] font-medium'}>{frequency}</span>

diff --git a/src/components/dashboard/subscriptions/components/subscription-next-payment-card.tsx b/src/components/dashboard/subscriptions/components/subscription-next-payment-card.tsx
@@ -14,10 +14,10 @@ export function SubscriptionNextPaymentCard({ subscription, transactions }: Prop
     return null;
   }
   return (
-    <Card className={'bg-background/50 backdrop-blur-[24px] border-border p-6'}>
+    <Card className={'bg-background/50 backdrop-blur-[24px] border-border p-6 @container'}>
       <div className={'flex gap-6 flex-col border-border border-b pb-6'}>
         <div className={'text-xl font-medium'}>Next payment</div>
-        <div className={'flex gap-1 items-end'}>
+        <div className={'flex gap-1 items-end @16xs:flex-wrap'}>
           <span className={'text-xl leading-5 font-medium text-primary'}>
             {parseMoney(subscription?.nextTransaction?.details.totals.total, subscription?.currencyCode)}
           </span>

diff --git a/src/components/dashboard/subscriptions/views/multiple-subscriptions-view.tsx b/src/components/dashboard/subscriptions/views/multiple-subscriptions-view.tsx
@@ -10,7 +10,7 @@ export function MultipleSubscriptionsView({ subscriptions }: Props) {
   return (
     <>
       <DashboardPageHeader pageTitle={'Subscriptions'} />
-      <SubscriptionCards className={'grid-cols-1 lg:grid-cols-3 gap-8'} subscriptions={subscriptions} />
+      <SubscriptionCards className={'grid-cols-1 lg:grid-cols-3 gap-6'} subscriptions={subscriptions} />
     </>
   );
 }
diff --git a/src/components/home/footer/powered-by-paddle.tsx b/src/components/home/footer/powered-by-paddle.tsx
@@ -16,7 +16,7 @@ export function PoweredByPaddle() {
           <span className={'text-sm leading-[14px]'}>A Next.js template by</span>
           <Image src={'/assets/icons/logo/paddle-white-logo.svg'} alt={'Paddle logo'} width={54} height={14} />
         </div>
-        <div className={'flex justify-center items-center gap-2'}>
+        <div className={'flex justify-center items-center gap-2 flex-wrap md:flex-nowrap'}>
           <Link className={'text-sm leading-[14px]'} href={'https://paddle.com'} target={'_blank'}>
             <span className={'flex items-center gap-1'}>
               Explore Paddle

diff --git a/src/components/home/hero-section/hero-section.tsx b/src/components/home/hero-section/hero-section.tsx
@@ -2,12 +2,12 @@ export function HeroSection() {
   return (
     <section className={'mx-auto max-w-7xl px-[32px] relative flex items-center justify-between mt-16 mb-12'}>
       <div className={'text-center w-full '}>
-        <h1 className={'text-[80px] leading-[80px] tracking-[-1.6px] font-medium'}>
+        <h1 className={'text-[48px] leading-[48px] md:text-[80px] md:leading-[80px] tracking-[-1.6px] font-medium'}>
           Powerful design tools.
           <br />
           Simple pricing.
         </h1>
-        <p className={'mt-6 text-[20px] leading-[30px]'}>
+        <p className={'mt-6 text-[18px] leading-[27px] md:text-[20px] md:leading-[30px]'}>
           Plans for teams of every size — from start-up to enterprise.
         </p>
       </div>