feat(logo)

- add new icons - add spacing on profile logo - refactor profile card header component
ardriveapp · Dec 11, 2024 · 43eef11 · 43eef11
1 parent 61c9873
commit 43eef11
Show file tree

Hide file tree

Showing 9 changed files with 258 additions and 185 deletions.
diff --git a/lib/app_shell.dart b/lib/app_shell.dart
@@ -2,6 +2,7 @@ import 'package:ardrive/blocs/prompt_to_snapshot/prompt_to_snapshot_bloc.dart';
 import 'package:ardrive/blocs/prompt_to_snapshot/prompt_to_snapshot_event.dart';
 import 'package:ardrive/components/profile_card.dart';
 import 'package:ardrive/components/side_bar.dart';
+import 'package:ardrive/components/topbar/help_button.dart';
 import 'package:ardrive/drive_explorer/multi_thumbnail_creation/multi_thumbnail_creation_warn_modal.dart';
 import 'package:ardrive/misc/misc.dart';
 import 'package:ardrive/pages/drive_detail/components/hover_widget.dart';
@@ -371,15 +372,13 @@ class MobileAppBar extends StatelessWidget implements PreferredSizeWidget {
             const GlobalHideToggleButton(),
             const SizedBox(width: 8),
             const SyncButton(),
+            const SizedBox(width: 8),
+            if (AppPlatform.isMobileWeb()) ...[
+              const HelpButtonTopBar(),
+            ],
             const SizedBox(
               width: 24,
             ),
-            if (AppPlatform.isMobileWeb()) ...[
-              const HelpButton(),
-              const SizedBox(
-                width: 24,
-              ),
-            ],
             const Padding(
               padding: EdgeInsets.only(right: 12.0),
               child: ProfileCard(),

diff --git a/lib/components/app_top_bar.dart b/lib/components/app_top_bar.dart
@@ -149,9 +149,7 @@ class SyncButton extends StatelessWidget {
             ),
           ),
         ],
-        child: ArDriveIcons.refresh(
-          color: colorTokens.textMid,
-        ),
+        child: ArDriveIcons.refresh(color: colorTokens.textMid),
       ),
     );
   }

diff --git a/lib/components/profile_card.dart b/lib/components/profile_card.dart
@@ -548,127 +548,12 @@ class _ProfileCardState extends State<ProfileCard> {
   }
 
   Widget _buildProfileCardHeader(BuildContext context, String walletAddress) {
-    final typography = ArDriveTypographyNew.of(context);
-    return BlocBuilder<ProfileNameBloc, ProfileNameState>(
-      builder: (context, state) {
-        final primaryName = state is ProfileNameLoaded
-            ? state.primaryNameDetails.primaryName
-            : truncateString(walletAddress, offsetStart: 2, offsetEnd: 2);
-        double maxWidth = 100;
-
-        if (state is ProfileNameLoaded) {
-          maxWidth = primaryName.length * 15;
-
-          if (maxWidth < 110) {
-            maxWidth = 110;
-          }
-
-          if (maxWidth > 200) {
-            maxWidth = 200;
-          }
-        }
-        String truncatedWalletAddress;
-        if (primaryName.length > 20) {
-          truncatedWalletAddress =
-              truncateString(walletAddress, offsetStart: 10, offsetEnd: 10);
-        } else {
-          truncatedWalletAddress = truncateString(walletAddress,
-              offsetStart: primaryName.length ~/ 2,
-              offsetEnd: primaryName.length ~/ 2);
-        }
-
-        String? tooltipMessage;
-
-        if (primaryName.length > 20) {
-          tooltipMessage = primaryName;
-        }
-
-        Widget? icon;
-
-        if (state is ProfileNameLoaded) {
-          if (state.primaryNameDetails.logo != null) {
-            icon = Padding(
-              padding: const EdgeInsets.only(right: 4.0),
-              child: ClipOval(
-                child: ArDriveImage(
-                  image: NetworkImage(
-                      'https://arweave.net/${state.primaryNameDetails.logo}'),
-                  width: 28,
-                  height: 28,
-                  fit: BoxFit.cover,
-                  errorBuilder: (context, error, stackTrace) {
-                    return const SizedBox.shrink();
-                  },
-                ),
-              ),
-            );
-          }
-        }
-
-        Widget? content;
-
-        final colorTokens = ArDriveTheme.of(context).themeData.colorTokens;
-        if (state is ProfileNameLoaded) {
-          content = SizedBox(
-            height: 46,
-            width: maxWidth,
-            child: Row(
-              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-              mainAxisSize: MainAxisSize.max,
-              children: [
-                if (icon != null) ...[
-                  icon,
-                ],
-                Expanded(
-                  child: SizedBox(
-                    height: 46,
-                    width: maxWidth,
-                    child: Column(
-                      mainAxisSize: MainAxisSize.min,
-                      children: [
-                        Text(
-                          primaryName,
-                          overflow: TextOverflow.ellipsis,
-                          maxLines: 1,
-                          style: typography.paragraphLarge(
-                            fontWeight: ArFontWeight.semiBold,
-                            color: colorTokens.textHigh,
-                          ),
-                        ),
-                        Text(
-                          truncatedWalletAddress,
-                          overflow: TextOverflow.clip,
-                          maxLines: 1,
-                          style: typography.paragraphSmall(
-                            fontWeight: ArFontWeight.book,
-                            color: colorTokens.textLow,
-                          ),
-                        ),
-                      ],
-                    ),
-                  ),
-                ),
-              ],
-            ),
-          );
-        }
-
-        return ArDriveTooltip(
-          message: tooltipMessage ?? '',
-          child: ArDriveButtonNew(
-            text: primaryName,
-            typography: typography,
-            variant: ButtonVariant.outline,
-            content: content,
-            maxWidth: maxWidth,
-            maxHeight: content != null ? 60 : 46,
-            onPressed: () {
-              setState(() {
-                _showProfileCard = !_showProfileCard;
-              });
-            },
-          ),
-        );
+    return ProfileCardHeader(
+      walletAddress: walletAddress,
+      onPressed: () {
+        setState(() {
+          _showProfileCard = !_showProfileCard;
+        });
       },
     );
   }
@@ -775,3 +660,149 @@ class _ProfileMenuAccordionItem extends StatelessWidget {
     );
   }
 }
