Add Bootstrap Icons and new base styles to ReceiverUI

Integrated Bootstrap Icons by adding CSS and font assets, updated the project to track static asset folders, and referenced the icon styles in App.razor. Introduced a new app.css with comprehensive base styles, consolidating previous stylesheets for a consistent and modern UI. Ensured Bootstrap CSS is included as a foundational style framework. No code changes were made to the font or CSS asset files themselves.

EnvelopeGenerator.ReceiverUI/EnvelopeGenerator.ReceiverUI/Components/App.razor

@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <base href="/" />
     <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
+    <link rel="stylesheet" href="bootstrap-icons/bootstrap-icons.min.css" />
     <link rel="stylesheet" href="app.css" />
     <link rel="stylesheet" href="EnvelopeGenerator.ReceiverUI.styles.css" />
     <link rel="icon" type="image/png" href="favicon.png" />

EnvelopeGenerator.ReceiverUI/EnvelopeGenerator.ReceiverUI/EnvelopeGenerator.ReceiverUI.csproj

@@ -12,4 +12,9 @@
 		<PackageReference Include="Yarp.ReverseProxy" Version="2.1.0" />
 	</ItemGroup>
 
+	<ItemGroup>
+	  <Folder Include="wwwroot\bootstrap\" />
+	  <Folder Include="wwwroot\bootstrap-icons\" />
+	</ItemGroup>
+
 </Project>

EnvelopeGenerator.ReceiverUI/EnvelopeGenerator.ReceiverUI/wwwroot/app.css

@@ -0,0 +1,162 @@
+/* =============================================
+   signFLOW ReceiverUI — Basis-Stylesheet
+   Ersetzt: site.css, card.css, logo.css aus EnvelopeGenerator.Web
+   ============================================= */
+
+/* ----- CSS Custom Properties (Design-Tokens) -----
+   WARUM: Zentrale Stelle für Farben/Abstände.
+   Wenn sich das Branding ändert, änderst du nur diese Werte. */
+:root {
+    --sf-primary: #0d6efd;
+    --sf - danger: #dc3545;
+    --sf - success: #198754;
+    --sf - bg: #f8f9fa;
+    --sf - text: #212529;
+    --sf - muted: #6c757d;
+    --sf - border: #dee2e6;
+    --sf - header - height: 56px;
+--sf - footer - height: 48px;
+}
+
+/* ----- Globale Resets -----
+   WARUM: Konsistentes Rendering über alle Browser. */
+*,
+*::before,
+*::after {
+    box - sizing: border - box;
+}
+
+html, body {
+    height: 100 %;
+margin: 0;
+font - family: 'Segoe UI', system - ui, -apple - system, sans - serif;
+background - color: var(--sf - bg);
+color: var(--sf - text);
+}
+
+/* ----- App-Container -----
+   WARUM: Flexbox-Layout damit Footer immer unten bleibt,
+   auch wenn der Content wenig Inhalt hat (Sticky Footer Pattern). */
+.app - container {
+display: flex;
+    flex - direction: column;
+    min - height: 100vh;
+}
+
+/* ----- Header -----
+   WARUM: Fester Header oben wie im Web-Projekt.
+   Höhe ist als CSS-Variable definiert, damit main darunter beginnt. */
+.app - header {
+    background - color: #fff;
+    border - bottom: 1px solid var(--sf - border);
+height: var(--sf - header - height);
+display: flex;
+    align - items: center;
+padding: 0 1rem;
+position: sticky;
+top: 0;
+    z - index: 1000;
+}
+
+.app - title {
+    font - weight: 700;
+    font - size: 1.25rem;
+color: var(--sf - primary);
+}
+
+/* ----- Main Content -----
+   WARUM: flex: 1 sorgt dafür, dass der Content-Bereich den gesamten
+   verfügbaren Platz einnimmt. Der Footer wird nach unten gedrückt. */
+.app - main {
+flex: 1;
+padding: 1rem;
+}
+
+/* ----- Footer -----
+   WARUM: Immer am unteren Rand. Enthält Copyright + Sprachauswahl + Privacy-Link
+   (wie im Web-Projekt). */
+.app - footer {
+    background - color: #fff;
+    border - top: 1px solid var(--sf - border);
+height: var(--sf - footer - height);
+display: flex;
+    align - items: center;
+    justify - content: center;
+gap: 1rem;
+padding: 0 1rem;
+}
+
+/* ----- Page Container -----
+   WARUM: Zentrierter Container für Seiteninhalte.
+   Entspricht dem <div class="page container"> im Web-Projekt. */
+.page {
+    max-width: 600px;
+margin: 0 auto;
+padding: 2rem 1rem;
+}
+
+/* ----- AccessCode-Formular -----
+   WARUM: Zentriertes Eingabefeld wie EnvelopeLocked.cshtml.
+   Die Klasse .code-input macht das Eingabefeld größer und zentriert den Text. */
+.access - code - container {
+    text - align: center;
+}
+
+.code - input {
+    text - align: center;
+    font - size: 1.5rem;
+    letter - spacing: 0.5rem;
+    max - width: 300px;
+margin: 0 auto;
+}
+
+/* ----- Status-Icons -----
+   WARUM: Die SVG-Icons für Signed/Rejected/Locked aus dem Web-Projekt
+   bekommen hier einheitliche Größen und Farben. */
+.status - icon {
+display: flex;
+    justify - content: center;
+    margin - bottom: 1rem;
+}
+
+.status - icon svg,
+.status-icon .bi {
+    font-size: 4rem;
+}
+
+.status - icon.signed { color: var(--sf - success); }
+.status - icon.rejected { color: var(--sf - danger); }
+.status - icon.locked { color: var(--sf - muted); }
+
+/* ----- PDF-Container -----
+   WARUM: PSPDFKit braucht einen Container mit fester Höhe.
+   Wird in Phase 6 relevant, aber die Klasse wird schon jetzt definiert. */
+.pdf - container {
+border: 1px solid var(--sf - border);
+    border - radius: 4px;
+overflow: hidden;
+}
+
+/* ----- Error Container -----
+   WARUM: Styling für die ErrorBoundary im MainLayout. */
+.error - container {
+    max - width: 500px;
+margin: 0 auto;
+}
+
+/* ----- Responsive -----
+   WARUM: Auf Mobilgeräten braucht der Content weniger Padding. */
+@media(max - width: 576px) {
+    .app - main {
+    padding: 0.5rem;
+    }
+
+    .page {
+    padding: 1rem 0.5rem;
+    }
+
+    .code - input {
+        font - size: 1.25rem;
+        letter - spacing: 0.3rem;
+    }
+}