some stuff with button styeling

web/sass/buttons.scss

@@ -0,0 +1,73 @@
+
+@mixin btn() {
+    display: flex;
+    font-size: 1em;
+    border: none;
+    padding: 10px 15px 10px 15px;
+    border-radius: 20px;
+    transition: all 0.1s linear;
+    cursor: pointer;
+}
+
+.btn {
+    @include btn;
+}
+
+.btn.invert {
+    color: var(--#{$prefix}-base) !important;
+}
+.btn.invert:hover {
+    color: var(--#{$prefix}-text) !important;
+}
+
+.btn-sm {
+    @include btn;
+    padding: 4px 8px 4px 8px;
+    svg {
+        width: 20px;
+        height: 20px;
+    }
+}
+
+.btn.btn-sm {
+    padding: 4px 8px 4px 8px;
+    svg {
+        width: 20px;
+        height: 20px;
+    }
+}
+
+.borderless-btn {
+    @include btn;
+    color: var(--#{$prefix}-text);
+    background-color: var(--#{$prefix}-surface2);
+}
+.borderless-btn:hover {
+    background-color: var(--#{$prefix}-overlay1);
+    color: var(--#{$prefix}-nav-active-color);
+}
+
+.exit-btn {
+    @include btn;
+    color: var(--#{$prefix}-text);
+    padding: 11px 11px 11px 11px;
+    border-radius: $border-radius;
+    background-color: var(--#{$prefix}-crust);
+    height: fit-content;
+    width: fit-content;
+}
+.exit-btn:hover {
+    background-color: var(--#{$prefix}-surface0);
+}
+
+
+$colors: (
+    "green",
+);
+
+@each $color in $colors {
+    .btn.#{$color} {
+        background-color: var(--#{$prefix}-#{$color});
+    }
+}
+

web/sass/mixins.scss

@@ -1,9 +1 @@
-@mixin button_link() {
+
-    cursor: pointer;
-    background-color: transparent;
-    background-repeat: no-repeat;
-    border: none;
-    overflow: hidden;
-    outline: none;
-    border-radius: 5px;
-}

web/sass/site.scss

@@ -9,6 +9,7 @@ $border-radius: 8px;
 @import 'utility-classes';
 @import 'mixins';
 @import 'nav';
+@import 'buttons';
 
 
 body {

web/sass/utility-classes.scss

@@ -106,13 +106,6 @@ $w_h_sizes: (
     text-align: center;
 }
 
-.btn-c-invert {
-    color: var(--#{$prefix}-base) !important;
-}
-.btn-c-invert:hover {
-    color: var(--#{$prefix}-text) !important;
-}
-
 .positive {
     color: var(--#{$prefix}-green);
 }
@@ -120,43 +113,6 @@ $w_h_sizes: (
     color: var(--#{$prefix}-red);
 }
 
-.borderless-btn.btn-sm {
-    padding: 4px 8px 4px 8px;
-}
-
-.borderless-btn {
-    display: flex;
-    color: var(--#{$prefix}-text);
-    font-size: 1em;
-    border: none;
-    padding: 10px 15px 10px 15px;
-    border-radius: 20px;
-    background-color: var(--#{$prefix}-surface2);
-    transition: all 0.1s linear;
-    cursor: pointer;
-}
-.borderless-btn:hover {
-    background-color: var(--#{$prefix}-overlay1);
-    color: var(--#{$prefix}-nav-active-color);
-}
-
-.exit-btn {
-    display: flex;
-    color: var(--#{$prefix}-text);
-    font-size: 1em;
-    border: none;
-    padding: 11px 11px 11px 11px;
-    border-radius: $border-radius;
-    background-color: var(--#{$prefix}-crust);
-    transition: all 0.1s linear;
-    cursor: pointer;
-    height: fit-content;
-    width: fit-content;
-}
-.exit-btn:hover {
-    background-color: var(--#{$prefix}-surface0);
-}
-
 table.table {
     color: var(--#{$prefix}-text);
     td {
@@ -214,29 +170,28 @@ table.table-striped {
     border-width: thin;
     transition: max-height 0.2s linear;
 
-    input {
+}
-        width: 5em;
+
+.input {
+    width: 10em;
     font-size: 1em;
     margin-left: 10px;
     margin-right: 10px;
     border-radius: $border-radius;
     border-style: solid;
     border-color: var(--#{$prefix}-text);
-    }
+    padding-top: 2px;
+    padding-bottom: 3px;
 }
 
 .select {
     border: none;
     font-size: 1em;
     border-radius: $border-radius;
-    background-color: var(--#{$prefix}-mantle);
+    background-color: var(--#{$prefix}-base);
     color: var(--#{$prefix}-text);
 }
 
 .select.border {
     border: 2pt solid var(--#{$prefix}-text);
 }
-
-.select.light {
-    background-color: var(--#{$prefix}-base);
-}

web/templates/new_transaction_pane.templ

@@ -19,18 +19,54 @@ templ NewTransactionPane(entry_types *[]types.QuickTransactionType, acnts *[]typ
                 </button>
             }
         </div>
-        <div class="c-mantle cr-all m-5 d-flex" style="height:85%">
+        <div class="c-mantle cr-all m-5 container" style="height: 85%;">
+            <div class="row mt-5">
                 <div class="p-5 mx-auto">
-                <label for="acnt-selection" id="acnt-selection-label">Account: </label>
+                    <label for="acnt-entry-selection" id="acnt-entry-label">
-                <select class="ms-2 select light border" id="acnt-selection" value="">
+                        Account:
+                    </label>
+                    <select class="ms-2 select border" id="acnt-entry-selection">
                         for _, value := range *acnts {
                         <option value={strconv.Itoa(value.Id)}>{value.DisplayName.String}</option>
                         }
                     </select>
                 </div>
+                <div class="p-5 mx-auto" style="height: fit-content;">
+                    <label>
+                        Date:
+                        <input class="input" id="date-entry" type="date" />
+                    </label>
+                </div>
+                <div class="p-5 mx-auto" style="height: fit-content;">
+                    <label>
+                        Amount:
+                        <input class="input" id="amount-entry" type="number" step="any" />
+                    </label>
+                </div>
+            </div>
+            <div class="row">
                 <div class="p-5 mx-auto">
-                <label for="acnt-date" id="data-selection-label">Date: </label>
+                    <label>
-                <input id="acnt-date" type="date" />
+                        Tag:
+                        <input class="input" id="trans-tab-entry" type="text" disabled="disabled" />
+                    </label>
+                </div>
+            </div>
+            <div class="row">
+                <div class="ms-5 d-flex">
+                    <h2>Breakdown</h2>
+                    <button class="btn-sm ms-5 my-auto positive">
+                        <i class="" data-feather="plus"></i>
+                        <span class="my-auto pe-2">New</span>
+                    </button>
+                    <button class="btn-sm ms-5 my-auto positive">
+                        <i class="" data-feather="plus"></i>
+                        <span class="my-auto pe-2">Tax</span>
+                    </button>
+                </div>
+            </div>
+            <div class="row" style="flex-grow: 1">
+
             </div>
         </div>
     </div>

web/templates/transactions.templ

@@ -19,25 +19,25 @@ templ TransactionsPage(userID int, accounts *[]string) {
                     <select class="select-swapout select">
                         <option data-select-div="filter-accounts">Account</option>
                         <option data-select-div="filter-two-inputs">Amount</option>
-                        <option data-select-div="filter-two-inputs">Date</option>
+                        <option data-select-div="filter-between-dates">Date</option>
                         <option data-select-div="filter-contains">Description</option>
                         <option data-select-div="filter-two-inputs">ID</option>
                     </select>
                     <div id="filter-two-inputs" class="d-flex" style="display: none;">
-                        <input type="text"></input>
+                        <input class="input" type="text"></input>
                         <select class="ms-2 select">
                             <option>></option>
                             <option>=</option>
                             <option>{"<"}</option>
                         </select>
-                        <input class="ms-2" type="text"></input>
+                        <input class="ms-2 input" type="text"></input>
                     </div>
                     <div id="filter-contains" class="d-flex" style="display: none;">
                         <select class="ms-2 select">
                             <option>Contains</option>
                             <option>Does Not Contain</option>
                         </select>
-                        <input class="ms-2" type="text"></input>
+                        <input class="ms-2 input" type="text"></input>
                     </div>
                     <div id="filter-accounts" class="d-flex">
                         <select class="ms-2 select">
@@ -49,8 +49,17 @@ templ TransactionsPage(userID int, accounts *[]string) {
                         }
                         </select>
                     </div>
+                    <div id="filter-between-dates" class="d-flex" style="display: none;">
+                        <input class="input" type="date"></input>
+                        <select class="ms-2 select">
+                            <option>></option>
+                            <option>=</option>
+                            <option>{"<"}</option>
+                        </select>
+                        <input class="ms-2 input" type="date"></input>
+                    </div>
                     <button 
-                        class="cr-all ms-3 borderless-btn btn-sm btn-c-invert c-green"
+                        class="cr-all ms-3 btn btn-sm invert c-green"
                     >Add
                     </button>
                 </div>