fix: minor fixes on styling and UI related stuff

.gitignore

@@ -22,3 +22,6 @@ logs
 .env
 .env.*
 !.env.example
+
+pnpm-*.yaml
+AGENTS.md

app/assets/css/style.css

@@ -1,7 +1,260 @@
+:root {
+    --visione-primary: #06c;
+    --visione-primary-dark: #17324d;
+    --visione-text-muted: #455b71;
+    --visione-text-body: #17324d;
+    --visione-text-soft: #455b71;
+    --visione-success: #008758;
+    --visione-warning: #a66300;
+    --visione-danger: #d9364f;
+    --visione-info: #2f80ed;
+    --visione-light-bg: #f0f6fc;
+    --visione-home-hero-bg: var(--visione-light-bg);
+    --visione-font-sans: "Titillium Web", Arial, sans-serif;
+    --visione-font-mono: "Roboto Mono", monospace;
+}
+
+html,
+body {
+    color: var(--visione-text-body);
+    font-family: var(--visione-font-sans);
+    font-size: 1rem;
+    line-height: 1.5;
+}
+
+button,
+input,
+select,
+textarea {
+    font-family: var(--visione-font-sans);
+}
+
+code,
+kbd,
+pre,
+samp {
+    font-family: var(--visione-font-mono);
+}
+
 a {
-    text-decoration: none!important;
+    text-decoration: none !important;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6,
+.card-title,
+.callout-title {
+    color: var(--visione-primary-dark);
+    font-family: var(--visione-font-sans);
+    line-height: 1.2;
+}
+
+p,
+li,
+td,
+th,
+label,
+small,
+.card-text,
+.card .card-body .card-text,
+.callout p,
+.form-text {
+    color: inherit;
+    font-family: var(--visione-font-sans) !important;
+}
+
+.lead {
+    color: var(--visione-text-soft);
+    font-size: 1.125rem;
+    line-height: 1.55;
+}
+
+.text-muted,
+.text-secondary {
+    color: var(--visione-text-soft) !important;
+}
+
+.text-dark {
+    color: var(--visione-text-body) !important;
+}
+
+.text-primary,
+.category.text-primary {
+    color: var(--visione-primary) !important;
+}
+
+.text-success,
+.category.text-success {
+    color: var(--visione-success) !important;
+}
+
+.text-warning {
+    color: var(--visione-warning) !important;
+}
+
+.text-danger {
+    color: var(--visione-danger) !important;
+}
+
+.text-info {
+    color: var(--visione-info) !important;
+}
+
+.display-1 {
+    font-size: clamp(3rem, 5vw, 4.75rem);
+    line-height: 1;
+}
+
+.display-3 {
+    font-size: clamp(2.5rem, 4vw, 3.5rem);
+    line-height: 1;
+}
+
+.display-6 {
+    font-size: clamp(1.75rem, 2.4vw, 2.25rem);
+    line-height: 1.1;
+}
+
+.bg-light {
+    background-color: var(--visione-home-hero-bg) !important;
 }
 
 html body .navbar .navbar-collapsable .navbar-nav li.nav-item a.nav-link[data-focus-mouse="true"], .navbar .navbar-collapsable .navbar-nav li.nav-item button.nav-link[data-focus-mouse="true"] {
     border-color: inherit !important
-}
+}
+
+.it-hero-wrapper.it-primary,
+.it-hero-wrapper.it-primary-bg {
+    background: var(--visione-primary) !important;
+    color: #fff;
+}
+
+.it-hero-wrapper.it-primary h1,
+.it-hero-wrapper.it-primary p,
+.it-hero-wrapper.it-primary-bg h1,
+.it-hero-wrapper.it-primary-bg p {
+    color: #fff !important;
+}
+
+.it-hero-wrapper .container {
+    min-height: 240px;
+    display: flex;
+    align-items: center;
+}
+
+.it-hero-wrapper .container > .row {
+    width: 100%;
+    justify-content: center;
+}
+
+.it-hero-wrapper .it-hero-text-wrapper {
+    max-width: 820px;
+    margin: 0 auto;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.it-hero-wrapper .it-hero-text-wrapper h1,
+.it-hero-wrapper .it-hero-text-wrapper p {
+    width: 100%;
+}
+
+.it-hero-wrapper.bg-light .it-hero-text-wrapper p {
+    font-size: 1.3rem;
+}
+
+.bg-light h1,
+.bg-light h2,
+.bg-light h3,
+.bg-light h4,
+.bg-light h5,
+.bg-light h6 {
+    color: var(--visione-primary-dark) !important;
+}
+
+.bg-light p,
+.bg-light .lead,
+.bg-light .text-muted,
+.bg-light .text-secondary {
+    color: var(--visione-text-soft) !important;
+}
+
+.icon {
+    color: currentColor;
+    fill: currentColor;
+    flex-shrink: 0;
+}
+
+.icon-primary {
+    color: var(--visione-primary) !important;
+    fill: var(--visione-primary) !important;
+}
+
+.icon-success {
+    color: var(--visione-success) !important;
+    fill: var(--visione-success) !important;
+}
+
+.icon-warning {
+    color: var(--visione-warning) !important;
+    fill: var(--visione-warning) !important;
+}
+
+.icon-danger {
+    color: var(--visione-danger) !important;
+    fill: var(--visione-danger) !important;
+}
+
+.icon-info {
+    color: var(--visione-info) !important;
+    fill: var(--visione-info) !important;
+}
+
+.btn-primary .icon:not([class*="icon-"]),
+.badge[class*="bg-"] .icon:not([class*="icon-"]),
+.rounded-circle[class*="bg-"] .icon:not([class*="icon-"]) {
+    color: #fff;
+    fill: #fff;
+}
+
+.it-header-wrapper .header-slim-right-zone .btn .rounded-icon,
+.it-header-wrapper .header-slim-right-zone .btn .rounded-icon .icon {
+
+}
+
+.it-footer,
+.it-footer a,
+.it-footer h2,
+.it-footer h3,
+.it-footer h4,
+.it-footer .it-brand-text,
+.it-footer .it-brand-text h2,
+.it-footer .it-brand-text h3,
+.it-footer .member-name,
+.it-footer .icon {
+    color: #fff !important;
+    fill: #fff !important;
+}
+
+@media (max-width: 767.98px) {
+    .it-hero-wrapper .container {
+        min-height: 220px;
+    }
+
+    .it-hero-wrapper .it-hero-text-wrapper {
+        padding-left: 1rem !important;
+        padding-right: 1rem !important;
+    }
+}

app/components/BIIcon.vue

@@ -1,9 +1,24 @@
 <script setup lang="ts">
-defineProps<{
+const iconAliases: Record<string, string> = {
+  'it-bell': 'it-info-circle',
+  'it-grid': 'it-list',
+  'it-history': 'it-clock',
+  'it-home': 'it-pa',
+  'it-image': 'it-file-image',
+  'it-location': 'it-map-marker-circle',
+  'it-map': 'it-map-marker-circle',
+  'it-piu': 'it-plus',
+  'it-star': 'it-star-full',
+  'it-write': 'it-pencil',
+}
+
+const props = defineProps<{
   name: string
   size?: 'xs' | 'sm' | 'lg' | 'xl'
   color?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'white'
 }>()
+
+const resolvedName = computed(() => iconAliases[props.name] || props.name)
 </script>
 
 <template>
@@ -15,6 +30,6 @@ defineProps<{
     ]"
       aria-hidden="true"
   >
-    <use :href="`/sprites.svg#${name}`"></use>
+    <use :href="`/sprites.svg#${resolvedName}`"></use>
   </svg>
-</template>
+</template>

app/components/Footer.vue

@@ -50,7 +50,6 @@ const { sortedMembers } = useMembers();
             <li class="list-inline-item"><a href="/note-legali">Note legali</a></li>
             <li class="list-inline-item"><a href="/privacy">Privacy policy</a></li>
             <li class="list-inline-item"><a href="/sitemap.xml">Mappa del sito</a></li>
-            <li class="list-inline-item"><a href="https://form.agid.gov.it/view/xyz">Dichiarazione di accessibilità <span class="visually-hidden">(link esterno su sito AgID)</span></a></li>
           </ul>
       </div>
     </div>

app/components/Header.vue

@@ -48,7 +48,7 @@ const { isAuthenticated, user, logout } = useAuth()
                   <NuxtLink class="btn btn-primary btn-icon btn-full" to="/dashboard"
                             data-element="personal-area-dashboard" data-focus-mouse="false">
                     <span class="rounded-icon" aria-hidden="true">
-                      <BIIcon name="it-user" />
+                      <BIIcon name="it-user" color="black" />
                     </span>
                     <span class="d-none d-lg-block">{{ user?.first_name }}</span>
                   </NuxtLink>
@@ -56,7 +56,7 @@ const { isAuthenticated, user, logout } = useAuth()
                   <button class="btn btn-primary btn-icon btn-full border-0" @click="logout"
                           data-element="personal-area-logout" data-focus-mouse="false">
                     <span class="rounded-icon" aria-hidden="true">
-                      <BIIcon name="it-logout" /> <!-- usa it-unlocked se it-logout non è presente -->
+                      <BIIcon name="it-logout" color="white" />
                     </span>
                     <span class="d-none d-lg-block">Esci</span>
                   </button>
@@ -66,7 +66,7 @@ const { isAuthenticated, user, logout } = useAuth()
                 <NuxtLink v-else class="btn btn-primary btn-icon btn-full" to="/auth/login"
                           data-element="personal-area-login" data-focus-mouse="false">
                   <span class="rounded-icon" aria-hidden="true">
-                    <BIIcon name="it-user" />
+                    <BIIcon name="it-user" color="black" />
                   </span>
                   <span class="d-none d-lg-block">Login</span>
                 </NuxtLink>
@@ -187,4 +187,4 @@ const { isAuthenticated, user, logout } = useAuth()
   opacity: 1;
   pointer-events: auto;
 }
-</style>
+</style>

app/components/dashboard/CitizenDashboard.vue

@@ -245,7 +245,6 @@ const formatDate = (dateString?: string): string => {
 </template>
 
 <style scoped>
-.display-6 { font-size: 2.2rem; line-height: 1; }
 .table-hover tbody tr:hover { background-color: rgba(0, 111, 157, 0.03); }
 .btn-group .btn { min-width: 80px; }
-</style>
+</style>

app/pages/dashboard/index.vue

@@ -39,7 +39,7 @@ const heroSubtitle = computed(() => {
     <div class="it-hero-wrapper it-primary">
       <div class="container">
         <div class="row">
-          <div class="col-12">
+          <div class="col-12 text-center">
             <div class="it-hero-text-wrapper p-4">
               <h1 class="text-white font-weight-bold">{{ heroTitle }}</h1>
               <p class="text-white mt-2 lead">
@@ -71,10 +71,3 @@ const heroSubtitle = computed(() => {
     </div>
   </div>
 </template>
-
-<style scoped>
-/* Il gradiente originale della pagina rotta */
-.it-primary {
-  background: linear-gradient(135deg, #006f9d 0%, #003d5c 100%);
-}
-</style>

app/pages/index.vue

@@ -19,10 +19,10 @@ const { data: openDataResponse } = await useAsyncData('recent-fixes', () =>
     <div class="it-hero-wrapper bg-light">
       <div class="container">
         <div class="row">
-          <div class="col-12 col-lg-8 offset-lg-2 text-center">
+          <div class="col-12 col-lg-8 mx-auto text-center">
             <div class="it-hero-text-wrapper p-4">
-              <h1 class="no_toc font-weight-bold text-dark">Miglioriamo insieme la città</h1>
+              <h1 class="no_toc font-weight-bold">Miglioriamo insieme la città</h1>
-              <p class="d-none d-lg-block mt-3 mb-4 text-secondary">
+              <p class="d-none d-lg-block mt-3 mb-4 text-muted">
                 Il portale ufficiale nazionale per segnalare disservizi urbani. Scatta una foto, invia la segnalazione
                 e monitora l'intervento in totale trasparenza.
               </p>
@@ -68,7 +68,7 @@ const { data: openDataResponse } = await useAsyncData('recent-fixes', () =>
       </div>
     </div>
 
-    <div class="bg-light py-5 border-top border-bottom">
+    <div class="bg-light py-5">
       <div class="container my-4">
         <h2 class="text-center mb-5 font-weight-bold">I numeri del nostro Comune</h2>
         <div class="row text-center">
@@ -149,4 +149,4 @@ const { data: openDataResponse } = await useAsyncData('recent-fixes', () =>
       </div>
     </div>
   </div>
-</template>
+</template>

app/pages/me.vue

@@ -246,14 +246,8 @@ const handleLogout = () => {
   border-color: #ffc107;
 }
 
-.display-3 {
-  font-size: 3.5rem;
-  line-height: 1;
-}
-
 .table-hover tbody tr:hover {
   background-color: rgba(0, 111, 157, 0.05);
 }
 </style>
 
-

app/pages/open-data.vue

@@ -47,7 +47,7 @@ const getStatusBadge = (status: string) => {
     <div class="it-hero-wrapper it-primary">
       <div class="container">
         <div class="row">
-          <div class="col-12">
+          <div class="col-12 text-center">
             <div class="it-hero-text-wrapper p-4">
               <h1 class="text-white font-weight-bold">Open Data Interventi</h1>
               <p class="text-white mt-2 lead">
@@ -201,4 +201,4 @@ const getStatusBadge = (status: string) => {
   transform: translateY(-2px);
   box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
 }
-</style>
+</style>

app/pages/reports/create.vue

@@ -76,7 +76,7 @@ const handleReportSubmit = async (reportData: CreateReportRequest, mediaFiles: F
     <div class="it-hero-wrapper it-primary-bg">
       <div class="container">
         <div class="row">
-          <div class="col-12">
+          <div class="col-12 text-center">
             <div class="it-hero-text-wrapper p-4">
               <h1 class="text-white font-weight-bold">Segnala un problema</h1>
               <p class="text-white mt-2 lead">
@@ -141,9 +141,3 @@ const handleReportSubmit = async (reportData: CreateReportRequest, mediaFiles: F
 
   </div>
 </template>
-
-<style scoped>
-.it-primary-bg {
-  background: linear-gradient(135deg, #006f9d 0%, #003d5c 100%);
-}
-</style>

nuxt.config.ts

@@ -45,8 +45,8 @@ export default defineNuxtConfig({
   },
   
   css: [
-    '@/assets/css/style.css',
+    'bootstrap-italia/dist/css/bootstrap-italia.min.css',
-    'bootstrap-italia/dist/css/bootstrap-italia.min.css'
+    '@/assets/css/style.css'
   ],
 
   fonts: {
@@ -56,4 +56,4 @@ export default defineNuxtConfig({
       { name: 'Titillium Web', provider: 'google' }
     ]
   }
-})
+})