From 0698f5824441fbee5311a126566a41f3d392d524 Mon Sep 17 00:00:00 2001 From: Juan Date: Mon, 9 May 2022 06:29:36 -0700 Subject: [PATCH] chore: update search bar style (#405) --- .../channel_search_bottom_sheet.dart | 18 +++++++-------- lib/components/channel_search_results.dart | 5 +++- lib/main.dart | 23 +++++++++++-------- lib/theme_colors.dart | 7 ++++++ 4 files changed, 33 insertions(+), 20 deletions(-) create mode 100644 lib/theme_colors.dart diff --git a/lib/components/channel_search_bottom_sheet.dart b/lib/components/channel_search_bottom_sheet.dart index a63c2ff81..8b6f44f67 100644 --- a/lib/components/channel_search_bottom_sheet.dart +++ b/lib/components/channel_search_bottom_sheet.dart @@ -1,6 +1,7 @@ import 'package:flutter/material.dart'; import 'package:rtchat/components/channel_search_results.dart'; import 'package:rtchat/models/channels.dart'; +import 'package:rtchat/theme_colors.dart'; class ChannelSearchBottomSheetWidget extends StatefulWidget { final ScrollController? controller; @@ -39,14 +40,13 @@ class _ChannelSearchBottomSheetWidgetState controller: _searchController, decoration: InputDecoration( border: OutlineInputBorder( - borderRadius: BorderRadius.circular(10.0), - ), + borderRadius: BorderRadius.circular(10.0), + borderSide: BorderSide.none), filled: true, - hintStyle: TextStyle(color: Colors.grey[700]), - prefixIcon: Padding( - padding: const EdgeInsets.only(left: 16, right: 8), - child: Text("twitch.tv/", - style: TextStyle(color: Colors.grey[700]))), + hintStyle: const TextStyle(color: ThemeColors.accentColor), + prefixIcon: const Padding( + padding: EdgeInsets.only(left: 16, right: 8), + child: Text("twitch.tv/")), prefixIconConstraints: const BoxConstraints(minWidth: 0, minHeight: 0), suffixIcon: GestureDetector( @@ -57,9 +57,7 @@ class _ChannelSearchBottomSheetWidgetState _value = ""; }); }), - hintText: "muxfd", - fillColor: Colors.white70), - style: const TextStyle(color: Colors.black), + hintText: "muxfd"), onChanged: (value) { setState(() { _value = value; diff --git a/lib/components/channel_search_results.dart b/lib/components/channel_search_results.dart index 29c8c5683..fef7f39ac 100644 --- a/lib/components/channel_search_results.dart +++ b/lib/components/channel_search_results.dart @@ -2,6 +2,7 @@ import 'package:cloud_functions/cloud_functions.dart'; import 'package:flutter/material.dart'; import 'package:flutter_image/network.dart'; import 'package:rtchat/models/channels.dart'; +import 'package:rtchat/theme_colors.dart'; final _search = FirebaseFunctions.instance.httpsCallable("search"); @@ -68,7 +69,9 @@ class ChannelSearchResultsWidget extends StatelessWidget { decoration: BoxDecoration( shape: BoxShape.circle, border: Border.all( - color: result.isOnline ? Colors.green : Colors.red, + color: result.isOnline + ? ThemeColors.accentColor + : Colors.transparent, width: 2.0, ), ), diff --git a/lib/main.dart b/lib/main.dart index 9b140241a..b3bc08983 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -48,6 +48,7 @@ import 'package:rtchat/screens/settings/quick_links.dart'; import 'package:rtchat/screens/settings/settings.dart'; import 'package:rtchat/screens/settings/tts.dart'; import 'package:rtchat/screens/settings/twitch/badges.dart'; +import 'package:rtchat/theme_colors.dart'; import 'package:shared_preferences/shared_preferences.dart'; MaterialColor generateMaterialColor(Color color) { @@ -131,8 +132,6 @@ class _AppState extends State { @override Widget build(BuildContext context) { - const accentColor = Color(0xFF009FDF); - const detailColor = Color(0xFF121312); return MultiProvider( providers: [ ChangeNotifierProvider(create: (context) => UserModel()), @@ -290,18 +289,24 @@ class _AppState extends State { canvasColor: Colors.black, cardColor: Colors.black, appBarTheme: const AppBarTheme( - color: detailColor, + color: ThemeColors.detailColor, ), colorScheme: ColorScheme.fromSwatch( brightness: Brightness.dark, - backgroundColor: detailColor, - accentColor: accentColor, + backgroundColor: ThemeColors.detailColor, + accentColor: ThemeColors.accentColor, ), dialogBackgroundColor: Colors.black, - toggleableActiveColor: accentColor, - bottomSheetTheme: - const BottomSheetThemeData(backgroundColor: detailColor), - drawerTheme: const DrawerThemeData(backgroundColor: detailColor)), + toggleableActiveColor: ThemeColors.accentColor, + bottomSheetTheme: const BottomSheetThemeData( + backgroundColor: ThemeColors.detailColor), + drawerTheme: + const DrawerThemeData(backgroundColor: ThemeColors.detailColor), + inputDecorationTheme: const InputDecorationTheme( + fillColor: ThemeColors.textFieldColor, + ), + textTheme: const TextTheme( + headlineMedium: TextStyle(color: Colors.white))), navigatorObservers: [App.observer], initialRoute: '/', routes: { diff --git a/lib/theme_colors.dart b/lib/theme_colors.dart new file mode 100644 index 000000000..2537780b8 --- /dev/null +++ b/lib/theme_colors.dart @@ -0,0 +1,7 @@ +import 'dart:ui'; + +class ThemeColors { + static const accentColor = Color(0xFF009FDF); + static const detailColor = Color(0xFF121312); + static const textFieldColor = Color(0xFF1D1D1F); +}