From 49a6c32bc265cc49b00a9cc93b0d1aafe046a28c Mon Sep 17 00:00:00 2001
From: MOHIT GUPTA <76530270+MohitGupta121@users.noreply.github.com>
Date: Mon, 30 Jan 2023 21:13:11 +0530
Subject: [PATCH] Fixed #4861 : Dark Mode for SpotLight Overlays (#4863)

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

Fixed #4861 : Dark Mode for SpotLight Overlays


<!--
- 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

### Spotlight Overlays

<img
src="https://user-images.githubusercontent.com/76530270/215339838-8b82b4b7-2ad9-4293-b21c-6e8de6aee26c.png"
height="400" style="max-width: 100%"> <img
src="https://user-images.githubusercontent.com/76530270/215339835-c82dc0eb-327e-4686-a4dc-e9a75f66ffe7.png"
height="400" style="max-width: 100%">

<img
src="https://user-images.githubusercontent.com/76530270/215339845-db92a97a-1af4-40a3-978d-413d2d811408.png"
height="400" style="max-width: 100%"> <img
src="https://user-images.githubusercontent.com/76530270/215339841-996c619b-dec7-4858-92a6-ae4e325a8791.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
---
 .../res/drawable/spotlight_done_button_background.xml    | 2 +-
 .../main/res/drawable/spotlight_hint_text_background.xml | 2 +-
 app/src/main/res/layout/bottom_left_overlay.xml          | 9 ++++++---
 app/src/main/res/layout/bottom_right_overlay.xml         | 9 ++++++---
 app/src/main/res/layout/top_left_overlay.xml             | 9 ++++++---
 app/src/main/res/layout/top_right_overlay.xml            | 9 ++++++---
 app/src/main/res/values-night/color_palette.xml          | 4 ++++
 app/src/main/res/values/color_palette.xml                | 4 ++++
 app/src/main/res/values/component_colors.xml             | 4 ++++
 9 files changed, 38 insertions(+), 14 deletions(-)

diff --git a/app/src/main/res/drawable/spotlight_done_button_background.xml b/app/src/main/res/drawable/spotlight_done_button_background.xml
index 8cb2452157e..96b6ff9e767 100644
--- a/app/src/main/res/drawable/spotlight_done_button_background.xml
+++ b/app/src/main/res/drawable/spotlight_done_button_background.xml
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
   android:shape="oval">
-  <solid android:color="@color/spotlight_hint_background" />
+  <solid android:color="@color/component_color_shared_spotlight_hint_background_color" />
 </shape>
diff --git a/app/src/main/res/drawable/spotlight_hint_text_background.xml b/app/src/main/res/drawable/spotlight_hint_text_background.xml
index cfa84f27751..df855c8f311 100644
--- a/app/src/main/res/drawable/spotlight_hint_text_background.xml
+++ b/app/src/main/res/drawable/spotlight_hint_text_background.xml
@@ -6,5 +6,5 @@
     android:bottomRightRadius="5dp"
     android:topLeftRadius="5dp"
     android:topRightRadius="5dp" />
-  <solid android:color="@color/spotlight_hint_background" />
+  <solid android:color="@color/component_color_shared_spotlight_hint_background_color" />
 </shape>
diff --git a/app/src/main/res/layout/bottom_left_overlay.xml b/app/src/main/res/layout/bottom_left_overlay.xml
index 820a9fb32af..fd54dfb04a8 100644
--- a/app/src/main/res/layout/bottom_left_overlay.xml
+++ b/app/src/main/res/layout/bottom_left_overlay.xml
@@ -24,7 +24,8 @@
       android:rotationX="180"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toTopOf="parent"
-      app:srcCompat="@drawable/ic_rounded_arrow_up_right" />
+      app:srcCompat="@drawable/ic_rounded_arrow_up_right"
+      app:tint="@color/component_color_shared_spotlight_overlay_arrow_color" />
 
     <com.google.android.material.card.MaterialCardView
       android:layout_width="0dp"
@@ -38,7 +39,7 @@
       <androidx.constraintlayout.widget.ConstraintLayout
         android:layout_width="match_parent"
         android:layout_height="match_parent"
