Effective UI in nightmode (#2574)

* change bookmarks row button color * achievement_background * Change UI for nightmode * revert first commit, change color of buttons in bottom_sheet in night mode
commons-app · Mar 11, 2019 · 0a3d8c0 · 0a3d8c0
1 parent d1a7b2c
commit 0a3d8c0
Show file tree

Hide file tree

Showing 16 changed files with 49 additions and 19 deletions.
diff --git a/app/src/main/res/layout-land/welcome_do_upload.xml b/app/src/main/res/layout-land/welcome_do_upload.xml
@@ -5,7 +5,7 @@
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     xmlns:app="http://schemas.android.com/apk/res-auto"
-    android:background="#0c609c"
+    android:background="?attr/tutorialBackground"
     android:gravity="center"
     android:orientation="horizontal">
 

diff --git a/app/src/main/res/layout-land/welcome_dont_upload.xml b/app/src/main/res/layout-land/welcome_dont_upload.xml
@@ -4,7 +4,7 @@
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     xmlns:app="http://schemas.android.com/apk/res-auto"
-    android:background="#0c609c">
+    android:background="?attr/tutorialBackground">
 
     <android.support.constraint.Guideline
         android:id="@+id/center_guideline"

diff --git a/app/src/main/res/layout-land/welcome_final.xml b/app/src/main/res/layout-land/welcome_final.xml
@@ -4,7 +4,7 @@
               android:orientation="vertical"
               android:layout_width="match_parent"
               android:layout_height="match_parent"
-              android:background="#0c609c"
+              android:background="?attr/tutorialBackground"
 
         >
     <TextView

diff --git a/app/src/main/res/layout-land/welcome_image_details.xml b/app/src/main/res/layout-land/welcome_image_details.xml
@@ -4,7 +4,7 @@
     xmlns:app="http://schemas.android.com/apk/res-auto"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    android:background="#0c609c"
+    android:background="?attr/tutorialBackground"
     android:gravity="center"
     android:orientation="horizontal">
 

diff --git a/app/src/main/res/layout-land/welcome_wikipedia.xml b/app/src/main/res/layout-land/welcome_wikipedia.xml
@@ -5,7 +5,7 @@
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    android:background="#0c609c">
+    android:background="?attr/tutorialBackground">
 
     <android.support.constraint.Guideline
         android:id="@+id/center_guideline"

diff --git a/app/src/main/res/layout/activity_achievements.xml b/app/src/main/res/layout/activity_achievements.xml
@@ -37,7 +37,7 @@
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 android:layout_below="@+id/toolbar"
-                android:background="@color/layout_light_grey"
+                android:background="?attr/achievementBackground"
                 android:orientation="vertical">
 
                 <TextView
@@ -60,6 +60,7 @@
                     android:layout_alignParentRight="true"
                     android:layout_alignParentEnd="true"
                     app:srcCompat="@drawable/ic_info_outline_black_24dp"
+                    android:tint="?attr/icon"
                     android:layout_marginVertical="@dimen/activity_margin_vertical" />
 
                 <ImageView
@@ -100,6 +101,7 @@
                         android:layout_toRightOf="@+id/images_upload_text_param"
                         android:layout_toEndOf="@+id/images_upload_text_param"
                         app:srcCompat="@drawable/ic_info_outline_blue_24dp"
+                        android:tint="?attr/icon"
                         android:layout_marginLeft="8dp"
                         android:layout_marginStart="8dp"/>
 
@@ -152,6 +154,7 @@
                         android:layout_toRightOf="@+id/images_reverted_text"
                         android:layout_toEndOf="@+id/images_reverted_text"
                         app:srcCompat="@drawable/ic_info_outline_blue_24dp"
+                        android:tint="?attr/icon"
                         android:layout_marginLeft="8dp"
                         android:layout_marginStart="8dp"/>
 
@@ -216,6 +219,7 @@
                         android:layout_toRightOf="@+id/images_used_by_wiki_text"
                         android:layout_toEndOf="@+id/images_used_by_wiki_text"
                         app:srcCompat="@drawable/ic_info_outline_blue_24dp"
+                        android:tint="?attr/icon"
                         android:layout_marginLeft="8dp"
                         android:layout_marginStart="8dp"/>
 

diff --git a/app/src/main/res/layout/bottom_sheet_details.xml b/app/src/main/res/layout/bottom_sheet_details.xml
@@ -77,7 +77,7 @@
                 android:layout_height="wrap_content"
                 android:layout_gravity="center_horizontal"
                 app:srcCompat="@drawable/ic_round_star_border_24px"
-                android:tint="@color/button_blue"/>
+                android:tint="?attr/rowButtonColor"/>
             <TextView
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
@@ -104,7 +104,9 @@
                 android:layout_height="wrap_content"
                 android:layout_gravity="center_horizontal"
                 android:duplicateParentState="true"
-                app:srcCompat="@drawable/ic_directions_black_24dp" />
+                app:srcCompat="@drawable/ic_directions_black_24dp"
+                android:tint="?attr/rowButtonColor"
+                />
             <TextView
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
@@ -131,7 +133,8 @@
                 android:layout_height="wrap_content"
                 android:layout_gravity="center_horizontal"
                 android:duplicateParentState="true"
-                app:srcCompat="@drawable/ic_wikidata_logo_24dp" />
+                app:srcCompat="@drawable/ic_wikidata_logo_24dp"
+                android:tint="?attr/rowButtonColor"/>
             <TextView
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
@@ -160,6 +163,7 @@
                 android:layout_gravity="center_horizontal"
                 android:duplicateParentState="true"
                 app:srcCompat="@drawable/ic_wikipedia_logo_24dp"
+                android:tint="?attr/rowButtonColor"
                 />
             <TextView
                 android:layout_width="wrap_content"

diff --git a/app/src/main/res/layout/drawer_header.xml b/app/src/main/res/layout/drawer_header.xml
@@ -4,13 +4,13 @@
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_height="match_parent"
     android:layout_width="match_parent"
-    android:background="@android:color/darker_gray">
+    android:background="?attr/drawerHeaderBackground">
 
     <ImageView
         android:id="@+id/pictureOfTheDay"
         android:layout_width="match_parent"
         android:layout_height="172dp"
-        android:background="@android:color/darker_gray"
+        android:background="?attr/drawerHeaderBackground"
         android:paddingLeft="@dimen/standard_gap"
         android:paddingTop="@dimen/standard_gap"
         android:paddingRight="@dimen/standard_gap"

diff --git a/app/src/main/res/layout/welcome_do_upload.xml b/app/src/main/res/layout/welcome_do_upload.xml
@@ -3,15 +3,15 @@
     android:orientation="vertical"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    android:background="#0c609c"
+    android:background="?attr/tutorialBackground"
     android:gravity="center"
     android:weightSum="1"
     android:layout_centerHorizontal="true">
     <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
         android:orientation="vertical"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
-        android:background="#0c609c"
+        android:background="?attr/tutorialBackground"
         android:gravity="center_vertical"
         >
 

diff --git a/app/src/main/res/layout/welcome_dont_upload.xml b/app/src/main/res/layout/welcome_dont_upload.xml
@@ -3,14 +3,14 @@
     android:orientation="vertical"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    android:background="#0c609c"
+    android:background="?attr/tutorialBackground"
     android:gravity="center_vertical"
     >
     <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
         android:orientation="vertical"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
-        android:background="#0c609c"
+        android:background="?attr/tutorialBackground"
         android:gravity="center_vertical"
         >
 

diff --git a/app/src/main/res/layout/welcome_final.xml b/app/src/main/res/layout/welcome_final.xml
@@ -3,7 +3,7 @@
     android:orientation="vertical"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    android:background="#0c609c"
+    android:background="?attr/tutorialBackground"
     >
 
     <LinearLayout

diff --git a/app/src/main/res/layout/welcome_image_details.xml b/app/src/main/res/layout/welcome_image_details.xml
@@ -10,7 +10,7 @@
         android:orientation="vertical"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
-        android:background="#0c609c"
+        android:background="?attr/tutorialBackground"
         android:gravity="center_vertical"
         >
     <ImageView

diff --git a/app/src/main/res/layout/welcome_wikipedia.xml b/app/src/main/res/layout/welcome_wikipedia.xml
@@ -3,14 +3,14 @@
     android:orientation="vertical"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    android:background="#0c609c"
+    android:background="?attr/tutorialBackground"
     android:gravity="center_vertical"
     >
     <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
         android:orientation="vertical"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
-        android:background="#0c609c"
+        android:background="?attr/tutorialBackground"
         android:gravity="center_vertical"
         >
 

diff --git a/app/src/main/res/values/attrs.xml b/app/src/main/res/values/attrs.xml
@@ -15,11 +15,16 @@
     <attr name="buttonPressed" format="reference"/>
     <attr name="textDisabled" format="reference"/>
     <attr name="textEnabled" format="reference"/>
+    <attr name="rowButtonColor" format="reference"/>
 
     <attr name="contributionsListBackground" format="reference"/>
+    <attr name="achievementBackground" format="reference"/>
+    <attr name="drawerHeaderBackground" format="reference"/>
+    <attr name="tutorialBackground" format="reference"/>
     <attr name="mainTabBackground" format="reference"/>
     <attr name="mainCardBackground" format="reference"/>
     <attr name="mainScreenNearbyPermissionbutton" format="reference"/>
+    <attr name="icon" format="reference"/>
 
 
     <declare-styleable name="CompatTextView">

diff --git a/app/src/main/res/values/colors.xml b/app/src/main/res/values/colors.xml
@@ -3,6 +3,12 @@
     <!-- Main application background color -->
     <color name="main_background_dark">#303030</color>
     <color name="main_background_light">#fafafa</color>
+    <color name="achievement_background_dark">#494949</color>
+    <color name="achievement_background_light">#D6DCE0</color>
+    <color name="drawerHeader_background_dark">#494949</color>
+    <color name="drawerHeader_background_light">#aaaaaa</color>
+    <color name="tutorial_background_dark">#303030</color>
+    <color name="tutorial_background_light">#0c609c</color>
     <color name="divider_grey">#eaeaea</color>
     <color name="contributionListDarkBackground">#1a1a1a</color>
 
@@ -49,6 +55,7 @@
     <color name="enabled_button_text_color_dark">#FFFFFF</color>
 
     <color name="button_blue">#0c609c</color>
+    <color name="button_blue_dark">#116aaa</color>
 
     <color name="bottom_bar_light">#E0E0E0</color>
     <color name="bottom_bar_dark">#424242</color>

diff --git a/app/src/main/res/values/styles.xml b/app/src/main/res/values/styles.xml
@@ -4,10 +4,15 @@
         <item name="contributionsListBackground">@color/contributionListDarkBackground</item>
         <item name="mainTabBackground">@color/contributionListDarkBackground</item>
         <item name="mainBackground">@color/main_background_dark</item>
+        <item name="achievementBackground">@color/achievement_background_dark</item>
+        <item name="drawerHeaderBackground">@color/drawerHeader_background_dark</item>
+        <item name="tutorialBackground">@color/tutorial_background_dark</item>
+        <item name="icon">@color/primaryTextColor</item>
         <item name="colorPrimary">@color/primaryColor</item>
         <item name="colorPrimaryDark">@color/primaryDarkColor</item>
         <item name="colorAccent">@color/white</item>
         <item name="colorButtonNormal">@color/primaryColor</item>
+        <item name="rowButtonColor">@color/button_blue_dark</item>
 
         <item name="semitransparentText">@color/commons_app_blue_dark</item>
         <item name="subBackground">@color/sub_background_dark</item>
@@ -29,9 +34,14 @@
         <item name="contributionsListBackground">@color/white</item>
         <item name="mainTabBackground">@color/primaryColor</item>
         <item name="mainBackground">@color/main_background_light</item>
+        <item name="achievementBackground">@color/achievement_background_light</item>
+        <item name="drawerHeaderBackground">@color/drawerHeader_background_light</item>
+        <item name="tutorialBackground">@color/tutorial_background_light</item>
+        <item name="icon">@color/secondaryTextColor</item>
         <item name="colorPrimaryDark">@color/primaryDarkColor</item>
         <item name="colorAccent">@color/primaryColor</item>
         <item name="colorButtonNormal">@color/primaryColor</item>
+        <item name="rowButtonColor">@color/button_blue</item>
 
         <item name="semitransparentText">@color/commons_app_blue_light</item>
         <item name="subBackground">@color/sub_background_light</item>