Fix background color of reactions.

CHANGES.md

@@ -12,6 +12,7 @@ Improvements 🙌:
  - Use Hardware keyboard enter to send message (use shift-enter for new line) (#1881, #1440)
  - Edit and remove icons are now visible on image attachment preview screen (#2294)
  - Room profile: BigImageViewerActivity now only display the image. Use the room setting to change or delete the room Avatar
+ - Better visibility of text reactions in dark theme (#1118)
 
 Bugfix 🐛:
  - Messages encrypted with no way to decrypt after SDK update from 0.18 to 1.0.0 (#2252)

vector/src/main/java/im/vector/app/features/reactions/widget/ReactionButton.kt

@@ -112,8 +112,8 @@ class ReactionButton @JvmOverloads constructor(context: Context,
 
 //        emojiView?.typeface = this.emojiTypeFace ?: Typeface.DEFAULT
         context.withStyledAttributes(attrs, R.styleable.ReactionButton, defStyleAttr) {
-            onDrawable = ContextCompat.getDrawable(context, R.drawable.rounded_rect_shape)
+            onDrawable = ContextCompat.getDrawable(context, R.drawable.reaction_rounded_rect_shape)
-            offDrawable = ContextCompat.getDrawable(context, R.drawable.rounded_rect_shape_off)
+            offDrawable = ContextCompat.getDrawable(context, R.drawable.reaction_rounded_rect_shape_off)
 
             circleStartColor = getColor(R.styleable.ReactionButton_circle_start_color, 0)
 

vector/src/main/res/drawable/reaction_rounded_rect_shape.xml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+
+    <solid android:color="?riotx_reaction_background_on" />
+
+    <stroke android:width="1dp" android:color="@color/accent_color_light" />
+
+    <corners android:radius="20dp" />
+
+</shape>

vector/src/main/res/drawable/reaction_rounded_rect_shape_off.xml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+
+    <size android:width="40dp" android:height="22dp"/>
+
+    <solid android:color="?riotx_reaction_background_off" />
+
+    <corners android:radius="20dp" />
+
+</shape>

vector/src/main/res/layout/reaction_button.xml

@@ -5,7 +5,7 @@
     android:id="@+id/reactionSelector"
     android:layout_width="wrap_content"
     android:layout_height="26dp"
-    android:background="@drawable/rounded_rect_shape"
+    android:background="@drawable/reaction_rounded_rect_shape"
     android:clipChildren="false"
     android:minWidth="44dp">
 

vector/src/main/res/values/colors_riotx.xml

@@ -229,6 +229,16 @@
     <color name="riotx_list_bottom_sheet_divider_color_dark">#7F61708B</color>
     <color name="riotx_list_bottom_sheet_divider_color_black">#FF22262E</color>
 
+    <attr name="riotx_reaction_background_off" format="color" />
+    <color name="riotx_reaction_background_off_light">#FFF3F8FD</color>
+    <color name="riotx_reaction_background_off_dark">#22252B</color>
+    <color name="riotx_reaction_background_off_black">#22252B</color>
+
+    <attr name="riotx_reaction_background_on" format="color" />
+    <color name="riotx_reaction_background_on_light">#2011BC8A</color>
+    <color name="riotx_reaction_background_on_dark">#4011BC8A</color>
+    <color name="riotx_reaction_background_on_black">#4011BC8A</color>
+
     <!-- (color from RiotWeb) -->
     <attr name="riotx_keys_backup_banner_accent_color" format="color" />
     <color name="riotx_keys_backup_banner_accent_color_light">#FFF8E3</color>

vector/src/main/res/values/theme_black.xml

@@ -36,6 +36,8 @@
         <item name="riotx_attachment_selector_border">@color/riotx_attachment_selector_border_black</item>
         <item name="riotx_room_active_widgets_banner_bg">@color/riotx_room_active_widgets_banner_bg_black</item>
         <item name="riotx_room_active_widgets_banner_text">@color/riotx_room_active_widgets_banner_text_black</item>
+        <item name="riotx_reaction_background_off">@color/riotx_reaction_background_off_black</item>
+        <item name="riotx_reaction_background_on">@color/riotx_reaction_background_on_black</item>
 
         <item name="riotx_bottom_nav_icon_color">@color/riotx_bottom_nav_icon_color_black</item>
 

vector/src/main/res/values/theme_dark.xml

@@ -34,6 +34,8 @@
         <item name="riotx_attachment_selector_border">@color/riotx_attachment_selector_border_dark</item>
         <item name="riotx_room_active_widgets_banner_bg">@color/riotx_room_active_widgets_banner_bg_dark</item>
         <item name="riotx_room_active_widgets_banner_text">@color/riotx_room_active_widgets_banner_text_dark</item>
+        <item name="riotx_reaction_background_off">@color/riotx_reaction_background_off_dark</item>
+        <item name="riotx_reaction_background_on">@color/riotx_reaction_background_on_dark</item>
 
         <item name="riotx_bottom_nav_icon_color">@color/riotx_bottom_nav_icon_color_dark</item>
 

vector/src/main/res/values/theme_light.xml

@@ -35,6 +35,8 @@
         <item name="riotx_attachment_selector_border">@color/riotx_attachment_selector_border_light</item>
         <item name="riotx_room_active_widgets_banner_bg">@color/riotx_room_active_widgets_banner_bg_light</item>
         <item name="riotx_room_active_widgets_banner_text">@color/riotx_room_active_widgets_banner_text_light</item>
+        <item name="riotx_reaction_background_off">@color/riotx_reaction_background_off_light</item>
+        <item name="riotx_reaction_background_on">@color/riotx_reaction_background_on_light</item>
 
         <item name="riotx_bottom_nav_icon_color">@color/riotx_bottom_nav_icon_color_light</item>