fix distortion of app theme due to change in system theme (#12934)

Author: Parveshdhull

android/app/src/main/res/values-night/colors.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <color name="alert_text">#ffffff</color>
+</resources>

android/app/src/main/res/values/colors.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <color name="alert_text">#000000</color>
+</resources>

android/app/src/main/res/values/styles.xml

@@ -8,6 +8,7 @@
         <item name="android:forceDarkAllowed">true</item>
         <item name="android:windowTranslucentStatus">false</item>
         <item name="android:statusBarColor">?attr/backgroundColor</item>
+	<item name="android:alertDialogTheme">@style/AlertDialogTheme</item>
     </style>
 
     <style name="LightTheme" parent="AppTheme">
@@ -21,4 +22,9 @@
         <item name="backgroundColor">#000000</item>
         <item name="android:windowLightStatusBar">false</item>
     </style>
+
+    <style name="AlertDialogTheme" parent="Base.Theme.AppCompat.Light.Dialog.Alert">
+      <item name="android:textColor">@color/alert_text</item>
+      <item name="android:textColorPrimary">@color/alert_text</item>
+    </style>
 </resources>

src/status_im/events.cljs

@@ -6,7 +6,7 @@
             [status-im.async-storage.core :as async-storage]
             status-im.backup.core
             status-im.bootnodes.core
-            status-im.bottom-sheet.core
+            [status-im.bottom-sheet.core :as bottom-sheet]
             status-im.browser.core
             status-im.browser.permissions
             [status-im.chat.models :as chat]
@@ -58,7 +58,9 @@
             status-im.wallet.accounts.core
             status-im.wallet.choose-recipient.core
             [status-im.wallet.core :as wallet]
-            status-im.wallet.custom-tokens.core))
+            status-im.wallet.custom-tokens.core
+            [status-im.navigation.core :as navigation.core]
+            [status-im.multiaccounts.login.core :as login.core]))
 
 (re-frame/reg-fx
  :dismiss-keyboard
@@ -112,10 +114,35 @@
 
 (fx/defn system-theme-mode-changed
   {:events [:system-theme-mode-changed]}
-  [{:keys [db]} theme]
-  (let [cur-theme (get-in db [:multiaccount :appearance])]
+  [{:keys [db] :as cofx} theme]
+  (let [cur-theme     (get-in db [:multiaccount :appearance])
+        current-tab   (get db :current-tab :chat)
+        view-id       (:view-id db)
+        screen-params (get-in db [:navigation/screen-params view-id])
+        root-id       @navigation.core/root-id]
+    (navigation.core/dismiss-all-modals)
     (when (or (nil? cur-theme) (zero? cur-theme))
-      {::multiaccounts/switch-theme (if (= :dark theme) 2 1)})))
+      (fx/merge cofx
+                {::multiaccounts/switch-theme (if (= :dark theme) 2 1)
+                 :utils/dispatch-later
+                 (cond-> [{:ms 2000 :dispatch
+                           (if (= view-id :chat)
+                             [:chat.ui/navigate-to-chat (:current-chat-id db)]
+                             [:navigate-to view-id screen-params])}]
+
+                   (some #(= view-id %) navigation.core/community-screens)
+                   (conj {:ms 1000 :dispatch
+                          [:navigate-to :community
+                           (get-in db [:navigation/screen-params :community])]})
+
+                   (= view-id :community-emoji-thumbnail-picker)
+                   (conj {:ms 1500 :dispatch
+                          [:navigate-to :create-community-channel
+                           (get-in db [:navigation/screen-params :create-community-channel])]}))}
+                (bottom-sheet/hide-bottom-sheet)
+                (navigation/init-root root-id)
+                (when (= root-id :chat-stack)
+                  (navigation/change-tab current-tab))))))
 
 (def authentication-options
   {:reason (i18n/label :t/biometric-auth-reason-login)})

src/status_im/navigation/core.cljs

