added dark mode option #40

PseudoCode01 · 2020-12-07T09:09:55Z

With an attempt to make app more attractive I have added the dark mode to the app using theme provider since in today's time everyone like the dark mode .

Preview :

ScreenShots

manjotsidhu · 2020-12-07T09:55:25Z

android/gradle/wrapper/gradle-wrapper.properties

@@ -3,4 +3,4 @@ distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-5.6.2-all.zip
+distributionUrl=https://services.gradle.org/distributions/gradle-6.0.1-all.zip


Does the changes require Gradle update from 5.6.2 to 6.0.1 ?

manjotsidhu · 2020-12-07T09:58:28Z

lib/main.dart

+          AppTheme(
+              id: 'dark',
+              data: ThemeData(
+                primaryColor: Colors.grey[900],


Would be better, if we keep the colors for Dark Mode in app_theme for reusability.

ok i will put in app_theme

PseudoCode01 · 2020-12-07T10:55:13Z

lib/app_theme.dart

@@ -1,7 +1,7 @@
 import 'package:flutter/material.dart';

-class AppTheme {
-  AppTheme._();
+class PrimaryAppTheme {


I have used theme provider dependency whose AppTheme keyword was conflicting with the AppTheme class.

Can we use CVTheme or CircuitVerseTheme ? PrimaryTheme doesn't go well with the dark colours imo!

lib/ui/components/cv_header.dart

jaggu21 · 2020-12-07T17:38:05Z

Adding on to @manjotsidhu 's suggestions, I think it gives better user experience if he/she can toggle between light and dark mode at any location from the app.

Say that you're on Add Assignments page. You cannot toggle between light and dark modes on this page(since app drawer is not accessible), and the user will have to pop the pages from stack to reach groups page and only then the user will be able to app drawer to toggle between the two themes.

PseudoCode01 · 2020-12-07T19:02:39Z

Yes , I am working on all the changes mentioned

PseudoCode01 · 2020-12-08T10:48:16Z

I have made the asked changes

manjotsidhu · 2020-12-08T10:55:56Z

I have made the asked changes

@iCoder-007 can you send screenshots for only new changes for others to review ?

manjotsidhu · 2020-12-08T10:57:35Z

Also please fix formatting's using flutter format .

PseudoCode01 · 2020-12-08T11:03:45Z

Screenshots

manjotsidhu · 2020-12-08T11:23:18Z

I am not sure if the FAB button in home is a good idea or not. I think @Nitish145 @jaggu21 should give the inputs on this

PseudoCode01 · 2020-12-08T11:35:22Z

if you want i can place it in appbar at right

jaggu21 · 2020-12-08T12:32:05Z

I agree with @manjotsidhu . Have a look at the following screenshot.

FAB's color and the background color match which slightly looks off to me.

Apart from that few minor issues:
1)Changing the color of arrow to white would make it look better than keeping it as black.

It looks better if we follow same theme throughout the entire app. Also on switching from light mode to dark mode ,the lowermost section of the HTML editor changes it's color(from grey to green) while the topmost section remains the same(grey). I think it would be better if both either change or both remain the same. Though I am not sure if this is major issue.

PseudoCode01 · 2020-12-08T12:40:28Z

so should i remove fab button and place it in appbar right
and the rest i will change to as you recommended .

PseudoCode01 · 2020-12-09T11:38:27Z

As asked i have made the changes please have a look

manjotsidhu · 2020-12-09T11:47:14Z

@iCoder-007 looks good to me, kindly run flutter format . to format the documents.

PseudoCode01 · 2020-12-09T12:01:17Z

I have already done that but everything remains unchanged

manjotsidhu · 2020-12-09T12:07:21Z

I have already done that but everything remains unchanged

Here the logs say that lib\ui\views\projects\components\project_card.dart is not formatted
https://github.com/CircuitVerse/mobile-app/pull/40/checks?check_run_id=1523553695#step:6:87

PseudoCode01 · 2020-12-09T12:19:47Z

when i am running flutter format . it shows unchanged
and the improvements you mentioned i am fixing them

manjotsidhu · 2020-12-09T12:22:50Z

when i am running flutter format . it shows unchanged

It will show Unchanged for all files except project_card.dart and it will format that.

PseudoCode01 · 2020-12-09T12:25:55Z

have a look

manjotsidhu · 2020-12-09T12:26:17Z

Here is the diff of the changes while formatting :

Diff (Click to expand)

diff --git a/lib/ui/views/projects/components/project_card.dart b/lib/ui/views/projects/components/project_card.dart
index 5bf414d..1a78ed7 100644
--- a/lib/ui/views/projects/components/project_card.dart
+++ b/lib/ui/views/projects/components/project_card.dart
@@ -56,8 +56,12 @@ class _ProjectCardState extends State<ProjectCard> {
               textAlign: TextAlign.center,
               style: Theme.of(context).textTheme.headline5.copyWith(
                     color: ThemeProvider.themeOf(context).id == 'dark'
-                        ? widget.isHeaderFilled ? Colors.black : Colors.white
-                        : widget.isHeaderFilled ? Colors.white : Colors.black,
+                        ? widget.isHeaderFilled
+                            ? Colors.black
+                            : Colors.white
+                        : widget.isHeaderFilled
+                            ? Colors.white
+                            : Colors.black,
:...skipping...
diff --git a/lib/ui/views/projects/components/project_card.dart b/lib/ui/views/projects/components/project_card.dart
index 5bf414d..1a78ed7 100644
--- a/lib/ui/views/projects/components/project_card.dart
+++ b/lib/ui/views/projects/components/project_card.dart
@@ -56,8 +56,12 @@ class _ProjectCardState extends State<ProjectCard> {
               textAlign: TextAlign.center,
               style: Theme.of(context).textTheme.headline5.copyWith(
                     color: ThemeProvider.themeOf(context).id == 'dark'
-                        ? widget.isHeaderFilled ? Colors.black : Colors.white
-                        : widget.isHeaderFilled ? Colors.white : Colors.black,
+                        ? widget.isHeaderFilled
+                            ? Colors.black
+                            : Colors.white
+                        : widget.isHeaderFilled
+                            ? Colors.white     
+                            : Colors.black,    
                   ),
             ),
           ),

manjotsidhu · 2020-12-09T12:30:07Z

have a look

Looks like either your flutter version is old or you have set your line length more than the default.

PseudoCode01 · 2020-12-09T13:54:44Z

have a look at changes

manjotsidhu · 2020-12-09T14:49:40Z

@iCoder-007 we recently merged #37 and you might need to fix build errors and text colors for Dark Mode in Featured Project Card.

…obile-app into introduce-dark-mode

PseudoCode01 · 2020-12-23T02:06:09Z

Please check

Nitish145 · 2020-12-23T03:32:14Z

android/gradle/wrapper/gradle-wrapper.properties

@@ -3,4 +3,4 @@ distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-5.6.2-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-5.6.2-all.zip


@iCoder-007

Nitish145 · 2020-12-23T03:37:41Z

@iCoder-007 can u please undo the last merge commit, and try rebasing to fix the conflicts

pulling changes

PseudoCode01 · 2020-12-23T04:09:19Z

i saw that that there are some new changes in master branch so i have pulled the changes and will fix the conflicts manually , will this work

Nitish145 · 2020-12-23T04:18:05Z

Yes

…o introduce-dark-mode

…obile-app into introduce-dark-mode

PseudoCode01 · 2020-12-24T04:13:24Z

I think due to latest merge the ui test are failing

PseudoCode01 · 2020-12-24T04:15:12Z

And sorry for the delays I was quiet busy

manjotsidhu · 2020-12-24T05:39:36Z

@iCoder-007 Have you merged d60561b ?

UI Test: EditProfileView: Fix Test (CircuitVerse#46)

…o introduce-dark-mode

manjotsidhu · 2020-12-24T12:58:06Z

@iCoder-007 try pushing again, the CI will pass

PseudoCode01 · 2020-12-24T12:58:34Z

okk

…o introduce-dark-mode

…obile-app into introduce-dark-mode

Nitish145

Please make the requested changes.

manjotsidhu · 2020-12-24T16:31:18Z

@iCoder-007 Can you check if CVTypeAheadField which was merged is following the dark theme as well ?

PseudoCode01 · 2020-12-29T16:52:37Z

@iCoder-007 Can you check if CVTypeAheadField which was merged is following the dark theme as well ?

yes, and sorry for delay

manjotsidhu · 2021-01-01T13:16:19Z

@Nitish145

PseudoCode01 · 2021-01-04T12:57:45Z

please check

manjotsidhu · 2021-01-05T13:56:33Z

@tachyons Seems like @Nitish145 is busy, can you merge this ?

added dark mode option

59f5813

PseudoCode01 marked this pull request as ready for review December 7, 2020 09:35

manjotsidhu reviewed Dec 7, 2020

View reviewed changes

This comment has been minimized.

Sign in to view

minor changes in dark-mode

b2df06b

positioning the dark mode switch and minor color improvement

6cabd85

This comment has been minimized.

Sign in to view

some basic colors improvement in dark mode and code formatting

7576a8f

Merge branch 'master' into introduce-dark-mode

9b404f1

Merge branch 'introduce-dark-mode' of https://github.com/iCoder-007/m…

e5ddea7

…obile-app into introduce-dark-mode

Merge branch 'master' into introduce-dark-mode

d807279

Nitish145 requested changes Dec 23, 2020

View reviewed changes

PseudoCode01 and others added 2 commits December 22, 2020 22:40

removed unwanted changes

6467452

Merge pull request #4 from CircuitVerse/master

4f2a39e

pulling changes

PseudoCode01 added 2 commits December 23, 2020 00:02

Merge branch 'master' of https://github.com/iCoder-007/mobile-app int…

888ce2b

…o introduce-dark-mode

Merge branch 'introduce-dark-mode' of https://github.com/iCoder-007/m…

2d43fe8

…obile-app into introduce-dark-mode

PseudoCode01 and others added 2 commits December 24, 2020 17:20

Merge pull request #5 from CircuitVerse/master

a7db0c1

UI Test: EditProfileView: Fix Test (CircuitVerse#46)

Merge branch 'master' of https://github.com/iCoder-007/mobile-app int…

12fda96

…o introduce-dark-mode

PseudoCode01 added 2 commits December 24, 2020 08:17

Merge branch 'master' of https://github.com/iCoder-007/mobile-app int…

71b5cf7

…o introduce-dark-mode

Merge branch 'introduce-dark-mode' of https://github.com/iCoder-007/m…

a605ef1

…obile-app into introduce-dark-mode

Nitish145 requested changes Dec 24, 2020

View reviewed changes

removed unwanted changes

c11e303

Nitish145 approved these changes Jan 5, 2021

View reviewed changes

Nitish145 merged commit c22c15b into CircuitVerse:master Jan 5, 2021

manjotsidhu mentioned this pull request Jan 5, 2021

Introduce dark mode #38

Closed

added dark mode option #40

added dark mode option #40

Conversation

PseudoCode01 commented Dec 7, 2020

manjotsidhu Dec 7, 2020

Choose a reason for hiding this comment

manjotsidhu Dec 7, 2020

Choose a reason for hiding this comment

PseudoCode01 Dec 7, 2020

Choose a reason for hiding this comment

This comment was marked as resolved.

PseudoCode01 Dec 7, 2020

Choose a reason for hiding this comment

Nitish145 Dec 11, 2020

Choose a reason for hiding this comment

This comment has been minimized.

jaggu21 commented Dec 7, 2020

PseudoCode01 commented Dec 7, 2020

PseudoCode01 commented Dec 8, 2020

manjotsidhu commented Dec 8, 2020

manjotsidhu commented Dec 8, 2020

PseudoCode01 commented Dec 8, 2020

manjotsidhu commented Dec 8, 2020

PseudoCode01 commented Dec 8, 2020

jaggu21 commented Dec 8, 2020 • edited Loading

PseudoCode01 commented Dec 8, 2020

PseudoCode01 commented Dec 9, 2020

manjotsidhu commented Dec 9, 2020

PseudoCode01 commented Dec 9, 2020

manjotsidhu commented Dec 9, 2020

This comment has been minimized.

PseudoCode01 commented Dec 9, 2020

manjotsidhu commented Dec 9, 2020

PseudoCode01 commented Dec 9, 2020

manjotsidhu commented Dec 9, 2020

manjotsidhu commented Dec 9, 2020

PseudoCode01 commented Dec 9, 2020

manjotsidhu commented Dec 9, 2020

PseudoCode01 commented Dec 23, 2020

Nitish145 Dec 23, 2020

Choose a reason for hiding this comment

Nitish145 commented Dec 23, 2020

PseudoCode01 commented Dec 23, 2020 • edited Loading

Nitish145 commented Dec 23, 2020

PseudoCode01 commented Dec 24, 2020

PseudoCode01 commented Dec 24, 2020

manjotsidhu commented Dec 24, 2020

manjotsidhu commented Dec 24, 2020

PseudoCode01 commented Dec 24, 2020

Nitish145 left a comment

Choose a reason for hiding this comment

manjotsidhu commented Dec 24, 2020

PseudoCode01 commented Dec 29, 2020

manjotsidhu commented Jan 1, 2021

PseudoCode01 commented Jan 4, 2021

manjotsidhu commented Jan 5, 2021

jaggu21 commented Dec 8, 2020 •

edited

Loading

PseudoCode01 commented Dec 23, 2020 •

edited

Loading