updated color classes

This commit is contained in:
Nickiel12 2024-01-23 19:20:33 -08:00
parent 60d2743ade
commit 0e749e5afb
3 changed files with 25 additions and 29 deletions

View file

@ -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>

View file

@ -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;
}

View file

@ -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">