style(colours): use primary colour for the theme

nikensss · Mar 27, 2024 · 4664422 · 4664422
1 parent 1b20175
commit 4664422
Show file tree

Hide file tree

Showing 54 changed files with 368 additions and 439 deletions.
diff --git a/components.json b/components.json
@@ -6,12 +6,13 @@
   "tailwind": {
     "config": "tailwind.config.ts",
     "css": "src/styles/globals.css",
-    "baseColor": "slate",
+    "baseColor": "primary",
     "cssVariables": false,
     "prefix": ""
   },
   "aliases": {
     "components": "~/components",
     "utils": "~/lib/utils"
   }
-}
+}
+
diff --git a/src/app/_components/navbar/navbar.tsx b/src/app/_components/navbar/navbar.tsx
@@ -4,15 +4,15 @@ import MobileNavbar from '~/app/_components/navbar/navbar.mobile';
 
 export function NavBar() {
   return (
-    <header className="sticky top-0 z-50 flex h-16 items-center justify-between bg-slate-900 px-4 text-slate-50 md:justify-center">
+    <header className="bg-primary-900 text-primary-50 sticky top-0 z-50 flex h-16 items-center justify-between px-4 md:justify-center">
       <Link className="z-10 flex items-center justify-center px-2" href="/">
         <WalletIcon className="h-6 w-6" />
         <span className="sr-only">Is It That Much?</span>
       </Link>
       <nav className="z-10 hidden items-center justify-center md:ml-auto md:mr-2 md:flex md:gap-2">
         <DesktopNavbar />
       </nav>
-      <h1 className="z-10 text-slate-100 md:hidden">
+      <h1 className="text-primary-100 z-10 md:hidden">
         <Link href="/">Is It That Much?</Link>
       </h1>
       <nav className="z-10 flex px-2 md:hidden">

diff --git a/src/app/dashboard/(transactions)/date-range-picker.tsx b/src/app/dashboard/(transactions)/date-range-picker.tsx
@@ -51,7 +51,7 @@ export default function DateRangePicker({ timezone }: DateRangePickerProps) {
             id="date"
             variant={'outline'}
             className={cn(
-              'w-full justify-center gap-2 text-left font-normal shadow-slate-400',
+              'shadow-primary-400 w-full justify-center gap-2 text-left font-normal',
               !period && 'text-muted-foreground',
             )}
           >

diff --git a/src/app/dashboard/(transactions)/transactions.tsx b/src/app/dashboard/(transactions)/transactions.tsx
@@ -26,8 +26,8 @@ export default async function TransactionsOverview({ type, searchParams }: Trans
 
   return (
     <div>
-      <header className="my-0.5 mb-1.5 flex h-12 items-center justify-center rounded-md bg-slate-900">
-        <h2 className="text-lg font-bold capitalize text-slate-200">{type.toLowerCase() + 's'}</h2>
+      <header className="bg-primary-900 my-0.5 mb-1.5 flex h-12 items-center justify-center rounded-md">
+        <h2 className="text-primary-200 text-lg font-bold capitalize">{type.toLowerCase() + 's'}</h2>
       </header>
       <section className="items-center justify-center gap-2 md:flex">
         <DateRangePicker timezone={timezone} />
@@ -36,10 +36,10 @@ export default async function TransactionsOverview({ type, searchParams }: Trans
         <Table>
           <TableHeader>
             <TableRow>
-              <TableHead className="font-bold text-slate-900">Date</TableHead>
-              <TableHead className="font-bold text-slate-900">Description</TableHead>
-              <TableHead className="font-bold text-slate-900">{`Amount (${currencySymbol})`}</TableHead>
-              <TableHead className="font-bold text-slate-900">Tags</TableHead>
+              <TableHead className="text-primary-900 font-bold">Date</TableHead>
+              <TableHead className="text-primary-900 font-bold">Description</TableHead>
+              <TableHead className="text-primary-900 font-bold">{`Amount (${currencySymbol})`}</TableHead>
+              <TableHead className="text-primary-900 font-bold">Tags</TableHead>
             </TableRow>
           </TableHeader>
           <TableBody>

diff --git a/src/app/dashboard/charts/charts.tsx b/src/app/dashboard/charts/charts.tsx
@@ -25,10 +25,10 @@ export default async function Charts({ month, year }: { month: string; year: str
   ]);
 
   return (
-    <section className="flex items-center justify-center rounded-md border border-slate-200 bg-white p-2">
+    <section className="border-primary-200 flex items-center justify-center rounded-md border bg-white p-2">
       <div className="h-full w-full">
-        <header className="my-0.5 mb-1.5 flex h-12 items-center justify-center rounded-md bg-slate-900">
-          <h2 className="text-lg font-bold text-slate-200">Charts</h2>
+        <header className="bg-primary-900 my-0.5 mb-1.5 flex h-12 items-center justify-center rounded-md">
+          <h2 className="text-primary-200 text-lg font-bold">Charts</h2>
         </header>
         <Tabs defaultValue="expenses-by-day" className="mt-4 h-full w-full">
           <TabsList className="flex w-full justify-between md:grid md:grid-cols-4">

diff --git a/src/app/dashboard/charts/expenses-by-day-chart.tsx b/src/app/dashboard/charts/expenses-by-day-chart.tsx
@@ -26,7 +26,7 @@ export default async function ExpensesByDayChart({ timezone, expenses, from, to
   }
 
   const fullConfig = resolveConfig(tailwindConfig);
-  const backgroundColor = fullConfig.theme.colors.slate[900];
+  const backgroundColor = fullConfig.theme.colors.primary[900];
 
   return (
     <BarChart

diff --git a/src/app/dashboard/charts/expenses-by-tag-chart.tsx b/src/app/dashboard/charts/expenses-by-tag-chart.tsx
@@ -17,7 +17,7 @@ export default async function ExpensesByTagChart({ expenses }: ExpensesByTagChar
   }
 
   const fullConfig = resolveConfig(tailwindConfig);
-  const backgroundColor = fullConfig.theme.colors.slate[900];
+  const backgroundColor = fullConfig.theme.colors.primary[900];
 
   const entries = [...expensesPerTag.entries()].sort((a, b) => b[1] - a[1]);
   const labels = entries.map(([tag]) => tag);

diff --git a/src/app/dashboard/charts/income-left-by-day-chart.tsx b/src/app/dashboard/charts/income-left-by-day-chart.tsx
@@ -41,7 +41,7 @@ export default async function IncomeLeftByDay({ timezone, incomes, expenses, fro
   }
 
   const fullConfig = resolveConfig(tailwindConfig);
-  const slate900 = fullConfig.theme.colors.slate[900];
+  const primary900 = fullConfig.theme.colors.primary[900];
 
   const lastDayWithTransactions = Math.max(...expensesByDay.keys(), ...incomesByDay.keys());
 
@@ -50,8 +50,8 @@ export default async function IncomeLeftByDay({ timezone, incomes, expenses, fro
       labels={labels}
       datasets={[
         {
-          borderColor: slate900,
-          backgroundColor: slate900,
+          borderColor: primary900,
+          backgroundColor: primary900,
           label: 'Incomes',
           data: labels.slice(0, lastDayWithTransactions).map((d) => (incomeLeftByDay.get(d) ?? 0) / 100),
         },

diff --git a/src/app/dashboard/charts/incomes-by-day-chart.tsx b/src/app/dashboard/charts/incomes-by-day-chart.tsx
@@ -26,7 +26,7 @@ export default async function IncomesByDay({ timezone, incomes, from, to }: Inco
   }
 
   const fullConfig = resolveConfig(tailwindConfig);
-  const backgroundColor = fullConfig.theme.colors.slate[900];
+  const backgroundColor = fullConfig.theme.colors.primary[900];
 
   return (
     <BarChart

diff --git a/src/app/dashboard/layout.tsx b/src/app/dashboard/layout.tsx
@@ -5,11 +5,11 @@ export default async function DashboardLayout({ children }: { children: React.Re
   await api.users.sync.mutate();
 
   return (
-    <div className="flex grow flex-col bg-slate-100 p-2">
+    <div className="bg-primary-100 flex grow flex-col p-2">
       <div className="flex grow flex-col rounded-md bg-white p-2 shadow-md">
-        <header className="my-0.5 mb-1.5 flex h-12 items-center justify-center rounded-md bg-slate-900">
+        <header className="bg-primary-900 my-0.5 mb-1.5 flex h-12 items-center justify-center rounded-md">
           <Link href="/dashboard">
-            <h2 className="text-lg font-bold text-slate-200">Dashboard</h2>
+            <h2 className="text-primary-200 text-lg font-bold">Dashboard</h2>
           </Link>
         </header>
         {children}

diff --git a/src/app/dashboard/month-and-year-selector.tsx b/src/app/dashboard/month-and-year-selector.tsx
@@ -18,7 +18,7 @@ export default function MonthAndYearSelector({ month, year }: { month: string; y
   return (
     <Popover open={isOpen} onOpenChange={setIsOpen}>
       <PopoverTrigger asChild>
-        <Button className="ml-2 w-36 bg-slate-900" variant="outline">
+        <Button className="bg-primary-900 ml-2 w-36" variant="outline">
           {format(parse(`${month}, ${year}`, 'LLLL, yyyy', new Date()), 'MMMM, yyyy')}
         </Button>
       </PopoverTrigger>
@@ -39,7 +39,7 @@ type MonthAndYearSelectorChild = {
 
 function YearSelector({ month, year, router, pathname }: MonthAndYearSelectorChild) {
   return (
-    <div className="flex items-center rounded-lg border border-slate-200 shadow-lg">
+    <div className="border-primary-200 flex items-center rounded-lg border shadow-lg">
       <div
         className="group flex grow items-center justify-center p-2 pr-0 hover:cursor-pointer"
         onClick={() => {
@@ -49,7 +49,7 @@ function YearSelector({ month, year, router, pathname }: MonthAndYearSelectorChi
           router.push(pathname + '?' + params.toString());
         }}
       >
-        <ChevronLeft size={24} className="transition md:group-hover:-translate-x-1" />
+        <ChevronLeft size={24} className="md:group-hover:-tranprimary-x-1 transition" />
       </div>
       <div>{year}</div>
       <div
@@ -61,7 +61,7 @@ function YearSelector({ month, year, router, pathname }: MonthAndYearSelectorChi
           router.push(pathname + '?' + params.toString());
         }}
       >
-        <ChevronRight size={24} className="transition md:group-hover:translate-x-1" />
+        <ChevronRight size={24} className="md:group-hover:tranprimary-x-1 transition" />
       </div>
     </div>
   );
@@ -105,8 +105,8 @@ function MonthSelector({
           }}
           variant="outline"
           className={cn(
-            'shadow-md transition hover:bg-slate-900 hover:text-slate-100 hover:shadow-lg',
-            month === m ? 'bg-slate-100' : '',
+            'hover:bg-primary-900 hover:text-primary-100 shadow-md transition hover:shadow-lg',
+            month === m ? 'bg-primary-100' : '',
           )}
         >
           {m}

diff --git a/src/app/dashboard/recent-transactions.tsx b/src/app/dashboard/recent-transactions.tsx
@@ -16,9 +16,9 @@ export default async function DashboardRecentTrasnsactions() {
   const currencySymbol = currencySymbolMap[user?.currency ?? 'EUR'];
 
   return (
-    <div className="rounded-md border border-slate-200 bg-white p-2">
-      <header className="mb-0 mt-0.5 flex h-12 items-center justify-center rounded-md bg-slate-900">
-        <h2 className="text-lg font-bold text-slate-200">Recent Transactions</h2>
+    <div className="border-primary-200 rounded-md border bg-white p-2">
+      <header className="bg-primary-900 mb-0 mt-0.5 flex h-12 items-center justify-center rounded-md">
+        <h2 className="text-primary-200 text-lg font-bold">Recent Transactions</h2>
       </header>
       <div className="flex flex-col md:my-4 md:flex-row">
         <DashboardRecentTransactionsCard
@@ -66,7 +66,7 @@ function DashboardRecentTransactionsCard({
       <h2 className="relative mb-2 text-center text-lg font-bold">
         <Link
           href={href}
-          className="relative md:after:absolute md:after:right-[-1.5rem] md:after:top-0 md:after:ml-0.5 md:after:block md:after:opacity-0 md:after:transition-all md:after:content-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWFycm93LXJpZ2h0Ij48cGF0aCBkPSJNNSAxMmgxNCIvPjxwYXRoIGQ9Im0xMiA1IDcgNy03IDciLz48L3N2Zz4=')] md:hover:underline md:after:hover:translate-x-2 md:after:hover:opacity-100"
+          className="md:after:hover:tranprimary-x-2 relative md:after:absolute md:after:right-[-1.5rem] md:after:top-0 md:after:ml-0.5 md:after:block md:after:opacity-0 md:after:transition-all md:after:content-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWFycm93LXJpZ2h0Ij48cGF0aCBkPSJNNSAxMmgxNCIvPjxwYXRoIGQ9Im0xMiA1IDcgNy03IDciLz48L3N2Zz4=')] md:hover:underline md:after:hover:opacity-100"
         >
           {title}
         </Link>

diff --git a/src/app/dashboard/tags/page.tsx b/src/app/dashboard/tags/page.tsx
@@ -6,8 +6,8 @@ import { api } from '~/trpc/server';
 export default async function TagsOverview() {
   return (
     <div>
-      <header className="my-0.5 mb-1.5 flex h-12 items-center justify-center rounded-md bg-slate-900">
-        <h2 className="text-lg font-bold capitalize text-slate-200">Tags</h2>
+      <header className="bg-primary-900 my-0.5 mb-1.5 flex h-12 items-center justify-center rounded-md">
+        <h2 className="text-primary-200 text-lg font-bold capitalize">Tags</h2>
       </header>
       <section className="flex flex-col space-y-4 md:flex-row md:space-x-4 md:space-y-0">
         <TransactionTags type={TransactionType.EXPENSE} />
@@ -22,14 +22,14 @@ async function TransactionTags({ type }: { type: TransactionType }) {
 
   return (
     <section className="grow">
-      <header className="my-0.5 mb-1.5 flex h-12 items-center justify-center rounded-md bg-slate-900">
-        <h2 className="text-lg font-bold capitalize text-slate-200">{type.toLowerCase() + 's'}</h2>
+      <header className="bg-primary-900 my-0.5 mb-1.5 flex h-12 items-center justify-center rounded-md">
+        <h2 className="text-primary-200 text-lg font-bold capitalize">{type.toLowerCase() + 's'}</h2>
       </header>
       <main>
         <Table>
           <TableHeader>
             <TableRow>
-              <TableHead className="font-bold text-slate-900">Name</TableHead>
+              <TableHead className="text-primary-900 font-bold">Name</TableHead>
             </TableRow>
           </TableHeader>
           <TableBody>

diff --git a/src/app/dashboard/totals.tsx b/src/app/dashboard/totals.tsx
@@ -17,9 +17,9 @@ export default async function DashboardTotals({ month, year }: { month: string;
   const [totalExpenses, totalIncomes] = [expenses._sum?.amount ?? 0, incomes._sum?.amount ?? 0];
 
   return (
-    <section className="rounded-md border border-slate-200 bg-white p-2">
-      <header className="my-0.5 mb-1.5 flex h-12 items-center justify-center rounded-md bg-slate-900">
-        <h2 className="flex items-center justify-center text-lg font-bold text-slate-200">
+    <section className="border-primary-200 rounded-md border bg-white p-2">
+      <header className="bg-primary-900 my-0.5 mb-1.5 flex h-12 items-center justify-center rounded-md">
+        <h2 className="text-primary-200 flex items-center justify-center text-lg font-bold">
           Totals in <MonthAndYearSelector {...{ month, year }} />
         </h2>
       </header>

diff --git a/src/app/friends/page.tsx b/src/app/friends/page.tsx
@@ -6,10 +6,10 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '~/components/ui/tabs';
 
 export default async function FriendsPage() {
   return (
-    <main className="flex grow flex-col bg-slate-100 p-2">
+    <main className="bg-primary-100 flex grow flex-col p-2">
       <div className="flex grow flex-col rounded-md bg-white p-2 shadow-md">
-        <header className="my-0.5 mb-1.5 flex h-12 items-center justify-center rounded-md bg-slate-900">
-          <h2 className="text-lg font-bold text-slate-200">Friends</h2>
+        <header className="bg-primary-900 my-0.5 mb-1.5 flex h-12 items-center justify-center rounded-md">
+          <h2 className="text-primary-200 text-lg font-bold">Friends</h2>
         </header>
         <Tabs defaultValue="find-friends" className="flex grow flex-col">
           <TabsList className="grid grid-cols-3 items-center justify-center">

diff --git a/src/app/friends/user-banner.client.tsx b/src/app/friends/user-banner.client.tsx
@@ -81,8 +81,8 @@ export default function UserBannerClient({
   return (
     <div
       className={cn(
-        'ry-2 flex select-none items-center rounded-md border border-slate-100 p-4 md:hover:border-slate-900 md:hover:shadow-md',
-        isSelf ? 'pointer-events-none bg-slate-900/20' : '',
+        'ry-2 border-primary-100 md:hover:border-primary-900 flex select-none items-center rounded-md border p-4 md:hover:shadow-md',
+        isSelf ? 'bg-primary-900/20 pointer-events-none' : '',
         className,
       )}
     >
@@ -116,7 +116,7 @@ export default function UserBannerClient({
               title="Cancel friend request"
               description={`Are you sure you want to cancel your friend request sent to ${user.firstName} ${user.lastName}${user.username ? ` (@${user.username})` : ''}?`}
             >
-              <Button className="bg-slate-100 text-slate-900 hover:bg-slate-900 hover:text-slate-100">
+              <Button className="bg-primary-100 text-primary-900 hover:bg-primary-900 hover:text-primary-100">
                 <RotateCcw />
               </Button>
             </ButtonWithDialog>
@@ -128,7 +128,7 @@ export default function UserBannerClient({
               title="Send friend request"
               description={`Are you sure you want to send a friend request to ${user.firstName} ${user.lastName}${user.username ? ` (@${user.username})` : ''}?`}
             >
-              <Button className="bg-slate-100 text-slate-900 hover:bg-slate-900 hover:text-slate-100">
+              <Button className="bg-primary-100 text-primary-900 hover:bg-primary-900 hover:text-primary-100">
                 <UserRoundPlus />
               </Button>
             </ButtonWithDialog>
@@ -144,7 +144,7 @@ export default function UserBannerClient({
               title="Accept friend request"
               description={`Are you sure you want to accept the friend request from ${user.firstName} ${user.lastName}${user.username ? ` (@${user.username})` : ''}?`}
             >
-              <Button className="bg-slate-100 text-slate-900 hover:bg-slate-900 hover:text-slate-100">
+              <Button className="bg-primary-100 text-primary-900 hover:bg-primary-900 hover:text-primary-100">
                 <UserRoundCheck />
               </Button>
             </ButtonWithDialog>
@@ -156,7 +156,7 @@ export default function UserBannerClient({
               title="Reject friend request"
               description={`Are you sure you want to reject the friend request from ${user.firstName} ${user.lastName}${user.username ? ` (@${user.username})` : ''}?`}
             >
-              <Button className="bg-red-100 text-slate-900 hover:bg-red-600 hover:text-slate-100">
+              <Button className="text-primary-900 hover:text-primary-100 bg-red-100 hover:bg-red-600">
                 <UserRoundX />
               </Button>
             </ButtonWithDialog>
@@ -171,7 +171,7 @@ export default function UserBannerClient({
             title="Remove friend"
             description={`Are you sure you want to remove ${user.firstName} ${user.lastName}${user.username ? ` (@${user.username})` : ''} from your friends list?`}
           >
-            <Button className="bg-red-100 text-slate-900 hover:bg-red-600 hover:text-slate-100">
+            <Button className="text-primary-900 hover:text-primary-100 bg-red-100 hover:bg-red-600">
               <UserRoundMinus />
             </Button>
           </ButtonWithDialog>
@@ -182,7 +182,7 @@ export default function UserBannerClient({
             title="Block user"
             description={`Are you sure you want to block ${user.firstName} ${user.lastName}${user.username ? ` (@${user.username})` : ''}?`}
           >
-            <Button disabled className="bg-red-100 text-slate-900 hover:bg-red-600 hover:text-slate-100">
+            <Button disabled className="text-primary-900 hover:text-primary-100 bg-red-100 hover:bg-red-600">
               <Ban />
             </Button>
           </ButtonWithDialog>

diff --git a/src/app/friends/user-banner.loading.tsx b/src/app/friends/user-banner.loading.tsx
@@ -2,7 +2,7 @@ import { Skeleton } from '~/components/ui/skeleton';
 
 export default function UserBannerLoading() {
   return (
-    <div className="my-2 flex items-center rounded-md border border-slate-100 p-4">
+    <div className="border-primary-100 my-2 flex items-center rounded-md border p-4">
       <Skeleton className="mr-2 h-10 w-10 rounded-full" />
       <div className="space-y-2">
         <Skeleton className="h-4 w-[250px]" />

diff --git a/src/app/groups/[groupId]/expenses/[expenseId]/page.tsx b/src/app/groups/[groupId]/expenses/[expenseId]/page.tsx
@@ -14,8 +14,8 @@ export default async function GroupExpenseOverview({ params }: { params: { group
 
   return (
     <div className="flex grow flex-col">
-      <header className="my-0.5 mb-1.5 flex h-12 flex-col items-center justify-center rounded-md bg-slate-900">
-        <h2 className="text-lg font-bold capitalize text-slate-200">Edit expense</h2>
+      <header className="bg-primary-900 my-0.5 mb-1.5 flex h-12 flex-col items-center justify-center rounded-md">
+        <h2 className="text-primary-200 text-lg font-bold capitalize">Edit expense</h2>
       </header>
       <GroupExpenseForm {...{ group, user, expense }} />
     </div>