+
+class ProfileCardHeader extends StatelessWidget {
+  final String walletAddress;
+  final VoidCallback onPressed;
+
+  const ProfileCardHeader({
+    super.key,
+    required this.walletAddress,
+    required this.onPressed,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final typography = ArDriveTypographyNew.of(context);
+
+    return BlocBuilder<ProfileNameBloc, ProfileNameState>(
+      builder: (context, state) {
+        final primaryName = _getPrimaryName(state, walletAddress);
+        final maxWidth = _calculateMaxWidth(primaryName, state);
+        final truncatedWalletAddress =
+            _getTruncatedWalletAddress(primaryName, walletAddress);
+        final tooltipMessage = primaryName.length > 20 ? primaryName : null;
+
+        return ArDriveTooltip(
+          message: tooltipMessage ?? '',
+          child: ArDriveButtonNew(
+            text: primaryName,
+            typography: typography,
+            variant: ButtonVariant.outline,
+            content: state is ProfileNameLoaded
+                ? _buildLoadedContent(context, state, primaryName,
+                    truncatedWalletAddress, maxWidth)
+                : null,
+            maxWidth: maxWidth,
+            maxHeight: state is ProfileNameLoaded ? 60 : 46,
+            onPressed: onPressed,
+          ),
+        );
+      },
+    );
+  }
+
+  String _getPrimaryName(ProfileNameState state, String walletAddress) {
+    if (state is ProfileNameLoaded) {
+      return state.primaryNameDetails.primaryName;
+    }
+    return truncateString(walletAddress, offsetStart: 2, offsetEnd: 2);
+  }
+
+  double _calculateMaxWidth(String primaryName, ProfileNameState state) {
+    if (state is! ProfileNameLoaded) {
+      return 100;
+    }
+
+    double width = primaryName.length * 15;
+    return width.clamp(110, 200);
+  }
+
+  String _getTruncatedWalletAddress(String primaryName, String walletAddress) {
+    if (primaryName.length > 20) {
+      return truncateString(walletAddress, offsetStart: 10, offsetEnd: 10);
+    }
+    return truncateString(
+      walletAddress,
+      offsetStart: primaryName.length ~/ 2,
+      offsetEnd: primaryName.length ~/ 2,
+    );
+  }
+
+  Widget? _buildProfileIcon(ProfileNameLoaded state) {
+    if (state.primaryNameDetails.logo == null) {
+      return null;
+    }
+
+    return Padding(
+      padding: const EdgeInsets.only(right: 16.0),
+      child: ClipOval(
+        child: ArDriveImage(
+          image: NetworkImage(
+            'https://arweave.net/${state.primaryNameDetails.logo}',
+          ),
+          width: 28,
+          height: 28,
+          fit: BoxFit.cover,
+          errorBuilder: (context, error, stackTrace) {
+            return const SizedBox.shrink();
+          },
+        ),
+      ),
+    );
+  }
+
+  Widget _buildLoadedContent(
+    BuildContext context,
+    ProfileNameLoaded state,
+    String primaryName,
+    String truncatedWalletAddress,
+    double maxWidth,
+  ) {
+    final typography = ArDriveTypographyNew.of(context);
+    final colorTokens = ArDriveTheme.of(context).themeData.colorTokens;
+    final icon = _buildProfileIcon(state);
+
+    return SizedBox(
+      height: 46,
+      width: maxWidth,
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+        mainAxisSize: MainAxisSize.max,
+        children: [
+          if (icon != null) icon,
+          Expanded(
+            child: SizedBox(
+              height: 46,
+              width: maxWidth,
+              child: Column(
+                mainAxisSize: MainAxisSize.min,
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Text(
+                    primaryName,
+                    overflow: TextOverflow.ellipsis,
+                    maxLines: 1,
+                    style: typography.paragraphLarge(
+                      fontWeight: ArFontWeight.semiBold,
+                      color: colorTokens.textHigh,
+                    ),
+                  ),
+                  Text(
+                    truncatedWalletAddress,
+                    overflow: TextOverflow.clip,
+                    maxLines: 1,
+                    style: typography.paragraphSmall(
+                      fontWeight: ArFontWeight.book,
+                      color: colorTokens.textLow,
+                    ),
+                  ),
+                ],
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
diff --git a/lib/components/side_bar.dart b/lib/components/side_bar.dart
@@ -518,21 +518,6 @@ class DriveListTile extends StatelessWidget {
   }
 }
 
-class HelpButton extends StatelessWidget {
-  const HelpButton({super.key});
-
-  @override
-  Widget build(BuildContext context) {
-    return ArDriveIconButton(
-      tooltip: appLocalizationsOf(context).help,
-      icon: ArDriveIcons.question(),
-      onPressed: () {
-        openUrl(url: Resources.helpLink);
-      },
-    );
-  }
-}
-
 Future<void> shareLogs({
   required BuildContext context,
 }) async {

diff --git a/lib/components/topbar/help_button.dart b/lib/components/topbar/help_button.dart
@@ -14,6 +14,7 @@ class HelpButtonTopBar extends StatelessWidget {
   Widget build(BuildContext context) {
     final colorTokens = ArDriveTheme.of(context).themeData.colorTokens;
     return HoverWidget(
+      tooltip: appLocalizationsOf(context).help,
       child: ArDriveDropdown(
         anchor: const Aligned(
           follower: Alignment.topRight,
@@ -53,13 +54,7 @@ class HelpButtonTopBar extends StatelessWidget {
             ),
           ),
         ],
-        child: ArDriveIconButton(
-          icon: ArDriveIcons.question(
-            size: 20,
-            color: colorTokens.textMid,
-          ),
-          tooltip: appLocalizationsOf(context).help,
-        ),
+        child: ArDriveIcons.question(color: colorTokens.textMid),
       ),
     );
   }

diff --git a/packages/ardrive_ui/assets/fonts/ArDriveIcons.ttf b/packages/ardrive_ui/assets/fonts/ArDriveIcons.ttf
-Original file line number
+Diff line change
@@ Expand Up / @@ -149,9 +149,7 @@ class SyncButton extends StatelessWidget { @@
                 ),
               ),
             ],
-            child: ArDriveIcons.refresh(
-              color: colorTokens.textMid,
-            ),
+            child: ArDriveIcons.refresh(color: colorTokens.textMid),
           ),
         );
       }
@@ Expand Down @@