-        android:background="@color/spotlight_hint_background">
+        android:background="@color/component_color_shared_spotlight_hint_background_color">
 
         <TextView
           android:id="@+id/spotlight_hint_text"
@@ -51,6 +52,7 @@
           android:paddingTop="8dp"
           android:paddingEnd="4dp"
           android:paddingBottom="8dp"
+          android:textColor="@color/component_color_shared_secondary_5_text_color"
           android:textSize="20sp"
           app:layout_constraintBottom_toBottomOf="parent"
           app:layout_constraintEnd_toStartOf="@id/close_spotlight_button"
@@ -67,7 +69,8 @@
           android:onClick="@{(v) -> listener.clickOnDone()}"
           app:layout_constraintEnd_toEndOf="parent"
           app:layout_constraintTop_toTopOf="parent"
-          app:srcCompat="@drawable/ic_close_black_24" />
+          app:srcCompat="@drawable/ic_close_black_24"
+          app:tint="@color/component_color_shared_close_spotlight_button_color" />
       </androidx.constraintlayout.widget.ConstraintLayout>
     </com.google.android.material.card.MaterialCardView>
   </androidx.constraintlayout.widget.ConstraintLayout>
diff --git a/app/src/main/res/layout/bottom_right_overlay.xml b/app/src/main/res/layout/bottom_right_overlay.xml
index 836e1850e76..d93caa2ad2c 100644
--- a/app/src/main/res/layout/bottom_right_overlay.xml
+++ b/app/src/main/res/layout/bottom_right_overlay.xml
@@ -25,7 +25,8 @@
       android:rotationY="180"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toTopOf="parent"
-      app:srcCompat="@drawable/ic_rounded_arrow_up_right" />
+      app:srcCompat="@drawable/ic_rounded_arrow_up_right"
+      app:tint="@color/component_color_shared_spotlight_overlay_arrow_color" />
 
     <com.google.android.material.card.MaterialCardView
       android:layout_width="0dp"
@@ -39,7 +40,7 @@
       <androidx.constraintlayout.widget.ConstraintLayout
         android:layout_width="match_parent"
         android:layout_height="match_parent"
-        android:background="@color/spotlight_hint_background">
+        android:background="@color/component_color_shared_spotlight_hint_background_color">
 
         <TextView
           android:id="@+id/spotlight_hint_text"
@@ -52,6 +53,7 @@
           android:paddingTop="8dp"
           android:paddingEnd="4dp"
           android:paddingBottom="8dp"
+          android:textColor="@color/component_color_shared_secondary_5_text_color"
           android:textSize="20sp"
           app:layout_constraintBottom_toBottomOf="parent"
           app:layout_constraintEnd_toStartOf="@id/close_spotlight_button"
@@ -68,7 +70,8 @@
           android:onClick="@{(v) -> listener.clickOnDone()}"
           app:layout_constraintEnd_toEndOf="parent"
           app:layout_constraintTop_toTopOf="parent"
-          app:srcCompat="@drawable/ic_close_black_24" />
+          app:srcCompat="@drawable/ic_close_black_24"
+          app:tint="@color/component_color_shared_close_spotlight_button_color" />
       </androidx.constraintlayout.widget.ConstraintLayout>
     </com.google.android.material.card.MaterialCardView>
   </androidx.constraintlayout.widget.ConstraintLayout>
diff --git a/app/src/main/res/layout/top_left_overlay.xml b/app/src/main/res/layout/top_left_overlay.xml
index 106668891e3..fba00994436 100644
--- a/app/src/main/res/layout/top_left_overlay.xml
+++ b/app/src/main/res/layout/top_left_overlay.xml
@@ -23,7 +23,8 @@
       android:layout_height="@dimen/spotlight_arrow_height"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toTopOf="parent"
-      app:srcCompat="@drawable/ic_rounded_arrow_up_right" />
+      app:srcCompat="@drawable/ic_rounded_arrow_up_right"
+      app:tint="@color/component_color_shared_spotlight_overlay_arrow_color" />
 
     <com.google.android.material.card.MaterialCardView
       android:layout_width="0dp"
@@ -37,7 +38,7 @@
       <androidx.constraintlayout.widget.ConstraintLayout
         android:layout_width="match_parent"
         android:layout_height="match_parent"
