diff --git a/app_flowy/assets/images/editor/Drop menu/Hide.svg b/app_flowy/assets/images/editor/drop_menu/Hide.svg similarity index 100% rename from app_flowy/assets/images/editor/Drop menu/Hide.svg rename to app_flowy/assets/images/editor/drop_menu/Hide.svg diff --git a/app_flowy/assets/images/editor/Drop menu/Show.svg b/app_flowy/assets/images/editor/drop_menu/Show.svg similarity index 100% rename from app_flowy/assets/images/editor/Drop menu/Show.svg rename to app_flowy/assets/images/editor/drop_menu/Show.svg diff --git a/app_flowy/assets/images/home/Drop menu/Hide.svg b/app_flowy/assets/images/home/drop_menu/Hide.svg similarity index 100% rename from app_flowy/assets/images/home/Drop menu/Hide.svg rename to app_flowy/assets/images/home/drop_menu/Hide.svg diff --git a/app_flowy/assets/images/home/Drop menu/Show.svg b/app_flowy/assets/images/home/drop_menu/Show.svg similarity index 100% rename from app_flowy/assets/images/home/Drop menu/Show.svg rename to app_flowy/assets/images/home/drop_menu/Show.svg diff --git a/app_flowy/assets/images/small_logo.svg b/app_flowy/assets/images/small_logo.svg new file mode 100644 index 0000000000..6b5430bfa0 --- /dev/null +++ b/app_flowy/assets/images/small_logo.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/app_flowy/lib/user/presentation/sign_in/sign_in_screen.dart b/app_flowy/lib/user/presentation/sign_in/sign_in_screen.dart index a1ca6ffc0e..1be8c59f21 100644 --- a/app_flowy/lib/user/presentation/sign_in/sign_in_screen.dart +++ b/app_flowy/lib/user/presentation/sign_in/sign_in_screen.dart @@ -2,6 +2,7 @@ import 'package:app_flowy/startup/startup.dart'; import 'package:app_flowy/user/application/sign_in/sign_in_bloc.dart'; import 'package:app_flowy/user/domain/i_auth.dart'; import 'package:app_flowy/user/presentation/sign_in/widgets/background.dart'; +import 'package:flowy_infra/theme.dart'; import 'package:flowy_infra_ui/widget/rounded_button.dart'; import 'package:flowy_infra_ui/widget/rounded_input_field.dart'; import 'package:flowy_infra_ui/widget/spacing.dart'; @@ -10,6 +11,7 @@ import 'package:flowy_sdk/protobuf/flowy-user/user_profile.pb.dart'; import 'package:flutter/material.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:dartz/dartz.dart'; +import 'package:flowy_infra/image.dart'; class SignInScreen extends StatelessWidget { final IAuthRouter router; @@ -71,6 +73,7 @@ class SignInForm extends StatelessWidget { const EmailTextField(), const PasswordTextField(), ForgetPasswordButton(router: router), + const VSpace(30), const LoginButton(), const VSpace(10), SignUpPrompt(router: router), @@ -94,18 +97,19 @@ class SignUpPrompt extends StatelessWidget { @override Widget build(BuildContext context) { + final theme = context.watch(); return Row( children: [ - const Text("Dont't have an account", - style: TextStyle(color: Colors.blueGrey, fontSize: 12)), + Text("Dont't have an account", + style: TextStyle(color: theme.shader3, fontSize: 12)), TextButton( style: TextButton.styleFrom( textStyle: const TextStyle(fontSize: 12), ), onPressed: () => router.showSignUpScreen(context), - child: const Text( + child: Text( 'Sign Up', - style: TextStyle(color: Colors.lightBlue), + style: TextStyle(color: theme.main1), ), ), ], @@ -121,11 +125,12 @@ class LoginButton extends StatelessWidget { @override Widget build(BuildContext context) { + final theme = context.watch(); return RoundedTextButton( title: 'Login', height: 45, borderRadius: BorderRadius.circular(10), - color: Colors.lightBlue, + color: theme.main1, press: () { context .read() @@ -145,14 +150,15 @@ class ForgetPasswordButton extends StatelessWidget { @override Widget build(BuildContext context) { + final theme = context.watch(); return TextButton( style: TextButton.styleFrom( textStyle: const TextStyle(fontSize: 12), ), onPressed: () => router.showForgetPasswordScreen(context), - child: const Text( + child: Text( 'Forgot Password?', - style: TextStyle(color: Colors.lightBlue), + style: TextStyle(color: theme.main1), ), ); } @@ -165,15 +171,18 @@ class PasswordTextField extends StatelessWidget { @override Widget build(BuildContext context) { + final theme = context.watch(); return BlocBuilder( buildWhen: (previous, current) => previous.passwordError != current.passwordError, builder: (context, state) { return RoundedInputField( obscureText: true, + obscureIcon: svgWidgetWithName("home/Hide.svg"), + obscureHideIcon: svgWidgetWithName("home/Show.svg"), hintText: 'password', - normalBorderColor: Colors.green, - highlightBorderColor: Colors.red, + normalBorderColor: theme.shader4, + highlightBorderColor: theme.red, errorText: context .read() .state @@ -195,14 +204,15 @@ class EmailTextField extends StatelessWidget { @override Widget build(BuildContext context) { + final theme = context.watch(); return BlocBuilder( buildWhen: (previous, current) => previous.emailError != current.emailError, builder: (context, state) { return RoundedInputField( hintText: 'email', - normalBorderColor: Colors.green, - highlightBorderColor: Colors.red, + normalBorderColor: theme.shader4, + highlightBorderColor: theme.red, errorText: context .read() .state diff --git a/app_flowy/lib/user/presentation/sign_in/widgets/background.dart b/app_flowy/lib/user/presentation/sign_in/widgets/background.dart index 4bab31741f..492ec6b50b 100644 --- a/app_flowy/lib/user/presentation/sign_in/widgets/background.dart +++ b/app_flowy/lib/user/presentation/sign_in/widgets/background.dart @@ -1,5 +1,8 @@ +import 'package:flowy_infra/image.dart'; +import 'package:flowy_infra/theme.dart'; import 'package:flowy_infra_ui/widget/spacing.dart'; import 'package:flutter/material.dart'; +import 'package:provider/provider.dart'; class SignInFormContainer extends StatelessWidget { final List children; @@ -32,22 +35,19 @@ class SignInTitle extends StatelessWidget { @override Widget build(BuildContext context) { + final theme = context.watch(); return SizedBox( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ - Image( - fit: BoxFit.cover, - width: logoSize.width, - height: logoSize.height, - image: const AssetImage('assets/images/app_flowy_logo.jpg')), + svgWidgetWithName("small_logo.svg"), const VSpace(30), Text( title, - style: const TextStyle( - color: Colors.black, - fontWeight: FontWeight.bold, - fontSize: 20, + style: TextStyle( + color: theme.shader1, + fontWeight: FontWeight.w600, + fontSize: 24, ), ) ], diff --git a/app_flowy/lib/workspace/domain/image.dart b/app_flowy/lib/workspace/domain/image.dart index 257a95a13c..2841269e6b 100644 --- a/app_flowy/lib/workspace/domain/image.dart +++ b/app_flowy/lib/workspace/domain/image.dart @@ -1,7 +1,6 @@ import 'package:flowy_sdk/protobuf/flowy-workspace/view_create.pb.dart'; import 'package:flutter/material.dart'; - -import 'package:flutter_svg/flutter_svg.dart'; +import 'package:flowy_infra/image.dart'; AssetImage assetImageForViewType(ViewType type) { final imageName = imageNameForViewType(type); @@ -10,9 +9,7 @@ AssetImage assetImageForViewType(ViewType type) { Widget svgImageForViewType(ViewType type) { final imageName = imageNameForViewType(type); - final Widget svg = SvgPicture.asset( - 'assets/images/$imageName', - ); + final Widget svg = svgWidgetWithName(imageName); return svg; } diff --git a/app_flowy/packages/flowy_infra/lib/image.dart b/app_flowy/packages/flowy_infra/lib/image.dart new file mode 100644 index 0000000000..6101735986 --- /dev/null +++ b/app_flowy/packages/flowy_infra/lib/image.dart @@ -0,0 +1,10 @@ +import 'package:flutter/widgets.dart'; +import 'package:flutter_svg/flutter_svg.dart'; + +Widget svgWidgetWithName(String name) { + final Widget svg = SvgPicture.asset( + 'assets/images/$name', + ); + + return svg; +} diff --git a/app_flowy/packages/flowy_infra/lib/theme.dart b/app_flowy/packages/flowy_infra/lib/theme.dart index 4cf60ee854..c431aee5c3 100644 --- a/app_flowy/packages/flowy_infra/lib/theme.dart +++ b/app_flowy/packages/flowy_infra/lib/theme.dart @@ -11,9 +11,7 @@ class AppTheme { static ThemeType defaultTheme = ThemeType.light; bool isDark; - late Color bg1; // late Color surface; // - late Color bg2; late Color accent1; late Color accent1Dark; late Color accent1Darker; @@ -24,10 +22,41 @@ class AppTheme { late Color greyWeak; late Color error; late Color focus; - late Color txt; late Color accentTxt; + late Color hover; + late Color selector; + late Color red; + late Color yellow; + late Color green; + + late Color shader1; + late Color shader2; + late Color shader3; + late Color shader4; + late Color shader5; + late Color shader6; + late Color shader7; + + late Color bg1; + late Color bg2; + late Color bg3; + late Color bg4; + + late Color tint1; + late Color tint2; + late Color tint3; + late Color tint4; + late Color tint5; + late Color tint6; + late Color tint7; + late Color tint8; + late Color tint9; + + late Color main1; + late Color main2; + /// Default constructor AppTheme({this.isDark = true}) { txt = isDark ? Colors.white : Colors.black; @@ -39,8 +68,6 @@ class AppTheme { switch (t) { case ThemeType.light: return AppTheme(isDark: false) - ..bg1 = const Color.fromARGB(255, 247, 248, 252) - ..bg2 = const Color(0xffc1dcbc) ..surface = Colors.white ..accent1 = const Color(0xff00a086) ..accent1Dark = const Color(0xff00856f) @@ -51,7 +78,34 @@ class AppTheme { ..grey = const Color(0xff515d5a) ..greyStrong = const Color(0xff151918) ..error = Colors.red.shade900 - ..focus = const Color(0xFF0ee2b1); + ..focus = const Color(0xFFe0f8ff) + ..hover = const Color(0xFFe0f8ff) // + ..selector = const Color(0xfff2fcff) + ..red = const Color(0xfffb006d) + ..yellow = const Color(0xffffd667) + ..green = const Color(0xff66cf80) + ..shader1 = const Color(0xff333333) + ..shader2 = const Color(0xff4f4f4f) + ..shader3 = const Color(0xff828282) + ..shader4 = const Color(0xffbdbdbd) + ..shader5 = const Color(0xffe0e0e0) + ..shader6 = const Color(0xfff2f2f2) + ..shader7 = const Color(0xffffffff) + ..bg1 = const Color(0xfff7f8fc) + ..bg2 = const Color(0xffedeef2) + ..bg3 = const Color(0xffe2e4eb) + ..bg4 = const Color(0xff2c144b) + ..tint1 = const Color(0xffe8e0ff) + ..tint2 = const Color(0xffffe7fd) + ..tint3 = const Color(0xffffe7ee) + ..tint4 = const Color(0xffffefe3) + ..tint5 = const Color(0xfffff2cd) + ..tint6 = const Color(0xfff5ffdc) + ..tint7 = const Color(0xffddffd6) + ..tint8 = const Color(0xffdefff1) + ..tint9 = const Color(0xffdefff1) + ..main1 = const Color(0xff00bcf0) + ..main2 = const Color(0xff00b7ea); case ThemeType.dark: return AppTheme(isDark: true) @@ -67,7 +121,34 @@ class AppTheme { ..grey = const Color(0xffced4d3) ..greyStrong = const Color(0xffffffff) ..error = const Color(0xffe55642) - ..focus = const Color(0xff0ee2b1); + ..focus = const Color(0xff0ee2b1) + ..hover = const Color(0xFFe0f8ff) // + ..selector = const Color(0xfff2fcff) + ..red = const Color(0xfffb006d) + ..yellow = const Color(0xffffd667) + ..green = const Color(0xff66cf80) + ..shader1 = const Color(0xff333333) + ..shader2 = const Color(0xff4f4f4f) + ..shader3 = const Color(0xff828282) + ..shader4 = const Color(0xffbdbdbd) + ..shader5 = const Color(0xffe0e0e0) + ..shader6 = const Color(0xfff2f2f2) + ..shader7 = const Color(0xffffffff) + ..bg1 = const Color(0xfff7f8fc) + ..bg2 = const Color(0xffedeef2) + ..bg3 = const Color(0xffe2e4eb) + ..bg4 = const Color(0xff2c144b) + ..tint1 = const Color(0xffe8e0ff) + ..tint2 = const Color(0xffffe7fd) + ..tint3 = const Color(0xffffe7ee) + ..tint4 = const Color(0xffffefe3) + ..tint5 = const Color(0xfffff2cd) + ..tint6 = const Color(0xfff5ffdc) + ..tint7 = const Color(0xffddffd6) + ..tint8 = const Color(0xffdefff1) + ..tint9 = const Color(0xffdefff1) + ..main1 = const Color(0xff00bcf0) + ..main2 = const Color(0xff00b7ea); } } @@ -76,23 +157,23 @@ class AppTheme { textTheme: (isDark ? ThemeData.dark() : ThemeData.light()).textTheme, colorScheme: ColorScheme( brightness: isDark ? Brightness.dark : Brightness.light, - primary: accent1, - primaryVariant: accent1Darker, - secondary: accent2, - secondaryVariant: ColorUtils.shiftHsl(accent2, -.2), + primary: main1, + primaryVariant: main2, + secondary: bg1, + secondaryVariant: bg2, background: bg1, surface: surface, - onBackground: txt, + onBackground: bg1, onSurface: txt, - onError: txt, - onPrimary: accentTxt, - onSecondary: accentTxt, + onError: red, + onPrimary: bg1, + onSecondary: bg1, error: error), ); return t.copyWith( materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, - highlightColor: accent1, - toggleableActiveColor: accent1); + highlightColor: main1, + toggleableActiveColor: main1); } Color shift(Color c, double d) => diff --git a/app_flowy/packages/flowy_infra/pubspec.lock b/app_flowy/packages/flowy_infra/pubspec.lock index 9bbcf33e9e..f63f4d0f56 100644 --- a/app_flowy/packages/flowy_infra/pubspec.lock +++ b/app_flowy/packages/flowy_infra/pubspec.lock @@ -7,7 +7,7 @@ packages: name: async url: "https://pub.dartlang.org" source: hosted - version: "2.6.1" + version: "2.7.0" boolean_selector: dependency: transitive description: @@ -28,7 +28,7 @@ packages: name: charcode url: "https://pub.dartlang.org" source: hosted - version: "1.2.0" + version: "1.3.1" clock: dependency: transitive description: @@ -69,6 +69,13 @@ packages: url: "https://pub.dartlang.org" source: hosted version: "1.0.4" + flutter_svg: + dependency: "direct main" + description: + name: flutter_svg + url: "https://pub.dartlang.org" + source: hosted + version: "0.22.0" flutter_test: dependency: "direct dev" description: flutter @@ -101,7 +108,7 @@ packages: name: meta url: "https://pub.dartlang.org" source: hosted - version: "1.3.0" + version: "1.7.0" path: dependency: transitive description: @@ -109,6 +116,27 @@ packages: url: "https://pub.dartlang.org" source: hosted version: "1.8.0" + path_drawing: + dependency: transitive + description: + name: path_drawing + url: "https://pub.dartlang.org" + source: hosted + version: "0.5.1" + path_parsing: + dependency: transitive + description: + name: path_parsing + url: "https://pub.dartlang.org" + source: hosted + version: "0.2.1" + petitparser: + dependency: transitive + description: + name: petitparser + url: "https://pub.dartlang.org" + source: hosted + version: "4.2.0" sky_engine: dependency: transitive description: flutter @@ -155,7 +183,7 @@ packages: name: test_api url: "https://pub.dartlang.org" source: hosted - version: "0.3.0" + version: "0.4.1" textstyle_extensions: dependency: "direct main" description: @@ -191,6 +219,13 @@ packages: url: "https://pub.dartlang.org" source: hosted version: "2.1.0" + xml: + dependency: transitive + description: + name: xml + url: "https://pub.dartlang.org" + source: hosted + version: "5.2.0" sdks: - dart: ">=2.12.0 <3.0.0" - flutter: ">=1.17.0" + dart: ">=2.13.0 <3.0.0" + flutter: ">=1.24.0-7.0" diff --git a/app_flowy/packages/flowy_infra/pubspec.yaml b/app_flowy/packages/flowy_infra/pubspec.yaml index 9504a481f7..c015492e6c 100644 --- a/app_flowy/packages/flowy_infra/pubspec.yaml +++ b/app_flowy/packages/flowy_infra/pubspec.yaml @@ -14,6 +14,7 @@ dependencies: uuid: ">=2.2.2" textstyle_extensions: '2.0.0-nullsafety' logger: ^1.0.0 + flutter_svg: ^0.22.0 dev_dependencies: flutter_test: diff --git a/app_flowy/packages/flowy_infra_ui/lib/style_widget/scrolling/styled_scroll_bar.dart b/app_flowy/packages/flowy_infra_ui/lib/style_widget/scrolling/styled_scroll_bar.dart index b2f8af63cb..faf2570949 100644 --- a/app_flowy/packages/flowy_infra_ui/lib/style_widget/scrolling/styled_scroll_bar.dart +++ b/app_flowy/packages/flowy_infra_ui/lib/style_widget/scrolling/styled_scroll_bar.dart @@ -117,12 +117,12 @@ class ScrollbarState extends State { var showHandle = contentExtent > _viewExtent && contentExtent > 0; // Handle color var handleColor = widget.handleColor ?? - (theme.isDark ? theme.greyWeak.withOpacity(.2) : theme.greyWeak); + (theme.isDark ? theme.bg2.withOpacity(.2) : theme.bg2); // Track color var trackColor = widget.trackColor ?? (theme.isDark - ? theme.greyWeak.withOpacity(.1) - : theme.greyWeak.withOpacity(.3)); + ? theme.bg2.withOpacity(.1) + : theme.bg2.withOpacity(.3)); //Layout the stack, it just contains a child, and return Stack(children: [ diff --git a/app_flowy/packages/flowy_infra_ui/lib/style_widget/text_input.dart b/app_flowy/packages/flowy_infra_ui/lib/style_widget/text_input.dart index 9bed8096f4..16fd01ff3e 100644 --- a/app_flowy/packages/flowy_infra_ui/lib/style_widget/text_input.dart +++ b/app_flowy/packages/flowy_infra_ui/lib/style_widget/text_input.dart @@ -200,7 +200,7 @@ class StyledSearchTextInputState extends State { autocorrect: widget.autoCorrect ?? false, enableSuggestions: widget.enableSuggestions ?? false, style: widget.style ?? TextStyles.Body1, - cursorColor: theme.accent1, + cursorColor: theme.main1, controller: _controller, showCursor: true, enabled: widget.enabled, @@ -218,7 +218,7 @@ class StyledSearchTextInputState extends State { errorText: widget.errorText, errorMaxLines: 2, hintText: widget.hintText, - hintStyle: TextStyles.Body1.textColor(theme.grey), + hintStyle: TextStyles.Body1.textColor(theme.shader4), labelText: widget.label), ), ); diff --git a/app_flowy/packages/flowy_infra_ui/lib/widget/buttons/base_styled_button.dart b/app_flowy/packages/flowy_infra_ui/lib/widget/buttons/base_styled_button.dart index 3cbf52f06b..ff814cad72 100644 --- a/app_flowy/packages/flowy_infra_ui/lib/widget/buttons/base_styled_button.dart +++ b/app_flowy/packages/flowy_infra_ui/lib/widget/buttons/base_styled_button.dart @@ -82,7 +82,7 @@ class _BaseStyledBtnState extends State { boxShadow: _isFocused ? [ BoxShadow( - color: theme.focus.withOpacity(0.25), + color: theme.shader6, offset: Offset.zero, blurRadius: 8.0, spreadRadius: 0.0), @@ -99,7 +99,7 @@ class _BaseStyledBtnState extends State { shape: RoundedRectangleBorder( side: BorderSide( width: 1.8, - color: theme.focus, + color: theme.shader6, ), borderRadius: BorderRadius.circular(widget.borderRadius ?? Corners.s5), @@ -119,8 +119,8 @@ class _BaseStyledBtnState extends State { highlightElevation: 0, focusElevation: 0, fillColor: Colors.transparent, - hoverColor: widget.hoverColor ?? theme.surface, - highlightColor: widget.downColor ?? theme.accent1.withOpacity(.1), + hoverColor: widget.hoverColor ?? theme.hover, + highlightColor: widget.downColor ?? theme.main1, focusColor: widget.focusColor ?? Colors.grey.withOpacity(0.35), child: Opacity( child: Padding( diff --git a/app_flowy/packages/flowy_infra_ui/lib/widget/buttons/primary_button.dart b/app_flowy/packages/flowy_infra_ui/lib/widget/buttons/primary_button.dart index a840ef84f5..11df2951e7 100644 --- a/app_flowy/packages/flowy_infra_ui/lib/widget/buttons/primary_button.dart +++ b/app_flowy/packages/flowy_infra_ui/lib/widget/buttons/primary_button.dart @@ -23,9 +23,9 @@ class PrimaryButton extends StatelessWidget { minWidth: bigMode ? 160 : 78, minHeight: bigMode ? 60 : 42, contentPadding: EdgeInsets.all(bigMode ? Insets.l : Insets.m), - bgColor: theme.accent1Darker, - hoverColor: theme.isDark ? theme.accent1 : theme.accent1Dark, - downColor: theme.accent1Darker, + bgColor: theme.bg1, + hoverColor: theme.hover, + downColor: theme.selector, borderRadius: bigMode ? Corners.s8 : Corners.s5, child: child, onPressed: onPressed, diff --git a/app_flowy/packages/flowy_infra_ui/lib/widget/buttons/secondary_button.dart b/app_flowy/packages/flowy_infra_ui/lib/widget/buttons/secondary_button.dart index da458f30bc..16570b8453 100644 --- a/app_flowy/packages/flowy_infra_ui/lib/widget/buttons/secondary_button.dart +++ b/app_flowy/packages/flowy_infra_ui/lib/widget/buttons/secondary_button.dart @@ -18,7 +18,7 @@ class SecondaryTextButton extends StatelessWidget { @override Widget build(BuildContext context) { final theme = context.watch(); - TextStyle txtStyle = TextStyles.Footnote.textColor(theme.accent1Darker); + TextStyle txtStyle = TextStyles.Footnote.textColor(theme.shader1); return SecondaryButton( onPressed: onPressed, child: Text(label, style: txtStyle)); } @@ -42,7 +42,7 @@ class SecondaryIconButton extends StatelessWidget { minHeight: 36, minWidth: 36, contentPadding: Insets.sm, - child: FlowyImageIcon(icon, size: 20, color: color ?? theme.grey), + child: FlowyImageIcon(icon, size: 20, color: color ?? theme.shader4), ); } } @@ -82,12 +82,11 @@ class _SecondaryButtonState extends State { minWidth: widget.minWidth ?? 78, minHeight: widget.minHeight ?? 42, contentPadding: EdgeInsets.all(widget.contentPadding ?? Insets.m), - bgColor: theme.surface, - outlineColor: - (_isMouseOver ? theme.accent1 : theme.grey).withOpacity(.35), - hoverColor: theme.surface, + bgColor: theme.bg1, + outlineColor: (_isMouseOver ? theme.hover : theme.shader6), + hoverColor: theme.hover, onFocusChanged: widget.onFocusChanged, - downColor: theme.greyWeak.withOpacity(.35), + downColor: theme.selector, borderRadius: Corners.s5, child: IgnorePointer(child: widget.child), onPressed: widget.onPressed, diff --git a/app_flowy/packages/flowy_infra_ui/lib/widget/dialog/styled_dialogs.dart b/app_flowy/packages/flowy_infra_ui/lib/widget/dialog/styled_dialogs.dart index a5bdd5a43d..7f7e11185c 100644 --- a/app_flowy/packages/flowy_infra_ui/lib/widget/dialog/styled_dialogs.dart +++ b/app_flowy/packages/flowy_infra_ui/lib/widget/dialog/styled_dialogs.dart @@ -132,7 +132,7 @@ class StyledDialog extends StatelessWidget { Widget innerContent = Container( padding: padding ?? EdgeInsets.all(Insets.lGutter), - color: bgColor ?? theme.surface, + color: bgColor ?? theme.bg1, child: child, ); @@ -198,9 +198,9 @@ class OkCancelDialog extends StatelessWidget { children: [ if (title != null) ...[ Text(title!.toUpperCase(), - style: TextStyles.T1.textColor(theme.accent1Darker)), + style: TextStyles.T1.textColor(theme.shader1)), VSpace(Insets.sm * 1.5), - Container(color: theme.greyWeak.withOpacity(.35), height: 1), + Container(color: theme.bg1, height: 1), VSpace(Insets.m * 1.5), ], Text(message, style: TextStyles.Body1.textHeight(1.5)), diff --git a/app_flowy/packages/flowy_infra_ui/lib/widget/rounded_input_field.dart b/app_flowy/packages/flowy_infra_ui/lib/widget/rounded_input_field.dart index a1d7c7f329..a33d5bd902 100644 --- a/app_flowy/packages/flowy_infra_ui/lib/widget/rounded_input_field.dart +++ b/app_flowy/packages/flowy_infra_ui/lib/widget/rounded_input_field.dart @@ -8,6 +8,8 @@ class RoundedInputField extends StatefulWidget { final String? hintText; final IconData? icon; final bool obscureText; + final Widget? obscureIcon; + final Widget? obscureHideIcon; final Color normalBorderColor; final Color highlightBorderColor; final String errorText; @@ -19,6 +21,8 @@ class RoundedInputField extends StatefulWidget { this.hintText, this.icon, this.obscureText = false, + this.obscureIcon, + this.obscureHideIcon, this.onChanged, this.normalBorderColor = Colors.transparent, this.highlightBorderColor = Colors.transparent, @@ -84,13 +88,28 @@ class _RoundedInputFieldState extends State { if (widget.obscureText == false) { return null; } + + Widget? icon; + if (widget.obscureText == true) { + assert(widget.obscureIcon != null && widget.obscureHideIcon != null); + if (widget.enableObscure) { + icon = widget.obscureIcon!; + } else { + icon = widget.obscureHideIcon!; + } + } + + if (icon == null) { + return null; + } + return RoundedImageButton( size: 20, press: () { widget.enableObscure = !widget.enableObscure; setState(() {}); }, - child: const Icon(Icons.password, size: 15), + child: icon, ); } } diff --git a/app_flowy/pubspec.yaml b/app_flowy/pubspec.yaml index 2bf4fe6b86..46c5e56ff9 100644 --- a/app_flowy/pubspec.yaml +++ b/app_flowy/pubspec.yaml @@ -88,6 +88,7 @@ flutter: # To add assets to your application, add an assets section, like this: assets: - assets/images/ + - assets/images/home/ # - images/a_dot_ham.jpeg # An image asset can refer to one or more resolution-specific "variants", see