fix(desktop-icon): Desktop Icons Fix (#2303)
This change: - Adds svg icons for history and notification - Updates the sidebar and services widget to use new images - Fixes services widget icon looking very tiny on desktop
David Adegoke committed
Jun 4, 2025 at 18:15 UTC
b0edf1fe75e69d886c6b0aaff3baa4c6a53fbbcb
5 files changed
+28
-18
assets/images/history.svg
new
+10
@@ -0,0 +1,10 @@
1
+<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+<g clip-path="url(#clip0_67_21)">
3
+<path d="M70.4443 8.33334C101.173 8.33336 126 33.1598 126 63.889C126 94.6181 101.173 119.445 70.4443 119.445C53.0832 119.445 37.4581 111.458 27.3887 98.9583L37.2842 89.0628C44.7495 98.9587 56.9027 105.556 70.4443 105.556C93.361 105.556 112.111 86.8056 112.111 63.889C112.111 40.9723 93.361 22.222 70.4443 22.222C56.9027 22.222 44.7495 28.8193 37.2842 38.7152C33.1175 44.0971 30.3405 50.521 29.2988 57.639C28.9516 59.7223 28.7773 61.8057 28.7773 63.889H42.667L21.833 84.722L1 63.889H14.8887C14.8887 61.9793 14.8891 60.2431 15.2363 58.3333C15.7572 52.7778 17.146 47.5692 19.0557 42.5345C27.3891 22.5694 47.3542 8.33334 70.4443 8.33334ZM75.6523 35.4163V60.9378L93.708 78.9925L83.8125 88.889L61.7637 66.6663V35.4163H75.6523Z" fill="white"/>
4
+</g>
5
+<defs>
6
+<clipPath id="clip0_67_21">
7
+<rect width="128" height="128" fill="white"/>
8
+</clipPath>
9
+</defs>
10
+</svg>
assets/images/notif.svg
new
+3
@@ -0,0 +1,3 @@
1
+<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+<path d="M77.9219 103.359C77.9219 111.953 71.0469 119 62.4531 119C53.8594 119 46.8125 111.953 46.8125 103.359C46.8125 102.672 46.8125 102.156 46.9844 101.641H9V87.8906H21.0312V51.9688C21.0312 28.25 40.2812 9 64 9C87.7188 9 106.969 28.25 106.969 51.9688V87.8906H119V101.641H77.9219V103.359ZM64 22.75C47.8438 22.75 34.7812 35.8125 34.7812 51.9688V87.8906H93.2188V51.9688C93.2188 35.8125 80.1562 22.75 64 22.75Z" fill="white"/>
3
+</svg>
lib/src/screens/dashboard/desktop_widgets/desktop_sidebar/side_menu_item.dart
+3
-2
@@ -1,3 +1,4 @@
1
+import 'package:cake_wallet/src/widgets/cake_image_widget.dart';
2
import 'package:flutter/material.dart';
3
4
class SideMenuItem extends StatelessWidget {
@@ -46,8 +47,8 @@ class SideMenuItem extends StatelessWidget {
47
color: _setColor(context),
48
size: 30,
49
)
49
- : Image.asset(
50
- imagePath ?? '',
50
+ : CakeImageWidget(
51
+ imageUrl: imagePath ?? '',
52
fit: BoxFit.cover,
53
height: 30,
54
width: 30,
lib/src/screens/dashboard/desktop_widgets/desktop_sidebar_wrapper.dart
+1
-6
@@ -63,9 +63,6 @@ class DesktopSidebarWrapper extends BasePage {
63
64
final pageController = PageController();
65
66
- final selectedIconPath = 'assets/images/desktop_transactions_solid_icon.png';
67
- final unselectedIconPath = 'assets/images/desktop_transactions_outline_icon.png';
68
-
66
double get sideMenuWidth => 76.0;
67
68
@override
@@ -103,9 +100,7 @@ class DesktopSidebarWrapper extends BasePage {
100
}
101
},
102
isSelected: desktopSidebarViewModel.currentPage == SidebarItem.transactions,
106
- imagePath: desktopSidebarViewModel.currentPage == SidebarItem.transactions
107
- ? selectedIconPath
108
- : unselectedIconPath,
103
+ imagePath: 'assets/images/history.svg',
104
),
105
SideMenuItem(
106
widget: ServicesUpdatesWidget(
lib/src/widgets/services_updates_widget.dart
+11
-10
@@ -3,11 +3,12 @@ import 'package:cake_wallet/entities/preferences_key.dart';
3
import 'package:cake_wallet/entities/service_status.dart';
4
import 'package:cake_wallet/generated/i18n.dart';
5
import 'package:cake_wallet/src/widgets/alert_with_one_action.dart';
6
+import 'package:cake_wallet/src/widgets/cake_image_widget.dart';
7
import 'package:cake_wallet/src/widgets/primary_button.dart';
8
import 'package:cake_wallet/src/widgets/service_status_tile.dart';
9
+import 'package:cake_wallet/utils/device_info.dart';
10
import 'package:cake_wallet/utils/show_pop_up.dart';
11
import 'package:flutter/material.dart';
10
-import 'package:flutter_svg/flutter_svg.dart';
12
import 'package:shared_preferences/shared_preferences.dart';
13
import 'package:url_launcher/url_launcher.dart';
14
@@ -40,16 +41,17 @@ class _ServicesUpdatesWidgetState extends State<ServicesUpdatesWidget> {
41
);
42
});
43
},
43
- child: SvgPicture.asset(
44
- "assets/images/notification_icon.svg",
44
+ child: CakeImageWidget(
45
+ imageUrl: "assets/images/notif.svg",
46
color: Theme.of(context).colorScheme.onSurface,
46
- width: 20,
47
- placeholderBuilder: (_) => Icon(Icons.error),
47
+ width: DeviceInfo.instance.isDesktop ? 30 : 20,
48
),
49
);
50
}
51
return Padding(
52
- padding: const EdgeInsets.only(left: 16, top: 12, right: 8, bottom: 8),
52
+ padding: DeviceInfo.instance.isDesktop
53
+ ? EdgeInsets.zero
54
+ : EdgeInsets.only(left: 16, top: 12, right: 8, bottom: 8),
55
child: FutureBuilder<ServicesResponse>(
56
future: widget.servicesResponse,
57
builder: (context, state) {
@@ -135,11 +137,10 @@ class _ServicesUpdatesWidgetState extends State<ServicesUpdatesWidget> {
137
: null,
138
child: Stack(
139
children: [
138
- SvgPicture.asset(
139
- "assets/images/notification_icon.svg",
140
+ CakeImageWidget(
141
+ imageUrl: "assets/images/notif.svg",
142
color: Theme.of(context).colorScheme.onSurface,
141
- width: 20,
142
- placeholderBuilder: (_) => Icon(Icons.error),
143
+ width: DeviceInfo.instance.isDesktop ? 30 : 20,
144
),
145
if (state.hasData && state.data!.hasUpdates && !wasOpened)
146
Container(