chore: update search bar style (#405)

muxable · May 9, 2022 · 0698f58 · 0698f58
1 parent 3f27991
commit 0698f58
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 20 deletions.
diff --git 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
@@ -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
@@ -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<App> {
 
   @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<App> {
             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
@@ -0,0 +1,7 @@
+import 'dart:ui';
+
+class ThemeColors {
+  static const accentColor = Color(0xFF009FDF);
+  static const detailColor = Color(0xFF121312);
+  static const textFieldColor = Color(0xFF1D1D1F);
+}