From 5be4abf4f85f720b500b1cadd234d6f7b4a5a6f1 Mon Sep 17 00:00:00 2001 From: Vijayasingam Thanasekaran Date: Wed, 18 Sep 2024 09:18:07 +0100 Subject: [PATCH] Added menu bar for smaller screens and updated some spacing --- README.md | 2 +- .../dashboard-subscription-card-group.tsx | 7 ++++-- .../landing/dashboard-landing-page.tsx | 4 ++-- .../layout/dashboard-page-header.tsx | 6 ++++- .../dashboard/layout/mobile-sidebar.tsx | 22 +++++++++++++++++++ .../dashboard/payments/components/columns.tsx | 14 +++++++----- .../components/payment-method-section.tsx | 4 ++-- .../components/subscription-cards.tsx | 9 ++++++-- .../components/subscription-detail.tsx | 6 ++--- .../components/subscription-header.tsx | 7 +++--- .../subscription-next-payment-card.tsx | 4 ++-- .../views/multiple-subscriptions-view.tsx | 2 +- .../home/footer/powered-by-paddle.tsx | 2 +- .../home/hero-section/hero-section.tsx | 4 ++-- 14 files changed, 65 insertions(+), 28 deletions(-) create mode 100644 src/components/dashboard/layout/mobile-sidebar.tsx diff --git a/README.md b/README.md index 0fc95da..ba42c8c 100644 --- 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 index b915200..8f41bcf 100644 --- 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() { - + {subscriptions?.data ? ( - + ) : ( )} diff --git a/src/components/dashboard/landing/dashboard-landing-page.tsx b/src/components/dashboard/landing/dashboard-landing-page.tsx index d729247..d0cf388 100644 --- 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 (
-
+
-
+
diff --git a/src/components/dashboard/layout/dashboard-page-header.tsx b/src/components/dashboard/layout/dashboard-page-header.tsx index 341c1e1..c8ec8be 100644 --- 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 (
-

{pageTitle}

+
+ +

{pageTitle}

+
); diff --git a/src/components/dashboard/layout/mobile-sidebar.tsx b/src/components/dashboard/layout/mobile-sidebar.tsx new file mode 100644 index 0000000..cbc8fa8 --- /dev/null +++ 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 ( + + + + + + + + + + ); +} diff --git a/src/components/dashboard/payments/components/columns.tsx b/src/components/dashboard/payments/components/columns.tsx index 29cf4c5..5d28aa8 100644 --- a/src/components/dashboard/payments/components/columns.tsx +++ b/src/components/dashboard/payments/components/columns.tsx @@ -44,12 +44,14 @@ export const columns: ColumnDef[] = [ size: columnSize, cell: ({ row }) => { return ( -
- {getPaymentReason(row.original.origin)} - {row.original.details?.lineItems[0].product?.name} - {row.original.details?.lineItems && row.original.details?.lineItems.length > 1 && ( - +{row.original.details?.lineItems.length - 1} more - )} +
+
+ {getPaymentReason(row.original.origin)} + {row.original.details?.lineItems[0].product?.name} + {row.original.details?.lineItems && row.original.details?.lineItems.length > 1 && ( + +{row.original.details?.lineItems.length - 1} more + )} +
); }, diff --git a/src/components/dashboard/subscriptions/components/payment-method-section.tsx b/src/components/dashboard/subscriptions/components/payment-method-section.tsx index 116f253..16f1531 100644 --- 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 ( -
+
Payment method
@@ -31,7 +31,7 @@ export function PaymentMethodSection({ transactions, updatePaymentMethodUrl }: P
diff --git a/src/components/dashboard/subscriptions/components/subscription-cards.tsx b/src/components/dashboard/subscriptions/components/subscription-cards.tsx index c575100..670abb3 100644 --- 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) { -
+
{subscriptionItem.product.imageUrl && (
-
-
+
+
-
+
diff --git a/src/components/dashboard/subscriptions/components/subscription-header.tsx b/src/components/dashboard/subscriptions/components/subscription-header.tsx index 6da9172..9b88317 100644 --- 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 ( -
+
+ {subscriptionItem.product.imageUrl && ( {subscriptionItem.product.name} )} {subscriptionItem.product.name}
-
+
{formattedPrice} {frequency} diff --git a/src/components/dashboard/subscriptions/components/subscription-next-payment-card.tsx b/src/components/dashboard/subscriptions/components/subscription-next-payment-card.tsx index fc74d1f..ffca369 100644 --- 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 ( - +
Next payment
-
+
{parseMoney(subscription?.nextTransaction?.details.totals.total, subscription?.currencyCode)} diff --git a/src/components/dashboard/subscriptions/views/multiple-subscriptions-view.tsx b/src/components/dashboard/subscriptions/views/multiple-subscriptions-view.tsx index b958d08..38cc3e3 100644 --- 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 ( <> - + ); } diff --git a/src/components/home/footer/powered-by-paddle.tsx b/src/components/home/footer/powered-by-paddle.tsx index 4e08acf..b3d613c 100644 --- 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() { A Next.js template by {'Paddle
-
+
Explore Paddle diff --git a/src/components/home/hero-section/hero-section.tsx b/src/components/home/hero-section/hero-section.tsx index 675f986..3014365 100644 --- 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 (
-

+

Powerful design tools.
Simple pricing.

-

+

Plans for teams of every size — from start-up to enterprise.