-        android:background="@color/spotlight_hint_background">
+        android:background="@color/component_color_shared_spotlight_hint_background_color">
 
         <TextView
           android:id="@+id/spotlight_hint_text"
@@ -50,6 +51,7 @@
           android:paddingTop="8dp"
           android:paddingEnd="4dp"
           android:paddingBottom="8dp"
+          android:textColor="@color/component_color_shared_secondary_5_text_color"
           android:textSize="20sp"
           app:layout_constraintBottom_toBottomOf="parent"
           app:layout_constraintEnd_toStartOf="@id/close_spotlight_button"
@@ -64,7 +66,8 @@
           android:onClick="@{(v) -> listener.clickOnDone()}"
           app:layout_constraintEnd_toEndOf="parent"
           app:layout_constraintTop_toTopOf="parent"
-          app:srcCompat="@drawable/ic_close_black_24" />
+          app:srcCompat="@drawable/ic_close_black_24"
+          app:tint="@color/component_color_shared_close_spotlight_button_color" />
       </androidx.constraintlayout.widget.ConstraintLayout>
     </com.google.android.material.card.MaterialCardView>
   </androidx.constraintlayout.widget.ConstraintLayout>
diff --git a/app/src/main/res/layout/top_right_overlay.xml b/app/src/main/res/layout/top_right_overlay.xml
index 9f0d00a535f..13d17e7c942 100644
--- a/app/src/main/res/layout/top_right_overlay.xml
+++ b/app/src/main/res/layout/top_right_overlay.xml
@@ -24,7 +24,8 @@
       android:rotationY="180"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toTopOf="parent"
-      app:srcCompat="@drawable/ic_rounded_arrow_up_right" />
+      app:srcCompat="@drawable/ic_rounded_arrow_up_right"
+      app:tint="@color/component_color_shared_spotlight_overlay_arrow_color" />
 
     <com.google.android.material.card.MaterialCardView
       android:layout_width="0dp"
@@ -38,7 +39,7 @@
       <androidx.constraintlayout.widget.ConstraintLayout
         android:layout_width="match_parent"
         android:layout_height="match_parent"
-        android:background="@color/spotlight_hint_background">
+        android:background="@color/component_color_shared_spotlight_hint_background_color">
 
         <TextView
           android:id="@+id/spotlight_hint_text"
@@ -51,6 +52,7 @@
           android:paddingTop="8dp"
           android:paddingEnd="4dp"
           android:paddingBottom="8dp"
+          android:textColor="@color/component_color_shared_secondary_5_text_color"
           android:textSize="20sp"
           app:layout_constraintBottom_toBottomOf="parent"
           app:layout_constraintEnd_toStartOf="@id/close_spotlight_button"
@@ -67,7 +69,8 @@
           android:onClick="@{(v) -> listener.clickOnDone()}"
           app:layout_constraintEnd_toEndOf="parent"
           app:layout_constraintTop_toTopOf="parent"
-          app:srcCompat="@drawable/ic_close_black_24" />
+          app:srcCompat="@drawable/ic_close_black_24"
+          app:tint="@color/component_color_shared_close_spotlight_button_color" />
       </androidx.constraintlayout.widget.ConstraintLayout>
     </com.google.android.material.card.MaterialCardView>
   </androidx.constraintlayout.widget.ConstraintLayout>
diff --git a/app/src/main/res/values-night/color_palette.xml b/app/src/main/res/values-night/color_palette.xml
index 230386dc464..6f472642c41 100644
--- a/app/src/main/res/values-night/color_palette.xml
+++ b/app/src/main/res/values-night/color_palette.xml
@@ -5,6 +5,7 @@
   <color name="color_palette_accent_color">@color/color_def_oppia_metallic_blue</color>
   <color name="color_palette_primary_text_color">@color/color_def_white</color>
   <color name="color_palette_white_text_color">@color/color_def_white</color>
+  <color name="color_palette_black_text_color">@color/color_def_black</color>
   <color name="color_palette_highlighted_text_color">@color/color_def_white</color>
   <color name="color_palette_background_color">@color/color_def_oppia_light_black</color>
   <color name="color_palette_dark_background_color">@color/color_def_oppia_light_black</color>
