From 51f5594ea0309cf03b034cd41920d28804a705e9 Mon Sep 17 00:00:00 2001
From: Benoit Marty <benoit@matrix.org>
Date: Wed, 5 Jun 2019 14:31:11 +0200
Subject: [PATCH] Theme rework WIP

---
 .../features/home/AvatarRenderer.kt           |  6 +-
 .../riotredesign/features/home/UserColor.kt   | 18 ++--
 .../main/res/layout/activity_bug_report.xml   |  5 +-
 .../layout/activity_emoji_reaction_picker.xml |  3 +-
 .../layout/activity_image_media_viewer.xml    |  5 +-
 vector/src/main/res/layout/activity_login.xml |  3 +
 .../res/layout/activity_vector_settings.xml   |  4 +-
 .../layout/activity_video_media_viewer.xml    |  6 +-
 .../res/layout/dialog_change_password.xml     |  3 +
 .../main/res/layout/fragment_home_detail.xml  |  8 +-
 .../main/res/layout/fragment_home_drawer.xml  |  2 +-
 .../main/res/layout/fragment_public_rooms.xml |  9 +-
 .../main/res/layout/fragment_room_detail.xml  | 11 +--
 .../layout/fragment_room_directory_picker.xml |  1 +
 .../fragment_room_preview_no_preview.xml      |  7 +-
 ...nt_settings_notifications_troubleshoot.xml |  4 +-
 .../src/main/res/layout/item_error_retry.xml  |  1 -
 vector/src/main/res/layout/item_group.xml     |  3 +-
 .../layout/item_notification_troubleshoot.xml |  2 +-
 .../item_timeline_event_text_message_stub.xml |  2 +-
 .../main/res/layout/vector_invite_view.xml    |  2 +-
 .../src/main/res/layout/view_button_state.xml | 14 ++-
 .../src/main/res/values-v21/theme_light.xml   |  7 +-
 .../src/main/res/values-v23/theme_light.xml   | 15 +++
 .../src/main/res/values-v27/theme_light.xml   | 10 ++
 vector/src/main/res/values/colors.xml         |  4 +-
 vector/src/main/res/values/colors_riot.xml    | 17 +---
 vector/src/main/res/values/colors_riotx.xml   | 99 +++++++++++++++++++
 vector/src/main/res/values/styles_riot.xml    | 43 ++++----
 vector/src/main/res/values/styles_widget.xml  | 12 ---
 vector/src/main/res/values/theme_common.xml   | 11 +++
 vector/src/main/res/values/theme_light.xml    | 31 ++++--
 vector/src/main/res/values/theme_status.xml   |  2 -
 33 files changed, 243 insertions(+), 127 deletions(-)
 create mode 100644 vector/src/main/res/values-v23/theme_light.xml
 create mode 100644 vector/src/main/res/values-v27/theme_light.xml
 create mode 100644 vector/src/main/res/values/colors_riotx.xml
 delete mode 100644 vector/src/main/res/values/styles_widget.xml
 create mode 100644 vector/src/main/res/values/theme_common.xml

