diff --git a/lib/widgets/home.dart b/lib/widgets/home.dart index fd115370de..2c454cc90c 100644 --- a/lib/widgets/home.dart +++ b/lib/widgets/home.dart @@ -24,8 +24,6 @@ class HomePage extends StatelessWidget { final store = PerAccountStoreWidget.of(context); final zulipLocalizations = ZulipLocalizations.of(context); - final colorScheme = ColorScheme.of(context); - InlineSpan bold(String text) => TextSpan( style: const TextStyle().merge(weightVariableTextStyle(context, wght: 700)), text: text); @@ -37,61 +35,57 @@ class HomePage extends StatelessWidget { return Scaffold( appBar: ZulipAppBar(title: const Text("Home")), - body: ElevatedButtonTheme( - data: ElevatedButtonThemeData(style: ButtonStyle( - backgroundColor: WidgetStatePropertyAll(colorScheme.secondaryContainer), - foregroundColor: WidgetStatePropertyAll(colorScheme.onSecondaryContainer))), - child: Center( - child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [ - DefaultTextStyle.merge( - textAlign: TextAlign.center, - style: const TextStyle(fontSize: 18), - child: Column(children: [ - Text.rich(TextSpan( - text: 'Connected to: ', - children: [bold(store.realmUrl.toString())])), - ])), - const SizedBox(height: 16), - ElevatedButton( - onPressed: () => Navigator.push(context, - MessageListPage.buildRoute(context: context, - narrow: const CombinedFeedNarrow())), - child: Text(zulipLocalizations.combinedFeedPageTitle)), - const SizedBox(height: 16), - ElevatedButton( - onPressed: () => Navigator.push(context, - MessageListPage.buildRoute(context: context, - narrow: const MentionsNarrow())), - child: Text(zulipLocalizations.mentionsPageTitle)), + body: Center( + child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [ + DefaultTextStyle.merge( + textAlign: TextAlign.center, + style: const TextStyle(fontSize: 18), + child: Column(children: [ + Text.rich(TextSpan( + text: 'Connected to: ', + children: [bold(store.realmUrl.toString())])), + ])), + const SizedBox(height: 16), + ElevatedButton( + onPressed: () => Navigator.push(context, + MessageListPage.buildRoute(context: context, + narrow: const CombinedFeedNarrow())), + child: Text(zulipLocalizations.combinedFeedPageTitle)), + const SizedBox(height: 16), + ElevatedButton( + onPressed: () => Navigator.push(context, + MessageListPage.buildRoute(context: context, + narrow: const MentionsNarrow())), + child: Text(zulipLocalizations.mentionsPageTitle)), + const SizedBox(height: 16), + ElevatedButton( + onPressed: () => Navigator.push(context, + MessageListPage.buildRoute(context: context, + narrow: const StarredMessagesNarrow())), + child: Text(zulipLocalizations.starredMessagesPageTitle)), + const SizedBox(height: 16), + ElevatedButton( + onPressed: () => Navigator.push(context, + InboxPage.buildRoute(context: context)), + child: const Text("Inbox")), // TODO(i18n) + const SizedBox(height: 16), + ElevatedButton( + onPressed: () => Navigator.push(context, + SubscriptionListPage.buildRoute(context: context)), + child: const Text("Subscribed channels")), + const SizedBox(height: 16), + ElevatedButton( + onPressed: () => Navigator.push(context, + RecentDmConversationsPage.buildRoute(context: context)), + child: Text(zulipLocalizations.recentDmConversationsPageTitle)), + if (testStreamId != null) ...[ const SizedBox(height: 16), ElevatedButton( onPressed: () => Navigator.push(context, MessageListPage.buildRoute(context: context, - narrow: const StarredMessagesNarrow())), - child: Text(zulipLocalizations.starredMessagesPageTitle)), - const SizedBox(height: 16), - ElevatedButton( - onPressed: () => Navigator.push(context, - InboxPage.buildRoute(context: context)), - child: const Text("Inbox")), // TODO(i18n) - const SizedBox(height: 16), - ElevatedButton( - onPressed: () => Navigator.push(context, - SubscriptionListPage.buildRoute(context: context)), - child: const Text("Subscribed channels")), - const SizedBox(height: 16), - ElevatedButton( - onPressed: () => Navigator.push(context, - RecentDmConversationsPage.buildRoute(context: context)), - child: Text(zulipLocalizations.recentDmConversationsPageTitle)), - if (testStreamId != null) ...[ - const SizedBox(height: 16), - ElevatedButton( - onPressed: () => Navigator.push(context, - MessageListPage.buildRoute(context: context, - narrow: ChannelNarrow(testStreamId!))), - child: const Text("#test here")), // scaffolding hack, see above - ], - ])))); + narrow: ChannelNarrow(testStreamId!))), + child: const Text("#test here")), // scaffolding hack, see above + ], + ]))); } } diff --git a/lib/widgets/theme.dart b/lib/widgets/theme.dart index 282decd473..88dc06b2cf 100644 --- a/lib/widgets/theme.dart +++ b/lib/widgets/theme.dart @@ -11,6 +11,19 @@ ThemeData zulipThemeData(BuildContext context) { final DesignVariables designVariables; final List themeExtensions; Brightness brightness = MediaQuery.platformBrightnessOf(context); + + // This applies Material 3's color system to produce a palette of + // appropriately matching and contrasting colors for use in a UI. + // The Zulip brand color is a starting point, but doesn't end up as + // one that's directly used. (After all, we didn't design it for that + // purpose; we designed a logo.) See docs: + // https://api.flutter.dev/flutter/material/ColorScheme/ColorScheme.fromSeed.html + // Or try this tool to see the whole palette: + // https://m3.material.io/theme-builder#/custom + final colorScheme = ColorScheme.fromSeed( + brightness: brightness, + seedColor: kZulipBrandColor); + switch (brightness) { case Brightness.light: { designVariables = DesignVariables.light(); @@ -39,6 +52,10 @@ ThemeData zulipThemeData(BuildContext context) { iconButtonTheme: IconButtonThemeData(style: IconButton.styleFrom( foregroundColor: designVariables.icon, )), + elevatedButtonTheme: ElevatedButtonThemeData(style: ElevatedButton.styleFrom( + backgroundColor: colorScheme.secondaryContainer, + foregroundColor: colorScheme.onSecondaryContainer, + )), appBarTheme: AppBarTheme( // Set these two fields to prevent a color change in [AppBar]s when // there is something scrolled under it. If an app bar hasn't been @@ -74,18 +91,7 @@ ThemeData zulipThemeData(BuildContext context) { strokeAlign: BorderSide.strokeAlignInside, // (default restated for explicitness) )), ), - // This applies Material 3's color system to produce a palette of - // appropriately matching and contrasting colors for use in a UI. - // The Zulip brand color is a starting point, but doesn't end up as - // one that's directly used. (After all, we didn't design it for that - // purpose; we designed a logo.) See docs: - // https://api.flutter.dev/flutter/material/ColorScheme/ColorScheme.fromSeed.html - // Or try this tool to see the whole palette: - // https://m3.material.io/theme-builder#/custom - colorScheme: ColorScheme.fromSeed( - brightness: brightness, - seedColor: kZulipBrandColor, - ), + colorScheme: colorScheme, scaffoldBackgroundColor: designVariables.mainBackground, tooltipTheme: const TooltipThemeData(preferBelow: false), bottomSheetTheme: BottomSheetThemeData(