Feature/UI implementation (#333)

lib/controllers/auth_state_controller.dart

@@ -165,7 +165,7 @@ class AuthStateController extends GetxController {
           "landingScreenShown"); // landingScreenShown is the boolean value that is used to check wether to show the user the onboarding screen or not on the first launch of the app.
       landingScreenShown == null
           ? Get.offNamed(AppRoutes.landing)
-          : Get.offNamed(AppRoutes.login);
+          : Get.offNamed(AppRoutes.newWelcomeScreen);
     }
   }
 
@@ -245,7 +245,7 @@ class AuthStateController extends GetxController {
       onConfirm: () async {
         await account.deleteSession(sessionId: 'current');
         await removeRegistrationTokenfromSubscribedDiscussions();
-        Get.offAllNamed(AppRoutes.login);
+        Get.offAllNamed(AppRoutes.newWelcomeScreen);
       },
     );
   }

lib/for_developers/text_theme.dart

@@ -0,0 +1,44 @@
+import 'package:flutter/material.dart';
+
+class TextThemeForDevs extends StatelessWidget {
+  const TextThemeForDevs({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(),
+      body: SizedBox(
+        width: double.maxFinite,
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.center,
+
+          children: [
+
+            Text("Resonate", style: Theme.of(context).textTheme.displayLarge,),
+            Text("Resonate", style: Theme.of(context).textTheme.displayMedium,),
+            Text("Resonate", style: Theme.of(context).textTheme.displaySmall,),
+
+            Text("Resonate", style: Theme.of(context).textTheme.headlineLarge,),
+            Text("Resonate", style: Theme.of(context).textTheme.headlineMedium,),
+            Text("Resonate", style: Theme.of(context).textTheme.headlineSmall,),
+
+            Text("Resonate", style: Theme.of(context).textTheme.titleLarge,),
+            Text("Resonate", style: Theme.of(context).textTheme.titleMedium,),
+            Text("Resonate", style: Theme.of(context).textTheme.titleSmall,),
+
+            Text("Resonate", style: Theme.of(context).textTheme.bodyLarge,),
+            Text("Resonate", style: Theme.of(context).textTheme.bodyMedium,),
+            Text("Resonate", style: Theme.of(context).textTheme.bodySmall,),
+
+            Text("Resonate", style: Theme.of(context).textTheme.labelLarge,),
+            Text("Resonate", style: Theme.of(context).textTheme.labelMedium,),
+            Text("Resonate", style: Theme.of(context).textTheme.labelSmall,),
+
+
+
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/for_developers/theme_color_model.dart

@@ -0,0 +1,13 @@
+import 'package:flutter/material.dart';
+
+class ThemeColorModel {
+  final Color color;
+  final String name;
+  final Color onColor;
+
+  ThemeColorModel({
+    required this.color,
+    required this.name,
+    required this.onColor,
+  });
+}

lib/for_developers/theme_colors_page.dart

@@ -0,0 +1,58 @@
+import 'package:flutter/material.dart';
+import 'package:resonate/for_developers/theme_color_model.dart';
+
+class ThemeColorsPage extends StatelessWidget {
+  const ThemeColorsPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final List<ThemeColorModel> list = [
+      ThemeColorModel(
+        color: Theme.of(context).colorScheme.primary,
+        name: "primary",
+        onColor: Theme.of(context).colorScheme.onPrimary,
+      ),
+      ThemeColorModel(
+        color: Theme.of(context).colorScheme.secondary,
+        name: "secondary",
+        onColor: Theme.of(context).colorScheme.onSecondary,
+      ),
+      ThemeColorModel(
+        color: Theme.of(context).colorScheme.tertiary,
+        name: "tertiary",
+        onColor: Theme.of(context).colorScheme.onTertiary,
+      ),
+      ThemeColorModel(
+        color: Theme.of(context).colorScheme.background,
+        name: "background",
+        onColor: Theme.of(context).colorScheme.onBackground,
+      ),
+      ThemeColorModel(
+        color: Theme.of(context).colorScheme.surface,
+        name: "surface",
+        onColor: Theme.of(context).colorScheme.onSurface,
+      ),
+
+    ];
+
+    return Scaffold(
+      appBar: AppBar(),
+      body: ListView.builder(
+        itemBuilder: (context, index) {
+          return Container(
+            alignment: Alignment.center,
+            width: double.maxFinite,
+            height: 100,
+            color: list[index].color,
+            child: Text(list[index].name, style: TextStyle(
+              color: list[index].onColor,
+              fontSize: 24,
+              fontWeight: FontWeight.bold,
+            ),),
+          );
+        },
+        itemCount: list.length,
+      ),
+    );
+  }
+}

lib/main.dart

@@ -3,22 +3,24 @@ import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:get/get.dart';
 import 'package:resonate/firebase_options.dart';
+import 'package:resonate/new_themes/new_theme.dart';
 import 'package:resonate/routes/app_pages.dart';
 import 'package:resonate/routes/app_routes.dart';
-import 'package:resonate/themes/themes.dart';
 import 'package:get_storage/get_storage.dart';
+import 'package:resonate/new_themes/theme_list.dart';
 import 'package:resonate/utils/ui_sizes.dart';
+import 'new_themes/new_theme_screen_controller.dart';
 import 'themes/theme_controller.dart';
 
 Future<void> main() async {
   WidgetsFlutterBinding.ensureInitialized();
+
+  SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
+
   //Initialize Firebase
   await Firebase.initializeApp(
     options: DefaultFirebaseOptions.currentPlatform,
   );
-  SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
-    statusBarColor: Colors.transparent,
-  ));
 
   await GetStorage.init();
   runApp(const MyApp());
@@ -31,17 +33,45 @@ class MyApp extends StatelessWidget {
   Widget build(BuildContext context) {
     UiSizes.init(context);
 
-    final themeController = Get.put(ThemeController());
+    // This line is just for initialization of theme controller. This will prevent some breaking changes in old ui, until it gets fixed
+    Get.put(ThemeController());
+
+    final newThemeController = Get.put(NewThemeController());
+
     return Obx(
       () => GetMaterialApp(
         debugShowCheckedModeBanner: false,
         title: 'Resonate',
-        theme: Themes.getLightTheme(themeController.primaryColor.value),
-        darkTheme: Themes.getDarkTheme(themeController.primaryColor.value),
-        themeMode: themeController.theme,
+        theme: NewTheme.setLightTheme(
+          ThemeList.getThemeModel(
+            newThemeController.currentTheme.value,
+          ),
+        ),
+        darkTheme: NewTheme.setDarkTheme(
+          ThemeList.getThemeModel(
+            newThemeController.currentTheme.value,
+          ),
+        ),
+        themeMode: ThemeList.getThemeModel(
+          newThemeController.currentTheme.value,
+        ).themeMode,
         initialRoute: AppRoutes.splash,
         getPages: AppPages.pages,
       ),
     );
+
+    // return Obx(
+    //   () => GetMaterialApp(
+    //     debugShowCheckedModeBanner: false,
+    //     title: 'Resonate',
+    //     theme: NewTheme.classicLightTheme,
+    //     // theme: Themes.getLightTheme(themeController.primaryColor.value),
+    //     // darkTheme: Themes.getDarkTheme(themeController.primaryColor.value),
+    //     darkTheme: Themes.getDarkTheme(themeController.primaryColor.value),
+    //     themeMode: themeController.theme,
+    //     initialRoute: AppRoutes.splash,
+    //     getPages: AppPages.pages,
+    //   ),
+    // );
   }
 }

lib/models/themes_model.dart

@@ -0,0 +1,25 @@
+import 'package:flutter/material.dart';
+
+class ThemeModel {
+  final String name;
+  final Color primaryColor;
+  final Color onPrimaryColor;
+  final Color secondaryColor;
+  final Color onSecondaryColor;
+  final Color surfaceColor;
+  final Color onSurfaceColor;
+  final Color backgroundColor;
+  final ThemeMode themeMode;
+
+  const ThemeModel({
+    required this.name,
+    required this.primaryColor,
+    required this.onPrimaryColor,
+    required this.secondaryColor,
+    required this.onSecondaryColor,
+    required this.surfaceColor,
+    required this.onSurfaceColor,
+    required this.backgroundColor,
+    required this.themeMode,
+  });
+}

lib/new_themes/new_theme.dart

@@ -0,0 +1,140 @@
+import 'package:flutter/material.dart';
+import 'package:google_fonts/google_fonts.dart';
+import 'package:resonate/models/themes_model.dart';
+
+import '../utils/ui_sizes.dart';
+
+class NewTheme {
+  static ThemeData setLightTheme(ThemeModel theme) {
+    return ThemeData(
+      fontFamily: GoogleFonts.poppins().fontFamily,
+      colorScheme: ColorScheme.light(
+        brightness: Brightness.light,
+        primary: theme.primaryColor,
+        onPrimary: theme.onPrimaryColor,
+        secondary: theme.secondaryColor,
+        onSecondary: theme.onSecondaryColor,
+        surface: theme.surfaceColor,
+        onSurface: theme.onSurfaceColor,
+        surfaceTint: Colors.transparent,
+        background: theme.backgroundColor,
+      ),
+      appBarTheme: AppBarTheme(
+        surfaceTintColor: Colors.transparent,
+        backgroundColor: theme.backgroundColor
+      ),
+      textTheme: const TextTheme(
+        bodyLarge: TextStyle(
+          // Flutter uses this TextStyle in InputFormField for styling user input text
+          color: Colors.black,
+        ),
+        titleMedium: TextStyle(
+          color: Colors.black54
+        ),
+      ),
+      dividerTheme: const DividerThemeData(
+        color: Colors.black54,
+      ),
+      elevatedButtonTheme: ElevatedButtonThemeData(
+        style: ElevatedButton.styleFrom(
+          backgroundColor: theme.primaryColor,
+          foregroundColor: theme.onPrimaryColor,
+          padding: EdgeInsets.symmetric(vertical: UiSizes.height_10),
+          textStyle: TextStyle(
+            fontFamily: GoogleFonts.poppins().fontFamily,
+            fontWeight: FontWeight.w500,
+            fontSize: UiSizes.size_16,
+          ),
+        ),
+      ),
+      inputDecorationTheme: InputDecorationTheme(
+        border: OutlineInputBorder(
+          borderRadius: BorderRadius.circular(12),
+          borderSide: BorderSide.none,
+        ),
+        focusedBorder: OutlineInputBorder(
+          borderRadius: BorderRadius.circular(12),
+          borderSide: BorderSide(
+            color: theme.primaryColor,
+          ),
+        ),
+        fillColor: theme.secondaryColor,
+        filled: true,
+        hintStyle: TextStyle(
+          color: theme.onSecondaryColor,
+        ),
+        contentPadding: EdgeInsets.symmetric(
+          horizontal: UiSizes.width_20,
+          vertical: UiSizes.height_20,
+        ),
+      ),
+    );
+  }
+
+  static ThemeData setDarkTheme(ThemeModel theme) {
+    return ThemeData(
+      fontFamily: GoogleFonts.poppins().fontFamily,
+      colorScheme: ColorScheme.dark(
+        brightness: Brightness.dark,
+        primary: theme.primaryColor,
+        onPrimary: theme.onPrimaryColor,
+        secondary: theme.secondaryColor,
+        onSecondary: theme.onSecondaryColor,
+        surface: theme.surfaceColor,
+        onSurface: theme.onSurfaceColor,
+        surfaceTint: Colors.transparent,
+        background: theme.backgroundColor,
+      ),
+      appBarTheme: AppBarTheme(
+        surfaceTintColor: Colors.transparent,
+        backgroundColor: theme.backgroundColor,
+      ),
+      textTheme: const TextTheme(
+        bodyLarge: TextStyle(
+          // Flutter uses this TextStyle in InputFormField for styling user input text
+          color: Colors.white,
+        ),
+        titleMedium: TextStyle(
+            color: Colors.white54
+        ),
+      ),
+      dividerTheme: const DividerThemeData(
+        color: Colors.white54,
+      ),
+      elevatedButtonTheme: ElevatedButtonThemeData(
+        style: ElevatedButton.styleFrom(
+          backgroundColor: theme.primaryColor,
+          foregroundColor: theme.onPrimaryColor,
+          padding: EdgeInsets.symmetric(vertical: UiSizes.height_10),
+          textStyle: TextStyle(
+            fontFamily: GoogleFonts.poppins().fontFamily,
+            fontWeight: FontWeight.w500,
+            fontSize: UiSizes.size_16,
+          ),
+        ),
+      ),
+      inputDecorationTheme: InputDecorationTheme(
+        border: OutlineInputBorder(
+          borderRadius: BorderRadius.circular(12),
+          borderSide: BorderSide.none,
+
+        ),
+        focusedBorder: OutlineInputBorder(
+          borderRadius: BorderRadius.circular(12),
+          borderSide: BorderSide(
+            color: theme.primaryColor,
+          ),
+        ),
+        fillColor: theme.secondaryColor,
+        filled: true,
+        hintStyle: TextStyle(
+          color: theme.onSecondaryColor,
+        ),
+        contentPadding: EdgeInsets.symmetric(
+          horizontal: UiSizes.width_20,
+          vertical: UiSizes.height_20,
+        ),
+      ),
+    );
+  }
+}