@@ -187,4 +188,7 @@
   <color name="color_palette_story_chapter_default_progress_stroke_color">@color/color_def_light_grey</color>
   <color name="color_palette_topic_thumbnail_background_color">@color/color_def_columbia_blue</color>
   <color name="color_palette_navbar_header_background_color">@color/color_def_japanese_indigo</color>
+  <color name="color_palette_shared_spotlight_hint_background_color">@color/color_def_oppia_light_yellow</color>
+  <color name="color_palette_shared_close_spotlight_button_color">@color/color_def_black</color>
+  <color name="color_palette_shared_spotlight_overlay_arrow_color">@color/color_def_white</color>
 </resources>
diff --git a/app/src/main/res/values/color_palette.xml b/app/src/main/res/values/color_palette.xml
index 4ad324d81bd..c1b937eb81c 100644
--- a/app/src/main/res/values/color_palette.xml
+++ b/app/src/main/res/values/color_palette.xml
@@ -5,6 +5,7 @@
   <color name="color_palette_accent_color">@color/color_def_oppia_dark_blue</color>
   <color name="color_palette_primary_text_color">@color/color_def_accessible_grey</color>
   <color name="color_palette_white_text_color">@color/color_def_white</color>
+  <color name="color_palette_black_text_color">@color/color_def_black</color>
   <color name="color_palette_highlighted_text_color">@color/color_def_accessible_grey</color>
   <color name="color_palette_skip_text_color">@color/color_def_accessible_grey</color>
   <color name="color_palette_background_color">@color/color_def_oppia_light_yellow</color>
@@ -190,4 +191,7 @@
   <color name="color_palette_story_chapter_default_progress_stroke_color">@color/color_def_light_grey</color>
   <color name="color_palette_topic_thumbnail_background_color">@color/color_def_columbia_blue</color>
   <color name="color_palette_navbar_header_background_color">@color/color_def_japanese_indigo</color>
+  <color name="color_palette_shared_spotlight_hint_background_color">@color/color_def_oppia_light_yellow</color>
+  <color name="color_palette_shared_close_spotlight_button_color">@color/color_def_black</color>
+  <color name="color_palette_shared_spotlight_overlay_arrow_color">@color/color_def_white</color>
 </resources>
diff --git a/app/src/main/res/values/component_colors.xml b/app/src/main/res/values/component_colors.xml
index 4806ae40106..f403636349e 100644
--- a/app/src/main/res/values/component_colors.xml
+++ b/app/src/main/res/values/component_colors.xml
@@ -84,6 +84,9 @@
   <color name="component_color_shared_icon_white_color">@color/color_palette_icon_white_color</color>
   <color name="component_color_shared_icon_color">@color/color_palette_icon_color</color>
   <color name="component_color_shared_resume_lesson_start_over_button_color">@color/color_palette_shared_resume_lesson_start_over_button_color</color>
+  <color name="component_color_shared_spotlight_hint_background_color">@color/color_palette_shared_spotlight_hint_background_color</color>
+  <color name="component_color_shared_close_spotlight_button_color">@color/color_palette_shared_close_spotlight_button_color</color>
+  <color name="component_color_shared_spotlight_overlay_arrow_color">@color/color_palette_shared_spotlight_overlay_arrow_color</color>
   <!-- Themes.xml -->
   <color name="component_color_shared_activity_status_bar_color">@color/color_palette_status_bar_color</color>
   <color name="component_color_shared_fragment_status_bar_color">@color/color_palette_fragment_status_bar_color</color>
@@ -100,6 +103,7 @@
   <color name="component_color_shared_link_text_color">@color/color_palette_link_text_color</color>
   <color name="component_color_shared_active_text_color">@color/color_palette_primary_color</color>
   <color name="component_color_shared_secondary_4_text_color">@color/color_palette_white_text_color</color>
+  <color name="component_color_shared_secondary_5_text_color">@color/color_palette_black_text_color</color>
   <color name="component_color_shared_text_input_layout_text_color">@color/color_palette_primary_text_color</color>
   <color name="component_color_shared_text_input_layout_stroke_color">@color/color_palette_primary_text_color</color>
   <color name="component_color_shared_text_input_edit_text_text_color">@color/color_palette_primary_text_color</color>