updated color classes
This commit is contained in:
parent
60d2743ade
commit
0e749e5afb
3 changed files with 25 additions and 29 deletions
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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">
|
||||
|
|
Loading…
Reference in a new issue