updates

.github/ISSUE_TEMPLATE.md

@@ -43,4 +43,4 @@ As a <user|developer|...>, I want to <task> so that <goal>.
 [comment]: # (if on Android please replicate bug whilst running adb logcat)
 ```
 ...
-```
+```

Makefile

@@ -14,17 +14,17 @@ WHITE  := $(shell tput -Txterm setaf 7)
 YELLOW := $(shell tput -Txterm setaf 3)
 RESET  := $(shell tput -Txterm sgr0)
 HELP_FUN = \
-			 %help; \
-			 while(<>) { push @{$$help{$$2 // 'options'}}, [$$1, $$3] if /^([a-zA-Z\-]+)\s*:.*\#\#(?:@([a-zA-Z\-]+))?\s(.*)$$/ }; \
-			 print "Usage: make [target]\n\nSee STARTING_GUIDE.md for more info.\n\n"; \
-			 for (sort keys %help) { \
-				 print "${WHITE}$$_:${RESET}\n"; \
-				 for (@{$$help{$$_}}) { \
-					 $$sep = " " x (32 - length $$_->[0]); \
-					 print "  ${YELLOW}$$_->[0]${RESET}$$sep${GREEN}$$_->[1]${RESET}\n"; \
-				 }; \
-				 print "\n"; \
-			 }
+		   %help; \
+		   while(<>) { push @{$$help{$$2 // 'options'}}, [$$1, $$3] if /^([a-zA-Z\-]+)\s*:.*\#\#(?:@([a-zA-Z\-]+))?\s(.*)$$/ }; \
+		   print "Usage: make [target]\n\nSee STARTING_GUIDE.md for more info.\n\n"; \
+		   for (sort keys %help) { \
+			   print "${WHITE}$$_:${RESET}\n"; \
+			   for (@{$$help{$$_}}) { \
+				   $$sep = " " x (32 - length $$_->[0]); \
+				   print "  ${YELLOW}$$_->[0]${RESET}$$sep${GREEN}$$_->[1]${RESET}\n"; \
+			   }; \
+			   print "\n"; \
+		   }
 HOST_OS := $(shell uname | tr '[:upper:]' '[:lower:]')
 
 # This can come from Jenkins
@@ -307,7 +307,6 @@ lint: ##@test Run code style checks
 	clj-kondo --config .clj-kondo/config.edn --cache false --lint src && \
 	ALL_CLOJURE_FILES=$(call find_all_clojure_files) && \
 	zprint '{:search-config? true}' -sfc $$ALL_CLOJURE_FILES && \
-	sh scripts/lint-trailing-newline.sh && \
 	yarn prettier
 
 # NOTE: We run the linter twice because of https://github.com/kkinnear/zprint/issues/271
@@ -316,9 +315,9 @@ lint-fix: ##@test Run code style checks and fix issues
 	ALL_CLOJURE_FILES=$(call find_all_clojure_files) && \
 	zprint '{:search-config? true}' -sw $$ALL_CLOJURE_FILES && \
 	zprint '{:search-config? true}' -sw $$ALL_CLOJURE_FILES && \
-	sh scripts/lint-trailing-newline.sh --fix && \
 	yarn prettier
 
+
 shadow-server: export TARGET := clojure
 shadow-server:##@ Start shadow-cljs in server mode for watching
 	yarn shadow-cljs server

app.json

@@ -1,4 +1,4 @@
 {
   "name": "StatusIm",
   "displayName": "StatusIm"
-}
+}

doc/decisions/0012-using-pivotal-tracker.md

@@ -45,4 +45,4 @@ The `State` field in the Pivotal story is used to track the progress of a Pivota
   | 5 points | 2 - 3 days       |
   | 8 points | ~1 week          |
 
-  We should avoid 8 point stories by breaking them down into smaller stories as much as possible.
+  We should avoid 8 point stories by breaking them down into smaller stories as much as possible.

ios/StatusIm/Images.xcassets/Contents.json

@@ -3,4 +3,4 @@
     "version" : 1,
     "author" : "xcode"
   }
-}
+}

modules/react-native-status/package.json

@@ -18,4 +18,4 @@
     "url": "https://github.com/status-im/react-native-status/issues"
   },
   "homepage": "https://github.com/status-im/react-native-status#readme"
-}
+}

resources/config/fleets.json

@@ -194,4 +194,4 @@
             }
         }
     }
-}
+}

scripts/lint-trailing-newline.sh

@@ -1,33 +0,0 @@
-#!/usr/bin/env bash
-
-set -eof pipefail
-
-FILES=$(comm -23 <(sort <(git ls-files --cached --others --exclude-standard)) <(sort <(git ls-files --deleted)) | grep --ignore-case -E '\.(java|cpp|nix|json|sh|md|js|clj|cljs|cljc|edn)$')
-N_FILES=$(echo "$FILES" | wc -l)
-LINT_SHOULD_FIX=0
-
-if [[ -n $1 && $1 != '--fix' ]]; then
-    echo "Unknown option '$1'" >&2
-    exit 1
-elif [[ $1 == '--fix' ]]; then
-    LINT_SHOULD_FIX=1
-fi
-
-echo "Checking ${N_FILES} files for missing trailing newlines."
-
-# Do not process the whole file and only check the last character. Ignore empty
-# files. Taken from https://stackoverflow.com/a/10082466.
-for file in $FILES; do
-    if [ -s "$file" ] && [ "$(tail -c1 "$file"; echo x)" != $'\nx' ]; then
-        if [[ $LINT_SHOULD_FIX -eq 1 ]]; then
-            echo "" >>"$file"
-        else
-            LINT_ERROR=1
-            echo "No trailing newline: $file" >&2
-        fi
-    fi
-done
-
-if [[ $LINT_ERROR -eq 1 ]]; then
-    exit 1
-fi

src/js/worklets/lightbox.js

@@ -6,3 +6,10 @@ export function infoLayout(input, isTop) {
     return isTop ? input.value : -input.value;
   });
 }
+
+export function textSheet(input, isHeight) {
+  return useDerivedValue(function () {
+    'worklet';
+    return isHeight ? input.value : -input.value;
+  });
+}

src/quo/previews/icons.cljs

@@ -11,4 +11,4 @@
    (for [i (keys icons/icons)]
      [rn/view {:flex-direction :row}
       [icons/icon (keyword i)]
-      [rn/text i]])])
+      [rn/text i]])])

src/quo2/components/buttons/predictive_keyboard/view.cljs

@@ -2,7 +2,6 @@
   (:require [react-native.core :as rn]
             [quo2.components.buttons.predictive-keyboard.style :as style]
             [quo2.components.info.info-message :as info-message]
-            [quo2.theme :as theme]
             [react-native.linear-gradient :as linear-gradient]
             [quo2.foundations.colors :as colors]
             [quo2.components.buttons.button :as button]))
@@ -13,33 +12,32 @@
    :blur  [colors/white-opa-5 colors/white-opa-0]})
 
 (defn- word-component
-  [word _ _ {:keys [on-press]}]
+  [word _ _ {:keys [blur? on-press]}]
   [button/button
-   {:type     :blur-bg
-    :size     32
-    :on-press #(on-press word)}
-
+   (merge {:type     :blur-bg
+           :size     32
+           :on-press #(on-press word)}
+          (when blur? {:override-theme :dark}))
    word])
 
 (defn- separator
   []
   [rn/view {:style {:width 8}}])
 
-(defn- view-internal
+(defn view
   "Options
    - `type` `:words`/`:error`/`:info`/`:empty`.
    - `blur?` Boolean to enable blur background support.
    - `text`  error/info text.
    - `words` List of words to display in the keyboard.
-   - `on-press` Callback called when a word is pressed `(fn [word])`
-   - `theme` :light or :dark, received from with-theme HOC."
-  [{:keys [type blur? text words on-press theme]}]
+   - `on-press` Callback called when a word is pressed `(fn [word])`."
+  [{:keys [type blur? text words on-press]}]
   [linear-gradient/linear-gradient
    {:style               {:flex-direction :row}
     :accessibility-label :predictive-keyboard
     :colors              (if blur?
                            (gradients :blur)
-                           (colors/theme-colors (gradients :light) (gradients :dark) theme))}
+                           (colors/theme-colors (gradients :light) (gradients :dark)))}
    [rn/view {:style (style/wrapper type)}
     (case type
       :words
@@ -48,7 +46,8 @@
         :data                              words
         :content-container-style           style/word-list
         :render-fn                         word-component
-        :render-data                       {:on-press on-press}
+        :render-data                       {:blur?    blur?
+                                            :on-press on-press}
         :shows-horizontal-scroll-indicator false
         :separator                         [separator]
         :horizontal                        true
@@ -71,5 +70,3 @@
                  :icon-color colors/white-opa-70}))
        text]
       nil)]])
-
-(def view (theme/with-theme view-internal))

src/quo2/components/counter/step/style.cljs

@@ -14,11 +14,11 @@
     (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-10 theme)
     (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)))
 
-(defn active-background-color [customization-color] (colors/custom-color customization-color 50 10))
-(defn complete-background-color [customization-color] (colors/custom-color customization-color 50))
+(def active-background-color (colors/custom-color :blue 50 10))
+(def complete-background-color (colors/custom-color :blue 50))
 
 (defn container
-  [{:keys [size type in-blur-view? theme customization-color]}]
+  [size type in-blur-view? theme]
   (cond-> container-base
     (#{1 2} size) (assoc :width 20)
     (= size 3) (assoc :width 28)
@@ -28,10 +28,10 @@
            :border-color (neutral-border-color in-blur-view? theme))
 
     (= type :active)
-    (assoc :background-color (active-background-color customization-color))
+    (assoc :background-color active-background-color)
 
     (= type :complete)
-    (assoc :background-color (complete-background-color customization-color))))
+    (assoc :background-color complete-background-color)))
 
 (defn text-color
   ([type] (text-color type nil))

src/quo2/components/counter/step/view.cljs

@@ -6,8 +6,8 @@
     [react-native.core :as rn]
     [utils.number]))
 
-(defn step-internal
-  [{:keys [type accessibility-label theme in-blur-view? customization-color]} value]
+(defn themed-step
+  [{:keys [type accessibility-label theme in-blur-view?]} value]
   (let [type  (or type :neutral)
         value (utils.number/parse-int value)
         label (str value)
@@ -15,14 +15,10 @@
     [rn/view
      {:accessible          true
       :accessibility-label (or accessibility-label :step-counter)
-      :style               (style/container {:size                size
-                                             :type                type
-                                             :in-blur-view?       in-blur-view?
-                                             :theme               theme
-                                             :customization-color customization-color})}
+      :style               (style/container size type in-blur-view? theme)}
      [text/text
       {:weight :medium
        :size   :label
        :style  {:color (style/text-color type theme)}} label]]))
 
-(def step (theme/with-theme step-internal))
+(def step (theme/with-theme themed-step))

src/quo2/components/dividers/divider_label.cljs

@@ -1,8 +1,8 @@
 (ns quo2.components.dividers.divider-label
-  (:require [quo2.components.icon :as icons]
+  (:require [quo2.theme :as theme]
+            [quo2.components.icon :as icons]
             [quo2.components.markdown.text :as markdown.text]
             [quo2.foundations.colors :as colors]
-            [quo2.theme :as theme]
             [react-native.core :as rn]))
 
 (def chevron-icon-container-width 20)
@@ -36,18 +36,18 @@
         padding-top                 (if increase-padding-top? 16 8)
         text-and-icon-color         (if dark? colors/neutral-40 colors/neutral-50)
         counter-text-color          (if dark? colors/white colors/neutral-100)]
-    [rn/touchable-without-feedback {:on-press on-press}
+    [rn/touchable-without-feedback
+     {:on-press on-press}
      [rn/view
       {:accessible          true
        :accessibility-label :divider-label
-       :style               (merge {:border-top-width 1
-                                    :border-top-color border-and-counter-bg-color
-                                    :padding-top      padding-top
-                                    :padding-bottom   padding-bottom
-                                    :padding-left     16
-                                    :padding-right    16
-                                    :align-items      :center
-                                    :flex-direction   :row}
+       :style               (merge {:border-top-width   1
+                                    :border-top-color   border-and-counter-bg-color
+                                    :padding-top        padding-top
+                                    :padding-bottom     padding-bottom
+                                    :padding-horizontal 16
+                                    :align-items        :center
+                                    :flex-direction     :row}
                                    container-style)}
       (when (= chevron-position :left)
         [rn/view

src/quo2/components/drawers/documentation_drawers/style.cljs

@@ -1,10 +1,4 @@
-(ns quo2.components.drawers.documentation-drawers.style
-  (:require [quo2.foundations.colors :as colors]
-            [react-native.safe-area :as safe-area]))
-
-(def outer-container
-  ;; Margin negative to fill the bottom-sheet container where this component is used
-  {:margin-bottom (- (+ (safe-area/get-bottom) 8))})
+(ns quo2.components.drawers.documentation-drawers.style)
 
 (def container
   {:align-items        :flex-start
@@ -12,10 +6,4 @@
 
 (def content
   {:margin-top    8
-   :margin-bottom (+ (safe-area/get-bottom) 8)})
-
-(defn title
-  [shell?]
-  {:color (colors/theme-colors colors/neutral-100
-                               colors/white
-                               (when shell? :dark))})
+   :margin-bottom 16})

src/quo2/components/drawers/documentation_drawers/view.cljs

@@ -1,9 +1,10 @@
 (ns quo2.components.drawers.documentation-drawers.view
-  (:require [quo2.components.buttons.button :as button]
+  (:require [quo2.components.markdown.text :as text]
             [quo2.components.drawers.documentation-drawers.style :as style]
-            [quo2.components.markdown.text :as text]
             [react-native.core :as rn]
-            [react-native.gesture :as gesture]))
+            [react-native.gesture :as gesture]
+            [quo2.components.buttons.button :as button]
+            [quo2.foundations.colors :as colors]))
 
 (defn view
   "Options
@@ -13,18 +14,18 @@
    - `button-icon` button icon
    - `on-press-button` On press handler for the button
    - `shell?` use shell theme
+
    `content` Content of the drawer
    "
   [{:keys [title show-button? on-press-button button-label button-icon shell?]} content]
   [gesture/scroll-view
-   {:style                             style/outer-container
-    :always-bounce-vertical            false
-    :content-inset-adjustment-behavior :never}
    [rn/view {:style style/container}
     [text/text
      {:size                :heading-2
       :accessibility-label :documentation-drawer-title
-      :style               (style/title shell?)
+      :style               {:color (colors/theme-colors colors/neutral-100
+                                                        colors/white
+                                                        (when shell? :dark))}
       :weight              :semi-bold}
      title]
     [rn/view {:style style/content :accessibility-label :documentation-drawer-content}

src/quo2/components/drawers/drawer_buttons/component_spec.cljs

@@ -1,19 +1,9 @@
 (ns quo2.components.drawers.drawer-buttons.component-spec
   (:require [quo2.components.drawers.drawer-buttons.view :as drawer-buttons]
             [react-native.core :as rn]
-            [test-helpers.component :as h]
-            [react-native.safe-area :as safe-area]))
+            [test-helpers.component :as h]))
 
 (h/describe "drawer-buttons"
-  (h/before-each
-   (fn []
-     (h/use-fake-timers)))
-
-  (h/after-each
-   (fn []
-     (h/clear-all-timers)
-     (h/use-real-timers)))
-
   (h/test "the top heading and subheading render"
     (h/render [drawer-buttons/view
                {:top-card    {:heading :top-heading}
@@ -39,16 +29,15 @@
 
   (h/test "it clicks the top card"
     (let [event (h/mock-fn)]
-      (with-redefs [safe-area/get-top (fn [] 10)]
-        (h/render [drawer-buttons/view
-                   {:top-card    {:on-press event
-                                  :heading  :top-heading}
-                    :bottom-card {:heading :bottom-heading}}
-                   :top-sub-heading
-                   :bottom-sub-heading])
-        (h/fire-event :press (h/get-by-text "top-heading"))
-        (-> (js/expect event)
-            (.toHaveBeenCalled)))))
+      (h/render [drawer-buttons/view
+                 {:top-card    {:on-press event
+                                :heading  :top-heading}
+                  :bottom-card {:heading :bottom-heading}}
+                 :top-sub-heading
+                 :bottom-sub-heading])
+      (h/fire-event :press (h/get-by-text "top-heading"))
+      (-> (js/expect event)
+          (.toHaveBeenCalled))))
 
   (h/test "it clicks the bottom card"
     (let [event (h/mock-fn)]

src/quo2/components/drawers/drawer_buttons/style.cljs

@@ -1,20 +1,11 @@
 (ns quo2.components.drawers.drawer-buttons.style
-  (:require [quo2.foundations.colors :as colors]
-            [react-native.reanimated :as reanimated]))
+  (:require [quo2.foundations.colors :as colors]))
 
-(defn outer-container
-  [height border-radius container-style]
-  (reanimated/apply-animations-to-style
-   {:height                  height
-    :border-top-left-radius  border-radius
-    :border-top-right-radius border-radius}
-   (assoc
-    container-style
-    :position :absolute
-    :left     0
-    :right    0
-    :bottom   0
-    :overflow :hidden)))
+(def outer-container
+  {:height                  216
+   :border-top-left-radius  20
+   :border-top-right-radius 20
+   :overflow                :hidden})
 
 (def top-card
   {:flex                    1
@@ -26,6 +17,7 @@
 
 (def bottom-card
   {:position                :absolute
+   :top                     80
    :left                    0
    :right                   0
    :bottom                  0
@@ -49,20 +41,6 @@
    :align-items     :center
    :border-color    colors/white-opa-5})
 
-(def blur-view-style
-  {:flex                    1
-   :border-top-left-radius  20
-   :border-top-right-radius 20})
-
-(def blur-content-style
-  {:flex             1
-   :background-color :transparent
-   :position         :absolute
-   :top              0
-   :left             0
-   :right            0
-   :bottom           0})
-
 (def bottom-text
   {:flex  1
    :color colors/white-70-blur})
@@ -73,4 +51,4 @@
 (defn heading-text
   [gap]
   {:color         colors/white
-   :margin-bottom gap})
+   :margin-bottom gap})

src/quo2/components/drawers/drawer_buttons/view.cljs

@@ -4,12 +4,7 @@
             [quo2.components.markdown.text :as text]
             [quo2.foundations.colors :as colors]
             [react-native.blur :as blur]
-            [quo2.components.drawers.drawer-buttons.style :as style]
-            [react-native.reanimated :as reanimated]
-            [react-native.platform :as platform]
-            [react-native.safe-area :as safe-area]))
-
-(def default-height 216)
+            [quo2.components.drawers.drawer-buttons.style :as style]))
 
 (defn render-bottom
   [children]
@@ -34,74 +29,35 @@
       children]]
     [render-bottom children]))
 
-(defn- f-render-children-top
-  [children top-children-opacity]
-  (let [scale        (reanimated/interpolate top-children-opacity [1 0] [1 1.1])
-        padding-left (reanimated/interpolate scale [1 1.1] [0 14])]
-    [reanimated/view
-     {:style (reanimated/apply-animations-to-style
-              {:opacity   top-children-opacity
-               :transform [{:scale scale}
-                           {:translate-x padding-left}]}
-              {})}
-     (if (label? children)
-       [text/text
-        {:size   :paragraph-2
-         :style  style/top-text
-         :weight :semi-bold}
-        children]
-       children)]))
+(defn render-children-top
+  [children]
+  (if (label? children)
+    [text/text
+     {:size   :paragraph-2
+      :style  style/top-text
+      :weight :semi-bold}
+     children]
+    children))
 
-(defn- f-card
-  [{:keys [on-press default-on-press style heading gap accessibility-label top? top-title-opacity
-           top-children-opacity
-           animated-heading]
-    :or   {top-title-opacity (reanimated/use-shared-value 1)}}
-   children]
+(defn card
+  [{:keys [on-press style heading gap accessibility-label top?]} children]
   [rn/touchable-highlight
    {:accessibility-label accessibility-label
-    :on-press            (fn []
-                           (when on-press
-                             (on-press))
-                           (when default-on-press
-                             (default-on-press)))
+    :on-press            on-press
     :border-radius       20
     :style               style
     :underlay-color      (:background-color style)}
    [rn/view
-    [reanimated/view
-     {:style (reanimated/apply-animations-to-style
-              {:opacity top-title-opacity}
-              {})}
-     [text/text
-      {:size   :heading-1
-       :style  (style/heading-text gap)
-       :weight :semi-bold}
-      heading]]
-    (when animated-heading
-      (let [animated-heading-opacity (reanimated/interpolate top-children-opacity [1 0] [0 1])]
-        [reanimated/view
-         {:style (reanimated/apply-animations-to-style
-                  {:opacity top-title-opacity}
-                  {:position :absolute})}
-         [reanimated/view
-          {:style (reanimated/apply-animations-to-style
-                   {:opacity animated-heading-opacity}
-                   {})}
-          [text/text
-           {:size   :heading-1
-            :style  (style/heading-text gap)
-            :weight :semi-bold}
-           animated-heading]]]))
+    [text/text
+     {:size   :heading-1
+      :style  (style/heading-text gap)
+      :weight :semi-bold}
+     heading]
     (if top?
-      [:f> f-render-children-top children top-children-opacity]
+      [render-children-top children]
       [render-children-bottom children])]])
 
-(defn card
-  [props children]
-  [:f> f-card props children])
-
-(defn f-view
+(defn view
   "[view opts]
    opts
    {:container-style  style-object
@@ -114,101 +70,29 @@
     child-1           string, keyword or hiccup
     child-2           string, keyword or hiccup
    "
-  [{:keys [container-style top-card bottom-card on-init animations-duration animations-delay]}
-   child-1
-   child-2]
-  (let [max-height           (+ (:height (rn/get-window)) (if platform/android? (safe-area/get-top) 0))
-        height               (reanimated/use-shared-value default-height)
-        top-padding          (reanimated/use-shared-value 12)
-        border-radius        (reanimated/use-shared-value 20)
-        bottom-view-top      (reanimated/use-shared-value 80)
-        top-title-opacity    (reanimated/use-shared-value 1)
-        top-children-opacity (reanimated/use-shared-value 1)
-        animations-delay     (/ animations-delay 1.4)
-        start-top-animation  (fn []
-                               (reanimated/animate-shared-value-with-delay bottom-view-top
-                                                                           (:height (rn/get-screen))
-                                                                           animations-duration
-                                                                           :easing4
-                                                                           animations-delay)
-                               (reanimated/animate-shared-value-with-delay
-                                height
-                                max-height
-                                animations-duration
-                                :easing4
-                                animations-delay)
-                               (reanimated/animate-shared-value-with-delay
-                                top-padding
-                                (+ 68 (safe-area/get-top))
-                                animations-duration
-                                :easing4
-                                animations-delay)
-                               (reanimated/animate-shared-value-with-delay
-                                top-children-opacity
-                                0
-                                animations-duration
-                                :easing4 animations-delay)
-                               (reanimated/animate-shared-value-with-delay
-                                top-title-opacity
-                                0
-                                0
-                                :linear
-                                (+ animations-delay animations-duration 500)))
-        reset-top-animation  (fn []
-                               (reanimated/set-shared-value top-title-opacity 1)
-                               (reanimated/animate-shared-value-with-delay bottom-view-top
-                                                                           80
-                                                                           animations-duration
-                                                                           :easing4
-                                                                           50)
-                               (reanimated/animate-shared-value-with-timing
-                                height
-                                default-height
-                                animations-duration
-                                :easing4)
-                               (reanimated/animate-shared-value-with-timing
-                                top-padding
-                                12
-                                animations-duration
-                                :easing4)
-                               (reanimated/animate-shared-value-with-timing
-                                top-children-opacity
-                                1
-                                animations-duration
-                                :easing4))]
-    (rn/use-effect (fn []
-                     (when on-init
-                       (on-init reset-top-animation))))
-    [reanimated/view {:style (style/outer-container height border-radius container-style)}
-     [blur/view
-      {:blur-type   :dark
-       :blur-amount 10
-       :style       style/blur-view-style}
-      [rn/view
-       {:style style/blur-content-style}
-       [reanimated/view
-        {:style (reanimated/apply-animations-to-style
-                 {:padding-top top-padding}
-                 style/top-card)}
-        [card
-         (merge {:gap                  4
-                 :top?                 true
-                 :style                {:flex 1}
-                 :top-children-opacity top-children-opacity
-                 :top-title-opacity    top-title-opacity
-                 :default-on-press     start-top-animation}
-                top-card)
-         child-1]]
-       [reanimated/view
-        {:style (reanimated/apply-animations-to-style
-                 {:top bottom-view-top}
-                 style/bottom-card)}
-        [card
-         (merge {:style {:flex 1}
-                 :gap   10}
-                bottom-card)
-         child-2]]]]]))
-
-(defn view
-  [props child-1 child-2]
-  [:f> f-view props child-1 child-2])
+  [{:keys [container-style top-card bottom-card]} child-1 child-2]
+  [rn/view
+   {:style (merge container-style style/outer-container)}
+   [blur/view
+    {:blur-type   :dark
+     :blur-amount 10
+     :style       {:flex                    1
+                   :border-top-left-radius  20
+                   :border-top-right-radius 20}}]
+   [rn/view
+    {:style {:flex             1
+             :background-color :transparent
+             :position         :absolute
+             :top              0
+             :left             0
+             :right            0
+             :bottom           0}}
+    [card
+     (merge {:gap   4
+             :top?  true
+             :style style/top-card}
+            top-card) child-1]
+    [card
+     (merge {:style style/bottom-card
+             :gap   20}
+            bottom-card) child-2]]])

src/quo2/components/empty_state/empty_state/view.cljs

@@ -3,10 +3,9 @@
             [quo2.components.empty-state.empty-state.styles :as styles]
             [quo2.components.markdown.text :as text]
             [react-native.core :as rn]
-            [react-native.fast-image :as fast-image]
-            [quo2.theme :as theme]))
+            [react-native.fast-image :as fast-image]))
 
-(defn- empty-state-internal
+(defn empty-state
   [{:keys        [customization-color image title description blur?]
     upper-button :upper-button
     lower-button :lower-button
@@ -33,18 +32,19 @@
                upper-button-on-press :on-press} upper-button]
      [rn/view {:style styles/button-container}
       [button/button
-       {:type                      :primary
-        :size                      32
-        :override-background-color (styles/upper-button-color customization-color)
-        :on-press                  upper-button-on-press}
+       (cond-> {:type                      :primary
+                :size                      32
+                :override-background-color (styles/upper-button-color customization-color)
+                :on-press                  upper-button-on-press}
+         blur? (assoc :override-theme :dark))
        upper-button-text]
+
       (when-let [{lower-button-text     :text
                   lower-button-on-press :on-press} lower-button]
         [button/button
-         {:style    {:margin-top 12}
-          :size     32
-          :type     :blur-bg
-          :on-press lower-button-on-press}
+         (cond-> {:style    {:margin-top 12}
+                  :size     32
+                  :type     :blur-bg
+                  :on-press lower-button-on-press}
+           blur? (assoc :override-theme :dark))
          lower-button-text])])])
-
-(def empty-state (theme/with-theme empty-state-internal))

src/quo2/components/inputs/profile_input/view.cljs

@@ -37,6 +37,7 @@
     [buttons/button
      {:accessibility-label       :select-profile-picture-button
       :type                      :grey
+      :override-theme            :dark
       :override-background-color (colors/alpha colors/white 0.05)
       :on-press                  on-press
       :icon-size                 20
@@ -49,5 +50,6 @@
     [title-input/title-input
      (merge title-input-props
             {:blur?               true
+             :override-theme      :dark
              :placeholder         placeholder
              :customization-color customization-color})]]])

src/quo2/components/inputs/title_input/style.cljs

@@ -3,50 +3,50 @@
             [react-native.platform :as platform]))
 
 (defn get-focused-placeholder-color
-  [blur? theme]
+  [blur? override-theme]
   (if blur?
-    (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-20 theme)
-    (colors/theme-colors colors/neutral-30 colors/neutral-60 theme))
+    (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-20 override-theme)
+    (colors/theme-colors colors/neutral-30 colors/neutral-60 override-theme))
 )
 
 (defn get-placeholder-color
-  [blur? theme]
+  [blur? override-theme]
   (if blur?
-    (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-30 theme)
-    (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)))
+    (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-30 override-theme)
+    (colors/theme-colors colors/neutral-40 colors/neutral-50 override-theme)))
 
 (defn- get-disabled-color
-  [blur? theme]
+  [blur? override-theme]
   (if blur?
     (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-30)
-    (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)))
+    (colors/theme-colors colors/neutral-40 colors/neutral-50 override-theme)))
 
 (defn- get-char-count-color
-  [blur? theme]
+  [blur? override-theme]
   (if blur?
     (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40)
-    (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)))
+    (colors/theme-colors colors/neutral-40 colors/neutral-50 override-theme)))
 
 (defn get-selection-color
-  [customization-color blur? theme]
+  [customization-color blur? override-theme]
   (colors/alpha (if blur?
-                  (colors/theme-colors colors/neutral-100 colors/white theme)
+                  (colors/theme-colors colors/neutral-100 colors/white override-theme)
                   (colors/custom-color customization-color
-                                       (if (or (= :dark theme) colors/dark?) 60 50)))
+                                       (if (or (= :dark override-theme) colors/dark?) 60 50)))
                 (if platform/ios? 1 0.2)))
 
 (def text-input-container {:flex 1})
 
 (defn title-text
-  [disabled? blur? theme]
+  [disabled? blur? override-theme]
   {:text-align-vertical :bottom
    :color               (if disabled?
-                          (get-disabled-color blur? theme)
-                          (colors/theme-colors colors/neutral-100 colors/white theme))})
+                          (get-disabled-color blur? override-theme)
+                          (colors/theme-colors colors/neutral-100 colors/white override-theme))})
 
 (defn char-count
-  [blur? theme]
-  {:color (get-char-count-color blur? theme)})
+  [blur? override-theme]
+  {:color (get-char-count-color blur? override-theme)})
 
 (def container
   {:flex-direction  :row

src/quo2/components/inputs/title_input/view.cljs

@@ -12,14 +12,14 @@
     (str 0 value)
     value))
 
-(defn- title-input-internal
+(defn title-input
   [{:keys [blur?
            on-change-text
            auto-focus
            placeholder
            max-length
            default-value
-           theme]
+           override-theme]
     :or   {max-length    0
            auto-focus    false
            default-value ""}}]
@@ -38,10 +38,10 @@
           (text/text-style
            {:size   :heading-2
             :weight :semi-bold
-            :style  (style/title-text disabled? blur? theme)})
+            :style  (style/title-text disabled? blur? override-theme)})
           :default-value default-value
           :accessibility-label :profile-title-input
-          :keyboard-appearance (theme/theme-value :light :dark theme)
+          :keyboard-appearance (theme/theme-value :light :dark override-theme)
           :on-focus #(swap! focused? (constantly true))
           :on-blur #(swap! focused? (constantly false))
           :auto-focus auto-focus
@@ -50,24 +50,22 @@
           :editable (not disabled?)
           :max-length max-length
           :placeholder placeholder
-          :selection-color (style/get-selection-color customization-color blur? theme)
+          :selection-color (style/get-selection-color customization-color blur? override-theme)
           :placeholder-text-color (if @focused?
-                                    (style/get-focused-placeholder-color blur? theme)
-                                    (style/get-placeholder-color blur? theme))}]]
+                                    (style/get-focused-placeholder-color blur? override-theme)
+                                    (style/get-placeholder-color blur? override-theme))}]]
        [rn/view
         {:style style/counter-container}
         [text/text
          [text/text
-          {:style (style/char-count blur? theme)
+          {:style (style/char-count blur? override-theme)
            :size  :paragraph-2}
           (pad-0
            (str
             (count @value)))]
          [text/text
-          {:style (style/char-count blur? theme)
+          {:style (style/char-count blur? override-theme)
            :size  :paragraph-2}
           (str "/"
                (pad-0
                 (str max-length)))]]]])))
-
-(def title-input (theme/with-theme title-input-internal))

src/quo2/components/list_items/channel.cljs

@@ -1,11 +1,12 @@
 (ns quo2.components.list-items.channel
   (:require [quo2.components.avatars.channel-avatar :as channel-avatar]
-            [quo2.components.common.unread-grey-dot.view :refer [unread-grey-dot]]
             [quo2.components.counter.counter :as quo2.counter]
             [quo2.components.icon :as quo2.icons]
             [quo2.components.markdown.text :as quo2.text]
             [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]))
+            [quo2.theme :as theme]
+            [react-native.core :as rn]
+            [quo2.components.common.unread-grey-dot.view :refer [unread-grey-dot]]))
 
 (def ^:private custom-props
   [:name :locked? :mentions-count :unread-messages?
@@ -20,20 +21,22 @@
         name-text      (:name props)]
     [rn/touchable-opacity standard-props
      [rn/view
-      {:style (cond-> {:height          48
-                       :border-radius   12
-                       :flex-direction  :row
-                       :justify-content :space-between
-                       :align-items     :center
-                       :width           "100%"
-                       :padding-left    12
-                       :padding-right   12}
-                is-active-channel? (assoc :background-color
-                                          (colors/theme-alpha channel-color 0.05 0.05)))}
+      {:style (merge {:height          48
+                      :display         :flex
+                      :border-radius   12
+                      :flex-direction  :row
+                      :justify-content :space-between
+                      :align-items     :center
+                      :width           "100%"
+                      :padding-left    12
+                      :padding-right   12}
+                     (when is-active-channel?
+                       {:background-color (colors/theme-alpha channel-color 0.05 0.05)}))}
       [rn/view
-       {:style               {:flex-direction  :row
-                              :justify-content :flex-start
-                              :align-items     :center}
+       {:display             :flex
+        :flex-direction      :row
+        :justify-content     :flex-start
+        :align-items         :center
         :accessible          true
         :accessibility-label :chat-name-text}
        [channel-avatar/channel-avatar
@@ -42,25 +45,30 @@
          :emoji-background-color (colors/theme-alpha channel-color 0.1 0.1)
          :emoji                  emoji}]
        [quo2.text/text
-        {:style  (cond-> {:margin-left 12}
-                   (and (not locked?) muted?)
-                   (assoc :color (colors/theme-colors colors/neutral-40 colors/neutral-60)))
+        {:style  (merge {:margin-left 12}
+                        (when (and (not locked?) muted?)
+                          {:color (if (theme/dark?) colors/neutral-60 colors/neutral-40)}))
          :weight :medium
-         :size   :paragraph-1}
-        (str "# " name-text)]]
-      (when-not locked?
-        [rn/view {:style {:height 20 :justify-content :center}}
-         (cond
-           muted?
-           [quo2.icons/icon :i/muted
-            {:size            20
-             :color           colors/neutral-40
-             :container-style {:margin-right 1 :margin-top 2}}]
-
-           (pos? (int mentions-count))
-           [rn/view {:style {:margin-right 2 :margin-top 2}}
-            [quo2.counter/counter {:override-bg-color channel-color}
-             mentions-count]]
-
-           unread-messages?
-           [unread-grey-dot :unviewed-messages-public])])]]))
+         :size   :paragraph-1} (str "# " name-text)]]
+      [rn/view
+       {:style {:height          20
+                :justify-content :center}}
+       (when (and (not locked?)
+                  muted?)
+         [quo2.icons/icon :i/muted
+          {:size            20
+           :color           colors/neutral-40
+           :container-style {:margin-right 1
+                             :margin-top   2}}])
+       (when (and (not locked?)
+                  (not muted?)
+                  (pos? (int mentions-count)))
+         [rn/view
+          {:style {:margin-right 2
+                   :margin-top   2}}
+          [quo2.counter/counter {:override-bg-color channel-color} mentions-count]])
+       (when (and (not locked?)
+                  (not muted?)
+                  (not (pos? (int mentions-count)))
+                  unread-messages?)
+         [unread-grey-dot :unviewed-messages-public])]]]))

src/quo2/components/loaders/skeleton/constants.cljs

@@ -1,95 +0,0 @@
-(ns quo2.components.loaders.skeleton.constants)
-
-(def ^:const layout-dimensions
-  {:messages      {:height      56
-                   :padding-top 12}
-   :list-items    {:height      56
-                   :padding-top 12}
-   :notifications {:height      90
-                   :padding-top 8}})
-
-(def ^:const content-dimensions
-  {:messages      {0 {:author  {:width         112
-                                :height        8
-                                :margin-bottom 8}
-                      :message {:width         144
-                                :height        16
-                                :margin-bottom 0}}
-                   1 {:author  {:width         96
-                                :height        8
-                                :margin-bottom 8}
-                      :message {:width         212
-                                :height        16
-                                :margin-bottom 0}}
-                   2 {:author  {:width         80
-                                :height        8
-                                :margin-bottom 8}
-                      :message {:width         249
-                                :height        16
-                                :margin-bottom 0}}
-                   3 {:author  {:width         124
-                                :height        8
-                                :margin-bottom 8}
-                      :message {:width         156
-                                :height        16
-                                :margin-bottom 0}}}
-   :list-items    {0 {:author  {:width         112
-                                :height        8
-                                :margin-bottom 0}
-                      :message {:width         144
-                                :height        16
-                                :margin-bottom 8}}
-                   1 {:author  {:width         96
-                                :height        8
-                                :margin-bottom 0}
-                      :message {:width         212
-                                :height        16
-                                :margin-bottom 8}}
-                   2 {:author  {:width         80
-                                :height        8
-                                :margin-bottom 0}
-                      :message {:width         249
-                                :height        16
-                                :margin-bottom 8}}
-                   3 {:author  {:width         124
-                                :height        8
-                                :margin-bottom 0}
-                      :message {:width         156
-                                :height        16
-                                :margin-bottom 8}}}
-   :notifications {0 {:author   {:width         109
-                                 :height        8
-                                 :margin-bottom 8}
-                      :message  {:width         167
-                                 :height        16
-                                 :margin-bottom 8}
-                      :message2 {:width         242
-                                 :height        30
-                                 :margin-bottom 0}}
-                   1 {:author   {:width         165
-                                 :height        8
-                                 :margin-bottom 8}
-                      :message  {:width         112
-                                 :height        16
-                                 :margin-bottom 8}
-                      :message2 {:width         294
-                                 :height        30
-                                 :margin-bottom 0}}
-                   2 {:author   {:width         136
-                                 :height        8
-                                 :margin-bottom 8}
-                      :message  {:width         178
-                                 :height        16
-                                 :margin-bottom 8}
-                      :message2 {:width         178
-                                 :height        30
-                                 :margin-bottom 0}}
-                   3 {:author   {:width         136
-                                 :height        8
-                                 :margin-bottom 8}
-                      :message  {:width         166
-                                 :height        16
-                                 :margin-bottom 8}
-                      :message2 {:width         256
-                                 :height        30
-                                 :margin-bottom 0}}}})

src/quo2/components/loaders/skeleton/style.cljs

@@ -1,29 +0,0 @@
-(ns quo2.components.loaders.skeleton.style
-  (:require [quo2.components.loaders.skeleton.constants :as constants]))
-
-(defn container
-  [content]
-  {:flex-direction :row
-   :padding        12
-   :padding-top    (get-in constants/layout-dimensions [content :padding-top])
-   :height         (get-in constants/layout-dimensions [content :height])})
-
-(defn avatar
-  [color]
-  {:height           32
-   :width            32
-   :border-radius    16
-   :background-color color})
-
-(def content-container
-  {:padding-left 8})
-
-(defn content-view
-  [{:keys [type index content color]}]
-  (let [{:keys [width height margin-bottom]}
-        (get-in constants/content-dimensions [content index type])]
-    {:height           height
-     :width            width
-     :border-radius    6
-     :background-color color
-     :margin-bottom    margin-bottom}))

src/quo2/components/loaders/skeleton/view.cljs

@@ -1,46 +0,0 @@
-(ns quo2.components.loaders.skeleton.view
-  (:require [quo2.theme :as theme]
-            [react-native.core :as rn]
-            [quo2.foundations.colors :as colors]
-            [quo2.components.loaders.skeleton.style :as style]
-            [quo2.components.loaders.skeleton.constants :as constants]))
-
-(defn- skeleton-item
-  [index content color]
-  [rn/view {:style (style/container content)}
-   [rn/view {:style (style/avatar color)}]
-   [rn/view {:style style/content-container}
-    [rn/view
-     {:style (style/content-view
-              {:type    (if (= content :list-items) :message :author)
-               :index   index
-               :content content
-               :color   color})}]
-    [rn/view
-     {:style (style/content-view
-              {:type    (if (= content :list-items) :author :message)
-               :index   index
-               :content content
-               :color   color})}]
-    (when (= content :notifications)
-      [rn/view
-       {:style (style/content-view {:type    :message2
-                                    :index   index
-                                    :content content
-                                    :color   color})}])]])
-
-(defn- internal-view
-  [{:keys [content theme blur? parent-height]}]
-  (let [number-of-skeletons (int (Math/floor (/ parent-height
-                                                (get-in constants/layout-dimensions [content :height]))))
-        color               (cond
-                              blur?           colors/white-opa-5
-                              (= theme :dark) colors/neutral-90
-                              :else           colors/neutral-5)]
-    [rn/view {:style {:padding 8}}
-     (doall
-      (for [index (range number-of-skeletons)]
-        ^{:key index}
-        [skeleton-item (mod index 4) content color]))]))
-
-(def view (theme/with-theme internal-view))

src/quo2/components/markdown/list/component_spec.cljs

@@ -1,38 +0,0 @@
-(ns quo2.components.markdown.list.component-spec
-  (:require [quo2.components.markdown.list.view :as list]
-            [test-helpers.component :as h]))
-
-(h/describe "tests for markdown/list component"
-  (h/test "renders component with title"
-    (h/render [list/view {:title "test title"}])
-    (h/is-truthy (h/get-by-text "test title")))
-
-  (h/test "renders component with description"
-    (h/render [list/view
-               {:title       "test title"
-                :description "test description"}])
-    (h/is-truthy (h/get-by-text "test description")))
-
-  (h/test "renders component with title and description"
-    (h/render [list/view
-               {:title       "test title"
-                :description "test description"}])
-    (h/is-truthy (h/get-by-text "test title"))
-    (h/is-truthy (h/get-by-text "test description")))
-
-  (h/test "renders step component when step-number is valid and type is step"
-    (h/render [list/view
-               {:type        :step
-                :step-number 1}])
-    (h/is-truthy (h/get-by-label-text :step-counter)))
-
-  (h/test "renders decription with a context tag component and description after the tag"
-    (h/render [list/view
-               {:step-number           1
-                :description           "Lorem ipsum "
-                :tag-name              "dolor"
-                :description-after-tag "text after tag"}])
-    (h/is-truthy (h/get-by-text "Lorem ipsum"))
-    (h/is-truthy (h/get-by-label-text :user-avatar))
-    (h/is-truthy (h/get-by-text "dolor"))
-    (h/is-truthy (h/get-by-text "text after tag"))))

src/quo2/components/markdown/list/style.cljs

@@ -1,15 +0,0 @@
-(ns quo2.components.markdown.list.style)
-
-(defn container
-  [container-style]
-  (merge container-style
-         {:flex-direction :row
-          :flex           1
-          :align-items    :flex-start}))
-
-(def index
-  {:margin-left 5})
-
-(def text-container
-  {:margin-left 8
-   :flex        1})

src/quo2/components/markdown/list/view.cljs

@@ -1,65 +0,0 @@
-(ns quo2.components.markdown.list.view
-  (:require [react-native.core :as rn]
-            [quo2.components.markdown.text :as text]
-            [quo2.components.counter.step.view :as step]
-            [quo2.components.markdown.list.style :as style]
-            [quo2.components.icon :as icon]
-            [quo2.foundations.colors :as colors]
-            [quo2.theme :as theme]
-            [quo2.components.tags.context-tag.view :as context-tag]))
-
-(defn get-colors
-  [theme blur?]
-  (cond (and blur? (= theme :dark)) colors/white-opa-40
-        (= theme :dark)             colors/neutral-50
-        :else                       colors/neutral-40))
-
-(defn description-text
-  [{:keys [description tag-name tag-picture description-after-tag blur?]}]
-  (if-not tag-name
-    [text/text
-     {:accessibility-label :list-item-description
-      :size                :paragraph-2}
-     description]
-    [rn/view {:style {:flex-direction :row :align-items :center}}
-     [text/text
-      {:accessibility-label :list-item-description
-       :size                :paragraph-2}
-      description]
-     [rn/view {:style {:margin-left 4}}
-      [context-tag/context-tag {:blur? blur?} tag-picture tag-name]]
-     [text/text
-      {:style               {:margin-left 4}
-       :accessibility-label :list-item-description-after-tag
-       :size                :paragraph-2}
-      description-after-tag]]))
-
-(defn- internal-view
-  [{:keys [theme title description tag-picture tag-name description-after-tag step-number
-           customization-color type blur? container-style]
-    :or   {type :bullet}}]
-  [rn/view {:style (style/container container-style)}
-   [rn/view {:style style/index}
-    (if (= type :step)
-      [step/step
-       {:in-blur-view?       blur?
-        :customization-color customization-color
-        :type                (if customization-color :complete :neutral)} step-number]
-      [icon/icon :i/bullet {:color (get-colors theme blur?)}])]
-   [rn/view {:style style/text-container}
-    (when title
-      [text/text
-       {:accessibility-label :list-item-title
-        :weight              :semi-bold
-        :size                :paragraph-2}
-       title])
-    (when description
-      [rn/view (when title {:style {:margin-top 0}})
-       [description-text
-        {:description           description
-         :tag-name              tag-name
-         :tag-picture           tag-picture
-         :description-after-tag description-after-tag
-         :blur?                 blur?}]])]])
-
-(def view (theme/with-theme internal-view))

src/quo2/components/navigation/page_nav.cljs

@@ -5,8 +5,7 @@
             [quo2.components.icon :as icons]
             [quo2.components.markdown.text :as text]
             [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]
-            [quo2.theme :as theme]))
+            [react-native.core :as rn]))
 
 (def ^:private centrify-style
   {:display         :flex
@@ -31,7 +30,7 @@
            {:no-color true})))
 
 (defn left-section-view
-  [{:keys [on-press icon accessibility-label type icon-background-color]
+  [{:keys [on-press icon accessibility-label type icon-background-color icon-override-theme]
     :or   {type :grey}}
    put-middle-section-on-left?]
   [rn/view {:style (when put-middle-section-on-left? {:margin-right 5})}
@@ -41,6 +40,7 @@
      :type                      type
      :size                      32
      :accessibility-label       accessibility-label
+     :override-theme            icon-override-theme
      :override-background-color icon-background-color}
     icon]])
 
@@ -87,10 +87,10 @@
 
 (defn- mid-section-view
   [{:keys [horizontal-description? one-icon-align-left? type left-align?
-           main-text right-icon main-text-icon-color left-icon on-press avatar theme]
+           main-text right-icon main-text-icon-color left-icon on-press avatar]
     :as   props}]
-  (let [text-color           (colors/theme-colors colors/neutral-95 colors/neutral-5 theme)
-        text-secondary-color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
+  (let [text-color           (if (colors/dark?) colors/neutral-5 colors/neutral-95)
+        text-secondary-color (if (colors/dark?) colors/neutral-40 colors/neutral-50)
         component-instance   [mid-section-comp (assoc props :text-secondary-color text-secondary-color)]]
     [rn/touchable-opacity {:on-press on-press}
      [rn/view
@@ -152,7 +152,7 @@
                   :justify-content :flex-end)}
    (let [last-icon-index (-> right-section-buttons count dec)]
      (map-indexed (fn [index
-                       {:keys [icon on-press type style icon-background-color
+                       {:keys [icon on-press type style icon-override-theme icon-background-color
                                accessibility-label label]
                         :or   {type :grey}}]
                     ^{:key index}
@@ -168,11 +168,12 @@
                        :type                      type
                        :before                    (when label icon)
                        :size                      32
+                       :override-theme            icon-override-theme
                        :override-background-color icon-background-color}
                       (if label label icon)]])
                   right-section-buttons))])
 
-(defn- page-nav-internal
+(defn page-nav
   "[page-nav opts]
    opts
    { :one-icon-align-left?    true/false
@@ -197,26 +198,25 @@
      {:type                  button-type
       :on-press              event
       :icon                  icon
+      :icon-override-theme   :light/:dark
      }
      :right-section-buttons vector of
       {:type                  button-type
        :on-press              event
        :icon                  icon
+       :icon-override-theme   :light/:dark
       }
-      :theme :light or :dark
    }
   "
   [{:keys [container-style one-icon-align-left? horizontal-description?
            align-mid? page-nav-color page-nav-background-uri
            mid-section
            left-section
-           right-section-buttons
-           theme]}]
+           right-section-buttons]}]
   (let [put-middle-section-on-left? (or align-mid?
                                         (> (count right-section-buttons) 1))
         mid-section-props
         {:type                    (:type mid-section)
-         :theme                   theme
          :horizontal-description? horizontal-description?
          :description-img         (:description-img mid-section)
          :main-text               (:main-text mid-section)
@@ -258,5 +258,3 @@
           (not put-middle-section-on-left?)
           [mid-section-view mid-section-props]))]
      [right-section-view right-section-buttons]]))
-
-(def page-nav (theme/with-theme page-nav-internal))

src/quo2/components/notifications/toast/view.cljs

@@ -21,7 +21,8 @@
 
 (defn toast-undo-action
   [duration on-press override-theme]
-  [toast-action-container {:on-press on-press :accessibility-label :toast-undo-action}
+  [toast-action-container
+   {:on-press on-press :accessibility-label :toast-undo-action}
    [rn/view {:style {:margin-right 5}}
     [count-down-circle/circle-timer {:duration duration}]]
    [text/text
@@ -30,17 +31,17 @@
 
 (defn- toast-container
   [{:keys [left title text right container-style override-theme]}]
-  [rn/view {:style (merge style/box-container container-style)}
+  [rn/view
+   {:style (merge style/box-container container-style)}
    [blur/view
     {:style         style/blur-container
      :blur-amount   13
      :blur-radius   10
      :blur-type     :transparent
      :overlay-color :transparent}]
-
-   [rn/view {:style (style/content-container override-theme)}
-    [rn/view {:style style/left-side-container}
-     left]
+   [rn/view
+    {:style (style/content-container override-theme)}
+    [rn/view {:style style/left-side-container} left]
     [rn/view {:style style/right-side-container}
      (when title
        [text/text
@@ -56,7 +57,7 @@
          :style               (style/text override-theme)
          :accessibility-label :toast-content}
         text])]
-    right]])
+    (when right right)]])
 
 (defn toast
   [{:keys [icon icon-color title text action undo-duration undo-on-press container-style

src/quo2/components/settings/reorder_item/component_spec.cljs

@@ -26,4 +26,4 @@
                {:data [{:id    1
                         :label "Item 1"}
                       ]} types/tab])
-    (h/is-truthy (h/get-by-text "Item 1"))))
+    (h/is-truthy (h/get-by-text "Item 1"))))

src/quo2/core.cljs

@@ -49,8 +49,6 @@
     quo2.components.list-items.preview-list
     quo2.components.list-items.user-list
     quo2.components.loaders.skeleton
-    quo2.components.loaders.skeleton.view
-    quo2.components.markdown.list.view
     quo2.components.markdown.text
     quo2.components.messages.author.view
     quo2.components.messages.gap
@@ -93,6 +91,7 @@
     quo2.components.settings.reorder-item.view
     quo2.components.community.channel-actions))
 
+(def text quo2.components.markdown.text/text)
 (def icon quo2.components.icon/icon)
 (def separator quo2.components.separator/separator)
 (def header quo2.components.header/header)
@@ -108,11 +107,12 @@
 (def group-avatar-tag quo2.components.tags.context-tag.view/group-avatar-tag)
 (def audio-tag quo2.components.tags.context-tag.view/audio-tag)
 (def community-tag quo2.components.tags.context-tag.view/community-tag)
-
-
+(def floating-shell-button quo2.components.navigation.floating-shell-button/floating-shell-button)
+(def page-nav quo2.components.navigation.page-nav/page-nav)
 (def disclaimer quo2.components.selectors.disclaimer.view/view)
 (def checkbox quo2.components.selectors.selectors.view/checkbox)
 (def filter quo2.components.selectors.filter.view/view)
+(def skeleton quo2.components.loaders.skeleton/skeleton)
 (def author quo2.components.messages.author.view/author)
 
 ;;;; SELECTORS
@@ -190,18 +190,6 @@
 (def preview-list quo2.components.list-items.preview-list/preview-list)
 (def user-list quo2.components.list-items.user-list/user-list)
 
-;;;; LOADERS
-(def skeleton quo2.components.loaders.skeleton/skeleton)
-(def static-skeleton quo2.components.loaders.skeleton.view/view)
-
-;;;; NAVIGATION
-(def floating-shell-button quo2.components.navigation.floating-shell-button/floating-shell-button)
-(def page-nav quo2.components.navigation.page-nav/page-nav)
-
-;;;; MARKDOWN
-(def markdown-list quo2.components.markdown.list.view/view)
-(def text quo2.components.markdown.text/text)
-
 ;;;; NOTIFICATIONS
 (def activity-log quo2.components.notifications.activity-log.view/view)
 (def info-count quo2.components.notifications.info-count/info-count)

src/quo2/core_spec.cljs

@@ -23,7 +23,6 @@
     [quo2.components.links.url-preview-list.component-spec]
     [quo2.components.links.url-preview.component-spec]
     [quo2.components.markdown.--tests--.text-component-spec]
-    [quo2.components.markdown.list.component-spec]
     [quo2.components.notifications.notification.component-spec]
     [quo2.components.onboarding.small-option-card.component-spec]
     [quo2.components.password.tips.component-spec]

src/quo2/foundations/colors.cljs

@@ -88,6 +88,8 @@
 (def neutral-100-opa-5 (alpha neutral-100 0.05))
 (def neutral-100-opa-10 (alpha neutral-100 0.1))
 (def neutral-100-opa-30 (alpha neutral-100 0.3))
+(def neutral-100-opa-50 (alpha neutral-100 0.5))
+
 (def neutral-100-opa-60 (alpha neutral-100 0.6))
 (def neutral-100-opa-70 (alpha neutral-100 0.7))
 (def neutral-100-opa-80 (alpha neutral-100 0.8))

src/react_native/reanimated.cljs

@@ -81,8 +81,7 @@
   {:linear  (bezier 0 0 1 1)
    :easing1 (bezier 0.25 0.1 0.25 1)
    :easing2 (bezier 0 0.3 0.6 0.9)
-   :easing3 (bezier 0.3 0.3 0.3 0.9)
-   :easing4 (bezier 0.3 0.3 1 1)})
+   :easing3 (bezier 0.3 0.3 0.3 0.9)})
 
 ;; Helper functions
 (defn get-shared-value

src/react_native/safe_area.cljs

@@ -10,8 +10,7 @@
 
 (defn- get-static-bottom
   []
-  (some-> StaticSafeAreaInsets
-          (oops/oget "safeAreaInsetsBottom")))
+  (oops/oget StaticSafeAreaInsets "safeAreaInsetsBottom"))
 
 (defn get-top
   []
@@ -21,8 +20,8 @@
 
 (defn get-bottom
   []
-  (if-let [bottom (and platform/ios? (get-static-bottom))]
-    bottom
+  (if platform/ios?
+    (get-static-bottom)
     0))
 
 (defn get-insets

src/status_im/data_store/invitations.cljs

@@ -6,4 +6,4 @@
   (-> message
       (clojure.set/rename-keys {:chatId              :chat-id
                                 :introductionMessage :introduction-message
-                                :messageType         :message-type})))
+                                :messageType         :message-type})))

src/status_im/fleet/default_fleet.cljs

@@ -1,4 +1,4 @@
 (ns status-im.fleet.default-fleet (:require-macros [status-im.utils.slurp :refer [slurp]]))
 
 (def default-fleets
-  (slurp "resources/config/fleets.json"))
+  (slurp "resources/config/fleets.json"))

src/status_im/keycard/test_menu.cljs

@@ -28,4 +28,4 @@
    [button "conn sell" :connect-selected-card simulated-keycard/connect-selected-card]
    [button "pair" :connect-pairing-card simulated-keycard/connect-pairing-card]
    [button "disc" :disconnect-card simulated-keycard/disconnect-card]
-   [button "res" :keycard-reset-state simulated-keycard/reset-state]])
+   [button "res" :keycard-reset-state simulated-keycard/reset-state]])

src/status_im/signals/core.cljs

@@ -80,9 +80,7 @@
         multiaccount-data               (when received-account?
                                           (merge account {:password password}))
         navigate-to-syncing-devices?    (and (or connection-success? error-on-pairing?) receiver?)
-        user-in-syncing-devices-screen? (or (= (:view-id db) :syncing-progress)
-                                            (= (:view-id db) :syncing-progress-intro))
-        user-in-sign-in-intro-screen?   (= (:view-id db) :sign-in-intro)]
+        user-in-syncing-devices-screen? (= (:view-id db) :syncing-progress)]
     (merge {:db (cond-> db
                   connection-success?
                   (assoc-in [:syncing :pairing-status] :connected)
@@ -97,9 +95,7 @@
                   (assoc-in [:syncing :pairing-status] :completed))}
            (cond
              (and navigate-to-syncing-devices? (not user-in-syncing-devices-screen?))
-             {:dispatch (if user-in-sign-in-intro-screen?
-                          [:navigate-to-within-stack [:syncing-progress-intro :sign-in-intro]]
-                          [:navigate-to :syncing-progress])}
+             {:dispatch [:navigate-to :syncing-progress]}
 
              (and completed-pairing? sender?)
              {:dispatch [:syncing/clear-states]}

src/status_im/ui/components/checkbox/styles.cljs

@@ -11,4 +11,4 @@
    :justify-content  :center
    :border-radius    2
    :width            18
-   :height           18})
+   :height           18})

src/status_im/ui/components/fast_image.cljs

@@ -30,4 +30,4 @@
           (if @error?
             [icons/icon :main-icons/cancel]
             (when-not @loaded?
-              [react/activity-indicator {:animating true}]))])])))
+              [react/activity-indicator {:animating true}]))])])))

src/status_im/ui/components/list/styles.cljs

@@ -60,4 +60,4 @@
    :android     {:margin-bottom 3}
    :ios         {:margin-bottom 10}})
 
-(def section-header-container {})
+(def section-header-container {})

src/status_im/ui/components/plus_button.cljs

@@ -42,4 +42,4 @@
        [react/activity-indicator
         {:color     colors/white-persist
          :animating true}]
-       [icons/icon :main-icons/add {:color colors/white-persist}])]]])
+       [icons/icon :main-icons/add {:color colors/white-persist}])]]])

src/status_im/ui/components/slider.cljs

@@ -6,4 +6,4 @@
 (def slider (reagent/adapt-react-class Slider))
 
 (def animated-slider
-  (reagent/adapt-react-class (.createAnimatedComponent Animated Slider)))
+  (reagent/adapt-react-class (.createAnimatedComponent Animated Slider)))

src/status_im/ui/components/tabbar/core.cljs

@@ -7,4 +7,4 @@
     56
     (if platform/iphone-x?
       84
-      50)))
+      50)))

src/status_im/ui/components/tabs.cljs

@@ -32,4 +32,4 @@
     [react/view {:padding-horizontal 12 :padding-vertical 8}
      [react/text
       {:style {:font-weight "500" :color (if active? colors/white colors/blue) :line-height 22}}
-      label]]]])
+      label]]]])

src/status_im/ui/screens/chat/styles/message/sheets.cljs

@@ -5,4 +5,4 @@
   {:color       colors/gray
    :padding     24
    :line-height 22
-   :font-size   15})
+   :font-size   15})

src/status_im/ui/screens/dapps_permissions/styles.cljs

@@ -7,4 +7,4 @@
    :border-radius    20
    :background-color colors/gray-lighter
    :align-items      :center
-   :justify-content  :center})
+   :justify-content  :center})

src/status_im/ui/screens/help_center/styles.cljs

@@ -1 +1 @@
-(ns status-im.ui.screens.help-center.styles)
+(ns status-im.ui.screens.help-center.styles)

src/status_im/ui/screens/link_previews_settings/styles.cljs

@@ -10,4 +10,4 @@
    :justify-content :space-between})
 
 (def enable-all
-  {:align-self :flex-end})
+  {:align-self :flex-end})

src/status_im/ui/screens/pairing/styles.cljs

@@ -78,4 +78,4 @@
 (def bottom-container
   {:flex-direction    :row
    :margin-horizontal 12
-   :margin-vertical   15})
+   :margin-vertical   15})

src/status_im/ui/screens/profile/user/styles.cljs

@@ -3,4 +3,4 @@
 (def share-link-button
   {:margin-top        12
    :margin-horizontal 16
-   :margin-bottom     16})
+   :margin-bottom     16})

src/status_im/ui/screens/qr_scanner/styles.cljs

@@ -8,4 +8,4 @@
    :right           0
    :align-items     :center
    :justify-content :center
-   :flex            1})
+   :flex            1})

src/status_im/ui/screens/signing/styles.cljs

@@ -61,4 +61,4 @@
    :padding-left       16
    :color              (if disabled? colors/black colors/white-persist)
    :padding-horizontal 16
-   :padding-vertical   10})
+   :padding-vertical   10})

src/status_im/ui/screens/stickers/styles.cljs

@@ -26,4 +26,4 @@
    :border-radius    14
    :background-color colors/green
    :align-items      :center
-   :justify-content  :center})
+   :justify-content  :center})

src/status_im/ui/screens/wallet/components/styles.cljs

@@ -9,4 +9,4 @@
 (defn separator-dark
   []
   {:height           1
-   :background-color colors/black-transparent})
+   :background-color colors/black-transparent})

src/status_im/ui/screens/wallet/components/views.cljs

@@ -18,4 +18,4 @@
      :style  (merge
               {:width  (or width 40)
                :height (or height 40)}
-              image-style)}]])
+              image-style)}]])

src/status_im/ui/screens/wallet/send/styles.cljs

@@ -30,4 +30,4 @@
    :margin-bottom      12
    :align-items        :center
    :justify-content    :center
-   :padding-horizontal 12})
+   :padding-horizontal 12})

src/status_im/ui/screens/wallet_connect/session_proposal/styles.cljs

@@ -151,4 +151,4 @@
 
 (def app-info-container
   {:flex-direction :column
-   :flex           1})
+   :flex           1})

src/status_im/utils/image.cljs

@@ -5,4 +5,4 @@
   [photo-path]
   (when-not (and (not (string/blank? photo-path))
                  (string/starts-with? photo-path "contacts://"))
-    {:uri photo-path}))
+    {:uri photo-path}))

src/status_im/utils/signing_phrase/dictionaries/en.cljs

@@ -622,4 +622,4 @@
    "yoke"
    "yurt"
    "zinc"
-   "zone"])
+   "zone"])

src/status_im/wallet/utils.cljs

@@ -21,4 +21,4 @@
 ;; ticker on exchange networks. We handle that with `symbol-exchange` override.
 (defn exchange-symbol
   [{:keys [symbol-exchange symbol-display symbol]}]
-  (clojure.core/name (or symbol-exchange symbol-display symbol)))
+  (clojure.core/name (or symbol-exchange symbol-display symbol)))

src/status_im2/common/bottom_sheet/style.cljs

@@ -16,7 +16,8 @@
 (defn sheet
   [{:keys [top bottom]} window-height override-theme padding-bottom-override shell?]
   {:position                :absolute
-   :max-height              (- window-height top)
+   :max-height              (cond-> window-height
+                              platform/ios? (- top))
    :z-index                 1
    :bottom                  0
    :left                    0

src/status_im2/common/bottom_sheet_screen/style.cljs

@@ -15,10 +15,10 @@
     :right            0}))
 
 (defn main-view
-  [translate-y theme]
+  [translate-y override-theme]
   (reanimated/apply-animations-to-style
    {:transform [{:translate-y translate-y}]}
-   {:background-color        (colors/theme-colors colors/white colors/neutral-95 theme)
+   {:background-color        (colors/theme-colors colors/white colors/neutral-95 override-theme)
     :border-top-left-radius  20
     :border-top-right-radius 20
     :flex                    1
@@ -36,9 +36,9 @@
    :align-items     :center})
 
 (defn handle
-  [theme]
+  [override-theme]
   {:width            32
    :height           4
    :border-radius    100
-   :background-color (colors/theme-colors colors/neutral-100 colors/white theme)
+   :background-color (colors/theme-colors colors/neutral-100 colors/white override-theme)
    :opacity          (theme/theme-value 0.05 0.1)})

src/status_im2/common/bottom_sheet_screen/view.cljs

@@ -1,15 +1,15 @@
 (ns status-im2.common.bottom-sheet-screen.view
-  (:require [oops.core :as oops]
-            [quo2.theme :as theme]
-            [react-native.core :as rn]
-            [react-native.gesture :as gesture]
-            [react-native.hooks :as hooks]
-            [react-native.platform :as platform]
-            [react-native.reanimated :as reanimated]
-            [react-native.safe-area :as safe-area]
-            [reagent.core :as reagent]
-            [status-im2.common.bottom-sheet-screen.style :as style]
-            [utils.re-frame :as rf]))
+  (:require
+    [react-native.gesture :as gesture]
+    [react-native.hooks :as hooks]
+    [react-native.platform :as platform]
+    [react-native.reanimated :as reanimated]
+    [oops.core :as oops]
+    [react-native.safe-area :as safe-area]
+    [status-im2.common.bottom-sheet-screen.style :as style]
+    [react-native.core :as rn]
+    [reagent.core :as reagent]
+    [utils.re-frame :as rf]))
 
 (def ^:const drag-threshold 200)
 
@@ -43,11 +43,12 @@
   (let [y (oops/oget e "nativeEvent.contentOffset.y")]
     (reset! curr-scroll y)))
 
-(defn- f-view
-  [_]
-  (let [scroll-enabled (reagent/atom true)
-        curr-scroll    (reagent/atom 0)]
-    (fn [{:keys [content skip-background? theme]}]
+(defn f-view
+  [content skip-background?]
+  (let [scroll-enabled           (reagent/atom true)
+        curr-scroll              (reagent/atom 0)
+        {:keys [override-theme]} (rf/sub [:get-screen-params])]
+    (fn []
       (let [insets           (safe-area/get-insets)
             {:keys [height]} (rn/get-window)
             padding-top      (:top insets)
@@ -70,18 +71,12 @@
            [reanimated/view {:style (style/background opacity)}])
          [gesture/gesture-detector
           {:gesture (drag-gesture translate-y opacity scroll-enabled curr-scroll close)}
-          [reanimated/view {:style (style/main-view translate-y theme)}
+          [reanimated/view {:style (style/main-view translate-y override-theme)}
            [rn/view {:style style/handle-container}
-            [rn/view {:style (style/handle theme)}]]
+            [rn/view {:style (style/handle override-theme)}]]
            [content
             {:insets         insets
              :close          close
              :scroll-enabled scroll-enabled
              :current-scroll curr-scroll
              :on-scroll      #(on-scroll % curr-scroll)}]]]]))))
-
-(defn- internal-view
-  [params]
-  [:f> f-view params])
-
-(def view (theme/with-theme internal-view))

src/status_im2/common/plus_button/view.cljs

@@ -10,4 +10,4 @@
     :accessibility-label (or accessibility-label :plus-button)
     :on-press            on-press
     :customization-color customization-color}
-   :i/add])
+   :i/add])

src/status_im2/common/toasts/animation.cljs

@@ -1,57 +0,0 @@
-(ns status-im2.common.toasts.animation
-  (:require [react-native.gesture :as gesture]
-            [react-native.reanimated :as reanimated]))
-
-(def slide-out-up-animation
-  (-> ^js reanimated/slide-out-up-animation
-      (.springify)
-      (.damping 20)
-      (.stiffness 12)))
-
-(def slide-in-up-animation
-  (-> ^js reanimated/slide-in-up-animation
-      (.springify)
-      (.damping 20)
-      (.stiffness 150)))
-
-(def linear-transition
-  (-> ^js reanimated/linear-transition
-      .springify
-      (.damping 20)
-      (.stiffness 170)))
-
-(defn- reset-translate-y
-  ([translate-y]
-   (reset-translate-y translate-y 0))
-  ([translate-y spring-value]
-   (reanimated/animate-shared-value-with-spring
-    translate-y
-    spring-value
-    {:mass 1 :damping 20 :stiffness 300})))
-
-(defn- dismiss
-  [translate-y set-dismissed-locally close-toast]
-  (reset-translate-y translate-y -500)
-  (set-dismissed-locally)
-  (close-toast))
-
-(defn on-update-gesture
-  [translate-y set-dismissed-locally close-toast]
-  (fn [^js evt]
-    (let [evt-translation-y (.-translationY evt)
-          pan-down?         (> evt-translation-y 100)
-          pan-up?           (< evt-translation-y -30)]
-      (cond
-        pan-down? (reset-translate-y translate-y)
-        pan-up?   (dismiss translate-y set-dismissed-locally close-toast)
-        :else     (reanimated/set-shared-value translate-y evt-translation-y)))))
-
-(defn pan-gesture
-  [{:keys [clear-timer create-timer translate-y close-toast set-dismissed-locally
-           dismissed-locally?]}]
-  (-> (gesture/gesture-pan)
-      (gesture/on-start clear-timer)
-      (gesture/on-update (on-update-gesture translate-y set-dismissed-locally close-toast))
-      (gesture/on-end #(when-not dismissed-locally?
-                         (reanimated/set-shared-value translate-y 0)
-                         (create-timer)))))

src/status_im2/common/toasts/style.cljs

@@ -1,12 +1,13 @@
 (ns status-im2.common.toasts.style)
 
 (def outmost-transparent-container
-  {:elevation       2
-   :pointer-events  :box-none
-   :padding-top     52
-   :flex-direction  :column
-   :justify-content :center
-   :align-items     :center})
+  {:elevation        2
+   :pointer-events   :box-none
+   :padding-top      52
+   :flex-direction   :column
+   :justify-content  :center
+   :align-items      :center
+   :background-color :transparent})
 
 (def each-toast-container
   {:width         "100%"

src/status_im2/common/toasts/view.cljs

@@ -1,56 +1,89 @@
 (ns status-im2.common.toasts.view
   (:require [quo2.core :as quo]
-            [react-native.background-timer :as background-timer]
             [react-native.core :as rn]
             [react-native.gesture :as gesture]
             [react-native.reanimated :as reanimated]
             [reagent.core :as reagent]
-            [status-im2.common.toasts.animation :as animation]
+            [react-native.background-timer :as background-timer]
             [status-im2.common.toasts.style :as style]
             [utils.re-frame :as rf]))
 
 (defn toast
-  [toast-id]
-  (let [{:keys [type] :as toast-opts} (rf/sub [:toasts/toast toast-id])]
+  [id]
+  (let [{:keys [type] :as toast-opts} (rf/sub [:toasts/toast id])]
     (if (= type :notification)
       [quo/notification toast-opts]
       [quo/toast toast-opts])))
 
+(defn reset-translate-y
+  [translate-y]
+  (reanimated/animate-shared-value-with-spring translate-y
+                                               0
+                                               {:mass      1
+                                                :damping   20
+                                                :stiffness 300}))
+
+(defn dismiss
+  [translate-y dismissed-locally? close!]
+  (reanimated/animate-shared-value-with-spring
+   translate-y
+   -500
+   {:mass 1 :damping 20 :stiffness 300})
+  (reset! dismissed-locally? true)
+  (close!))
+
 (defn f-container
-  [toast-id]
-  (let [dismissed-locally?    (reagent/atom false)
-        set-dismissed-locally #(reset! dismissed-locally? true)
-        close-toast           #(rf/dispatch [:toasts/close toast-id])
-        timer                 (reagent/atom nil)
-        clear-timer           #(background-timer/clear-timeout @timer)]
+  [id]
+  (let [dismissed-locally? (reagent/atom false)
+        close!             #(rf/dispatch [:toasts/close id])
+        timer              (reagent/atom nil)
+        clear-timer        #(background-timer/clear-timeout @timer)]
     (fn []
-      (let [duration     (or (rf/sub [:toasts/toast-cursor toast-id :duration]) 3000)
-            on-dismissed (or (rf/sub [:toasts/toast-cursor toast-id :on-dismissed]) identity)
-            create-timer #(reset! timer (background-timer/set-timeout close-toast duration))
-            translate-y  (reanimated/use-shared-value 0)
-            pan-gesture  (animation/pan-gesture {:clear-timer           clear-timer
-                                                 :create-timer          create-timer
-                                                 :translate-y           translate-y
-                                                 :close-toast           close-toast
-                                                 :set-dismissed-locally set-dismissed-locally
-                                                 :dismissed-locally?    @dismissed-locally?})]
+      (let [duration (or (rf/sub [:toasts/toast-cursor id :duration]) 3000)
+            on-dismissed (or (rf/sub [:toasts/toast-cursor id :on-dismissed]) identity)
+            create-timer (fn []
+                           (reset! timer (background-timer/set-timeout close! duration)))
+            translate-y (reanimated/use-shared-value 0)
+            pan
+            (->
+              (gesture/gesture-pan)
+              (gesture/on-start clear-timer)
+              (gesture/on-update
+               (fn [^js evt]
+                 (let [evt-translation-y (.-translationY evt)
+                       pan-down?         (> evt-translation-y 100)
+                       pan-up?           (< evt-translation-y -30)]
+                   (cond
+                     pan-down? (reset-translate-y translate-y)
+                     pan-up? (dismiss translate-y dismissed-locally? close!)
+                     :else
+                     (reanimated/set-shared-value translate-y
+                                                  evt-translation-y)))))
+              (gesture/on-end (fn [_]
+                                (when-not @dismissed-locally?
+                                  (reanimated/set-shared-value translate-y 0)
+                                  (create-timer)))))]
         ;; create auto dismiss timer, clear timer when unmount or duration changed
         (rn/use-effect (fn [] (create-timer) clear-timer) [duration])
-        (rn/use-unmount #(on-dismissed toast-id))
-
-        [gesture/gesture-detector {:gesture pan-gesture}
+        (rn/use-unmount #(on-dismissed id))
+        [gesture/gesture-detector {:gesture pan}
          [reanimated/view
-          {:entering animation/slide-in-up-animation
-           :exiting  animation/slide-out-up-animation
-           :layout   animation/linear-transition
-           :style    (reanimated/apply-animations-to-style
-                      {:transform [{:translateY translate-y}]}
-                      style/each-toast-container)}
-          [toast toast-id]]]))))
+          {;; TODO: this will enable layout animation at runtime and causing flicker on android
+           ;; we need to resolve this and re-enable layout animation
+           ;; issue at https://github.com/status-im/status-mobile/issues/14752
+           ;; :entering slide-in-up-animation
+           ;; :exiting  slide-out-up-animation
+           ;; :layout   reanimated/linear-transition
+           :style (reanimated/apply-animations-to-style
+                   {:transform [{:translateY translate-y}]}
+                   style/each-toast-container)}
+          [toast id]]]))))
 
 (defn toasts
   []
-  (->> (rf/sub [:toasts])
-       :ordered
-       (into [rn/view {:style style/outmost-transparent-container}]
-             (map #(with-meta [:f> f-container %] {:key %})))))
+  (let [toasts-ordered (:ordered (rf/sub [:toasts]))]
+    [into
+     [rn/view
+      {:style style/outmost-transparent-container}]
+     (doall
+      (map (fn [id] ^{:key id} [:f> f-container id]) toasts-ordered))]))

src/status_im2/constants.cljs

@@ -336,6 +336,3 @@
 (def ^:const image-description-in-lightbox? false)
 
 (def ^:const audio-max-duration-ms 120000)
-
-(def ^:const onboarding-modal-animation-duration 300)
-(def ^:const onboarding-modal-animation-delay 400)

src/status_im2/contexts/chat/composer/constants.cljs

@@ -11,7 +11,7 @@
 
 (def ^:const composer-default-height (+ bar-container-height input-height actions-container-height))
 
-(def ^:const line-height (if platform/ios? 21.5 (:line-height typography/paragraph-1)))
+(def ^:const line-height (:line-height typography/paragraph-1))
 
 (def ^:const multiline-minimized-height (+ input-height (if platform/ios? 18 line-height)))
 

src/status_im2/contexts/chat/lightbox/bottom_view.cljs

@@ -1,13 +1,16 @@
 (ns status-im2.contexts.chat.lightbox.bottom-view
   (:require
+    [quo2.foundations.colors :as colors]
     [react-native.core :as rn]
+    [react-native.gesture :as gesture]
     [react-native.platform :as platform]
     [react-native.reanimated :as reanimated]
     [status-im2.contexts.chat.lightbox.style :as style]
     [utils.re-frame :as rf]
     [status-im2.contexts.chat.lightbox.animations :as anim]
     [status-im2.contexts.chat.lightbox.constants :as c]
-    [status-im2.contexts.chat.messages.content.text.view :as message-view]))
+    [status-im2.contexts.chat.messages.content.text.view :as message-view]
+    [status-im2.contexts.chat.lightbox.text-sheet.view :as text-sheet]))
 
 (defn get-small-item-layout
   [_ index]
@@ -48,20 +51,16 @@
   [item index _ render-data]
   [:f> f-small-image item index _ render-data])
 
+
 (defn bottom-view
-  [messages index scroll-index insets animations derived item-width props]
-  (let [{:keys [chat-id content]} (first messages)
-        padding-horizontal        (- (/ item-width 2) (/ c/focused-image-size 2))]
+  [messages index scroll-index insets animations derived item-width props state]
+  (let [padding-horizontal (- (/ item-width 2) (/ c/focused-image-size 2))]
     [reanimated/linear-gradient
-     {:colors [:black :transparent]
+     {:colors [colors/neutral-100-opa-100 colors/neutral-100-opa-50]
       :start  {:x 0 :y 1}
       :end    {:x 0 :y 0}
       :style  (style/gradient-container insets animations derived)}
-     (when c/image-description-in-lightbox?
-       [message-view/render-parsed-text
-        {:content        content
-         :chat-id        chat-id
-         :style-override style/text-style}])
+     [text-sheet/view messages animations state]
      [rn/flat-list
       {:ref                               #(reset! (:small-list-ref props) %)
        :key-fn                            :message-id
@@ -75,4 +74,10 @@
        :get-item-layout                   get-small-item-layout
        :separator                         [rn/view {:style {:width 8}}]
        :initial-scroll-index              index
-       :content-container-style           (style/content-container padding-horizontal)}]]))
+       :content-container-style           (style/content-container padding-horizontal)}]
+     [rn/view
+      {:style {:height   (:bottom insets)
+               :position :absolute
+               :bottom   0
+               :left     0
+               :right    0}}]]))

src/status_im2/contexts/chat/lightbox/style.cljs

@@ -66,6 +66,7 @@
    {:transform [{:translateY bottom-layout}]
     :opacity   opacity}
    {:position       :absolute
+    :overflow       :visible
     :bottom         0
     :padding-bottom (:bottom insets)
     :z-index        3}))
@@ -77,8 +78,15 @@
    :align-items        :center
    :justify-content    :center})
 
-(def text-style
-  {:color             colors/white
-   :align-self        :center
-   :margin-horizontal 20
-   :margin-vertical   12})
+
+(defn background
+  [{:keys [overlay-opacity]} {:keys [overlay-z-index]}]
+  (reanimated/apply-animations-to-style
+   {:opacity overlay-opacity}
+   {:background-color colors/neutral-100-opa-70
+    :position         :absolute
+    :top              0
+    :bottom           0
+    :z-index          @overlay-z-index
+    :left             0
+    :right            0}))

src/status_im2/contexts/chat/lightbox/text_sheet/style.cljs

@@ -0,0 +1,32 @@
+(ns status-im2.contexts.chat.lightbox.text-sheet.style
+  (:require [quo2.foundations.colors :as colors]
+            [react-native.reanimated :as reanimated]))
+
+
+
+(def text-style
+  {:color             colors/white
+   :align-self        :center
+   :margin-horizontal 20
+   :margin-vertical   12
+   :flex-grow         1})
+
+
+(def bar-container
+  {:height          20
+   :left            0
+   :right           0
+   :top             0
+   :z-index         1
+   :justify-content :center
+   :align-items     :center})
+
+(defn bar
+  []
+  {:width            32
+   :height           4
+   :border-radius    100
+   :background-color colors/white-opa-40
+   :border-width     0.5
+   :border-color     colors/neutral-100})
+

src/status_im2/contexts/chat/lightbox/text_sheet/view.cljs

@@ -0,0 +1,127 @@
+(ns status-im2.contexts.chat.lightbox.text-sheet.view
+  (:require
+    [quo2.foundations.colors :as colors]
+    [react-native.core :as rn]
+    [react-native.gesture :as gesture]
+    [react-native.linear-gradient :as linear-gradient]
+    [react-native.platform :as platform]
+    [react-native.reanimated :as reanimated]
+    [react-native.safe-area :as safe-area]
+    [reagent.core :as reagent]
+    [status-im2.contexts.chat.lightbox.constants :as c]
+    [oops.core :as oops]
+    [status-im2.contexts.chat.lightbox.text-sheet.style :as style]
+    [status-im2.contexts.chat.messages.content.text.view :as message-view]
+    [utils.worklets.lightbox :as worklet]))
+
+
+(defn drag-gesture
+  [derived-value saved-top expanded-height max-height opacity gradient-opacity overlay-z-index expanded?]
+  (-> (gesture/gesture-pan)
+      (gesture/enabled true)
+      (gesture/max-pointers 1)
+      (gesture/on-start (fn []
+                          (reset! overlay-z-index 1)
+                          (reanimated/animate gradient-opacity 0)))
+      (gesture/on-update
+       (fn [e]
+         (let [new-value (+ (reanimated/get-shared-value saved-top) (oops/oget e "translationY"))
+               progress  (/ (- new-value) max-height)]
+           (reanimated/set-shared-value opacity progress)
+           (reanimated/set-shared-value derived-value (max (min (- new-value) expanded-height) c/small-list-height)))))
+      (gesture/on-end (fn [e]
+                        (if (or (> (- (reanimated/get-shared-value derived-value))
+                                   (reanimated/get-shared-value saved-top))
+                                (= (reanimated/get-shared-value derived-value) c/small-list-height))
+                          (do
+                            (reanimated/animate derived-value c/small-list-height)
+                            (reanimated/animate opacity 0)
+                            (reanimated/set-shared-value saved-top (- c/small-list-height))
+                            (reset! expanded? false)
+                            (js/setTimeout #(reset! overlay-z-index 0) 300))
+                          (reanimated/set-shared-value saved-top (- (reanimated/get-shared-value derived-value))))
+                        (when (= (reanimated/get-shared-value derived-value) expanded-height)
+                          (reset! expanded? true))))))
+
+(defn bar
+  []
+  [rn/view {:style style/bar-container}
+   [rn/view {:style (style/bar)}]])
+
+(defn text-sheet
+  [messages text-height expanded? opacity overlay-z-index]
+  (let [{:keys [chat-id content]} (first messages)
+        insets                    (safe-area/get-insets)
+        window-height             (:height (rn/get-window))
+        max-height                (- window-height
+                                     c/small-list-height
+                                     c/top-view-height
+                                     (:bottom insets)
+                                     (when platform/ios? (:top insets)))
+        text-padding              24
+        expanded-height           (min max-height (+ 20 @text-height text-padding))
+        derived-value             (reanimated/use-shared-value c/small-list-height)
+        height                    (worklet/text-sheet derived-value true)
+        top                       (worklet/text-sheet derived-value false)
+        saved-top                 (reanimated/use-shared-value (- c/small-list-height))
+        gradient-opacity          (reanimated/use-shared-value 0)]
+    [gesture/gesture-detector
+     {:gesture (drag-gesture derived-value saved-top expanded-height max-height opacity gradient-opacity overlay-z-index expanded?)}
+     [reanimated/touchable-opacity
+      {:active-opacity 1
+       :on-press       (fn []
+                         (reanimated/animate derived-value expanded-height)
+                         (reanimated/animate opacity 1)
+                         (reanimated/set-shared-value saved-top (- expanded-height))
+                         (reset! overlay-z-index 1)
+                         (reset! expanded? true))
+       :style          (reanimated/apply-animations-to-style
+                        {:height height
+                         :top    top}
+                        {:position :absolute
+                         :left     0
+                         :right    0})}
+      (when (> @text-height 44)
+        [bar])
+      [reanimated/linear-gradient
+       {:colors [colors/neutral-100-opa-0 colors/neutral-100]
+        :start  {:x 0 :y 1}
+        :end    {:x 0 :y 0}
+        :style  (reanimated/apply-animations-to-style
+                 {:opacity gradient-opacity}
+                 {:position :absolute
+                  :left     0
+                  :right    0
+                  :top      (- (+ c/top-view-height (:top insets)))
+                  :height   (+ c/top-view-height (:top insets) 20 12 44)
+                  :z-index  1})}]
+      [linear-gradient/linear-gradient
+       {:colors [colors/neutral-100-opa-50 colors/neutral-100-opa-0]
+        :start  {:x 0 :y 1}
+        :end    {:x 0 :y 0}
+        :style  {:position :absolute
+                 :left     0
+                 :right    0
+                 :height   28
+                 :bottom   0
+                 :z-index  1}}]
+      [gesture/scroll-view
+       {:scroll-enabled true
+        :scroll-event-throttle 16
+        :on-scroll      (fn [e]
+                          (if (and (> (oops/oget e "nativeEvent.contentOffset.y") 0) @expanded?)
+                            (reanimated/animate gradient-opacity 1)
+                            (reanimated/animate gradient-opacity 0)))
+        :style          {:height (- max-height 20)}}
+       [message-view/render-parsed-text
+        {:content        content
+         :chat-id        chat-id
+         :style-override style/text-style
+         :on-layout      (fn [event]
+                           (reset! text-height (oops/oget event "nativeEvent.layout.height")))}]]]]))
+
+(defn view
+  [messages {:keys [overlay-opacity]} {:keys [overlay-z-index]}]
+  (let [text-height (reagent/atom 0)
+        expanded?   (reagent/atom false)]
+    [:f> text-sheet messages text-height expanded? overlay-opacity overlay-z-index]))

src/status_im2/contexts/chat/lightbox/top_view.cljs

@@ -43,8 +43,9 @@
         (anim/animate top-view-bg colors/neutral-100-opa-0)))))
 
 (defn drawer
-  [content]
-  (let [uri (http/replace-port (:image content)
+  [messages index]
+  (let [{:keys [content]} (nth messages @index)
+        uri (http/replace-port (:image content)
                                (rf/sub [:mediaserver/port]))]
     [quo/action-drawer
      [[{:icon                :i/save
@@ -61,17 +62,22 @@
                                                 :container-style {:bottom (when platform/android? 20)}
                                                 :text            (i18n/label :t/photo-saved)}])))}]]]))
 
+(defn share-image
+  [messages index]
+  (let [{:keys [content]} (nth messages @index)
+        uri (http/replace-port (:image content)
+                               (rf/sub [:mediaserver/port]))]
+    (images/share-image uri)))
+
 (defn top-view
   [messages insets index animations derived landscape? screen-width]
-  (let [{:keys [from timestamp content]}   (nth @messages @index)
+  (let [{:keys [from timestamp]}   (first messages)
         display-name                       (first (rf/sub [:contacts/contact-two-names-by-identity
                                                            from]))
         bg-color                           (if landscape?
                                              colors/neutral-100-opa-70
                                              colors/neutral-100-opa-0)
-        {:keys [background-color opacity]} animations
-        uri                                (http/replace-port (:image content)
-                                                              (rf/sub [:mediaserver/port]))]
+        {:keys [background-color opacity overlay-opacity]} animations]
     [reanimated/view
      {:style
       (style/top-view-container (:top insets) screen-width bg-color landscape? animations derived)}
@@ -87,6 +93,7 @@
        {:on-press (fn []
                     (anim/animate background-color :transparent)
                     (anim/animate opacity 0)
+                    (anim/animate overlay-opacity 0)
                     (rf/dispatch (if platform/ios?
                                    [:chat.ui/exit-lightbox-signal @index]
                                    [:navigate-back])))
@@ -100,15 +107,15 @@
        [quo/text
         {:weight :medium
          :size   :paragraph-2
-         :style  {:color colors/neutral-40}} (datetime/to-short-str timestamp)]]]
+         :style  {:color colors/neutral-40}} (when timestamp (datetime/to-short-str timestamp))]]]
      [rn/view {:style style/top-right-buttons}
       [rn/touchable-opacity
        {:active-opacity 1
-        :on-press       #(images/share-image uri)
+        :on-press       #(share-image messages index)
         :style          (merge style/close-container {:margin-right 12})}
        [quo/icon :share {:size 20 :color colors/white}]]
       [rn/touchable-opacity
        {:active-opacity 1
-        :on-press       #(rf/dispatch [:show-bottom-sheet {:content (fn [] [drawer content])}])
+        :on-press       #(rf/dispatch [:show-bottom-sheet {:content (fn [] [drawer messages index])}])
         :style          style/close-container}
        [quo/icon :options {:size 20 :color colors/white}]]]]))

src/status_im2/contexts/chat/lightbox/utils.cljs

@@ -31,8 +31,9 @@
    (fn []
      (reagent/next-tick (fn []
                           (when @flat-list-ref
-                            (.scrollToIndex ^js @flat-list-ref
-                                            #js {:animated false :index index}))))
+                            (.scrollToOffset ^js @flat-list-ref
+                                            #js {:animated false
+                                                 :offset (* (+ (:width (rn/get-window)) constants/separator-width) index)}))))
      (swap! timers assoc
        :mount-animation
        (js/setTimeout (fn []
@@ -125,7 +126,9 @@
   {:flat-list-ref      (atom nil)
    :small-list-ref     (atom nil)
    :scroll-index-lock? (atom true)
-   :timers             (atom {})})
+   :timers             (atom {})
+   :viewability-config (atom {:view-area-coverage-percent-threshold 50
+                              :wait-for-interaction                 true})})
 
 (defn init-state
   [messages index]
@@ -135,13 +138,15 @@
   {:data             (reagent/atom (if (number? index) [(nth messages index)] []))
    :scroll-index     (reagent/atom index)
    :transparent?     (reagent/atom false)
-   :set-full-height? (reagent/atom false)})
+   :set-full-height? (reagent/atom false)
+   :overlay-z-index  (reagent/atom 0)})
 
 (defn init-animations
   []
   {:background-color (anim/use-val colors/neutral-100-opa-0)
    :border           (anim/use-val (if platform/ios? 0 12))
    :opacity          (anim/use-val 0)
+   :overlay-opacity  (anim/use-val 0)
    :rotate           (anim/use-val "0deg")
    :layout           (anim/use-val -10)
    :top-view-y       (anim/use-val 0)

src/status_im2/contexts/chat/lightbox/view.cljs

@@ -43,7 +43,8 @@
    [rn/view {:style {:width constants/separator-width}}]])
 
 (defn lightbox-content
-  [props {:keys [data transparent? scroll-index set-full-height?]} animations derived messages index
+  [props {:keys [data transparent? scroll-index set-full-height?] :as state} animations derived messages
+   index
    callback]
   (let [insets           (safe-area/get-insets)
         window           (rn/get-window)
@@ -66,7 +67,7 @@
      {:style (reanimated/apply-animations-to-style {:background-color (:background-color animations)}
                                                    {:height screen-height})}
      (when-not @transparent?
-       [:f> top-view/top-view data insets scroll-index animations derived landscape?
+       [:f> top-view/top-view messages insets scroll-index animations derived landscape?
         screen-width])
      [gesture/gesture-detector
       {:gesture (utils/drag-gesture animations (and landscape? platform/ios?) set-full-height?)}
@@ -75,6 +76,7 @@
                 {:transform [{:translateY (:pan-y animations)}
                              {:translateX (:pan-x animations)}]}
                 {})}
+       [reanimated/view {:style (style/background animations state)}]
        [gesture/flat-list
         {:ref                               #(reset! (:flat-list-ref props) %)
          :key-fn                            :message-id
@@ -95,24 +97,23 @@
          :inverted                          inverted?
          :paging-enabled                    true
          :get-item-layout                   (fn [_ index] (get-item-layout _ index item-width))
-         :viewability-config                {:view-area-coverage-percent-threshold 50
-                                             :wait-for-interaction                 true}
+         :viewability-config                @(:viewability-config props)
          :shows-vertical-scroll-indicator   false
          :shows-horizontal-scroll-indicator false
          :on-viewable-items-changed         callback}]]]
      (when (and (not @transparent?) (not landscape?))
        [:f> bottom-view/bottom-view messages index scroll-index insets animations derived
-        item-width props])]))
+        item-width props state])]))
 
 (defn- f-lightbox
   [{:keys [messages index]}]
   (let [props (utils/init-props)
-        state (utils/init-state messages index)]
+        state (utils/init-state messages index)
+        callback   (rn/use-callback
+                     #(on-viewable-items-changed % props state))]
     (fn [{:keys [messages index]}]
       (let [animations (utils/init-animations)
-            derived    (utils/init-derived-animations animations)
-            callback   (fn [e]
-                         (on-viewable-items-changed e props state))]
+            derived    (utils/init-derived-animations animations)]
         (anim/animate (:background-color animations) colors/neutral-100)
         (reset! (:data state) messages)
         (when platform/ios? ; issue: https://github.com/wix/react-native-navigation/issues/7726

src/status_im2/contexts/chat/menus/pinned_messages/style.cljs

@@ -46,4 +46,4 @@
    :border-width    1})
 
 (def no-pinned-messages-text
-  {:margin-top 20})
+  {:margin-top 20})

src/status_im2/contexts/chat/messages/content/pin/view.cljs

@@ -34,4 +34,4 @@
       :pinned-by     display-name
       :child         [reply/quoted-message quoted-message false true]
       :timestamp-str timestamp-str
-      :labels        {:pinned-a-message (i18n/label :t/pinned-a-message)}}]))
+      :labels        {:pinned-a-message (i18n/label :t/pinned-a-message)}}]))

src/status_im2/contexts/chat/messages/content/text/view.cljs

@@ -2,6 +2,7 @@
   (:require
     [quo2.core :as quo]
     [quo2.foundations.colors :as colors]
+    [oops.core :as oops]
     [react-native.core :as rn]
     [status-im2.contexts.chat.messages.content.link-preview.view :as link-preview]
     [status-im2.contexts.chat.messages.content.text.style :as style]
@@ -139,9 +140,11 @@
       (conj parsed-text {:type :edited-block :children [edited-tag]}))))
 
 (defn render-parsed-text
-  [{:keys [content chat-id edited-at style-override]}]
+  [{:keys [content chat-id edited-at style-override on-layout]}]
   ^{:key (:parsed-text content)}
-  [rn/view {:style style-override}
+  [rn/view
+   {:style     style-override
+    :on-layout on-layout}
    (reduce (fn [acc e]
              (render-block acc e chat-id style-override))
            [:<>]

src/status_im2/contexts/chat/messages/list/view.cljs

@@ -251,18 +251,16 @@
 
 (defn render-fn
   [{:keys [type value content-type] :as message-data} _ _
-   {:keys [context keyboard-shown? insets]}]
+   {:keys [context keyboard-shown?]}]
   ;;TODO temporary hide mutual-state-updates https://github.com/status-im/status-mobile/issues/16254
   (when (not= content-type constants/content-type-system-mutual-state-update)
-    (if (= type :header)
-      [list-header insets]
-      [rn/view
-       (add-inverted-y-android {:background-color (colors/theme-colors colors/white colors/neutral-95)})
-       (if (= type :datemark)
-         [quo/divider-date value]
-         (if (= content-type constants/content-type-gap)
-           [message.gap/gap message-data]
-           [message/message message-data context keyboard-shown?]))])))
+    [rn/view
+     (add-inverted-y-android {:background-color (colors/theme-colors colors/white colors/neutral-95)})
+     (if (= type :datemark)
+       [quo/divider-date value]
+       (if (= content-type constants/content-type-gap)
+         [message.gap/gap message-data]
+         [message/message message-data context keyboard-shown?]))]))
 
 (defn scroll-handler
   [event scroll-y]
@@ -293,21 +291,22 @@
        :ref                          list-ref
        :header                       [:<>
                                       (when (= (:chat-type chat) constants/private-group-chat-type)
-                                        [list-group-chat-header chat])]
+                                        [list-group-chat-header chat])
+                                      [list-header insets]]
        :footer                       [list-footer
                                       {:chat                      chat
                                        :scroll-y                  scroll-y
                                        :cover-bg-color            cover-bg-color
                                        :on-layout                 footer-on-layout
                                        :shell-animation-complete? shell-animation-complete?}]
-       :data                         (into [{:type :header}] messages)
+       :data                         messages
        :render-data                  {:context         context
-                                      :keyboard-shown? keyboard-shown?
-                                      :insets          insets}
+                                      :keyboard-shown? keyboard-shown?}
        :render-fn                    render-fn
        :on-viewable-items-changed    on-viewable-items-changed
        :on-end-reached               #(list-on-end-reached scroll-y)
        :on-scroll-to-index-failed    identity
+       :content-container-style      {:padding-bottom style/messages-list-bottom-offset}
        :scroll-indicator-insets      {:top (- composer.constants/composer-default-height 16)}
        :keyboard-dismiss-mode        :interactive
        :keyboard-should-persist-taps :always
@@ -330,6 +329,9 @@
        ;;TODO(rasom) https://github.com/facebook/react-native/issues/30034
        :inverted                     (when platform/ios? true)
        :on-layout                    (fn [e]
+                                       ;; FIXME: this is due to Android not triggering the initial
+                                       ;; scrollTo event
+                                       (scroll-to-offset 1)
                                        (let [layout-height (oops/oget e "nativeEvent.layout.height")]
                                          (reset! messages-view-height layout-height)))
        :scroll-enabled               (not recording?)}]]))

src/status_im2/contexts/chat/messages/navigation/style.cljs

@@ -96,4 +96,4 @@
 
 (defn header-online
   []
-  {:color (colors/theme-colors colors/neutral-80-opa-50 colors/white-opa-50)})
+  {:color (colors/theme-colors colors/neutral-80-opa-50 colors/white-opa-50)})

src/status_im2/contexts/chat/messages/pin/banner/style.cljs

@@ -38,4 +38,4 @@
   (reanimated/apply-animations-to-style
    (when enabled?
      {:opacity animation})
-   (pinned-banner top-offset)))
+   (pinned-banner top-offset)))

src/status_im2/contexts/communities/overview/view.cljs

@@ -9,15 +9,15 @@
             [reagent.core :as reagent]
             [status-im2.common.home.actions.view :as actions]
             [status-im2.common.password-authentication.view :as password-authentication]
-            [status-im2.common.scroll-page.style :as scroll-page.style]
             [status-im2.common.scroll-page.view :as scroll-page]
+            [status-im2.common.scroll-page.style :as scroll-page.style]
             [status-im2.constants :as constants]
-            [status-im2.contexts.communities.actions.chat.view :as chat-actions]
             [status-im2.contexts.communities.actions.community-options.view :as options]
             [status-im2.contexts.communities.overview.style :as style]
             [status-im2.contexts.communities.overview.utils :as utils]
             [utils.i18n :as i18n]
-            [utils.re-frame :as rf]))
+            [utils.re-frame :as rf]
+            [status-im2.contexts.communities.actions.chat.view :as chat-actions]))
 
 (defn preview-user-list
   [user-list]
@@ -48,20 +48,6 @@
   [event]
   (oops/oget event "nativeEvent.layout.y"))
 
-(defn- channel-chat-item
-  [community-id {chat-id :id muted? :muted? :as chat}]
-  (let [sheet-content      [actions/chat-actions
-                            (assoc chat :chat-type constants/community-chat-type)
-                            false]
-        channel-sheet-data {:selected-item (fn [] [quo/channel-list-item chat])
-                            :content       (fn [] sheet-content)}]
-    [rn/view {:key chat-id :style {:margin-top 4}}
-     [quo/channel-list-item
-      (assoc chat
-             :on-long-press #(rf/dispatch [:show-bottom-sheet channel-sheet-data])
-             :muted?        (or muted?
-                                (rf/sub [:chat/check-channel-muted? community-id chat-id])))]]))
-
 (defn channel-list-component
   [{:keys [on-category-layout community-id on-first-channel-height-changed]}
    channels-list]
@@ -71,28 +57,48 @@
                     (int (Math/ceil (layout-y %))))
                  (into #{} (map (comp :name second) channels-list)))
     :style     {:margin-top 20 :flex 1}}
-   (doall
-    (for [[category-id {:keys [chats name collapsed?]}] channels-list]
-      [rn/view
-       {:style     {:flex 1}
-        :key       category-id
-        ;; on-layout fires only when the component re-renders, so
-        ;; in case the category hasn't changed, it will not be fired
-        :on-layout #(on-category-layout name (int (layout-y %)))}
-       (when-not (= constants/empty-category-id category-id)
-         [quo/divider-label
-          {:container-style  {:padding-left   16
-                              :padding-right  20
-                              :padding-top    6 ; Because of border width of 1
-                              :padding-bottom 7}
-           :label            name
-           :on-press         #(collapse-category community-id category-id collapsed?)
-           :chevron-icon     (if collapsed? :i/chevron-right :i/chevron-down)
-           :chevron-position :left}])
-       (when-not collapsed?
-         (into [rn/view {:style {:padding-horizontal 8 :padding-bottom 8}}]
-               (map #(channel-chat-item community-id %))
-               chats))]))])
+   (for [[category-id {:keys [chats name collapsed?]}] channels-list]
+     [rn/view
+      {:flex      1
+       :key       category-id
+       ;; on-layout fires only when the component re-renders, so
+       ;; in case the category hasn't changed, it will not be fired
+       :on-layout #(on-category-layout name (int (layout-y %)))}
+      (when-not (= constants/empty-category-id category-id)
+        [quo/divider-label
+         {:label            name
+          :on-press         #(collapse-category
+                              community-id
+                              category-id
+                              collapsed?)
+          :chevron-icon     (if collapsed? :main-icons/chevron-right :main-icons/chevron-down)
+          :padding-bottom   (if collapsed? 7 0)
+          :chevron-position :left}])
+      (when-not collapsed?
+        [rn/view
+         {:style {:margin-left   8
+                  :margin-top    10
+                  :margin-bottom 8}}
+         (for [{:keys [muted? id] :as chat} chats
+               :let                         [chat           (assoc chat
+                                                                   :chat-type
+                                                                   constants/community-chat-type)
+                                             channel-muted? (or muted?
+                                                                (rf/sub [:chat/check-channel-muted?
+                                                                         community-id id]))]]
+           [rn/view
+            {:key   (:id chat)
+             :style {:margin-top 4}}
+            [quo/channel-list-item
+             (assoc chat
+                    :muted?
+                    channel-muted?
+                    :on-long-press
+                    (fn []
+                      (rf/dispatch [:show-bottom-sheet
+                                    {:content       (fn [] [actions/chat-actions chat false])
+                                     :selected-item (fn []
+                                                      [quo/channel-list-item chat])}])))]])])])])
 
 (defn request-to-join-text
   [is-open?]
@@ -202,7 +208,7 @@
 (defn status-tag
   [pending? joined]
   (when (or pending? joined)
-    [rn/view {:style {:position :absolute :top 12 :right 12}}
+    [rn/view {:position :absolute :top 12 :right 12}
      [quo/status-tag
       {:status {:type (if joined :positive :pending)}
        :label  (if joined
@@ -311,8 +317,9 @@
   (->> categories-heights
        (sort-by (comp - second))
        (some (fn [[category height]]
-               (and (>= scroll-height (+ height first-channel-height))
-                    category)))))
+               (and
+                (>= scroll-height (+ height first-channel-height))
+                category)))))
 
 (defn community-card-page-view
   []
@@ -320,11 +327,11 @@
         first-channel-height (reagent/atom 0)
         scroll-height        (reagent/atom 0)]
     (fn [id]
-      (let [{:keys [name images id]
-             :as   community} (rf/sub [:communities/community id])
-            pending?          (rf/sub [:communities/my-pending-request-to-join id])
-            cover             {:uri (get-in images [:banner :uri])}
-            logo              {:uri (get-in images [:thumbnail :uri])}]
+      (let [{:keys [name images id] :as community}
+            (rf/sub [:communities/community id])
+            pending? (rf/sub [:communities/my-pending-request-to-join id])
+            cover {:uri (get-in images [:banner :uri])}
+            logo {:uri (get-in images [:thumbnail :uri])}]
         [scroll-page/scroll-page
          {:cover-image                    cover
           :logo                           logo
@@ -355,7 +362,8 @@
 (defn overview
   [id]
   (let [id (or id (rf/sub [:get-screen-params :community-overview]))]
-    [rn/view {:style style/community-overview-container}
+    [rn/view
+     {:style style/community-overview-container}
      [community-card-page-view id]
      [floating-shell-button/floating-shell-button
       {:jump-to {:on-press #(rf/dispatch [:shell/navigate-to-jump-to])

src/status_im2/contexts/onboarding/common/background/style.cljs

@@ -5,6 +5,7 @@
   {:background-color colors/neutral-95
    :flex-direction   :row
    :position         :absolute
+   :overflow         :hidden
    :top              0
    :bottom           0
    :left             0

src/status_im2/contexts/onboarding/create_password/view.cljs

@@ -187,44 +187,54 @@
 (defn create-password-doc
   []
   [quo/documentation-drawers
-   {:title  (i18n/label :t/create-profile-password-info-box-title)
+   {:title  (i18n/label
+             :t/create-profile-password-info-box-title)
     :shell? true}
    [rn/view
-    [quo/text {:size :paragraph-2}
-     (i18n/label :t/create-profile-password-info-box-description)]]])
+    [quo/text
+     {:size :paragraph-2}
+     (i18n/label
+      :t/create-profile-password-info-box-description)]]])
+
+(defn- f-create-password
+  []
+  (let [keyboard-shown?      (reagent/atom false)
+        {:keys [top bottom]} (safe-area/get-insets)]
+    (fn []
+      (rn/use-effect
+       (let [will-show-listener (ocall rn/keyboard
+                                       "addListener"
+                                       "keyboardWillShow"
+                                       #(reset! keyboard-shown? true))
+             will-hide-listener (ocall rn/keyboard
+                                       "addListener"
+                                       "keyboardWillHide"
+                                       #(reset! keyboard-shown? false))]
+         (fn []
+           (fn []
+             (ocall will-show-listener "remove")
+             (ocall will-hide-listener "remove"))))
+       [])
+      [rn/touchable-without-feedback
+       {:on-press   rn/dismiss-keyboard!
+        :accessible false}
+       [rn/view {:style style/flex-fill}
+        [rn/keyboard-avoiding-view {:style style/flex-fill}
+         [navigation-bar/navigation-bar
+          {:top                   top
+           :right-section-buttons [{:type                :blur-bg
+                                    :icon                :i/info
+                                    :icon-override-theme :dark
+                                    :on-press            (fn []
+                                                           (rn/dismiss-keyboard!)
+                                                           (rf/dispatch [:show-bottom-sheet
+                                                                         {:content create-password-doc
+                                                                          :shell?  true}]))}]}]
+         [password-form]
+         [rn/view {:style {:height (if-not @keyboard-shown? bottom 0)}}]]]])))
 
 (defn create-password
   []
-  (reagent/with-let [keyboard-shown?      (reagent/atom false)
-                     {:keys [top bottom]} (safe-area/get-insets)
-                     will-show-listener   (ocall rn/keyboard
-                                                 "addListener"
-                                                 "keyboardWillShow"
-                                                 #(reset! keyboard-shown? true))
-                     will-hide-listener   (ocall rn/keyboard
-                                                 "addListener"
-                                                 "keyboardWillHide"
-                                                 #(reset! keyboard-shown? false))
-                     on-press-info        (fn []
-                                            (rn/dismiss-keyboard!)
-                                            (rf/dispatch [:show-bottom-sheet
-                                                          {:content create-password-doc
-                                                           :shell?  true}]))]
-    [:<>
-     [background/view true]
-     [rn/touchable-without-feedback
-      {:on-press   rn/dismiss-keyboard!
-       :accessible false}
-      [rn/view {:style style/flex-fill}
-       [rn/keyboard-avoiding-view {:style style/flex-fill}
-        [navigation-bar/navigation-bar
-         {:top                   top
-          :right-section-buttons [{:type                :blur-bg
-                                   :icon                :i/info
-                                   :icon-override-theme :dark
-                                   :on-press            on-press-info}]}]
-        [password-form]
-        [rn/view {:style {:height (if-not @keyboard-shown? bottom 0)}}]]]]]
-    (finally
-     (ocall will-show-listener "remove")
-     (ocall will-hide-listener "remove"))))
+  [:<>
+   [background/view true]
+   [:f> f-create-password]])

src/status_im2/contexts/onboarding/create_profile/view.cljs

@@ -120,7 +120,8 @@
                                      (rf/dispatch [:dismiss-keyboard])
                                      (rf/dispatch
                                       [:show-bottom-sheet
-                                       {:content
+                                       {:override-theme :dark
+                                        :content
                                         (fn []
                                           [method-menu/view on-change-profile-pic])}]))
               :image-picker-props  {:profile-picture     (when @profile-pic {:uri @profile-pic})

src/status_im2/contexts/onboarding/intro/view.cljs

@@ -4,34 +4,23 @@
             [utils.re-frame :as rf]
             [react-native.core :as rn]
             [status-im2.contexts.onboarding.intro.style :as style]
-            [status-im2.contexts.onboarding.common.background.view :as background]
-            [status-im2.constants :as constants]
-            [status-im2.contexts.syncing.scan-sync-code.view :as scan-sync-code]
-            [utils.debounce :as debounce]))
+            [status-im2.contexts.onboarding.common.background.view :as background]))
 
 (defn view
   []
   [rn/view {:style style/page-container}
    [background/view false]
    [quo/drawer-buttons
-    {:on-init             (fn [reset-top-animation-fn]
-                            (reset! scan-sync-code/dismiss-animations reset-top-animation-fn))
-     :animations-duration constants/onboarding-modal-animation-duration
-     :animations-delay    constants/onboarding-modal-animation-delay
-     :top-card            {:on-press            (fn []
-                                                  (debounce/dispatch-and-chill [:open-modal
-                                                                                :sign-in-intro]
-                                                                               2000)
-                                                  (rf/dispatch [:hide-terms-of-services-opt-in-screen]))
-                           :heading             (i18n/label :t/sign-in)
-                           :animated-heading    (i18n/label :t/sign-in-by-syncing)
-                           :accessibility-label :already-use-status-button}
-     :bottom-card         {:on-press            (fn []
-                                                  (rf/dispatch [:navigate-to :new-to-status])
-                                                  (rf/dispatch
-                                                   [:hide-terms-of-services-opt-in-screen]))
-                           :heading             (i18n/label :t/new-to-status)
-                           :accessibility-label :new-to-status-button}}
+    {:top-card    {:on-press            (fn []
+                                          (rf/dispatch [:navigate-to :sign-in])
+                                          (rf/dispatch [:hide-terms-of-services-opt-in-screen]))
+                   :heading             (i18n/label :t/sign-in)
+                   :accessibility-label :already-use-status-button}
+     :bottom-card {:on-press            (fn []
+                                          (rf/dispatch [:navigate-to :new-to-status])
+                                          (rf/dispatch [:hide-terms-of-services-opt-in-screen]))
+                   :heading             (i18n/label :t/new-to-status)
+                   :accessibility-label :new-to-status-button}}
     [quo/text
      {:style style/plain-text}
      (i18n/label :t/you-already-use-status)]

src/status_im2/contexts/onboarding/profiles/view.cljs

@@ -28,7 +28,7 @@
       :accessibility-label :create-new-profile}
      {:icon                :i/multi-profile
       :label               (i18n/label :t/add-existing-status-profile)
-      :on-press            #(rf/dispatch [:open-modal :sign-in])
+      :on-press            #(rf/dispatch [:navigate-to :sign-in])
       :accessibility-label :multi-profile}]]])
 
 (defn show-new-account-options

src/status_im2/contexts/onboarding/sign_in/view.cljs

@@ -3,22 +3,9 @@
             [status-im2.contexts.onboarding.common.background.view :as background]
             [status-im2.contexts.syncing.scan-sync-code.view :as scan-sync-code]))
 
-(defn navigate-back
-  []
-  (when @scan-sync-code/navigate-back-fn
-    (@scan-sync-code/navigate-back-fn)))
-
 (defn view
   []
   [scan-sync-code/view
    {:title             (i18n/label :t/sign-in-by-syncing)
     :show-bottom-view? true
-    :background        [background/view true]
-    :animated?         false}])
-
-(defn animated-view
-  []
-  [scan-sync-code/view
-   {:title             (i18n/label :t/sign-in-by-syncing)
-    :show-bottom-view? true
-    :animated?         true}])
+    :background        [background/view true]}])

src/status_im2/contexts/onboarding/syncing/progress/style.cljs

@@ -1,8 +1,7 @@
 (ns status-im2.contexts.onboarding.syncing.progress.style
   (:require [quo2.foundations.colors :as colors]))
 
-(defn page-container
-  [in-onboarding?]
+(def page-container
   {:flex             1
    :position         :absolute
    :top              0
@@ -10,7 +9,7 @@
    :left             0
    :right            0
    :padding-bottom   20
-   :background-color (when-not in-onboarding? colors/neutral-80-opa-80-blur)})
+   :background-color colors/neutral-80-opa-80-blur})
 
 (def page-illustration
   {:flex              1

src/status_im2/contexts/onboarding/syncing/progress/view.cljs

@@ -30,23 +30,22 @@
     :subtitle-accessibility-label :progress-screen-sub-title}])
 
 (defn try-again-button
-  [profile-color in-onboarding?]
+  [profile-color]
   [quo/button
    {:on-press                  (fn []
                                  (rf/dispatch [:syncing/clear-states])
-                                 (rf/dispatch [:navigate-back-to
-                                               (if in-onboarding? :sign-in-intro :sign-in)]))
+                                 (rf/dispatch [:navigate-back]))
     :accessibility-label       :try-again-later-button
     :override-background-color (colors/custom-color profile-color 60)
     :style                     style/try-again-button}
    (i18n/label :t/try-again)])
 
 (defn view
-  [in-onboarding?]
+  []
   (let [pairing-status (rf/sub [:pairing/pairing-status])
         profile-color  (:color (rf/sub [:onboarding-2/profile]))]
-    [rn/view {:style (style/page-container in-onboarding?)}
-     (when-not in-onboarding? [background/view true])
+    [rn/view {:style style/page-container}
+     [background/view true]
      [quo/page-nav]
      [page-title (pairing-progress pairing-status)]
      (if (pairing-progress pairing-status)
@@ -55,8 +54,4 @@
        [rn/view {:style style/page-illustration}
         [quo/text "[Error here]"]])
      (when-not (pairing-progress pairing-status)
-       [try-again-button profile-color in-onboarding?])]))
-
-(defn view-onboarding
-  []
-  [view true])
+       [try-again-button profile-color])]))

src/status_im2/contexts/quo_preview/loaders/skeleton.cljs

@@ -1,43 +0,0 @@
-(ns status-im2.contexts.quo-preview.loaders.skeleton
-  (:require [quo2.core :as quo]
-            [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]
-            [reagent.core :as reagent]
-            [status-im2.contexts.quo-preview.preview :as preview]))
-
-(def descriptor
-  [{:label   "Content:"
-    :key     :content
-    :type    :select
-    :options [{:key   :list-items
-               :value "List items"}
-              {:key   :notifications
-               :value "Notifications"}
-              {:key   :messages
-               :value "Messages"}]}
-   {:label "Blur?"
-    :key   :blur?
-    :type  :boolean}])
-
-(defn cool-preview
-  []
-  (let [state (reagent/atom {:content       :messages
-                             :blur?         false
-                             :parent-height 600})]
-    (fn []
-      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
-       [rn/view {:padding-bottom 150}
-        [preview/customizer state descriptor]
-        [rn/view
-         [quo/static-skeleton @state]]]])))
-
-(defn preview-skeleton
-  []
-  [rn/view
-   {:background-color (colors/theme-colors colors/white colors/neutral-95)
-    :flex             1}
-   [rn/flat-list
-    {:flex                         1
-     :keyboard-should-persist-taps :always
-     :header                       [cool-preview]
-     :key-fn                       str}]])

src/status_im2/contexts/quo_preview/main.cljs

@@ -54,7 +54,6 @@
     [status-im2.contexts.quo-preview.list-items.preview-lists :as preview-lists]
     [status-im2.contexts.quo-preview.list-items.user-list :as user-list]
     [status-im2.contexts.quo-preview.markdown.text :as text]
-    [status-im2.contexts.quo-preview.markdown.list :as markdown-list]
     [status-im2.contexts.quo-preview.messages.author :as messages-author]
     [status-im2.contexts.quo-preview.messages.gap :as messages-gap]
     [status-im2.contexts.quo-preview.messages.system-message :as system-message]
@@ -67,6 +66,7 @@
     [status-im2.contexts.quo-preview.notifications.toast :as toast]
     [status-im2.contexts.quo-preview.onboarding.small-option-card :as small-option-card]
     [status-im2.contexts.quo-preview.password.tips :as tips]
+    [status-im2.contexts.quo-preview.posts-and-attachments.messages-skeleton :as messages-skeleton]
     [status-im2.contexts.quo-preview.profile.collectible :as collectible]
     [status-im2.contexts.quo-preview.profile.profile-card :as profile-card]
     [status-im2.contexts.quo-preview.profile.select-profile :as select-profile]
@@ -97,288 +97,284 @@
     [status-im2.contexts.quo-preview.wallet.network-breakdown :as network-breakdown]
     [status-im2.contexts.quo-preview.wallet.token-overview :as token-overview]
     [status-im2.contexts.quo-preview.keycard.keycard :as keycard]
-    [status-im2.contexts.quo-preview.loaders.skeleton :as skeleton]
     [status-im2.contexts.quo-preview.community.channel-actions :as channel-actions]))
 
 (def screens-categories
-  {:foundations       [{:name      :shadows
-                        :options   {:topBar {:visible true}}
-                        :component shadows/preview-shadows}]
-   :animated-list     [{:name      :animated-header-list
-                        :options   {:topBar {:visible false}}
-                        :component animated-header-list/mock-screen}]
-   :avatar            [{:name      :group-avatar
-                        :options   {:topBar {:visible true}}
-                        :component group-avatar/preview-group-avatar}
-                       {:name      :icon-avatar
-                        :options   {:topBar {:visible true}}
-                        :component icon-avatar/preview-icon-avatar}
-                       {:name      :user-avatar
-                        :options   {:topBar {:visible true}}
-                        :component user-avatar/preview-user-avatar}
-                       {:name      :wallet-user-avatar
-                        :options   {:topBar {:visible true}}
-                        :component wallet-user-avatar/preview-wallet-user-avatar}
-                       {:name      :channel-avatar
-                        :options   {:topBar {:visible true}}
-                        :component channel-avatar/preview-channel-avatar}
-                       {:name      :account-avatar
-                        :options   {:topBar {:visible true}}
-                        :component account-avatar/preview-account-avatar}]
-   :banner            [{:name      :banner
-                        :options   {:topBar {:visible true}}
-                        :component banner/preview-banner}]
-   :buttons           [{:name      :button
-                        :options   {:topBar {:visible true}}
-                        :component button/preview-button}
-                       {:name      :dynamic-button
-                        :options   {:topBar {:visible true}}
-                        :component dynamic-button/preview-dynamic-button}
-                       {:name      :slide-button
-                        :options   {:topBar {:visible true}}
-                        :component slide-button/preview-slide-button}
-                       {:name      :predictive-keyboard
-                        :options   {:topBar {:visible true}}
-                        :component predictive-keyboard/preview-predictive-keyboard}]
-   :code              [{:name      :snippet
-                        :options   {:topBar {:visible true}}
-                        :component code-snippet/preview-code-snippet}]
-   :colors            [{:name      :color-picker
-                        :options   {:topBar {:visible true}}
-                        :component color-picker/preview-color-picker}]
-   :community         [{:name      :community-card-view
-                        :options   {:topBar {:visible true}}
-                        :component community-card/preview-community-card}
-                       {:name      :community-list-view
-                        :options   {:topBar {:visible true}}
-                        :component community-list-view/preview-community-list-view}
-                       {:name      :community-membership-list-view
-                        :options   {:topBar {:visible true}}
-                        :component community-membership-list-view/preview-community-list-view}
-                       {:name      :discover-card
-                        :options   {:topBar {:visible true}}
-                        :component discover-card/preview-discoverd-card}
-                       {:name      :token-gating
-                        :options   {:insets {:bottom? true}
-                                    :topBar {:visible true}}
-                        :component token-gating/preview-token-gating}
-                       {:name      :channel-actions
-                        :options   {:insets {:bottom? true}
-                                    :topBar {:visible true}}
-                        :component channel-actions/preview-channel-actions}]
-   :counter           [{:name      :counter
-                        :options   {:topBar {:visible true}}
-                        :component counter/preview-counter}
-                       {:name      :step
-                        :options   {:topBar {:visible true}}
-                        :component step/preview-step}]
-   :dividers          [{:name      :divider-label
-                        :options   {:topBar {:visible true}}
-                        :component divider-label/preview-divider-label}
-                       {:name      :new-messages
-                        :options   {:topBar {:visible true}}
-                        :component new-messages/preview-new-messages}
-                       {:name      :divider-date
-                        :options   {:topBar {:visible true}}
-                        :component divider-date/preview-divider-date}
-                       {:name      :strength-divider
-                        :options   {:topBar {:visible true}}
-                        :component strength-divider/preview-strength-divider}]
-   :drawers           [{:name      :action-drawers
-                        :options   {:topBar {:visible true}}
-                        :component action-drawers/preview-action-drawers}
-                       {:name      :documentation-drawer
-                        :insets    {:top false}
-                        :component documenation-drawers/preview-documenation-drawers}
-                       {:name      :drawer-buttons
-                        :options   {:topBar {:visible true}}
-                        :component drawer-buttons/preview-drawer-buttons}
-                       {:name      :permission-drawers
-                        :options   {:topBar {:visible true}}
-                        :component permission-drawers/preview-permission-drawers}]
-   :dropdowns         [{:name      :dropdown
-                        :options   {:topBar {:visible true}}
-                        :component dropdown/preview-dropdown}]
-   :empty-state       [{:name      :empty-state
-                        :options   {:topBar {:visible true}}
-                        :component empty-state/preview-empty-state}]
-   :info              [{:name      :info-message
-                        :options   {:topBar {:visible true}}
-                        :component info-message/preview-info-message}
-                       {:name      :information-box
-                        :options   {:topBar {:visible true}}
-                        :component information-box/preview-information-box}]
-   :inputs            [{:name      :input
-                        :options   {:topBar {:visible true}}
-                        :component input/preview-input}
-                       {:name      :profile-input
-                        :options   {:topBar {:visible true}}
-                        :component profile-input/preview-profile-input}
-                       {:name      :recovery-phrase-input
-                        :options   {:topBar {:visible true}}
-                        :component recovery-phrase-input/preview-recovery-phrase-input}
-                       {:name      :search-input
-                        :options   {:topBar {:visible true}}
-                        :component search-input/preview-search-input}
-                       {:name      :title-input
-                        :options   {:topBar {:visible true}}
-                        :component title-input/preview-title-input}]
-   :links             [{:name      :url-preview
-                        :options   {:insets {:top? true}
-                                    :topBar {:visible true}}
-                        :component url-preview/preview}
-                       {:name      :url-preview-list
-                        :options   {:insets {:top? true}
-                                    :topBar {:visible true}}
-                        :component url-preview-list/preview}
-                       {:name      :link-preview
-                        :options   {:insets {:top? true}
-                                    :topBar {:visible true}}
-                        :component link-preview/preview}]
-   :list-items        [{:name      :channel
-                        :options   {:topBar {:visible true}}
-                        :component channel/preview-channel}
-                       {:name      :preview-lists
-                        :options   {:topBar {:visible true}}
-                        :component preview-lists/preview-preview-lists}
-                       {:name      :user-list
-                        :options   {:topBar {:visible true}}
-                        :component user-list/preview-user-list}]
-   :loaders           [{:name      :skeleton
-                        :options   {:topBar {:visible true}}
-                        :component skeleton/preview-skeleton}]
-   :markdown          [{:name      :texts
-                        :options   {:topBar {:visible true}}
-                        :component text/preview-text}
-                       {:name      :markdown-list
-                        :options   {:topBar {:visible true}}
-                        :component markdown-list/preview-markdown-list}]
-   :messages          [{:name      :gap
-                        :options   {:topBar {:visible true}}
-                        :component messages-gap/preview-messages-gap}
-                       {:name      :system-messages
-                        :options   {:topBar {:visible true}}
-                        :component system-message/preview-system-message}
-                       {:name      :author
-                        :options   {:topBar {:visible true}}
-                        :component messages-author/preview-author}]
-   :navigation        [{:name      :bottom-nav-tab
-                        :options   {:topBar {:visible true}}
-                        :component bottom-nav-tab/preview-bottom-nav-tab}
-                       {:name      :top-nav
-                        :options   {:topBar {:visible true}}
-                        :component top-nav/preview-top-nav}
-                       {:name      :page-nav
-                        :options   {:topBar {:visible true}}
-                        :component page-nav/preview-page-nav}
-                       {:name      :floating-shell-button
-                        :options   {:topBar {:visible true}}
-                        :component floating-shell-button/preview-floating-shell-button}]
-   :notifications     [{:name      :activity-logs
-                        :options   {:topBar {:visible true}}
-                        :component activity-logs/preview-activity-logs}
-                       {:name      :toast
-                        :options   {:topBar {:visible true}}
-                        :component toast/preview-toasts}
-                       {:name      :notification
-                        :options   {:topBar {:visible true}}
-                        :component notification/preview-notification}]
-   :onboarding        [{:name      :small-option-card
-                        :options   {:topBar {:visible true}}
-                        :component small-option-card/preview-small-option-card}]
-   :password          [{:name      :tips
-                        :options   {:topBar {:visible true}}
-                        :component tips/preview-tips}]
-   :profile           [{:name      :profile-card
-                        :options   {:topBar {:visible true}}
-                        :component profile-card/preview-profile-card}
-                       {:name      :collectible
-                        :options   {:topBar {:visible true}}
-                        :component collectible/preview-collectible}
-                       {:name      :select-profile
-                        :options   {:topBar {:visible true}}
-                        :component select-profile/preview-select-profile}]
-   :reactions         [{:name      :react
-                        :options   {:topBar {:visible true}}
-                        :component react/preview-react}]
-   :record-audio      [{:name      :record-audio
-                        :options   {:topBar {:visible true}}
-                        :component record-audio/preview-record-audio}]
-   :switcher          [{:name      :switcher-cards
-                        :options   {:topBar {:visible true}}
-                        :component switcher-cards/preview-switcher-cards}]
-   :selectors         [{:name      :disclaimer
-                        :options   {:topBar {:visible true}}
-                        :component disclaimer/preview-disclaimer}
-                       {:name      :filter
-                        :options   {:topBar {:visible true}}
-                        :component filter/preview}
-                       {:name      :selectors
-                        :options   {:topBar {:visible true}}
-                        :component selectors/preview-selectors}
-                       {:name      :select-reactions
-                        :options   {:topBar {:visible true}}
-                        :component selector-reactions/preview}]
-   :settings          [{:name      :privacy-option
-                        :options   {:topBar {:visible true}}
-                        :component privacy-option/preview-options}
-                       {:name      :accounts
-                        :options   {:topBar {:visible true}}
-                        :component accounts/preview-accounts}
-                       {:name      :settings-list
-                        :options   {:topBar {:visible true}}
-                        :component settings-list/preview-settings-list}
-                       {:name      :reorder-item
-                        :options   {:topBar {:visible true}}
-                        :component reorder-item/preview-reorder-item}]
-   :share             [{:name      :qr-code
-                        :options   {:topBar {:visible true}}
-                        :component qr-code/preview-qr-code}
-                       {:name      :share-qr-code
-                        :options   {:topBar {:visible true}}
-                        :component share-qr-code/preview-share-qr-code}]
-   :tabs              [{:name      :segmented
-                        :options   {:topBar {:visible true}}
-                        :component segmented/preview-segmented}
-                       {:name      :tabs
-                        :options   {:topBar {:visible true}}
-                        :component tabs/preview-tabs}
-                       {:name      :account-selector
-                        :options   {:topBar {:visible true}}
-                        :component account-selector/preview-this}]
-   :tags              [{:name      :context-tags
-                        :options   {:topBar {:visible true}}
-                        :component context-tags/preview-context-tags}
-                       {:name      :tags
-                        :options   {:topBar {:visible true}}
-                        :component tags/preview-tags}
-                       {:name      :permission-tag
-                        :options   {:topBar {:visible true}}
-                        :component permission-tag/preview-permission-tag}
-                       {:name      :status-tags
-                        :options   {:topBar {:visible true}}
-                        :component status-tags/preview-status-tags}
-                       {:name      :token-tag
-                        :options   {:topBar {:visible true}}
-                        :component token-tag/preview-token-tag}]
-   :text-combinations [{:name      :title
-                        :options   {:topBar {:visible true}}
-                        :component title/preview-title}]
-   :wallet            [{:name      :lowest-price
-                        :options   {:topBar {:visible true}}
-                        :component lowest-price/preview-lowest-price}
-                       {:name      :token-overview
-                        :options   {:topBar {:visible true}}
-                        :component token-overview/preview-token-overview}
-                       {:name      :network-breakdown
-                        :options   {:topBar {:visible true}}
-                        :component network-breakdown/preview-network-breakdown}
-                       {:name      :network-amount
-                        :options   {:topBar {:visible true}}
-                        :component network-amount/preview}]
-   :keycard           [{:name      :keycard-component
-                        :options   {:topBar {:visible true}}
-                        :component keycard/preview-keycard}]})
+  {:foundations           [{:name      :shadows
+                            :options   {:topBar {:visible true}}
+                            :component shadows/preview-shadows}]
+   :animated-list         [{:name      :animated-header-list
+                            :options   {:topBar {:visible false}}
+                            :component animated-header-list/mock-screen}]
+   :avatar                [{:name      :group-avatar
+                            :options   {:topBar {:visible true}}
+                            :component group-avatar/preview-group-avatar}
+                           {:name      :icon-avatar
+                            :options   {:topBar {:visible true}}
+                            :component icon-avatar/preview-icon-avatar}
+                           {:name      :user-avatar
+                            :options   {:topBar {:visible true}}
+                            :component user-avatar/preview-user-avatar}
+                           {:name      :wallet-user-avatar
+                            :options   {:topBar {:visible true}}
+                            :component wallet-user-avatar/preview-wallet-user-avatar}
+                           {:name      :channel-avatar
+                            :options   {:topBar {:visible true}}
+                            :component channel-avatar/preview-channel-avatar}
+                           {:name      :account-avatar
+                            :options   {:topBar {:visible true}}
+                            :component account-avatar/preview-account-avatar}]
+   :banner                [{:name      :banner
+                            :options   {:topBar {:visible true}}
+                            :component banner/preview-banner}]
+   :buttons               [{:name      :button
+                            :options   {:topBar {:visible true}}
+                            :component button/preview-button}
+                           {:name      :dynamic-button
+                            :options   {:topBar {:visible true}}
+                            :component dynamic-button/preview-dynamic-button}
+                           {:name      :slide-button
+                            :options   {:topBar {:visible true}}
+                            :component slide-button/preview-slide-button}
+                           {:name      :predictive-keyboard
+                            :options   {:topBar {:visible true}}
+                            :component predictive-keyboard/preview-predictive-keyboard}]
+   :code                  [{:name      :snippet
+                            :options   {:topBar {:visible true}}
+                            :component code-snippet/preview-code-snippet}]
+   :colors                [{:name      :color-picker
+                            :options   {:topBar {:visible true}}
+                            :component color-picker/preview-color-picker}]
+   :community             [{:name      :community-card-view
+                            :options   {:topBar {:visible true}}
+                            :component community-card/preview-community-card}
+                           {:name      :community-list-view
+                            :options   {:topBar {:visible true}}
+                            :component community-list-view/preview-community-list-view}
+                           {:name      :community-membership-list-view
+                            :options   {:topBar {:visible true}}
+                            :component community-membership-list-view/preview-community-list-view}
+                           {:name      :discover-card
+                            :options   {:topBar {:visible true}}
+                            :component discover-card/preview-discoverd-card}
+                           {:name      :token-gating
+                            :options   {:insets {:bottom? true}
+                                        :topBar {:visible true}}
+                            :component token-gating/preview-token-gating}
+                           {:name      :channel-actions
+                            :options   {:insets {:bottom? true}
+                                        :topBar {:visible true}}
+                            :component channel-actions/preview-channel-actions}]
+   :counter               [{:name      :counter
+                            :options   {:topBar {:visible true}}
+                            :component counter/preview-counter}
+                           {:name      :step
+                            :options   {:topBar {:visible true}}
+                            :component step/preview-step}]
+   :dividers              [{:name      :divider-label
+                            :options   {:topBar {:visible true}}
+                            :component divider-label/preview-divider-label}
+                           {:name      :new-messages
+                            :options   {:topBar {:visible true}}
+                            :component new-messages/preview-new-messages}
+                           {:name      :divider-date
+                            :options   {:topBar {:visible true}}
+                            :component divider-date/preview-divider-date}
+                           {:name      :strength-divider
+                            :options   {:topBar {:visible true}}
+                            :component strength-divider/preview-strength-divider}]
+   :drawers               [{:name      :action-drawers
+                            :options   {:topBar {:visible true}}
+                            :component action-drawers/preview-action-drawers}
+                           {:name      :documentation-drawer
+                            :insets    {:top false}
+                            :component documenation-drawers/preview-documenation-drawers}
+                           {:name      :drawer-buttons
+                            :options   {:topBar {:visible true}}
+                            :component drawer-buttons/preview-drawer-buttons}
+                           {:name      :permission-drawers
+                            :options   {:topBar {:visible true}}
+                            :component permission-drawers/preview-permission-drawers}]
+   :dropdowns             [{:name      :dropdown
+                            :options   {:topBar {:visible true}}
+                            :component dropdown/preview-dropdown}]
+   :empty-state           [{:name      :empty-state
+                            :options   {:topBar {:visible true}}
+                            :component empty-state/preview-empty-state}]
+   :info                  [{:name      :info-message
+                            :options   {:topBar {:visible true}}
+                            :component info-message/preview-info-message}
+                           {:name      :information-box
+                            :options   {:topBar {:visible true}}
+                            :component information-box/preview-information-box}]
+   :inputs                [{:name      :input
+                            :options   {:topBar {:visible true}}
+                            :component input/preview-input}
+                           {:name      :profile-input
+                            :options   {:topBar {:visible true}}
+                            :component profile-input/preview-profile-input}
+                           {:name      :recovery-phrase-input
+                            :options   {:topBar {:visible true}}
+                            :component recovery-phrase-input/preview-recovery-phrase-input}
+                           {:name      :search-input
+                            :options   {:topBar {:visible true}}
+                            :component search-input/preview-search-input}
+                           {:name      :title-input
+                            :options   {:topBar {:visible true}}
+                            :component title-input/preview-title-input}]
+   :links                 [{:name      :url-preview
+                            :options   {:insets {:top? true}
+                                        :topBar {:visible true}}
+                            :component url-preview/preview}
+                           {:name      :url-preview-list
+                            :options   {:insets {:top? true}
+                                        :topBar {:visible true}}
+                            :component url-preview-list/preview}
+                           {:name      :link-preview
+                            :options   {:insets {:top? true}
+                                        :topBar {:visible true}}
+                            :component link-preview/preview}]
+   :list-items            [{:name      :channel
+                            :options   {:topBar {:visible true}}
+                            :component channel/preview-channel}
+                           {:name      :preview-lists
+                            :options   {:topBar {:visible true}}
+                            :component preview-lists/preview-preview-lists}
+                           {:name      :user-list
+                            :options   {:topBar {:visible true}}
+                            :component user-list/preview-user-list}]
+   :markdown              [{:name      :texts
+                            :options   {:topBar {:visible true}}
+                            :component text/preview-text}]
+   :messages              [{:name      :gap
+                            :options   {:topBar {:visible true}}
+                            :component messages-gap/preview-messages-gap}
+                           {:name      :system-messages
+                            :options   {:topBar {:visible true}}
+                            :component system-message/preview-system-message}
+                           {:name      :author
+                            :options   {:topBar {:visible true}}
+                            :component messages-author/preview-author}]
+   :navigation            [{:name      :bottom-nav-tab
+                            :options   {:topBar {:visible true}}
+                            :component bottom-nav-tab/preview-bottom-nav-tab}
+                           {:name      :top-nav
+                            :options   {:topBar {:visible true}}
+                            :component top-nav/preview-top-nav}
+                           {:name      :page-nav
+                            :options   {:topBar {:visible true}}
+                            :component page-nav/preview-page-nav}
+                           {:name      :floating-shell-button
+                            :options   {:topBar {:visible true}}
+                            :component floating-shell-button/preview-floating-shell-button}]
+   :notifications         [{:name      :activity-logs
+                            :options   {:topBar {:visible true}}
+                            :component activity-logs/preview-activity-logs}
+                           {:name      :toast
+                            :options   {:topBar {:visible true}}
+                            :component toast/preview-toasts}
+                           {:name      :notification
+                            :options   {:topBar {:visible true}}
+                            :component notification/preview-notification}]
+   :onboarding            [{:name      :small-option-card
+                            :options   {:topBar {:visible true}}
+                            :component small-option-card/preview-small-option-card}]
+   :posts-and-attachments [{:name      :messages-skeleton
+                            :options   {:topBar {:visible true}}
+                            :component messages-skeleton/preview-messages-skeleton}]
+   :password              [{:name      :tips
+                            :options   {:topBar {:visible true}}
+                            :component tips/preview-tips}]
+   :profile               [{:name      :profile-card
+                            :options   {:topBar {:visible true}}
+                            :component profile-card/preview-profile-card}
+                           {:name      :collectible
+                            :options   {:topBar {:visible true}}
+                            :component collectible/preview-collectible}
+                           {:name      :select-profile
+                            :options   {:topBar {:visible true}}
+                            :component select-profile/preview-select-profile}]
+   :reactions             [{:name      :react
+                            :options   {:topBar {:visible true}}
+                            :component react/preview-react}]
+   :record-audio          [{:name      :record-audio
+                            :options   {:topBar {:visible true}}
+                            :component record-audio/preview-record-audio}]
+   :switcher              [{:name      :switcher-cards
+                            :options   {:topBar {:visible true}}
+                            :component switcher-cards/preview-switcher-cards}]
+   :selectors             [{:name      :disclaimer
+                            :options   {:topBar {:visible true}}
+                            :component disclaimer/preview-disclaimer}
+                           {:name      :filter
+                            :options   {:topBar {:visible true}}
+                            :component filter/preview}
+                           {:name      :selectors
+                            :options   {:topBar {:visible true}}
+                            :component selectors/preview-selectors}
+                           {:name      :select-reactions
+                            :options   {:topBar {:visible true}}
+                            :component selector-reactions/preview}]
+   :settings              [{:name      :privacy-option
+                            :options   {:topBar {:visible true}}
+                            :component privacy-option/preview-options}
+                           {:name      :accounts
+                            :options   {:topBar {:visible true}}
+                            :component accounts/preview-accounts}
+                           {:name      :settings-list
+                            :options   {:topBar {:visible true}}
+                            :component settings-list/preview-settings-list}
+                           {:name      :reorder-item
+                            :options   {:topBar {:visible true}}
+                            :component reorder-item/preview-reorder-item}]
+   :share                 [{:name      :qr-code
+                            :options   {:topBar {:visible true}}
+                            :component qr-code/preview-qr-code}
+                           {:name      :share-qr-code
+                            :options   {:topBar {:visible true}}
+                            :component share-qr-code/preview-share-qr-code}]
+   :tabs                  [{:name      :segmented
+                            :options   {:topBar {:visible true}}
+                            :component segmented/preview-segmented}
+                           {:name      :tabs
+                            :options   {:topBar {:visible true}}
+                            :component tabs/preview-tabs}
+                           {:name      :account-selector
+                            :options   {:topBar {:visible true}}
+                            :component account-selector/preview-this}]
+   :tags                  [{:name      :context-tags
+                            :options   {:topBar {:visible true}}
+                            :component context-tags/preview-context-tags}
+                           {:name      :tags
+                            :options   {:topBar {:visible true}}
+                            :component tags/preview-tags}
+                           {:name      :permission-tag
+                            :options   {:topBar {:visible true}}
+                            :component permission-tag/preview-permission-tag}
+                           {:name      :status-tags
+                            :options   {:topBar {:visible true}}
+                            :component status-tags/preview-status-tags}
+                           {:name      :token-tag
+                            :options   {:topBar {:visible true}}
+                            :component token-tag/preview-token-tag}]
+   :text-combinations     [{:name      :title
+                            :options   {:topBar {:visible true}}
+                            :component title/preview-title}]
+   :wallet                [{:name      :lowest-price
+                            :options   {:topBar {:visible true}}
+                            :component lowest-price/preview-lowest-price}
+                           {:name      :token-overview
+                            :options   {:topBar {:visible true}}
+                            :component token-overview/preview-token-overview}
+                           {:name      :network-breakdown
+                            :options   {:topBar {:visible true}}
+                            :component network-breakdown/preview-network-breakdown}
+                           {:name      :network-amount
+                            :options   {:topBar {:visible true}}
+                            :component network-amount/preview}]
+   :keycard               [{:name      :keycard-component
+                            :options   {:topBar {:visible true}}
+                            :component keycard/preview-keycard}]})
 
 (def screens (flatten (map val screens-categories)))
 

src/status_im2/contexts/quo_preview/markdown/list.cljs

@@ -1,80 +0,0 @@
-(ns status-im2.contexts.quo-preview.markdown.list
-  (:require [quo2.core :as quo]
-            [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]
-            [reagent.core :as reagent]
-            [status-im2.contexts.quo-preview.preview :as preview]
-            [status-im2.common.resources :as resources]))
-
-(def descriptor
-  [{:label "Title:"
-    :key   :title
-    :type  :text}
-   {:label "Description:"
-    :key   :description
-    :type  :text}
-   {:label "Tag name:"
-    :key   :tag-name
-    :type  :text}
-   {:label "Description After Tag (Set tag name):"
-    :key   :description-after-tag
-    :type  :text}
-   {:label   "Type: (step uses index)"
-    :key     :type
-    :type    :select
-    :options [{:key   :bullet
-               :value :bullet}
-              {:key   :step
-               :value :step}]}
-   {:label "Step Number:"
-    :key   :step-number
-    :type  :text}
-   {:label   "Customization Color:"
-    :key     :customization-color
-    :type    :select
-    :options [{:key   :blue
-               :value :blue}
-              {:key   :army
-               :value :army}
-              {:key   :none
-               :value :none}]}
-   {:label "Blur? (Dark only):"
-    :key   :blur?
-    :type  :boolean}])
-
-(defn cool-preview
-  []
-  (let [state (reagent/atom {:title       "Be respectful"
-                             :description "Lorem ipsum dolor sit amet."})]
-    (fn []
-      (let [{:keys [title step-number customization-color description tag-name description-after-tag type
-                    blur?]} @state
-            tag-picture     (when tag-name (resources/get-mock-image :monkey))]
-        [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
-         [rn/view {:padding-bottom 150}
-          [preview/customizer state descriptor]
-          [rn/view
-           {:padding-vertical 60
-            :background-color (when blur? "#484F5E")}
-           [quo/markdown-list
-            {:type                  type
-             :blur?                 blur?
-             :title                 (when (pos? (count title)) title)
-             :step-number           step-number
-             :description           description
-             :tag-name              tag-name
-             :tag-picture           tag-picture
-             :description-after-tag description-after-tag
-             :customization-color   customization-color}]]]]))))
-
-(defn preview-markdown-list
-  []
-  [rn/view
-   {:background-color
-    (colors/theme-colors colors/white colors/neutral-95)
-    :flex 1}
-   [rn/flat-list
-    {:flex                         1
-     :keyboard-should-persist-taps :always
-     :header                       [cool-preview]
-     :key-fn                       str}]])

src/status_im2/contexts/quo_preview/posts_and_attachments/messages_skeleton.cljs

@@ -0,0 +1,13 @@
+(ns status-im2.contexts.quo-preview.posts-and-attachments.messages-skeleton
+  (:require [quo.react-native :as rn]
+            [quo2.core :as quo]
+            [quo2.foundations.colors :as colors]))
+
+(defn preview-messages-skeleton
+  []
+  [rn/view
+   {:background-color (colors/theme-colors
+                       colors/white
+                       colors/neutral-90)
+    :flex             1}
+   [quo/skeleton]])