From 28916a9b9392ac9e09985db6181539d5da890b93 Mon Sep 17 00:00:00 2001 From: julian Date: Thu, 15 Sep 2022 13:48:28 -0600 Subject: [PATCH] desktop colors, text styles, and some ui element platform specific checks --- lib/notifications/show_flush_bar.dart | 1 + lib/pages/intro_view.dart | 9 +- lib/utilities/cfcolors.dart | 38 ++++++++ lib/utilities/text_styles.dart | 86 ++++++++++++------- .../custom_buttons/app_bar_icon_button.dart | 16 +++- lib/widgets/stack_text_field.dart | 10 ++- 6 files changed, 121 insertions(+), 39 deletions(-) diff --git a/lib/notifications/show_flush_bar.dart b/lib/notifications/show_flush_bar.dart index b250302bd..e6eed52bd 100644 --- a/lib/notifications/show_flush_bar.dart +++ b/lib/notifications/show_flush_bar.dart @@ -53,6 +53,7 @@ Future showFloatingFlushBar({ Constants.size.circularBorderRadius, ), margin: const EdgeInsets.all(20), + maxWidth: 550, ); final _route = flushRoute.showFlushbar( diff --git a/lib/pages/intro_view.dart b/lib/pages/intro_view.dart index 9e892fdad..b2361c8f8 100644 --- a/lib/pages/intro_view.dart +++ b/lib/pages/intro_view.dart @@ -3,6 +3,7 @@ import 'dart:io'; import 'package:flutter/gestures.dart'; import 'package:flutter/material.dart'; import 'package:stackwallet/pages/pinpad_views/create_pin_view.dart'; +import 'package:stackwallet/pages_desktop_specific/create_password/create_password_view.dart'; import 'package:stackwallet/utilities/assets.dart'; import 'package:stackwallet/utilities/cfcolors.dart'; import 'package:stackwallet/utilities/text_styles.dart'; @@ -254,13 +255,9 @@ class GetStartedButton extends StatelessWidget { width: 328, height: 70, child: TextButton( - style: Theme.of(context).textButtonTheme.style?.copyWith( - backgroundColor: MaterialStateProperty.all( - CFColors.stackAccent, - ), - ), + style: CFColors.getPrimaryEnabledButtonColor(context), onPressed: () { - // TODO: password setup flow + Navigator.of(context).pushNamed(CreatePasswordView.routeName); }, child: Text( "Get started", diff --git a/lib/utilities/cfcolors.dart b/lib/utilities/cfcolors.dart index 741ca1230..693ec3811 100644 --- a/lib/utilities/cfcolors.dart +++ b/lib/utilities/cfcolors.dart @@ -145,4 +145,42 @@ abstract class CFColors { } return MaterialColor(color.value, swatch); } + + // new + static const Color textDark = Color(0xFF232323); + static const Color textSubtitle1 = Color(0xFF8E9192); + static const Color textSubtitle2 = Color(0xFFA9ACAC); + + static const Color buttonTextSecondary = Color(0xFF232323); + + static const Color buttonTextPrimary = Color(0xFFFFFFFF); + static const Color buttonTextPrimaryDisabled = Color(0xFFF8F8F8); + + static const Color textFieldDefaultBackground = Color(0xFFEEEFF1); + + static const Color buttonBackgroundPrimary = Color(0xFF232323); + + static const Color buttonBackPrimaryDisabled = Color(0xFFD7D7D7); + + // button color themes + + static ButtonStyle? getPrimaryEnabledButtonColor(BuildContext context) => + Theme.of(context).textButtonTheme.style?.copyWith( + backgroundColor: MaterialStateProperty.all( + CFColors.buttonBackgroundPrimary, + ), + ); + static ButtonStyle? getPrimaryDisabledButtonColor(BuildContext context) => + Theme.of(context).textButtonTheme.style?.copyWith( + backgroundColor: MaterialStateProperty.all( + CFColors.buttonBackPrimaryDisabled, + ), + ); + + static ButtonStyle? getSecondaryEnabledButtonColor(BuildContext context) => + Theme.of(context).textButtonTheme.style?.copyWith( + backgroundColor: MaterialStateProperty.all( + CFColors.textFieldDefaultBackground, + ), + ); } diff --git a/lib/utilities/text_styles.dart b/lib/utilities/text_styles.dart index 71612a660..472385961 100644 --- a/lib/utilities/text_styles.dart +++ b/lib/utilities/text_styles.dart @@ -143,33 +143,61 @@ class STextStyles { fontSize: 10, ); - // static final TextStyle pinkHeader = GoogleFonts.workSans( - // color: CFColors.spark, - // fontWeight: FontWeight.w600, - // fontSize: 20, - // ); - // - // static final TextStyle textField = GoogleFonts.workSans( - // color: CFColors.dusk, - // fontWeight: FontWeight.w400, - // fontSize: 16, - // ); - // - // static final TextStyle textFieldHint = GoogleFonts.workSans( - // color: CFColors.twilight, - // fontWeight: FontWeight.w400, - // fontSize: 16, - // ); - // - // static final TextStyle textFieldSuffix = GoogleFonts.workSans( - // color: CFColors.twilight, - // fontWeight: FontWeight.w600, - // fontSize: 16, - // ); - // - // static final TextStyle label = GoogleFonts.workSans( - // color: CFColors.twilight, - // fontWeight: FontWeight.w500, - // fontSize: 12, - // ); +// Desktop + + static final TextStyle desktopH2 = GoogleFonts.inter( + color: CFColors.textDark, + fontWeight: FontWeight.w600, + fontSize: 32, + height: 32 / 32, + ); + + static final TextStyle desktopTextMedium = GoogleFonts.inter( + color: CFColors.textDark, + fontWeight: FontWeight.w500, + fontSize: 20, + height: 30 / 20, + ); + + static final TextStyle desktopSubtitleH2 = GoogleFonts.inter( + color: CFColors.textDark, + fontWeight: FontWeight.w400, + fontSize: 20, + height: 28 / 20, + ); + + static final TextStyle desktopButtonEnabled = GoogleFonts.inter( + color: CFColors.buttonTextPrimary, + fontWeight: FontWeight.w500, + fontSize: 20, + height: 26 / 20, + ); + + static final TextStyle desktopButtonDisabled = GoogleFonts.inter( + color: CFColors.buttonTextPrimaryDisabled, + fontWeight: FontWeight.w500, + fontSize: 20, + height: 26 / 20, + ); + + static final TextStyle desktopTextExtraSmall = GoogleFonts.inter( + color: CFColors.buttonTextPrimaryDisabled, + fontWeight: FontWeight.w500, + fontSize: 16, + height: 24 / 16, + ); + + static final TextStyle desktopButtonSecondaryEnabled = GoogleFonts.inter( + color: CFColors.buttonTextSecondary, + fontWeight: FontWeight.w500, + fontSize: 16, + height: 24 / 16, + ); + + static final TextStyle desktopTextFieldLabel = GoogleFonts.inter( + color: CFColors.textSubtitle2, + fontWeight: FontWeight.w500, + fontSize: 20, + height: 30 / 20, + ); } diff --git a/lib/widgets/custom_buttons/app_bar_icon_button.dart b/lib/widgets/custom_buttons/app_bar_icon_button.dart index ef523d8e2..deacf94f0 100644 --- a/lib/widgets/custom_buttons/app_bar_icon_button.dart +++ b/lib/widgets/custom_buttons/app_bar_icon_button.dart @@ -1,3 +1,5 @@ +import 'dart:io'; + import 'package:flutter/material.dart'; import 'package:flutter_svg/svg.dart'; import 'package:stackwallet/utilities/assets.dart'; @@ -52,10 +54,20 @@ class AppBarBackButton extends StatelessWidget { @override Widget build(BuildContext context) { + final isDesktop = + Platform.isMacOS || Platform.isWindows || Platform.isLinux; return Padding( - padding: const EdgeInsets.all(10), + padding: isDesktop + ? const EdgeInsets.symmetric( + vertical: 20, + horizontal: 24, + ) + : const EdgeInsets.all(10), child: AppBarIconButton( - color: CFColors.almostWhite, + size: isDesktop ? 56 : 32, + color: isDesktop + ? CFColors.textFieldDefaultBackground + : CFColors.almostWhite, shadows: const [], icon: SvgPicture.asset( Assets.svg.arrowLeft, diff --git a/lib/widgets/stack_text_field.dart b/lib/widgets/stack_text_field.dart index 140312999..bddc21a2f 100644 --- a/lib/widgets/stack_text_field.dart +++ b/lib/widgets/stack_text_field.dart @@ -1,16 +1,22 @@ +import 'dart:io'; + import 'package:flutter/material.dart'; import 'package:stackwallet/utilities/cfcolors.dart'; import 'package:stackwallet/utilities/text_styles.dart'; InputDecoration standardInputDecoration( String? labelText, FocusNode textFieldFocusNode) { + final isDesktop = Platform.isWindows || Platform.isMacOS || Platform.isLinux; + return InputDecoration( labelText: labelText, fillColor: textFieldFocusNode.hasFocus ? CFColors.textFieldActive : CFColors.textFieldInactive, - labelStyle: STextStyles.fieldLabel, - hintStyle: STextStyles.fieldLabel, + labelStyle: + isDesktop ? STextStyles.desktopTextFieldLabel : STextStyles.fieldLabel, + hintStyle: + isDesktop ? STextStyles.desktopTextFieldLabel : STextStyles.fieldLabel, enabledBorder: InputBorder.none, focusedBorder: InputBorder.none, errorBorder: InputBorder.none,