diff --git a/vector/src/main/java/im/vector/riotredesign/features/home/AvatarRenderer.kt b/vector/src/main/java/im/vector/riotredesign/features/home/AvatarRenderer.kt
index be16ac5ca4..7975206f50 100644
--- a/vector/src/main/java/im/vector/riotredesign/features/home/AvatarRenderer.kt
+++ b/vector/src/main/java/im/vector/riotredesign/features/home/AvatarRenderer.kt
@@ -45,9 +45,9 @@ object AvatarRenderer {
     private const val THUMBNAIL_SIZE = 250
 
     private val AVATAR_COLOR_LIST = listOf(
-            R.color.avatar_color_1,
-            R.color.avatar_color_2,
-            R.color.avatar_color_3
+            R.color.riotx_avatar_fill_1,
+            R.color.riotx_avatar_fill_2,
+            R.color.riotx_avatar_fill_3
     )
 
     @UiThread
diff --git a/vector/src/main/java/im/vector/riotredesign/features/home/UserColor.kt b/vector/src/main/java/im/vector/riotredesign/features/home/UserColor.kt
index 8e26bf30bb..bd3f60f477 100644
--- a/vector/src/main/java/im/vector/riotredesign/features/home/UserColor.kt
+++ b/vector/src/main/java/im/vector/riotredesign/features/home/UserColor.kt
@@ -23,7 +23,7 @@ import im.vector.riotredesign.R
 @ColorRes
 fun getColorFromUserId(userId: String?): Int {
     if (userId.isNullOrBlank()) {
-        return R.color.username_1
+        return R.color.riotx_username_1
     }
 
     var hash = 0
@@ -37,13 +37,13 @@ fun getColorFromUserId(userId: String?): Int {
     }
 
     return when (Math.abs(hash) % 8 + 1) {
-        1    -> R.color.username_1
-        2    -> R.color.username_2
-        3    -> R.color.username_3
-        4    -> R.color.username_4
-        5    -> R.color.username_5
-        6    -> R.color.username_6
-        7    -> R.color.username_7
-        else -> R.color.username_8
+        1    -> R.color.riotx_username_1
+        2    -> R.color.riotx_username_2
+        3    -> R.color.riotx_username_3
+        4    -> R.color.riotx_username_4
+        5    -> R.color.riotx_username_5
+        6    -> R.color.riotx_username_6
+        7    -> R.color.riotx_username_7
+        else -> R.color.riotx_username_8
     }
 }
\ No newline at end of file
diff --git a/vector/src/main/res/layout/activity_bug_report.xml b/vector/src/main/res/layout/activity_bug_report.xml
index 4d87ced748..b7727f0363 100644
--- a/vector/src/main/res/layout/activity_bug_report.xml
+++ b/vector/src/main/res/layout/activity_bug_report.xml
@@ -7,9 +7,9 @@
 
     <androidx.appcompat.widget.Toolbar
         android:id="@+id/bugReportToolbar"
-        style="@style/VectorToolbarStyle"
         android:layout_width="match_parent"
-        android:layout_height="wrap_content" />
+        android:layout_height="wrap_content"
+        android:elevation="4dp" />
 
     <LinearLayout
         android:id="@+id/bug_report_body_view"
@@ -68,6 +68,7 @@
                     android:text="@string/send_bug_report_description" />
 
                 <com.google.android.material.textfield.TextInputLayout
+                    style="@style/VectorTextInputLayout"
                     android:layout_width="match_parent"
                     android:layout_height="wrap_content"
                     android:layout_marginStart="10dp"
diff --git a/vector/src/main/res/layout/activity_emoji_reaction_picker.xml b/vector/src/main/res/layout/activity_emoji_reaction_picker.xml
index 4744931b69..38694933b3 100644
--- a/vector/src/main/res/layout/activity_emoji_reaction_picker.xml
+++ b/vector/src/main/res/layout/activity_emoji_reaction_picker.xml
@@ -26,8 +26,7 @@
             android:elevation="4dp"
             android:minHeight="0dp"
             android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
-            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap|enterAlways"
-            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
+            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap|enterAlways" />
 
         <com.google.android.material.tabs.TabLayout
             android:id="@+id/tabs"
diff --git a/vector/src/main/res/layout/activity_image_media_viewer.xml b/vector/src/main/res/layout/activity_image_media_viewer.xml
index 3644714bd1..194b9d6066 100644
--- a/vector/src/main/res/layout/activity_image_media_viewer.xml
+++ b/vector/src/main/res/layout/activity_image_media_viewer.xml
@@ -7,12 +7,9 @@
 
     <androidx.appcompat.widget.Toolbar
         android:id="@+id/imageMediaViewerToolbar"
-        style="@style/VectorToolbarStyle"
         android:layout_width="match_parent"
         android:layout_height="?attr/actionBarSize"
-        android:background="?attr/colorPrimary"
-        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
-        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />
+        android:elevation="4dp" />
 
     <com.github.piasy.biv.view.BigImageView
         android:id="@+id/imageMediaViewerImageView"
diff --git a/vector/src/main/res/layout/activity_login.xml b/vector/src/main/res/layout/activity_login.xml
index c86ee6dc36..6644111360 100644
--- a/vector/src/main/res/layout/activity_login.xml
+++ b/vector/src/main/res/layout/activity_login.xml
@@ -29,6 +29,7 @@
                 android:src="@drawable/logo_login" />
 
             <com.google.android.material.textfield.TextInputLayout
+                style="@style/VectorTextInputLayout"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 android:layout_marginTop="16dp"
@@ -48,6 +49,7 @@
                 android:orientation="horizontal">
 
                 <com.google.android.material.textfield.TextInputLayout
+                    style="@style/VectorTextInputLayout"
                     android:layout_width="0dp"
                     android:layout_height="wrap_content"
                     android:layout_marginTop="16dp"
@@ -76,6 +78,7 @@
             </LinearLayout>
 
             <com.google.android.material.textfield.TextInputLayout
+                style="@style/VectorTextInputLayout"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 android:layout_marginTop="16dp"
diff --git a/vector/src/main/res/layout/activity_vector_settings.xml b/vector/src/main/res/layout/activity_vector_settings.xml
index 85954282d9..55716157e1 100755
--- a/vector/src/main/res/layout/activity_vector_settings.xml
+++ b/vector/src/main/res/layout/activity_vector_settings.xml
@@ -11,9 +11,9 @@
 
         <androidx.appcompat.widget.Toolbar
             android:id="@+id/settingsToolbar"
-            style="@style/VectorToolbarStyle"
             android:layout_width="match_parent"
-            android:layout_height="wrap_content" />
+            android:layout_height="wrap_content"
+            android:elevation="4dp" />
 
         <FrameLayout
             android:id="@+id/vector_settings_page"
diff --git a/vector/src/main/res/layout/activity_video_media_viewer.xml b/vector/src/main/res/layout/activity_video_media_viewer.xml
index c45a90cf99..e1f243b5c2 100644
--- a/vector/src/main/res/layout/activity_video_media_viewer.xml
+++ b/vector/src/main/res/layout/activity_video_media_viewer.xml
@@ -15,19 +15,15 @@
   -->
 
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:app="http://schemas.android.com/apk/res-auto"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:orientation="vertical">
 
     <androidx.appcompat.widget.Toolbar
         android:id="@+id/videoMediaViewerToolbar"
-        style="@style/VectorToolbarStyle"
         android:layout_width="match_parent"
         android:layout_height="?attr/actionBarSize"
-        android:background="?attr/colorPrimary"
-        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
-        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />
+        android:elevation="4dp" />
 
     <FrameLayout
         android:layout_width="match_parent"
diff --git a/vector/src/main/res/layout/dialog_change_password.xml b/vector/src/main/res/layout/dialog_change_password.xml
index 9fa28afd03..925859bcd1 100644
--- a/vector/src/main/res/layout/dialog_change_password.xml
+++ b/vector/src/main/res/layout/dialog_change_password.xml
@@ -37,6 +37,7 @@
 
     <com.google.android.material.textfield.TextInputLayout
         android:id="@+id/change_password_old_pwd_til"
+        style="@style/VectorTextInputLayout"
         android:layout_width="match_parent"
         android:layout_height="wrap_content">
 
@@ -50,6 +51,7 @@
     </com.google.android.material.textfield.TextInputLayout>
 
     <com.google.android.material.textfield.TextInputLayout
+        style="@style/VectorTextInputLayout"
         android:layout_width="match_parent"
         android:layout_height="wrap_content">
 
@@ -64,6 +66,7 @@
 
     <com.google.android.material.textfield.TextInputLayout
         android:id="@+id/change_password_confirm_new_pwd_til"
+        style="@style/VectorTextInputLayout"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         app:errorEnabled="true">
diff --git a/vector/src/main/res/layout/fragment_home_detail.xml b/vector/src/main/res/layout/fragment_home_detail.xml
index 1c50543622..3867680f50 100644
--- a/vector/src/main/res/layout/fragment_home_detail.xml
+++ b/vector/src/main/res/layout/fragment_home_detail.xml
@@ -8,16 +8,12 @@
 
     <androidx.appcompat.widget.Toolbar
         android:id="@+id/groupToolbar"
-        style="@style/VectorToolbarStyle"
         android:layout_width="match_parent"
         android:layout_height="?attr/actionBarSize"
-        android:background="#FFFFFF"
         android:elevation="4dp"
         app:contentInsetStartWithNavigation="0dp"
         app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintTop_toTopOf="parent"
-        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
-        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
+        app:layout_constraintTop_toTopOf="parent">
 
         <LinearLayout
             android:layout_width="match_parent"
@@ -39,7 +35,7 @@
                 android:layout_marginEnd="32dp"
                 android:ellipsize="end"
                 android:maxLines="1"
-                android:textColor="@color/dark_grey"
+                android:textColor="?vctr_toolbar_primary_text_color"
                 android:textSize="20sp"
                 android:textStyle="bold"
                 tools:text="@tools:sample/lorem/random" />
diff --git a/vector/src/main/res/layout/fragment_home_drawer.xml b/vector/src/main/res/layout/fragment_home_drawer.xml
index 8bbd52c2be..7e7caf9c80 100644
--- a/vector/src/main/res/layout/fragment_home_drawer.xml
+++ b/vector/src/main/res/layout/fragment_home_drawer.xml
@@ -11,7 +11,7 @@
         android:id="@+id/homeDrawerHeader"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:background="?attr/colorPrimary"
+        android:background="@color/dark_two"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toTopOf="parent">
diff --git a/vector/src/main/res/layout/fragment_public_rooms.xml b/vector/src/main/res/layout/fragment_public_rooms.xml
index 6db130e864..03e78260c9 100644
--- a/vector/src/main/res/layout/fragment_public_rooms.xml
+++ b/vector/src/main/res/layout/fragment_public_rooms.xml
@@ -17,18 +17,15 @@
 
     <com.google.android.material.appbar.AppBarLayout
         android:layout_width="match_parent"
-        android:layout_height="wrap_content">
+        android:layout_height="wrap_content"
+        android:elevation="4dp">
 
         <androidx.appcompat.widget.Toolbar
             android:id="@+id/toolbar"
-            style="@style/VectorToolbarStyle"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:background="?attr/colorPrimary"
             app:contentInsetStartWithNavigation="0dp"
-            app:layout_scrollFlags="noScroll"
-            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
-            app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
+            app:layout_scrollFlags="noScroll">
 
             <EditText
                 android:id="@+id/publicRoomsFilter"
diff --git a/vector/src/main/res/layout/fragment_room_detail.xml b/vector/src/main/res/layout/fragment_room_detail.xml
index c66275730e..ec9866d788 100644
--- a/vector/src/main/res/layout/fragment_room_detail.xml
+++ b/vector/src/main/res/layout/fragment_room_detail.xml
@@ -8,16 +8,13 @@
 
     <androidx.appcompat.widget.Toolbar
         android:id="@+id/roomToolbar"
-        style="@style/VectorToolbarStyle"
         android:layout_width="0dp"
         android:layout_height="?actionBarSize"
-        android:background="?attr/colorPrimary"
+        android:elevation="4dp"
         app:contentInsetStartWithNavigation="0dp"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toTopOf="parent"
-        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
-        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
+        app:layout_constraintTop_toTopOf="parent">
 
         <androidx.constraintlayout.widget.ConstraintLayout
             android:layout_width="match_parent"
@@ -49,7 +46,7 @@
                 app:layout_constraintHorizontal_bias="0.0"
                 app:layout_constraintStart_toEndOf="@+id/roomToolbarAvatarImageView"
                 app:layout_constraintTop_toTopOf="parent"
-                tools:text="@tools:sample/full_names" />
+                tools:text="@sample/matrix.json/data/roomName" />
 
             <TextView
                 android:id="@+id/roomToolbarSubtitleView"
@@ -66,7 +63,7 @@
                 app:layout_constraintHorizontal_bias="0.0"
                 app:layout_constraintStart_toEndOf="@+id/roomToolbarAvatarImageView"
                 app:layout_constraintTop_toBottomOf="@+id/roomToolbarTitleView"
-                tools:text="@tools:sample/date/day_of_week" />
+                tools:text="@sample/matrix.json/data/roomTopic" />
 
 
         </androidx.constraintlayout.widget.ConstraintLayout>
diff --git a/vector/src/main/res/layout/fragment_room_directory_picker.xml b/vector/src/main/res/layout/fragment_room_directory_picker.xml
index ec6e9f33a8..eb7af92bcb 100644
--- a/vector/src/main/res/layout/fragment_room_directory_picker.xml
+++ b/vector/src/main/res/layout/fragment_room_directory_picker.xml
@@ -16,6 +16,7 @@
             android:id="@+id/toolbar"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
+            android:elevation="4dp"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toTopOf="parent" />
diff --git a/vector/src/main/res/layout/fragment_room_preview_no_preview.xml b/vector/src/main/res/layout/fragment_room_preview_no_preview.xml
index e18416dcc7..f05a95874c 100644
--- a/vector/src/main/res/layout/fragment_room_preview_no_preview.xml
+++ b/vector/src/main/res/layout/fragment_room_preview_no_preview.xml
@@ -13,13 +13,10 @@
 
         <androidx.appcompat.widget.Toolbar
             android:id="@+id/roomPreviewNoPreviewToolbar"
-            style="@style/VectorToolbarStyle"
             android:layout_width="match_parent"
             android:layout_height="?actionBarSize"
-            android:background="?attr/colorPrimary"
-            app:contentInsetStartWithNavigation="0dp"
-            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
-            app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
+            android:elevation="4dp"
+            app:contentInsetStartWithNavigation="0dp">
 
             <androidx.constraintlayout.widget.ConstraintLayout
                 android:layout_width="match_parent"
diff --git a/vector/src/main/res/layout/fragment_settings_notifications_troubleshoot.xml b/vector/src/main/res/layout/fragment_settings_notifications_troubleshoot.xml
index 41706a9360..f794ac2c32 100644
--- a/vector/src/main/res/layout/fragment_settings_notifications_troubleshoot.xml
+++ b/vector/src/main/res/layout/fragment_settings_notifications_troubleshoot.xml
@@ -61,7 +61,7 @@
             <Button
                 android:id="@+id/troubleshoot_run_button"
                 android:layout_width="wrap_content"
-                android:layout_height="36dp"
+                android:layout_height="wrap_content"
                 android:layout_gravity="center_vertical"
                 android:layout_margin="16dp"
                 android:background="?attr/colorAccent"
@@ -75,7 +75,7 @@
             <Button
                 android:id="@+id/troubleshoot_summ_button"
                 android:layout_width="wrap_content"
-                android:layout_height="36dp"
+                android:layout_height="wrap_content"
                 android:layout_gravity="center_vertical"
                 android:layout_margin="16dp"
                 android:background="?attr/colorAccent"
diff --git a/vector/src/main/res/layout/item_error_retry.xml b/vector/src/main/res/layout/item_error_retry.xml
index d319039bb5..dd3eb0a40e 100644
--- a/vector/src/main/res/layout/item_error_retry.xml
+++ b/vector/src/main/res/layout/item_error_retry.xml
@@ -17,7 +17,6 @@
 
     <Button
         android:id="@+id/itemErrorRetryButton"
-        style="@style/VectorButtonStyle"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_marginTop="4dp"
diff --git a/vector/src/main/res/layout/item_group.xml b/vector/src/main/res/layout/item_group.xml
index cbff1e479c..78f8a33f0b 100644
--- a/vector/src/main/res/layout/item_group.xml
+++ b/vector/src/main/res/layout/item_group.xml
@@ -32,7 +32,7 @@
         android:layout_marginEnd="@dimen/layout_horizontal_margin"
         android:ellipsize="end"
         android:maxLines="1"
-        android:textColor="@color/dark_grey"
+        android:textColor="?colorOnPrimary"
         android:textSize="15sp"
         android:textStyle="bold"
         app:layout_constraintBottom_toTopOf="@+id/groupBottomSeparator"
@@ -41,7 +41,6 @@
         app:layout_constraintTop_toTopOf="parent"
         tools:text="@tools:sample/lorem/random" />
 
-    <!-- TODO Design Picto -->
     <ImageView
         android:id="@+id/groupAvatarChevron"
         android:layout_width="wrap_content"
diff --git a/vector/src/main/res/layout/item_notification_troubleshoot.xml b/vector/src/main/res/layout/item_notification_troubleshoot.xml
index a2c3bb47b7..23ce817425 100644
--- a/vector/src/main/res/layout/item_notification_troubleshoot.xml
+++ b/vector/src/main/res/layout/item_notification_troubleshoot.xml
@@ -62,7 +62,7 @@
     <Button
         android:id="@+id/troubleshootTestButton"
         android:layout_width="wrap_content"
-        android:layout_height="36dp"
+        android:layout_height="wrap_content"
         android:layout_marginStart="16dp"
         android:layout_marginLeft="16dp"
         android:layout_marginEnd="16dp"
diff --git a/vector/src/main/res/layout/item_timeline_event_text_message_stub.xml b/vector/src/main/res/layout/item_timeline_event_text_message_stub.xml
index 5b1bb1b1e5..c8cae35a7a 100644
--- a/vector/src/main/res/layout/item_timeline_event_text_message_stub.xml
+++ b/vector/src/main/res/layout/item_timeline_event_text_message_stub.xml
@@ -4,6 +4,6 @@
     android:id="@+id/messageTextView"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
-    android:textColor="@color/dark_grey"
+    android:textColor="?colorOnPrimary"
     android:textSize="14sp"
     tools:text="@sample/matrix.json/data/message" />
diff --git a/vector/src/main/res/layout/vector_invite_view.xml b/vector/src/main/res/layout/vector_invite_view.xml
index c4660fccb5..0a6a8cf62b 100644
--- a/vector/src/main/res/layout/vector_invite_view.xml
+++ b/vector/src/main/res/layout/vector_invite_view.xml
@@ -74,12 +74,12 @@
 
     <Button
         android:id="@+id/inviteAcceptView"
-        style="@style/VectorButtonStyle"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_marginStart="4dp"
         android:layout_marginLeft="4dp"
         android:minWidth="120dp"
+        android:background="#341DDD"
         android:text="@string/accept"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintHorizontal_chainStyle="packed"
diff --git a/vector/src/main/res/layout/view_button_state.xml b/vector/src/main/res/layout/view_button_state.xml
index 62938603dc..d442d51ae3 100644
--- a/vector/src/main/res/layout/view_button_state.xml
+++ b/vector/src/main/res/layout/view_button_state.xml
@@ -11,15 +11,17 @@
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_gravity="center"
+        tools:layout_gravity="center_horizontal"
         tools:text="@string/join" />
 
     <Button
         android:id="@+id/buttonStateButtonBig"
-        style="@style/VectorButtonStyle"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_gravity="center"
         android:minWidth="120dp"
+        tools:layout_gravity="center_horizontal"
+        tools:layout_marginTop="100dp"
         tools:text="@string/join" />
 
     <ProgressBar
@@ -27,13 +29,17 @@
         android:layout_width="32dp"
         android:layout_height="32dp"
         android:layout_gravity="center"
-        android:scaleType="center" />
+        android:scaleType="center"
+        tools:layout_gravity="center_horizontal"
+        tools:layout_marginTop="200dp" />
 
     <ImageView
         android:id="@+id/buttonStateLoaded"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_gravity="center"
+        tools:layout_gravity="center_horizontal"
+        tools:layout_marginTop="300dp"
         tools:src="@drawable/ic_tick" />
 
     <Button
@@ -43,6 +49,8 @@
         android:layout_height="wrap_content"
         android:layout_gravity="center"
         android:text="@string/global_retry"
-        android:textColor="@color/vector_warning_color" />
+        android:textColor="@color/vector_warning_color"
+        tools:layout_gravity="center_horizontal"
+        tools:layout_marginTop="400dp" />
 
 </merge>
\ No newline at end of file
diff --git a/vector/src/main/res/values-v21/theme_light.xml b/vector/src/main/res/values-v21/theme_light.xml
index 28bef3540a..e1b9c3be58 100644
--- a/vector/src/main/res/values-v21/theme_light.xml
+++ b/vector/src/main/res/values-v21/theme_light.xml
@@ -1,9 +1,14 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
 
-    <style name="AppTheme.Light" parent="AppTheme.Base.Light">
+    <style name="AppTheme.Light.v21" parent="AppTheme.Base.Light">
+        <item name="android:statusBarColor">@color/riotx_header_panel_background_light</item>
+        <item name="android:navigationBarColor">@color/riotx_header_panel_background_light</item>
+
         <!-- enable window content transitions -->
         <item name="android:windowContentTransitions">true</item>
     </style>
 
+    <style name="AppTheme.Light" parent="AppTheme.Light.v21"/>
+
 </resources>
diff --git a/vector/src/main/res/values-v23/theme_light.xml b/vector/src/main/res/values-v23/theme_light.xml
new file mode 100644
index 0000000000..08a2e74ea6
--- /dev/null
+++ b/vector/src/main/res/values-v23/theme_light.xml
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+
+    <style name="AppTheme.Light.v23" parent="AppTheme.Light.v21">
+        <item name="android:windowLightStatusBar">true</item>
+        <item name="android:statusBarColor">@color/riotx_header_panel_background_light</item>
+        <item name="android:navigationBarColor">@color/riotx_header_panel_background_light</item>
+
+        <!-- enable window content transitions -->
+        <item name="android:windowContentTransitions">true</item>
+    </style>
+
+    <style name="AppTheme.Light" parent="AppTheme.Light.v23"/>
+
+</resources>
\ No newline at end of file
diff --git a/vector/src/main/res/values-v27/theme_light.xml b/vector/src/main/res/values-v27/theme_light.xml
new file mode 100644
index 0000000000..af005577c7
--- /dev/null
+++ b/vector/src/main/res/values-v27/theme_light.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+
+    <style name="AppTheme.Light.v27" parent="AppTheme.Light.v23">
+        <item name="android:windowLightNavigationBar">true</item>
+    </style>
+
+    <style name="AppTheme.Light" parent="AppTheme.Light.v27" />
+
+</resources>
\ No newline at end of file
diff --git a/vector/src/main/res/values/colors.xml b/vector/src/main/res/values/colors.xml
index 3147966e52..713163a967 100644
--- a/vector/src/main/res/values/colors.xml
+++ b/vector/src/main/res/values/colors.xml
@@ -10,7 +10,9 @@
     <color name="sky_blue">#7bb2ea</color>
     <color name="bluey_grey_two">#929eb4</color>
     <color name="light_blue_grey">#4ac1c9d6</color>
-    <color name="dark_grey">#2e2f32</color>
+    <!-- Now use ?colorOnPrimary or ?vctr_toolbar_primary_text_color -->
+    <!--color name="dark_grey">#2e2f32</color-->
+    <color name="dark_two">#27303A</color>
     <color name="light_grey_blue">#9fa9ba</color>
     <color name="cool_grey">#a5aab2</color>
     <color name="pale_grey_two">#ebedf8</color>
diff --git a/vector/src/main/res/values/colors_riot.xml b/vector/src/main/res/values/colors_riot.xml
index 395ebbcee9..08f35da81c 100644
--- a/vector/src/main/res/values/colors_riot.xml
+++ b/vector/src/main/res/values/colors_riot.xml
@@ -41,7 +41,7 @@
     <!--Default/Android Status Bar-->
     <color name="primary_color_dark_light">#FF1A2027</color>
     <!--Default/Base-->
-    <color name="primary_color_light">#FF27303A</color>
+    <color name="primary_color_light">#03b381</color>
     <!--Default/Accent-->
     <color name="accent_color_light">#03b381</color>
 
@@ -113,11 +113,6 @@
     <color name="soft_resource_limit_exceeded">#2f9edb</color>
     <color name="hard_resource_limit_exceeded">@color/vector_fuchsia_color</color>
 
-    <!-- Avatar colors -->
-    <color name="avatar_color_1">#03b381</color>
-    <color name="avatar_color_2">#368bd6</color>
-    <color name="avatar_color_3">#ac3ba8</color>
-
     <!-- Password Strength bar colors -->
     <color name="password_strength_bar_weak">#FFF56679</color>
     <color name="password_strength_bar_low">#FFFFC666</color>
@@ -129,16 +124,6 @@
     <color name="button_enabled_text_color">#FFFFFFFF</color>
     <color name="button_disabled_text_color">#FF7F7F7F</color>
 
-    <!-- User names color -->
-    <color name="username_1">#368bd6</color>
-    <color name="username_2">#ac3ba8</color>
-    <color name="username_3">#03b381</color>
-    <color name="username_4">#e64f7a</color>
-    <color name="username_5">#ff812d</color>
-    <color name="username_6">#2dc2c5</color>
-    <color name="username_7">#5c56f5</color>
-    <color name="username_8">#74d12c</color>
-
     <!-- Link color -->
     <color name="link_color_light">#368BD6</color>
     <color name="link_color_dark">#368BD6</color>
diff --git a/vector/src/main/res/values/colors_riotx.xml b/vector/src/main/res/values/colors_riotx.xml
new file mode 100644
index 0000000000..4ae30d7641
--- /dev/null
+++ b/vector/src/main/res/values/colors_riotx.xml
@@ -0,0 +1,99 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+
+    <!-- Source: https://zpl.io/aBKw9Mk -->
+
+    <!-- Accents -->
+    <color name="riotx_accent">#FF03B381</color>
+
+    <color name="riotx_notice">#FFFF4B55</color>
+    <color name="riotx_notice_secondary">#FF61708B</color>
+    <color name="riotx_links">#FF368BD6</color>
+
+    <color name="riotx_avatar_fill_1">#FF03b381</color>
+    <color name="riotx_avatar_fill_2">#FF368bd6</color>
+    <color name="riotx_avatar_fill_3">#FFac3ba8</color>
+
+    <color name="riotx_username_1">#368bd6</color>
+    <color name="riotx_username_2">#ac3ba8</color>
+    <color name="riotx_username_3">#03b381</color>
+    <color name="riotx_username_4">#e64f7a</color>
+    <color name="riotx_username_5">#ff812d</color>
+    <color name="riotx_username_6">#2dc2c5</color>
+    <color name="riotx_username_7">#5c56f5</color>
+    <color name="riotx_username_8">#74d12c</color>
+
+
+    <!-- Palette: format fo naming:
+      'riotx_<name in the palette snake case>_<theme>'
+      -->
+
+    <color name="riotx_background_light">#FFFFFFFF</color>
+    <color name="riotx_background_dark">#FF181B21</color>
+    <color name="riotx_background_black">#FF000000</color>
+
+    <color name="riotx_base_light">#FF27303A</color>
+    <color name="riotx_base_dark">#FF15171B</color>
+    <color name="riotx_base_black">#FF060708</color>
+
+    <color name="riotx_base_text_icon_primary_light">#FFFFFFFF</color>
+    <color name="riotx_base_text_icon_primary_dark">#FFEDF3FF</color>
+    <color name="riotx_base_text_icon_primary_black">#FFEDF3FF</color>
+
+    <color name="riotx_base_text_icon_secondary_light">#FFFFFFFF</color>
+    <color name="riotx_base_text_icon_secondary_dark">#FFEDF3FF</color>
+    <color name="riotx_base_text_icon_secondary_black">#FFEDF3FF</color>
+
+    <color name="riotx_search_background_mobile_light">#FFFFFFFF</color>
+    <color name="riotx_search_background_mobile_dark">#FF181B21</color>
+    <color name="riotx_search_background_mobile_black">#FF181B21</color>
+
+    <color name="riotx_header_panel_background_light">#FFF3F8FD</color>
+    <color name="riotx_header_panel_background_dark">#FF22262E</color>
+    <color name="riotx_header_panel_background_black">#FF090A0C</color>
+
+    <color name="riotx_header_panel_border_mobile_light">#FFE9EDF1</color>
+    <color name="riotx_header_panel_border_mobile_dark">#FF181B21</color>
+    <color name="riotx_header_panel_border_mobile_black">#FF0D0F12</color>
+
+    <color name="riotx_header_panel_text_primary_light">#FF61708B</color>
+    <color name="riotx_header_panel_text_primary_dark">#FFA1B2D1</color>
+    <color name="riotx_header_panel_text_primary_black">#FFA1B2D1</color>
+
+    <color name="riotx_header_panel_text_secondary_light">#FFC8C8CD</color>
+    <color name="riotx_header_panel_text_secondary_dark">#FFC8C8CD</color>
+    <color name="riotx_header_panel_text_secondary_black">#FFC8C8CD</color>
+
+    <color name="riotx_text_primary_light">#FF2E2F32</color>
+    <color name="riotx_text_primary_dark">#FFEDF3FF</color>
+    <color name="riotx_text_primary_black">#FFEDF3FF</color>
+
+    <color name="riotx_text_secondary_light">#FF9E9E9E</color>
+    <color name="riotx_text_secondary_dark">#FFA1B2D1</color>
+    <color name="riotx_text_secondary_black">#FFA1B2D1</color>
+
+    <color name="riotx_android_secondary_light">#FF7E899C</color>
+    <color name="riotx_android_secondary_dark">#FF7E899C</color>
+    <color name="riotx_android_secondary_black">#FF7E899C</color>
+
+    <color name="riotx_search_placeholder_light">#FF61708B</color>
+    <color name="riotx_search_placeholder_dark">#FF61708B</color>
+    <color name="riotx_search_placeholder_black">#FF61708B</color>
+
+    <color name="riotx_room_highlight_light">#FFFFFFFF</color>
+    <color name="riotx_room_highlight_dark">#FF343446</color>
+    <color name="riotx_room_highlight_black">#FF22262E</color>
+
+    <color name="riotx_unread_room_indent_light">#FF2E3648</color>
+    <color name="riotx_unread_room_indent_dark">#FF2E3648</color>
+    <color name="riotx_unread_room_indent_black">#FF2E3648</color>
+
+    <color name="riotx_android_status_bar_light">#FF2E3648</color>
+    <color name="riotx_android_status_bar_dark">#FF0D0E10</color>
+    <color name="riotx_android_status_bar_black">#FF000000</color>
+
+    <color name="riotx_line_break_mobile_light">#FFEEEFEF</color>
+    <color name="riotx_line_break_mobile_dark">#FF61708B</color>
+    <color name="riotx_line_break_mobile_black">#FF22262E</color>
+
+</resources>
\ No newline at end of file
diff --git a/vector/src/main/res/values/styles_riot.xml b/vector/src/main/res/values/styles_riot.xml
index 530108f397..b3b987c01e 100644
--- a/vector/src/main/res/values/styles_riot.xml
+++ b/vector/src/main/res/values/styles_riot.xml
@@ -3,23 +3,11 @@
 
     <!-- ************************ Common items ************************ -->
 
-    <!-- Launcher Theme, only used for VectorLauncherActivity (will be use even before the Activity is started) -->
-    <style name="AppTheme.Launcher" parent="Theme.AppCompat.Light.NoActionBar">
-        <item name="android:windowBackground">@drawable/splash</item>
-
-        <item name="colorPrimaryDark">@color/primary_color_dark</item>
-    </style>
-
     <!-- toolbar styles-->
     <style name="VectorToolbarStyle" parent="Widget.MaterialComponents.Toolbar">
-        <item name="android:background">?colorPrimary</item>
-        <item name="background">?colorPrimary</item>
-
         <!-- main text -->
         <item name="titleTextAppearance">@style/Vector.Toolbar.Title</item>
         <item name="subtitleTextAppearance">@style/Vector.Toolbar.SubTitle</item>
-
-        <item name="theme">@style/VectorToolbarTheme</item>
     </style>
 
     <style name="VectorToolbarStyle.Group">
@@ -27,23 +15,29 @@
         <item name="background">@color/tab_groups</item>
     </style>
 
-    <style name="VectorToolbarTheme">
-        <!-- toolbar icons -->
-        <item name="colorControlNormal">@android:color/white</item>
-    </style>
-
     <style name="Vector.Toolbar.Title" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
         <item name="android:textSize">20sp</item>
-        <item name="android:textColor">?attr/vctr_toolbar_primary_text_color</item>
         <item name="android:fontFamily">"sans-serif-medium"</item>
     </style>
 
     <style name="Vector.Toolbar.SubTitle" parent="TextAppearance.Widget.AppCompat.Toolbar.Subtitle">
         <item name="android:textSize">16sp</item>
-        <item name="android:textColor">?attr/vctr_toolbar_primary_text_color</item>
         <item name="android:fontFamily">"sans-serif"</item>
     </style>
 
+    <!-- Alert Dialog: Button color are not colorAccent by default TODO extend Dark for dark theme -->
+    <style name="VectorAlertDialogStyle" parent="Theme.MaterialComponents.Light.Dialog.Alert">
+        <item name="buttonBarButtonStyle">@style/VectorAlertDialogButtonStyle</item>
+    </style>
+
+    <style name="VectorAlertDialogButtonStyle" parent="Widget.MaterialComponents.Button.TextButton">
+        <item name="android:textColor">?colorAccent</item>
+    </style>
+
+
+    <!-- TextInputLayout -->
+    <style name="VectorTextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox" />
+
     <!-- tabbar text color -->
     <style name="Vector.TabText" parent="Widget.AppCompat.ActionBar.TabText">
         <item name="android:textColor">@android:color/white</item>
@@ -66,12 +60,12 @@
     </style>
 
     <!-- actionbar icons color -->
-    <style name="Vector.ActionBarTheme" parent="ThemeOverlay.AppCompat.ActionBar">
+    <style name="Vector.ActionBarTheme" parent="ThemeOverlay.MaterialComponents.ActionBar">
         <item name="colorControlNormal">@android:color/white</item>
     </style>
 
     <!-- custom action bar -->
-    <style name="Vector.Styled.ActionBar" parent="Widget.AppCompat.Toolbar">
+    <style name="Vector.Styled.ActionBar" parent="Widget.MaterialComponents.Toolbar">
         <item name="android:background">?colorPrimary</item>
         <item name="background">?colorPrimary</item>
 
@@ -114,7 +108,8 @@
         Widget.AppCompat.Button.Colored, which sets the button color to colorAccent,
          using colorControlHighlight as an overlay for focused and pressed states.
     -->
-    <style name="VectorButtonStyle" parent="Widget.AppCompat.Button.Colored">
+    <style name="VectorButtonStyle" parent="Widget.MaterialComponents.Button">
+        <item name="backgroundTint">?colorAccent</item>
         <item name="android:paddingLeft">16dp</item>
         <item name="android:paddingRight">16dp</item>
         <item name="android:minWidth">94dp</item>
@@ -128,11 +123,13 @@
 
     <!--Widget.AppCompat.Button.Borderless.Colored, which sets the text color to colorAccent,
         using colorControlHighlight as an overlay for focused and pressed states.-->
-    <style name="VectorButtonStyleFlat" parent="Widget.AppCompat.Button.Borderless.Colored">
+    <style name="VectorButtonStyleFlat" parent="Widget.MaterialComponents.Button.TextButton">
         <item name="android:textStyle">bold</item>
         <item name="android:textAllCaps">false</item>
         <item name="android:layout_width">wrap_content</item>
         <item name="android:layout_height">wrap_content</item>
+        <item name="android:background">@null</item>
+        <item name="android:textColor">?colorAccent</item>
         <item name="colorControlHighlight">?colorAccent</item>
     </style>
 
diff --git a/vector/src/main/res/values/styles_widget.xml b/vector/src/main/res/values/styles_widget.xml
deleted file mode 100644
index ad2efe7ea3..0000000000
--- a/vector/src/main/res/values/styles_widget.xml
+++ /dev/null
@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<resources>
-
-    <style name="Widget.Vector.Button" parent="Widget.AppCompat.Button">
-        <item name="android:minHeight">48dp</item>
-        <item name="android:minWidth">128dp</item>
-        <item name="android:paddingRight">8dp</item>
-        <item name="android:paddingLeft">8dp</item>
-        <item name="android:textAllCaps">true</item>
-    </style>
-
-</resources>
\ No newline at end of file
diff --git a/vector/src/main/res/values/theme_common.xml b/vector/src/main/res/values/theme_common.xml
new file mode 100644
index 0000000000..159b2ecb55
--- /dev/null
+++ b/vector/src/main/res/values/theme_common.xml
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+
+    <!-- Launcher Theme, only used for VectorLauncherActivity (will be use even before the Activity is started) -->
+    <style name="AppTheme.Launcher" parent="Theme.MaterialComponents.Light.NoActionBar">
+        <item name="android:windowBackground">@drawable/splash</item>
+
+        <item name="colorPrimaryDark">@color/primary_color_dark</item>
+    </style>
+
+</resources>
\ No newline at end of file
diff --git a/vector/src/main/res/values/theme_light.xml b/vector/src/main/res/values/theme_light.xml
index e0b58bf0db..bb3dd5123c 100644
--- a/vector/src/main/res/values/theme_light.xml
+++ b/vector/src/main/res/values/theme_light.xml
@@ -3,14 +3,31 @@
 
     <!-- LIGHT THEME COLORS -->
 
-    <style name="AppTheme.Base.Light" parent="Theme.MaterialComponents.Light.NoActionBar.Bridge">
-        <item name="colorPrimaryDark">@color/primary_color_dark_light</item>
+    <style name="AppTheme.Base.Light" parent="Theme.MaterialComponents.Light.NoActionBar">
+        <!--item name="colorPrimary"></item>
+        <item name="colorPrimaryVariant"></item>
+        <item name="colorOnPrimary">@android:color/white</item-->
+
         <item name="colorPrimary">@color/primary_color_light</item>
         <item name="colorPrimaryVariant">@color/primary_color_dark_light</item>
+        <item name="colorOnPrimary">@color/riotx_text_primary_light</item>
         <item name="colorSecondary">@color/accent_color_light</item>
+        <item name="colorSecondaryVariant">#0039CB</item>
         <item name="colorOnSecondary">@android:color/white</item>
+        <item name="colorError">@color/vector_error_color</item>
+        <item name="colorOnError">#FFFFFF</item>
+        <item name="colorSurface">#FFFFFF</item>
+        <item name="colorOnSurface">#212121</item>
+        <item name="android:colorBackground">@color/riotx_background_light</item>
+        <item name="colorOnBackground">#212121</item>
+
         <item name="colorAccent">@color/accent_color_light</item>
 
+        <item name="materialButtonStyle">@style/VectorButtonStyle</item>
+        <item name="toolbarStyle">@style/VectorToolbarStyle</item>
+        <item name="alertDialogTheme">@style/VectorAlertDialogStyle</item>
+
+
         <item name="android:textColorPrimary">@color/black_87</item>
         <item name="android:textColorSecondary">@color/black_38</item>
         <item name="android:textColorTertiary">@color/black_37</item>
@@ -18,24 +35,20 @@
         <item name="android:textColorLink">@color/link_color_light</item>
 
         <!-- Menu text color -->
-        <item name="android:actionMenuTextColor">#FFFFFFFF</item>
+        <!--item name="android:actionMenuTextColor">#FFFFFFFF</item-->
 
         <!-- default background color -->
-        <item name="android:colorBackground">@color/riot_primary_background_color_light</item>
         <item name="vctr_bottom_nav_background_color">#FFF3F8FD</item>
         <item name="vctr_bottom_nav_background_border_color">#FFE9EDF1</item>
 
-        <!-- default button -->
-        <item name="android:buttonStyle">@style/Widget.Vector.Button</item>
-
         <!-- waiting view background -->
         <item name="vctr_waiting_background_color">#AAAAAAAA</item>
 
         <!-- application bar text color -->
         <!-- Base Text Primary-->
-        <item name="vctr_toolbar_primary_text_color">#FFFFFFFF</item>
+        <item name="vctr_toolbar_primary_text_color">@color/riotx_text_primary_light</item>
         <!-- Base Text Secondary-->
-        <item name="vctr_toolbar_secondary_text_color">#FFFFFFFF</item>
+        <item name="vctr_toolbar_secondary_text_color">@color/riotx_text_primary_light</item>
         <item name="vctr_toolbar_link_text_color">@color/link_color_light</item>
 
         <!-- application bar text hint color -->
diff --git a/vector/src/main/res/values/theme_status.xml b/vector/src/main/res/values/theme_status.xml
index 9a50b88db2..a48ffda7b3 100644
--- a/vector/src/main/res/values/theme_status.xml
+++ b/vector/src/main/res/values/theme_status.xml
@@ -25,8 +25,6 @@
         </item>
         <item name="vctr_bottom_nav_background_border_color">#FFE9EDF1</item>
 
-        <item name="buttonStyle">@style/Widget.Vector.Button</item>
-
         <!-- waiting view background -->
         <item name="vctr_waiting_background_color">#AAAAAAAA</item>