Fix part of #5344: Refactor Classroom List Screen UI (#5462)

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

Fixes part of #5344

This PR refactors the new Classroom List Screen to align with the
updated design mocks provided in
[Figma](https://www.figma.com/design/H4BaHlwnALtjQcemP322hE/Oppia-Multiple-Classroom-Android-(Ashley's-Expansion)?node-id=3064-11726&t=dnQTkdXXXWoeh9k3-0).
The changes include:
- Implementing functionality to collapse the classroom cards when the
carousel sticks to the top.
- Updating the dark mode color scheme to match the new design
specifications.


https://github.com/user-attachments/assets/cf7600a1-d0b8-4c42-af3c-67950589f8f7


https://github.com/user-attachments/assets/dfe8b564-0d37-450d-bc6a-d244e7aa58d7

## Screenshots
### Phone
|Portrait|Landscape|
|--|--|

|![image](https://github.com/user-attachments/assets/a288aa3f-e0b6-41d0-a1c0-2d98917ae85a)|![image](https://github.com/user-attachments/assets/eb087b19-11bf-4be6-b54b-e7f4eca869a8)|

|![image](https://github.com/user-attachments/assets/d36a67df-6a96-40bb-82cd-41c7af76e9a7)|![image](https://github.com/user-attachments/assets/da2b3a56-c307-4f54-a53d-3f0f969b1f91)|

|![image](https://github.com/user-attachments/assets/29a64410-c516-447f-add8-8399174f32b2)|![image](https://github.com/user-attachments/assets/d1be0cff-de26-44d6-867a-f8506fa5e110)|

|![image](https://github.com/user-attachments/assets/66b99d9c-459f-4845-9148-cb355cd59882)|![image](https://github.com/user-attachments/assets/1521321b-cdcd-488c-b826-603e2ad20a84)|

### Tablet
|Portrait|Landscape|
|--|--|

|![image](https://github.com/user-attachments/assets/078cdcc2-6811-494e-899a-fb49655ff1cd)|![image](https://github.com/user-attachments/assets/f13d711d-7df2-434f-b593-cce2251bea5f)|

||![image](https://github.com/user-attachments/assets/71e7b7ce-9a3b-4e47-855d-160657a43846)|

|![image](https://github.com/user-attachments/assets/f01c4188-e699-4d4c-9097-7cf32cfe4ac9)|![image](https://github.com/user-attachments/assets/d2f5e43c-3650-49f2-b955-85017b68b2c3)|

||![image](https://github.com/user-attachments/assets/197a36f4-d2cc-4df9-b537-b1a006b8e9b9)|

## 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: ...".)
- [x] 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
<!-- 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))
- For PRs introducing new UI elements or color changes, both light and
dark mode screenshots must be included
- Add a screenshot demonstrating that you ran affected Espresso tests
locally & that they're passing

app/src/main/java/org/oppia/android/app/classroom/ClassroomListFragmentPresenter.kt

@@ -16,6 +16,7 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.LazyListScope
+import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.material.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
@@ -29,6 +30,7 @@ import androidx.databinding.ObservableList
 import androidx.fragment.app.Fragment
 import androidx.lifecycle.Observer
 import org.oppia.android.R
+import org.oppia.android.app.classroom.classroomlist.AllClassroomsHeaderText
 import org.oppia.android.app.classroom.classroomlist.ClassroomList
 import org.oppia.android.app.classroom.promotedlist.ComingSoonTopicList
 import org.oppia.android.app.classroom.promotedlist.PromotedStoryList
@@ -38,6 +40,7 @@ import org.oppia.android.app.classroom.welcome.WelcomeText
 import org.oppia.android.app.home.HomeItemViewModel
 import org.oppia.android.app.home.RouteToTopicPlayStoryListener
 import org.oppia.android.app.home.WelcomeViewModel
+import org.oppia.android.app.home.classroomlist.AllClassroomsViewModel
 import org.oppia.android.app.home.classroomlist.ClassroomSummaryViewModel
 import org.oppia.android.app.home.promotedlist.ComingSoonTopicListViewModel
 import org.oppia.android.app.home.promotedlist.PromotedStoryListViewModel
@@ -197,8 +200,15 @@ class ClassroomListFragmentPresenter @Inject constructor(
       ?.plus(classroomListViewModel.topicList)
       ?.groupBy { it::class }
     val topicListSpanCount = integerResource(id = R.integer.home_span_count)
+    val listState = rememberLazyListState()
+    val classroomListIndex = groupedItems
+      ?.flatMap { (type, items) -> items.map { type to it } }
+      ?.indexOfFirst { it.first == AllClassroomsViewModel::class }
+      ?: -1
+
     LazyColumn(
-      modifier = Modifier.testTag(CLASSROOM_LIST_SCREEN_TEST_TAG)
+      modifier = Modifier.testTag(CLASSROOM_LIST_SCREEN_TEST_TAG),
+      state = listState
     ) {
       groupedItems?.forEach { (type, items) ->
         when (type) {
@@ -223,10 +233,16 @@ class ClassroomListFragmentPresenter @Inject constructor(
               )
             }
           }
-          ClassroomSummaryViewModel::class -> stickyHeader {
+          AllClassroomsViewModel::class -> items.forEach { _ ->
+            item {
+              AllClassroomsHeaderText()
+            }
+          }
+          ClassroomSummaryViewModel::class -> stickyHeader() {
             ClassroomList(
               classroomSummaryList = items.map { it as ClassroomSummaryViewModel },
-              classroomListViewModel.selectedClassroomId.get() ?: ""
+              selectedClassroomId = classroomListViewModel.selectedClassroomId.get() ?: "",
+              isSticky = listState.firstVisibleItemIndex >= classroomListIndex
             )
           }
           AllTopicsViewModel::class -> items.forEach { _ ->

app/src/main/java/org/oppia/android/app/classroom/ClassroomListViewModel.kt

@@ -10,6 +10,7 @@ import androidx.lifecycle.Transformations
 import org.oppia.android.R
 import org.oppia.android.app.home.HomeItemViewModel
 import org.oppia.android.app.home.WelcomeViewModel
+import org.oppia.android.app.home.classroomlist.AllClassroomsViewModel
 import org.oppia.android.app.home.classroomlist.ClassroomSummaryClickListener
 import org.oppia.android.app.home.classroomlist.ClassroomSummaryViewModel
 import org.oppia.android.app.home.promotedlist.ComingSoonTopicListViewModel
@@ -264,13 +265,14 @@ class ClassroomListViewModel(
   private fun computeClassroomItemViewModelList(
     classroomList: ClassroomList
   ): List<HomeItemViewModel> {
-    return classroomList.classroomSummaryList.map { ephemeralClassroomSummary ->
-      ClassroomSummaryViewModel(
-        fragment as ClassroomSummaryClickListener,
-        ephemeralClassroomSummary,
-        translationController
-      )
-    }
+    return listOf(AllClassroomsViewModel) +
+      classroomList.classroomSummaryList.map { ephemeralClassroomSummary ->
+        ClassroomSummaryViewModel(
+          fragment as ClassroomSummaryClickListener,
+          ephemeralClassroomSummary,
+          translationController
+        )
+      }
   }
 
   /**

app/src/main/java/org/oppia/android/app/classroom/classroomlist/AllClassroomsHeaderText.kt

@@ -0,0 +1,36 @@
+package org.oppia.android.app.classroom.classroomlist
+
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.testTag
+import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.res.dimensionResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.sp
+import org.oppia.android.R
+
+/** Test tag for the all classrooms section header. */
+const val ALL_CLASSROOMS_HEADER_TEST_TAG = "TEST_TAG.all_classrooms_header"
+
+/** Displays the header text for the classroom list section. */
+@Composable
+fun AllClassroomsHeaderText() {
+  Text(
+    text = stringResource(id = R.string.classrooms_list_activity_section_header),
+    color = colorResource(id = R.color.component_color_classroom_shared_header_text_color),
+    fontFamily = FontFamily.SansSerif,
+    fontWeight = FontWeight.Normal,
+    fontSize = dimensionResource(id = R.dimen.classrooms_list_header_text_size).value.sp,
+    modifier = Modifier
+      .testTag(ALL_CLASSROOMS_HEADER_TEST_TAG)
+      .padding(
+        start = dimensionResource(id = R.dimen.classrooms_text_margin_start),
+        top = dimensionResource(id = R.dimen.classrooms_text_margin_top),
+        end = dimensionResource(id = R.dimen.classrooms_text_margin_end),
+      ),
+  )
+}

app/src/main/java/org/oppia/android/app/classroom/classroomlist/ClassroomList.kt

@@ -1,6 +1,6 @@
 package org.oppia.android.app.classroom.classroomlist
 
-import android.content.res.Configuration
+import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
@@ -9,7 +9,6 @@ import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
@@ -24,60 +23,45 @@ import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.res.colorResource
 import androidx.compose.ui.res.dimensionResource
+import androidx.compose.ui.res.integerResource
 import androidx.compose.ui.res.painterResource
-import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import org.oppia.android.R
 import org.oppia.android.app.classroom.getDrawableResource
 import org.oppia.android.app.home.classroomlist.ClassroomSummaryViewModel
 
-/** Test tag for the header of the classroom section. */
-const val CLASSROOM_HEADER_TEST_TAG = "TEST_TAG.classroom_header"
-
 /** Test tag for the classroom list. */
 const val CLASSROOM_LIST_TEST_TAG = "TEST_TAG.classroom_list"
 
+/** Test tag for the classroom card icon. */
+const val CLASSROOM_CARD_ICON_TEST_TAG = "TEST_TAG.classroom_card_icon"
+
 /** Displays a list of classroom summaries with a header. */
 @Composable
 fun ClassroomList(
   classroomSummaryList: List<ClassroomSummaryViewModel>,
-  selectedClassroomId: String
+  selectedClassroomId: String,
+  isSticky: Boolean,
 ) {
-  Column(
+  LazyRow(
     modifier = Modifier
+      .testTag(CLASSROOM_LIST_TEST_TAG)
       .background(
         color = colorResource(id = R.color.component_color_shared_screen_primary_background_color)
       )
       .fillMaxWidth(),
+    contentPadding = PaddingValues(
+      start = dimensionResource(id = R.dimen.classrooms_text_margin_start),
+      top = dimensionResource(id = R.dimen.classrooms_text_margin_bottom),
+      end = dimensionResource(id = R.dimen.classrooms_text_margin_end),
+    ),
   ) {
-    Text(
-      text = stringResource(id = R.string.classrooms_list_activity_section_header),
-      color = colorResource(id = R.color.component_color_shared_primary_text_color),
-      fontFamily = FontFamily.SansSerif,
-      fontWeight = FontWeight.Medium,
-      fontSize = dimensionResource(id = R.dimen.classrooms_list_header_text_size).value.sp,
-      modifier = Modifier
-        .testTag(CLASSROOM_HEADER_TEST_TAG)
-        .padding(
-          start = dimensionResource(id = R.dimen.classrooms_text_margin_start),
-          top = dimensionResource(id = R.dimen.classrooms_text_margin_top),
-          end = dimensionResource(id = R.dimen.classrooms_text_margin_end),
-          bottom = dimensionResource(id = R.dimen.classrooms_text_margin_bottom),
-        ),
-    )
-    LazyRow(
-      modifier = Modifier.testTag(CLASSROOM_LIST_TEST_TAG),
-      contentPadding = PaddingValues(
-        start = dimensionResource(id = R.dimen.classrooms_text_margin_start),
-        end = dimensionResource(id = R.dimen.classrooms_text_margin_end),
-      ),
-    ) {
-      items(classroomSummaryList) {
-        ClassroomCard(classroomSummaryViewModel = it, selectedClassroomId)
-      }
+    items(classroomSummaryList) {
+      ClassroomCard(classroomSummaryViewModel = it, selectedClassroomId, isSticky)
     }
   }
 }
@@ -86,37 +70,41 @@ fun ClassroomList(
 @Composable
 fun ClassroomCard(
   classroomSummaryViewModel: ClassroomSummaryViewModel,
-  selectedClassroomId: String
+  selectedClassroomId: String,
+  isSticky: Boolean,
 ) {
-  val screenWidth = LocalConfiguration.current.screenWidthDp
-  val isPortrait = LocalConfiguration.current.orientation == Configuration.ORIENTATION_PORTRAIT
-  val isTablet = if (isPortrait) screenWidth > 600 else screenWidth > 840
   val isCardSelected = classroomSummaryViewModel.classroomSummary.classroomId == selectedClassroomId
   Card(
     modifier = Modifier
-      .height(dimensionResource(id = R.dimen.classrooms_card_height))
-      .width(dimensionResource(id = R.dimen.classrooms_card_width))
+      .width(getClassroomCardWidth())
       .padding(
-        start = dimensionResource(R.dimen.promoted_story_card_layout_margin_start),
-        end = dimensionResource(R.dimen.promoted_story_card_layout_margin_end),
+        start = dimensionResource(R.dimen.classrooms_card_margin_start),
+        end = dimensionResource(R.dimen.classrooms_card_margin_end),
       )
       .clickable {
         classroomSummaryViewModel.handleClassroomClick()
       },
     backgroundColor = if (isCardSelected) {
-      colorResource(id = R.color.component_color_classroom_card_color)
+      colorResource(id = R.color.component_color_classroom_card_selected_color)
     } else {
-      colorResource(id = R.color.component_color_shared_screen_primary_background_color)
+      colorResource(id = R.color.component_color_classroom_card_color)
     },
     border = BorderStroke(2.dp, color = colorResource(id = R.color.color_def_oppia_green)),
     elevation = dimensionResource(id = R.dimen.classrooms_card_elevation),
   ) {
     Column(
-      modifier = Modifier.padding(all = dimensionResource(id = R.dimen.classrooms_card_padding)),
+      modifier = Modifier.padding(
+        horizontal = dimensionResource(id = R.dimen.classrooms_card_padding_horizontal),
+        vertical = if (isSticky) {
+          dimensionResource(id = R.dimen.classrooms_card_collapsed_padding_vertical)
+        } else {
+          dimensionResource(id = R.dimen.classrooms_card_padding_vertical)
+        },
+      ),
       verticalArrangement = Arrangement.Center,
       horizontalAlignment = Alignment.CenterHorizontally,
     ) {
-      if (isPortrait || isTablet) { // Hides the classroom icon for landscape phone layouts.
+      AnimatedVisibility(visible = !isSticky) {
         Image(
           painter = painterResource(
             id = classroomSummaryViewModel
@@ -126,6 +114,7 @@ fun ClassroomCard(
           ),
           contentDescription = classroomSummaryViewModel.title,
           modifier = Modifier
+            .testTag("${CLASSROOM_CARD_ICON_TEST_TAG}_${classroomSummaryViewModel.title}")
             .padding(bottom = dimensionResource(id = R.dimen.classrooms_card_icon_padding_bottom))
             .size(size = dimensionResource(id = R.dimen.classrooms_card_icon_size)),
         )
@@ -140,3 +129,17 @@ fun ClassroomCard(
     }
   }
 }
+
+@Composable
+private fun getClassroomCardWidth(): Dp {
+  val configuration = LocalConfiguration.current
+  val screenWidth = configuration.screenWidthDp.dp
+  val horizontalPadding = dimensionResource(id = R.dimen.classrooms_text_margin_start)
+  val topicCardHorizontalMargin = 8.dp
+  val topicListSpanCount = integerResource(id = R.integer.home_span_count)
+
+  val totalTopicCardWidth = screenWidth -
+    (horizontalPadding.times(2) + (topicCardHorizontalMargin * (topicListSpanCount - 1) * 2))
+
+  return totalTopicCardWidth.div(topicListSpanCount)
+}

app/src/main/java/org/oppia/android/app/classroom/promotedlist/PromotedStoryList.kt

@@ -66,9 +66,9 @@ fun PromotedStoryList(
   ) {
     Text(
       text = promotedStoryListViewModel.getHeader(),
-      color = colorResource(id = R.color.component_color_shared_primary_text_color),
+      color = colorResource(id = R.color.component_color_classroom_shared_header_text_color),
       fontFamily = FontFamily.SansSerif,
-      fontWeight = FontWeight.Medium,
+      fontWeight = FontWeight.Normal,
       fontSize = dimensionResource(id = R.dimen.promoted_story_list_header_text_size).value.sp,
       modifier = Modifier
         .weight(weight = 1f, fill = false),
@@ -127,7 +127,7 @@ fun PromotedStoryCard(
       )
       .clickable { promotedStoryViewModel.clickOnStoryTile() },
     backgroundColor = colorResource(
-      id = R.color.component_color_shared_screen_primary_background_color
+      id = R.color.component_color_classroom_promoted_list_card_background_color
     ),
     elevation = dimensionResource(id = R.dimen.promoted_story_card_elevation),
   ) {

app/src/main/java/org/oppia/android/app/classroom/topiclist/AllTopicsHeaderText.kt

@@ -30,7 +30,9 @@ fun AllTopicsHeaderText() {
     modifier = Modifier
       .testTag(ALL_TOPICS_HEADER_TEST_TAG)
       .fillMaxWidth()
-      .background(colorResource(id = R.color.color_palette_classroom_topic_list_background_color))
+      .background(
+        colorResource(id = R.color.component_color_classroom_topic_list_background_color)
+      )
       .padding(
         start = dimensionResource(id = R.dimen.all_topics_text_margin_start),
         top = dimensionResource(id = R.dimen.all_topics_text_margin_top),

app/src/main/java/org/oppia/android/app/home/classroomlist/AllClassroomsViewModel.kt

@@ -0,0 +1,8 @@
+package org.oppia.android.app.home.classroomlist
+
+import androidx.lifecycle.ViewModel
+import org.oppia.android.app.classroom.ClassroomListFragment
+import org.oppia.android.app.home.HomeItemViewModel
+
+/** [ViewModel] for displaying the classroom header in [ClassroomListFragment]. */
+object AllClassroomsViewModel : HomeItemViewModel()

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

@@ -7,17 +7,17 @@
       android:pathData="M4,1.5L64,1.5A2.5,2.5 0,0 1,66.5 4L66.5,64A2.5,2.5 0,0 1,64 66.5L4,66.5A2.5,2.5 0,0 1,1.5 64L1.5,4A2.5,2.5 0,0 1,4 1.5z"
       android:strokeWidth="3"
       android:fillColor="#00000000"
-      android:strokeColor="#00645C"/>
+      android:strokeColor="@color/component_color_classroom_card_icon_stroke_color"/>
   <path
       android:pathData="M34,1.5V66.5"
       android:strokeWidth="3"
       android:fillColor="#00000000"
-      android:strokeColor="#00645C"/>
+      android:strokeColor="@color/component_color_classroom_card_icon_stroke_color"/>
   <path
       android:pathData="M66.5,34L1.5,34"
       android:strokeWidth="3"
       android:fillColor="#00000000"
-      android:strokeColor="#00645C"/>
+      android:strokeColor="@color/component_color_classroom_card_icon_stroke_color"/>
   <path
       android:pathData="M22.9502,13.0502L13.0507,22.9497"
       android:strokeWidth="4"

app/src/main/res/values-land/dimens.xml

@@ -556,6 +556,9 @@
   <dimen name="classrooms_text_margin_top">20dp</dimen>
   <dimen name="classrooms_text_margin_end">72dp</dimen>
   <dimen name="classrooms_text_margin_bottom">12dp</dimen>
-  <dimen name="classrooms_card_width">150dp</dimen>
-  <dimen name="classrooms_card_height">60dp</dimen>
+  <dimen name="classrooms_card_padding_vertical">36dp</dimen>
+  <dimen name="classrooms_card_icon_padding_bottom">28dp</dimen>
+  <dimen name="classrooms_card_icon_size">80dp</dimen>
+  <dimen name="classrooms_card_margin_start">8dp</dimen>
+  <dimen name="classrooms_card_margin_end">0dp</dimen>
 </resources>

app/src/main/res/values-night/color_palette.xml

@@ -132,7 +132,7 @@
   <color name="color_palette_revision_card_toolbar_color">@color/color_def_forest_green</color>
   <color name="color_palette_hints_and_solutions_fragment_toolbar_color">@color/color_def_oppia_dark_blue</color>
   <color name="color_palette_menu_selected_text_color">@color/color_def_oppia_turquoise</color>
-  <color name="color_palette_developer_option_menu_selected_color">@color/color_def_persian_blue</color>
+  <color name="color_palette_developer_option_menu_selected_color">@color/color_def_persian_blue_1</color>
   <color name="color_palette_underline_view_color">@color/color_def_bright_green</color>
   <color name="color_palette_menu_text_color">@color/color_def_white</color>
   <color name="color_palette_secondary_container_background_color">@color/color_def_oppia_metallic_blue</color>
@@ -242,7 +242,12 @@
   <color name="color_palette_text_error_color">@color/color_def_oppia_reddish_brown</color>
   <color name="color_palette_edittext_stroke_color">@color/color_def_accessible_light_grey_2</color>
   <!-- CLASSROOM -->
-  <color name="color_palette_classroom_card_color">@color/color_def_greenish_black</color>
+  <color name="color_palette_classroom_shared_header_text_color">@color/color_def_white_1</color>
+  <color name="color_palette_classroom_card_color">@color/color_def_greenish_black_1</color>
+  <color name="color_palette_classroom_card_selected_color">@color/color_def_greenish_black_2</color>
+  <color name="color_palette_classroom_card_icon_stroke_color">@color/color_def_pale_green_1</color>
   <color name="color_palette_classroom_shared_text_color">@color/color_def_white</color>
-  <color name="color_palette_classroom_topic_list_background_color">@color/color_def_greenish_black</color>
+  <color name="color_palette_classroom_topic_list_background_color">@color/color_def_greenish_black_3</color>
+  <color name="color_palette_classroom_promoted_list_classroom_label_color">@color/color_def_persian_blue_2</color>
+  <color name="color_palette_classroom_promoted_list_card_background_color">@color/color_def_greenish_black_2</color>
 </resources>