From 0e749e5afbb618f22c9dce4e4e4792078179e641 Mon Sep 17 00:00:00 2001
From: Nickiel12 <nicholasyoungsumner@gmail.com>
Date: Tue, 23 Jan 2024 19:20:33 -0800
Subject: [PATCH] updated color classes

---
 web/dashboard.templ     | 18 +++++++++---------
 web/sass/variables.scss | 26 +++++++-------------------
 web/transactions.templ  | 10 +++++++++-
 3 files changed, 25 insertions(+), 29 deletions(-)

diff --git a/web/dashboard.templ b/web/dashboard.templ
index 1bb2944..f4fad21 100644
--- a/web/dashboard.templ
+++ b/web/dashboard.templ
@@ -2,13 +2,13 @@ package web
 
 templ dashboard() {
     <title>Dashboard</title>
-    <div class="container"> 
+    <div class="container" data-main-body="true"> 
         <div class="row" style="margin-top: -20px">
             <div class="c-crust col card mx-auto cr-all d-flex-col">
-                <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 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>
                 <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-s1" style="overflow-y: scroll">
+                    <div class="w-50 c-surface1" 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-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 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>
             </div>
         </div>
diff --git a/web/sass/variables.scss b/web/sass/variables.scss
index 6bbb8c5..bdd50f7 100644
--- a/web/sass/variables.scss
+++ b/web/sass/variables.scss
@@ -29,7 +29,13 @@
     }
 }
 
-.c-text {
+@each $color, $_ in map-get(catppuccin.$palette, 'latte') {
+    .c-#{$color} {
+        background-color: var(--#{$prefix}-#{$color}) !important;
+    }
+}
+
+.tc-text {
     color: var(--#{$prefix}-text);
 }
 .c-s0 {
@@ -38,21 +44,3 @@
 .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;
-}
diff --git a/web/transactions.templ b/web/transactions.templ
index 4722a4d..9fd4a6f 100644
--- a/web/transactions.templ
+++ b/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">
+    <div class="d-flex-col mx-4 h-100" data-main-body="true">
         <div class="c-crust row cr-all p-5" style="height: fit-content">
             <button 
             class="borderless-btn dropdown-button"
@@ -59,6 +59,14 @@ 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">