diff --git a/barker/barker/routers/reports/beer_sale_report.py b/barker/barker/routers/reports/beer_sale_report.py
index 675ab38..cd4e1c7 100644
--- a/barker/barker/routers/reports/beer_sale_report.py
+++ b/barker/barker/routers/reports/beer_sale_report.py
@@ -83,7 +83,7 @@ def beer_consumption(
for date_, name, quantity in list_:
if name not in headers:
headers.append(name)
- old = next((d for d in data if d.date_ == date_.date()), None)
+ old = next((d for d in data if d.date_ == date_), None)
if old:
old[name] = quantity
else:
diff --git a/bookie/src/index.html b/bookie/src/index.html
index 33f6aec..34214cf 100644
--- a/bookie/src/index.html
+++ b/bookie/src/index.html
@@ -8,7 +8,7 @@
-
+
diff --git a/bookie/src/layout.sass b/bookie/src/layout.sass
new file mode 100644
index 0000000..ed4ceed
--- /dev/null
+++ b/bookie/src/layout.sass
@@ -0,0 +1,50 @@
+.flex-auto
+ flex: 1 1 auto
+
+.basis-15
+ flex-basis: 15%
+
+.basis-1-6
+ flex-basis: 16.67%
+
+.basis-1-5
+ flex-basis: 20%
+
+.basis-1-4
+ flex-basis: 25%
+
+.basis-30
+ flex-basis: 30%
+
+.basis-1-3
+ flex-basis: 33.33%
+
+.basis-2-5
+ flex-basis: 40%
+
+.basis-1-2
+ flex-basis: 50%
+
+.basis-3-4
+ flex-basis: 75%
+
+.basis-4-5
+ flex-basis: 80%
+
+.row-container
+ display: flex
+ flex-direction: row
+ align-items: center
+ gap: 20px // sets 20px space between all children
+
+.space-between
+ justify-content: space-between
+
+.spacer
+ flex: 1 1 auto
+
+.center
+ text-align: center
+
+.warn
+ background-color: red
diff --git a/bookie/src/square-buttons.sass b/bookie/src/square-buttons.sass
new file mode 100644
index 0000000..623972d
--- /dev/null
+++ b/bookie/src/square-buttons.sass
@@ -0,0 +1,63 @@
+// square-buttons.sass
+
+@use 'sass:color'
+@use 'sass:math'
+@use 'sass:map'
+@use '@angular/material' as mat
+
+@function get-on-color($background)
+ $r: math.div(color.channel($background, "red", $space: rgb), 255)
+ $g: math.div(color.channel($background, "green", $space: rgb), 255)
+ $b: math.div(color.channel($background, "blue", $space: rgb), 255)
+ $l: 0.2126 * $r + 0.7152 * $g + 0.0722 * $b
+
+ @if ($l > 0.5)
+ @return #000
+ @else
+ @return #fff
+
+.square-button
+ min-width: 150px
+ max-width: 150px
+ min-height: 150px
+ max-height: 150px
+ cursor: pointer
+ h3
+ text-align: center
+ padding: 0.5rem
+ span
+ text-align: center
+
+.square-button.primary
+ $sbp: map.get(mat.$violet-palette, 70)
+ color: get-on-color($sbp) !important
+ background: $sbp !important
+
+.square-button.strong-primary
+ $sbsp: map.get(mat.$violet-palette, 20)
+ color: get-on-color($sbsp) !important
+ background: $sbsp !important
+
+.accent
+ $a: map.get(mat.$orange-palette, 70)
+ color: get-on-color($a) !important
+ background: $a !important
+
+.strong-accent
+ $sa: map.get(mat.$orange-palette, 20)
+ color: get-on-color($sa) !important
+ background: $sa !important
+
+.square-button.warn
+ $sbw: map.get(mat.$red-palette, 70)
+ color: get-on-color($sbw) !important
+ background: $sbw !important
+
+.square-button.strong-warn
+ $sbsw: map.get(mat.$red-palette, 20)
+ color: get-on-color($sbsw) !important
+ background: $sbsw !important
+
+.square-button.disabled
+ color: var(--mat-sys-on-outline) !important
+ background: var(--mat-sys-outline) !important
diff --git a/bookie/src/styles.sass b/bookie/src/styles.sass
index 69f8be3..2eb8a8d 100644
--- a/bookie/src/styles.sass
+++ b/bookie/src/styles.sass
@@ -1,24 +1,16 @@
-/* You can add global styles to this file, and also import other style files */
-@use 'sass:color'
-@use 'sass:math'
-@use 'sass:map'
@use '@angular/material' as mat
-@tailwind base
-@tailwind components
-@tailwind utilities
+
+// Import your square button styles (adjust path if needed)
+@use 'square-buttons'
+@use 'layout'
+
+// @tailwind base
+// @tailwind components
+// @tailwind utilities
+
@include mat.core()
-@function get-on-color($background)
- $r: math.div(color.channel($background, "red", $space: rgb), 255)
- $g: math.div(color.channel($background, "green", $space: rgb), 255)
- $b: math.div(color.channel($background, "blue", $space: rgb), 255)
- $l: 0.2126 * $r + 0.7152 * $g + 0.0722 * $b
-
- @if ($l > 0.5)
- @return #000
- @else
- @return #fff
html
@@ -31,10 +23,11 @@ html
),
typography: (
plain-family: Roboto,
- brankd-family: Roboto
+ brand-family: Roboto
),
density: 0
))
+ font-family: "Helvetica Neue", Montserrat, sans-serif
html,
body
@@ -44,64 +37,6 @@ a
color: rgb(0, 0, 238)
text-decoration: underline
-.basis-15
- flex-basis: 15%
-
-.basis-1-6
- flex-basis: 16.67%
-
-.basis-1-5
- flex-basis: 20%
-
-.basis-1-4
- flex-basis: 25%
-
-.basis-30
- flex-basis: 30%
-
-.basis-1-3
- flex-basis: 33.33%
-
-.basis-2-5
- flex-basis: 40%
-
-.basis-1-2
- flex-basis: 50%
-
-.basis-3-4
- flex-basis: 75%
-
-.basis-4-5
- flex-basis: 80%
-
-.row-container
- display: flex
- flex-direction: row
- align-items: center
- gap: 20px // sets 20px space between all children
-
-.space-between
- justify-content: space-between
-
-.spacer
- flex: 1 1 auto
-
-
-
-
-.square-button
- min-width: 150px
- max-width: 150px
- min-height: 150px
- max-height: 150px
- cursor: pointer
- // margin: 20px
- h3
- text-align: center
- padding: 0.5rem
- span
- text-align: center
-
.center
text-align: center
@@ -115,37 +50,3 @@ button.mat-primary
button.mat-warn
background: var(--mat-sys-error) !important
color: var(--mat-sys-on-error) !important
-
-.square-button.primary
- $sbp: map.get(mat.$violet-palette, 70)
- color: get-on-color($sbp) !important
- background: $sbp !important
-
-.square-button.strong-primary
- $sbsp: map.get(mat.$violet-palette, 20)
- color: get-on-color($sbsp) !important
- background: $sbsp !important
-
-.accent
- $a: map.get(mat.$orange-palette, 70)
- color: get-on-color($a) !important
- background: $a !important
-
-.strong-accent
- $sa: map.get(mat.$orange-palette, 20)
- color: get-on-color($sa) !important
- background: $sa !important
-
-.square-button.warn
- $sbw: map.get(mat.$red-palette, 70)
- color: get-on-color($sbw) !important
- background: $sbw !important
-
-.square-button.strong-warn
- $sbsw: map.get(mat.$red-palette, 20)
- color: get-on-color($sbsw) !important
- background: $sbsw !important
-
-.square-button.disabled
- color: var(--mat-sys-on-outline) !important
- background: var(--mat-sys-outline) !important