From d809dcb361c48de24d47b4f8bb67bc13154cbf5c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Gruszczy=C5=84ski?=
 <mateusz.gruszczynski@firma.interia.pl>
Date: Tue, 30 Sep 2025 22:07:13 +0200
Subject: [PATCH] poprawki ux

---
 templates/list.html       | 37 ++++++++++++++++++-------------------
 templates/list_share.html | 19 +++++++++++--------
 2 files changed, 29 insertions(+), 27 deletions(-)

diff --git a/templates/list.html b/templates/list.html
index c5b3109..4e9d054 100644
--- a/templates/list.html
+++ b/templates/list.html
@@ -18,19 +18,19 @@
     </span>
     {% endfor %}
     <!-- PRZYCISK DO MODALA KATEGORII -->
-    <button class="btn btn-sm btn-outline-info ms-2" data-bs-toggle="modal" data-bs-target="#categoriesModal">
+    <button class="btn btn-sm btn-outline-light ms-2" data-bs-toggle="modal" data-bs-target="#categoriesModal">
       ✏️ Zmień kategorie
     </button>
     {% else %}
     <!-- ZAMIAST LINKU: OTWARCIE MODALA KATEGORII -->
-    <button class="btn btn-sm btn-outline-info ms-2" data-bs-toggle="modal" data-bs-target="#categoriesModal">
+    <button class="btn btn-sm btn-outline-light ms-2" data-bs-toggle="modal" data-bs-target="#categoriesModal">
       ➕ Dodaj kategorię
     </button>
     {% endif %}
   </h2>
 </div>
 
-<a href="{{ request.url_root }}share/{{ list.share_token }}" class="btn btn-primary btn-sm w-100 mb-3" {% if not
+<a href="{{ request.url_root }}share/{{ list.share_token }}" class="btn btn-outline-primary btn-sm w-100 mb-3" {% if not
   list.is_public %}disabled{% endif %}>
   ✅ Otwórz tryb zakupowy / odznaczania produktów
 </a>
@@ -47,7 +47,7 @@
       </span>
     </div>
     <div class="d-flex flex-column flex-md-row gap-2">
-      <button id="copyBtn" class="btn btn-success btn-sm flex-fill"
+      <button id="copyBtn" class="btn btn-outline-success btn-sm flex-fill"
         onclick="copyLink('{{ request.url_root }}share/{{ list.share_token }}')">
         📋 Skopiuj / Udostępnij
       </button>
@@ -58,7 +58,8 @@
       </button>
 
       <!-- ZAMIAST LINKU: OTWARCIE MODALA NADAWANIA DOSTĘPU -->
-      <button class="btn btn-outline-info btn-sm flex-fill" data-bs-toggle="modal" data-bs-target="#grantAccessModal">
+      <button class="btn btn-outline-primary btn-sm flex-fill" data-bs-toggle="modal"
+        data-bs-target="#grantAccessModal">
         ➕ Nadaj dostęp
       </button>
     </div>
@@ -171,7 +172,8 @@
         placeholder="Dodaj produkt i ilość" required>
       <input type="number" id="newQuantity" name="quantity" class="form-control bg-dark text-white border-secondary"
         placeholder="Ilość" min="1" value="1" style="max-width: 90px;">
-      <button type="button" class="btn btn-success rounded-end" onclick="addItem({{ list.id }})">➕ Dodaj</button>
+      <button type="button" class="btn btn-outline-success rounded-end" onclick="addItem({{ list.id }})">➕
+        Dodaj</button>
     </div>
   </div>
 </div>
@@ -199,10 +201,10 @@
 
 <!-- MODAL: KATEGORIA (pojedynczy wybór) -->
 <div class="modal fade" id="categoriesModal" tabindex="-1" aria-labelledby="categoriesModalLabel" aria-hidden="true">
-  <div class="modal-dialog">
-    <div class="modal-content bg-dark text-white border-secondary">
+  <div class="modal-dialog modal-lg modal-dialog-scrollable">
+    <div class="modal-content bg-dark text-white">
       <div class="modal-header">
-        <h5 class="modal-title" id="categoriesModalLabel">🏷️ Ustaw kategorię</h5>
+        <h5 class="modal-title" id="grantAccessModalLabel">Ustaw kategorię</h5>
         <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Zamknij"></button>
       </div>
 
@@ -227,8 +229,8 @@
 
         <div class="modal-footer justify-content-end">
           <div class="btn-group" role="group">
-            <button type="button" class="btn btn-sm btn-outline-light" data-bs-dismiss="modal">Anuluj</button>
-            <button type="submit" class="btn btn-sm btn-outline-light">Zapisz</button>
+            <button type="button" class="btn btn-sm btn-outline-light" data-bs-dismiss="modal">❌ Anuluj</button>
+            <button type="submit" class="btn btn-sm btn-outline-light">💾 Zapisz</button>
           </div>
         </div>
       </form>
@@ -237,16 +239,14 @@
   </div>
 </div>
 
-
 <!-- MODAL: NADAWANIE DOSTĘPU -->
 <div class="modal fade" id="grantAccessModal" tabindex="-1" aria-labelledby="grantAccessModalLabel" aria-hidden="true">
-  <div class="modal-dialog">
-    <div class="modal-content bg-dark text-white border-secondary">
+  <div class="modal-dialog modal-lg modal-dialog-scrollable">
+    <div class="modal-content bg-dark text-white">
       <div class="modal-header">
         <h5 class="modal-title" id="grantAccessModalLabel">Nadaj dostęp użytkownikowi</h5>
         <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Zamknij"></button>
       </div>
-
       <form method="post" action="{{ url_for('list_settings', list_id=list.id) }}" class="m-0">
         <div class="modal-body">
           <label for="grant_username" class="form-label">Login użytkownika</label>
@@ -259,8 +259,8 @@
 
         <div class="modal-footer justify-content-end">
           <div class="btn-group" role="group">
-            <button type="button" class="btn btn-sm btn-outline-light" data-bs-dismiss="modal">Anuluj</button>
-            <button type="submit" class="btn btn-sm btn-outline-light">Dodaj</button>
+            <button type="button" class="btn btn-sm btn-outline-light" data-bs-dismiss="modal">❌ Anuluj</button>
+            <button type="submit" class="btn btn-sm btn-outline-light">💾 Zapisz</button>
           </div>
         </div>
       </form>
@@ -269,7 +269,6 @@
   </div>
 </div>
 
-
 <div class="modal fade" id="massAddModal" tabindex="-1" aria-labelledby="massAddModalLabel" aria-hidden="true">
   <div class="modal-dialog modal-lg modal-dialog-scrollable">
     <div class="modal-content bg-dark text-white">
@@ -286,7 +285,7 @@
         <ul id="mass-add-list" class="list-group"></ul>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-outline-light" data-bs-dismiss="modal">Zamknij</button>
+        <button type="button" class="btn btn-outline-light btn-sm" data-bs-dismiss="modal">Zamknij</button>
       </div>
     </div>
   </div>
diff --git a/templates/list_share.html b/templates/list_share.html
index 98dfd83..beae71b 100644
--- a/templates/list_share.html
+++ b/templates/list_share.html
@@ -112,8 +112,8 @@
     not current_user.is_authenticated %}disabled{% endif %}>
   <input id="newQuantity" type="number" class="form-control bg-dark text-white border-secondary" placeholder="Ilość"
     min="1" value="1" style="max-width: 90px;" {% if not current_user.is_authenticated %}disabled{% endif %}>
