Implement dark mode for nps survey

oppia · Jul 25, 2023 · dd32a17 · dd32a17
1 parent a2fdc7a
commit dd32a17
Show file tree

Hide file tree

Showing 17 changed files with 66 additions and 38 deletions.
diff --git a/app/src/main/java/org/oppia/android/app/customview/SurveyOnboardingBackgroundView.kt b/app/src/main/java/org/oppia/android/app/customview/SurveyOnboardingBackgroundView.kt
@@ -94,7 +94,7 @@ class SurveyOnboardingBackgroundView : View {
       strokeWidth = this@SurveyOnboardingBackgroundView.strokeWidth
       color = ContextCompat.getColor(
         context,
-        R.color.component_color_survey_onboarding_background_color
+        R.color.component_color_survey_popup_background_color
       )
     }
     setBackgroundColor(Color.TRANSPARENT)

diff --git a/app/src/main/res/drawable/rounded_button_white_background_color.xml b/app/src/main/res/drawable/rounded_button_white_background_color.xml
@@ -2,8 +2,8 @@
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
   android:shape="rectangle">
   <corners android:radius="@dimen/survey_shared_corner_radius" />
-  <solid android:color="@color/component_color_survey_background_color" />
+  <solid android:color="@color/component_color_survey_white_button_color" />
   <stroke
     android:width="1dp"
-    android:color="@color/component_color_survey_primary_button_background_color" />
+    android:color="@color/component_color_shared_button_active_stroke_color" />
 </shape>
diff --git a/app/src/main/res/drawable/rounded_button_white_outline_color.xml b/app/src/main/res/drawable/rounded_button_white_outline_color.xml
@@ -2,8 +2,8 @@
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
   android:shape="rectangle">
   <corners android:radius="@dimen/survey_shared_corner_radius" />
-  <solid android:color="@color/component_color_survey_primary_button_background_color" />
+  <solid android:color="@color/component_color_survey_green_button_color" />
   <stroke
     android:width="1dp"
-    android:color="@color/component_color_survey_shared_button_color" />
+    android:color="@color/component_color_survey_white_button_color" />
 </shape>
diff --git a/app/src/main/res/drawable/survey_confirmation_dialog_background.xml b/app/src/main/res/drawable/survey_confirmation_dialog_background.xml
@@ -2,7 +2,7 @@
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
   android:shape="rectangle">
   <corners android:radius="@dimen/survey_shared_corner_radius" />
-  <solid android:color="@color/component_color_shared_white_background_color" />
+  <solid android:color="@color/component_color_shared_screen_primary_background_color" />
   <stroke
     android:width="2dp"
     android:color="@color/component_color_survey_dialog_stroke_color" />

diff --git a/app/src/main/res/drawable/survey_next_button_background.xml b/app/src/main/res/drawable/survey_next_button_background.xml
diff --git a/app/src/main/res/drawable/survey_nps_radio_selected_color.xml b/app/src/main/res/drawable/survey_nps_radio_selected_color.xml
@@ -1,7 +1,7 @@
 <vector xmlns:android="http://schemas.android.com/apk/res/android"
   android:width="48dp"
   android:height="48dp"
-  android:tint="#15716A"
+  android:tint="@color/component_color_survey_nps_selected_background_color"
   android:viewportWidth="24.0"
   android:viewportHeight="24.0">
   <path

diff --git a/app/src/main/res/drawable/survey_nps_radio_text_color.xml b/app/src/main/res/drawable/survey_nps_radio_text_color.xml
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
-  <item android:color="@color/component_color_shared_secondary_4_text_color" android:state_enabled="true" />
-  <item android:color="@color/component_color_shared_active_text_color" android:state_enabled="false" />
+  <item android:color="@color/component_color_survey_nps_selected_text_color" android:state_enabled="true" />
+  <item android:color="@color/component_color_survey_nps_unselected_text_color" android:state_enabled="false" />
 </selector>
diff --git a/app/src/main/res/drawable/survey_nps_radio_unselected_color.xml b/app/src/main/res/drawable/survey_nps_radio_unselected_color.xml
@@ -1,7 +1,7 @@
 <vector xmlns:android="http://schemas.android.com/apk/res/android"
   android:width="48dp"
   android:height="48dp"
