Fix grafica scouthub-home-fe

scouthub-home-fe/src/app/inviti/inviti.html

@@ -1,24 +1,37 @@
 <section class="inviti">
-  @if (loading()) {
-    <p>Caricamento invito…</p>
-  } @else if (loadError(); as message) {
-    <p class="inviti__error" role="alert">{{ message }}</p>
-  } @else if (invito(); as invitoData) {
-    <h1>Invito al gruppo scout {{ invitoData.nomeGruppo }}</h1>
-    <p>Ruolo offerto: <strong>{{ invitoData.ruolo }}</strong></p>
+  <div class="inviti__blob inviti__blob--top" aria-hidden="true"></div>
+  <div class="inviti__blob inviti__blob--bottom" aria-hidden="true"></div>
 
-    @if (!invitoData.valido) {
-      <p class="inviti__error" role="alert">
-        Questo invito non è più valido: potrebbe essere scaduto o già stato accettato.
+  <div class="inviti__card">
+    <div class="inviti__brand">
+      <span class="inviti__logo">S</span>
+      <span class="inviti__brand-name">Scouthub</span>
+    </div>
+
+    @if (loading()) {
+      <p>Caricamento invito…</p>
+    } @else if (loadError(); as message) {
+      <p class="inviti__error" role="alert">{{ message }}</p>
+    } @else if (invito(); as invitoData) {
+      <h1 class="inviti__title">Sei stato invitato</h1>
+      <p class="inviti__desc">
+        Unisciti al gruppo <strong class="inviti__group-name">{{ invitoData.nomeGruppo }}</strong> su Scouthub come
+        <strong>{{ invitoData.ruolo }}</strong>.
       </p>
-    } @else {
-      @if (acceptError(); as errMessage) {
-        <p class="inviti__error" role="alert">{{ errMessage }}</p>
-      }
 
-      <button mat-flat-button color="primary" (click)="accetta()" [disabled]="accepting()">
-        {{ accepting() ? 'Accettazione in corso…' : 'Accetta invito' }}
-      </button>
+      @if (!invitoData.valido) {
+        <p class="inviti__error" role="alert">
+          Questo invito non è più valido: potrebbe essere scaduto o già stato accettato.
+        </p>
+      } @else {
+        @if (acceptError(); as errMessage) {
+          <p class="inviti__error" role="alert">{{ errMessage }}</p>
+        }
+
+        <button class="inviti__accept-btn" mat-flat-button (click)="accetta()" [disabled]="accepting()">
+          {{ accepting() ? 'Accettazione in corso…' : (isAuthenticated ? 'Accetta invito' : 'Accetta e crea il tuo account') }}
+        </button>
+      }
     }
-  }
+  </div>
 </section>