From 997df7cf7c3a1a8fab781ab30c64d3ec0eb64e3b Mon Sep 17 00:00:00 2001
From: Simon Vieille <simon@deblan.fr>
Date: Wed, 13 Nov 2024 17:56:10 +0100
Subject: [PATCH] update ui

---
 frontend/js/App.vue                   |  2 +-
 frontend/js/chart/monthThreshold.js   |  1 +
 frontend/scss/main.scss               | 16 ++++++++--------
 web/view/template/auth/login.templ    | 14 ++++++++++----
 web/view/template/auth/login_templ.go |  2 +-
 5 files changed, 21 insertions(+), 14 deletions(-)
diff --git a/frontend/js/App.vue b/frontend/js/App.vue
index 346047b..10abc5e 100644
--- a/frontend/js/App.vue
+++ b/frontend/js/App.vue
@@ -5,7 +5,7 @@ import { BNavItem } from 'bootstrap-vue-next'
 
 <template>
   <main class="d-flex flex-nowrap">
-    <div class="d-flex flex-column flex-shrink-0 p-3 text-bg-dark bg-body-tertiary" id="nav">
+    <div class="d-flex flex-column flex-shrink-0 p-3" id="nav">
       <a href="/" class="mb-4 text-white text-decoration-none text-center">
         <span class="fs-4">
           <i class="fa-solid fa-coins"></i>
diff --git a/frontend/js/chart/monthThreshold.js b/frontend/js/chart/monthThreshold.js
index 4a02f47..95ed4d5 100644
--- a/frontend/js/chart/monthThreshold.js
+++ b/frontend/js/chart/monthThreshold.js
@@ -16,6 +16,7 @@ const getDate = (value) => {
 const compute = (transactions, cats, dateFrom, dateTo) => {
   let categories = {}
   let datas = {}
+  transactions = transactions.reverse()
 
   cats.forEach((value) => {
     if (value.month_threshold > 0) {
diff --git a/frontend/scss/main.scss b/frontend/scss/main.scss
index 85752c6..561dcd7 100644
--- a/frontend/scss/main.scss
+++ b/frontend/scss/main.scss
@@ -12,7 +12,7 @@ $theme-colors: (
 );
 
 $pagination-active-bg: map-get($theme-colors, 'secondary');
-$nav-pills-link-active-bg: map-get($theme-colors, 'secondary');
+$nav-pills-link-active-bg: darken(map-get($theme-colors, 'primary'), 5%);
 
 @import "~bootstrap/scss/bootstrap";
 @import "~bootstrap-vue-next/dist/bootstrap-vue-next.css";
@@ -21,15 +21,15 @@ $nav-pills-link-active-bg: map-get($theme-colors, 'secondary');
 $light-grey: #e9ecef;
 
 #app-name {
-  padding-left: 5px;
+  padding-left: 8px;
 }
 
-.bg-body-tertiary {
-  background-color: map-get($theme-colors, 'primary') !important;
-}
+#login-form {
+  background: linear-gradient(-45deg, map-get($theme-colors, 'primary') 50%, map-get($theme-colors, 'secondary') 100%);
 
-.gradient-custom {
-  background: linear-gradient(to right, rgba(106, 17, 203, 1), rgba(37, 117, 252, 1));
+  .card {
+    background: linear-gradient(-45deg, darken(map-get($theme-colors, 'primary'), 10%) 50%, map-get($theme-colors, 'secondary') 100%);
+  }
 }
 
 .cursor {
@@ -47,6 +47,7 @@ $nav-size-sm: 50px;
 
 #nav {
   width: $nav-size;
+  background: map-get($theme-colors, 'primary');
 
   i {
     width: 20px;
@@ -61,7 +62,6 @@ $nav-size-sm: 50px;
   transition: transform .2s, box-shadow .2s;
 
   &:hover {
-    transform: scale(1.005);
     box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
   }
 }
diff --git a/web/view/template/auth/login.templ b/web/view/template/auth/login.templ
index 26e806e..fb9572d 100644
--- a/web/view/template/auth/login.templ
+++ b/web/view/template/auth/login.templ
@@ -7,13 +7,19 @@ templ Page(hasError bool) {
 	<html>
 		@template.Head("Login")
 		<body>
-			<section class="vh-100 gradient-custom">
+			<section class="vh-100" id="login-form">
 				<div class="container py-5 h-100">
 					<div class="row d-flex justify-content-center align-items-center h-100">
 						<div class="col-12 col-md-8 col-lg-6 col-xl-5">
-							<div class="card bg-dark text-white" style="border-radius: 1rem;">
-								<div class="card-body p-5">
-									<div class="mb-md-5 mt-md-4 pb-5">
+							<div class="card text-white" style="border-radius: 1rem;">
+								<div class="card-body py-2 px-5">
+									<div class="mb-md-5 mt-md-4">
+										<div class="text-center pb-4">
+											<span class="fs-4">
+												<i class="fa-solid fa-coins"></i>
+												<span id="app-name">Budget</span>
+											</span>
+										</div>
 										<form action="/login" method="POST">
 											if hasError {
 												<div class="alert alert-danger">
diff --git a/web/view/template/auth/login_templ.go b/web/view/template/auth/login_templ.go
index 489c961..1df6fff 100644
--- a/web/view/template/auth/login_templ.go
+++ b/web/view/template/auth/login_templ.go
@@ -39,7 +39,7 @@ func Page(hasError bool) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<body><section class=\"vh-100 gradient-custom\"><div class=\"container py-5 h-100\"><div class=\"row d-flex justify-content-center align-items-center h-100\"><div class=\"col-12 col-md-8 col-lg-6 col-xl-5\"><div class=\"card bg-dark text-white\" style=\"border-radius: 1rem;\"><div class=\"card-body p-5\"><div class=\"mb-md-5 mt-md-4 pb-5\"><form action=\"/login\" method=\"POST\">")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<body><section class=\"vh-100\" id=\"login-form\"><div class=\"container py-5 h-100\"><div class=\"row d-flex justify-content-center align-items-center h-100\"><div class=\"col-12 col-md-8 col-lg-6 col-xl-5\"><div class=\"card text-white\" style=\"border-radius: 1rem;\"><div class=\"card-body py-2 px-5\"><div class=\"mb-md-5 mt-md-4\"><div class=\"text-center pb-4\"><span class=\"fs-4\"><i class=\"fa-solid fa-coins\"></i> <span id=\"app-name\">Budget</span></span></div><form action=\"/login\" method=\"POST\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