-  android:tint="#E2F5F4"
+  android:tint="@color/component_color_survey_nps_unselected_background_color"
   android:viewportWidth="24.0"
   android:viewportHeight="24.0">
   <path

diff --git a/app/src/main/res/drawable/survey_submit_button_background.xml b/app/src/main/res/drawable/survey_submit_button_background.xml
diff --git a/app/src/main/res/layout/survey_exit_confirmation_dialog.xml b/app/src/main/res/layout/survey_exit_confirmation_dialog.xml
@@ -11,7 +11,8 @@
       style="@style/SurveyQuestionTextStyle"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
-      android:layout_margin="@dimen/survey_question_text_margin"
+      android:layout_marginStart="@dimen/survey_question_text_margin"
+      android:layout_marginEnd="@dimen/survey_question_text_margin"
       android:text="@string/survey_exit_confirmation_text"
       app:layout_constraintTop_toTopOf="parent" />
 

diff --git a/app/src/main/res/layout/survey_fragment.xml b/app/src/main/res/layout/survey_fragment.xml
@@ -28,10 +28,10 @@
         android:id="@+id/survey_toolbar"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:background="@color/component_color_shared_secondary_toolbar_color"
+        android:background="@color/component_color_shared_activity_toolbar_color"
+        android:contentDescription="@string/survey_exit_button_description"
         android:minHeight="?attr/actionBarSize"
         android:theme="@style/Widget.AppCompat.ActionBar"
-        android:contentDescription="@string/survey_exit_button_description"
         app:navigationIcon="@drawable/ic_close_white_24dp">
 
         <LinearLayout
@@ -127,7 +127,7 @@
           style="@style/SurveyNextButton"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
-          android:background="@drawable/survey_next_button_background"
+          android:background="@{viewModel.canMoveToNextQuestion ? @drawable/state_button_primary_background : @drawable/state_button_inactive_background}"
           android:enabled="@{viewModel.canMoveToNextQuestion}"
           android:text="@string/next"
           android:textColor="@{viewModel.canMoveToNextQuestion ? @color/component_color_shared_secondary_4_text_color : @color/component_color_survey_disabled_button_text_color}"

diff --git a/app/src/main/res/layout/survey_free_form_layout.xml b/app/src/main/res/layout/survey_free_form_layout.xml
@@ -32,6 +32,7 @@
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_marginTop="@dimen/survey_navigation_buttons_margin"
+      android:background="@{viewModel.isAnswerAvailable() ? @drawable/state_button_primary_background : @drawable/state_button_inactive_background}"
       android:clickable="@{viewModel.isAnswerAvailable()}"
       android:enabled="@{viewModel.isAnswerAvailable()}"
       android:onClick="@{(v) ->viewModel.handleSubmitButtonClicked()}"

diff --git a/app/src/main/res/values-night/color_palette.xml b/app/src/main/res/values-night/color_palette.xml
@@ -204,4 +204,23 @@
   <color name="color_palette_onboarding_4_status_bar_color">@color/color_def_onboarding_4_status_bar</color>
   <color name="color_palette_coming_soon_rect_background_end_color">@color/color_def_grape_violet</color>
   <color name="color_palette_coming_soon_rect_background_start_color">@color/color_def_bright_violet</color>
+  <!-- SURVEY -->
+  <color name="color_palette_survey_background_color">@color/color_def_oppia_light_black</color>
+  <color name="color_palette_survey_shared_button_color">@color/color_def_white_f6</color>
+  <color name="color_palette_survey_previous_button_text_color">@color/color_def_dark_turquoise</color>
+  <color name="color_palette_survey_popup_header_color">@color/color_def_white_f5</color>
+  <color name="color_palette_survey_popup_background_color">@color/color_def_dark_green</color>
+  <color name="color_palette_survey_popup_message_color">@color/color_def_white</color>
+  <color name="color_palette_survey_white_button_color">@color/color_def_white_f6</color>
+  <color name="color_palette_survey_green_button_color">@color/color_def_dark_green</color>
+  <color name="color_palette_survey_dialog_stroke_color">@color/color_def_light_blue</color>
+  <color name="color_palette_survey_radio_button_color">@color/color_def_white</color>
+  <color name="color_palette_survey_disabled_button_color">@color/color_def_oppia_grayish_black</color>
+  <color name="color_palette_survey_disabled_button_text_color">@color/color_def_chooser_grey</color>
+  <color name="color_palette_button_text_color">@color/color_def_oppia_green</color>
+  <color name="color_palette_edit_text_unselected_color">@color/color_def_grey</color>
+  <color name="color_palette_nps_unselected_text_color">@color/color_def_dark_green</color>
+  <color name="color_palette_nps_selected_text_color">@color/color_def_white</color>
+  <color name="color_palette_nps_selected_background_color">@color/color_def_dark_green</color>
+  <color name="color_palette_nps_unselected_background_color">@color/color_def_pale_green</color>
 </resources>
