From d9623e992d2ac2039eaa4f069c739d968c921cc6 Mon Sep 17 00:00:00 2001 From: Jagandeep Brar Date: Mon, 26 Sep 2022 21:02:50 -0400 Subject: [PATCH] fix(uiux): add circular radius to linear progression bars --- .vscode/cspell.json | 2 + lib/widgets/ui/linear_indicator.dart | 3 +- lib/widgets/ui/text_style.dart | 128 +++++++++++++++++++++++++-- pubspec.lock | 7 ++ pubspec.yaml | 1 + 5 files changed, 133 insertions(+), 8 deletions(-) diff --git a/.vscode/cspell.json b/.vscode/cspell.json index 05ec3df7..522c5c8c 100644 --- a/.vscode/cspell.json +++ b/.vscode/cspell.json @@ -55,6 +55,7 @@ "prefill", "Radarr", "Riverpod", + "roboto", "SABnzbd", "scrollview", "sksl", @@ -66,6 +67,7 @@ "Tautulli", "TestFlight", "Trakt", + "typescale", "unencrypted", "unignore", "Weblate", diff --git a/lib/widgets/ui/linear_indicator.dart b/lib/widgets/ui/linear_indicator.dart index 4e7811e7..49a270b1 100644 --- a/lib/widgets/ui/linear_indicator.dart +++ b/lib/widgets/ui/linear_indicator.dart @@ -24,9 +24,10 @@ class LunaLinearPercentIndicator extends StatelessWidget { alignment: Alignment.bottomCenter, child: LinearPercentIndicator( percent: percent!, - padding: const EdgeInsets.symmetric(horizontal: 2.0), + padding: EdgeInsets.zero, lineHeight: 4.0, progressColor: progressColor, + barRadius: const Radius.circular(LunaUI.BORDER_RADIUS), backgroundColor: backgroundColor ?? progressColor.withOpacity(LunaUI.OPACITY_SPLASH), ), diff --git a/lib/widgets/ui/text_style.dart b/lib/widgets/ui/text_style.dart index e832da21..c4e9b8b5 100644 --- a/lib/widgets/ui/text_style.dart +++ b/lib/widgets/ui/text_style.dart @@ -1,10 +1,124 @@ import 'package:flutter/material.dart'; +import 'package:google_fonts/google_fonts.dart'; -class LunaTextStyle extends TextStyle { - const LunaTextStyle.labelMedium() - : super( - fontSize: 12.0, // md.sys.typescale.label-medium.size - fontWeight: FontWeight.w500, // md.sys.typescale.label-medium.weight - height: 16.0 / 12.0, // md.sys.typescale.label-medium.line-height - ); +class LunaTextStyle { + static TextStyle bodySmall() { + return GoogleFonts.robotoFlex( + height: 16.0, // md.sys.typescale.body-small.line-height + fontSize: 12.0, // md.sys.typescale.body-small.size + fontWeight: FontWeight.w400, // md.sys.typescale.body-small.weight + ); + } + + static TextStyle bodyMedium() { + return GoogleFonts.robotoFlex( + height: 20.0, // md.sys.typescale.body-medium.line-height + fontSize: 14.0, // md.sys.typescale.body-medium.size + fontWeight: FontWeight.w400, // md.sys.typescale.body-medium.weight + ); + } + + static TextStyle bodyLarge() { + return GoogleFonts.robotoFlex( + height: 24.0, // md.sys.typescale.body-large.line-height + fontSize: 16.0, // md.sys.typescale.body-large.size + fontWeight: FontWeight.w400, // md.sys.typescale.body-large.weight + ); + } + + static TextStyle displaySmall() { + return GoogleFonts.robotoFlex( + height: 44.0, // md.sys.typescale.display-small.line-height + fontSize: 36.0, // md.sys.typescale.display-small.size + fontWeight: FontWeight.w400, // md.sys.typescale.display-small.weight + ); + } + + static TextStyle displayMedium() { + return GoogleFonts.robotoFlex( + height: 52.0, // md.sys.typescale.display-medium.line-height + fontSize: 45.0, // md.sys.typescale.display-medium.size + fontWeight: FontWeight.w400, // md.sys.typescale.display-medium.weight + ); + } + + static TextStyle displayLarge() { + return GoogleFonts.robotoFlex( + height: 64.0, // md.sys.typescale.display-large.line-height + fontSize: 57.0, // md.sys.typescale.display-large.size + fontWeight: FontWeight.w400, // md.sys.typescale.display-large.weight + ); + } + + static TextStyle headlineSmall() { + return GoogleFonts.robotoFlex( + height: 40.0, // md.sys.typescale.headline-small.line-height + fontSize: 32.0, // md.sys.typescale.headline-small.size + fontWeight: FontWeight.w400, // md.sys.typescale.headline-small.weight + ); + } + + static TextStyle headlineMedium() { + return GoogleFonts.robotoFlex( + height: 36.0, // md.sys.typescale.headline-medium.line-height + fontSize: 28.0, // md.sys.typescale.headline-medium.size + fontWeight: FontWeight.w400, // md.sys.typescale.headline-medium.weight + ); + } + + static TextStyle headlineLarge() { + return GoogleFonts.robotoFlex( + height: 32.0, // md.sys.typescale.headline-large.line-height + fontSize: 24.0, // md.sys.typescale.headline-large.size + fontWeight: FontWeight.w400, // md.sys.typescale.headline-large.weight + ); + } + + static TextStyle labelSmall() { + return GoogleFonts.robotoFlex( + height: 16.0, // md.sys.typescale.label-small.line-height + fontSize: 11.0, // md.sys.typescale.label-small.size + fontWeight: FontWeight.w500, // md.sys.typescale.label-small.weight + ); + } + + static TextStyle labelMedium() { + return GoogleFonts.robotoFlex( + height: 16.0, // md.sys.typescale.label-medium.line-height + fontSize: 12.0, // md.sys.typescale.label-medium.size + fontWeight: FontWeight.w500, // md.sys.typescale.label-medium.weight + ); + } + + static TextStyle labelLarge() { + return GoogleFonts.robotoFlex( + height: 20.0, // md.sys.typescale.label-large.line-height + fontSize: 14.0, // md.sys.typescale.label-large.size + fontWeight: FontWeight.w500, // md.sys.typescale.label-large.weight + ); + } + + static TextStyle titleSmall() { + return GoogleFonts.robotoFlex( + height: 20.0, // md.sys.typescale.title-small.line-height + fontSize: 14.0, // md.sys.typescale.title-small.size + fontWeight: FontWeight.w500, // md.sys.typescale.title-small.weight + ); + } + + static TextStyle titleMedium() { + return GoogleFonts.robotoFlex( + height: 24.0, // md.sys.typescale.title-medium.line-height + fontSize: 16.0, // md.sys.typescale.title-medium.size + fontWeight: FontWeight.w500, // md.sys.typescale.title-medium.weight + ); + } + + static TextStyle titleLarge() { + return GoogleFonts.robotoFlex( + height: 28.0, // md.sys.typescale.title-large.line-height + fontSize: 22.0, // md.sys.typescale.title-large.size + fontWeight: FontWeight.w400, // md.sys.typescale.title-large.weight + ); + } } diff --git a/pubspec.lock b/pubspec.lock index de31d818..ed73a3f6 100644 --- a/pubspec.lock +++ b/pubspec.lock @@ -560,6 +560,13 @@ packages: url: "https://pub.dartlang.org" source: hosted version: "5.0.1" + google_fonts: + dependency: "direct main" + description: + name: google_fonts + url: "https://pub.dartlang.org" + source: hosted + version: "3.0.1" google_nav_bar: dependency: "direct main" description: diff --git a/pubspec.yaml b/pubspec.yaml index 1b241b7f..d60a7961 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -31,6 +31,7 @@ dependencies: flutter_riverpod: ^2.0.0-dev.9 flutter_spinkit: ^5.1.0 go_router: ^5.0.1 + google_fonts: ^3.0.1 google_nav_bar: ^5.0.6 hive: ^2.2.3 hive_flutter: ^1.1.0