Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add dark mode support to QuestionPlayerActivity and ExplorationActivity #4195

Closed
ayush0402 opened this issue Feb 14, 2022 · 9 comments
Closed
Assignees
Labels
Impact: Low Low perceived user impact (e.g. edge cases). Issue: Needs Clarification Indicates that an issue needs more detail in order to be able to be acted upon. Z-ibt Temporary label for Ben to keep track of issues he's triaged.

Comments

@ayush0402
Copy link
Contributor

ayush0402 commented Feb 14, 2022

Add dark mode support to QuestionPlayerActivity and ExplorationActivity (includes state fragment).

Go through this wiki to get started.

@bhaktideshmukh bhaktideshmukh self-assigned this Mar 3, 2022
rt4914 pushed a commit that referenced this issue Jun 1, 2022
…ploration (#4377)

* added dark mode

* renamed few files

* updated background color to text color

* seperated background and text color
@Broppia Broppia added issue_type_feature Impact: Low Low perceived user impact (e.g. edge cases). labels Jun 2, 2022
rt4914 pushed a commit that referenced this issue Jul 11, 2022
…ionPlayer (#4404)

* added dark mode to buttons & progress bar

* add submit_text_color

* resolving failing static checks
rt4914 pushed a commit that referenced this issue Jul 19, 2022
…xploration (#4382)

* added dark mode for input interaction

* updated naming convention

* added error_color

* added hint color

* changes cursor color

* changed cursor color

* updated cursor_color

* resolving failing checks

* resolving failing checks

* added new hint color
BenHenning added a commit that referenced this issue Jul 29, 2022
rt4914 pushed a commit that referenced this issue Jul 29, 2022
rt4914 pushed a commit that referenced this issue Sep 1, 2022
…lorationPlayer (#4540)

* dark_mode_suuport_to_input_interactions

* nit_changes

* added cursor color
@BenHenning BenHenning added Issue: Needs Clarification Indicates that an issue needs more detail in order to be able to be acted upon. Z-ibt Temporary label for Ben to keep track of issues he's triaged. issue_user_learner labels Sep 15, 2022
@MohitGupta121
Copy link
Member

MohitGupta121 commented Nov 30, 2022

@rt4914 I checked and run this issue on my emulator and found almost all the things related to dark mode in this issue are fixed by @bhaktideshmukh

Only one thing left which is already been raised in issue #4671

So @rt4914 can you please tell me if any part of this issue is missing from me? As this issue is fixed in differnet parts.
Is any part left by @bhaktideshmukh?

@rt4914
Copy link
Contributor

rt4914 commented Nov 30, 2022

@MohitGupta121 In this my only suggestion is to check solution UI too in dark-mode.
I would suggest that you assign this and #4671 to yourself and solve both the issues in one single PR.
In PR make sure that you generate dark-mode screenshots of solution summary too.

@MohitGupta121
Copy link
Member

@rt4914 okay thanks you, got it.
I'll fix this issue.

@MohitGupta121
Copy link
Member

MohitGupta121 commented Dec 1, 2022

@rt4914 @BenHenning
The hint_summary exapnd icon in different in Production app and in mockup so I have to go with which one?

In Production: https://user-images.githubusercontent.com/76530270/205110455-a7fb11e2-0a7a-4a76-b40a-cc94ed266dee.png

In Desgins Mockup: https://xd.adobe.com/view/3dca36c2-5115-419c-b25e-0f10526b077c-6899/screen/99e9e4c3-6c5e-4c13-a9f2-6b92aee17392/specs/

I think keep the Production one as in the dark mode, but the color of arrow should be white in dark mode.
As the Mockup one is too small so user get confused.

What you should suggest?

@MohitGupta121 MohitGupta121 self-assigned this Dec 1, 2022
@BenHenning
Copy link
Member

I'm assuming the current arrow was just a reuse of the one used in the topic fragment. I actually don't see much issue with keeping it as-is (at least until we actually see user confusion arise that needs to be addressed). Do you have any concerns @rt4914?

@MohitGupta121
Copy link
Member

MohitGupta121 commented Dec 2, 2022

@rt4914 I checked and run this issue on my emulator and found almost all the things related to dark mode in this issue are fixed by @bhaktideshmukh

Only one thing left which is already been raised in issue #4671

So @rt4914 can you please tell me if any part of this issue is missing from me? As this issue is fixed in differnet parts. Is any part left by @bhaktideshmukh?

@rt4914 can I do #4561 and #4513 issue also in that one single PR? What you say?

@rt4914
Copy link
Contributor

rt4914 commented Dec 2, 2022

@MohitGupta121
Use the mocks design for icon color. That is, for light mode use black drop down icon and for dark mode you white drop down icon. Transparent background in both cases.

@MohitGupta121
Copy link
Member

@MohitGupta121 Use the mocks design for icon color. That is, for light mode use black drop down icon and for dark mode you white drop down icon. Transparent background in both cases.

Okay sure, I use same as in mocks.

@rt4914 rt4914 assigned MohitGupta121 and unassigned rt4914 Jan 3, 2023
rt4914 pushed a commit that referenced this issue Jan 7, 2023
… Questions and Exploration (#4824)

<!-- READ ME FIRST: Please fill in the explanation section below and
check off every point from the Essential Checklist! -->
## Explanation

Fixes Part of #4195 : Dark mode implementation - Content and Feedback
Questions and Exploration

<!--
- Explain what your PR does. If this PR fixes an existing bug, please
include
- "Fixes #bugnum:" in the explanation so that GitHub can auto-close the
issue
  - when this PR is merged.
  -->

## Essential Checklist
<!-- Please tick the relevant boxes by putting an "x" in them. -->
- [x] The PR title and explanation each start with "Fix #bugnum: " (If
this PR fixes part of an issue, prefix the title with "Fix part of
#bugnum: ...".)
- [ ] Any changes to
[scripts/assets](https://github.com/oppia/oppia-android/tree/develop/scripts/assets)
files have their rationale included in the PR explanation.
- [x] The PR follows the [style
guide](https://github.com/oppia/oppia-android/wiki/Coding-style-guide).
- [x] The PR does not contain any unnecessary code changes from Android
Studio
([reference](https://github.com/oppia/oppia-android/wiki/Guidance-on-submitting-a-PR#undo-unnecessary-changes)).
- [x] The PR is made from a branch that's **not** called "develop" and
is up-to-date with "develop".
- [x] The PR is **assigned** to the appropriate reviewers
([reference](https://github.com/oppia/oppia-android/wiki/Guidance-on-submitting-a-PR#clarification-regarding-assignees-and-reviewers-section)).

## For UI-specific PRs only

### Content and Feedbacks

<img
src="https://user-images.githubusercontent.com/76530270/210980686-d6800a26-6bb9-4c6d-9899-1f07930d3eae.png"
height="400" style="max-width: 100%"> <img
src="https://user-images.githubusercontent.com/76530270/210980738-642bf007-9ef7-4eea-a85b-96aca743dd4b.png"
height="400" style="max-width: 100%">

<img
src="https://user-images.githubusercontent.com/76530270/211056436-a50df474-6e42-4379-b50f-186096ba5f15.png"
height="400" style="max-width: 100%"> <img
src="https://user-images.githubusercontent.com/76530270/211056453-527377d0-2cd8-4489-85b6-b416c9783f7c.png"
height="400" style="max-width: 100%">




<!-- Delete these section if this PR does not include UI-related
changes. -->
If your PR includes UI-related changes, then:
- Add screenshots for portrait/landscape for both a tablet & phone of
the before & after UI changes
- For the screenshots above, include both English and pseudo-localized
(RTL) screenshots (see [RTL
guide](https://github.com/oppia/oppia-android/wiki/RTL-Guidelines))
- Add a video showing the full UX flow with a screen reader enabled (see
[accessibility
guide](https://github.com/oppia/oppia-android/wiki/Accessibility-(A11y)-Guide))
- Add a screenshot demonstrating that you ran affected Espresso tests
locally & that they're passing
rt4914 pushed a commit that referenced this issue Jan 9, 2023
…teraction items of Questions and Exploration (#4825)

<!-- READ ME FIRST: Please fill in the explanation section below and
check off every point from the Essential Checklist! -->
## Explanation

Fixes Part of #4195 : Dark mode implementation - Buttons and Input
Interaction items of Questions and Exploration

#### Files I have Checked & Changed:-

`styles.xml`

`previous_next_state_image_view_background.xml`
`state_button_primary_background.xml`
`continue_navigation_button_item.xml`
`next_button_item.xml`
`previous_button_item.xml`
`replay_button_item.xml`
`return_to_lesson_button_item.xml`
`return_to_topic_button_item.xml`
`submit_button_item.xml`

`color_cursor.xml`
`edit_text_background.xml`

`ratio_input_interaction_item.xml`
`text_input_interaction_item.xml`
`numeric_input_interaction_item.xml`


<!--
- Explain what your PR does. If this PR fixes an existing bug, please
include
- "Fixes #bugnum:" in the explanation so that GitHub can auto-close the
issue
  - when this PR is merged.
  -->

## Essential Checklist
<!-- Please tick the relevant boxes by putting an "x" in them. -->
- [x] The PR title and explanation each start with "Fix #bugnum: " (If
this PR fixes part of an issue, prefix the title with "Fix part of
#bugnum: ...".)
- [ ] Any changes to
[scripts/assets](https://github.com/oppia/oppia-android/tree/develop/scripts/assets)
files have their rationale included in the PR explanation.
- [x] The PR follows the [style
guide](https://github.com/oppia/oppia-android/wiki/Coding-style-guide).
- [x] The PR does not contain any unnecessary code changes from Android
Studio
([reference](https://github.com/oppia/oppia-android/wiki/Guidance-on-submitting-a-PR#undo-unnecessary-changes)).
- [x] The PR is made from a branch that's **not** called "develop" and
is up-to-date with "develop".
- [x] The PR is **assigned** to the appropriate reviewers
([reference](https://github.com/oppia/oppia-android/wiki/Guidance-on-submitting-a-PR#clarification-regarding-assignees-and-reviewers-section)).

## For UI-specific PRs only

### Buttons and Input Interactions

<img
src="https://user-images.githubusercontent.com/76530270/211149809-6eb62e24-2912-466a-8168-822e6b9311c7.png"
height="400" style="max-width: 100%"> <img
src="https://user-images.githubusercontent.com/76530270/211149828-13aeccb0-df82-4ec5-bc63-5c6a4012c87c.png"
height="400" style="max-width: 100%">

<img
src="https://user-images.githubusercontent.com/76530270/211149867-d5d4f125-b86a-4534-bd57-e3e278327f91.png"
height="400" style="max-width: 100%"> <img
src="https://user-images.githubusercontent.com/76530270/211149890-2c7fc856-8a58-4ee7-8d4a-b3e23a66cada.png"
height="400" style="max-width: 100%">

<img
src="https://user-images.githubusercontent.com/76530270/211150021-34af5a62-9482-414a-b0d2-958b12e63736.png"
height="400" style="max-width: 100%"> <img
src="https://user-images.githubusercontent.com/76530270/211149959-0beb8d37-a69b-4861-b73c-8ef8c4f68fe7.png"
height="400" style="max-width: 100%">


<img
src="https://user-images.githubusercontent.com/76530270/211150070-d5abea7d-3a5c-41ea-8ae2-22951397974f.png"
height="400" style="max-width: 100%"> <img
src="https://user-images.githubusercontent.com/76530270/211150117-b6fec9e3-69e0-4d3b-9470-933a7fde93a1.png"
height="400" style="max-width: 100%">


<img
src="https://user-images.githubusercontent.com/76530270/211150174-579cbd9b-78ba-453b-b97d-6029fc5fe610.png"
height="400" style="max-width: 100%"> <img
src="https://user-images.githubusercontent.com/76530270/211150184-719bb6ef-eebf-4aa0-9aba-1d391fb3c3c5.png"
height="400" style="max-width: 100%">


<img
src="https://user-images.githubusercontent.com/76530270/211150261-0b76861a-a3a8-4909-b28d-f8d60e09a604.png"
height="400" style="max-width: 100%"> <img
src="https://user-images.githubusercontent.com/76530270/211150279-9241fc3c-92b6-41ce-ad90-902e70c6f376.png"
height="400" style="max-width: 100%">

<img
src="https://user-images.githubusercontent.com/76530270/211150314-07ee6b3b-c7f7-45bb-afe0-d751e4364a1e.png"
height="400" style="max-width: 100%"> <img
src="https://user-images.githubusercontent.com/76530270/211150363-3f35a92c-669b-41eb-92de-93311a40cef5.png"
height="400" style="max-width: 100%">

<img
src="https://user-images.githubusercontent.com/76530270/211150409-5309f46d-a3f1-48a9-bd96-e458a33f8417.png"
height="400" style="max-width: 100%"> <img
src="https://user-images.githubusercontent.com/76530270/211150433-3222c26c-5905-46cc-b757-2db99d960996.png"
height="400" style="max-width: 100%">


<img
src="https://user-images.githubusercontent.com/76530270/211150549-56d66806-8036-4ac9-8557-665217564c43.png"
height="400" style="max-width: 100%"> <img
src="https://user-images.githubusercontent.com/76530270/211150573-61733f7c-d637-4476-9a09-dcca0b0b46f7.png"
height="400" style="max-width: 100%">


<img
src="https://user-images.githubusercontent.com/76530270/211150639-ca51878e-cd0b-483f-bbe5-cc907a553e84.png"
height="400" style="max-width: 100%"> <img
src="https://user-images.githubusercontent.com/76530270/211150612-1fbd4824-0a33-4c54-90c8-cddfe571096f.png"
height="400" style="max-width: 100%">


<img
src="https://user-images.githubusercontent.com/76530270/211150671-4e6d83ad-9451-4184-b454-2255a54f2eec.png"
height="400" style="max-width: 100%"> <img
src="https://user-images.githubusercontent.com/76530270/211150710-b21dff2c-b557-4a80-9bde-adf6df2d9c49.png"
height="400" style="max-width: 100%">












<!-- Delete these section if this PR does not include UI-related
changes. -->
If your PR includes UI-related changes, then:
- Add screenshots for portrait/landscape for both a tablet & phone of
the before & after UI changes
- For the screenshots above, include both English and pseudo-localized
(RTL) screenshots (see [RTL
guide](https://github.com/oppia/oppia-android/wiki/RTL-Guidelines))
- Add a video showing the full UX flow with a screen reader enabled (see
[accessibility
guide](https://github.com/oppia/oppia-android/wiki/Accessibility-(A11y)-Guide))
- Add a screenshot demonstrating that you ran affected Espresso tests
locally & that they're passing
rt4914 pushed a commit that referenced this issue Jan 12, 2023
…ns items of Questions and Exploration (#4828)

<!-- READ ME FIRST: Please fill in the explanation section below and
check off every point from the Essential Checklist! -->
## Explanation

Fixes Part of #4195 : Dark mode implementation - Different Interactions
items of Questions and Exploration


<!--
- Explain what your PR does. If this PR fixes an existing bug, please
include
- "Fixes #bugnum:" in the explanation so that GitHub can auto-close the
issue
  - when this PR is merged.
  -->

## Essential Checklist
<!-- Please tick the relevant boxes by putting an "x" in them. -->
- [x] The PR title and explanation each start with "Fix #bugnum: " (If
this PR fixes part of an issue, prefix the title with "Fix part of
#bugnum: ...".)
- [ ] Any changes to
[scripts/assets](https://github.com/oppia/oppia-android/tree/develop/scripts/assets)
files have their rationale included in the PR explanation.
- [x] The PR follows the [style
guide](https://github.com/oppia/oppia-android/wiki/Coding-style-guide).
- [x] The PR does not contain any unnecessary code changes from Android
Studio
([reference](https://github.com/oppia/oppia-android/wiki/Guidance-on-submitting-a-PR#undo-unnecessary-changes)).
- [x] The PR is made from a branch that's **not** called "develop" and
is up-to-date with "develop".
- [x] The PR is **assigned** to the appropriate reviewers
([reference](https://github.com/oppia/oppia-android/wiki/Guidance-on-submitting-a-PR#clarification-regarding-assignees-and-reviewers-section)).

## For UI-specific PRs only

### Different Interactions

<img
src="https://user-images.githubusercontent.com/76530270/212128422-c825e290-e187-41d7-955e-8c5e80b3fcf4.png"
height="400" style="max-width: 100%"> <img
src="https://user-images.githubusercontent.com/76530270/212128249-49836745-c923-4ce4-80cb-441996f9842e.png"
height="400" style="max-width: 100%">

<img
src="https://user-images.githubusercontent.com/76530270/211482033-b947b78a-97f5-4af2-bdec-db236942cab0.png"
height="400" style="max-width: 100%"> <img
src="https://user-images.githubusercontent.com/76530270/212106930-7c85ccb2-91a9-4bc7-b6db-7a00cb2a8676.png"
height="400" style="max-width: 100%">

<img
src="https://user-images.githubusercontent.com/76530270/212128839-6996d3fc-b1da-41d0-84bf-3144fdd70e2e.png"
height="400" style="max-width: 100%"> <img
src="https://user-images.githubusercontent.com/76530270/212126631-8a262e4a-c4de-4ef9-9ec5-5840fc8db572.png"
height="400" style="max-width: 100%">

<img
src="https://user-images.githubusercontent.com/76530270/211482037-05491c64-da4b-4e0b-bb69-24ebb9b21023.png"
height="400" style="max-width: 100%"> <img
src="https://user-images.githubusercontent.com/76530270/212107937-7dd9cbe7-e556-45ab-a764-55e2b37f05c0.png"
height="400" style="max-width: 100%">


<img
src="https://user-images.githubusercontent.com/76530270/211482079-9273d94c-ee6c-498c-8539-a76119a022fd.png"
height="400" style="max-width: 100%"> <img
src="https://user-images.githubusercontent.com/76530270/211482022-aedbd2d5-39e6-4100-afdc-1d12ad6f9e75.png"
height="400" style="max-width: 100%">


<img
src="https://user-images.githubusercontent.com/76530270/211482084-af56ea21-7d57-4d2e-88e9-f449b0d09b79.png"
height="400" style="max-width: 100%"> <img
src="https://user-images.githubusercontent.com/76530270/211482024-e05751db-d006-48e9-b52e-8a869b5c69d4.png"
height="400" style="max-width: 100%">


<img
src="https://user-images.githubusercontent.com/76530270/211482088-282e6ac8-59b8-4f7e-99c9-2c55ab1a717d.png"
height="400" style="max-width: 100%"> <img
src="https://user-images.githubusercontent.com/76530270/211482026-d4301294-be65-4d48-a533-bd3c465ace7a.png"
height="400" style="max-width: 100%">

<img
src="https://user-images.githubusercontent.com/76530270/211483547-936d2355-12b8-4394-aebb-cd55d278f4af.png"
height="400" style="max-width: 100%"> <img
src="https://user-images.githubusercontent.com/76530270/211483506-5c4259f8-f3c2-410b-a3dd-e99cee9c1be1.png"
height="400" style="max-width: 100%">




<!-- Delete these section if this PR does not include UI-related
changes. -->
If your PR includes UI-related changes, then:
- Add screenshots for portrait/landscape for both a tablet & phone of
the before & after UI changes
- For the screenshots above, include both English and pseudo-localized
(RTL) screenshots (see [RTL
guide](https://github.com/oppia/oppia-android/wiki/RTL-Guidelines))
- Add a video showing the full UX flow with a screen reader enabled (see
[accessibility
guide](https://github.com/oppia/oppia-android/wiki/Accessibility-(A11y)-Guide))
- Add a screenshot demonstrating that you ran affected Espresso tests
locally & that they're passing
rt4914 pushed a commit that referenced this issue Jan 17, 2023
…Progress Bar, State, Questions, Exploration of Questions and Exploration (#4843)

<!-- READ ME FIRST: Please fill in the explanation section below and
check off every point from the Essential Checklist! -->
## Explanation

Fixes Part of #4195 : Dark mode implementation - Different Interactions
items of Questions and Exploration


<!--
- Explain what your PR does. If this PR fixes an existing bug, please
include
- "Fixes #bugnum:" in the explanation so that GitHub can auto-close the
issue
  - when this PR is merged.
  -->

## Essential Checklist
<!-- Please tick the relevant boxes by putting an "x" in them. -->
- [x] The PR title and explanation each start with "Fix #bugnum: " (If
this PR fixes part of an issue, prefix the title with "Fix part of
#bugnum: ...".)
- [ ] Any changes to
[scripts/assets](https://github.com/oppia/oppia-android/tree/develop/scripts/assets)
files have their rationale included in the PR explanation.
- [x] The PR follows the [style
guide](https://github.com/oppia/oppia-android/wiki/Coding-style-guide).
- [x] The PR does not contain any unnecessary code changes from Android
Studio
([reference](https://github.com/oppia/oppia-android/wiki/Guidance-on-submitting-a-PR#undo-unnecessary-changes)).
- [x] The PR is made from a branch that's **not** called "develop" and
is up-to-date with "develop".
- [x] The PR is **assigned** to the appropriate reviewers
([reference](https://github.com/oppia/oppia-android/wiki/Guidance-on-submitting-a-PR#clarification-regarding-assignees-and-reviewers-section)).

## For UI-specific PRs only

### Different Fragments

<img
src="https://user-images.githubusercontent.com/76530270/212483147-26513374-640b-4a36-8916-e7e0459e7fe0.png"
height="400" style="max-width: 100%"> <img
src="https://user-images.githubusercontent.com/76530270/212483095-a672b3dc-2e8d-4c8a-81e0-8471be267915.png"
height="400" style="max-width: 100%">

<img
src="https://user-images.githubusercontent.com/76530270/212528242-da4a78d6-0f6c-47fd-a7fd-01c3317e7c6d.png"
height="400" style="max-width: 100%"> <img
src="https://user-images.githubusercontent.com/76530270/212528245-401ce76a-0b37-4210-9ee5-22098bad4955.png"
height="400" style="max-width: 100%">

<img
src="https://user-images.githubusercontent.com/76530270/212528285-6ea7a54f-a705-487e-81d4-d1010cdc526f.png"
height="400" style="max-width: 100%"> <img
src="https://user-images.githubusercontent.com/76530270/212528284-9a5cf5de-86ef-4a50-9396-8dc6e7fdef32.png"
height="400" style="max-width: 100%">

<img
src="https://user-images.githubusercontent.com/76530270/212528333-d7d30188-3fe0-45ac-aee7-ce65034018a6.png"
height="400" style="max-width: 100%"> <img
src="https://user-images.githubusercontent.com/76530270/212528332-914ac535-cc67-4ff5-adc7-aba987aecf43.png"
height="400" style="max-width: 100%">




<!-- Delete these section if this PR does not include UI-related
changes. -->
If your PR includes UI-related changes, then:
- Add screenshots for portrait/landscape for both a tablet & phone of
the before & after UI changes
- For the screenshots above, include both English and pseudo-localized
(RTL) screenshots (see [RTL
guide](https://github.com/oppia/oppia-android/wiki/RTL-Guidelines))
- Add a video showing the full UX flow with a screen reader enabled (see
[accessibility
guide](https://github.com/oppia/oppia-android/wiki/Accessibility-(A11y)-Guide))
- Add a screenshot demonstrating that you ran affected Espresso tests
locally & that they're passing
@MohitGupta121
Copy link
Member

Now we can close this issue as according to me and @rt4914 everything is again revist and fixed for Question and Exploration Player.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Impact: Low Low perceived user impact (e.g. edge cases). Issue: Needs Clarification Indicates that an issue needs more detail in order to be able to be acted upon. Z-ibt Temporary label for Ben to keep track of issues he's triaged.
6 participants