Merge pull request #195 from Kerosene-Labs/BIL-6-update-fixed

Bil 6 update fixed
Kerosene-Labs · Jan 3, 2025 · cd04ca5 · cd04ca5
2 parents f4d22fd + c673833
commit cd04ca5
Show file tree

Hide file tree

Showing 36 changed files with 150 additions and 133 deletions.
diff --git a/.github/workflows/production.yml b/.github/workflows/production.yml
@@ -178,5 +178,5 @@ jobs:
           bastion_ssh_host: ${{ secrets.BASTION_HOST }}
           deployment_private_key: ${{secrets.DEPLOYMENT_PRIVATE_KEY}}
           deployment_ssh_user: infra
-          deployment_server: mars1d
+          deployment_server: mars1
           command: cd billtracker && docker compose pull frontend backend && docker compose up frontend backend -d
diff --git a/frontend/Dockerfile b/frontend/Dockerfile
@@ -1,4 +1,4 @@
-FROM node:lts
+FROM oven/bun:latest
 
 # copy dist
 RUN mkdir /app
@@ -8,4 +8,4 @@ COPY build /app
 COPY node_modules /app/node_modules
 
 WORKDIR /app
-ENTRYPOINT [ "node", "index.js"]
+ENTRYPOINT [ "bun", "index.js"]
diff --git a/frontend/package.json b/frontend/package.json
@@ -15,13 +15,13 @@
   "devDependencies": {
     "@openapitools/openapi-generator-cli": "^2.15.3",
     "@sveltejs/adapter-auto": "^3.0.0",
-    "@sveltejs/kit": "^2.9.0",
+    "@sveltejs/kit": "^2.15.1",
     "@sveltejs/vite-plugin-svelte": "^5.0.0",
     "autoprefixer": "^10.4.20",
     "prettier": "^3.4.2",
     "prettier-plugin-svelte": "^3.3.2",
     "prettier-plugin-tailwindcss": "^0.6.9",
-    "svelte": "^5.0.0",
+    "svelte": "^5.16.1",
     "svelte-check": "^4.0.0",
     "tailwindcss": "^3.4.9",
     "typescript": "^5.0.0",

diff --git a/frontend/src/app.css b/frontend/src/app.css
@@ -2,38 +2,14 @@
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 
-:root {
-    /*zinc-100*/
-    --bg-page: #f4f4f5;
-    /*neutral-300*/
-    --bg-card: #d4d4d4;
-
-    /*neutral-900*/
-    --text-primary: #171717;
-    /*neutral-800*/
-    --text-muted: #262626;
-}
-
-[data-theme="dark"] {
-    /*zinc-900*/
-    --bg-page: #18181b;
-    /*neutral-800*/
-    --bg-card: #262626;
-
-    /*neutral-100*/
-    --text-primary: #f5f5f5;
-    /*neutral-300*/
-    --text-muted: #d4d4d4;
-}
-
-h1, h2, h3, h4, h5, h6 {
-    @apply text-primary font-black;
+h1, h2, h3, h4, h5 {
+    @apply text-neutral-700 dark:text-white font-black text-xl;
 }
 
 h1 {
     @apply text-2xl desktop:text-3xl;
 }
 
 p {
-    @apply text-primary font-semibold;
+    @apply text-neutral-900 dark:text-neutral-300 font-semibold;
 }
diff --git a/frontend/src/app.html b/frontend/src/app.html
@@ -32,7 +32,7 @@
 <body
   data-sveltekit-preload-data="hover"
   style="height: 100vh"
-  class="bg-page"
+  class="dark:bg-neutral-900"
 >
 <div style="display: contents">%sveltekit.body%</div>
 </body>

diff --git a/frontend/src/lib/components/Back.svelte b/frontend/src/lib/components/Back.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+</script>
+
+<!--please note that our main will clip any content that is overflowing in an effort to maintain a decent user experience-->
+<main class="h-screen max-h-screen min-h-screen overflow-clip">
+  <div
+    id="backBar"
+    class="absolute z-30 flex h-14 max-h-14 w-screen flex-row items-center px-4"
+  >
+    <button aria-label="App Drawer Toggle" on:click={() => {history.back()}}>
+      <span class="font-bold text-2xl text-neutral-300 hover:text-neutral-400 dark:text-neutral-600 dark:hover:text-neutral-500 transition-colors">&lt;</span>
+    </button>
+  </div>
+  <div id="pageContent" class="h-full overflow-y-auto pt-14">
+    <slot></slot>
+  </div>
+</main>
diff --git a/frontend/src/lib/components/BaseBackLayout.svelte b/frontend/src/lib/components/BaseBackLayout.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import Back from "$lib/components/Back.svelte";
+</script>
+
+<Back>
+  <div class="max-w-screen flex min-h-full flex-col items-center">
+    <div
+      class="max-w-screen flex min-h-full w-screen flex-col gap-6 overflow-x-clip p-8 xl:w-[50rem] xl:min-w-[50rem]"
+    >
+      <slot></slot>
+    </div>
+  </div>
+</Back>
diff --git a/frontend/src/lib/components/Nav.svelte b/frontend/src/lib/components/Nav.svelte
@@ -14,7 +14,7 @@
 <main class="h-screen max-h-screen min-h-screen overflow-clip">
   <div
     id="appBar"
-    class="absolute z-30 flex h-14 max-h-14 w-screen flex-row items-center bg-neutral-900 px-4 drop-shadow-lg"
+    class="absolute z-30 flex h-14 max-h-14 w-screen flex-row items-center bg-zinc-100 dark:bg-neutral-800 px-4"
   >
     <button aria-label="App Drawer Toggle" on:click={toggleDrawer}>
       <svg
@@ -23,7 +23,7 @@
         viewBox="0 0 24 24"
         stroke-width="1.5"
         stroke="currentColor"
-        class="size-8 text-neutral-100 transition-colors hover:text-neutral-200 active:text-neutral-400"
+        class="size-8 transition-colors dark:text-neutral-100 dark:hover:text-neutral-200 dark:active:text-neutral-400"
       >
         <path
           stroke-linecap="round"
@@ -35,7 +35,7 @@
   </div>
   <div
     id="drawer"
-    class="inset-y-y fixed z-20 h-screen w-[90%] translate-x-[-100%] bg-neutral-900 transition-all lg:w-96"
+    class="inset-y-y fixed z-20 h-screen w-[90%] translate-x-[-100%] bg-neutral-200 dark:bg-neutral-900 transition-all lg:w-96"
     class:translate-x-[0%]={drawerOpen}
     class:pointer-events-none={!drawerOpen}
   >

diff --git a/frontend/src/lib/components/NavItem.svelte b/frontend/src/lib/components/NavItem.svelte
@@ -1,6 +1,6 @@
 <button
   on:click
-  class="p-4 pl-4 text-left text-xl font-semibold text-neutral-200 transition-colors hover:bg-neutral-800/25 active:bg-neutral-800/50"
+  class="p-4 pl-4 text-left text-xl font-semibold transition-colors text-neutral-800 dark:text-neutral-200 hover:bg-neutral-300 dark:hover:bg-neutral-800"
 >
   <slot></slot>
 </button>
diff --git a/frontend/src/lib/components/NavUserCard.svelte b/frontend/src/lib/components/NavUserCard.svelte
@@ -3,12 +3,13 @@
   import {
     doLogOut,
     getErrorMessageFromSdk,
-    getPrivateApiConfig,
+    getPrivateApiConfig
   } from "$lib/sdkUtil";
   import { onMount } from "svelte";
   import { ResponseError, SettingsApi } from "$lib/sdk";
   import { addToToastQueue, ToastType } from "$lib/toast";
   import Spinner from "$lib/tk/Spinner.svelte";
+  import Card from "$lib/tk/Card.svelte";
 
   let loading: boolean = true;
 
@@ -21,20 +22,23 @@
       })
       .catch(async (error: ResponseError) => {
         await getErrorMessageFromSdk(error).then((msg) =>
-          addToToastQueue({ message: msg, type: ToastType.ERROR }),
+          addToToastQueue({ message: msg, type: ToastType.ERROR })
         );
       });
   });
   let firstName: string = "...";
 </script>
 
