Fixes #4624, #4741, #4461 : Dark mode implementation - Topic Lessons,…

… Topic Revision, Revision Card, Story Activity, Resume Lesson (#4796)

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

Dark mode implementation - Topic Lessons, Topic Revision, Revision Card,
Story Activity, Resume Lesson

Fixes #4624 : Add dark mode support to Lesson Tab
Fixes #4741 : Contrast issue in Continue Studying text on revision
screen
Fixes #4461 : TextView & Toolbar color changes in Topic screen

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

### Topic Lessons

<img
src="https://user-images.githubusercontent.com/76530270/209782570-1b554b99-878d-4231-93ab-932a8392339f.png"
height="400" style="max-width: 100%"> <img
src="https://user-images.githubusercontent.com/76530270/209782638-1498b3bc-b34b-4f6e-b59c-5eb75585fdeb.png"
height="400" style="max-width: 100%">


<img
src="https://user-images.githubusercontent.com/76530270/209782928-aa3d63e0-77f6-454f-8a96-4ca0a79dcf2d.png"
height="400" style="max-width: 100%"> <img
src="https://user-images.githubusercontent.com/76530270/209783008-1e7431d5-4d38-4743-bae4-2efee687d962.png"
height="400" style="max-width: 100%">


<img
src="https://user-images.githubusercontent.com/76530270/209783226-440a9735-be10-4357-acd4-0a4fdffb2673.png"
height="400" style="max-width: 100%"> <img
src="https://user-images.githubusercontent.com/76530270/209783291-8f08c34a-7df4-4942-8a59-821946acb054.png"
height="400" style="max-width: 100%">



<img
src="https://user-images.githubusercontent.com/76530270/209783403-d18e5f83-9f25-4fd0-a789-05cffdccad72.png"
height="400" style="max-width: 100%"> <img
src="https://user-images.githubusercontent.com/76530270/209783480-47cea3e2-f25c-46b2-995b-39c624a5d4bd.png"
height="400" style="max-width: 100%">



### Topic Revision

<img
src="https://user-images.githubusercontent.com/76530270/208653330-185d700c-23d7-4387-8dad-0a37b410a99d.png"
height="400" style="max-width: 100%"> <img
src="https://user-images.githubusercontent.com/76530270/209088065-daf5ffd7-9c36-46a8-8d20-a8827204e2ca.png"
height="400" style="max-width: 100%">


### Revision Card

<img
src="https://user-images.githubusercontent.com/76530270/208653637-65a63055-59e0-4f6c-be4d-98e1a05cafb7.png"
height="400" style="max-width: 100%"> <img
src="https://user-images.githubusercontent.com/76530270/209088213-5a967191-a58f-4cfc-a6c4-611e67ff2dbe.png"
height="400" style="max-width: 100%">


### Story Activity

<img
src="https://user-images.githubusercontent.com/76530270/208654191-535ab103-4cb0-4e15-9aac-73c238da7e5a.png"
height="400" style="max-width: 100%"> <img
src="https://user-images.githubusercontent.com/76530270/208654157-245c22a6-ca76-4b6e-991c-045b0209a4f4.png"
height="400" style="max-width: 100%">


<img
src="https://user-images.githubusercontent.com/76530270/208654553-bbf2953f-e180-42fa-b6bd-2a0ec28911af.png"
height="200" style="max-width: 100%"> <img
src="https://user-images.githubusercontent.com/76530270/209088439-07b16179-ce9e-4cef-9f5f-4b2e2be9e691.png"
height="200" style="max-width: 100%">

<img
src="https://user-images.githubusercontent.com/76530270/209537829-dbd65e33-e1f2-40ff-8f70-c500e7d4883b.png"
height="400" style="max-width: 100%"> <img
src="https://user-images.githubusercontent.com/76530270/209784301-f024dbcd-3526-4068-a698-f1cae25dde9a.png"
height="400" style="max-width: 100%">


<img
src="https://user-images.githubusercontent.com/76530270/209538237-2409c6b1-e881-4e8c-8b20-25bce10868e3.png"
height="400" style="max-width: 100%"> <img
src="https://user-images.githubusercontent.com/76530270/209784484-4eb2ce01-721d-4364-91c2-d64510ff6da6.png"
height="400" style="max-width: 100%">


### Resume Lesson 

<img
src="https://user-images.githubusercontent.com/76530270/208655056-2bf2a66b-a6eb-4ba3-b5ff-371f27427452.png"
height="400" style="max-width: 100%"> <img
src="https://user-images.githubusercontent.com/76530270/208655045-6ebaf554-bc42-47f9-b03e-3ad831ab78b1.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/java/org/oppia/android/app/customview/SegmentedCircularProgressView.kt

@@ -76,16 +76,28 @@ class SegmentedCircularProgressView : View {
     calculateSweepAngle()
 
     chapterFinishedArcPaint = Paint(Paint.ANTI_ALIAS_FLAG)
-    setupArcPaint(chapterFinishedArcPaint, R.color.oppia_progress_chapter_finished)
+    setupArcPaint(
+      chapterFinishedArcPaint,
+      R.color.component_color_lessons_tab_activity_chapter_completed_progress_color
+    )
 
     chapterInProgressArcPaint = Paint(Paint.ANTI_ALIAS_FLAG)
-    setupArcPaint(chapterInProgressArcPaint, R.color.oppia_progress_chapter_in_progress)
+    setupArcPaint(
+      chapterInProgressArcPaint,
+      R.color.component_color_lessons_tab_activity_chapter_in_progress_progress_color
+    )
 
     chapterNotStartedArcPaint = Paint(Paint.ANTI_ALIAS_FLAG)
     if (chaptersFinished != 0) {
-      setupArcPaint(chapterNotStartedArcPaint, R.color.oppia_progress_chapter_not_finished)
+      setupArcPaint(
+        chapterNotStartedArcPaint,
+        R.color.component_color_lessons_tab_activity_chapter_not_finished_progress_color
+      )
     } else {
-      setupArcPaint(chapterNotStartedArcPaint, R.color.color_def_grey_shade_20)
+      setupArcPaint(
+        chapterNotStartedArcPaint,
+        R.color.component_color_lessons_tab_activity_chapter_not_started_progress_color
+      )
     }
   }
 

app/src/main/java/org/oppia/android/app/customview/VerticalDashedLineView.kt

@@ -35,7 +35,10 @@ class VerticalDashedLineView @JvmOverloads constructor(
 
     paint = Paint().apply {
       isAntiAlias = true
-      color = ContextCompat.getColor(context, R.color.oppia_primary)
+      color = ContextCompat.getColor(
+        context,
+        R.color.component_color_story_chapter_default_progress_solid_color
+      )
       style = Paint.Style.STROKE
       strokeCap = Paint.Cap.ROUND
       strokeWidth = dashThickness

app/src/main/res/drawable/chapter_dark_green_bg_with_bright_green_border.xml

@@ -3,6 +3,6 @@
   android:shape="rectangle">
   <stroke
     android:width="4dp"
-    android:color="@color/color_def_bright_green" />
-  <solid android:color="@color/color_def_oppia_green" />
+    android:color="@color/component_color_lessons_tab_activity_lesson_not_started_stroke_color" />
+  <solid android:color="@color/component_color_lessons_tab_activity_lesson_not_started_chapter_index_background_color" />
 </shape>

app/src/main/res/drawable/chapter_white_bg_with_bright_green_border.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
   android:shape="rectangle">
-  <stroke android:color="@color/color_def_bright_green" android:width="4dp"/>
-  <solid android:color="@color/color_def_white"/>
+  <stroke android:color="@color/component_color_lessons_tab_activity_lesson_not_started_stroke_color" android:width="4dp"/>
+  <solid android:color="@color/component_color_lessons_tab_activity_lesson_not_started_chapter_name_background_color"/>
 </shape>

app/src/main/res/drawable/circular_solid_color_primary_32dp.xml

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
   android:shape="rectangle">
-  <solid android:color="@color/oppia_primary" />
+  <solid android:color="@color/component_color_story_chapter_default_progress_solid_color" />
   <corners android:radius="16dp" />
   <size
     android:width="32dp"

app/src/main/res/drawable/circular_stroke_2dp_color_primary_32dp.xml

@@ -1,10 +1,10 @@
 <?xml version="1.0" encoding="utf-8"?>
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
   android:shape="rectangle">
-  <solid android:color="@color/color_def_white" />
+  <solid android:color="@color/component_color_story_chapter_not_start_progress_solid_color" />
   <stroke
     android:width="2dp"
-    android:color="@color/oppia_primary" />
+    android:color="@color/component_color_story_chapter_default_progress_solid_color" />
   <corners android:radius="16dp" />
   <size
     android:width="32dp"

app/src/main/res/drawable/circular_stroke_2dp_grey_32dp.xml

@@ -1,10 +1,10 @@
 <?xml version="1.0" encoding="utf-8"?>
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
   android:shape="rectangle">
-  <solid android:color="@color/color_def_white" />
+  <solid android:color="@color/component_color_story_chapter_not_start_progress_solid_color" />
   <stroke
     android:width="2dp"
-    android:color="@color/color_def_light_grey" />
+    android:color="@color/component_color_story_chapter_default_progress_stroke_color" />
   <corners android:radius="16dp" />
   <size
     android:width="32dp"

app/src/main/res/drawable/dashed_divider.xml

@@ -1,10 +1,10 @@
 <?xml version="1.0" encoding="utf-8"?>
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
   android:shape="line">
-  <solid android:color="@android:color/transparent" />
+  <solid android:color="@color/component_color_shared_transparent_background_color" />
   <stroke
     android:width="1dp"
-    android:color="@color/oppia_dashed_divider"
+    android:color="@color/component_color_lessons_tab_activity_lesson_card_dashed_divider_color"
     android:dashWidth="8dp"
     android:dashGap="6dp" />
 </shape>

app/src/main/res/drawable/grey_recycler_view_item_decoration_divider.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
   android:shape="rectangle">
-  <solid android:color="@color/color_def_accessible_light_grey_2" />
+  <solid android:color="@color/component_color_shared_divider_color" />
   <size android:height="1dp" />
 </shape>

app/src/main/res/drawable/start_over_button_background.xml

@@ -2,7 +2,7 @@
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
   android:shape="rectangle">
   <corners android:radius="@dimen/state_previous_next_button_radius" />
-  <solid android:color="@color/color_def_white" />
+  <solid android:color="@color/component_color_shared_white_background_color" />
   <stroke
     android:width="2dp"
     android:color="@color/component_color_start_over_button_stroke_color" />

app/src/main/res/drawable/toolbar_drop_shadow.xml

@@ -3,6 +3,6 @@
   android:shape="rectangle">
   <gradient
     android:angle="90"
-    android:endColor="@color/toolbar_drop_shadow"
+    android:endColor="@color/component_color_shared_activity_toolbar_shadow_color"
     android:startColor="@android:color/transparent" />
 </shape>

app/src/main/res/layout-land/resume_lesson_fragment.xml

@@ -14,7 +14,7 @@
   <ScrollView
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    android:background="@color/component_color_resume_lesson_activity_background_color"
+    android:background="@color/component_color_shared_screen_primary_background_color"
     android:overScrollMode="never"
     android:scrollbars="none">
 
@@ -34,7 +34,7 @@
         android:layout_marginBottom="8dp"
         android:fontFamily="sans-serif"
         android:text="@{viewModel.chapterTitle}"
-        android:textColor="@color/component_color_resume_lesson_activity_text_color"
+        android:textColor="@color/component_color_shared_primary_text_color"
         android:textDirection="locale"
         android:textSize="24sp"
         android:textStyle="bold"
@@ -49,7 +49,7 @@
         android:layout_marginTop="16dp"
         android:layout_marginEnd="32dp"
         android:ellipsize="end"
-        android:textColor="@color/component_color_resume_lesson_activity_description_color"
+        android:textColor="@color/component_color_shared_secondary_1_text_color"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toBottomOf="@id/resume_lesson_chapter_title_text_view" />

app/src/main/res/layout-land/story_chapter_view.xml

@@ -29,11 +29,12 @@
       android:layout_marginTop="16dp"
       android:layout_marginEnd="72dp"
       android:layout_marginBottom="8dp"
+      app:cardBackgroundColor="@color/component_color_story_activity_container_background_color"
       android:clickable="@{viewModel.chapterSummary.chapterPlayState != ChapterPlayState.NOT_PLAYABLE_MISSING_PREREQUISITES}"
       android:onClick="@{(v) -> viewModel.onExplorationClicked()}"
       app:cardCornerRadius="4dp"
       app:cardElevation="@dimen/story_chapter_card_playable_state_elevation"
-      app:strokeColor="@{viewModel.chapterSummary.chapterPlayState != ChapterPlayState.NOT_PLAYABLE_MISSING_PREREQUISITES ? @color/oppia_primary : @color/chapter_card_grey_border}"
+      app:strokeColor="@{viewModel.chapterSummary.chapterPlayState != ChapterPlayState.NOT_PLAYABLE_MISSING_PREREQUISITES ? @color/component_color_story_activity_story_chapter_card_start_stroke_color : @color/component_color_story_activity_story_chapter_card_not_start_stroke_color}"
       app:strokeWidth="2dp">
 
       <androidx.constraintlayout.widget.ConstraintLayout
@@ -46,7 +47,6 @@
           android:layout_height="wrap_content"
           android:minHeight="116dp"
           android:padding="8dp"
-          android:background="@color/component_color_story_activity_container_background_color"
           app:layout_constraintBottom_toBottomOf="parent"
           app:layout_constraintEnd_toEndOf="parent"
           app:layout_constraintStart_toStartOf="parent"
@@ -64,7 +64,7 @@
             android:fontFamily="sans-serif-medium"
             android:maxLines="2"
             android:text="@{viewModel.computeChapterTitleText()}"
-            android:textColor="@color/component_color_story_activity_text_color"
+            android:textColor="@color/component_color_shared_primary_text_color"
             android:textSize="18sp"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="parent"
@@ -78,8 +78,8 @@
             android:layout_marginEnd="8dp"
             android:layout_marginBottom="4dp"
             android:text="@{htmlContent}"
-            android:textColor="@color/component_color_story_activity_text_color"
-            android:textColorLink="@color/oppia_primary"
+            android:textColor="@color/component_color_shared_primary_text_color"
+            android:textColorLink="@color/component_color_shared_link_text_color"
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="parent"
@@ -93,12 +93,13 @@
             android:layout_marginEnd="8dp"
             android:layout_marginBottom="4dp"
             android:contentDescription="@{@string/chapter_completed}"
-            app:srcCompat="@drawable/ic_check_24dp"
             android:visibility="@{viewModel.chapterSummary.chapterPlayState == ChapterPlayState.COMPLETED ? View.VISIBLE : View.GONE}"
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintTop_toBottomOf="@+id/chapter_summary"
-            app:layout_constraintVertical_bias="1.0" />
+            app:layout_constraintVertical_bias="1.0"
+            app:srcCompat="@drawable/ic_check_24dp"
+            app:tint="@color/component_color_shared_check_icon_color" />
         </androidx.constraintlayout.widget.ConstraintLayout>
       </androidx.constraintlayout.widget.ConstraintLayout>
     </com.google.android.material.card.MaterialCardView>

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/topic_thumbnail_background"
+      android:background="@color/component_color_resume_lesson_topic_thumbnail_background_color"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintStart_toStartOf="@+id/guideline6"
@@ -48,7 +48,7 @@
       android:layout_width="0dp"
       android:layout_height="match_parent"
       android:layout_weight="1"
-      android:background="@color/component_color_resume_lesson_activity_background_color">
+      android:background="@color/component_color_shared_screen_primary_background_color">
 
       <androidx.constraintlayout.widget.ConstraintLayout
         android:layout_width="match_parent"
@@ -65,7 +65,7 @@
           android:layout_marginBottom="8dp"
           android:fontFamily="sans-serif"
           android:text="@{viewModel.chapterTitle}"
-          android:textColor="@color/component_color_resume_lesson_activity_text_color"
+          android:textColor="@color/component_color_shared_primary_text_color"
           android:textDirection="locale"
           android:textSize="24sp"
           android:textStyle="bold"
@@ -80,7 +80,7 @@
           android:layout_marginTop="16dp"
           android:layout_marginEnd="32dp"
           android:ellipsize="end"
-          android:textColor="@color/component_color_resume_lesson_activity_description_color"
+          android:textColor="@color/component_color_shared_secondary_1_text_color"
           app:layout_constraintEnd_toEndOf="parent"
           app:layout_constraintStart_toStartOf="parent"
           app:layout_constraintTop_toBottomOf="@id/resume_lesson_chapter_title_text_view" />

app/src/main/res/layout-sw600dp-land/topic_lessons_story_summary.xml

@@ -27,10 +27,12 @@
       android:layout_marginTop="12dp"
       android:layout_marginBottom="12dp"
       android:importantForAccessibility="no"
-      app:cardBackgroundColor="@color/color_def_white"
+      app:cardBackgroundColor="@color/component_color_lessons_tab_activity_background_color"
       app:cardCornerRadius="4dp"
       app:cardElevation="4dp"
-      app:rippleColor="@color/color_def_transparent">
+      app:rippleColor="@color/component_color_lessons_tab_activity_lesson_card_ripple_color"
+      app:strokeColor="@color/component_color_shared_card_border_stroke_color"
+      app:strokeWidth="1dp">
 
       <LinearLayout
         android:layout_width="match_parent"
@@ -71,7 +73,7 @@
                 android:layout_gravity="center"
                 android:fontFamily="sans-serif-medium"
                 android:text="@{viewModel.storyProgressPercentageText}"
-                android:textColor="@color/oppia_primary_text"
+                android:textColor="@color/component_color_shared_text_view_text_color"
                 android:textSize="14sp"
                 android:visibility="@{viewModel.storyPercentage != 0 ? View.VISIBLE : View.GONE}" />
             </FrameLayout>
@@ -83,7 +85,7 @@
               android:layout_marginTop="4dp"
               android:fontFamily="sans-serif"
               android:text="@{viewModel.storyPercentage != 100? @string/status_in_progress : @string/status_completed}"
-              android:textColor="@color/oppia_primary_text"
+              android:textColor="@color/component_color_shared_text_view_text_color"
               android:textSize="10sp"
               android:visibility="@{viewModel.storyPercentage != 0 ? View.VISIBLE : View.GONE}" />
           </LinearLayout>
@@ -112,7 +114,7 @@
                 android:paddingTop="24dp"
                 android:paddingBottom="4dp"
                 android:text="@{viewModel.storyTitle}"
-                android:textColor="@color/oppia_primary_text"
+                android:textColor="@color/component_color_shared_text_view_text_color"
                 android:textSize="18sp" />
 
               <TextView
@@ -123,7 +125,7 @@
                 android:fontFamily="sans-serif"
                 android:importantForAccessibility="no"
                 android:text="@{viewModel.computeChapterCountText()}"
-                android:textColor="@color/oppia_primary_text"
+                android:textColor="@color/component_color_shared_text_view_text_color"
                 android:textSize="16sp" />
             </LinearLayout>
 
@@ -143,7 +145,8 @@
                 android:contentDescription="@{isListExpanded ? @string/hide_chapter_list : @string/show_chapter_list}"
                 app:isRotationAnimationClockwise="@{isListExpanded}"
                 app:rotationAnimationAngle="@{180f}"
-                app:srcCompat="@drawable/ic_arrow_drop_down_black_24dp" />
+                app:srcCompat="@drawable/ic_arrow_drop_down_black_24dp"
+                app:tint="@color/component_color_lessons_tab_activity_lesson_card_drop_down_arrow_color" />
             </FrameLayout>
           </LinearLayout>
         </LinearLayout>
@@ -153,7 +156,7 @@
           android:id="@+id/chapter_list_container"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
-          android:background="@color/color_def_white_light"
+          android:background="@color/component_color_lessons_tab_activity_background_color"
           android:orientation="vertical"
           android:visibility="@{isListExpanded? View.VISIBLE : View.GONE}">