ui enhancements #22

lib/app/l10n/arb/app_de.arb

@@ -166,9 +166,9 @@
       }
     }
   },
-  "analyzeText": "Text Analysieren",
+  "analyzeText": "Analysieren",
   "@analyzeText": {
-    "description": "Analyze Text button text on the OnboardingView",
+    "description": "Analyze button text on the OnboardingView",
     "type": "text",
     "placeholders": {}
   }

lib/app/l10n/arb/app_en.arb

@@ -166,9 +166,9 @@
       }
     }
   },
-  "analyzeText": "Analyze Text",
+  "analyzeText": "Analyze",
   "@analyzeText": {
-    "description": "Analyze Text button text on the OnboardingView",
+    "description": "Analyze button text on the OnboardingView",
     "type": "text",
     "placeholders": {}
   }

lib/app/theme/base/base_theme.dart

@@ -1,14 +1,13 @@
 import 'package:flutter/material.dart';
 import 'package:gpt_detector/app/theme/theme_constants.dart';
-import 'package:gpt_detector/app/theme/theme_extensions/theme_extensions.dart';
 
 abstract base class BaseTheme {
   Brightness get brightness;
-  Iterable<ThemeExtension<ThemeExtensions>> get extensions;
+  Iterable<ThemeExtension<ThemeExtension>> get extensions;
 
   ThemeData get theme {
     return ThemeData(
-      useMaterial3: true,
+      fontFamily: 'Poppins',
       brightness: brightness,
       extensions: extensions,
       colorSchemeSeed: Colors.deepPurple,
@@ -22,51 +21,47 @@ abstract base class BaseTheme {
     );
   }
 
-  AppBarTheme get _appBarTheme {
-    return const AppBarTheme(
-      centerTitle: true,
-    );
-  }
-
-  CardTheme get _cardTheme {
-    return CardTheme(
-      margin: EdgeInsets.zero,
-      elevation: ThemeConstants.elevation,
-      shape: RoundedRectangleBorder(
-        borderRadius: ThemeConstants.borderRadiusCircular,
-      ),
-    );
-  }
+  final AppBarTheme _appBarTheme = const AppBarTheme(
+    centerTitle: true,
+  );
 
-  DialogTheme get _dialogTheme {
-    return DialogTheme(
-      elevation: ThemeConstants.elevation,
-      shape: RoundedRectangleBorder(
-        borderRadius: ThemeConstants.borderRadiusCircular,
-      ),
-    );
-  }
+  final CardTheme _cardTheme = CardTheme(
+    margin: EdgeInsets.zero,
+    elevation: ThemeConstants.elevation,
+    shape: RoundedRectangleBorder(
+      borderRadius: ThemeConstants.borderRadiusCircular,
+    ),
+  );
 
-  final ExpansionTileThemeData _expansionTileThemeData =
-      const ExpansionTileThemeData(tilePadding: EdgeInsets.zero, shape: Border());
+  final DialogTheme _dialogTheme = DialogTheme(
+    elevation: ThemeConstants.elevation,
+    shape: RoundedRectangleBorder(
+      borderRadius: ThemeConstants.borderRadiusCircular,
+    ),
+  );
 
-  final ListTileThemeData _listTileThemeData = const ListTileThemeData(contentPadding: EdgeInsets.zero);
+  final ExpansionTileThemeData _expansionTileThemeData = const ExpansionTileThemeData(
+    tilePadding: EdgeInsets.zero,
+    shape: Border(),
+  );
 
-  ElevatedButtonThemeData get _elevatedButtonTheme => ElevatedButtonThemeData(
-        style: ElevatedButton.styleFrom(
-          elevation: ThemeConstants.elevation,
-          minimumSize: const Size.fromHeight(kToolbarHeight),
-          shape: RoundedRectangleBorder(
-            borderRadius: ThemeConstants.borderRadiusCircular,
-          ),
-        ),
-      );
+  final ListTileThemeData _listTileThemeData = const ListTileThemeData(
+    contentPadding: EdgeInsets.zero,
+  );
 
-  InputDecorationTheme get _inputDecorationTheme {
-    return InputDecorationTheme(
-      border: OutlineInputBorder(
+  final ElevatedButtonThemeData _elevatedButtonTheme = ElevatedButtonThemeData(
+    style: ElevatedButton.styleFrom(
+      elevation: ThemeConstants.elevation,
+      minimumSize: const Size.fromHeight(kToolbarHeight),
+      shape: RoundedRectangleBorder(
         borderRadius: ThemeConstants.borderRadiusCircular,
       ),
-    );
-  }
+    ),
+  );
+
+  final InputDecorationTheme _inputDecorationTheme = InputDecorationTheme(
+    border: OutlineInputBorder(
+      borderRadius: ThemeConstants.borderRadiusCircular,
+    ),
+  );
 }

lib/app/theme/dark/dark_theme.dart

@@ -9,8 +9,8 @@ final class DarkTheme extends BaseTheme {
   Brightness get brightness => Brightness.dark;
 
   @override
-  Iterable<ThemeExtension<ThemeExtensions>> get extensions => [
-        ThemeExtensions(
+  Iterable<ThemeExtension<AppThemeExtensions>> get extensions => [
+        AppThemeExtensions(
           humanContent: const Color(0xFF479985),
           aiContent: const Color(0xFF93000A),
           mixedContent: const Color(0xFFFF7E79),

lib/app/theme/light/light_theme.dart

@@ -9,8 +9,8 @@ final class LightTheme extends BaseTheme {
   Brightness get brightness => Brightness.light;
 
   @override
-  Iterable<ThemeExtension<ThemeExtensions>> get extensions => [
-        ThemeExtensions(
+  Iterable<ThemeExtension<AppThemeExtensions>> get extensions => [
+        AppThemeExtensions(
           humanContent: const Color(0xFF007256),
           aiContent: const Color(0xFFBA1A1A),
           mixedContent: const Color(0xFFFF7E79),

lib/app/theme/theme_constants.dart

@@ -4,4 +4,8 @@ abstract final class ThemeConstants {
   static final BorderRadius borderRadiusCircular = BorderRadius.circular(12);
   static const Radius radiusCircular = Radius.circular(12);
   static const double elevation = 2;
+
+  static const FontWeight fontWeightRegular = FontWeight.w400;
+  static const FontWeight fontWeightSemiBold = FontWeight.w500;
+  static const FontWeight fontWeightBold = FontWeight.w600;
 }

lib/app/theme/theme_extensions/theme_extensions.dart

@@ -1,7 +1,7 @@
 import 'package:flutter/material.dart';
 
-class ThemeExtensions extends ThemeExtension<ThemeExtensions> {
-  ThemeExtensions({
+class AppThemeExtensions extends ThemeExtension<AppThemeExtensions> {
+  AppThemeExtensions({
     required this.humanContent,
     required this.mixedContent,
     required this.aiContent,
@@ -12,24 +12,24 @@ class ThemeExtensions extends ThemeExtension<ThemeExtensions> {
   final Color? aiContent;
 
   @override
-  ThemeExtension<ThemeExtensions> lerp(ThemeExtension<ThemeExtensions>? other, double t) {
-    if (other is! ThemeExtensions) {
+  ThemeExtension<AppThemeExtensions> lerp(ThemeExtension<AppThemeExtensions>? other, double t) {
+    if (other is! AppThemeExtensions) {
       return this;
     }
-    return ThemeExtensions(
+    return AppThemeExtensions(
       humanContent: Color.lerp(humanContent, other.humanContent, t),
       mixedContent: Color.lerp(mixedContent, other.mixedContent, t),
       aiContent: Color.lerp(aiContent, other.aiContent, t),
     );
   }
 
   @override
-  ThemeExtensions copyWith({
+  AppThemeExtensions copyWith({
     Color? humanContent,
     Color? mixedContent,
     Color? aiContent,
   }) {
-    return ThemeExtensions(
+    return AppThemeExtensions(
       humanContent: humanContent ?? this.humanContent,
       mixedContent: mixedContent ?? this.mixedContent,
       aiContent: aiContent ?? this.aiContent,
@@ -38,5 +38,5 @@ class ThemeExtensions extends ThemeExtension<ThemeExtensions> {
 
   @override
   String toString() =>
-      'ThemeExtensions(humanContent: $humanContent, mixedContent: $mixedContent, aiContent: $aiContent)';
+      'AppThemeExtensions(humanContent: $humanContent, mixedContent: $mixedContent, aiContent: $aiContent)';
 }

lib/app/widgets/gpt_elevated_button.dart

@@ -0,0 +1,31 @@
+import 'package:flutter/material.dart';
+import 'package:gpt_detector/app/theme/theme_constants.dart';
+import 'package:gpt_detector/core/extensions/context_extensions.dart';
+
+class GPTElevatedButton extends StatelessWidget {
+  const GPTElevatedButton({required this.text, required this.onPressed, super.key, this.showingLoadingIndicator});
+
+  final bool? showingLoadingIndicator;
+  final void Function()? onPressed;
+  final String text;
+
+  @override
+  Widget build(BuildContext context) {
+    return ElevatedButton(
+      style: ElevatedButton.styleFrom(
+        backgroundColor: context.colorScheme.primary,
+        foregroundColor: context.colorScheme.onPrimary,
+      ),
+      onPressed: showingLoadingIndicator ?? false ? null : onPressed,
+      child: showingLoadingIndicator ?? false
+          ? const CircularProgressIndicator.adaptive()
+          : Text(
+              text,
+              style: context.textTheme.bodyLarge?.copyWith(
+                color: context.colorScheme.onPrimary,
+                fontWeight: ThemeConstants.fontWeightBold,
+              ),
+            ),
+    );
+  }
+}

lib/core/extensions/context_extensions.dart

@@ -1,6 +1,6 @@
 import 'package:flutter/material.dart';
 
-extension MediaQueryExtension on BuildContext {
+extension MediaQueryExtensions on BuildContext {
   MediaQueryData get mediaQuery => MediaQuery.of(this);
 
   /// Returns the height of the device
@@ -40,7 +40,7 @@ extension MediaQueryExtension on BuildContext {
   double dynamicHeight(double val) => height * val;
 }
 
-extension PaddingExtension on BuildContext {
+extension PaddingExtensions on BuildContext {
   /// Adds 1% padding from all sides.
   EdgeInsets get paddingAllLow => EdgeInsets.all(lowValue);
 
@@ -112,7 +112,7 @@ extension PaddingExtension on BuildContext {
   EdgeInsets get paddingBottomHigh => EdgeInsets.only(bottom: highValue);
 }
 
-extension ThemeExtension on BuildContext {
+extension ThemeExtensions on BuildContext {
   /// Get the theme data
   ThemeData get theme => Theme.of(this);
 
@@ -121,4 +121,7 @@ extension ThemeExtension on BuildContext {
 
   /// Get the brightness
   Brightness get brightness => Theme.of(this).brightness;
+
+  /// Get the color scheme
+  ColorScheme get colorScheme => Theme.of(this).colorScheme;
 }

lib/core/utils/snackbar/snackbar_utils.dart

@@ -1,10 +1,25 @@
 import 'package:flutter/material.dart';
 import 'package:gpt_detector/app/constants/duration_constants.dart';
+import 'package:gpt_detector/app/theme/theme_constants.dart';
+import 'package:gpt_detector/core/extensions/context_extensions.dart';
 
 abstract final class SnackbarUtils {
   static void showSnackbar({required BuildContext context, required String message}) {
     ScaffoldMessenger.of(context)
       ..hideCurrentSnackBar()
-      ..showSnackBar(SnackBar(content: Text(message), duration: DurationConstants.s4()));
+      ..showSnackBar(
+        SnackBar(
+          padding: EdgeInsets.all(context.defaultValue),
+          content: Text(
+            message,
+            style: context.textTheme.bodyLarge?.copyWith(
+              color: context.theme.colorScheme.onPrimary,
+              fontWeight: ThemeConstants.fontWeightSemiBold,
+            ),
+          ),
+          duration: DurationConstants.s4(),
+          behavior: SnackBarBehavior.fixed,
+        ),
+      );
   }
 }

lib/feature/detector/data/model/detector/detector_model.dart

@@ -60,13 +60,13 @@ enum Classification {
     switch (this) {
       // Return default card color in case initial
       case Classification.initial:
-        return themeData.cardColor;
+        return themeData.secondaryHeaderColor;
       case Classification.human:
-        return themeData.extension<ThemeExtensions>()?.humanContent ?? themeData.cardColor;
+        return themeData.extension<AppThemeExtensions>()?.humanContent ?? themeData.secondaryHeaderColor;
       case Classification.ai:
-        return themeData.extension<ThemeExtensions>()?.aiContent ?? themeData.cardColor;
+        return themeData.extension<AppThemeExtensions>()?.aiContent ?? themeData.secondaryHeaderColor;
       case Classification.mixed:
-        return themeData.extension<ThemeExtensions>()?.mixedContent ?? themeData.cardColor;
+        return themeData.extension<AppThemeExtensions>()?.mixedContent ?? themeData.secondaryHeaderColor;
     }
   }
 }

lib/feature/detector/presentation/cubit/detector_cubit.dart

@@ -1,8 +1,11 @@
+import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:form_inputs/form_inputs.dart';
 import 'package:freezed_annotation/freezed_annotation.dart';
 
 import 'package:gpt_detector/app/errors/failure.dart';
+import 'package:gpt_detector/app/l10n/extensions/app_l10n_extensions.dart';
+import 'package:gpt_detector/core/utils/snackbar/snackbar_utils.dart';
 import 'package:gpt_detector/feature/detector/domain/entities/detector/detector_entity.dart';
 import 'package:gpt_detector/feature/detector/domain/use_cases/detect_use_case.dart';
 import 'package:gpt_detector/feature/detector/domain/use_cases/has_camera_permission_use_case.dart';
@@ -45,9 +48,21 @@ class DetectorCubit extends Cubit<DetectorState> {
     emit(state.copyWith(hasGalleryPermission: hasGalleryPermission));
   }
 
-  Future<void> detectionRequested({required String text}) async {
+  Future<void> detectionRequested({required BuildContext context, required String text}) async {
+    // Validate user input
+    final formStatus = UserInputForm.dirty(text);
+    if (formStatus.invalid) {
+      switch (formStatus.error) {
+        case UserInputFormError.tooShort:
+          SnackbarUtils.showSnackbar(context: context, message: context.l10n.textFieldHelperShortText);
+        case UserInputFormError.tooLong:
+          SnackbarUtils.showSnackbar(context: context, message: context.l10n.textFieldHelperLongText);
+        case null:
+      }
+      return;
+    }
+    // Call use case
     emit(state.copyWith(status: FormzStatus.submissionInProgress));
-
     final response = await _detectUseCase.call(text);
 
     response.fold(