@@ -1,6 +1,7 @@
 (ns status-im.navigation.core
   (:require
    ["react-native" :as rn]
+   [clojure.set :as clojure.set]
    ["react-native-gesture-handler" :refer (gestureHandlerRootHOC)]
    ["react-native-navigation" :refer (Navigation)]
    [quo.components.text-input :as quo.text-input]
@@ -157,12 +158,14 @@
   (.registerComponentDidDisappearListener
    (.events Navigation)
    (fn [^js evn]
-     (when-not (#{"popover" "bottom-sheet" "signing-sheet" "visibility-status-popover"}
-                (.-componentName evn))
-       (doseq [[_ {:keys [ref value]}] @quo.text-input/text-input-refs]
-         (.setNativeProps ^js ref (clj->js {:text value})))
-       (doseq [[^js text-input default-value] @react/text-input-refs]
-         (.setNativeProps text-input (clj->js {:text default-value})))))))
+     (let [view-id (keyword (.-componentName evn))]
+       (when-not (#{"popover" "bottom-sheet" "signing-sheet" "visibility-status-popover"}
+                  (.-componentName evn))
+         (re-frame/dispatch [::view-disappeared view-id])
+         (doseq [[_ {:keys [ref value]}] @quo.text-input/text-input-refs]
+           (.setNativeProps ^js ref (clj->js {:text value})))
+         (doseq [[^js text-input default-value] @react/text-input-refs]
+           (.setNativeProps text-input (clj->js {:text default-value}))))))))
 
 ;; SET ROOT
 (re-frame/reg-fx
@@ -277,7 +280,10 @@
   (.registerBottomTabSelectedListener
    (.events Navigation)
    (fn [^js evn]
-     (let [comp (get tab-root-ids (.-selectedTabIndex evn))]
+     (let [selected-tab-index (.-selectedTabIndex evn)
+           comp               (get tab-root-ids selected-tab-index)
+           tab-key            (get (clojure.set/map-invert tab-key-idx) selected-tab-index)]
+       (re-frame/dispatch [:set :current-tab tab-key])
        (when (and platform/android? (= @root-comp-id comp))
          (.popToRoot Navigation (name comp)))
        (reset! root-comp-id comp)))))
@@ -377,3 +383,27 @@
    (log/debug :navigate-replace-fx view-id)
    (.pop Navigation (name @root-comp-id))
    (navigate view-id)))
+
+(def community-screens '(:community-management
+                         :community-members
+                         :community-requests-to-join
+                         :create-community-channel
+                         :community-emoji-thumbnail-picker
+                         :create-community-category
+                         :community-edit-chats))
+
+;; change view-id if it is still same after component is disappeared
+;; https://github.com/wix/react-native-navigation/issues/5744#issuecomment-563226820
+(fx/defn view-disappeared
+  {:events [::view-disappeared]}
+  [{:keys [db]} view-id]
+  (when (= view-id (:view-id db))
+    {:db (assoc db :view-id (cond
+                              (= view-id :community-emoji-thumbnail-picker)
+                              :create-community-channel
+
+                              (some #(= view-id %) community-screens)
+                              :community
+
+                              :else
+                              :home))}))

src/status_im/ui/screens/chat/photos.cljs

@@ -4,11 +4,12 @@
             [status-im.ui.screens.chat.styles.photos :as style]
             [status-im.profile.db :as profile.db]
             [status-im.multiaccounts.core :as multiaccounts]
-            [status-im.utils.image :as utils.image]))
+            [status-im.utils.image :as utils.image]
+            [quo.design-system.colors :as colors]))
 
 (def memo-photo-rend
   (memoize
-   (fn [photo-path size accessibility-label]
+   (fn [photo-path size accessibility-label _]
      (let [identicon? (when photo-path (profile.db/base64-png? photo-path))]
        [react/view {:style (style/photo-container size)}
         [react/image {:source              (utils.image/source photo-path)
@@ -18,8 +19,9 @@
         (when identicon?
           [react/view {:style (style/photo-border size)}])]))))
 
+;; "(colors/dark?)" is passed to memoized function to avoid previous themes cache
 (defn photo [photo-path {:keys [size accessibility-label]}]
-  [memo-photo-rend photo-path size accessibility-label])
+  [memo-photo-rend photo-path size accessibility-label (colors/dark?)])
 
 ;; We optionally pass identicon for perfomance reason, so it does not have to be calculated for each message
 (defn member-photo [pub-key identicon]