SK-606: Update UI for profile

sama_chat_client/lib/src/features/conversations_list/view/conversations_page.dart

@@ -46,22 +46,7 @@ class HomePage extends StatelessWidget {
               }
             },
             child: const ConversationsList(),
-          ),
-          floatingActionButton: state.status == SharingIntentStatus.processing
-              ? null
-              : ConnectionChecker(
-                  child: FloatingActionButton(
-                    // fix error https://github.com/flutter/flutter/issues/115358
-                    heroTag: null,
-                    child: const Padding(
-                      padding: EdgeInsets.only(top: 4.0),
-                      child: Icon(Icons.add_comment_outlined, size: 32.0),
-                    ),
-                    onPressed: () {
-                      context.push(groupCreateScreenPath);
-                    },
-                  ),
-                ));
+          ));
     });
   }
 }
@@ -104,8 +89,8 @@ class ChatAppBar extends StatelessWidget implements PreferredSizeWidget {
       leading: Align(
           alignment: Alignment.centerRight,
           child: IconButton(
-            icon:
-                const Icon(Icons.person_outline, color: lightWhite, size: 32.0),
+            icon: const Icon(Icons.account_circle_outlined,
+                color: lightWhite, size: 32.0),
             tooltip: 'Profile',
             onPressed: () {
               context.push(profilePath);
@@ -119,8 +104,8 @@ class ChatAppBar extends StatelessWidget implements PreferredSizeWidget {
           child: IconButton(
             onPressed: () => _openSearch(context),
             icon: const Icon(
-              Icons.search,
-              color: white,
+              Icons.edit_note_outlined,
+              color: lightWhite,
               size: 32,
             ),
           ),
@@ -130,7 +115,8 @@ class ChatAppBar extends StatelessWidget implements PreferredSizeWidget {
   }
 
   _openSearch(BuildContext context) {
-    context.push(globalSearchPath);
+    context.push(groupCreateScreenPath);
+    // context.push(globalSearchPath);
   }
 
   @override

sama_chat_client/lib/src/features/profile/view/profile_form.dart

@@ -44,19 +44,18 @@ class AvatarNameTile extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return ListTile(
+    return IntrinsicWidth(
+        child: ListTile(
       titleAlignment: ListTileTitleAlignment.top,
-      title: Center(
-        child: Padding(
-          padding: const EdgeInsets.only(top: 8),
-          child: _UserAvatar(),
-        ),
+      title: Padding(
+        padding: const EdgeInsets.only(top: 8),
+        child: _UserAvatar(),
       ),
       subtitle: Padding(
         padding: const EdgeInsets.only(bottom: 4),
         child: _UserFullName(),
       ),
-    );
+    ));
   }
 }
 
@@ -72,20 +71,32 @@ class ProfileCard extends StatelessWidget {
         child: Card(
           child: Padding(
             padding: EdgeInsets.all(15),
-            child: Column(
-              mainAxisSize: MainAxisSize.min,
+            child: Stack(
               children: [
-                ConnectionChecker(child: AvatarNameTile()),
-                ConnectionChecker(child: _UsernameForm()),
-                SizedBox(height: columnItemMargin),
-                ConnectionChecker(child: _PhoneForm()),
-                SizedBox(height: columnItemMargin),
-                ConnectionChecker(child: _EmailForm()),
-                SizedBox(height: columnItemMargin),
-                ConnectionChecker(child: _AccountForm()),
-                Expanded(
-                    child: Align(
-                        alignment: Alignment.bottomRight, child: _LogoutForm()))
+                Card(
+                  color: paleMallow,
+                  margin: EdgeInsets.only(top: 60),
+                  child: Padding(
+                    padding: EdgeInsets.only(top: 100, left: 4, right: 4),
+                    child: Column(
+                      mainAxisSize: MainAxisSize.min,
+                      children: [
+                        ConnectionChecker(child: _UsernameForm()),
+                        SizedBox(height: columnItemMargin),
+                        ConnectionChecker(child: _PhoneForm()),
+                        SizedBox(height: columnItemMargin),
+                        ConnectionChecker(child: _EmailForm()),
+                        SizedBox(height: columnItemMargin),
+                        ConnectionChecker(child: _AccountForm()),
+                      ],
+                    ),
+                  ),
+                ),
+                Align(alignment: Alignment.bottomRight, child: _LogoutForm()),
+                Align(
+                  alignment: Alignment.topCenter,
+                  child: ConnectionChecker(child: AvatarNameTile()),
+                ),
               ],
             ),
           ),
@@ -122,50 +133,48 @@ class _UserFullName extends StatelessWidget {
             previous.userLastname != current.userLastname &&
                 current.userLastname.isPure,
         builder: (context, state) {
-          return Align(
-              alignment: Alignment.center,
-              child: TextButton(
-                onPressed: () {
-                  showDialog(
-                      context: context,
-                      builder: (_) {
-                        return BlocProvider.value(
-                          value: BlocProvider.of<ProfileBloc>(context),
-                          child: const NameDialogInput(),
-                        );
-                      });
-                },
-                style: TextButton.styleFrom(
-                    minimumSize: Size.zero,
-                    tapTargetSize: MaterialTapTargetSize.shrinkWrap,
-                    alignment: Alignment.center),
-                child: Column(children: [
-                  Text(
-                    state.userFirstname.value.isEmpty
-                        ? "First name"
-                        : state.userFirstname.value,
-                    style: TextStyle(
-                        fontSize: 22,
-                        fontWeight: state.userFirstname.value.isEmpty
-                            ? FontWeight.w200
-                            : FontWeight.bold,
-                        color: signalBlack),
-                    overflow: TextOverflow.ellipsis,
-                  ),
-                  Text(
-                    state.userLastname.value.isEmpty
-                        ? "Last name"
-                        : state.userLastname.value,
-                    style: TextStyle(
-                        fontSize: 18,
-                        color: signalBlack,
-                        fontWeight: state.userLastname.value.isEmpty
-                            ? FontWeight.w200
-                            : FontWeight.normal),
-                    overflow: TextOverflow.ellipsis,
-                  ),
-                ]),
-              ));
+          return TextButton(
+            onPressed: () {
+              showDialog(
+                  context: context,
+                  builder: (_) {
+                    return BlocProvider.value(
+                      value: BlocProvider.of<ProfileBloc>(context),
+                      child: const NameDialogInput(),
+                    );
+                  });
+            },
+            style: TextButton.styleFrom(
+                minimumSize: Size.zero,
+                tapTargetSize: MaterialTapTargetSize.shrinkWrap,
+                alignment: Alignment.center),
+            child: Column(mainAxisSize: MainAxisSize.min, children: [
+              Text(
+                state.userFirstname.value.isEmpty
+                    ? "First name"
+                    : state.userFirstname.value,
+                style: TextStyle(
+                    fontSize: 22,
+                    fontWeight: state.userFirstname.value.isEmpty
+                        ? FontWeight.w200
+                        : FontWeight.bold,
+                    color: signalBlack),
+                overflow: TextOverflow.ellipsis,
+              ),
+              Text(
+                state.userLastname.value.isEmpty
+                    ? "Last name"
+                    : state.userLastname.value,
+                style: TextStyle(
+                    fontSize: 18,
+                    color: signalBlack,
+                    fontWeight: state.userLastname.value.isEmpty
+                        ? FontWeight.w200
+                        : FontWeight.normal),
+                overflow: TextOverflow.ellipsis,
+              ),
+            ]),
+          );
         });
   }
 }
@@ -185,7 +194,7 @@ class _UsernameForm extends StatelessWidget {
 }
 
 class _PhoneForm extends StatelessWidget {
-  const _PhoneForm({super.key});
+  const _PhoneForm();
 
   @override
   Widget build(BuildContext context) {
@@ -325,15 +334,13 @@ class _LogoutForm extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return TextButton.icon(
+    return ElevatedButton.icon(
       onPressed: () {
         context.read<AuthenticationBloc>().add(AuthenticationLogoutRequested());
       },
       icon: const Icon(Icons.exit_to_app_outlined, color: dullGray, size: 25),
       style: TextButton.styleFrom(
-          minimumSize: Size.zero,
-          tapTargetSize: MaterialTapTargetSize.shrinkWrap,
-          alignment: Alignment.centerLeft),
+          backgroundColor: paleMallow, alignment: Alignment.centerLeft),
       label: const Text(
         'Logout',
         style: TextStyle(fontWeight: FontWeight.w300),
@@ -451,7 +458,7 @@ class InfoDialogInput extends StatelessWidget {
           return AlertDialog(
               title: const Text('Edit personal info'),
               actionsPadding: const EdgeInsets.only(bottom: 8),
-              contentPadding: const EdgeInsets.fromLTRB(16, 16, 16, 8),
+              contentPadding: const EdgeInsets.fromLTRB(26, 16, 16, 8),
               content: Column(mainAxisSize: MainAxisSize.min, children: [
                 Container(
                   padding: const EdgeInsets.all(8),

sama_chat_client/lib/src/shared/ui/colors.dart

@@ -11,6 +11,7 @@ const Color dullGray = Color(0xFF6D6D6D);
 const Color signalBlack = Color(0xFF2A2A2A);
 const Color blackBlue = Color(0xFF1B1B1D);
 const Color black = Color(0xFF000000);
+const Color paleMallow = Color(0xFFE6E7F8);
 const Color lightMallow = Color(0xFFDBDCFC);
 const Color slateBlue = Color(0xFF7678E5);
 const Color cyan = Color(0xFF00FFFF);

sama_chat_client/lib/src/shared/ui/view/user_forms.dart

@@ -14,25 +14,34 @@ class AvatarForm extends StatelessWidget {
     return Container(
         decoration: BoxDecoration(
           color: black,
-          borderRadius: BorderRadius.circular(5.0),
+          shape: BoxShape.circle,
+          border: Border.all(color: white, width: 2),
+            boxShadow: [
+              BoxShadow(
+                color: black.withValues(alpha: 0.5),
+                spreadRadius: 3,
+                blurRadius: 7,
+                offset: const Offset(0, 3), // Controls the shadow's position
+              ),
+            ],
         ),
-        padding: const EdgeInsets.all(4.0),
         height: 85.0,
         width: 85.0,
         child: Center(child: () {
           if (avatar == null || avatar!.isEmpty) {
             return _defaultIcon();
           } else {
-            return Image.network(
+            return ClipOval(
+                child: Image.network(
               avatar!,
-              height: 75.0,
-              width: 75.0,
+              height: 85.0,
+              width: 85.0,
               fit: BoxFit.cover,
               errorBuilder: (BuildContext context, Object exception,
                   StackTrace? stackTrace) {
                 return _defaultIcon();
               },
-            );
+            ));
           }
         }()));
   }
@@ -90,19 +99,19 @@ class UserPhoneForm extends StatelessWidget {
     return Ink(
         padding: const EdgeInsets.all(8),
         decoration: BoxDecoration(
-          color: lightWhite,
+          color: white,
           border: Border.all(
             color: lightWhite,
           ),
-          borderRadius: BorderRadius.circular(10),
+          borderRadius: BorderRadius.circular(30),
         ),
         child: Column(
           crossAxisAlignment: CrossAxisAlignment.start,
           children: [
             const Row(
-              crossAxisAlignment: CrossAxisAlignment.end,
+              crossAxisAlignment: CrossAxisAlignment.center,
               children: [
-                Icon(Icons.local_phone_outlined, color: dullGray, size: 25),
+                Icon(Icons.local_phone_outlined, color: dullGray, size: 26),
                 Text(
                   ' Mobile phone',
                   style: TextStyle(fontWeight: FontWeight.w300),
@@ -137,7 +146,7 @@ class UserEmailForm extends StatelessWidget {
           border: Border.all(
             color: lightWhite,
           ),
-          borderRadius: BorderRadius.circular(10),
+          borderRadius: BorderRadius.circular(30),
         ),
         child: Column(
           crossAxisAlignment: CrossAxisAlignment.start,