TF-3410 Reduce color noise and user load

[dab246]

Issue

#3410

Resolved

demo-web.online-video-cutter.com.mp4

[github-actions]

This PR has been deployed to https://linagora.github.io/tmail-flutter/3414.

[hoangdat]

• @dab246 please rebase to master

[dab246]

• @dab246 please rebase to master

Done

[hoangdat]

we should use as the typography define in figma to make it easy to change in the future.

Suggested change

	..styleTextConfirmButton(actionStyle ?? const TextStyle(
	fontSize: 17,
	height: 24 / 17,
	fontWeight: FontWeight.w500,
	color: Colors.white,
	))
	..styleTextConfirmButton(actionStyle ?? Theme.of(context).textTheme.bodyLarge))

And define details of bodyLarge in TextTheme(), then use it with ThemeData

[hoangdat]

static var fallbackTextTheme = const TextTheme(
    bodyLarge: TextStyle(
      fontFamily: 'Inter',
      fontWeight: FontWeight.w500,
      letterSpacing: -0.15,
    ),
    bodyMedium: TextStyle(
      fontFamily: 'Inter',
      fontWeight: FontWeight.w500,
      letterSpacing: 0.25,
    ),
    bodySmall: TextStyle(
      fontFamily: 'Inter',
      fontWeight: FontWeight.w500,
      letterSpacing: 0.4,
    ),
    labelLarge: TextStyle(
      fontFamily: 'Inter',
      fontWeight: FontWeight.w500,
      letterSpacing: 0.1,
    ),
    labelSmall: TextStyle(
      fontFamily: 'Inter',
      fontWeight: FontWeight.w500,
      letterSpacing: 0.5,
    ),
    displayLarge: TextStyle(
      fontFamily: 'Inter',
      fontWeight: FontWeight.w700,
    ),
    displayMedium: TextStyle(
      fontFamily: 'Inter',
      fontWeight: FontWeight.w600,
      letterSpacing: 0.4,
    ),
    displaySmall: TextStyle(
      fontFamily: 'Inter',
      fontWeight: FontWeight.w600,
      letterSpacing: 0.4,
    ),
    headlineMedium: TextStyle(
      fontFamily: 'Inter',
      fontWeight: FontWeight.w600,
    ),
    headlineSmall: TextStyle(
      fontFamily: 'Inter',
      fontWeight: FontWeight.w600,
      letterSpacing: 0.4,
    ),
    headlineLarge: TextStyle(
      fontFamily: 'Inter',
      fontWeight: FontWeight.w600,
      fontSize: 32,
    ),
    titleLarge: TextStyle(
      fontFamily: 'Inter',
      fontWeight: FontWeight.w600,
      letterSpacing: -0.15,
    ),
    titleMedium: TextStyle(
      fontFamily: 'Inter',
      fontWeight: FontWeight.w500,
      letterSpacing: 0.15,
    ),
    titleSmall: TextStyle(
      fontFamily: 'Inter',
      fontWeight: FontWeight.w500,
      letterSpacing: 0.1,
    ),
  );

[dab246]

Updated

[hoangdat]

• list email item in ThreadView was not applied correct font
  

[hoangdat]

• wrong font size, it must be Body/Body2
  

[hoangdat]

• should be M3/body/medium2 size 14, weight 600

[hoangdat]

• color of next/previous button should be gray...
  

[hoangdat]

• should be 50x50
  

[hoangdat]

• should be Heading/Heading small
• apply new design for these components too

[hoangdat]

• should be Body/ body 1

[hoangdat]

• should use Heading/Heading small

[hoangdat]

• size 17, weight 500

[dab246]

• list email item in ThreadView was not applied correct font

• wrong font size, it must be Body/Body2

• should be M3/body/medium2 size 14, weight 600

• color of next/previous button should be gray...

Fixed

• should be 50x50

What you see is Align. Its size is exactly 50px

• should be Heading/Heading small

• apply new design for these components too

• should be Body/ body 1

• should use Heading/Heading small

• size 17, weight 500

Fixed.