Skip to content

Replace png icons with svgs #534

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Aug 26, 2025
Merged

Replace png icons with svgs #534

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
6bebe5e
chore: remove unused imports and comments from chat and network screens
Quwaysim Aug 21, 2025
f08152f
Revert "chore: remove unused imports and comments from chat and netwo…
Quwaysim Aug 21, 2025
5140654
refactor: migrate PNG assets to SVG format and update asset references
Quwaysim Aug 21, 2025
867081d
refactor: replace Image with SvgPicture for chat icons and update col…
Quwaysim Aug 21, 2025
926c136
Merge branch 'master' into 491-replace-png-icons-with-svgs
Quwaysim Aug 25, 2025
89cbe4b
Merge branch 'master' into 491-replace-png-icons-with-svgs
Quwaysim Aug 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file removed assets/pngs/group_logo.png
View file
Open in desktop
Binary file not shown.
Binary file removed assets/pngs/hands.png
View file
Open in desktop
Binary file not shown.
Binary file removed assets/pngs/ic_add_chat.png
View file
Open in desktop
Binary file not shown.
Binary file removed assets/pngs/ic_avatar.png
View file
Open in desktop
Binary file not shown.
Binary file removed assets/pngs/ic_checkmark_dashed.png
View file
Open in desktop
Binary file not shown.
Binary file removed assets/pngs/ic_checkmark_filled.png
View file
Open in desktop
Binary file not shown.
Binary file removed assets/pngs/ic_checkmark_solid.png
View file
Open in desktop
Binary file not shown.
Binary file removed assets/pngs/ic_image.png
View file
Open in desktop
Binary file not shown.
Binary file removed assets/pngs/ic_notification_muted.png
View file
Open in desktop
Binary file not shown.
Binary file removed assets/pngs/ic_off_chat.png
View file
Open in desktop
Binary file not shown.
Binary file removed assets/pngs/ic_whitenoise.png
View file
Open in desktop
Binary file not shown.
Binary file removed assets/pngs/login_splash.png
View file
Open in desktop
Binary file not shown.
Binary file removed assets/pngs/profile_background.png
View file
Open in desktop
Binary file not shown.
5 changes: 5 additions & 0 deletions assets/svgs/ic_add_new_chat.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions assets/svgs/ic_checkmark_solid.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions assets/svgs/ic_off_chat.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion lib/ui/chat/widgets/chat_header_widget.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -205,7 +205,7 @@ class _DirectMessageHeaderState extends ConsumerState<DirectMessageHeader> {
extension StringExtension on String? {
bool get nullOrEmpty => this?.isEmpty ?? true;
// Returns a default image path if the string is null or empty
String get orDefault => (this == null || this!.isEmpty) ? AssetsPaths.icImage : this!;
String get orDefault => (this == null || this!.isEmpty) ? AssetsPaths.icUser : this!;
String get capitalizeFirst {
if (this == null || this!.isEmpty) return '';
return '${this![0].toUpperCase()}${this!.substring(1)}';
Expand Down
9 changes: 6 additions & 3 deletions lib/ui/contact_list/chat_list_screen.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -336,14 +336,17 @@ class _ChatListScreenState extends ConsumerState<ChatListScreen> with TickerProv
_unfocusSearchIfNeeded();
NewChatBottomSheet.show(context);
},
icon: Image.asset(
icon: SvgPicture.asset(
notAllRelayTypesConnected
? AssetsPaths.icOffChat
: AssetsPaths.icAddNewChat,
width: 21.w,
height: 21.w,
color: context.colors.solidNeutralWhite.withValues(
alpha: notAllRelayTypesConnected ? 0.5 : 1.0,
colorFilter: ColorFilter.mode(
context.colors.solidNeutralWhite.withValues(
alpha: notAllRelayTypesConnected ? 0.5 : 1.0,
),
BlendMode.srcIn,
),
),
),
Expand Down
32 changes: 10 additions & 22 deletions lib/ui/contact_list/group_chat_details_sheet.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,6 @@ class GroupChatDetailsSheet extends ConsumerStatefulWidget {

class _GroupChatDetailsSheetState extends ConsumerState<GroupChatDetailsSheet> with SafeToastMixin {
final TextEditingController _groupNameController = TextEditingController();
bool _hasGroupImage = false;
bool _isGroupNameValid = false;
bool _isCreatingGroup = false;

Expand Down Expand Up @@ -218,9 +217,7 @@ class _GroupChatDetailsSheetState extends ConsumerState<GroupChatDetailsSheet> w
Center(
child: GestureDetector(
onTap: () {
setState(() {
_hasGroupImage = !_hasGroupImage;
});
// TODO: implement group image upload.
},
child: Container(
width: 80.w,
Expand All @@ -230,24 +227,15 @@ class _GroupChatDetailsSheetState extends ConsumerState<GroupChatDetailsSheet> w
color: context.colors.baseMuted,
shape: BoxShape.circle,
),
child:
_hasGroupImage
? ClipRRect(
borderRadius: BorderRadius.circular(40.r),
child: Image.asset(
AssetsPaths.icWhiteNoise,
fit: BoxFit.cover,
),
)
: SvgPicture.asset(
AssetsPaths.icCamera,
width: 42.w,
height: 42.w,
colorFilter: ColorFilter.mode(
context.colors.mutedForeground,
BlendMode.srcIn,
),
),
child: SvgPicture.asset(
AssetsPaths.icCamera,
width: 42.w,
height: 42.w,
colorFilter: ColorFilter.mode(
context.colors.mutedForeground,
BlendMode.srcIn,
),
),
),
),
),
Expand Down
18 changes: 4 additions & 14 deletions lib/ui/core/themes/assets.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,27 +69,17 @@ class AssetsPaths {
static const String icTrashCan = '$_svgsDir/ic_trash_can.svg';
static const String icUser = '$_svgsDir/ic_user.svg';
static const String icUserFollow = '$_svgsDir/ic_user_follow.svg';
static const String icAddNewChat = '$_svgsDir/ic_add_new_chat.svg';
static const String icOffChat = '$_svgsDir/ic_off_chat.svg';
static const String icCheckmarkSolid = '$_svgsDir/ic_checkmark_solid.svg';
Comment on lines +72 to +74
Copy link
Contributor

@coderabbitai coderabbitai bot Aug 25, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent

🧩 Analysis chain

Clarify coexistence of icAddNewChat vs icNewChat.

There are now two “new chat” icons: icNewChat (Line 26) and icAddNewChat (Line 72). If both are intentional variants, add brief doc comments describing when each should be used. If not, consolidate to one name and migrate call sites.

Optionally add short docs on the new constants:

-  static const String icAddNewChat = '$_svgsDir/ic_add_new_chat.svg';
+  /// "Add new chat" (plus badge) – use on actions that create a chat.
+  static const String icAddNewChat = '$_svgsDir/ic_add_new_chat.svg';
-  static const String icOffChat = '$_svgsDir/ic_off_chat.svg';
+  /// "Chat off/disabled" state icon.
+  static const String icOffChat = '$_svgsDir/ic_off_chat.svg';

Run to verify distinct usage:

🏁 Script executed:

#!/bin/bash
# Expect: Both used intentionally in different contexts (review call sites).
rg -nP --type=dart -C2 'AssetsPaths\.(icAddNewChat|icNewChat)\b'

Length of output: 529

To confirm whether icNewChat is actually referenced anywhere, let’s search the entire codebase:

🏁 Script executed:

#!/bin/bash
# Check for any usage of the older `icNewChat` constant
rg -nP --type=dart '\bAssetsPaths\.icNewChat\b'

Length of output: 49

🏁 Script executed:

#!/bin/bash
# Locate the definition and context of the `icNewChat` constant in the assets file
rg -nP --type=dart 'icNewChat' -C3 lib/ui

Length of output: 742

Remove the unused icNewChat constant and document the new icons

Verified that icNewChat is defined in assets.dart (line 26) but is never referenced in the codebase. To avoid confusion and dead code, remove it, and add short doc comments to the remaining new-chat and off-chat icons:

• In lib/ui/core/themes/assets.dart—
– Remove the unused line:
dart static const String icNewChat = '$_svgsDir/ic_new_chat.svg';
• In the same file at lines 72–74—replace with:
diff - static const String icAddNewChat = '$_svgsDir/ic_add_new_chat.svg'; + /// "Add new chat" (plus badge) – use on actions that create a chat. + static const String icAddNewChat = '$_svgsDir/ic_add_new_chat.svg'; - static const String icOffChat = '$_svgsDir/ic_off_chat.svg'; + /// "Chat off/disabled" state icon. + static const String icOffChat = '$_svgsDir/ic_off_chat.svg';

🤖 Prompt for AI Agents 
In lib/ui/core/themes/assets.dart around line 26 and lines 72–74, remove the
dead unused constant `static const String icNewChat =
'$_svgsDir/ic_new_chat.svg';` (line ~26) and add short Dart doc comments to the
remaining chat-related icon constants at lines 72–74 (icAddNewChat, icOffChat,
icCheckmarkSolid) describing their purpose (e.g., /// Icon for adding a new
chat, /// Icon for toggling chat off, /// Solid checkmark icon) so the file has
no unused constants and the new icons are documented.

static const String icCheckmarkFilled = '$_svgsDir/ic_checkmark_filled.svg';
static const String icEye = '$_svgsDir/ic_eye.svg';
static const String icEyeOff = '$_svgsDir/ic_eye_off.svg';
static const String icCheckmark = '$_svgsDir/ic_checkmark.svg';

//PNGS
static const String icImage = '$_pngsDir/ic_image.png';
static const String groupLogo = '$_pngsDir/group_logo.png';
static const String loginSplash = '$_pngsDir/login_splash.png';
static const String icWhiteNoise = '$_pngsDir/ic_whitenoise.png';
static const String profileBackground = '$_pngsDir/profile_background.png';
static const String avatarPlaceholder = '$_pngsDir/avatar_placeholder.png';
static const String blueHoodie = '$_pngsDir/blue_hoodie.png';
static const String purpleWoman = '$_pngsDir/purple_woman.png';
static const String greenBird = '$_pngsDir/green_bird.png';
static const String hands = '$_pngsDir/hands.png';
static const String icAddNewChat = '$_pngsDir/ic_add_chat.png';
static const String icOffChat = '$_pngsDir/ic_off_chat.png';
static const String icNotificationMuted = '$_pngsDir/ic_notification_muted.png';
static const String icCheckmarkSolid = '$_pngsDir/ic_checkmark_solid.png';
static const String icCheckmarkDashed = '$_pngsDir/ic_checkmark_dashed.png';
static const String icCheckmarkFilled = '$_pngsDir/ic_checkmark_filled.png';
static const String login = '$_pngsDir/login.png';
static const String icAvatar = '$_pngsDir/ic_avatar.png';
}