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

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>

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>

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>

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>

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>

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>

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>

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>

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>