Better form styling and minor grid seats adjustments

client/src/components/tooltip.js

@@ -8,6 +8,8 @@ export function attachTooltip() {
 
         LISTENERS.find(listener => listener(e.target))
     })
+
+    resetTooltip()
 }
 
 export function addTooltipElementListener(callbackFn) {

client/src/style.scss

@@ -20,6 +20,15 @@ body {
 // Utility Classes
 //
 
+@keyframes rotating {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+
 @mixin panel {
     background: #fff;
     box-shadow: 0 0 8px 0px #0001, 0 0 16px 8px #0001;
@@ -92,6 +101,33 @@ a:visited {
     }
 }
 
+button {
+    border: none;
+    background: #ddd;
+    padding: 0 0.75rem;
+    height: 2rem;
+    border-radius: 3px;
+    color: #222;
+    box-shadow: 0 2px 12px 2px #0002, 0 1px 3px 0px #0003;
+    cursor: pointer;
+
+    &:hover {
+        background: #d0d0d0;
+    }
+}
+
+input[type='text'],
+input[type='password'],
+textarea {
+    border: none;
+    background: #fff;
+    padding: 0 0.25rem;
+    min-height: 2rem;
+    border-radius: 3px;
+    color: #222;
+    box-shadow: 0 0 12px 2px #0001, 0 1px 3px 1px #0002;
+}
+
 //
 // General Page Structure
 //
@@ -178,7 +214,7 @@ main {
     display: grid;
     grid-template-columns: auto 1fr;
 
-    gap: 0.5rem 1rem;
+    gap: 0 1rem;
 
     .error {
         color: #d00;
@@ -188,6 +224,30 @@ main {
         grid-column: 1 / span 2;
         place-self: center;
     }
+
+    .gap-above-s {
+        margin-top: 0.5rem;
+    }
+    .gap-above-l {
+        margin-top: 1rem;
+    }
+
+    input[type='text'],
+    input[type='password'],
+    textarea {
+        width: 100%;
+    }
+
+    button {
+        padding: 0 1.5rem;
+    }
+
+    @media screen and (max-width: $media-small-device-size) {
+        grid-template-columns: 1fr;
+        .fill-row {
+            grid-column: 1 / span 1;
+        }
+    }
 }
 
 .room-diagram {
@@ -229,6 +289,8 @@ main {
             justify-content: center;
             flex-direction: column;
 
+            background: #f0f0f0;
+
             &.mio {
                 background: var(--posto-mio-occupato-bg);
             }
@@ -249,7 +311,11 @@ main {
 
             line-height: 1;
 
-            // @media screen and (min-width: $media-small-device-size) {
+            &:not(.mio, .libero, .occupato)::before {
+                font-size: 12px;
+                content: '';
+            }
+
             &::before {
                 font-size: 12px;
                 content: 'Posto';
@@ -258,7 +324,6 @@ main {
                 font-size: 12px;
                 content: attr(data-index);
             }
-            // }
         }
     }
 
@@ -491,7 +556,3 @@ body {
 //         }
 //     }
 // }
-
-img {
-    transform: rotate(180deg);
-}