TF-3985 Change icons and style to be consistent with Twake drive storage

core/lib/presentation/extensions/color_extension.dart

@@ -231,6 +231,7 @@ extension AppColor on Color {
   static const colorContactViewClearFilterButton = Color(0x001C3D0D);
   static const steelGrayA540 = Color(0xFF55687D);
   static const steelGray200 = Color(0xFFAEB7C2);
+  static const steelGray80 = Color(0xFFE7E8EC);
   static const blue700 = Color(0xFF208BFF);
   static const steelGray400 = Color(0xFF818C99);
   static const steelGray600 = Color(0xFF4E5966);

lib/features/base/widget/premium/increase_space_button_widget.dart

@@ -7,6 +7,7 @@ import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 
 class IncreaseSpaceButtonWidget extends StatelessWidget {
   final ImagePaths imagePaths;
+  final bool isDesktop;
   final VoidCallback onTapAction;
   final EdgeInsetsGeometry? margin;
 
@@ -14,6 +15,7 @@ class IncreaseSpaceButtonWidget extends StatelessWidget {
     super.key,
     required this.imagePaths,
     required this.onTapAction,
+    this.isDesktop = false,
     this.margin,
   });
 
@@ -22,6 +24,7 @@ class IncreaseSpaceButtonWidget extends StatelessWidget {
     return Container(
       constraints: const BoxConstraints(minWidth: 193),
       height: 44,
+      width: !isDesktop ? double.infinity : null,
       margin: margin,
       child: ConfirmDialogButton(
         label: AppLocalizations.of(context).increaseYourSpace,

lib/features/mailbox/presentation/mailbox_view_web.dart

@@ -40,14 +40,17 @@ class MailboxView extends BaseMailboxView {
             Obx(() {
               final isPremiumAvailable =
                   controller.mailboxDashBoardController.isPremiumAvailable;
+              final isDesktop = controller.responsiveUtils.isDesktop(context);
 
               if (isPremiumAvailable) {
                 return IncreaseSpaceButtonWidget(
                   imagePaths: controller.imagePaths,
-                  margin: const EdgeInsetsDirectional.only(
-                    start: 26,
+                  margin: EdgeInsetsDirectional.only(
+                    start: isDesktop ? 26 : 24,
                     bottom: 8,
+                    end: isDesktop ? 0 : 24,
                   ),
+                  isDesktop: isDesktop,
                   onTapAction: () {},
                 );
               } else {

lib/features/quotas/domain/extensions/quota_extensions.dart

@@ -15,6 +15,15 @@ extension QuotasExtensions on Quota {
 
   String get hardLimitStorageAsString => presentationHardLimit != null ? filesize(presentationHardLimit!.value) : '';
 
+  String get quotaAvailableStorageAsString {
+    if (used != null &&
+        presentationHardLimit != null &&
+        presentationHardLimit!.value > used!.value) {
+      return filesize(presentationHardLimit!.value - used!.value);
+    }
+    return '0 B';
+  }
+
   bool get isWarnLimitReached {
     if (used != null && warnLimit != null) {
       return used!.value >= warnLimit!.value * 0.9;
@@ -48,7 +57,7 @@ extension QuotasExtensions on Quota {
       return '${AppLocalizations.of(context).textQuotasOutOfStorage}'
         '\n${AppLocalizations.of(context).quotaStateLabel(usedStorageAsString, hardLimitStorageAsString)}';
     } else {
-      return AppLocalizations.of(context).quotaStateLabel(usedStorageAsString, hardLimitStorageAsString);
+      return AppLocalizations.of(context).quotaAvailableLabel(quotaAvailableStorageAsString);
     }
   }
 

lib/features/quotas/presentation/quotas_view.dart

@@ -1,4 +1,5 @@
 import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:core/presentation/utils/theme_utils.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:get/get.dart';
@@ -31,8 +32,8 @@ class QuotasView extends GetWidget<QuotasController> {
               : const EdgeInsets.symmetric(vertical: 16),
           margin: isDesktop
             ? const EdgeInsetsDirectional.only(start: 16)
-            : const EdgeInsetsDirectional.only(start: 24),
-          width: isDesktop ? 224 : 196,
+            : const EdgeInsetsDirectional.symmetric(horizontal: 24),
+          width: isDesktop ? 224 : double.infinity,
           alignment: AlignmentDirectional.centerStart,
           child: Column(
             mainAxisSize: MainAxisSize.min,
@@ -51,8 +52,11 @@ class QuotasView extends GetWidget<QuotasController> {
                   Expanded(
                     child: Text(
                       AppLocalizations.of(context).storageQuotas,
-                      style: Theme.of(context).textTheme.bodySmall?.copyWith(
+                      style: ThemeUtils.textStyleInter500().copyWith(
                         color: AppColor.steelGray400,
+                        fontSize: 12,
+                        height: 15.76 / 12,
+                        letterSpacing: 0.5,
                       ),
                       maxLines: 1,
                       overflow: TextOverflow.ellipsis,
@@ -75,21 +79,31 @@ class QuotasView extends GetWidget<QuotasController> {
               ),
               const SizedBox(height: QuotasViewStyles.space),
               SizedBox(
-                width: QuotasViewStyles.progressBarMaxWidth,
+                width: isDesktop
+                    ? QuotasViewStyles.progressBarMaxWidth
+                    : double.infinity,
                 child: LinearProgressIndicator(
                   color: octetQuota.getQuotasStateProgressBarColor(),
                   minHeight: QuotasViewStyles.progressBarHeight,
                   backgroundColor: QuotasViewStyles.progressBarBackgroundColor,
+                  borderRadius: const BorderRadius.all(
+                    Radius.circular(
+                      QuotasViewStyles.progressBarBorderRadius,
+                    ),
+                  ),
                   value: octetQuota.usedStoragePercent,
                 ),
               ),
               const SizedBox(height: QuotasViewStyles.space),
               Text(
                 octetQuota.getQuotasStateTitle(context),
-                style: Theme.of(context).textTheme.bodySmall?.copyWith(
+                style: ThemeUtils.textStyleInter500().copyWith(
                   color: octetQuota.getQuotasStateTitleColor(),
+                  fontSize: 12,
+                  height: 15.76 / 12,
+                  letterSpacing: 0.5,
                 ),
-                maxLines: 1,
+                maxLines: 2,
                 overflow: TextOverflow.ellipsis,
               )
             ],

lib/features/quotas/presentation/styles/quotas_view_styles.dart

@@ -9,7 +9,7 @@ class QuotasViewStyles {
   static const double space = 8;
   static const double progressBarHeight = 3;
   static const double progressBarMaxWidth = 193;
+  static const double progressBarBorderRadius = 5;
 
-  static const Color progressBarBackgroundColor = AppColor.colorDivider;
-  static const Color topLineColor = AppColor.colorDividerHorizontal;
+  static const Color progressBarBackgroundColor = AppColor.steelGray80;
 }

lib/l10n/intl_messages.arb

@@ -1,5 +1,5 @@
 {
-  "@@last_modified": "2025-09-09T13:12:15.883838",
+  "@@last_modified": "2025-09-09T13:40:24.145761",
   "initializing_data": "Initializing data...",
   "@initializing_data": {
     "type": "text",
@@ -4677,5 +4677,15 @@
     "type": "text",
     "placeholders_order": [],
     "placeholders": {}
+  },
+  "quotaAvailableLabel": "{count} available",
+  "@quotaAvailableLabel": {
+    "type": "text",
+    "placeholders_order": [
+      "count"
+    ],
+    "placeholders": {
+      "count": {}
+    }
   }
 }

lib/main/localizations/app_localizations.dart

@@ -4935,4 +4935,12 @@ class AppLocalizations {
       name: 'increaseYourSpace',
     );
   }
+
+  String quotaAvailableLabel(String count) {
+    return Intl.message(
+      '$count available',
+      name: 'quotaAvailableLabel',
+      args: [count],
+    );
+  }
 }