-<div class="flex flex-col gap-4 rounded-b-xl bg-neutral-800 px-4 py-8">
-  {#if !loading}
-    <h1>Hello, {firstName}.</h1>
-  {:else}
-    <div class="flex w-full justify-center">
-      <Spinner></Spinner>
-    </div>
-  {/if}
-  <Button on:click={doLogOut}>Log Out</Button>
-</div>
+<div class="m-4">
+  <Card>
+    {#if !loading}
+      <h1>Hey, {firstName}!</h1>
+      <p>Hope you're ready to save some money!</p>
+    {:else}
+      <div class="flex w-full justify-center">
+        <Spinner></Spinner>
+      </div>
+    {/if}
+    <Button on:click={doLogOut}>Log Out</Button>
+  </Card>
+</div>
diff --git a/frontend/src/lib/components/expenses/ExpenseEventTable.svelte b/frontend/src/lib/components/expenses/ExpenseEventTable.svelte
@@ -52,10 +52,10 @@
     </div>
   {:else if expenses !== undefined && expenses.length === 0}
     <div class="flex flex-col items-center justify-center gap-2 p-8">
-      <p class="font-mono text-2xl font-black text-neutral-300">
-        🦗...crickets
+      <p class="font-mono text-2xl font-black">
+        🦗...Just crickets
       </p>
-      <p class="font-semibold text-neutral-100">There's nothing here.</p>
+      <p class="font-semibold ">There's nothing here.</p>
     </div>
   {:else}
     <Table

diff --git a/frontend/src/lib/eureka/input/ENumberInput.svelte b/frontend/src/lib/eureka/input/ENumberInput.svelte
@@ -30,7 +30,6 @@
     @apply bg-neutral-800;
     @apply hover:bg-neutral-700/70;
     @apply focus:bg-neutral-700/95;
-    @apply focus:ring-2 focus:ring-neutral-400;
     @apply transition-all;
     @apply outline-none;
     @apply font-semibold;

diff --git a/frontend/src/lib/eureka/table/Table.svelte b/frontend/src/lib/eureka/table/Table.svelte
@@ -2,9 +2,9 @@
   export let headers: string[] = ["Col 1", "Col 2", "Col 3"];
 </script>
 
-<div class="flex w-full overflow-auto rounded-xl bg-neutral-800">
+<div class="flex w-full overflow-auto rounded-xl bg-neutral-800 border border-neutral-700/50">
   <table class="w-full table-auto">
-    <thead class="bg-neutral-900">
+    <thead class="bg-zinc-900">
       <tr>
         {#each headers as header}
           <th class="p-4 font-mono text-sm font-bold text-neutral-400"

diff --git a/frontend/src/lib/eureka/table/TableRow.svelte b/frontend/src/lib/eureka/table/TableRow.svelte
@@ -4,9 +4,9 @@
 
 <tr
   on:click
-  class="transition-colors hover:bg-neutral-700/20 active:bg-neutral-900/50"
+  class="transition-colors border bg-neutral-200 hover:bg-neutral-300 active:bg-zinc-400 border-stone-300/50 dark:bg-neutral-700 hover:dark:bg-neutral-600 active:dark:bg-zinc-700 dark:border-stone-600/50"
 >
   {#each row as cell}
-    <td class="p-4 text-center font-semibold text-neutral-200">{cell}</td>
+    <td class="p-4 text-center font-semibold text-neutral-800 dark:text-neutral-300">{cell}</td>
   {/each}
 </tr>
diff --git a/frontend/src/lib/tk/Button.svelte b/frontend/src/lib/tk/Button.svelte
@@ -34,21 +34,20 @@
   button {
     @apply w-full;
     @apply font-semibold;
-    @apply rounded-lg px-5 py-2;
-    @apply text-neutral-300;
-    @apply bg-neutral-700;
-    @apply hover:dark:bg-neutral-600/70;
-    @apply active:dark:bg-neutral-600/95;
-    @apply focus:ring-2 focus:ring-neutral-400;
+    @apply rounded-lg px-5 py-2 border;
+    @apply text-neutral-800 dark:text-neutral-300;
+    @apply bg-neutral-200 hover:bg-neutral-300 active:bg-zinc-400 border-stone-300/50;
+    @apply dark:bg-neutral-700 hover:dark:bg-neutral-600 active:dark:bg-zinc-700 dark:border-stone-600/50;
     @apply transition-all;
   }
 
   button[disabled] {
     @apply w-full;
     @apply font-semibold;
-    @apply rounded-lg px-5 py-2;
-    @apply text-neutral-500;
-    @apply bg-neutral-800;
+    @apply rounded-xl px-5 py-2;
+    @apply text-neutral-700;
+    @apply bg-neutral-300 border-stone-400/50;
+    @apply dark:bg-neutral-800 dark:border-stone-700/50;
     @apply transition-all;
   }
 </style>
diff --git a/frontend/src/lib/tk/Card.svelte b/frontend/src/lib/tk/Card.svelte
@@ -3,7 +3,7 @@
   export let subtitle: string | undefined = undefined;
 </script>
 
-<div class="bg-card rounded-2xl p-8">
+<div class="bg-zinc-100 dark:bg-neutral-800 border-zinc-200/50 dark:border-zinc-700/50 border rounded-xl p-8">
   {#if title || subtitle}
     <div class="pb-4">
       <div class="flex flex-row items-center gap-4">

diff --git a/frontend/src/lib/tk/Modal.svelte b/frontend/src/lib/tk/Modal.svelte
@@ -10,23 +10,26 @@
     closeButtonVisible?: boolean;
   }
 
-  let {visible = $bindable(false), title, subtitle, closeButtonVisible = true}: Props = $props();
+  let { visible = $bindable(false), title, subtitle, closeButtonVisible = true }: Props = $props();
 </script>
 
 {#if visible}
   <div class="fixed inset-0 w-screen h-screen bg-black/50 z-50 backdrop-blur-sm"
        transition:fade={{duration: 75}}>
     <div class="flex w-full h-full items-center justify-center">
-      <div class="bg-neutral-800 p-8 rounded-lg w-[40rem] m-2"
-           transition:fly={{ y: 20, duration: 150, delay: 25, easing: cubicOut, opacity: 50}}
+      <div
+        class="bg-zinc-100 dark:bg-neutral-800 border border-zinc-200/50 dark:border-zinc-700/50 p-8 rounded-xl shadow-lg w-[40rem] m-2"
+        transition:fly={{ y: 20, duration: 150, delay: 25, easing: cubicOut, opacity: 50}}
       >
-        <div class="flex flex-col gap-2">
+        <div class="flex flex-col">
           {#if title}
             <h1>{title}</h1>
           {/if}
           {#if subtitle}
-            <p class="text-neutral-300 font-semibold">{subtitle}</p>
+            <p class="font-semibold pb-2">{subtitle}</p>
           {/if}
+        </div>
+        <div class="flex flex-col gap-2">
           <slot></slot>
           {#if closeButtonVisible}
             <Button on:click={() => {visible = !visible}}>Close</Button>

diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
@@ -1,16 +1,6 @@
 <script lang="ts">
   import "../app.css";
   import ToastQueue from "$lib/tk/ToastQueue.svelte";
-  import BaseNavLayout from "$lib/components/BaseNavLayout.svelte";
-
-  const unprotectedRoutes: string[] = ["/login", "/signup", "/"];
-
-  // afterNavigate(async (navigation) => {
-  //     if (unprotectedRoutes.includes(window.location.href)) {
-  //         return;
-  //     }
-  //     await validateAndEnforceSession();
-  // });
 
   let { children } = $props();
 </script>

diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
@@ -6,7 +6,7 @@
 
 <div class="flex h-screen w-screen justify-center p-6 xl:pt-24">
   <div
-    class="flex h-fit max-w-[50rem] flex-col items-center justify-center gap-4 rounded-3xl bg-neutral-900/30 p-12 text-center shadow-xl transition-all hover:scale-[101%] hover:bg-neutral-900/30 hover:shadow-2xl"
+    class="flex h-fit max-w-[50rem] flex-col items-center justify-center gap-4 rounded-3xl bg-neutral-900/30 p-12 text-center transition-all hover:scale-[101%] hover:bg-neutral-900/30 hover:shadow-2xl"
   >
     <h1 class="text-3xl xl:text-5xl">Introducing BillTracker</h1>
     <p class="font-semibold text-neutral-400">

diff --git a/frontend/src/routes/app/+layout.svelte b/frontend/src/routes/app/+layout.svelte
@@ -1,7 +1,9 @@
-<script>
+<script lang="ts">
   import BaseNavLayout from "$lib/components/BaseNavLayout.svelte";
+
+  let { children } = $props();
 </script>
 
 <BaseNavLayout>
-  <slot></slot>
-</BaseNavLayout>
+  {@render children()}
+</BaseNavLayout>
diff --git a/frontend/src/routes/app/expenses/+page.svelte b/frontend/src/routes/app/expenses/+page.svelte
@@ -1,9 +1,13 @@
 <script>
   import Card from "$lib/tk/Card.svelte";
   import ExpenseEventTable from "$lib/components/expenses/ExpenseEventTable.svelte";
-  import RecurringExpenseEventCreatorTable from "./recurring/RecurringExpenseEventCreatorTable.svelte";
+  import RecurringExpenseEventCreatorTable from "./recurring/RecurringExpenseTable.svelte";
+  import { onMount } from "svelte";
+  import BaseNavLayout from "$lib/components/BaseNavLayout.svelte";
 
-  document.title = "Expenses | BillTracker";
+  onMount(() => {
+    document.title = "Expenses | BillTracker";
+  });
 </script>
 
 <Card

diff --git a/frontend/src/routes/app/expenses/createOneOff/+page.svelte b/frontend/src/routes/app/expenses/createOneOff/+page.svelte
@@ -1,5 +1,6 @@
 <script>
   import OneOffCreator from "$lib/components/expenses/OneOffCreator.svelte";
+  import BaseBackLayout from "$lib/components/BaseBackLayout.svelte";
 </script>
 
 <OneOffCreator></OneOffCreator>