-  <button onclick="addItem({{ list.id }})" class="btn btn-success rounded-end" {% if not current_user.is_authenticated
-    %}disabled{% endif %}>➕ Dodaj</button>
+  <button onclick="addItem({{ list.id }})" class="btn btn-outline-success rounded-end" {% if not
+    current_user.is_authenticated %}disabled{% endif %}>➕ Dodaj</button>
 </div>
 {% endif %}
 
@@ -123,9 +123,8 @@
 <div class="input-group mb-2">
   <input id="expenseAmount" type="number" step="0.01" min="0" class="form-control bg-dark text-white border-secondary"
     placeholder="Kwota (PLN)">
-  <button onclick="submitExpense({{ list.id }})" class="btn btn-success rounded-end">💾 Zapisz</button>
-</div>
-{% endif %}
+  <button onclick="submitExpense({{ list.id }})" class="btn btn-outline-primary rounded-end">💾 Zapisz</button>
+</div>{% endif %}
 <p id="total-expense2"><b>💸 Łącznie wydano:</b> {{ '%.2f'|format(total_expense) }} PLN</p>
 
 <button id="toggleReceiptBtn" class="btn btn-outline-light mb-3 w-100 w-md-auto d-block mx-auto" type="button"
@@ -216,19 +215,23 @@
 
 <!-- Modal notatki -->
 <div class="modal fade" id="noteModal" tabindex="-1" aria-hidden="true">
-  <div class="modal-dialog">
+  <div class="modal-dialog modal-lg modal-dialog-scrollable">
     <div class="modal-content bg-dark text-white">
       <div class="modal-header">
         <h5 class="modal-title">Dodaj notatkę</h5>
         <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Zamknij"></button>
       </div>
+
       <form id="noteForm" onsubmit="submitNote(event)">
         <div class="modal-body">
           <textarea id="noteText" class="form-control" rows="4" placeholder="Np. 'Promocja 2+2'"></textarea>
         </div>
         <div class="modal-footer">
-          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Anuluj</button>
-          <button type="submit" class="btn btn-outline-success">💾 Zapisz</button>
+          <div class="btn-group" role="group">
+            <button type="button" class="btn btn-outline-light btn-sm" data-bs-dismiss="modal">❌ Anuluj</button>
+            <button type="submit" class="btn btn-outline-light btn-sm">💾 Zapisz</button>
+          </div>
+
         </div>
       </form>
     </div>