From 4c61e705062fa6c589d09b05450d3620d964f51b Mon Sep 17 00:00:00 2001 From: Luke Vella Date: Fri, 4 Oct 2024 17:43:33 +0100 Subject: [PATCH] updatw --- apps/web/public/static/zoom.svg | 7 ++ .../app/[locale]/(admin)/create-button.tsx | 48 +++++++++++ .../src/app/[locale]/(admin)/dashboard.tsx | 65 ++++++++++++--- apps/web/src/app/[locale]/(admin)/layout.tsx | 9 ++- apps/web/src/app/[locale]/(admin)/page.tsx | 11 ++- .../app/[locale]/(admin)/polls/user-polls.tsx | 4 +- .../app/[locale]/(admin)/settings/layout.tsx | 6 +- .../(admin)/settings/settings-menu.tsx | 13 +-- apps/web/src/app/[locale]/(admin)/sidebar.tsx | 10 +-- .../app/[locale]/(admin)/welcome-message.tsx | 47 +++++++++++ apps/web/src/app/[locale]/new/page.tsx | 2 +- apps/web/src/app/components/page-layout.tsx | 4 +- apps/web/src/app/components/tab-menu.tsx | 8 +- apps/web/src/components/grid-card.tsx | 2 +- apps/web/src/components/group-poll-card.tsx | 79 ++++++++----------- apps/web/src/components/group-poll-icon.tsx | 2 +- apps/web/src/components/pill.tsx | 4 +- apps/web/src/style.css | 2 +- apps/web/src/trpc/routers/dashboard.ts | 2 +- apps/web/src/utils/get-range.ts | 17 +++- packages/ui/src/button.tsx | 8 +- 21 files changed, 241 insertions(+), 109 deletions(-) create mode 100644 apps/web/public/static/zoom.svg create mode 100644 apps/web/src/app/[locale]/(admin)/create-button.tsx create mode 100644 apps/web/src/app/[locale]/(admin)/welcome-message.tsx diff --git a/apps/web/public/static/zoom.svg b/apps/web/public/static/zoom.svg new file mode 100644 index 000000000..956278e58 --- /dev/null +++ b/apps/web/public/static/zoom.svg @@ -0,0 +1,7 @@ + + \ No newline at end of file diff --git a/apps/web/src/app/[locale]/(admin)/create-button.tsx b/apps/web/src/app/[locale]/(admin)/create-button.tsx new file mode 100644 index 000000000..2bfba18d5 --- /dev/null +++ b/apps/web/src/app/[locale]/(admin)/create-button.tsx @@ -0,0 +1,48 @@ +import { cn } from "@rallly/ui"; +import { cva, VariantProps } from "class-variance-authority"; +import { PlusIcon } from "lucide-react"; +import Link from "next/link"; + +const variants = cva( + "inline-flex items-start w-48 justify-between gap-2 rounded-lg p-3 text-sm font-medium", + { + variants: { + variant: { + purple: + "bg-purple-50 text-purple-600 hover:bg-purple-100 active:bg-purple-200", + indigo: + "bg-indigo-50 text-indigo-600 hover:bg-indigo-100 active:bg-indigo-200", + pink: "bg-pink-50 text-pink-600 hover:bg-pink-100 active:bg-pink-200", + violet: + "bg-violet-50 text-violet-600 hover:bg-violet-100 active:bg-violet-200", + }, + }, + defaultVariants: { + variant: "indigo", + }, + }, +); + +export function CreateButton({ + href, + icon, + label, + variant, +}: { + href: string; + icon: React.ReactNode; + label: React.ReactNode; + variant?: VariantProps["variant"]; +}) { + return ( + + + {icon} + {label} + + + + + + ); +} diff --git a/apps/web/src/app/[locale]/(admin)/dashboard.tsx b/apps/web/src/app/[locale]/(admin)/dashboard.tsx index f13c9f148..1fe47c439 100644 --- a/apps/web/src/app/[locale]/(admin)/dashboard.tsx +++ b/apps/web/src/app/[locale]/(admin)/dashboard.tsx @@ -1,9 +1,18 @@ "use client"; import { Button } from "@rallly/ui/button"; -import { CalendarIcon } from "lucide-react"; +import { Icon } from "@rallly/ui/icon"; +import { + BarChart2Icon, + BookIcon, + CalendarIcon, + PlusIcon, + TableIcon, + UserIcon, +} from "lucide-react"; import Link from "next/link"; +import { CreateButton } from "@/app/[locale]/(admin)/create-button"; import { GridCard, GridCardHeader } from "@/components/grid-card"; import { GroupPollCard } from "@/components/group-poll-card"; import { Subheading } from "@/components/heading"; @@ -19,6 +28,37 @@ const SectionHeading = ({ children }: React.PropsWithChildren) => { export default function Dashboard() { return (
+
+ + + +
+ } + label={} + /> + } + label={} + /> + } + label={} + /> + } + label={} + /> +
+
@@ -54,12 +94,8 @@ function PendingPolls() { suspense: true, }); - if (!data) { - return ; - } - return ( -
+
{data.map((poll) => { return ( ; } + if (data.length === 0) { + return ( +
+ +
+ ); + } + return ( -
- {data.length === 0 ? ( -
- -
- ) : null} +
{data.map((event) => { return (
- +
diff --git a/apps/web/src/app/[locale]/(admin)/layout.tsx b/apps/web/src/app/[locale]/(admin)/layout.tsx index c075ea780..180c96098 100644 --- a/apps/web/src/app/[locale]/(admin)/layout.tsx +++ b/apps/web/src/app/[locale]/(admin)/layout.tsx @@ -30,15 +30,18 @@ export default async function Layout({
-
+
- diff --git a/apps/web/src/app/[locale]/(admin)/page.tsx b/apps/web/src/app/[locale]/(admin)/page.tsx index 56af07cbc..d8a05d4a8 100644 --- a/apps/web/src/app/[locale]/(admin)/page.tsx +++ b/apps/web/src/app/[locale]/(admin)/page.tsx @@ -1,13 +1,12 @@ -import { HomeIcon } from "lucide-react"; import { Trans } from "react-i18next/TransWithoutContext"; import Dashboard from "@/app/[locale]/(admin)/dashboard"; +import WelcomeMessage from "@/app/[locale]/(admin)/welcome-message"; import { Params } from "@/app/[locale]/types"; import { PageContainer, PageContent, PageHeader, - PageIcon, PageTitle, } from "@/app/components/page-layout"; import { getTranslation } from "@/app/i18n"; @@ -17,13 +16,13 @@ export default async function Page({ params }: { params: Params }) { return (
- - - - + +

+ +

diff --git a/apps/web/src/app/[locale]/(admin)/polls/user-polls.tsx b/apps/web/src/app/[locale]/(admin)/polls/user-polls.tsx index b828c0308..bca271bf0 100644 --- a/apps/web/src/app/[locale]/(admin)/polls/user-polls.tsx +++ b/apps/web/src/app/[locale]/(admin)/polls/user-polls.tsx @@ -59,7 +59,7 @@ function FilteredPolls({ status }: { status: PollStatus }) {
    {data.pages.map((page, i) => (
  1. -
    +
    {page.polls.map((poll) => ( +
    {t("settings")} - -
    - -
    + +
    {children}
     diff --git a/apps/web/src/app/[locale]/(admin)/settings/settings-menu.tsx b/apps/web/src/app/[locale]/(admin)/settings/settings-menu.tsx index a49dd8a10..77a9f8ddb 100644 --- a/apps/web/src/app/[locale]/(admin)/settings/settings-menu.tsx +++ b/apps/web/src/app/[locale]/(admin)/settings/settings-menu.tsx @@ -1,6 +1,5 @@ "use client"; -import { Icon } from "@rallly/ui/icon"; import { CreditCardIcon, Settings2Icon, UserIcon } from "lucide-react"; import { Trans } from "react-i18next"; @@ -11,22 +10,16 @@ export function SettingsMenu() { return ( - - - + - - - + - - - + diff --git a/apps/web/src/app/[locale]/(admin)/sidebar.tsx b/apps/web/src/app/[locale]/(admin)/sidebar.tsx index e1bedf6c2..5036bbd07 100644 --- a/apps/web/src/app/[locale]/(admin)/sidebar.tsx +++ b/apps/web/src/app/[locale]/(admin)/sidebar.tsx @@ -46,8 +46,8 @@ function NavItem({ target={target} className={cn( current - ? "text-foreground bg-gray-200" - : "text-muted-foreground border-transparent hover:bg-gray-200 focus:bg-gray-300", + ? "text-foreground bg-gray-100" + : "text-muted-foreground hover:text-foreground border-transparent hover:bg-gray-100 focus:bg-gray-200", "group flex items-center gap-x-3 rounded-md px-3 py-2 text-sm font-semibold leading-6", )} > @@ -102,15 +102,15 @@ export function Sidebar() { } asChild > - - - - - - -
    - - - - - +
    +

    + + {title} + +

    +

    {getRange( localizeTime(dateStart, !timeZone).toDate(), localizeTime(dateEnd, !timeZone).toDate(), )} - - - - - - - - +

    +
    + + + + + + + + + + + ); } diff --git a/apps/web/src/components/group-poll-icon.tsx b/apps/web/src/components/group-poll-icon.tsx index 6f2ffa814..6265da8b2 100644 --- a/apps/web/src/components/group-poll-icon.tsx +++ b/apps/web/src/components/group-poll-icon.tsx @@ -11,7 +11,7 @@ export function GroupPollIcon({ role="img" aria-label="Group Poll Icon" className={cn( - "inline-flex items-center justify-center bg-gradient-to-br from-purple-500 to-violet-500 text-purple-100", + "inline-flex items-center justify-center bg-purple-600 text-purple-50", { "size-6 rounded": size === "xs", "size-8 rounded-md": size === "sm", diff --git a/apps/web/src/components/pill.tsx b/apps/web/src/components/pill.tsx index 8ed5943a1..416469148 100644 --- a/apps/web/src/components/pill.tsx +++ b/apps/web/src/components/pill.tsx @@ -1,10 +1,10 @@ export function PillList({ children }: React.PropsWithChildren) { - return
      {children}
    ; + return
      {children}
    ; } export function Pill({ children }: React.PropsWithChildren) { return ( - + {children} ); diff --git a/apps/web/src/style.css b/apps/web/src/style.css index 0ab95b7d9..e2b20502b 100644 --- a/apps/web/src/style.css +++ b/apps/web/src/style.css @@ -7,7 +7,7 @@ @apply border-border; } body { - @apply text-foreground bg-gray-100; + @apply text-foreground bg-white; font-feature-settings: "rlig" 1, "calt" 1; diff --git a/apps/web/src/trpc/routers/dashboard.ts b/apps/web/src/trpc/routers/dashboard.ts index 9501af173..c749c4b76 100644 --- a/apps/web/src/trpc/routers/dashboard.ts +++ b/apps/web/src/trpc/routers/dashboard.ts @@ -42,7 +42,7 @@ export const dashboard = router({ }, }, }, - take: 4, + take: 3, }); return polls.map((poll) => { diff --git a/apps/web/src/utils/get-range.ts b/apps/web/src/utils/get-range.ts index 2493af1e7..49af65872 100644 --- a/apps/web/src/utils/get-range.ts +++ b/apps/web/src/utils/get-range.ts @@ -3,15 +3,24 @@ import dayjs from "dayjs"; /** * Get a range of dates in a human readable format * If the start and end date are the same, return the start date + * If either the end date is in a different year, include the year * @param start The start date * @param end The end date * @returns A human readable range of dates */ export function getRange(start: Date, end: Date) { - const startDay = dayjs(start).format("DD MMM"); - const endDay = dayjs(end).format("DD MMM"); + const startDay = dayjs(start).format("D MMM"); + const endDay = dayjs(end).format("D MMM"); + const startYear = dayjs(start).format("YYYY"); + const endYear = dayjs(end).format("YYYY"); + if (startDay === endDay) { - return startDay; + return `${startDay} ${startYear}`; } - return `${startDay} - ${endDay}`; + + if (startYear !== endYear) { + return `${startDay} ${startYear} - ${endDay} ${endYear}`; + } + + return `${startDay} - ${endDay} ${startYear}`; } diff --git a/packages/ui/src/button.tsx b/packages/ui/src/button.tsx index 9f2b92555..9beb7d373 100644 --- a/packages/ui/src/button.tsx +++ b/packages/ui/src/button.tsx @@ -7,15 +7,15 @@ import { cn } from "./lib/utils"; const buttonVariants = cva( cn( - "inline-flex border transition-colors font-medium disabled:pointer-events-none select-none disabled:opacity-50 items-center justify-center whitespace-nowrap border", + "inline-flex border active:shadow-none hover:shadow-sm transition-colors font-medium disabled:pointer-events-none select-none disabled:opacity-50 items-center justify-center whitespace-nowrap border", ), { variants: { variant: { primary: - "bg-primary disabled:bg-gray-400 disabled:border-transparent text-primary-foreground hover:bg-primary-700 active:bg-primary-800 shadow-sm", + "bg-primary disabled:bg-gray-400 disabled:border-transparent text-primary-foreground hover:bg-primary-700 active:bg-primary-800", destructive: - "bg-destructive shadow-sm text-destructive-foreground active:bg-destructive border-destructive hover:bg-destructive/90", + "bg-destructive text-destructive-foreground active:bg-destructive border-destructive hover:bg-destructive/90", default: "data-[state=open]:bg-gray-100 hover:bg-gray-100 active:bg-gray-200 bg-white", secondary: @@ -27,7 +27,7 @@ const buttonVariants = cva( size: { default: "h-8 px-2 gap-x-1.5 text-sm rounded-md", sm: "h-7 text-sm px-1.5 gap-x-1.5 rounded-md", - lg: "h-11 text-base gap-x-3 px-4 rounded-md", + lg: "h-11 text-base gap-x-3 px-4 rounded-xl", }, }, defaultVariants: {