From 75e4ee59f2e34f715a7c65cb9e9546fbaed9798a Mon Sep 17 00:00:00 2001
From: "@mykdavies" <mykdavies@gmail.com>
Date: Thu, 24 Aug 2023 21:56:59 +0200
Subject: [PATCH] Fixes to User and Community headers

---
 lib/pages/community/community.dart          |  24 +++-
 lib/pages/community/community_overview.dart | 120 +++++++++++++-------
 lib/pages/profile_tab.dart                  |   1 +
 lib/pages/user.dart                         |   1 +
 lib/widgets/post/post_actions.dart          |  21 +++-
 5 files changed, 115 insertions(+), 52 deletions(-)

diff --git a/lib/pages/community/community.dart b/lib/pages/community/community.dart
index 9a99aff7..23c4b32c 100644
--- a/lib/pages/community/community.dart
+++ b/lib/pages/community/community.dart
@@ -1,3 +1,5 @@
+import 'dart:ui';
+
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:lemmy_api_client/v3.dart';
@@ -88,7 +90,7 @@ class CommunityPage extends HookWidget {
                 SliverAppBar(
                   expandedHeight: community.community.icon == null ? 220 : 300,
                   pinned: true,
-                  backgroundColor: theme.cardColor,
+                  backgroundColor: theme.canvasColor,
                   title: RevealAfterScroll(
                     scrollController: scrollController,
                     after: community.community.icon == null ? 110 : 190,
@@ -107,7 +109,25 @@ class CommunityPage extends HookWidget {
                             CommunityMoreMenu.open(context, fullCommunityView)),
                   ],
                   flexibleSpace: FlexibleSpaceBar(
-                    background: CommunityOverview(fullCommunityView),
+                    background: Stack(
+                      children: [
+                        CommunityOverview(fullCommunityView),
+                        Expanded(
+                          child: ClipRect(
+                            child: SizedBox(
+                              height: 70,
+                              width: double.infinity,
+                              child: BackdropFilter(
+                                filter: ImageFilter.blur(sigmaX: 3, sigmaY: 3),
+                                child: ColoredBox(
+                                    color: Colors.grey.withOpacity(0.3)),
+                              ),
+                              // ColoredBox(color: Colors.grey.withOpacity(0.5)),
+                            ),
+                          ),
+                        ),
+                      ],
+                    ),
                   ),
                   bottom: PreferredSize(
                     preferredSize: const TabBar(tabs: []).preferredSize,
diff --git a/lib/pages/community/community_overview.dart b/lib/pages/community/community_overview.dart
index 262d584c..15700a99 100644
--- a/lib/pages/community/community_overview.dart
+++ b/lib/pages/community/community_overview.dart
@@ -18,7 +18,6 @@ class CommunityOverview extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final theme = Theme.of(context);
-    final shadow = BoxShadow(color: theme.canvasColor, blurRadius: 5);
 
     final community = fullCommunityView.communityView;
 
@@ -68,55 +67,53 @@ class CommunityOverview extends StatelessWidget {
         SafeArea(
           child: Column(
             children: [
-              const SizedBox(height: 45),
+              const SizedBox(height: 60),
               if (icon != null) icon,
               const SizedBox(height: 10),
               // NAME
-              RichText(
-                overflow: TextOverflow.ellipsis,
-                text: TextSpan(
-                  style:
-                      theme.textTheme.titleMedium?.copyWith(shadows: [shadow]),
-                  children: [
-                    const TextSpan(
-                      text: '!',
-                      style: TextStyle(fontWeight: FontWeight.w200),
-                    ),
-                    TextSpan(
-                      text: community.community.name,
-                      style: const TextStyle(fontWeight: FontWeight.w600),
-                    ),
-                    const TextSpan(
-                      text: '@',
-                      style: TextStyle(fontWeight: FontWeight.w200),
-                    ),
-                    TextSpan(
-                      text: community.community.originInstanceHost,
-                      style: const TextStyle(fontWeight: FontWeight.w600),
-                      recognizer: TapGestureRecognizer()
-                        ..onTap = () => Navigator.of(context).push(
-                              InstancePage.route(
-                                community.community.originInstanceHost,
+              BlurBox(
+                child: RichText(
+                  overflow: TextOverflow.ellipsis,
+                  text: TextSpan(
+                    style: theme.textTheme.titleMedium,
+                    children: [
+                      const TextSpan(
+                        text: '!',
+                        style: TextStyle(fontWeight: FontWeight.w200),
+                      ),
+                      TextSpan(
+                        text: community.community.name,
+                        style: const TextStyle(fontWeight: FontWeight.w600),
+                      ),
+                      const TextSpan(
+                        text: '@',
+                        style: TextStyle(fontWeight: FontWeight.w200),
+                      ),
+                      TextSpan(
+                        text: community.community.originInstanceHost,
+                        style: const TextStyle(fontWeight: FontWeight.w600),
+                        recognizer: TapGestureRecognizer()
+                          ..onTap = () => Navigator.of(context).push(
+                                InstancePage.route(
+                                  community.community.originInstanceHost,
+                                ),
                               ),
-                            ),
-                    ),
-                  ],
+                      ),
+                    ],
+                  ),
                 ),
               ),
+
               // TITLE/MOTTO
               const SizedBox(height: 8),
-              Padding(
-                padding: const EdgeInsets.symmetric(horizontal: 20),
+              BlurBox(
                 child: Text(
                   '${community.community.title}${community.community.instanceHost != community.community.originInstanceHost ? ' (via ${community.community.instanceHost})' : ''}',
                   textAlign: TextAlign.center,
-                  style: TextStyle(
-                    fontWeight: FontWeight.w300,
-                    shadows: [shadow],
-                  ),
+                  style: const TextStyle(fontWeight: FontWeight.w300),
                 ),
               ),
-              const SizedBox(height: 20),
+              const SizedBox(height: 15),
               Stack(
                 alignment: Alignment.center,
                 children: [
@@ -124,14 +121,24 @@ class CommunityOverview extends StatelessWidget {
                   Row(
                     children: [
                       const Spacer(),
-                      const Icon(Icons.people, size: 20),
-                      const SizedBox(width: 3),
-                      Text(community.counts.subscribers.compact(context)),
+                      BlurBox(
+                          child: Row(children: [
+                        const Icon(Icons.people, size: 20),
+                        const SizedBox(width: 3),
+                        Text(
+                          community.counts.subscribers.compact(context),
+                        ),
+                      ])),
                       const Spacer(flex: 4),
-                      const Icon(Icons.record_voice_over, size: 20),
-                      const SizedBox(width: 3),
-                      // TODO: v0.18.x migration
-                      Text((fullCommunityView.online ?? 0).compact(context)),
+                      BlurBox(
+                          child: Row(children: [
+                        const Icon(Icons.record_voice_over, size: 20),
+                        const SizedBox(width: 3),
+                        // TODO: v0.18.x migration
+                        Text(
+                          (fullCommunityView.online ?? 0).compact(context),
+                        ),
+                      ])),
                       const Spacer(),
                     ],
                   ),
@@ -145,3 +152,28 @@ class CommunityOverview extends StatelessWidget {
     );
   }
 }
+
+class BlurBox extends StatelessWidget {
+  final Widget child;
+
+  const BlurBox({required this.child, super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    return Container(
+      decoration: BoxDecoration(
+        boxShadow: [
+          BoxShadow(
+            color: theme.canvasColor.withOpacity(0.3),
+            blurRadius: 1,
+            spreadRadius: 1,
+          )
+        ],
+        color: theme.canvasColor.withOpacity(0.3),
+      ),
+      child: Padding(
+          padding: const EdgeInsets.only(left: 5, right: 5), child: child),
+    );
+  }
+}
diff --git a/lib/pages/profile_tab.dart b/lib/pages/profile_tab.dart
index 1c992982..db9541cb 100644
--- a/lib/pages/profile_tab.dart
+++ b/lib/pages/profile_tab.dart
@@ -55,6 +55,7 @@ class UserProfileTab extends HookWidget {
     return Scaffold(
       extendBodyBehindAppBar: true,
       appBar: AppBar(
+        backgroundColor: Colors.grey.withOpacity(0.3),
         title: RadioPicker<String>(
           title: 'account',
           values: accountsStore.loggedInInstances
diff --git a/lib/pages/user.dart b/lib/pages/user.dart
index 33483c4c..6b2288a5 100644
--- a/lib/pages/user.dart
+++ b/lib/pages/user.dart
@@ -54,6 +54,7 @@ class UserPage extends HookWidget {
     return Scaffold(
       extendBodyBehindAppBar: true,
       appBar: AppBar(
+        backgroundColor: Colors.grey.withOpacity(0.3),
         actions: [
           if (userDetailsSnap.hasData) ...[
             SendMessageButton(userDetailsSnap.data!.personView.person),
diff --git a/lib/widgets/post/post_actions.dart b/lib/widgets/post/post_actions.dart
index 32b77925..5fe1619a 100644
--- a/lib/widgets/post/post_actions.dart
+++ b/lib/widgets/post/post_actions.dart
@@ -41,12 +41,21 @@ class PostActions extends HookWidget {
             const Icon(Icons.comment_rounded),
             const SizedBox(width: 6),
             Expanded(
-              child: Text(
-                L10n.of(context).number_of_comments(
-                    store.postView.counts.comments,
-                    store.postView.counts.comments),
-                overflow: TextOverflow.fade,
-                softWrap: false,
+              child: LayoutBuilder(
+                builder: (context, constraint) {
+                  // If the space is too small for the word
+                  // "comments" to display fully, don't show it.
+                  final txt = (constraint.maxWidth < 100.0)
+                      ? store.postView.counts.comments.toString()
+                      : L10n.of(context).number_of_comments(
+                          store.postView.counts.comments,
+                          store.postView.counts.comments);
+
+                  return Text(
+                    txt,
+                    softWrap: false,
+                  );
+                },
               ),
             ),
             const PostMoreMenuButton(),