Fixes part of #4177: Dark mode Topic Activity Part 1 (#4550)

* fixed text cut off

* fix text cutoff in all layouts

* add proper naming

* develop updated

* minor changes

* dark_mode:Toolbar + Tabs in first PR

app/src/main/res/layout/topic_fragment.xml

@@ -27,7 +27,7 @@
         android:id="@+id/topic_toolbar"
         android:layout_width="match_parent"
         android:layout_height="?attr/actionBarSize"
-        android:background="?attr/colorPrimary"
+        android:background="@color/component_color_topic_fragment_primary_toolbar_color"
         android:fontFamily="sans-serif"
         android:minHeight="?attr/actionBarSize"
         android:theme="@style/Widget.AppCompat.ActionBar"
@@ -52,7 +52,7 @@
         android:layout_marginEnd="@dimen/topic_fragment_tab_layout_margin_end"
         android:textSize="14sp"
         app:layout_constraintTop_toTopOf="parent"
-        app:tabBackground="@color/oppia_primary"
+        app:tabBackground="@color/component_color_topic_fragment_primary_tab_color"
         app:tabGravity="fill"
         app:tabIconTint="@color/tab_icon_color_selector"
         app:tabIndicatorColor="@android:color/white"

app/src/main/res/values/component_colors.xml

@@ -239,5 +239,8 @@
   <color name="component_color_cellular_data_dialog_checkbox_color">@color/color_palette_dark_text_color</color>
   <!-- Profile Picture Edit Dialog -->
   <color name="component_color_profile_picture_edit_dialog_text_color">@color/color_palette_dark_text_color</color>
+  <!-- Topic Activity -->
+  <color name="component_color_topic_fragment_primary_toolbar_color">@color/color_palette_toolbar_color</color>
+  <color name="component_color_topic_fragment_primary_tab_color">@color/color_palette_secondary_toolbar_color</color>
 
 </resources>