Skip to content

Commit

Permalink
Fix UI Theme issues in Light/Dark Mode (PalisadoesFoundation#2501)
Browse files Browse the repository at this point in the history 
* Fix UI issues in Light Mode

* remove comments from explore_events.dart

* Add Missing Trailing comma

* Add tests for post_widget

* Add trailing comma
  • Loading branch information
@GlenDsza
GlenDsza authored May 4, 2024
1 parent 55aa344 commit a1cf1f6
Show file tree
Hide file tree
Showing 17 changed files with 397 additions and 819 deletions.
20 changes: 11 additions & 9 deletions lib/constants/custom_theme.dart
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
// ignore_for_file: talawa_api_doc
// ignore_for_file: talawa_good_doc_comments

import 'package:flutter/material.dart';

///This file contains various custom themes.
///
///For instance, lightTheme, darkTheme, _lightTextTheme, _darkTextTheme, etc.
///These are imported to other files/widgets to apply the required themes.
class TalawaTheme {
Expand All @@ -25,6 +23,7 @@ class TalawaTheme {
static const Color _darkInWhite = Color(0xffffffff);
static const Color _darkColorSchemePrimary = Color(0xfffabc57);

/// Theme for light mode.
static final lightTheme = ThemeData(
scaffoldBackgroundColor: _lightScaffoldColor,
textSelectionTheme: const TextSelectionThemeData(
Expand All @@ -41,10 +40,14 @@ class TalawaTheme {
primaryContainer: _lightPrimaryVariantColor,
primary: _lightColorSchemePrimary,
secondary: Color(0xffF5F5F5),
onSecondary: Colors.black,
secondaryContainer: _darkScaffoldColor,
tertiary: Colors.black26,
tertiaryContainer: Color.fromARGB(255, 231, 231, 231),
).copyWith(secondary: _lightAccentColor),
);

/// Theme for dark mode.
static final darkTheme = ThemeData(
textSelectionTheme: const TextSelectionThemeData(
cursorColor: _darkCursorColor,
Expand All @@ -61,7 +64,10 @@ class TalawaTheme {
primaryContainer: _darkPrimaryVariantColor,
primary: _darkColorSchemePrimary,
secondary: Colors.black,
onSecondary: Colors.white,
secondaryContainer: _lightScaffoldColor,
tertiary: Colors.white70,
tertiaryContainer: Color.fromARGB(255, 61, 61, 61),
).copyWith(secondary: _darkAccentColor),
);

Expand All @@ -78,12 +84,8 @@ class TalawaTheme {
fontSize: 16,
color: Color(0xFF737373),
),
bodyLarge: TextStyle(
fontSize: 14,
),
bodyMedium: TextStyle(
fontSize: 14,
),
bodyLarge: TextStyle(fontSize: 14, color: Color(0xFF737373)),
bodyMedium: TextStyle(fontSize: 14),
bodySmall: TextStyle(
fontWeight: FontWeight.w400,
color: Color(0xFF737373),
Expand Down
10 changes: 1 addition & 9 deletions lib/views/after_auth_screens/app_settings/app_settings_page.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,6 @@ class AppSettingsPage extends StatelessWidget {

@override
Widget build(BuildContext context) {
// Scaffold implements the basic Material Design visual layout structure.
//Learn more about Scaffold class
//[here](https://api.flutter.dev/flutter/material/Scaffold-class.html).
// const String _talawaWebsite = '';
const String talawaDocs = 'https://docs.talawa.io';
const String talawaGithub =
'https://github.com/PalisadoesFoundation/talawa';
Expand Down Expand Up @@ -59,10 +55,6 @@ class AppSettingsPage extends StatelessWidget {
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
// SizedBox(
// height: SizeConfig.screenHeight! * 0.77,
// child:
// ),
Flexible(
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
Expand Down Expand Up @@ -299,7 +291,7 @@ class AppSettingsPage extends StatelessWidget {
return CustomAlertDialog(
reverse: true,
dialogSubTitle: 'Are you sure you want to logout?',
successText: 'LogOut',
successText: 'Logout',
success: () async {
try {
final bool isLogoutSuccessful =
Expand Down
92 changes: 39 additions & 53 deletions lib/views/after_auth_screens/events/explore_events.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ class ExploreEvents extends StatelessWidget {
this.homeModel,
}) : super(key: key);

/// [homeModal] is a type of [MainScreenViewModel] which provides methods to handle the data for this component.
/// Represents the view model for the home screen.
final MainScreenViewModel? homeModel;

@override
Expand All @@ -28,8 +28,7 @@ class ExploreEvents extends StatelessWidget {
builder: (context, model, child) {
return Scaffold(
appBar: AppBar(
// AppBar returns widget for the header.
backgroundColor: Theme.of(context).primaryColor,
backgroundColor: Colors.green,
key: const Key(
"ExploreEventsAppBar",
),
Expand All @@ -43,13 +42,11 @@ class ExploreEvents extends StatelessWidget {
style: Theme.of(context).textTheme.titleLarge!.copyWith(
fontWeight: FontWeight.w600,
fontSize: 20,
color: Colors.white,
),
),
leading: IconButton(
// returns a button of menu icon to redirect to home.
color: Theme.of(
context,
).iconTheme.color,
color: Colors.white,
icon: const Icon(
Icons.menu,
),
Expand All @@ -61,7 +58,6 @@ class ExploreEvents extends StatelessWidget {
padding: EdgeInsets.only(
right: SizeConfig.screenWidth! * 0.027,
),
// if the events is not empty then renders button for searching the events else renders just a box.
child: model.events.isNotEmpty
? IconButton(
onPressed: () {
Expand All @@ -73,17 +69,15 @@ class ExploreEvents extends StatelessWidget {
),
);
},
icon: Icon(
icon: const Icon(
Icons.search,
size: (SizeConfig.safeBlockHorizontal ?? 4) * 5,
color: Colors.white,
),
)
: const SizedBox(),
),
],
),
// if the model is still fetching the events list then renders the Circular Progress Indicator
// else render refresh icon along with the list of searched events for exploration.
body: model.isBusy
? const Center(
child: CircularProgressIndicator(),
Expand All @@ -100,34 +94,34 @@ class ExploreEvents extends StatelessWidget {
),
child: Column(
children: [
SizedBox(
height: SizeConfig.screenHeight! * 0.013,
),
Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Expanded(
flex: 2,
child: GestureDetector(
onTap: () {
showModalBottomSheet(
context: context,
builder: (_) {
return dropDownList(
model,
context,
);
},
);
},
onTap: () => showModalBottomSheet(
backgroundColor: Colors.white,
context: context,
builder: (_) => dropDownList(
model,
context,
),
),
child: Card(
surfaceTintColor: Theme.of(context)
.colorScheme
.secondaryContainer,
color: Theme.of(context)
.colorScheme
.onPrimary,
child: Container(
padding: EdgeInsets.symmetric(
vertical: (SizeConfig
.safeBlockHorizontal ??
4) *
3,
padding: const EdgeInsets.symmetric(
vertical: 12,
),
child: Row(
mainAxisAlignment:
Expand Down Expand Up @@ -156,30 +150,25 @@ class ExploreEvents extends StatelessWidget {
Expanded(
flex: 3,
child: GestureDetector(
onTap: () {
showDialog(
// on tap open the Explore Event Dialog.
context: context,
builder: (_) {
return const ExploreEventDialog(
key: Key('ExploreEvents'),
);
},
);
},
onTap: () => showDialog(
context: context,
builder: (_) =>
const ExploreEventDialog(
key: Key('ExploreEvents'),
),
),
child: Card(
surfaceTintColor: Theme.of(context)
.colorScheme
.secondaryContainer,
key: homeModel?.keySEDateFilter,
color: Theme.of(context)
.colorScheme
.onPrimary,
child: Container(
padding: EdgeInsets.symmetric(
vertical: (SizeConfig
.safeBlockHorizontal ??
4) *
3,
padding: const EdgeInsets.symmetric(
vertical: 12,
),
// width: SizeConfig.screenWidth! * 0.30,
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
Expand Down Expand Up @@ -215,6 +204,9 @@ class ExploreEvents extends StatelessWidget {
Expanded(
flex: 1,
child: Card(
surfaceTintColor: Theme.of(context)
.colorScheme
.secondaryContainer,
color: Theme.of(context)
.colorScheme
.onPrimary,
Expand All @@ -234,10 +226,8 @@ class ExploreEvents extends StatelessWidget {
],
),
SizedBox(
height: SizeConfig.screenHeight! * 0.027,
height: SizeConfig.screenHeight! * 0.020,
),
// if the events model is empty then renders a box with text as "Empty List"
// else renders lists of the all event tile.
model.events.isEmpty
? SizedBox(
height: SizeConfig.screenHeight! * 0.5,
Expand Down Expand Up @@ -285,11 +275,7 @@ class ExploreEvents extends StatelessWidget {
key: homeModel?.keySEAdd,
heroTag: "AddEventFab",
backgroundColor: Theme.of(context).colorScheme.background,
onPressed: () {
navigationService.pushScreen(
"/createEventPage",
);
},
onPressed: () => navigationService.pushScreen("/createEventPage"),
icon: Icon(
Icons.add,
color: Theme.of(context).colorScheme.secondary,
Expand Down
11 changes: 6 additions & 5 deletions lib/views/after_auth_screens/feed/organization_feed.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,24 +60,23 @@ class _OrganizationFeedState extends State<OrganizationFeed> {
),
),
appBar: AppBar(
// AppBar returns a widget for the header of the page.
backgroundColor: Colors.green,
// Theme.of(context).primaryColor,
elevation: 0.0,
centerTitle: true,
title: Text(
model.currentOrgName,
key: widget.homeModel?.keySHOrgName,
style: Theme.of(context).textTheme.titleLarge!.copyWith(
fontWeight: FontWeight.w600,
fontSize: 20,
color: Colors.white,
),
),
leading: IconButton(
key: widget.homeModel?.keySHMenuIcon,
icon: Icon(
icon: const Icon(
Icons.menu,
color: Theme.of(context).iconTheme.color,
color: Colors.white,
),
onPressed: () {
MainScreenViewModel.scaffoldKey.currentState!.openDrawer();
Expand Down Expand Up @@ -132,7 +131,9 @@ class _OrganizationFeedState extends State<OrganizationFeed> {
pinnedPost: model.pinnedPosts,
model: widget.homeModel!,
),
// Show PostListWidget if there are posts, otherwise show the 'no posts' message
SizedBox(
height: SizeConfig.screenHeight! * 0.01,
),
model.posts.isNotEmpty
? PostListWidget(
key: widget.homeModel?.keySHPost,
Expand Down
23 changes: 10 additions & 13 deletions lib/views/after_auth_screens/profile/profile_page.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,7 @@ class ProfilePage extends StatelessWidget {
this.homeModel,
}) : super(key: key);

/// MainScreenViewModel.
///
/// represents MainScreenViewModel.
final MainScreenViewModel? homeModel;

@override
Expand All @@ -35,11 +34,10 @@ class ProfilePage extends StatelessWidget {
key: model.scaffoldKey,
appBar: AppBar(
backgroundColor: Colors.green,
// Theme.of(context).primaryColor,
elevation: 0.0,
centerTitle: true,
leading: IconButton(
color: Theme.of(context).iconTheme.color,
color: Colors.white,
icon: const Icon(Icons.menu),
onPressed: () =>
MainScreenViewModel.scaffoldKey.currentState!.openDrawer(),
Expand All @@ -48,9 +46,8 @@ class ProfilePage extends StatelessWidget {
title: Text(
AppLocalizations.of(context)!.strictTranslate('Profile'),
style: Theme.of(context).textTheme.titleLarge!.copyWith(
// fontWeight: FontWeight.w600,
fontSize: SizeConfig.screenHeight! * 0.03,
fontFamily: 'open-sans',
fontWeight: FontWeight.w600,
fontSize: 20,
color: Colors.white,
),
),
Expand All @@ -60,7 +57,10 @@ class ProfilePage extends StatelessWidget {
onPressed: () {
navigationService.pushScreen(Routes.appSettings);
},
icon: const Icon(Icons.settings),
icon: const Icon(
Icons.settings,
color: Colors.white,
),
),
],
),
Expand Down Expand Up @@ -103,9 +103,7 @@ class ProfilePage extends StatelessWidget {
child: Text(
'${model.currentUser.firstName!} ${model.currentUser.lastName!}',
style: TextStyle(
color: Colors.white,
fontSize: SizeConfig.screenHeight! * 0.025,
fontFamily: 'open-sans',
),
),
),
Expand Down Expand Up @@ -144,9 +142,8 @@ class ProfilePage extends StatelessWidget {
.focusedBorder!
.borderSide
.color,
backgroundColor: Theme.of(context)
.colorScheme
.secondaryContainer,
backgroundColor:
Theme.of(context).colorScheme.tertiary,
),
],
),
Expand Down
2 changes: 1 addition & 1 deletion lib/views/pre_auth_screens/login.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -183,7 +183,7 @@ class _LoginState extends State<Login> {
onTap: () => model.login(),
textColor: const Color(0xFF008A37),
key: const Key('LoginButton'),
backgroundColor: Colors.white,
backgroundColor: Theme.of(context).colorScheme.tertiary,
),
SizedBox(height: SizeConfig.screenHeight! * 0.0215),
],
Expand Down
Loading

0 comments on commit a1cf1f6

Please sign in to comment.