Recount/Recount-Server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

updated color classes

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

18
web/dashboard.templ
View file

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

26
web/sass/variables.scss
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); color: var(--#{$prefix}-text);
} }
.c-s0 { .c-s0 {
@ -38,21 +44,3 @@
.c-s1 { .c-s1 {
background-color: var(--#{$prefix}-surface1); 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;
}

10
web/transactions.templ
View file

@ -2,7 +2,7 @@ package web
templ transactions_page(userID int, accounts *[]string) { templ transactions_page(userID int, accounts *[]string) {
<title>Transactions</title> <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"> <div class="c-crust row cr-all p-5" style="height: fit-content">
<button <button
class="borderless-btn dropdown-button" class="borderless-btn dropdown-button"
@ -59,6 +59,14 @@ templ transactions_page(userID int, accounts *[]string) {
<button class="ms-5 borderless-btn"> <button class="ms-5 borderless-btn">
<span class="my-auto mx-3">No Filters</span> <span class="my-auto mx-3">No Filters</span>
</button> </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>
<div class="row mt-5"> <div class="row mt-5">