diff --git a/src/client/UtentiPage.tsx b/src/client/UtentiPage.tsx index 9681719..0e3d619 100644 --- a/src/client/UtentiPage.tsx +++ b/src/client/UtentiPage.tsx @@ -48,14 +48,27 @@ export const UtentiPage = () => { return ( <> - diff --git a/src/styles/components.scss b/src/styles/components.scss index 73431bb..6fbf75f 100644 --- a/src/styles/components.scss +++ b/src/styles/components.scss @@ -598,4 +598,53 @@ .show-more { place-self: center; } + + .search-bar { + display: grid; + grid-template-columns: auto 1fr; + + width: 100%; + + gap: 1rem; + } + + .filter-select { + width: 100%; + height: 2.5rem; + + @include neo-brutalist-card; + + display: grid; + align-items: center; + grid-auto-flow: column; + + cursor: pointer; + + --filter-bg-color-hover: color-mix(in srgb, var(--filter-bg-color, #ddd), #000 10%); + + background: var(--filter-bg-color, #ddd); + + &:hover, + &:hover select { + background: var(--filter-bg-color-hover); + } + + .material-symbols-outlined { + padding: 0 0.35rem; + } + + select { + border: none; + box-shadow: none; + outline: none; + height: 100%; + appearance: none; + + cursor: pointer; + + padding: 0; + + background: var(--filter-bg-color, #ddd); + } + } } diff --git a/src/styles/pages.scss b/src/styles/pages.scss index 1267f5c..04731e3 100644 --- a/src/styles/pages.scss +++ b/src/styles/pages.scss @@ -241,6 +241,8 @@ .utenti { background: #ffffe4; + --filter-bg-color: #ffd270; + main { justify-self: center; @@ -248,11 +250,12 @@ flex-direction: column; align-items: center; - max-width: 80ch; padding: 5rem 0; gap: 5rem; + max-width: 80ch; + .search-result { background: #ffeabc; }