Aggiunta selezione negozio

SteUp.Shared/wwwroot/css/app.css

@@ -274,4 +274,32 @@ h1:focus { outline: none; }
     .flex-column, .navbar-brand { padding-left: env(safe-area-inset-left); }
 
     .customDialog-form .mud-dialog-content { margin-top: env(safe-area-inset-top); }
+}
+
+/*Ripple*/
+.ripple-container {
+    position: relative;
+    overflow: hidden;
+    cursor: pointer;
+    transform: translateZ(0);
+}
+
+.ripple {
+    position: absolute;
+    border-radius: 50%;
+    transform: scale(0);
+    animation: ripple-effect 0.6s linear;
+    background-color: rgba(0, 0, 0, 0.2);
+    pointer-events: none;
+}
+
+@keyframes ripple-effect {
+    to {
+        transform: scale(4);
+        opacity: 0;
+    }
+}
+
+.ripple-white .ripple {
+    background-color: rgba(255, 255, 255, 0.5);
 }

SteUp.Shared/wwwroot/css/custom-mudBlazor.css

@@ -0,0 +1,25 @@
+/*---Blazor custom---*/
+
+.mud-snackbar {
+    border-radius: 1em !important;
+}
+
+.mud-paper {
+    border-radius: 1em !important;
+}
+
+.mud-dialog {
+    border-radius: 1em !important;
+}
+
+.mud-overlay.on-top {
+    z-index: 10001 !important;
+}
+
+.mud-popover.mud-popover-open {
+    border-radius: 1em !important;
+}
+
+.mud-picker-popover-paper {
+    border-radius: 1em !important;
+}

SteUp.Shared/wwwroot/css/form.css

@@ -33,7 +33,6 @@
     background: var(--mud-palette-background-gray);
     border-radius: 9px;
     padding: .5rem 1rem;
-    margin-bottom: 1.5rem;
 }
 
 .input-card.clearButton {

SteUp.Shared/wwwroot/js/main.js

@@ -45,3 +45,42 @@ document.addEventListener("DOMContentLoaded", () => {
         }
     }
 });
+
+(function () {
+    // Ascoltiamo l'evento 'mousedown' su tutto il documento
+    document.addEventListener('mousedown', function (event) {
+
+        // Cerca se l'elemento cliccato (o un suo genitore) ha la classe .ripple-container
+        const target = event.target.closest('.ripple-container');
+
+        if (target) {
+            createRipple(event, target);
+        }
+    });
+
+    function createRipple(event, element) {
+        const circle = document.createElement("span");
+        const diameter = Math.max(element.clientWidth, element.clientHeight);
+        const radius = diameter / 2;
+
+        const rect = element.getBoundingClientRect();
+
+        circle.style.width = circle.style.height = `${diameter}px`;
+        circle.style.left = `${event.clientX - rect.left - radius}px`;
+        circle.style.top = `${event.clientY - rect.top - radius}px`;
+        circle.classList.add("ripple");
+
+        // Rimuovi l'elemento dal DOM alla fine dell'animazione per non intasare la memoria
+        const ripple = element.getElementsByClassName("ripple")[0];
+        if (ripple) {
+            ripple.remove();
+        }
+
+        element.appendChild(circle);
+
+        // Pulizia automatica dopo 600ms (durata animazione CSS)
+        setTimeout(() => {
+            circle.remove();
+        }, 600);
+    }
+})();