From ceb2d577107730b9bea741c8a4bd2327a859531a Mon Sep 17 00:00:00 2001
From: seluianova <viktoria.seluianova@tuerantuer.org>
Date: Tue, 19 Nov 2024 20:55:56 +0100
Subject: [PATCH] 1430: Add elevation to the extend card notification

---
 .../extend_card_notification.dart             | 120 ++++++++++--------
 1 file changed, 65 insertions(+), 55 deletions(-)

diff --git a/frontend/lib/identification/card_detail_view/extend_card_notification.dart b/frontend/lib/identification/card_detail_view/extend_card_notification.dart
index 8363bffef..a7b81a285 100644
--- a/frontend/lib/identification/card_detail_view/extend_card_notification.dart
+++ b/frontend/lib/identification/card_detail_view/extend_card_notification.dart
@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 
 import 'package:ehrenamtskarte/build_config/build_config.dart' show buildConfig;
 import 'package:ehrenamtskarte/l10n/translations.g.dart';
+import 'package:tinycolor2/tinycolor2.dart';
 import 'package:url_launcher/url_launcher_string.dart';
 
 class ExtendCardNotification extends StatefulWidget {
@@ -14,67 +15,76 @@ class _ExtendCardNotificationState extends State<ExtendCardNotification> {
 
   @override
   Widget build(BuildContext context) {
+    if (!_isVisible) return Container();
+
+    final primaryColor = Theme.of(context).colorScheme.primary;
+    final backgroundColor =
+        Theme.of(context).brightness == Brightness.light ? primaryColor.tint(90) : primaryColor.shade(90);
+
+    return Padding(
+      padding: const EdgeInsets.all(8),
+      child: Card(
+        color: backgroundColor,
+        elevation: 1,
+        margin: EdgeInsets.zero,
+        child: Padding(
+          padding: const EdgeInsets.all(16),
+          child: _buildContent(context),
+        ),
+      ),
+    );
+  }
+
+  Widget _buildContent(BuildContext context) {
+    final t = context.t;
+
     final colorScheme = Theme.of(context).colorScheme;
     final textTheme = Theme.of(context).textTheme;
-    final t = context.t;
 
-    return _isVisible
-        ? Padding(
-            padding: const EdgeInsets.all(8.0),
-            child: Container(
-              padding: const EdgeInsets.all(16),
-              decoration: BoxDecoration(
-                color: colorScheme.primary.withOpacity(0.1),
-                borderRadius: BorderRadius.circular(8),
+    return Row(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Icon(Icons.info, color: colorScheme.primary),
+        SizedBox(width: 16),
+        Expanded(
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Text(
+                t.identification.extendCardNotificationTitle,
+                style: textTheme.bodyLarge,
               ),
-              child: Row(
-                crossAxisAlignment: CrossAxisAlignment.start,
-                children: [
-                  Icon(Icons.info, color: colorScheme.primary),
-                  SizedBox(width: 16),
-                  Expanded(
-                    child: Column(
-                      crossAxisAlignment: CrossAxisAlignment.start,
-                      children: [
-                        Text(
-                          t.identification.extendCardNotificationTitle,
-                          style: textTheme.bodyLarge,
-                        ),
-                        SizedBox(height: 8),
-                        Text(
-                          t.identification.extendCardNotificationDescription,
-                          style: textTheme.bodyMedium,
-                        ),
-                        SizedBox(height: 8),
-                        FilledButton(
-                          style: ButtonStyle(
-                              backgroundColor: MaterialStateColor.resolveWith((states) => colorScheme.primary),
-                              elevation: MaterialStateProperty.resolveWith<double>(
-                                (states) => states.contains(MaterialState.pressed) ? 8 : 2,
-                              ),
-                              shape: MaterialStateProperty.all<RoundedRectangleBorder>(RoundedRectangleBorder(
-                                borderRadius: BorderRadius.circular(4),
-                              ))),
-                          onPressed: () => _openApplication(),
-                          child: Text(t.identification.extendCard.toUpperCase()),
-                        ),
-                      ],
-                    ),
-                  ),
-                  SizedBox(width: 16),
-                  GestureDetector(
-                    onTap: () {
-                      setState(() {
-                        _isVisible = false;
-                      });
-                    },
-                    child: Icon(Icons.close, size: 16),
+              SizedBox(height: 8),
+              Text(
+                t.identification.extendCardNotificationDescription,
+                style: textTheme.bodyMedium,
+              ),
+              SizedBox(height: 8),
+              FilledButton(
+                style: FilledButton.styleFrom(
+                  backgroundColor: colorScheme.primary,
+                  elevation: 2,
+                  shape: RoundedRectangleBorder(
+                    borderRadius: BorderRadius.circular(4),
                   ),
-                ],
+                ),
+                onPressed: () => _openApplication(),
+                child: Text(t.identification.extendCard.toUpperCase()),
               ),
-            ),
-          )
-        : Container();
+            ],
+          ),
+        ),
+        SizedBox(width: 16),
+        GestureDetector(
+          onTap: () {
+            setState(() {
+              _isVisible = false;
+            });
+          },
+          child: Icon(Icons.close, size: 16),
+        ),
+      ],
+    );
   }
 
   void _openApplication() {