feat: make the storage indicator text more readable

lib/blend_mask.dart

@@ -0,0 +1,49 @@
+import 'package:flutter/rendering.dart';
+import 'package:flutter/widgets.dart';
+
+// Applies a BlendMode to its child.
+class BlendMask extends SingleChildRenderObjectWidget {
+  final BlendMode blendMode;
+  final double opacity;
+
+  const BlendMask({
+    required this.blendMode,
+    this.opacity = 1.0,
+    super.key,
+    super.child,
+  });
+
+  @override
+  RenderObject createRenderObject(context) {
+    return RenderBlendMask(blendMode, opacity);
+  }
+
+  @override
+  void updateRenderObject(BuildContext context, RenderBlendMask renderObject) {
+    renderObject.blendMode = blendMode;
+    renderObject.opacity = opacity;
+  }
+}
+
+class RenderBlendMask extends RenderProxyBox {
+  BlendMode blendMode;
+  double opacity;
+
+  RenderBlendMask(this.blendMode, this.opacity);
+
+  @override
+  void paint(context, offset) {
+    // Create a new layer and specify the blend mode and opacity to composite it with:
+    context.canvas.saveLayer(
+      offset & size,
+      Paint()
+        ..blendMode = blendMode
+        ..color = Color.fromARGB((opacity * 255).round(), 255, 255, 255),
+    );
+
+    super.paint(context, offset);
+
+    // Composite the layer back into the canvas using the blendmode:
+    context.canvas.restore();
+  }
+}

lib/widgets/my_profile_dialog.dart

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:intl/intl.dart';
 import 'package:recon/apis/user_api.dart';
 import 'package:recon/auxiliary.dart';
+import 'package:recon/blend_mask.dart';
 import 'package:recon/client_holder.dart';
 import 'package:recon/models/personal_profile.dart';
 import 'package:recon/widgets/default_error_widget.dart';
@@ -63,9 +64,10 @@ class _MyProfileDialogState extends State<MyProfileDialog> {
                           imageUri: Aux.resdbToHttp(profile.userProfile.iconUrl),
                           radius: 32,
                         ),
-                        Padding(
+                        const SizedBox(
-                            padding: const EdgeInsets.only(left: 12),
+                          width: 12,
-                            child: Column(
+                        ),
+                        Column(
                           crossAxisAlignment: CrossAxisAlignment.start,
                           children: [
                             Text(profile.username, style: textTheme.titleLarge),
@@ -74,7 +76,7 @@ class _MyProfileDialogState extends State<MyProfileDialog> {
                               style: textTheme.labelMedium?.copyWith(color: profile.accountType.color),
                             ),
                           ],
-                            )),
+                        ),
                       ],
                     ),
                   ),
@@ -254,6 +256,8 @@ class StorageIndicator extends StatelessWidget {
                   height: 48,
                   padding: const EdgeInsets.symmetric(horizontal: 12),
                   alignment: Alignment.center,
+                  child: BlendMask(
+                    blendMode: BlendMode.colorDodge,
                     child: Row(
                       mainAxisAlignment: MainAxisAlignment.spaceBetween,
                       crossAxisAlignment: CrossAxisAlignment.center,
@@ -273,6 +277,7 @@ class StorageIndicator extends StatelessWidget {
                                   style: Theme.of(context).textTheme.labelSmall?.copyWith(fontSize: 10)),
                             ]),
                       ],
+                    ),
                   )),
             ]),
           )