Update dependencies and UI improvements (#52)

* Update dependencies and ui improvements
drishit96 · Nov 13, 2023 · 13b9aae · 13b9aae
1 parent f45e94b
commit 13b9aae
Show file tree

Hide file tree

Showing 45 changed files with 1,627 additions and 3,374 deletions.
diff --git a/app/entry.server.tsx b/app/entry.server.tsx
@@ -3,7 +3,6 @@ import { renderToPipeableStream } from "react-dom/server";
 import type { EntryContext, HandleDataRequestFunction } from "@remix-run/node";
 import { RemixServer } from "@remix-run/react";
 import { PassThrough } from "stream";
-import { Response } from "@remix-run/node";
 import isbot from "isbot";
 
 const ABORT_DELAY = 5000;
@@ -58,7 +57,7 @@ function handleBrowserRequest(
           addSecurityHeaders(responseHeaders, remixContext);
 
           resolve(
-            new Response(body, {
+            new Response(body as any, {
               headers: responseHeaders,
               status: didError ? 500 : responseStatusCode,
             })

diff --git a/app/root.tsx b/app/root.tsx
@@ -39,8 +39,8 @@ import { useAutoAnimate } from "@formkit/auto-animate/react";
 import clsx from "clsx";
 import DashboardIcon from "./components/icons/DashboardIcon";
 import type {
-  V2_ErrorBoundaryComponent,
-  V2_MetaFunction,
+  ErrorBoundaryComponent,
+  MetaFunction,
 } from "@remix-run/react/dist/routeModules";
 import usePreferredLocale from "./lib/usePreferredLocale.hook";
 import type { UserSessionData } from "./utils/auth.utils.server";
@@ -68,7 +68,7 @@ export const links: LinksFunction = () => {
   ];
 };
 
-export const meta: V2_MetaFunction = () => {
+export const meta: MetaFunction = () => {
   return [
     { property: "charset", content: "utf-8" },
     { name: "description", content: "A smart, reliable & intuitive expense manager" },
@@ -89,7 +89,7 @@ export const meta: V2_MetaFunction = () => {
   ];
 };
 
-export const ErrorBoundary: V2_ErrorBoundaryComponent = () => {
+export const ErrorBoundary: ErrorBoundaryComponent = () => {
   let error = useRouteError();
   console.log(error);
   return <GenericError />;
@@ -252,6 +252,7 @@ export default function App() {
       loadingProgress.current?.classList.remove("w-0");
       loadingProgress.current?.classList.add("duration-1000", "w-full", "bg-yellow-500");
     } else {
+      setShowLoader(false);
       loadingProgress.current?.classList.remove(
         "duration-1000",
         "w-full",
@@ -361,7 +362,12 @@ export default function App() {
         >
           {showLoader && (
             <div className="flex w-full h-screen items-center justify-center">
-              <div className="flex items-center justify-center z-50 border-white border-4 rounded-full animate-ping p-4"></div>
+              <div className="flex flex-col items-center p-4 rounded-md bg-background">
+                <Spacer size={1} />
+                <div className="z-50 border-accent border-2 rounded-full animate-ping p-2"></div>
+                <Spacer />
+                <p className="text-sm text-primary">Loading...</p>
+              </div>
             </div>
           )}
         </div>

diff --git a/app/routes/$.tsx b/app/routes/$.tsx
@@ -1,8 +1,8 @@
-import type { V2_MetaFunction } from "@remix-run/react";
+import type { MetaFunction } from "@remix-run/react";
 import { Link } from "@remix-run/react";
 import { Spacer } from "~/components/Spacer";
 
-export const meta: V2_MetaFunction = ({ matches }) => {
+export const meta: MetaFunction = ({ matches }) => {
   let rootModule = matches.find((match) => match.id === "root");
   return [...(rootModule?.meta ?? []), { title: "404 - Budgetsco" }];
 };

diff --git a/app/routes/auth-action.tsx b/app/routes/auth-action.tsx
@@ -7,7 +7,7 @@ import {
   useOutletContext,
   useSubmit,
 } from "@remix-run/react";
-import type { V2_MetaFunction } from "@remix-run/react/dist/routeModules";
+import type { MetaFunction } from "@remix-run/react/dist/routeModules";
 import { Ripple } from "@rmwc/ripple";
 import { useEffect, useState } from "react";
 import { Input } from "~/components/Input";
@@ -32,7 +32,7 @@ enum AuthActionType {
   PASSWORD_RESET = "resetPassword",
 }
 
-export const meta: V2_MetaFunction = ({ matches }) => {
+export const meta: MetaFunction = ({ matches }) => {
   let rootModule = matches.find((match) => match.id === "root");
   return [...(rootModule?.meta ?? []), { title: "Budgetsco" }];
 };

diff --git a/app/routes/auth/forgotPassword.tsx b/app/routes/auth/forgotPassword.tsx
@@ -8,9 +8,9 @@ import { useState } from "react";
 import { sendResetPasswordEmail } from "~/utils/firebase.utils";
 import { getSessionData } from "~/utils/auth.utils.server";
 import { InfoText } from "~/components/InfoText";
-import type { V2_MetaFunction } from "@remix-run/react/dist/routeModules";
+import type { MetaFunction } from "@remix-run/react/dist/routeModules";
 
-export const meta: V2_MetaFunction = ({ matches }) => {
+export const meta: MetaFunction = ({ matches }) => {
   let rootModule = matches.find((match) => match.id === "root");
   return [...(rootModule?.meta ?? []), { title: "Forgot password - Budgetsco" }];
 };

diff --git a/app/routes/auth/login.tsx b/app/routes/auth/login.tsx
@@ -38,7 +38,7 @@ import {
   saveNotificationToken,
   validateChallengeResponse,
 } from "~/modules/user/user.service";
-import type { V2_MetaFunction } from "@remix-run/react/dist/routeModules";
+import type { MetaFunction } from "@remix-run/react/dist/routeModules";
 import type { AppContext } from "~/root";
 import type { Currency } from "~/utils/number.utils";
 import type { AuthPageContext } from "../auth";
@@ -47,7 +47,7 @@ import { trackEvent } from "~/utils/analytics.utils.server";
 import { EventNames } from "~/lib/anaytics.contants";
 import { UI_ENV } from "~/lib/ui.config";
 
-export const meta: V2_MetaFunction = ({ matches }) => {
+export const meta: MetaFunction = ({ matches }) => {
   let rootModule = matches.find((match) => match.id === "root");
   return [...(rootModule?.meta ?? []), { title: "Login - Budgetsco" }];
 };

diff --git a/app/routes/auth/register.tsx b/app/routes/auth/register.tsx
@@ -34,13 +34,13 @@ import {
   getUserPreferences,
 } from "~/modules/settings/settings.service";
 import { isNotNullAndEmpty, isNullOrEmpty } from "~/utils/text.utils";
-import type { V2_MetaFunction } from "@remix-run/react/dist/routeModules";
+import type { MetaFunction } from "@remix-run/react/dist/routeModules";
 import type { AuthPageContext } from "../auth";
 import Turnstile from "~/components/Turnstile";
 import { trackEvent, trackUserProfileUpdate } from "~/utils/analytics.utils.server";
 import { EventNames } from "~/lib/anaytics.contants";
 
-export const meta: V2_MetaFunction = ({ matches }) => {
+export const meta: MetaFunction = ({ matches }) => {
   let rootModule = matches.find((match) => match.id === "root");
   return [...(rootModule?.meta ?? []), { title: "Register - Budgetsco" }];
 };

diff --git a/app/routes/cancel-and-refund-policy.tsx b/app/routes/cancel-and-refund-policy.tsx
@@ -1,6 +1,6 @@
-import type { V2_MetaFunction } from "@remix-run/react/dist/routeModules";
+import type { MetaFunction } from "@remix-run/react/dist/routeModules";
 
-export const meta: V2_MetaFunction = ({ matches }) => {
+export const meta: MetaFunction = ({ matches }) => {
   let rootModule = matches.find((match) => match.id === "root");
   return [
     ...(rootModule?.meta ?? []),

diff --git a/app/routes/dashboard.tsx b/app/routes/dashboard.tsx
@@ -45,14 +45,14 @@ import { getUserPreferencesAfterTimestamp } from "~/modules/settings/settings.se
 import Banner from "~/components/Banner";
 import { getThisMonthTarget } from "~/modules/reports/reports.service";
 import { StatisticsCard } from "~/components/StatisticsCard";
-import type { V2_MetaFunction } from "@remix-run/react/dist/routeModules";
+import type { MetaFunction } from "@remix-run/react/dist/routeModules";
 import { formatDate_MMMM_YYYY } from "~/utils/date.utils";
 import type { Currency } from "~/utils/number.utils";
 import { abs, calculate, subtract } from "~/utils/number.utils";
 import { trackEvent } from "~/utils/analytics.utils.server";
 import { EventNames } from "~/lib/anaytics.contants";
 
-export const meta: V2_MetaFunction = ({ matches }) => {
+export const meta: MetaFunction = ({ matches }) => {
   const rootModule = matches.find((match) => match.id === "root");
   return [...(rootModule?.meta ?? []), { title: "Dashboard - Budgetsco" }];
 };

diff --git a/app/routes/index.tsx b/app/routes/index.tsx
@@ -1,8 +1,8 @@
 import { Link } from "@remix-run/react";
-import type { V2_MetaFunction } from "@remix-run/react/dist/routeModules";
+import type { MetaFunction } from "@remix-run/react/dist/routeModules";
 import { Spacer } from "~/components/Spacer";
 
-export const meta: V2_MetaFunction = ({ matches }) => {
+export const meta: MetaFunction = ({ matches }) => {
   let rootModule = matches.find((match) => match.id === "root");
   return [...(rootModule?.meta ?? []), { title: "Budgetsco" }];
 };

diff --git a/app/routes/privacy-policy.tsx b/app/routes/privacy-policy.tsx
@@ -1,7 +1,7 @@
-import type { V2_MetaFunction } from "@remix-run/react/dist/routeModules";
+import type { MetaFunction } from "@remix-run/react/dist/routeModules";
 import { Spacer } from "~/components/Spacer";
 
-export const meta: V2_MetaFunction = ({ matches }) => {
+export const meta: MetaFunction = ({ matches }) => {
   let rootModule = matches.find((match) => match.id === "root");
   return [...(rootModule?.meta ?? []), { title: "Privacy policy - Budgetsco" }];
 };

diff --git a/app/routes/reports.tsx b/app/routes/reports.tsx
@@ -3,9 +3,9 @@ import { useEffect, useState } from "react";
 import { Link, Outlet, useOutletContext } from "@remix-run/react";
 import type { AppContext } from "~/root";
 import { useAutoAnimate } from "@formkit/auto-animate/react";
-import type { V2_MetaFunction } from "@remix-run/react/dist/routeModules";
+import type { MetaFunction } from "@remix-run/react/dist/routeModules";
 
-export const meta: V2_MetaFunction = ({ matches }) => {
+export const meta: MetaFunction = ({ matches }) => {
   let rootModule = matches.find((match) => match.id === "root");
   return [...(rootModule?.meta ?? []), { title: "Reports - Budgetsco" }];
 };
@@ -27,12 +27,12 @@ export default function Reports() {
   return (
     <main className="pt-6 pb-16 pl-3 pr-3">
       <div className="flex justify-center">
-        <div className="flex grow max-w-xl">
+        <div className="flex grow max-w-xl p-1 bg-emerald-700 rounded-xl">
           <Link className="w-1/3" to="/reports/thisMonth" replace>
             <Ripple>
               <p
-                className={`p-2 text-sm font-bold sm:text-base sm:font-normal text-center border-l-2 border-t-2 border-b-2 border-emerald-700 rounded-l-lg focus-ring ${
-                  activeTab === "thisMonth" ? "bg-emerald-700 text-white" : "text-accent"
+                className={`p-1 text-sm font-bold sm:text-base sm:font-normal text-center rounded-lg focus-ring ${
+                  activeTab === "thisMonth" ? "bg-background text-accent" : "text-white"
                 }`}
               >
                 This Month
@@ -42,8 +42,8 @@ export default function Reports() {
           <Link className="w-1/3" to="/reports/compare" replace>
             <Ripple>
               <p
-                className={`p-2 text-sm font-bold sm:text-base sm:font-normal text-center border-2 border-emerald-700 ${
-                  activeTab === "compare" ? "bg-emerald-700 text-white" : "text-accent"
+                className={`p-1 text-sm font-bold sm:text-base sm:font-normal text-center rounded-lg ${
+                  activeTab === "compare" ? "bg-background text-accent" : "text-white"
                 }`}
               >
                 Compare
@@ -53,8 +53,8 @@ export default function Reports() {
           <Link className="w-1/3" to="/reports/trend/expense" replace>
             <Ripple>
               <p
-                className={`p-2 text-sm font-bold sm:text-base sm:font-normal text-center border-r-2 border-t-2 border-b-2 border-emerald-700 rounded-r-lg ${
-                  activeTab === "trend" ? "bg-emerald-700 text-white" : "text-accent"
+                className={`p-1 text-sm font-bold sm:text-base sm:font-normal text-center rounded-lg ${
+                  activeTab === "trend" ? "bg-background text-accent" : "text-white"
                 }`}
               >
                 Trend

diff --git a/app/routes/reports/compare.tsx b/app/routes/reports/compare.tsx
@@ -12,9 +12,9 @@ import type { ReportsPageContext } from "../reports";
 import MonthYearSelector from "~/components/MonthYearSelector";
 import { abs, calculate, formatToCurrency } from "~/utils/number.utils";
 import Bar from "~/components/Bar";
-import type { V2_MetaFunction } from "@remix-run/react/dist/routeModules";
+import type { MetaFunction } from "@remix-run/react/dist/routeModules";
 
-export const meta: V2_MetaFunction = ({ matches }) => {
+export const meta: MetaFunction = ({ matches }) => {
   let rootModule = matches.find((match) => match.id === "root");
   return [...(rootModule?.meta ?? []), { title: "Compare reports - Budgetsco" }];
 };
@@ -92,7 +92,7 @@ export default function CompareReport() {
 
       <Spacer />
 
-      <div className="flex flex-wrap gap-1">
+      <div className="flex flex-wrap gap-1 bg-elevated-10 p-3 rounded-lg">
         <StatisticsCard
           name="Budget"
           num={budgetForMonth}
@@ -138,9 +138,9 @@ export default function CompareReport() {
 
       <br />
 
-      <div className="flex flex-wrap gap-2 justify-center">
+      <div className="flex flex-wrap gap-2 justify-center bg-elevated-10 p-3 rounded-lg">
         {categoryExpenses?.length && (
-          <div className="p-3 border border-primary rounded-md w-full">
+          <div className="p-3 border border-primary rounded-md w-full bg-background">
             <p className="text-xl font-bold">Expense per category</p>
             <Spacer />
             {categoryExpenses.map((categoryExpense) => {

diff --git a/app/routes/reports/thisMonth.tsx b/app/routes/reports/thisMonth.tsx
@@ -21,16 +21,16 @@ import { ErrorText } from "~/components/ErrorText";
 import { SuccessText } from "~/components/SuccessText";
 import { Ripple } from "@rmwc/ripple";
 import type {
-  V2_ErrorBoundaryComponent,
-  V2_MetaFunction,
+  ErrorBoundaryComponent,
+  MetaFunction,
 } from "@remix-run/react/dist/routeModules";
 
-export const meta: V2_MetaFunction = ({ matches }) => {
+export const meta: MetaFunction = ({ matches }) => {
   let rootModule = matches.find((match) => match.id === "root");
   return [...(rootModule?.meta ?? []), { title: "This month's report - Budgetsco" }];
 };
 
-export const ErrorBoundary: V2_ErrorBoundaryComponent = () => {
+export const ErrorBoundary: ErrorBoundaryComponent = () => {
   let error = useRouteError();
   console.log(error);
   return <GenericError />;
@@ -159,7 +159,7 @@ export default function ThisMonthReport() {
   return (
     <div>
       <Spacer size={3} />
-      <div className="flex flex-wrap gap-1">
+      <div className="flex flex-wrap gap-1 bg-elevated-10 p-3 rounded-lg">
         <StatisticsCard
           name="Budget"
           num={budget}
@@ -198,9 +198,9 @@ export default function ThisMonthReport() {
       )}
       <Spacer />
 
-      <div className="flex flex-wrap gap-3 justify-center">
+      <div className="grid grid-cols-[repeat(auto-fill,minmax(theme(width.72),1fr))] p-3 gap-2 justify-center bg-elevated-10 rounded-lg">
         {categoryWiseTargetExpense?.length > 0 && (
-          <div className="p-3 border border-primary rounded-md w-full lg:w-6/12">
+          <div className="p-3 border border-primary rounded-md w-full bg-background">
             <p className="text-xl font-bold">Budget vs Expense</p>
             <Spacer />
             {categoryBudgetExpenses.map((categoryExpense) => {
@@ -259,7 +259,7 @@ export default function ThisMonthReport() {
           </div>
         )}
 
-        <div className="p-3 border border-primary rounded-md w-full lg:w-5/12">
+        <div className="p-3 border border-primary rounded-md w-full bg-background">
           <PieChartCard
             title="Expense breakdown"
             data={expenseDistribution}
@@ -271,7 +271,7 @@ export default function ThisMonthReport() {
           />
         </div>
 
-        <div className="p-3 border border-primary rounded-md w-full lg:w-6/12">
+        <div className="p-3 border border-primary rounded-md w-full bg-background">
           <PieChartCard
             title="How did you use your money?"
             data={moneyDistribution}
@@ -284,7 +284,7 @@ export default function ThisMonthReport() {
           />
         </div>
 
-        <div className="p-3 border border-primary rounded-md w-full lg:w-5/12">
+        <div className="p-3 border border-primary rounded-md w-full bg-background">
           <PieChartCard
             title="What did you use to pay?"
             data={paymentModeExpense}
@@ -297,7 +297,7 @@ export default function ThisMonthReport() {
         </div>
 
         {calculate(investmentDone).gt(0) && (
-          <div className="p-3 border border-primary rounded-md w-full lg:w-5/12">
+          <div className="p-3 border border-primary rounded-md w-full bg-background">
             <PieChartCard
               title="Investment breakdown"
               data={investmentDistribution}

diff --git a/app/routes/reports/trend.tsx b/app/routes/reports/trend.tsx
@@ -12,13 +12,13 @@ import { getSessionData } from "~/utils/auth.utils.server";
 import type { ReportsPageContext } from "../reports";
 import { useEffect, useState } from "react";
 import MonthYearSelector from "~/components/MonthYearSelector";
-import type { V2_MetaFunction } from "@remix-run/react/dist/routeModules";
+import type { MetaFunction } from "@remix-run/react/dist/routeModules";
 import type { TransactionType } from "~/modules/transaction/transaction.schema";
 import { getFirstDateOfXMonthsBeforeFormatted, parseDate } from "~/utils/date.utils";
 import { Ripple } from "@rmwc/ripple";
 import { logError } from "~/utils/logger.utils.server";
 
-export const meta: V2_MetaFunction = ({ matches }) => {
+export const meta: MetaFunction = ({ matches }) => {
   let rootModule = matches.find((match) => match.id === "root");
   return [...(rootModule?.meta ?? []), { title: "Trending report - Budgetsco" }];
 };
@@ -162,7 +162,7 @@ export default function TrendReport() {
 
       <Spacer size={3} />
 
-      <div className="flex flex-wrap gap-2 justify-center">
+      <div className="grid grid-cols-[repeat(auto-fill,minmax(theme(width.72),1fr))] p-3 gap-2 justify-center bg-elevated-10 rounded-lg">
         <Outlet context={trendingReportContext} />
       </div>
     </div>