Fixes part of oppia#4195 : Added dark mode support to QuestionPlayer …

…and Exploration (oppia#4382) * added dark mode for input interaction * updated naming convention * added error_color * added hint color * changes cursor color * changed cursor color * updated cursor_color * resolving failing checks * resolving failing checks * added new hint color
BenHenning · Jul 19, 2022 · c3b42a4 · c3b42a4
1 parent eeafdf5
commit c3b42a4
Show file tree

Hide file tree

Showing 20 changed files with 97 additions and 19 deletions.
diff --git a/app/src/main/res/drawable/color_cursor.xml b/app/src/main/res/drawable/color_cursor.xml
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <shape xmlns:android="http://schemas.android.com/apk/res/android">
-  <size android:width="0.5dp" />
+  <size android:width="2dp" />
   <solid android:color="@color/component_color_shared_edit_text_cursor_color" />
 </shape>
diff --git a/app/src/main/res/drawable/edit_text_background_border.xml b/app/src/main/res/drawable/edit_text_background_border.xml
@@ -2,8 +2,8 @@
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
   android:shape="rectangle">
   <corners android:radius="4dp" />
-  <solid android:color="@color/color_def_white" />
+  <solid android:color="@color/component_color_shared_input_interaction_edit_text_background_color" />
   <stroke
     android:width="1dp"
-    android:color="@color/oppia_grey_border_dark" />
+    android:color="@color/component_color_shared_input_interaction_edit_text_not_selected_border_color" />
 </shape>
diff --git a/app/src/main/res/drawable/edit_text_background_border_blue.xml b/app/src/main/res/drawable/edit_text_background_border_blue.xml
@@ -2,8 +2,8 @@
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
   android:shape="rectangle">
   <corners android:radius="4dp" />
-  <solid android:color="@color/color_def_white" />
+  <solid android:color="@color/component_color_shared_input_interaction_edit_text_background_color" />
   <stroke
     android:width="2dp"
-    android:color="@color/color_def_oppia_dark_blue" />
+    android:color="@color/component_color_shared_input_interaction_edit_text_border_color" />
 </shape>
diff --git a/app/src/main/res/drawable/ic_arrow_down_grey_24dp.xml b/app/src/main/res/drawable/ic_arrow_down_grey_24dp.xml
@@ -1,6 +1,7 @@
 <vector xmlns:android="http://schemas.android.com/apk/res/android"
   android:width="24dp"
   android:height="24dp"
+  android:tint="@color/component_color_shared_arrow_down_grey_color"
   android:viewportWidth="24"
   android:viewportHeight="24">
   <path

diff --git a/app/src/main/res/drawable/ic_arrow_right_grey_24dp.xml b/app/src/main/res/drawable/ic_arrow_right_grey_24dp.xml
@@ -1,6 +1,7 @@
 <vector xmlns:android="http://schemas.android.com/apk/res/android"
     android:width="24dp"
     android:height="24dp"
+    android:tint="@color/component_color_shared_arrow_right_grey_color"
     android:viewportWidth="24"
     android:viewportHeight="24">
   <path

diff --git a/app/src/main/res/drawable/submitted_answer_background.xml b/app/src/main/res/drawable/submitted_answer_background.xml
@@ -4,9 +4,9 @@
   android:shape="rectangle">
   <stroke
     android:width="1dp"
-    android:color="@color/color_def_black"/>
+    android:color="@color/component_color_shared_submitted_answer_item_stroke_color"/>
   <corners
     android:radius="4dp"/>
   <solid
-    android:color="@color/color_def_white"/>
+    android:color="@color/component_color_shared_submitted_answer_item_solid_color"/>
 </shape>
diff --git a/app/src/main/res/layout/activity_input_interaction_view_test.xml b/app/src/main/res/layout/activity_input_interaction_view_test.xml
@@ -57,8 +57,8 @@
         android:paddingBottom="8dp"
         android:singleLine="true"
         android:text="@={fractionInteractionViewModel.answerText}"
-        android:textColor="@color/oppia_primary_text"
-        android:textColorHint="@color/edit_text_hint"
+        android:textColor="@color/component_color_shared_input_interaction_edit_text_color"
+        android:textColorHint="@color/component_color_shared_edit_text_hint_color"
         android:textSize="14sp"
         android:textStyle="italic"
         app:textChangedListener="@{fractionInteractionViewModel.answerTextWatcher}" />
@@ -73,7 +73,7 @@
         android:fontFamily="sans-serif"
         android:minHeight="32dp"
         android:text="@{fractionInteractionViewModel.errorMessage}"
-        android:textColor="@color/edit_text_error"
+        android:textColor="@color/component_color_shared_input_error_color"
         android:textSize="12sp"
         android:visibility="@{fractionInteractionViewModel.errorMessage.length() > 0 ? View.VISIBLE : View.INVISIBLE}" />
 
@@ -94,8 +94,8 @@
         android:paddingBottom="8dp"
         android:singleLine="true"
         android:text="@={ratioInteractionInputViewModel.answerText}"
-        android:textColor="@color/oppia_primary_text"
-        android:textColorHint="@color/edit_text_hint"
+        android:textColor="@color/component_color_shared_input_interaction_edit_text_color"
+        android:textColorHint="@color/component_color_shared_edit_text_hint_color"
         android:textSize="14sp"
         android:textStyle="italic"
         app:textChangedListener="@{ratioInteractionInputViewModel.answerTextWatcher}" />
@@ -110,7 +110,7 @@
         android:fontFamily="sans-serif"
         android:minHeight="32dp"
         android:text="@{ratioInteractionInputViewModel.errorMessage}"
-        android:textColor="@color/edit_text_error"
+        android:textColor="@color/component_color_shared_input_error_color"
         android:textSize="12sp"
         android:visibility="@{ratioInteractionInputViewModel.errorMessage.length() > 0 ? View.VISIBLE : View.INVISIBLE}" />
 
@@ -140,7 +140,7 @@
         android:fontFamily="sans-serif"
         android:minHeight="32dp"
         android:text="@{numericInputViewModel.errorMessage}"
-        android:textColor="@color/edit_text_error"
+        android:textColor="@color/component_color_shared_input_error_color"
         android:textSize="12sp"
         android:visibility="@{numericInputViewModel.errorMessage.length() > 0 ? View.VISIBLE : View.INVISIBLE}" />
 

diff --git a/app/src/main/res/layout/fraction_interaction_item.xml b/app/src/main/res/layout/fraction_interaction_item.xml
@@ -26,6 +26,7 @@
       android:hint="@{viewModel.hintText}"
       android:inputType="text"
       android:text="@={viewModel.answerText}"
+      android:textColorHint="@color/component_color_shared_edit_text_hint_color"
       app:textChangedListener="@{viewModel.answerTextWatcher}"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintStart_toStartOf="parent"
@@ -35,6 +36,7 @@
       android:id="@+id/fraction_input_error"
       style="@style/InputInteractionErrorTextView"
       android:text="@{viewModel.errorMessage}"
+      android:textColor="@color/component_color_shared_input_error_color"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toBottomOf="@+id/fraction_input_interaction_view"

diff --git a/app/src/main/res/layout/math_expression_interactions_item.xml b/app/src/main/res/layout/math_expression_interactions_item.xml
@@ -26,6 +26,7 @@
       app:placeholder="@{viewModel.hintText}"
       android:inputType="text"
       android:text="@={viewModel.answerText}"
+      android:textColorHint="@color/component_color_shared_edit_text_hint_color"
       app:textChangedListener="@{viewModel.answerTextWatcher}"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintStart_toStartOf="parent"
@@ -36,6 +37,7 @@
       android:id="@+id/math_expression_input_error"
       style="@style/InputInteractionErrorTextView"
       android:text="@{viewModel.errorMessage}"
+      android:textColor="@color/component_color_shared_input_error_color"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toBottomOf="@+id/math_expression_input_interaction_view"

diff --git a/app/src/main/res/layout/numeric_input_interaction_item.xml b/app/src/main/res/layout/numeric_input_interaction_item.xml
@@ -27,6 +27,7 @@
       android:hint="@string/numeric_input_hint"
       android:inputType="numberDecimal"
       android:text="@={viewModel.answerText}"
+      android:textColorHint="@color/component_color_shared_edit_text_hint_color"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toTopOf="parent"
@@ -35,6 +36,7 @@
     <TextView
       style="@style/InputInteractionErrorTextView"
       android:text="@{viewModel.errorMessage}"
+      android:textColor="@color/component_color_shared_input_error_color"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toBottomOf="@+id/numeric_input_interaction_view"

diff --git a/app/src/main/res/layout/ratio_input_interaction_item.xml b/app/src/main/res/layout/ratio_input_interaction_item.xml
@@ -29,6 +29,7 @@
       android:hint="@{viewModel.hintText}"
       android:inputType="text"
       android:text="@={viewModel.answerText}"
+      android:textColorHint="@color/component_color_shared_edit_text_hint_color"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toTopOf="parent"
@@ -38,6 +39,7 @@
       android:id="@+id/ratio_input_error"
       style="@style/InputInteractionErrorTextView"
       android:text="@{viewModel.errorMessage}"
+      android:textColor="@color/component_color_shared_input_error_color"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toBottomOf="@+id/ratio_input_interaction_view"

diff --git a/app/src/main/res/layout/submitted_answer_item.xml b/app/src/main/res/layout/submitted_answer_item.xml
@@ -50,7 +50,7 @@
       android:contentDescription="@{viewModel.submittedAnswerContentDescription}"
       android:padding="12dp"
       android:text="@{viewModel.submittedAnswer}"
-      android:textColor="@color/oppia_primary_text"
+      android:textColor="@color/component_color_shared_submitted_answer_item_text_color"
       android:textSize="16sp"
       android:visibility="gone"
       app:layout_constrainedWidth="true"

diff --git a/app/src/main/res/layout/text_input_interaction_item.xml b/app/src/main/res/layout/text_input_interaction_item.xml
@@ -25,6 +25,7 @@
       android:hint="@{viewModel.hintText}"
       android:inputType="text"
       android:text="@={viewModel.answerText}"
+      android:textColorHint="@color/component_color_shared_edit_text_hint_color"
       app:textChangedListener="@{viewModel.answerTextWatcher}"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintStart_toStartOf="parent"

diff --git a/app/src/main/res/values-night/color_palette.xml b/app/src/main/res/values-night/color_palette.xml
@@ -20,6 +20,7 @@
   <color name="color_palette_light_description_text_color">@color/color_def_white</color>
   <color name="color_palette_primary_background_color">@color/color_def_oppia_light_black</color>
   <color name="color_palette_hint_text_color">@color/color_def_accessible_light_grey</color>
+  <color name="color_palette_hint_text_input_interaction_color">@color/color_def_white</color>
   <color name="color_palette_secondary_background_color">@color/color_def_oppia_light_black</color>
   <color name="color_palette_primary_container_background_color">@color/color_def_accessible_grey</color>
   <color name="color_palette_icon_background_color">@color/color_def_white</color>
@@ -33,6 +34,12 @@
   <color name="color_palette_revision_card_background_color">@color/color_def_oppia_light_black</color>
   <color name="color_palette_content_background_solid_color">@color/color_def_oppia_grayish_black</color>
   <color name="color_palette_content_background_stroke_color">@color/color_def_dark_blue</color>
+  <color name="color_palette_input_error_color">@color/color_def_oppia_pink</color>
+  <color name="color_palette_submitted_answer_item_solid_color">@color/color_def_oppia_dark_grey</color>
+  <color name="color_palette_submitted_answer_item_stroke_color">@color/color_def_white</color>
+  <color name="color_palette_input_interaction_edit_text_border_color">@color/color_def_white</color>
+  <color name="color_palette_arrow_down_grey_color">@color/color_def_white</color>
+  <color name="color_palette_arrow_right_grey_color">@color/color_def_white</color>
   <color name="color_palette_rounded_rect_background_color">@color/color_def_oppia_grayish_black</color>
   <color name="color_palette_multiple_choice_color">@color/color_def_white</color>
   <color name="color_palette_multiple_choice_text_color">@color/color_def_white</color>
@@ -45,6 +52,20 @@
   <color name="color_palette_error_text_color">@color/color_def_oppia_pink</color>
   <color name="color_palette_show_eye_icon_color">@color/color_def_forest_green</color>
   <color name="color_palette_hide_eye_icon_color">@color/color_def_forest_green</color>
+  <color name="color_palette_input_interaction_edit_text_not_selected_border_color">@color/color_def_white</color>
+  <color name="color_palette_cursor_color">@color/color_def_oppia_silver</color>
+  <color name="color_palette_icon_background_secondary_color">@color/color_def_oppia_turquoise</color>
+  <color name="color_palette_accent_background_color">@color/color_def_oppia_dark_grey</color>
+  <color name="color_palette_seekbar_progress_background_color">@color/color_def_maastricht_blue</color>
+  <color name="color_palette_toolbar_secondary_color">@color/color_def_forest_green</color>
+  <color name="color_palette_secondary_dark_background_color">@color/color_def_oppia_light_black</color>
+  <color name="color_palette_concept_card_toolbar_color">@color/color_def_dark_pink</color>
+  <color name="color_palette_menu_selected_text_color">@color/color_def_oppia_pink</color>
+  <color name="color_palette_developer_option_menu_selected_color">@color/color_def_persian_blue</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>
+  <color name="color_palette_concept_status_bar_color">@color/color_def_dark_purple</color>
   <color name="color_palette_disabled_button_background_color">@color/color_def_black_grey</color>
   <color name="color_palette_back_arrow_button_color">@color/color_def_oppia_turquoise</color>
   <color name="color_palette_replay_button_color">@color/color_def_dark_pink</color>

diff --git a/app/src/main/res/values-v21/themes.xml b/app/src/main/res/values-v21/themes.xml
@@ -15,6 +15,7 @@
     <item name="colorAccent">@color/color_palette_accent_color</item>
     <item name="windowActionBar">false</item>
     <item name="windowNoTitle">true</item>
+    <item name="android:textCursorDrawable">@style/InputInteractionEditText</item>
     <item name="android:windowAnimationStyle">@style/Animation.Activity</item>
     <item name="android:statusBarColor">@color/component_color_shared_activity_status_bar_color</item>
   </style>

diff --git a/app/src/main/res/values/color_defs.xml b/app/src/main/res/values/color_defs.xml
@@ -54,12 +54,24 @@
   <color name="color_def_dark_blue">#395FD0</color>
   <color name="color_def_oppia_grey_border">#DDDDDD</color>
   <color name="color_def_dark_silver">#707070</color>
+  <color name="color_def_input_error">#923026</color>
   <color name="color_def_yellow_ivory">#FFFFF0</color>
   <color name="color_def_chooser_grey">#999999</color>
   <color name="color_def_green">#02655c</color>
+  <color name="color_def_oppia_dark_grey_border">#666666</color>
+  <color name="color_def_error">#923026</color>
+  <color name="color_def_maastricht_blue">#0e162f</color>
+  <color name="color_def_ocean_blue">#081661</color>
+  <color name="color_def_dark_pink">#8A3D69</color>
+  <color name="color_def_persian_blue">#00609C</color>
+  <color name="color_def_bright_green">#009C8A</color>
+  <color name="color_def_grape_violet">#674172</color>
+  <color name="color_def_bright_violet">#7659B6</color>
+  <color name="color_def_teal_blue">#2F6687</color>
+  <color name="color_def_dark_red">#A6503A</color>
+  <color name="color_def_dark_purple">#441530</color>
   <color name="color_def_error_text">#923026</color>
   <color name="color_def_black_grey">#33999999</color>
-  <color name="color_def_dark_pink">#8A3D69</color>
   <color name="color_def_light_turquoise">#ACFFF8</color>
   <color name="color_def_submit_button_inactive">#61999999</color>
   <color name="color_def_question_player_progress_bar_gradient_start">#00E4F2F1</color>

diff --git a/app/src/main/res/values/color_palette.xml b/app/src/main/res/values/color_palette.xml
@@ -20,6 +20,7 @@
   <color name="color_palette_light_description_text_color">@color/color_def_accessible_light_grey_2</color>
   <color name="color_palette_primary_background_color">@color/color_def_white</color>
   <color name="color_palette_hint_text_color">@color/color_def_spanish_grey</color>
+  <color name="color_palette_hint_text_input_interaction_color">@color/color_def_spanish_grey</color>
   <color name="color_palette_secondary_background_color">@color/color_def_bright_grey</color>
   <color name="color_palette_primary_container_background_color">@color/color_def_white</color>
   <color name="color_palette_icon_background_color">@color/color_def_black</color>
@@ -33,6 +34,12 @@
   <color name="color_palette_revision_card_background_color">@color/color_def_oppia_light_green</color>
   <color name="color_palette_content_background_solid_color">@color/color_def_oppia_solid_blue</color>
   <color name="color_palette_content_background_stroke_color">@color/color_def_oppia_stroke_blue</color>
+  <color name="color_palette_input_error_color">@color/color_def_input_error</color>
+  <color name="color_palette_submitted_answer_item_solid_color">@color/color_def_white</color>
+  <color name="color_palette_submitted_answer_item_stroke_color">@color/color_def_black</color>
+  <color name="color_palette_input_interaction_edit_text_border_color">@color/color_def_oppia_dark_blue</color>
+  <color name="color_palette_arrow_down_grey_color">@color/color_def_mid_grey</color>
+  <color name="color_palette_arrow_right_grey_color">@color/color_def_mid_grey</color>
   <color name="color_palette_rounded_rect_background_color">@color/color_def_white</color>
   <color name="color_palette_multiple_choice_color">@color/color_def_oppia_dark_blue</color>
   <color name="color_palette_multiple_choice_text_color">@color/color_def_oppia_dark_blue</color>
@@ -45,6 +52,20 @@
   <color name="color_palette_error_text_color">@color/color_def_error_text</color>
   <color name="color_palette_show_eye_icon_color">@color/color_def_accessible_grey</color>
   <color name="color_palette_hide_eye_icon_color">@color/color_def_accessible_grey</color>
+  <color name="color_palette_input_interaction_edit_text_not_selected_border_color">@color/color_def_oppia_dark_grey_border</color>
+  <color name="color_palette_cursor_color">@color/color_def_oppia_dark_blue</color>
+  <color name="color_palette_icon_background_secondary_color">@color/color_def_white</color>
+  <color name="color_palette_accent_background_color">@color/color_def_oppia_dark_blue</color>
+  <color name="color_palette_seekbar_progress_background_color">@color/color_def_ocean_blue</color>
+  <color name="color_palette_toolbar_secondary_color">@color/color_def_oppia_green</color>
+  <color name="color_palette_secondary_dark_background_color">@color/color_def_oppia_light_green</color>
+  <color name="color_palette_concept_card_toolbar_color">@color/color_def_oppia_brown_dark</color>
+  <color name="color_palette_menu_selected_text_color">@color/color_def_oppia_brown_dark</color>
+  <color name="color_palette_developer_option_menu_selected_color">@color/color_def_persian_blue</color>
+  <color name="color_palette_underline_view_color">@color/color_def_oppia_light_brown</color>
+  <color name="color_palette_menu_text_color">@color/color_def_black</color>
+  <color name="color_palette_secondary_container_background_color">@color/color_def_teal_blue</color>
+  <color name="color_palette_concept_status_bar_color">@color/color_def_dark_red</color>
   <color name="color_palette_disabled_button_background_color">@color/color_def_black_grey</color>
   <color name="color_palette_back_arrow_button_color">@color/color_def_oppia_dark_blue</color>
   <color name="color_palette_replay_button_color">@color/color_def_oppia_brown_dark</color>