diff --git a/app/src/main/res/values/color_defs.xml b/app/src/main/res/values/color_defs.xml
@@ -137,8 +137,8 @@
   <color name="color_def_avatar_background_22">#AB29CC</color>
   <color name="color_def_avatar_background_23">#CC29B1</color>
   <color name="color_def_avatar_background_24">#CC2970</color>
-  <color name="color_def_survey_background">#F5F5F5</color>
-  <color name="color_def_survey_buttons_white">#F6F6F6</color>
+  <color name="color_def_white_f5">#F5F5F5</color>
+  <color name="color_def_white_f6">#F6F6F6</color>
   <color name="color_def_light_blue">#BDCCCC</color>
 
   <color name="color_def_survey_disabled_button_grey">#E8E8E8</color>

diff --git a/app/src/main/res/values/color_palette.xml b/app/src/main/res/values/color_palette.xml
@@ -245,8 +245,18 @@
   <color name="color_palette_avatar_background_23_color">@color/color_def_avatar_background_23</color>
   <color name="color_palette_avatar_background_24_color">@color/color_def_avatar_background_24</color>
   <!-- SURVEY -->
-  <color name="color_palette_survey_background_color">@color/color_def_survey_background</color>
-  <color name="color_palette_survey_shared_button_color">@color/color_def_survey_buttons_white</color>
+  <color name="color_palette_survey_background_color">@color/color_def_white_f5</color>
+  <color name="color_palette_survey_shared_button_color">@color/color_def_white_f6</color>
+  <color name="color_palette_survey_previous_button_text_color">@color/color_def_oppia_green</color>
+  <color name="color_palette_survey_popup_header_color">@color/color_def_oppia_green</color>
+  <color name="color_palette_survey_popup_background_color">@color/color_def_oppia_green</color>
+  <color name="color_palette_survey_popup_message_color">@color/color_def_white</color>
+  <color name="color_palette_survey_white_button_color">@color/color_def_white_f6</color>
+  <color name="color_palette_survey_green_button_color">@color/color_def_oppia_green</color>
+  <color name="color_palette_nps_unselected_text_color">@color/color_def_oppia_green</color>
+  <color name="color_palette_nps_selected_text_color">@color/color_def_white</color>
+  <color name="color_palette_nps_selected_background_color">@color/color_def_oppia_green</color>
+  <color name="color_palette_nps_unselected_background_color">@color/color_def_pale_green</color>
   <color name="color_palette_survey_dialog_stroke_color">@color/color_def_light_blue</color>
   <color name="color_palette_survey_radio_button_color">@color/color_def_accessible_grey</color>
   <color name="color_palette_survey_disabled_button_color">@color/color_def_survey_disabled_button_grey</color>

diff --git a/app/src/main/res/values/component_colors.xml b/app/src/main/res/values/component_colors.xml
@@ -280,7 +280,17 @@
   <!-- Survey Activity -->
   <color name="component_color_survey_background_color">@color/color_palette_survey_background_color</color>
   <color name="component_color_survey_shared_button_color">@color/color_palette_survey_shared_button_color</color>
