Pagina utenti caricata da json

public/js/utenti.js

@@ -0,0 +1,3 @@
+// window.addEventListener('DOMContentLoaded', () => {
+   
+// })

public/style.css

@@ -475,6 +475,31 @@ button.icon {
     width: 2rem;
 }
 
+select {
+    font-family: var(--font-sf);
+    font-weight: var(--font-weight-medium);
+    font-size: 16px;
+    
+    /* gray variant #b3b3b3 */
+    border: 1px solid var(--bg-darker-3);
+    /* gray variant #bfbfbf */
+    background: var(--bg-darker-2);
+    /* gray variant #333333 */
+    color: var(--fg);
+
+    height: 2rem;
+
+    border-radius: 4px;
+
+    padding: 0 0.25rem;
+
+    transition: all 100ms ease-in-out;
+    
+    box-shadow: 0 4px 8px 0 #00000022;
+
+    cursor: pointer;
+}
+
 /* Text Fields */
 
 input[type=text], input[type=password] {
@@ -511,9 +536,35 @@ input[type=password] {
 
     border-radius: 4px;
     box-shadow: 0 0 8px 0 #00000022;
+
+    border: 1px solid var(--bg-darker-3);
+    background: var(--bg-darker-2);
+    color: var(--fg);
 }
 
-.compound > button, .compound > .button, .compound > input {
+.compound > .divider {
+    height: 2rem;
+    width: 1px;
+
+    background: var(--bg-darker-3);
+}
+
+.compound .icon {
+    width: 2.5rem;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.compound > select {
+    background: none;
+
+    margin-right: 0.25rem;
+}
+
+.compound > button, .compound > .button, .compound > input, .compound > select {
+    border: none;
     box-shadow: none;
 }
 
@@ -633,8 +684,23 @@ form .field-set input {
     padding-top: calc(100vh - 6rem);
 }
 
+.page-utenti .user-list {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+}
+
+.page-utenti .user-item {
+    flex-direction: row;
+    width: 100%;
+}
+
 .search {
     margin: 2rem 0;
+    display: flex;
+    flex-direction: row;
+
+    gap: 1rem;
 }
 
 .search input[type=text] {