From 7def64a0c997aa7e9418bb22c9ed5ba04e617f3a Mon Sep 17 00:00:00 2001
From: MOHIT GUPTA <76530270+MohitGupta121@users.noreply.github.com>
Date: Mon, 6 Feb 2023 23:04:21 +0530
Subject: [PATCH] Dark mode implementation - Non Visible Layouts (Topic and
 Practice Fragments) (#4870)

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


Dark mode implementation - Non Visible Layouts (Topic and Practice
Fragments)


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

### Info Fragment

<img
src="https://user-images.githubusercontent.com/76530270/216989746-47b0dc3c-7073-49e1-898a-c698c176b13c.png"
height="400" style="max-width: 100%"> <img
src="https://user-images.githubusercontent.com/76530270/216989760-b4df59ba-3d3f-4a49-8592-fa916cf1d70c.png"
height="400" style="max-width: 100%">


### Practice Fragment

<img
src="https://user-images.githubusercontent.com/76530270/216990071-20b23217-4f6d-459a-b73b-81e3d9f7f203.png"
height="400" style="max-width: 100%"> <img
src="https://user-images.githubusercontent.com/76530270/216990075-0b9b7b45-5879-46a9-8cf1-a7e6c62bb19a.png"
height="400" style="max-width: 100%">

<img
src="https://user-images.githubusercontent.com/76530270/216990380-f7e51039-f6e7-4c8b-b8c1-3198f1bba5dc.png"
height="400" style="max-width: 100%"> <img
src="https://user-images.githubusercontent.com/76530270/216990382-1a5512db-7c3d-448b-bb9d-e64480dea914.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/layout-land/topic_info_fragment.xml     | 17 +++++++++--------
 .../resume_lesson_fragment.xml                  |  2 +-
 .../layout-sw600dp-land/topic_info_fragment.xml | 17 +++++++++--------
 .../layout-sw600dp-port/topic_info_fragment.xml | 17 +++++++++--------
 .../layout-sw600dp/topic_practice_fragment.xml  |  2 +-
 app/src/main/res/layout/topic_info_fragment.xml | 14 +++++++-------
 .../res/layout/topic_practice_footer_view.xml   |  2 +-
 .../main/res/layout/topic_practice_fragment.xml |  2 +-
 .../main/res/layout/topic_practice_subtopic.xml |  2 +-
 app/src/main/res/values-night/color_palette.xml |  2 +-
 app/src/main/res/values/color_palette.xml       |  2 +-
 app/src/main/res/values/component_colors.xml    | 14 +++-----------
 12 files changed, 44 insertions(+), 49 deletions(-)

diff --git a/app/src/main/res/layout-land/topic_info_fragment.xml b/app/src/main/res/layout-land/topic_info_fragment.xml
index cf5c1595bc1..18502150884 100644
--- a/app/src/main/res/layout-land/topic_info_fragment.xml
+++ b/app/src/main/res/layout-land/topic_info_fragment.xml
@@ -14,7 +14,7 @@
   <ScrollView
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    android:background="@color/color_def_white"
+    android:background="@color/component_color_shared_screen_primary_background_color"
     android:overScrollMode="never"
     android:scrollbars="none">
 
@@ -34,7 +34,7 @@
         android:layout_marginEnd="72dp"
         android:fontFamily="sans-serif"
         android:text="@{viewModel.topicTitle}"
-        android:textColor="@color/oppia_primary_text"
+        android:textColor="@color/component_color_shared_primary_text_color"
         android:textSize="24sp"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintHorizontal_bias="0.0"
@@ -51,7 +51,7 @@
         android:layout_marginEnd="72dp"
         android:fontFamily="sans-serif"
         android:text="@{viewModel.storyCountText}"
-        android:textColor="@color/oppia_primary_text"
+        android:textColor="@color/component_color_shared_primary_text_color"
         android:textSize="16sp"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintHorizontal_bias="0.0"
@@ -84,7 +84,7 @@
         android:onClick="@{(v) -> viewModel.clickSeeMore()}"
         android:paddingTop="8dp"
         android:text="@{viewModel.isDescriptionExpanded() ? @string/see_less : @string/see_more}"
-        android:textColor="@color/oppia_primary"
+        android:textColor="@color/component_color_shared_active_text_color"
         android:textSize="16sp"
         android:textStyle="bold"
         android:visibility="@{viewModel.isSeeMoreVisible() ? View.VISIBLE : View.GONE}"
@@ -101,10 +101,11 @@
         android:layout_marginTop="24dp"
         android:layout_marginEnd="72dp"
         android:layout_marginBottom="32dp"
-        app:srcCompat="@{viewModel.downloadStatusIndicatorDrawableResourceId, default=@drawable/ic_available_offline_primary_24dp}"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toBottomOf="@+id/see_more_text_view" />
+        app:layout_constraintTop_toBottomOf="@+id/see_more_text_view"
+        app:srcCompat="@{viewModel.downloadStatusIndicatorDrawableResourceId, default=@drawable/ic_available_offline_primary_24dp}"
+        app:tint="@color/component_color_topic_info_fragment_download_status_image_color" />
 
       <TextView
         android:id="@+id/download_story_count_text_view"
@@ -114,7 +115,7 @@
         android:layout_marginStart="12dp"
         android:fontFamily="sans-serif"
         android:text="@string/topic_downloaded"
-        android:textColor="@color/oppia_primary_text"
+        android:textColor="@color/component_color_shared_download_story_text_color"
         android:textSize="18sp"
         app:layout_constraintBottom_toBottomOf="@+id/download_status_image_view"
         app:layout_constraintHorizontal_bias="0.0"
@@ -130,7 +131,7 @@
         android:layout_marginEnd="72dp"
         android:fontFamily="sans-serif"
         android:text="@{viewModel.topicSizeText}"
-        android:textColor="@color/oppia_primary_text"
+        android:textColor="@color/component_color_shared_download_story_text_color"
         android:textSize="18sp"
         android:textStyle="italic"
         app:layout_constraintBottom_toBottomOf="@+id/download_status_image_view"
diff --git a/app/src/main/res/layout-sw600dp-land/resume_lesson_fragment.xml b/app/src/main/res/layout-sw600dp-land/resume_lesson_fragment.xml
index 7de2d16c4ef..1c7c98925cd 100644
--- a/app/src/main/res/layout-sw600dp-land/resume_lesson_fragment.xml
+++ b/app/src/main/res/layout-sw600dp-land/resume_lesson_fragment.xml
@@ -21,7 +21,7 @@
       android:layout_width="0dp"
       android:layout_height="match_parent"
       android:layout_weight="1"
-      android:background="@color/component_color_resume_lesson_topic_thumbnail_background_color"
+      android:background="@color/component_color_shared_topic_thumbnail_background_color"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintStart_toStartOf="@+id/guideline6"
diff --git a/app/src/main/res/layout-sw600dp-land/topic_info_fragment.xml b/app/src/main/res/layout-sw600dp-land/topic_info_fragment.xml
index 4f83d81f8ce..83c153ae9a0 100644
--- a/app/src/main/res/layout-sw600dp-land/topic_info_fragment.xml
+++ b/app/src/main/res/layout-sw600dp-land/topic_info_fragment.xml
@@ -31,8 +31,8 @@
           android:layout_marginStart="64dp"
           android:layout_marginEnd="64dp"
           android:fontFamily="sans-serif"
-          android:textColor="@color/oppia_primary_text"
           android:text="@{viewModel.topicTitle}"
+          android:textColor="@color/component_color_shared_primary_text_color"
           android:textSize="24sp"
           app:layout_constraintEnd_toEndOf="parent"
           app:layout_constraintHorizontal_bias="0.0"
@@ -48,7 +48,7 @@
           android:layout_marginEnd="64dp"
           android:fontFamily="sans-serif"
           android:text="@{viewModel.storyCountText}"
-          android:textColor="@color/oppia_primary_text"
+          android:textColor="@color/component_color_shared_primary_text_color"
           android:textSize="16sp"
           app:layout_constraintEnd_toEndOf="parent"
           app:layout_constraintHorizontal_bias="0.0"
@@ -80,7 +80,7 @@
           android:onClick="@{(v) -> viewModel.clickSeeMore()}"
           android:paddingTop="8dp"
           android:text="@{viewModel.isDescriptionExpanded() ? @string/see_less : @string/see_more}"
-          android:textColor="@color/oppia_primary"
+          android:textColor="@color/component_color_shared_active_text_color"
           android:textSize="16sp"
           android:textStyle="bold"
           android:visibility="@{viewModel.isSeeMoreVisible() ? View.VISIBLE : View.GONE}"
@@ -95,10 +95,11 @@
           android:layout_height="20dp"
           android:layout_marginStart="64dp"
           android:layout_marginTop="32dp"
-          app:srcCompat="@{viewModel.downloadStatusIndicatorDrawableResourceId, default=@drawable/ic_available_offline_primary_24dp}"
           app:layout_constraintBottom_toBottomOf="parent"
           app:layout_constraintStart_toStartOf="parent"
-          app:layout_constraintTop_toBottomOf="@+id/see_more_text_view" />
+          app:layout_constraintTop_toBottomOf="@+id/see_more_text_view"
+          app:srcCompat="@{viewModel.downloadStatusIndicatorDrawableResourceId, default=@drawable/ic_available_offline_primary_24dp}"
+          app:tint="@color/component_color_topic_info_fragment_download_status_image_color" />
 
         <TextView
           android:id="@+id/download_story_count_text_view"
@@ -108,7 +109,7 @@
           android:layout_marginStart="12dp"
           android:fontFamily="sans-serif"
           android:text="@string/topic_downloaded"
-          android:textColor="@color/oppia_primary_text"
+          android:textColor="@color/component_color_shared_download_story_text_color"
           android:textSize="18sp"
           app:layout_constraintBottom_toBottomOf="@+id/download_status_image_view"
           app:layout_constraintHorizontal_bias="0.0"
@@ -123,7 +124,7 @@
           android:layout_marginEnd="32dp"
           android:fontFamily="sans-serif"
           android:text="@{viewModel.topicSizeText}"
-          android:textColor="@color/oppia_primary_text"
+          android:textColor="@color/component_color_shared_download_story_text_color"
           android:textSize="18sp"
           android:textStyle="italic"
           app:layout_constraintBottom_toBottomOf="@+id/download_status_image_view"
@@ -137,7 +138,7 @@
       android:layout_width="0dp"
       android:layout_height="match_parent"
       android:layout_weight="1"
-      android:background="@color/topic_thumbnail_background"
+      android:background="@color/component_color_shared_topic_thumbnail_background_color"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintStart_toStartOf="@+id/guideline6"
diff --git a/app/src/main/res/layout-sw600dp-port/topic_info_fragment.xml b/app/src/main/res/layout-sw600dp-port/topic_info_fragment.xml
index 15c2ff0401e..e1c7aff2967 100644
--- a/app/src/main/res/layout-sw600dp-port/topic_info_fragment.xml
+++ b/app/src/main/res/layout-sw600dp-port/topic_info_fragment.xml
@@ -12,7 +12,7 @@
   <ScrollView
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    android:background="@color/color_def_white"
+    android:background="@color/component_color_shared_screen_primary_background_color"
     android:overScrollMode="never"
     android:scrollbars="none">
 
@@ -52,7 +52,7 @@
         android:layout_marginEnd="120dp"
         android:fontFamily="sans-serif"
         android:text="@{viewModel.topicTitle}"
-        android:textColor="@color/oppia_primary_text"
+        android:textColor="@color/component_color_shared_primary_text_color"
         android:textSize="24sp"
         app:layout_constraintBottom_toBottomOf="@+id/topic_thumbnail_image_view"
         app:layout_constraintEnd_toEndOf="parent"
@@ -69,7 +69,7 @@
         android:layout_marginEnd="120dp"
         android:fontFamily="sans-serif"
         android:text="@{viewModel.storyCountText}"
-        android:textColor="@color/oppia_primary_text"
+        android:textColor="@color/component_color_shared_primary_text_color"
         android:textSize="16sp"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintHorizontal_bias="0.0"
@@ -101,7 +101,7 @@
         android:onClick="@{(v) -> viewModel.clickSeeMore()}"
         android:paddingTop="8dp"
         android:text="@{viewModel.isDescriptionExpanded() ? @string/see_less : @string/see_more}"
-        android:textColor="@color/oppia_primary"
+        android:textColor="@color/component_color_shared_active_text_color"
         android:textSize="16sp"
         android:textStyle="bold"
         android:visibility="@{viewModel.isSeeMoreVisible() ? View.VISIBLE : View.GONE}"
@@ -116,9 +116,10 @@
         android:layout_height="20dp"
         android:layout_marginStart="120dp"
         android:layout_marginTop="24dp"
-        app:srcCompat="@{viewModel.downloadStatusIndicatorDrawableResourceId, default=@drawable/ic_available_offline_primary_24dp}"
         app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toBottomOf="@+id/see_more_text_view" />
+        app:layout_constraintTop_toBottomOf="@+id/see_more_text_view"
+        app:srcCompat="@{viewModel.downloadStatusIndicatorDrawableResourceId, default=@drawable/ic_available_offline_primary_24dp}"
+        app:tint="@color/component_color_topic_info_fragment_download_status_image_color" />
 
       <TextView
         android:id="@+id/download_story_count_text_view"
@@ -128,7 +129,7 @@
         android:layout_marginStart="12dp"
         android:fontFamily="sans-serif"
         android:text="@string/topic_downloaded"
-        android:textColor="@color/oppia_primary_text"
+        android:textColor="@color/component_color_shared_download_story_text_color"
         android:textSize="18sp"
         app:layout_constraintBottom_toBottomOf="@+id/download_status_image_view"
         app:layout_constraintHorizontal_bias="0.0"
@@ -144,7 +145,7 @@
         android:layout_marginEnd="32dp"
         android:fontFamily="sans-serif"
         android:text="@{viewModel.topicSizeText}"
-        android:textColor="@color/oppia_primary_text"
+        android:textColor="@color/component_color_shared_download_story_text_color"
         android:textSize="18sp"
         android:textStyle="italic"
         app:layout_constraintBottom_toBottomOf="@+id/download_status_image_view"
diff --git a/app/src/main/res/layout-sw600dp/topic_practice_fragment.xml b/app/src/main/res/layout-sw600dp/topic_practice_fragment.xml
index eee886e30ce..6043be9a249 100644
--- a/app/src/main/res/layout-sw600dp/topic_practice_fragment.xml
+++ b/app/src/main/res/layout-sw600dp/topic_practice_fragment.xml
@@ -13,7 +13,7 @@
     android:id="@+id/topic_practice_skill_list"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    android:background="@color/oppia_background"
+    android:background="@color/component_color_shared_screen_quaternary_background_color"
     android:clipToPadding="false"
     android:overScrollMode="never"
     android:paddingBottom="112dp"
diff --git a/app/src/main/res/layout/topic_info_fragment.xml b/app/src/main/res/layout/topic_info_fragment.xml
index d1af560557c..a25f86330d4 100644
--- a/app/src/main/res/layout/topic_info_fragment.xml
+++ b/app/src/main/res/layout/topic_info_fragment.xml
@@ -14,7 +14,7 @@
   <ScrollView
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    android:background="@color/component_color_topic_info_fragment_background_color"
+    android:background="@color/component_color_shared_screen_primary_background_color"
     android:overScrollMode="never"
     android:scrollbars="none">
 
@@ -56,7 +56,7 @@
         android:layout_marginBottom="8dp"
         android:fontFamily="sans-serif"
         android:text="@{viewModel.topicTitle}"
-        android:textColor="@color/component_color_topic_info_fragment_topic_name_text_color"
+        android:textColor="@color/component_color_shared_primary_text_color"
         android:textSize="24sp"
         app:layout_constraintBottom_toBottomOf="@+id/topic_thumbnail_image_view"
         app:layout_constraintEnd_toEndOf="parent"
@@ -73,7 +73,7 @@
         android:layout_marginEnd="32dp"
         android:fontFamily="sans-serif"
         android:text="@{viewModel.storyCountText}"
-        android:textColor="@color/component_color_topic_info_fragment_story_count_text_color"
+        android:textColor="@color/component_color_shared_primary_text_color"
         android:textSize="16sp"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintHorizontal_bias="0.0"
@@ -106,7 +106,7 @@
         android:onClick="@{(v) -> viewModel.clickSeeMore()}"
         android:paddingTop="8dp"
         android:text="@{viewModel.isDescriptionExpanded() ? @string/see_less : @string/see_more}"
-        android:textColor="@color/component_color_topic_info_fragment_see_more_text_color"
+        android:textColor="@color/component_color_shared_active_text_color"
         android:textSize="16sp"
         android:textStyle="bold"
         android:visibility="@{viewModel.isSeeMoreVisible() ? View.VISIBLE : View.GONE}"
@@ -122,10 +122,10 @@
         android:layout_marginStart="32dp"
         android:layout_marginTop="24dp"
         android:layout_marginBottom="32dp"
-        app:srcCompat="@{viewModel.downloadStatusIndicatorDrawableResourceId, default=@drawable/ic_available_offline_primary_24dp}"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toBottomOf="@+id/see_more_text_view"
+        app:srcCompat="@{viewModel.downloadStatusIndicatorDrawableResourceId, default=@drawable/ic_available_offline_primary_24dp}"
         app:tint="@color/component_color_topic_info_fragment_download_status_image_color" />
 
       <TextView
@@ -136,7 +136,7 @@
         android:layout_marginStart="12dp"
         android:fontFamily="sans-serif"
         android:text="@string/topic_downloaded"
-        android:textColor="@color/component_color_topic_info_fragment_download_story_count_text_color"
+        android:textColor="@color/component_color_shared_download_story_text_color"
         android:textSize="18sp"
         app:layout_constraintBottom_toBottomOf="@+id/download_status_image_view"
         app:layout_constraintHorizontal_bias="0.0"
@@ -152,7 +152,7 @@
         android:layout_marginEnd="32dp"
         android:fontFamily="sans-serif"
         android:text="@{viewModel.topicSizeText}"
-        android:textColor="@color/component_color_topic_info_fragment_download_story_size_text_color"
+        android:textColor="@color/component_color_shared_download_story_text_color"
         android:textSize="18sp"
         android:textStyle="italic"
         app:layout_constraintBottom_toBottomOf="@+id/download_status_image_view"
diff --git a/app/src/main/res/layout/topic_practice_footer_view.xml b/app/src/main/res/layout/topic_practice_footer_view.xml
index 491f0ee0441..e2f704048f3 100644
--- a/app/src/main/res/layout/topic_practice_footer_view.xml
+++ b/app/src/main/res/layout/topic_practice_footer_view.xml
@@ -31,7 +31,7 @@
       android:fontFamily="sans-serif-medium"
       android:minHeight="@dimen/clickable_item_min_height"
       android:text="@string/topic_practice_start"
-      android:textColor="@{isSubmitButtonActive ? @color/color_def_white : @color/submit_button_text_inactive}"
+      android:textColor="@{isSubmitButtonActive ? @color/component_color_shared_submit_text_active_color : @color/component_color_shared_submit_text_inactive_color}"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintStart_toStartOf="parent"
diff --git a/app/src/main/res/layout/topic_practice_fragment.xml b/app/src/main/res/layout/topic_practice_fragment.xml
index affe63f9392..06938e4fd77 100755
--- a/app/src/main/res/layout/topic_practice_fragment.xml
+++ b/app/src/main/res/layout/topic_practice_fragment.xml
@@ -13,7 +13,7 @@
     android:id="@+id/topic_practice_skill_list"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    android:background="@color/component_color_topic_practice_fragment_background_color"
+    android:background="@color/component_color_shared_screen_quaternary_background_color"
     android:clipToPadding="false"
     android:overScrollMode="never"
     android:paddingStart="@dimen/topic_practice_fragment_padding_start"
diff --git a/app/src/main/res/layout/topic_practice_subtopic.xml b/app/src/main/res/layout/topic_practice_subtopic.xml
index 58c36c159de..d7b5d927aa9 100755
--- a/app/src/main/res/layout/topic_practice_subtopic.xml
+++ b/app/src/main/res/layout/topic_practice_subtopic.xml
@@ -51,7 +51,7 @@
           android:minHeight="@dimen/clickable_item_min_height"
           android:text="@{viewModel.subtopicTitle}"
           android:textAlignment="viewStart"
-          android:textColor="@color/component_color_shared_secondary_4_text_color"
+          android:textColor="@color/component_color_shared_primary_text_color"
           android:textSize="16sp"
           app:drawableStartCompat="@android:color/transparent"
           app:layout_constraintBottom_toBottomOf="parent"
diff --git a/app/src/main/res/values-night/color_palette.xml b/app/src/main/res/values-night/color_palette.xml
index c630a85bb8e..a764fa08113 100644
--- a/app/src/main/res/values-night/color_palette.xml
+++ b/app/src/main/res/values-night/color_palette.xml
@@ -54,7 +54,7 @@
   <color name="color_palette_item_selection_selected_text_color">@color/color_def_white</color>
   <color name="color_palette_item_selection_unselected_text_color">@color/color_def_oppia_turquoise</color>
   <color name="color_palette_forgot_pin_color">@color/color_def_oppia_turquoise</color>
-  <color name="color_palette_show_text_color">@color/color_def_oppia_turquoise</color>
+  <color name="color_palette_shared_download_story_text_color">@color/color_def_oppia_turquoise</color>
   <color name="color_palette_error_text_color">@color/color_def_oppia_pink</color>
   <color name="color_palette_show_hide_color">@color/color_def_oppia_turquoise</color>
   <color name="color_palette_info_icon_color">@color/color_def_oppia_silver</color>
diff --git a/app/src/main/res/values/color_palette.xml b/app/src/main/res/values/color_palette.xml
index f07c4439850..31e1cbc5d38 100644
--- a/app/src/main/res/values/color_palette.xml
+++ b/app/src/main/res/values/color_palette.xml
@@ -57,7 +57,7 @@
   <color name="color_palette_multiple_choice_selected_color">@color/color_def_oppia_dark_blue</color>
   <color name="color_palette_multiple_choice_selected_text_color">@color/color_def_oppia_dark_blue</color>
   <color name="color_palette_forgot_pin_color">@color/color_def_oppia_green</color>
-  <color name="color_palette_show_text_color">@color/color_def_accessible_grey</color>
+  <color name="color_palette_shared_download_story_text_color">@color/color_def_accessible_grey</color>
   <color name="color_palette_error_text_color">@color/color_def_error_text</color>
   <color name="color_palette_show_hide_color">@color/color_def_oppia_green</color>
   <color name="color_palette_info_icon_color">@color/color_def_chooser_grey</color>
diff --git a/app/src/main/res/values/component_colors.xml b/app/src/main/res/values/component_colors.xml
index 7add898a2bf..ca5ab5a48a6 100644
--- a/app/src/main/res/values/component_colors.xml
+++ b/app/src/main/res/values/component_colors.xml
@@ -81,6 +81,8 @@
   <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>
+  <color name="component_color_shared_download_story_text_color">@color/color_palette_shared_download_story_text_color</color>
+  <color name="component_color_shared_topic_thumbnail_background_color">@color/color_palette_topic_thumbnail_background_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>
@@ -137,8 +139,6 @@
   <color name="component_color_story_chapter_not_start_progress_solid_color">@color/color_palette_shared_white_background_color</color>
   <color name="component_color_story_chapter_default_progress_stroke_color">@color/color_palette_story_chapter_default_progress_stroke_color</color>
   <color name="component_color_story_activity_story_chapter_card_not_start_stroke_color">@color/color_palette_story_chapter_not_start_stroke_color</color>
-  <!-- Resume Lesson Activity -->
-  <color name="component_color_resume_lesson_topic_thumbnail_background_color">@color/color_palette_topic_thumbnail_background_color</color>
   <!-- Exploration Activity -->
   <color name="component_color_exploration_activity_content_background_stroke_color">@color/color_palette_content_background_stroke_color</color>
   <color name="component_color_exploration_activity_content_background_solid_color">@color/color_palette_content_background_solid_color</color>
@@ -175,20 +175,14 @@
   <!-- Home Activity -->
   <color name="component_color_home_activity_view_all_text_color">@color/color_palette_view_all_text_color</color>
   <color name="component_color_home_activity_layout_greeting_text_line_color">@color/color_palette_layout_below_greeting_text_color</color>
-  <!--  CONFETTI COLORS -->
+  <!-- CONFETTI COLORS -->
   <color name="component_color_confetti_red_color">@color/color_palette_confetti_red_color</color>
   <color name="component_color_confetti_yellow_color">@color/color_palette_confetti_yellow_color</color>
   <color name="component_color_confetti_blue_color">@color/color_palette_confetti_blue_color</color>
   <!-- Topic Info Fragment -->
-  <color name="component_color_topic_info_fragment_background_color">@color/color_palette_primary_background_color</color>
-  <color name="component_color_topic_info_fragment_topic_name_text_color">@color/color_palette_highlighted_text_color</color>
-  <color name="component_color_topic_info_fragment_story_count_text_color">@color/color_palette_highlighted_text_color</color>
   <color name="component_color_topic_info_fragment_thumbnail_gradient_end_color">@color/color_palette_thumbnail_gradient_end_color</color>
   <color name="component_color_topic_info_fragment_thumbnail_gradient_start_color">@color/color_palette_thumbnail_gradient_start_color</color>
-  <color name="component_color_topic_info_fragment_see_more_text_color">@color/color_palette_primary_color</color>
   <color name="component_color_topic_info_fragment_download_status_image_color">@color/color_palette_primary_color</color>
-  <color name="component_color_topic_info_fragment_download_story_count_text_color">@color/color_palette_show_text_color</color>
-  <color name="component_color_topic_info_fragment_download_story_size_text_color">@color/color_palette_show_text_color</color>
   <!-- Drawer Fragment -->
   <color name="component_color_drawer_fragment_selected_text_color">@color/color_palette_menu_selected_text_color</color>
   <color name="component_color_drawer_fragment_developer_options_selected_text_color">@color/color_palette_developer_option_menu_selected_color</color>
@@ -206,9 +200,7 @@
   <color name="component_color_profile_progress_activity_view_all_text_color">@color/color_palette_view_all_text_color</color>
   <color name="component_color_profile_progress_activity_story_count_card_stroke_color">@color/color_palette_profile_progress_activity_story_count_card_stroke_color</color>
   <!-- Topic Practice Fragment -->
-  <color name="component_color_topic_practice_fragment_background_color">@color/color_palette_topic_fragments_background_color</color>
   <color name="component_color_topic_practice_header_view_description_text_color">@color/color_palette_topic_practice_header_description_color</color>
-  <color name="component_color_topic_practice_subtopic_checkbox_text_color">@color/color_palette_primary_container_background_color</color>
   <!-- Profile Edit Activity -->
   <color name="component_color_profile_edit_activity_delete_button_text_color">@color/color_palette_error_color</color>
   <color name="component_color_profile_edit_activity_profile_rename_button_background_color">@color/color_palette_item_background_solid_color</color>