-  <color name="component_color_survey_onboarding_background_color">@color/color_palette_primary_color</color>
+  <color name="component_color_survey_previous_button_text_color">@color/color_palette_survey_previous_button_text_color</color>
+  <color name="component_color_survey_popup_header_text_color">@color/color_palette_survey_popup_header_color</color>
+  <color name="component_color_survey_popup_message_color">@color/color_palette_survey_popup_message_color</color>
+  <color name="component_color_survey_popup_background_color">@color/color_palette_survey_popup_background_color</color>
+  <color name="component_color_survey_white_button_color">@color/color_palette_survey_shared_button_color</color>
+  <color name="component_color_survey_green_button_color">@color/color_palette_survey_green_button_color</color>
+  <color name="component_color_survey_progress_bar_color">@color/color_palette_toolbar_color</color>
+  <color name="component_color_survey_nps_unselected_text_color">@color/color_palette_nps_unselected_text_color</color>
+  <color name="component_color_survey_nps_selected_text_color">@color/color_palette_nps_selected_text_color</color>
+  <color name="component_color_survey_nps_unselected_background_color">@color/color_palette_nps_unselected_background_color</color>
+  <color name="component_color_survey_nps_selected_background_color">@color/color_palette_nps_selected_background_color</color>
   <color name="component_color_survey_primary_button_background_color">@color/color_palette_primary_color</color>
   <color name="component_color_survey_dialog_stroke_color">@color/color_palette_survey_dialog_stroke_color</color>
   <color name="component_color_survey_radio_button_unchecked_color">@color/color_palette_survey_radio_button_color</color>

diff --git a/app/src/main/res/values/styles.xml b/app/src/main/res/values/styles.xml
@@ -558,7 +558,7 @@
     <item name="android:fontFamily">sans-serif-medium</item>
     <item name="android:minHeight">@dimen/clickable_item_min_height</item>
     <item name="android:textAllCaps">true</item>
-    <item name="android:textColor">@color/component_color_shared_secondary_button_background_trim_color</item>
+    <item name="android:textColor">@color/component_color_survey_previous_button_text_color</item>
     <item name="android:textSize">14sp</item>
   </style>
 
@@ -568,6 +568,7 @@
     <item name="android:gravity">center</item>
     <item name="android:minWidth">144dp</item>
     <item name="android:layout_margin">@dimen/survey_navigation_buttons_margin</item>
+    <item name="android:background">@drawable/state_button_primary_background</item>
     <item name="android:fontFamily">sans-serif-medium</item>
     <item name="android:minHeight">@dimen/clickable_item_min_height</item>
     <item name="android:textAllCaps">true</item>
@@ -580,7 +581,7 @@
     <item name="android:paddingEnd">12dp</item>
     <item name="android:paddingStart">12dp</item>
     <item name="android:minWidth">144dp</item>
-    <item name="android:background">@drawable/survey_submit_button_background</item>
+    <item name="android:background">@drawable/state_button_primary_background</item>
     <item name="android:fontFamily">sans-serif-medium</item>
     <item name="android:minHeight">@dimen/clickable_item_min_height</item>
     <item name="android:textAllCaps">true</item>
@@ -612,7 +613,7 @@
   <style name="SurveyPopupHeaderStyle" parent="TextViewCenterHorizontal">
     <item name="android:layout_width">wrap_content</item>
     <item name="android:layout_height">wrap_content</item>
-    <item name="android:textColor">@color/component_color_shared_active_text_color</item>
+    <item name="android:textColor">@color/component_color_survey_popup_header_text_color</item>
     <item name="android:layout_margin">@dimen/survey_text_margin</item>
     <item name="android:textSize">@dimen/survey_popup_header_text_size</item>
     <item name="android:fontFamily">sans-serif</item>
@@ -621,7 +622,7 @@
   <style name="SurveyPopupMessageStyle" parent="TextViewStart">
     <item name="android:layout_width">match_parent</item>
     <item name="android:layout_height">wrap_content</item>
-    <item name="android:textColor">@color/component_color_shared_secondary_4_text_color</item>
+    <item name="android:textColor">@color/component_color_survey_popup_message_color</item>
     <item name="android:layout_margin">@dimen/survey_popup_message_margin</item>
     <item name="android:textSize">@dimen/survey_popup_message_text_size</item>
     <item name="android:fontFamily">sans-serif</item>
@@ -648,7 +649,7 @@
     <item name="android:windowIsFloating">false</item>
     <!-- This is important! Don't forget to set window background -->
     <item name="android:windowIsTranslucent">false</item>
-    <item name="android:windowBackground">@color/color_palette_shared_white_background_color</item>
+    <item name="android:windowBackground">@color/component_color_survey_background_color</item>
     <!-- Additionally if you want animations when dialog opening -->
     <item name="android:windowEnterAnimation">@anim/slide_up</item>
     <item name="android:windowExitAnimation">@anim/slide_down</item>