web/dashboard.templ

@@ -2,13 +2,13 @@ package web
 
 templ dashboard() {
     <title>Dashboard</title>
-    <div class="container" data-main-body="true"> 
+    <div class="container"> 
         <div class="row" style="margin-top: -20px">
             <div class="c-crust col card mx-auto cr-all d-flex-col">
-                <div class="c-surface0 d-flex w-100 cr-top">
-                    <i class="my-auto tc-text py-3 ps-3 ms-1" data-feather="arrow-left"></i>
-                    <span class="mx-auto my-auto tc-text">Income/Expenses</span>
-                    <i class="my-auto tc-text py-3 pe-3 me-1" data-feather="arrow-right"></i>
+                <div class="c-s0 d-flex w-100 cr-top">
+                    <i class="my-auto c-text py-3 ps-3 ms-1" data-feather="arrow-left"></i>
+                    <span class="mx-auto my-auto c-text">Income/Expenses</span>
+                    <i class="my-auto c-text py-3 pe-3 me-1" data-feather="arrow-right"></i>
                 </div>
                 <div class="d-flex" style="height: 88%">
                     <div class="w-50">
@@ -19,7 +19,7 @@ templ dashboard() {
                         id="IncomeVsExpenditureChart"
                         ></canvas>
                     </div>
-                    <div class="w-50 c-surface1" style="overflow-y: scroll">
+                    <div class="w-50 c-s1" style="overflow-y: scroll">
                         <div class="m-4 my-5"
                         hx-trigger="load delay:0.25s"
                         hx-get="web/account_summaries"
@@ -30,9 +30,9 @@ templ dashboard() {
                 
             </div>
             <div class="c-crust col card mx-auto cr-all">
-                <div class="c-surface0 d-flex w-100 cr-top">
-                    <i class="my-auto tc-text py-3 ps-3 ms-1" data-feather="arrow-left"></i>
-                    <i class="my-auto tc-text py-3 pe-3 me-1 ms-auto" data-feather="arrow-right"></i>
+                <div class="c-s0 d-flex w-100 cr-top">
+                    <i class="my-auto c-text py-3 ps-3 ms-1" data-feather="arrow-left"></i>
+                    <i class="my-auto c-text py-3 pe-3 me-1 ms-auto" data-feather="arrow-right"></i>
                 </div>
             </div>
         </div>

web/sass/utility-classes.scss

@@ -137,7 +137,6 @@ $w_h_sizes: (
     border-radius: 20px;
     background-color: var(--#{$prefix}-surface2);
     transition: all 0.1s linear;
-    cursor: pointer;
 }
 .borderless-btn:hover {
     background-color: var(--#{$prefix}-overlay1);
@@ -206,22 +205,19 @@ table.table-striped {
     border-color: var(--#{$prefix}-overlay2);
     border-width: thin;
     transition: max-height 0.2s linear;
+}
 
-    select {
+.popup-menu select {
     font-size: 1em;
     border: none;
     border-radius: $border-radius;
     background-color: var(--#{$prefix}-mantle);
     color: var(--#{$prefix}-text);
 }
-    input {
+.popup-menu input {
     width: 5em;
     font-size: 1em;
     margin-left: 10px;
     margin-right: 10px;
-        border-radius: $border-radius;
-        border-style: solid;
-        border-color: var(--#{$prefix}-text);
-    }
 }
 

web/sass/variables.scss

@@ -29,13 +29,7 @@
     }
 }
 
-@each $color, $_ in map-get(catppuccin.$palette, 'latte') {
-    .c-#{$color} {
-        background-color: var(--#{$prefix}-#{$color}) !important;
-    }
-}
-
-.tc-text {
+.c-text {
     color: var(--#{$prefix}-text);
 }
 .c-s0 {
@@ -44,3 +38,21 @@
 .c-s1 {
     background-color: var(--#{$prefix}-surface1);
 }
+.c-crust {
+    background-color: var(--#{$prefix}-crust);
+}
+.c-mantle {
+    background-color: var(--#{$prefix}-mantle);
+}
+.c-mauve {
+    background-color: var(--#{$prefix}-mauve);
+}
+.c-teal {
+    background-color: var(--#{$prefix}-teal) !important;
+}
+.c-green {
+    background-color: var(--#{$prefix}-green) !important;
+}
+.c-maroon {
+    background-color: var(--#{$prefix}-maroon) !important;
+}

web/static/chart_functions.js

@@ -144,11 +144,6 @@ function sparkline_summary_chart(jsonData, element) {
 
 function fill_charts() {
     document.querySelectorAll(".chartjs-chart").forEach(function (el) {
-        fill_chart(el);
-    });
-}
-
-function fill_chart(el) {
         var url = el.dataset.chartEndpoint;
         var type = el.dataset.chartType;
 
@@ -168,6 +163,8 @@ function fill_chart(el) {
         }).catch(error => {
             console.error("Unable to set up chart: ", error)
         });
+        
+    });
 }
 
-export {fill_charts, fill_chart}
+export {fill_charts}

web/static/index.js

@@ -1,4 +1,4 @@
-import {fill_charts, fill_chart} from "./chart_functions.js";
+import {fill_charts} from "./chart_functions.js";
 import {register_dropdowns} from "./dropdowns.js";
 
 
@@ -33,7 +33,7 @@ function register_nav_links() {
 
 function register_handlers() {
     register_nav_links();
-    //fill_charts();
+    fill_charts();
     register_dropdowns();
 }
 
@@ -57,4 +57,4 @@ const trigger_table_animation = debounce(load_in_table, 100);
 
 const trigger_reset_handlers = debounce(register_handlers, 200);
 
-export {trigger_reset_handlers, trigger_table_animation, fill_chart};
+export {trigger_reset_handlers, trigger_table_animation};

web/templates/index.html

@@ -61,34 +61,15 @@
     </div>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js" integrity="sha512-CQBWl4fJHWbryGE+Pc7UAxWMUMNMWzWxF4SQo9CgkJIN1kx6djDQZjh3Y8SZ1d+6I+1zze6Z7kHXO7q3UyZAWw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
         <script type="module">
-            import {trigger_reset_handlers, trigger_table_animation, fill_chart} from "/static/index.js";
-            htmx.onLoad(function (element) {
+            import {trigger_reset_handlers, trigger_table_animation} from "/static/index.js";
             feather.replace();
-                if (element.dataset.mainBody) {
-                    trigger_reset_handlers();
-                }
+            htmx.onLoad(function (element) {
                 if (element.localName === "tr") {
                     trigger_table_animation();
-                } 
-                
-                if (element.querySelectorAll("canvas").length > 0) {
-                    element.querySelectorAll("canvas").forEach(function (el) {
-                        fill_chart(el);
-                    });
-                }
-            });
-            document.body.addEventListener('htmx:beforeSwap', function (event) {
-                // Get the target element where content will be replaced
-                var target = event.detail.target;
-
-                // Check if the target has Chart.js charts
-                var charts = target.querySelectorAll('.chartjs-chart');
-                charts.forEach(function (chart) {
-                    // Destroy each Chart.js chart before swapping content
-                    Chart.getChart(chart).destroy();
-                });
-            });
+                } else {
                     trigger_reset_handlers();
+                }
+            });
         </script>
 </body>
 </html>

web/transactions.templ

@@ -2,7 +2,7 @@ package web
 
 templ transactions_page(userID int, accounts *[]string) {
     <title>Transactions</title>
-    <div class="d-flex-col mx-4 h-100" data-main-body="true">
+    <div class="d-flex-col mx-4 h-100">
         <div class="c-crust row cr-all p-5" style="height: fit-content">
             <button 
             class="borderless-btn dropdown-button"
@@ -59,14 +59,6 @@ templ transactions_page(userID int, accounts *[]string) {
             <button class="ms-5 borderless-btn">
                 <span class="my-auto mx-3">No Filters</span>
             </button>
-
-            <button
-                class="borderless-btn ms-auto me-3 c-green ch-teal"
-                style="color: var(--pf-bg);"
-            >
-                <i class="" data-feather="plus"></i>
-                Add New
-            </button>
         </div>
 
         <div class="row mt-5">