Updates for unread messages indicator

[#17288 ] refactor: migrate previews to new api (#17470 )
Quo2: Token Input followup (#17419 )
2023-10-02 17:30:58 +02:00 · 2023-10-02 16:28:35 +03:00 · 2023-10-02 09:01:39 +04:00 · 2023-09-29 16:32:45 +02:00 · 2023-09-29 18:53:06 +05:30 · 2023-09-29 23:11:21 +10:00
488 changed files with 8177 additions and 5154 deletions
@@ -136,11 +136,6 @@ quo.animated/re-timing
 quo.design-system.colors/white
 quo.design-system.colors/black
 status-im.transport.core-test/messages
-status-im.ethereum.core/sidechain?
-status-im.ethereum.core/network-with-upstream-rpc?
-status-im.ethereum.core/current-address
-status-im.ethereum.core/network->network-name
-status-im.ethereum.core/estimate-gas
 quo.core/animated-header
 quo.core/safe-area-provider
 quo.core/safe-area-consumer
@@ -196,10 +191,6 @@ status-im.desktop.core/init
 status-im.chat.models-test/test-db
 quo.design-system.spacing/padding-vertical
 status-im.utils.money/percent-change
-status-im.utils.platform/isMacOs?
-status-im.utils.platform/isNix?
-status-im.utils.platform/isWin?
-status-im.utils.platform/android-version>=
 utils.debounce/clear-all
 status-im.transport.db/create-chat
 status-im.utils.priority-map/priority-map
@@ -9,22 +9,49 @@
                status-im.utils.styles/defn    clojure.core/defn
                test-helpers.unit/deftest-sub  clojure.core/defn
                taoensso.tufte/defnp           clojure.core/defn}
- :linters      {:consistent-alias  {:level   :error
-                                    :aliases {clojure.string  string
-                                              clojure.set     set
-                                              clojure.walk    walk
-                                              taoensso.timbre log}}
-                :shadowed-var      {:level   :error
-                                    ;; We temporarily use :include to define an
-                                    ;; allowlist of core Clojure vars. In the
-                                    ;; future, as we progressively fix shadowed
-                                    ;; vars, we should be able to delete this
-                                    ;; option and lint all vars.
-                                    :exclude [type name]}
-                :invalid-arity     {:skip-args [status-im.utils.fx/defn utils.re-frame/defn]}
+ :linters      {:clj-kondo-config              {:level :error}
+                :cond-else                     {:level :error}
+                :consistent-alias              {:level   :error
+                                                :aliases {clojure.string  string
+                                                          clojure.set     set
+                                                          clojure.walk    walk
+                                                          taoensso.timbre log}}
+                :docstring-blank               {:level :error}
+                :inline-def                    {:level :error}
+                :invalid-arity                 {:skip-args [status-im.utils.fx/defn utils.re-frame/defn]}
+                :loop-without-recur            {:level :error}
+                :misplaced-docstring           {:level :error}
+                :missing-body-in-when          {:level :error}
+                :missing-clause-in-try         {:level :error}
+                :missing-else-branch           {:level :error}
+                :not-empty?                    {:level :error}
+                :quoted-case-test-constant     {:level :error}
+                :redundant-do                  {:level :error}
+                :redundant-let                 {:level :error}
+                :refer-all                     {:level :error}
+                :shadowed-var                  {:level   :error
+                                                ;; We temporarily use :include to define an
+                                                ;; allowlist of core Clojure vars. In the
+                                                ;; future, as we progressively fix shadowed
+                                                ;; vars, we should be able to delete this
+                                                ;; option and lint all vars.
+                                                :exclude [type name]}
+                :single-operand-comparison     {:level :error}
+                :syntax                        {:level :error}
+                :unbound-destructuring-default {:level :error}
+                :unknown-require-option        {:level :error}
+                :unreachable-code              {:level :error}
+                :unresolved-namespace          {:level :error}
                ;; TODO remove number when this is fixed
                ;; https://github.com/borkdude/clj-kondo/issues/867
-                :unresolved-symbol {:exclude [PersistentPriorityMap.EMPTY
-                                              number
-                                              status-im.test-helpers/restore-app-db]}}
+                :unresolved-symbol             {:exclude [PersistentPriorityMap.EMPTY
+                                                          number
+                                                          status-im.test-helpers/restore-app-db]}
+                :unresolved-var                {:level :error}
+                :unused-binding                {:level :error}
+                :unused-import                 {:level :error}
+                :unused-namespace              {:level :error}
+                :unused-private-var            {:level :error}
+                :unused-referred-var           {:level :error}
+                :use                           {:level :error}}
 :config-in-ns {mocks.js-dependencies {:linters {:clojure-lsp/unused-public-var {:level :off}}}}}
@@ -32,3 +32,4 @@ TWO_MINUTES_SYNCING=1
 SWAP_ENABLED=1
 STICKERS_TEST_ENABLED=1
 LOCAL_PAIRING_ENABLED=1
+TEST_STATEOFUS=1
@@ -63,4 +63,10 @@ Documentation change PR (review please): https://github.com/status-im/status.im/

 <!-- (PRs will only be accepted if squashed into single commit.) -->

+### Before and after screenshots comparison
+
+| Figma (if available) | iOS (if available)    | Android (if available)
+| --- | --- | --- |
+| Please embed Image/Video here of the before and after.  | Please embed Image/Video here of the before and after.  | Please embed Image/Video here of the before and after. |
+
 status: ready <!-- Can be ready or wip -->
@@ -311,6 +311,7 @@ endef
 lint: export TARGET := clojure
 lint: ##@test Run code style checks
 	@sh scripts/lint-re-frame-in-quo-components.sh && \
+	sh scripts/lint-old-quo-usage.sh \
 	clj-kondo --config .clj-kondo/config.edn --cache false --fail-level error --lint src && \
 	ALL_CLOJURE_FILES=$(call find_all_clojure_files) && \
 	zprint '{:search-config? true}' -sfc $$ALL_CLOJURE_FILES && \
@@ -360,6 +361,7 @@ component-test-watch: export TARGET := clojure
 component-test-watch: export COMPONENT_TEST := true
 component-test-watch: export BABEL_ENV := test
 component-test-watch: ##@ Watch tests and re-run no changes to cljs files
+	rm -rf ./component-spec
 	yarn install
 	nodemon --exec 'yarn shadow-cljs compile component-test && jest --config=test/jest/jest.config.js' -e cljs

@@ -367,6 +369,7 @@ component-test: export TARGET := clojure
 component-test: export COMPONENT_TEST := true
 component-test: export BABEL_ENV := test
 component-test: ##@test Run component tests once in NodeJS
+	rm -rf ./component-spec
 	yarn install
 	yarn shadow-cljs compile component-test && \
 	jest --config=test/jest/jest.config.js
@@ -1,5 +1,5 @@
 #!/usr/bin/env groovy
-library 'status-jenkins-lib@v1.7.14'
+library 'status-jenkins-lib@v1.7.15'

 /* Options section can't access functions in objects. */
 def isPRBuild = utils.isPRBuild()
@@ -1,5 +1,5 @@
 #!/usr/bin/env groovy
-library 'status-jenkins-lib@v1.7.14'
+library 'status-jenkins-lib@v1.7.15'

 pipeline {
  agent { label 'linux' }
@@ -1,5 +1,5 @@
 #!/usr/bin/env groovy
-library 'status-jenkins-lib@v1.7.14'
+library 'status-jenkins-lib@v1.7.15'

 pipeline {
  agent { label 'linux' }
@@ -1,5 +1,5 @@
 #!/usr/bin/env groovy
-library 'status-jenkins-lib@set_ios_status_go_targets'
+library 'status-jenkins-lib@v1.7.15'

 /* Options section can't access functions in objects. */
 def isPRBuild = utils.isPRBuild()
@@ -1,5 +1,5 @@
 #!/usr/bin/env groovy
-library 'status-jenkins-lib@v1.7.14'
+library 'status-jenkins-lib@v1.7.15'

 /* Options section can't access functions in objects. */
 def isPRBuild = utils.isPRBuild()
@@ -1,5 +1,5 @@
 #!/usr/bin/env groovy
-library 'status-jenkins-lib@v1.7.14'
+library 'status-jenkins-lib@v1.7.15'

 pipeline {

@@ -1,5 +1,5 @@
 #!/usr/bin/env groovy
-library 'status-jenkins-lib@v1.7.14'
+library 'status-jenkins-lib@v1.7.15'

 pipeline {

@@ -1,5 +1,5 @@
 #!/usr/bin/env groovy
-library 'status-jenkins-lib@v1.7.14'
+library 'status-jenkins-lib@v1.7.15'

 pipeline {

@@ -1,5 +1,5 @@
 #!/usr/bin/env groovy
-library 'status-jenkins-lib@v1.7.14'
+library 'status-jenkins-lib@v1.7.15'

 pipeline {
  agent { label 'macos' }
@@ -1,5 +1,5 @@
 #!/usr/bin/env groovy
-library 'status-jenkins-lib@v1.7.14'
+library 'status-jenkins-lib@v1.7.15'

 pipeline {
  agent { label params.AGENT_LABEL }
@@ -1,5 +1,5 @@
 #!/usr/bin/env groovy
-library 'status-jenkins-lib@v1.7.14'
+library 'status-jenkins-lib@v1.7.15'

 pipeline {
  agent { label 'linux' }
@@ -1,5 +1,5 @@
 #!/usr/bin/env groovy
-library 'status-jenkins-lib@v1.7.14'
+library 'status-jenkins-lib@v1.7.15'

 pipeline {
  agent {
@@ -35,6 +35,11 @@
 [Component tests (jest) overview](component-tests-overview.md)


+## Project details
+
+[status-go introduction (recorded meeting)](https://drive.google.com/file/d/1B7TljmTZ8fHkqJH8ChU1Cp4FGDFM03gq/view)
+
+[re-frame usage (recorded meeting)](https://drive.google.com/file/d/1qv_E0CEGzQpu_zGXD0gCTU5EvhC2k8Jy/view)

 ## Misc

@@ -0,0 +1,40 @@
+# How to catch crash on ios use xcode
+
+## Overview
+Sometimes, we can't reproduce crash with local dev build, probably because your built version differs from the one QA team used. 
+The QA team mostly used the PR build version. In this guide we will try to make a build as close as possible to the PR build for iOS.
+
+You may notice various configuration files starting with .env (such as .env, .env.e2e, .env.jenkins) in the project. 
+The usage of these files and environment variables injected at build time on CI will not be covered in this guide.
+
+This guide covers how to configure Xcode to capture a crash stack trace with a physical iOS device. This allows debugging crashes by inspecting the stack trace.
+I will use [issue #17255](https://github.com/status-im/status-mobile/issues/17255) as an example to reproduce and analyze a crash.
+
+## Prerequisites
+- A physical ios device (simulator is not considered in this doc)
+- Xcode installed
+               
+## Steps
+1. Prepare Status Mobile
+   1. Open Terminal, cd to project root
+   2. Run `make run-clojure` in one tab
+   3. Run `make run-metro` in a second tab
+   4. Run `make pod-install` in a third tab
+2. Configure Xcode Project
+   1. Open Xcode
+   2. Open a project or file, navigate to folder `path_to_root_directory_of_status_mobile/ios` 
+   3. Set Scheme `StatusImPR` as current scheme ![](images/how-to-catch-crash-on-ios/choose-scheme-StatusImPR.png)
+   4. Edit scheme ![](images/how-to-catch-crash-on-ios/edit-scheme.png)
+   5. Change `Info` ![](images/how-to-catch-crash-on-ios/config-release.png)
+   6. Change `Diagnostics` ![](images/how-to-catch-crash-on-ios/change-diagnostics.png)
+   7. Set automatically manage signing ![](images/how-to-catch-crash-on-ios/automatically-manage-signing.png)
+3. Update Code
+   1. Edit `src/status_im2/setup/dev.cljs`, comment out lines 47-52 ![](images/how-to-catch-crash-on-ios/edit-dev.png)
+   2. Edit `shadow-cljs.edn`, comment out `re-frisk-remote.preload`, otherwise it will try to connect `localhost:4567` on physical device which could slow down performance ![](images/how-to-catch-crash-on-ios/edit-shadow-cljs.png)
+4. Reproduce Crash And Analyze
+   1. Choose your physical ios device as target device and Run 
+   2. Follow reproduce steps from [issue #17255](https://github.com/status-im/status-mobile/issues/17255) mentioned and xcode will halt at crash point ![](images/how-to-catch-crash-on-ios/located-stack-trace.png)
+   3. Inspect stack trace to identify root cause. From the stack trace, we can locate the crash happened in `api/geth_backend.go:1048`(createTempDBFile) clearly! ![](images/how-to-catch-crash-on-ios/located-go-code.png)
+
+## Links
+- [changes](https://github.com/status-im/status-mobile/commit/4306d419de15e737e8ded3a749cc5e8d6a06e627) to source code
@@ -62,6 +62,10 @@ abstract_target 'Status' do
    installer.pods_project.targets.each do |target|
      target.build_configurations.each do |config|
        config.build_settings['ONLY_ACTIVE_ARCH'] = 'NO'
+        # fix for no template named 'unary_function' in namespace 'std'; did you mean '__unary_function'?
+        # ref : https://github.com/facebook/react-native/issues/37748
+        # TODO : remove after upgrading to react-native 0.72.x
+        config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] ||= ['$(inherited)', '_LIBCPP_ENABLE_CXX17_REMOVED_UNARY_BINARY_FUNCTION']
      end
    end
  end
@@ -707,7 +707,7 @@ SPEC CHECKSUMS:
  FBLazyVector: a8af91c2b5a0029d12ff6b32e428863d63c48991
  FBReactNativeSpec: 1b2309b096448a1dc9d0c43999216f8fda809ae8
  fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
-  glog: d93527a855523adb8c113837db4be68fb00e230d
+  glog: 166d178815c300e8126de9a7900101814eb16253
  HMSegmentedControl: 34c1f54d822d8308e7b24f5d901ec674dfa31352
  Keycard: ac6df4d91525c3c82635ac24d4ddd9a80aca5fc8
  libwebp: f62cb61d0a484ba548448a4bd52aabf150ff6eef
@@ -772,7 +772,7 @@ SPEC CHECKSUMS:
  RNLanguages: 962e562af0d34ab1958d89bcfdb64fafc37c513e
  RNPermissions: ad71dd4f767ec254f2cd57592fbee02afee75467
  RNReactNativeHapticFeedback: 2566b468cc8d0e7bb2f84b23adc0f4614594d071
-  RNReanimated: d0db0ee059c33381bca787a2193c27e52750ccaf
+  RNReanimated: 43adb0307a62c1ce9694f36f124ca3b51a15272a
  RNShare: d82e10f6b7677f4b0048c23709bd04098d5aee6c
  RNStaticSafeAreaInsets: 055ddbf5e476321720457cdaeec0ff2ba40ec1b8
  RNSVG: 80584470ff1ffc7994923ea135a3e5ad825546b9
@@ -785,6 +785,6 @@ SPEC CHECKSUMS:
  TouchID: ba4c656d849cceabc2e4eef722dea5e55959ecf4
  Yoga: d24d6184b6b85f742536bd93bd07d69d7b9bb4c1

-PODFILE CHECKSUM: 1b60eee24bff3a6287f8b33e57657289b2966342
+PODFILE CHECKSUM: ac30a0172ff0126b6f307c20f34c47ce0ebf278f

 COCOAPODS: 1.12.0
@@ -8,6 +8,7 @@

 /* Begin PBXBuildFile section */
 		00E356F31AD99517003FC87E /* StatusImTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 00E356F21AD99517003FC87E /* StatusImTests.m */; };
+		04515E9DF839CBF55C690E79 /* libPods-Status-StatusImPR.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 5006FF03675A7E50320B4002 /* libPods-Status-StatusImPR.a */; };
 		13B07FBC1A68108700A75B9A /* AppDelegate.mm in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB01A68108700A75B9A /* AppDelegate.mm */; };
 		13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };
 		25DC9C9DC25846BD8D084888 /* libc++.tbd in Frameworks */ = {isa = PBXBuildFile; fileRef = 8B9A886A2CB448B1ABA0EB62 /* libc++.tbd */; };
@@ -43,12 +44,11 @@
 		715D8132290BE850006F5C88 /* UbuntuMono-Regular.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 715D8131290BE850006F5C88 /* UbuntuMono-Regular.ttf */; };
 		715D8133290BE850006F5C88 /* UbuntuMono-Regular.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 715D8131290BE850006F5C88 /* UbuntuMono-Regular.ttf */; };
 		74B758FC20D7C00B003343C3 /* launch-image-universal.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 74B758FB20D7C00B003343C3 /* launch-image-universal.storyboard */; };
+		81F3191BB1D4BDF3442402BD /* libPods-Status-StatusIm.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 0F8E9088BDE117AB71366407 /* libPods-Status-StatusIm.a */; };
 		8391E8E0E93C41A98AAA6631 /* Inter-SemiBoldItalic.otf in Resources */ = {isa = PBXBuildFile; fileRef = A4F2BBE8D4DD4140A6CCAC39 /* Inter-SemiBoldItalic.otf */; };
-		B0E570AEBE2BEB426BF60259 /* libPods-Status-StatusImPR.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 4D059F2E62D7CD9FB1896703 /* libPods-Status-StatusImPR.a */; };
 		B24FC7FD1DE7195700D694FF /* Social.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = B24FC7FC1DE7195700D694FF /* Social.framework */; };
 		B24FC7FF1DE7195F00D694FF /* MessageUI.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = B24FC7FE1DE7195F00D694FF /* MessageUI.framework */; };
 		B2F2D1BC1D9D531B00B7B453 /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = B2F2D1BB1D9D531B00B7B453 /* Images.xcassets */; };
-		B73930D752A70EAB45001773 /* libPods-Status-StatusIm.a in Frameworks */ = {isa = PBXBuildFile; fileRef = FBEDE2F94002488EF6B277DA /* libPods-Status-StatusIm.a */; };
 		BA68A2377A20496EA737000D /* libz.tbd in Frameworks */ = {isa = PBXBuildFile; fileRef = 4E586E1B0E544F64AA9F5BD1 /* libz.tbd */; };
 		C14C5F8D29C0A149005C58A7 /* launch-icon@3x.png in Resources */ = {isa = PBXBuildFile; fileRef = C14C5F8C29C0A149005C58A7 /* launch-icon@3x.png */; };
 		C14C5F9129C0AD9C005C58A7 /* launch-icon@2x.png in Resources */ = {isa = PBXBuildFile; fileRef = C14C5F9029C0AD9C005C58A7 /* launch-icon@2x.png */; };
@@ -57,10 +57,10 @@
 		C1715FFB29C0BCE50088FA8B /* launch-icon@3x.png in Resources */ = {isa = PBXBuildFile; fileRef = C14C5F8C29C0A149005C58A7 /* launch-icon@3x.png */; };
 		C1715FFC29C0BCE80088FA8B /* launch-icon.png in Resources */ = {isa = PBXBuildFile; fileRef = C14C5F9229C0ADB5005C58A7 /* launch-icon.png */; };
 		CE4E31B31D8695250033ED64 /* Statusgo.xcframework in Frameworks */ = {isa = PBXBuildFile; fileRef = CE4E31B21D8695250033ED64 /* Statusgo.xcframework */; };
+		D156FF2CCF43C136F7BF8AE5 /* libPods-Status-StatusIm-StatusImTests.a in Frameworks */ = {isa = PBXBuildFile; fileRef = D3EFEEB5FC1235562D5D3BF1 /* libPods-Status-StatusIm-StatusImTests.a */; };
 		D1786306E0184916B11F4C37 /* Inter-Medium.otf in Resources */ = {isa = PBXBuildFile; fileRef = B2A38FC3D3954DE7B2B171F8 /* Inter-Medium.otf */; };
 		D84616FB563A48EBB1678699 /* Inter-Bold.otf in Resources */ = {isa = PBXBuildFile; fileRef = CD4A2C27D6D5473184DC1F7E /* Inter-Bold.otf */; };
 		D99C50E5E18942A39C8DDF61 /* Inter-BoldItalic.otf in Resources */ = {isa = PBXBuildFile; fileRef = B321D25F4493470980039457 /* Inter-BoldItalic.otf */; };
-		F5EC958C8908294B8536B835 /* libPods-Status-StatusIm-StatusImTests.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 06FA6B17CC0A7FAFA9DA5364 /* libPods-Status-StatusIm-StatusImTests.a */; };
 /* End PBXBuildFile section */

 /* Begin PBXContainerItemProxy section */
@@ -108,24 +108,23 @@
 		00E356EE1AD99517003FC87E /* StatusImTests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = StatusImTests.xctest; sourceTree = BUILT_PRODUCTS_DIR; };
 		00E356F11AD99517003FC87E /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
 		00E356F21AD99517003FC87E /* StatusImTests.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = StatusImTests.m; sourceTree = "<group>"; };
-		06FA6B17CC0A7FAFA9DA5364 /* libPods-Status-StatusIm-StatusImTests.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-Status-StatusIm-StatusImTests.a"; sourceTree = BUILT_PRODUCTS_DIR; };
-		08A713A336BFEE0924821EC9 /* Pods-Status-StatusIm.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Status-StatusIm.release.xcconfig"; path = "Target Support Files/Pods-Status-StatusIm/Pods-Status-StatusIm.release.xcconfig"; sourceTree = "<group>"; };
-		103861DFF36B6063BED2602B /* Pods-Status-StatusImPR.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Status-StatusImPR.release.xcconfig"; path = "Target Support Files/Pods-Status-StatusImPR/Pods-Status-StatusImPR.release.xcconfig"; sourceTree = "<group>"; };
+		06AF19FA626AFFC91E66916B /* Pods-Status-StatusImPR.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Status-StatusImPR.release.xcconfig"; path = "Target Support Files/Pods-Status-StatusImPR/Pods-Status-StatusImPR.release.xcconfig"; sourceTree = "<group>"; };
+		0F8E9088BDE117AB71366407 /* libPods-Status-StatusIm.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-Status-StatusIm.a"; sourceTree = BUILT_PRODUCTS_DIR; };
 		13B07F961A680F5B00A75B9A /* StatusIm.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = StatusIm.app; sourceTree = BUILT_PRODUCTS_DIR; };
 		13B07FAF1A68108700A75B9A /* AppDelegate.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = AppDelegate.h; path = StatusIm/AppDelegate.h; sourceTree = "<group>"; };
 		13B07FB01A68108700A75B9A /* AppDelegate.mm */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.objcpp; name = AppDelegate.mm; path = StatusIm/AppDelegate.mm; sourceTree = "<group>"; };
 		13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = StatusIm/Info.plist; sourceTree = "<group>"; };
 		13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = StatusIm/main.m; sourceTree = "<group>"; };
 		1426DF592BA248FC81D955CB /* Inter-Regular.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "Inter-Regular.otf"; path = "../resources/fonts/Inter-Regular.otf"; sourceTree = "<group>"; };
+		1CDF317A2E103217DF386083 /* Pods-Status-StatusIm.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Status-StatusIm.release.xcconfig"; path = "Target Support Files/Pods-Status-StatusIm/Pods-Status-StatusIm.release.xcconfig"; sourceTree = "<group>"; };
 		3A2626CE245C3F2200D5F94B /* Dummy.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Dummy.swift; sourceTree = "<group>"; };
 		3A6406FB24A3ADF90046ED37 /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
 		3A8F8EA924A4D31600BF206D /* GameKit.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = GameKit.framework; path = System/Library/Frameworks/GameKit.framework; sourceTree = SDKROOT; };
 		3AAD2ADC24A3A60E0075D594 /* Status PR.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = "Status PR.app"; sourceTree = BUILT_PRODUCTS_DIR; };
 		3AB1C3AD245C043900098F67 /* StatusIm-Bridging-Header.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = "StatusIm-Bridging-Header.h"; sourceTree = "<group>"; };
 		4C16DE0B1F89508700AA10DB /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; };
-		4D059F2E62D7CD9FB1896703 /* libPods-Status-StatusImPR.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-Status-StatusImPR.a"; sourceTree = BUILT_PRODUCTS_DIR; };
-		4D7FC122A838AC3BFC46D82B /* Pods-Status-StatusImPR.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Status-StatusImPR.debug.xcconfig"; path = "Target Support Files/Pods-Status-StatusImPR/Pods-Status-StatusImPR.debug.xcconfig"; sourceTree = "<group>"; };
 		4E586E1B0E544F64AA9F5BD1 /* libz.tbd */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "sourcecode.text-based-dylib-definition"; name = libz.tbd; path = usr/lib/libz.tbd; sourceTree = SDKROOT; };
+		5006FF03675A7E50320B4002 /* libPods-Status-StatusImPR.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-Status-StatusImPR.a"; sourceTree = BUILT_PRODUCTS_DIR; };
 		65F693BD2578002500A45E76 /* CoreNFC.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = CoreNFC.framework; path = System/Library/Frameworks/CoreNFC.framework; sourceTree = SDKROOT; };
 		65F693BF2578003600A45E76 /* CoreNFC.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = CoreNFC.framework; path = Platforms/MacOSX.platform/Developer/SDKs/MacOSX11.0.sdk/System/iOSSupport/System/Library/Frameworks/CoreNFC.framework; sourceTree = DEVELOPER_DIR; };
 		65F6941725780A4E00A45E76 /* StatusImTests-Bridging-Header.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = "StatusImTests-Bridging-Header.h"; sourceTree = "<group>"; };
@@ -133,13 +132,13 @@
 		693A62DB37BC4CD5A30E5C96 /* Inter-SemiBold.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "Inter-SemiBold.otf"; path = "../resources/fonts/Inter-SemiBold.otf"; sourceTree = "<group>"; };
 		715D8131290BE850006F5C88 /* UbuntuMono-Regular.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; name = "UbuntuMono-Regular.ttf"; path = "../resources/fonts/UbuntuMono-Regular.ttf"; sourceTree = "<group>"; };
 		74B758FB20D7C00B003343C3 /* launch-image-universal.storyboard */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; path = "launch-image-universal.storyboard"; sourceTree = "<group>"; };
-		84C3C20891247EC6BFF93B51 /* Pods-Status-StatusIm-StatusImTests.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Status-StatusIm-StatusImTests.release.xcconfig"; path = "Target Support Files/Pods-Status-StatusIm-StatusImTests/Pods-Status-StatusIm-StatusImTests.release.xcconfig"; sourceTree = "<group>"; };
-		886398AFEF2B823AC8A4912C /* Pods-Status-StatusIm.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Status-StatusIm.debug.xcconfig"; path = "Target Support Files/Pods-Status-StatusIm/Pods-Status-StatusIm.debug.xcconfig"; sourceTree = "<group>"; };
 		8B9A886A2CB448B1ABA0EB62 /* libc++.tbd */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "sourcecode.text-based-dylib-definition"; name = "libc++.tbd"; path = "usr/lib/libc++.tbd"; sourceTree = SDKROOT; };
 		922C4CA61F4D5F8B0033C753 /* StatusIm.entitlements */ = {isa = PBXFileReference; lastKnownFileType = text.plist.entitlements; name = StatusIm.entitlements; path = StatusIm/StatusIm.entitlements; sourceTree = "<group>"; };
+		93347A9564A62A24509EFA9C /* Pods-Status-StatusIm-StatusImTests.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Status-StatusIm-StatusImTests.release.xcconfig"; path = "Target Support Files/Pods-Status-StatusIm-StatusImTests/Pods-Status-StatusIm-StatusImTests.release.xcconfig"; sourceTree = "<group>"; };
 		9C76AF5A418D4D65A4CAD1D9 /* InterStatus-Regular.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "InterStatus-Regular.otf"; path = "../resources/fonts/InterStatus-Regular.otf"; sourceTree = "<group>"; };
 		9EC0135C1E06FB1900155B5C /* RCTWKWebView.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTWKWebView.xcodeproj; path = "../node_modules/react-native-wkwebview-reborn/ios/RCTWKWebView.xcodeproj"; sourceTree = "<group>"; };
 		A4F2BBE8D4DD4140A6CCAC39 /* Inter-SemiBoldItalic.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "Inter-SemiBoldItalic.otf"; path = "../resources/fonts/Inter-SemiBoldItalic.otf"; sourceTree = "<group>"; };
+		AA6DC18226EB1EFB2A8FE64D /* Pods-Status-StatusIm.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Status-StatusIm.debug.xcconfig"; path = "Target Support Files/Pods-Status-StatusIm/Pods-Status-StatusIm.debug.xcconfig"; sourceTree = "<group>"; };
 		B07176ACDAA1422E8F0A3D6B /* Inter-Italic.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "Inter-Italic.otf"; path = "../resources/fonts/Inter-Italic.otf"; sourceTree = "<group>"; };
 		B24FC7FC1DE7195700D694FF /* Social.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = Social.framework; path = System/Library/Frameworks/Social.framework; sourceTree = SDKROOT; };
 		B24FC7FE1DE7195F00D694FF /* MessageUI.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = MessageUI.framework; path = System/Library/Frameworks/MessageUI.framework; sourceTree = SDKROOT; };
@@ -149,11 +148,12 @@
 		C14C5F8C29C0A149005C58A7 /* launch-icon@3x.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; name = "launch-icon@3x.png"; path = "StatusIm/launch-icon@3x.png"; sourceTree = "<group>"; };
 		C14C5F9029C0AD9C005C58A7 /* launch-icon@2x.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; name = "launch-icon@2x.png"; path = "StatusIm/launch-icon@2x.png"; sourceTree = "<group>"; };
 		C14C5F9229C0ADB5005C58A7 /* launch-icon.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; name = "launch-icon.png"; path = "StatusIm/launch-icon.png"; sourceTree = "<group>"; };
+		C618F2C2EF820C722B1E7624 /* Pods-Status-StatusImPR.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Status-StatusImPR.debug.xcconfig"; path = "Target Support Files/Pods-Status-StatusImPR/Pods-Status-StatusImPR.debug.xcconfig"; sourceTree = "<group>"; };
 		C6B1215047604CD59A4C74D6 /* Inter-MediumItalic.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "Inter-MediumItalic.otf"; path = "../resources/fonts/Inter-MediumItalic.otf"; sourceTree = "<group>"; };
 		CD4A2C27D6D5473184DC1F7E /* Inter-Bold.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "Inter-Bold.otf"; path = "../resources/fonts/Inter-Bold.otf"; sourceTree = "<group>"; };
 		CE4E31B21D8695250033ED64 /* Statusgo.xcframework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.xcframework; name = Statusgo.xcframework; path = "../modules/react-native-status/ios/RCTStatus/Statusgo.xcframework"; sourceTree = "<group>"; };
-		EBFEABB7D6CC1144D83FBA82 /* Pods-Status-StatusIm-StatusImTests.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Status-StatusIm-StatusImTests.debug.xcconfig"; path = "Target Support Files/Pods-Status-StatusIm-StatusImTests/Pods-Status-StatusIm-StatusImTests.debug.xcconfig"; sourceTree = "<group>"; };
-		FBEDE2F94002488EF6B277DA /* libPods-Status-StatusIm.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-Status-StatusIm.a"; sourceTree = BUILT_PRODUCTS_DIR; };
+		D3EFEEB5FC1235562D5D3BF1 /* libPods-Status-StatusIm-StatusImTests.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-Status-StatusIm-StatusImTests.a"; sourceTree = BUILT_PRODUCTS_DIR; };
+		DAE7378308FEB005CE0A6E42 /* Pods-Status-StatusIm-StatusImTests.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Status-StatusIm-StatusImTests.debug.xcconfig"; path = "Target Support Files/Pods-Status-StatusIm-StatusImTests/Pods-Status-StatusIm-StatusImTests.debug.xcconfig"; sourceTree = "<group>"; };
 /* End PBXFileReference section */

 /* Begin PBXFrameworksBuildPhase section */
@@ -161,7 +161,7 @@
 			isa = PBXFrameworksBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
-				F5EC958C8908294B8536B835 /* libPods-Status-StatusIm-StatusImTests.a in Frameworks */,
+				D156FF2CCF43C136F7BF8AE5 /* libPods-Status-StatusIm-StatusImTests.a in Frameworks */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -174,7 +174,7 @@
 				CE4E31B31D8695250033ED64 /* Statusgo.xcframework in Frameworks */,
 				25DC9C9DC25846BD8D084888 /* libc++.tbd in Frameworks */,
 				BA68A2377A20496EA737000D /* libz.tbd in Frameworks */,
-				B73930D752A70EAB45001773 /* libPods-Status-StatusIm.a in Frameworks */,
+				81F3191BB1D4BDF3442402BD /* libPods-Status-StatusIm.a in Frameworks */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -188,7 +188,7 @@
 				3AAD2AC224A3A60E0075D594 /* Statusgo.xcframework in Frameworks */,
 				3AAD2AC524A3A60E0075D594 /* libc++.tbd in Frameworks */,
 				3AAD2AC624A3A60E0075D594 /* libz.tbd in Frameworks */,
-				B0E570AEBE2BEB426BF60259 /* libPods-Status-StatusImPR.a in Frameworks */,
+				04515E9DF839CBF55C690E79 /* libPods-Status-StatusImPR.a in Frameworks */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -314,9 +314,9 @@
 				CE4E31B21D8695250033ED64 /* Statusgo.xcframework */,
 				8B9A886A2CB448B1ABA0EB62 /* libc++.tbd */,
 				4E586E1B0E544F64AA9F5BD1 /* libz.tbd */,
-				FBEDE2F94002488EF6B277DA /* libPods-Status-StatusIm.a */,
-				06FA6B17CC0A7FAFA9DA5364 /* libPods-Status-StatusIm-StatusImTests.a */,
-				4D059F2E62D7CD9FB1896703 /* libPods-Status-StatusImPR.a */,
+				0F8E9088BDE117AB71366407 /* libPods-Status-StatusIm.a */,
+				D3EFEEB5FC1235562D5D3BF1 /* libPods-Status-StatusIm-StatusImTests.a */,
+				5006FF03675A7E50320B4002 /* libPods-Status-StatusImPR.a */,
 			);
 			name = Frameworks;
 			sourceTree = "<group>";
@@ -324,12 +324,12 @@
 		D0D5C8D06825D33BA2D2121E /* Pods */ = {
 			isa = PBXGroup;
 			children = (
-				886398AFEF2B823AC8A4912C /* Pods-Status-StatusIm.debug.xcconfig */,
-				08A713A336BFEE0924821EC9 /* Pods-Status-StatusIm.release.xcconfig */,
-				EBFEABB7D6CC1144D83FBA82 /* Pods-Status-StatusIm-StatusImTests.debug.xcconfig */,
-				84C3C20891247EC6BFF93B51 /* Pods-Status-StatusIm-StatusImTests.release.xcconfig */,
-				4D7FC122A838AC3BFC46D82B /* Pods-Status-StatusImPR.debug.xcconfig */,
-				103861DFF36B6063BED2602B /* Pods-Status-StatusImPR.release.xcconfig */,
+				AA6DC18226EB1EFB2A8FE64D /* Pods-Status-StatusIm.debug.xcconfig */,
+				1CDF317A2E103217DF386083 /* Pods-Status-StatusIm.release.xcconfig */,
+				DAE7378308FEB005CE0A6E42 /* Pods-Status-StatusIm-StatusImTests.debug.xcconfig */,
+				93347A9564A62A24509EFA9C /* Pods-Status-StatusIm-StatusImTests.release.xcconfig */,
+				C618F2C2EF820C722B1E7624 /* Pods-Status-StatusImPR.debug.xcconfig */,
+				06AF19FA626AFFC91E66916B /* Pods-Status-StatusImPR.release.xcconfig */,
 			);
 			path = Pods;
 			sourceTree = "<group>";
@@ -341,11 +341,11 @@
 			isa = PBXNativeTarget;
 			buildConfigurationList = 00E357021AD99517003FC87E /* Build configuration list for PBXNativeTarget "StatusImTests" */;
 			buildPhases = (
-				F083BDB009D93F14ABE9577A /* [CP] Check Pods Manifest.lock */,
+				A461E3110C485D2A21EB942C /* [CP] Check Pods Manifest.lock */,
 				00E356EA1AD99517003FC87E /* Sources */,
 				00E356EB1AD99517003FC87E /* Frameworks */,
 				00E356EC1AD99517003FC87E /* Resources */,
-				D2C750D3F094DB4514432955 /* [CP] Copy Pods Resources */,
+				2B2389E62F0A9702C522FD40 /* [CP] Copy Pods Resources */,
 			);
 			buildRules = (
 			);
@@ -361,14 +361,14 @@
 			isa = PBXNativeTarget;
 			buildConfigurationList = 13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "StatusIm" */;
 			buildPhases = (
-				29DFA8D4A1684BDC5257F30D /* [CP] Check Pods Manifest.lock */,
+				C5DA0344FCE555AD1908FBCD /* [CP] Check Pods Manifest.lock */,
 				13B07F871A680F5B00A75B9A /* Sources */,
 				13B07F8C1A680F5B00A75B9A /* Frameworks */,
 				13B07F8E1A680F5B00A75B9A /* Resources */,
 				00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */,
 				20B6B6891D92C42700CC5C6A /* Embed Frameworks */,
 				E3914A731DF919ED00EBB515 /* Run Script */,
-				81ABD64BC3E76C9EEE7A6C62 /* [CP] Copy Pods Resources */,
+				EC618D80223E4CE064CFF898 /* [CP] Copy Pods Resources */,
 			);
 			buildRules = (
 			);
@@ -383,14 +383,14 @@
 			isa = PBXNativeTarget;
 			buildConfigurationList = 3AAD2AD924A3A60E0075D594 /* Build configuration list for PBXNativeTarget "StatusImPR" */;
 			buildPhases = (
-				B75C010670287761677282A4 /* [CP] Check Pods Manifest.lock */,
+				0196982A5A6EB89DC2106F9B /* [CP] Check Pods Manifest.lock */,
 				3AAD2ABB24A3A60E0075D594 /* Sources */,
 				3AAD2ABF24A3A60E0075D594 /* Frameworks */,
 				3AAD2AC924A3A60E0075D594 /* Resources */,
 				3AAD2AD524A3A60E0075D594 /* Bundle React Native code and images */,
 				3AAD2AD624A3A60E0075D594 /* Embed Frameworks */,
 				3AAD2AD724A3A60E0075D594 /* Run Script */,
-				C7E5420D406F9FB4ACC8ECE8 /* [CP] Copy Pods Resources */,
+				4DBAAF9A3117797361E216BA /* [CP] Copy Pods Resources */,
 			);
 			buildRules = (
 			);
@@ -544,7 +544,7 @@
 			shellPath = "/usr/bin/env sh";
 			shellScript = "set -o errexit\nexport NODE_BINARY=\"${NODE_BINARY:-node}\"\nexport NODE_ARGS=\"${NODE_ARGS:- --max-old-space-size=16384 }\"\n\nbash -x ../node_modules/react-native/scripts/react-native-xcode.sh > ./logs/react-native-xcode.log 2>&1";
 		};
-		29DFA8D4A1684BDC5257F30D /* [CP] Check Pods Manifest.lock */ = {
+		0196982A5A6EB89DC2106F9B /* [CP] Check Pods Manifest.lock */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
@@ -559,13 +559,35 @@
 			outputFileListPaths = (
 			);
 			outputPaths = (
-				"$(DERIVED_FILE_DIR)/Pods-Status-StatusIm-checkManifestLockResult.txt",
+				"$(DERIVED_FILE_DIR)/Pods-Status-StatusImPR-checkManifestLockResult.txt",
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
 			shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n    # print error to STDERR\n    echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n    exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
 			showEnvVarsInLog = 0;
 		};
+		2B2389E62F0A9702C522FD40 /* [CP] Copy Pods Resources */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			inputPaths = (
+				"${PODS_ROOT}/Target Support Files/Pods-Status-StatusIm-StatusImTests/Pods-Status-StatusIm-StatusImTests-resources.sh",
+				"${PODS_CONFIGURATION_BUILD_DIR}/RNImageCropPicker/QBImagePicker.bundle",
+				"${PODS_CONFIGURATION_BUILD_DIR}/React-Core/AccessibilityResources.bundle",
+				"${PODS_CONFIGURATION_BUILD_DIR}/TOCropViewController/TOCropViewControllerBundle.bundle",
+			);
+			name = "[CP] Copy Pods Resources";
+			outputPaths = (
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/QBImagePicker.bundle",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/AccessibilityResources.bundle",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/TOCropViewControllerBundle.bundle",
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+			shellPath = /bin/sh;
+			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-Status-StatusIm-StatusImTests/Pods-Status-StatusIm-StatusImTests-resources.sh\"\n";
+			showEnvVarsInLog = 0;
+		};
 		3AAD2AD524A3A60E0075D594 /* Bundle React Native code and images */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
@@ -594,51 +616,7 @@
 			shellPath = "/usr/bin/env sh";
 			shellScript = "\"${PROJECT_DIR}/scripts/set_xcode_version.sh\" > ./logs/set_xcode_version.log 2>&1";
 		};
-		81ABD64BC3E76C9EEE7A6C62 /* [CP] Copy Pods Resources */ = {
-			isa = PBXShellScriptBuildPhase;
-			buildActionMask = 2147483647;
-			files = (
-			);
-			inputPaths = (
-				"${PODS_ROOT}/Target Support Files/Pods-Status-StatusIm/Pods-Status-StatusIm-resources.sh",
-				"${PODS_CONFIGURATION_BUILD_DIR}/RNImageCropPicker/QBImagePicker.bundle",
-				"${PODS_CONFIGURATION_BUILD_DIR}/React-Core/AccessibilityResources.bundle",
-				"${PODS_CONFIGURATION_BUILD_DIR}/TOCropViewController/TOCropViewControllerBundle.bundle",
-			);
-			name = "[CP] Copy Pods Resources";
-			outputPaths = (
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/QBImagePicker.bundle",
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/AccessibilityResources.bundle",
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/TOCropViewControllerBundle.bundle",
-			);
-			runOnlyForDeploymentPostprocessing = 0;
-			shellPath = /bin/sh;
-			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-Status-StatusIm/Pods-Status-StatusIm-resources.sh\"\n";
-			showEnvVarsInLog = 0;
-		};
-		B75C010670287761677282A4 /* [CP] Check Pods Manifest.lock */ = {
-			isa = PBXShellScriptBuildPhase;
-			buildActionMask = 2147483647;
-			files = (
-			);
-			inputFileListPaths = (
-			);
-			inputPaths = (
-				"${PODS_PODFILE_DIR_PATH}/Podfile.lock",
-				"${PODS_ROOT}/Manifest.lock",
-			);
-			name = "[CP] Check Pods Manifest.lock";
-			outputFileListPaths = (
-			);
-			outputPaths = (
-				"$(DERIVED_FILE_DIR)/Pods-Status-StatusImPR-checkManifestLockResult.txt",
-			);
-			runOnlyForDeploymentPostprocessing = 0;
-			shellPath = /bin/sh;
-			shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n    # print error to STDERR\n    echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n    exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
-			showEnvVarsInLog = 0;
-		};
-		C7E5420D406F9FB4ACC8ECE8 /* [CP] Copy Pods Resources */ = {
+		4DBAAF9A3117797361E216BA /* [CP] Copy Pods Resources */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
@@ -660,43 +638,7 @@
 			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-Status-StatusImPR/Pods-Status-StatusImPR-resources.sh\"\n";
 			showEnvVarsInLog = 0;
 		};
-		D2C750D3F094DB4514432955 /* [CP] Copy Pods Resources */ = {
-			isa = PBXShellScriptBuildPhase;
-			buildActionMask = 2147483647;
-			files = (
-			);
-			inputPaths = (
-				"${PODS_ROOT}/Target Support Files/Pods-Status-StatusIm-StatusImTests/Pods-Status-StatusIm-StatusImTests-resources.sh",
-				"${PODS_CONFIGURATION_BUILD_DIR}/RNImageCropPicker/QBImagePicker.bundle",
-				"${PODS_CONFIGURATION_BUILD_DIR}/React-Core/AccessibilityResources.bundle",
-				"${PODS_CONFIGURATION_BUILD_DIR}/TOCropViewController/TOCropViewControllerBundle.bundle",
-			);
-			name = "[CP] Copy Pods Resources";
-			outputPaths = (
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/QBImagePicker.bundle",
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/AccessibilityResources.bundle",
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/TOCropViewControllerBundle.bundle",
-			);
-			runOnlyForDeploymentPostprocessing = 0;
-			shellPath = /bin/sh;
-			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-Status-StatusIm-StatusImTests/Pods-Status-StatusIm-StatusImTests-resources.sh\"\n";
-			showEnvVarsInLog = 0;
-		};
-		E3914A731DF919ED00EBB515 /* Run Script */ = {
-			isa = PBXShellScriptBuildPhase;
-			buildActionMask = 8;
-			files = (
-			);
-			inputPaths = (
-			);
-			name = "Run Script";
-			outputPaths = (
-			);
-			runOnlyForDeploymentPostprocessing = 1;
-			shellPath = "/usr/bin/env sh";
-			shellScript = "\"${PROJECT_DIR}/scripts/set_xcode_version.sh\" > ./logs/set_xcode_version.log 2>&1";
-		};
-		F083BDB009D93F14ABE9577A /* [CP] Check Pods Manifest.lock */ = {
+		A461E3110C485D2A21EB942C /* [CP] Check Pods Manifest.lock */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
@@ -718,6 +660,64 @@
 			shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n    # print error to STDERR\n    echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n    exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
 			showEnvVarsInLog = 0;
 		};
+		C5DA0344FCE555AD1908FBCD /* [CP] Check Pods Manifest.lock */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			inputFileListPaths = (
+			);
+			inputPaths = (
+				"${PODS_PODFILE_DIR_PATH}/Podfile.lock",
+				"${PODS_ROOT}/Manifest.lock",
+			);
+			name = "[CP] Check Pods Manifest.lock";
+			outputFileListPaths = (
+			);
+			outputPaths = (
+				"$(DERIVED_FILE_DIR)/Pods-Status-StatusIm-checkManifestLockResult.txt",
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+			shellPath = /bin/sh;
+			shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n    # print error to STDERR\n    echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n    exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
+			showEnvVarsInLog = 0;
+		};
+		E3914A731DF919ED00EBB515 /* Run Script */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 8;
+			files = (
+			);
+			inputPaths = (
+			);
+			name = "Run Script";
+			outputPaths = (
+			);
+			runOnlyForDeploymentPostprocessing = 1;
+			shellPath = "/usr/bin/env sh";
+			shellScript = "\"${PROJECT_DIR}/scripts/set_xcode_version.sh\" > ./logs/set_xcode_version.log 2>&1";
+		};
+		EC618D80223E4CE064CFF898 /* [CP] Copy Pods Resources */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			inputPaths = (
+				"${PODS_ROOT}/Target Support Files/Pods-Status-StatusIm/Pods-Status-StatusIm-resources.sh",
+				"${PODS_CONFIGURATION_BUILD_DIR}/RNImageCropPicker/QBImagePicker.bundle",
+				"${PODS_CONFIGURATION_BUILD_DIR}/React-Core/AccessibilityResources.bundle",
+				"${PODS_CONFIGURATION_BUILD_DIR}/TOCropViewController/TOCropViewControllerBundle.bundle",
+			);
+			name = "[CP] Copy Pods Resources";
+			outputPaths = (
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/QBImagePicker.bundle",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/AccessibilityResources.bundle",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/TOCropViewControllerBundle.bundle",
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+			shellPath = /bin/sh;
+			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-Status-StatusIm/Pods-Status-StatusIm-resources.sh\"\n";
+			showEnvVarsInLog = 0;
+		};
 /* End PBXShellScriptBuildPhase section */

 /* Begin PBXSourcesBuildPhase section */
@@ -765,7 +765,7 @@
 /* Begin XCBuildConfiguration section */
 		00E356F61AD99517003FC87E /* Debug */ = {
 			isa = XCBuildConfiguration;
-			baseConfigurationReference = EBFEABB7D6CC1144D83FBA82 /* Pods-Status-StatusIm-StatusImTests.debug.xcconfig */;
+			baseConfigurationReference = DAE7378308FEB005CE0A6E42 /* Pods-Status-StatusIm-StatusImTests.debug.xcconfig */;
 			buildSettings = {
 				ALWAYS_EMBED_SWIFT_STANDARD_LIBRARIES = YES;
 				BUNDLE_ID_SUFFIX = .debug;
@@ -802,7 +802,7 @@
 		};
 		00E356F71AD99517003FC87E /* Release */ = {
 			isa = XCBuildConfiguration;
-			baseConfigurationReference = 84C3C20891247EC6BFF93B51 /* Pods-Status-StatusIm-StatusImTests.release.xcconfig */;
+			baseConfigurationReference = 93347A9564A62A24509EFA9C /* Pods-Status-StatusIm-StatusImTests.release.xcconfig */;
 			buildSettings = {
 				ALWAYS_EMBED_SWIFT_STANDARD_LIBRARIES = YES;
 				BUNDLE_ID_SUFFIX = "";
@@ -835,7 +835,7 @@
 		};
 		13B07F941A680F5B00A75B9A /* Debug */ = {
 			isa = XCBuildConfiguration;
-			baseConfigurationReference = 886398AFEF2B823AC8A4912C /* Pods-Status-StatusIm.debug.xcconfig */;
+			baseConfigurationReference = AA6DC18226EB1EFB2A8FE64D /* Pods-Status-StatusIm.debug.xcconfig */;
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = "AppIcon$(BUNDLE_ID_SUFFIX)";
 				BUNDLE_ID_SUFFIX = .debug;
@@ -915,7 +915,7 @@
 		};
 		13B07F951A680F5B00A75B9A /* Release */ = {
 			isa = XCBuildConfiguration;
-			baseConfigurationReference = 08A713A336BFEE0924821EC9 /* Pods-Status-StatusIm.release.xcconfig */;
+			baseConfigurationReference = 1CDF317A2E103217DF386083 /* Pods-Status-StatusIm.release.xcconfig */;
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = "AppIcon$(BUNDLE_ID_SUFFIX)";
 				BUNDLE_ID_SUFFIX = "";
@@ -988,7 +988,7 @@
 		};
 		3AAD2ADA24A3A60E0075D594 /* Debug */ = {
 			isa = XCBuildConfiguration;
-			baseConfigurationReference = 4D7FC122A838AC3BFC46D82B /* Pods-Status-StatusImPR.debug.xcconfig */;
+			baseConfigurationReference = C618F2C2EF820C722B1E7624 /* Pods-Status-StatusImPR.debug.xcconfig */;
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = "AppIcon$(BUNDLE_ID_SUFFIX)";
 				BUNDLE_ID_SUFFIX = .debug;
@@ -1065,7 +1065,7 @@
 		};
 		3AAD2ADB24A3A60E0075D594 /* Release */ = {
 			isa = XCBuildConfiguration;
-			baseConfigurationReference = 103861DFF36B6063BED2602B /* Pods-Status-StatusImPR.release.xcconfig */;
+			baseConfigurationReference = 06AF19FA626AFFC91E66916B /* Pods-Status-StatusImPR.release.xcconfig */;
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = "AppIconPR$(BUNDLE_ID_SUFFIX)";
 				BUNDLE_ID_SUFFIX = "";
@@ -46,7 +46,6 @@
    "react-native-dialogs": "^1.0.4",
    "react-native-draggable-flatlist": "^4.0.1",
    "react-native-fast-image": "^8.5.11",
-    "react-native-fetch-polyfill": "^1.1.2",
    "react-native-fs": "^2.14.1",
    "react-native-gesture-handler": "2.6.1",
    "react-native-gifted-charts": "git+https://github.com/status-im/react-native-gifted-charts.git#refs/tags/1.3.2-status.1",
@@ -0,0 +1,13 @@
+#!/usr/bin/env sh
+
+set -euo pipefail
+
+QUO_USAGES=$(grep -r -E '\[quo\.[^ ]* :(?:as|refer)|\[quo\.[^ ]*\]' --include '*.cljs' --include '*.clj' './src/status_im2' --exclude='./src/status_im2/common/theme/core.cljs' || true)
+
+echo -e "\nChecking 'status_im2' namespace for 'quo' namespace usage."
+
+if [ -n "$QUO_USAGES" ]; then
+    echo -e "\033[0;31mERROR: Usage of the old 'quo' namespace detected in 'status_im2' code. Please update to 'quo2'. \n"
+    echo -e "$QUO_USAGES \033[0m"
+    exit 1
+fi
@@ -121,7 +121,14 @@ export function screenGestureOnEnd(data) {
  return function (event) {
    'worklet';

-    const { screenLeft, screenState, screenWidth, leftVelocity, rightVelocity, screenClosedCallback } = data;
+    const {
+      'screen-left': screenLeft,
+      'screen-state': screenState,
+      'screen-width': screenWidth,
+      'left-velocity': leftVelocity,
+      'right-velocity': rightVelocity,
+      'screen-closed-callback': screenClosedCallback,
+    } = data;
    const absoluteX = event.absoluteX ?? 0;
    const velocityX = event.velocityX ?? 0;
    const closeScreen = velocityX > rightVelocity || (velocityX > leftVelocity && absoluteX >= screenWidth / 2);
@@ -420,6 +420,8 @@
    "react-native-transparent-video"                 react-native-transparent-video
    "react-native-orientation-locker"                react-native-orientation-locker
    "react-native-gifted-charts"                     react-native-gifted-charts
+    "../resources/data/emojis/en.json"               (js/JSON.parse (slurp
+                                                                     "./resources/data/emojis/en.json"))
    "../src/js/worklets/core.js"                     worklet-factory
    "../src/js/worklets/shell/bottom_tabs.js"        #js {}
    "../src/js/worklets/shell/home_stack.js"         #js {}
@@ -470,7 +470,8 @@
 (defn sha3
  [s]
  (log/debug "[native-module] sha3")
-  (.sha3 ^js (status) s))
+  (when s
+    (.sha3 ^js (status) (str s))))

 (defn utf8-to-hex
  [s]
@@ -491,8 +492,9 @@
 (defn address?
  [address]
  (log/debug "[native-module] address?")
-  (let [result (.isAddress ^js (status) address)]
-    (types/json->clj result)))
+  (when address
+    (let [result (.isAddress ^js (status) address)]
+      (types/json->clj result))))

 (defn to-checksum-address
  [address]
@@ -69,6 +69,35 @@ In the image above we can see the properties are `Type`, `State`, `Size`,
  ...)
 ```

+### Handling Sizes
+In the designs, sizes are referred to as integers. To avoid having the codebase littered with magic numbers we instead have a keyword convention to use in components to map these keywords with their sizes.
+
+The convention is `:size-<number>`, e.g size `20` is `:size-20`
+
+```clojure
+;; bad
+(defn button
+  [{:keys [size]}]
+  [rn/view
+   {:style {:height (case size
+                      20 20
+                      40 40
+                      0)}}]
+  ...)
+```
+
+```clojure
+;; good
+(defn button
+  [{:keys [size]}]
+  [rn/view
+   {:style {:height (case size
+                      :size-20 20
+                      :size-40 40
+                      0)}}]
+  ...)
+```
+
 ## Clojure var conventions

 - Due to the fact that every `view` namespace should export only one component
@@ -12,18 +12,19 @@
   :height   view-height})

 (defn button-container
-  [position]
+  [{:keys [left right theme]}]
  (merge
   {:width            32
    :height           32
    :border-radius    10
    :justify-content  :center
    :align-items      :center
-    :background-color (colors/theme-colors colors/white-opa-40 colors/neutral-80-opa-40)
+    :background-color (colors/theme-colors colors/white-opa-40 colors/neutral-80-opa-40 theme)
    :position         :absolute
    :top              56
-    :z-index          3}
-   position))
+    :z-index          3
+    :left             left
+    :right            right}))

 (defn blur-view
  [animation]
@@ -38,7 +39,7 @@
    :overflow :hidden}))

 (defn entity-picture
-  [animation]
+  [animation theme]
  (reanimated/apply-animations-to-style
   {:width  animation
    :height animation}
@@ -49,11 +50,11 @@
    :left             20
    :justify-content  :center
    :align-items      :center
-    :background-color (colors/theme-colors colors/white colors/neutral-100)
+    :background-color (colors/theme-colors colors/white colors/neutral-100 theme)
    :overflow         :hidden}))

 (defn header-bottom-part
-  [animation]
+  [animation theme]
  (reanimated/apply-animations-to-style
   {:border-top-right-radius animation
    :border-top-left-radius  animation}
@@ -62,7 +63,7 @@
    :height           86
    :left             0
    :right            0
-    :background-color (colors/theme-colors colors/white colors/neutral-100)}))
+    :background-color (colors/theme-colors colors/white colors/neutral-100 theme)}))

 (defn header-comp
  [y-animation opacity-animation]
@@ -9,7 +9,8 @@
    [reagent.core :as reagent]
    [quo2.foundations.colors :as colors]
    [quo2.components.animated-header-flatlist.style :as style]
-    [oops.core :as oops]))
+    [oops.core :as oops]
+    [quo2.theme :as quo.theme]))

 (def header-height 234)
 (def cover-height 192)
@@ -30,7 +31,7 @@
    (reanimated/set-shared-value scroll-y current-y)))

 (defn header
-  [{:keys [theme-color f-display-picture-comp cover-uri title-comp]} top-inset scroll-y]
+  [{:keys [theme-color f-display-picture-comp cover-uri title-comp theme]} top-inset scroll-y]
  (let [input-range        [0 (* threshold 0.33)]
        picture-scale-down 0.4
        size-animation     (interpolate scroll-y input-range [80 (* 80 picture-scale-down)])
@@ -38,21 +39,23 @@
        border-animation   (interpolate scroll-y input-range [12 0])]
    [rn/view
     {:style {:height           header-height
-              :background-color (or theme-color (colors/theme-colors colors/white colors/neutral-95))
+              :background-color (or theme-color
+                                    (colors/theme-colors colors/white colors/neutral-95 theme))
              :margin-top       (when platform/ios? (- top-inset))}}
     (when cover-uri
       [fast-image/fast-image
        {:style  {:width  "100%"
                  :height cover-height}
         :source {:uri cover-uri}}])
-     [reanimated/view {:style (style/header-bottom-part border-animation)}
+     [reanimated/view {:style (style/header-bottom-part border-animation theme)}
      [title-comp]]
-     [reanimated/view {:style (style/entity-picture size-animation)}
+     [reanimated/view {:style (style/entity-picture size-animation theme)}
      [:f> f-display-picture-comp image-animation]]]))

 (defn- f-animated-header-list
  [{:keys [header-comp main-comp back-button-on-press] :as params}]
-  (let [window-height           (:height (rn/get-window))
+  (let [theme                   (quo.theme/use-theme-value)
+        window-height           (:height (rn/get-window))
        {:keys [top bottom]}    (safe-area/get-insets)
        ;; view height calculation is different because window height is different on iOS and Android:
        view-height             (if platform/ios?
@@ -69,12 +72,12 @@
     [rn/touchable-opacity
      {:active-opacity 1
       :on-press       back-button-on-press
-       :style          (style/button-container {:left 20})}
-      [quo/icon :i/arrow-left {:size 20 :color (colors/theme-colors colors/black colors/white)}]]
+       :style          (style/button-container {:left 20 :theme theme})}
+      [quo/icon :i/arrow-left {:size 20 :color (colors/theme-colors colors/black colors/white theme)}]]
     [rn/touchable-opacity
      {:active-opacity 1
-       :style          (style/button-container {:right 20})}
-      [quo/icon :i/options {:size 20 :color (colors/theme-colors colors/black colors/white)}]]
+       :style          (style/button-container {:right 20 :theme theme})}
+      [quo/icon :i/options {:size 20 :color (colors/theme-colors colors/black colors/white theme)}]]
     [reanimated/blur-view
      {:blurAmount   32
       :blurType     :light
@@ -86,7 +89,7 @@
      {:data                  [nil]
       :render-fn             main-comp
       :key-fn                str
-       :header                (reagent/as-element (header params top scroll-y))
+       :header                (reagent/as-element (header (assoc params :theme theme) top scroll-y))
       ;; TODO: https://github.com/status-im/status-mobile/issues/14924
       :scroll-event-throttle 8
       :on-scroll             (fn [event] (scroll-handler event initial-y scroll-y))}]]))
@@ -6,16 +6,20 @@
 (def default-padding 16)
 (def default-emoji-size 36)

+(def ^:private container-size
+  {:size-64 64})
+
 (defn get-border-radius
  [size]
  (case size
-    80 16
-    48 12
-    32 10
-    28 8
-    24 8
-    20 6
-    16 4
+    80       16
+    :size-64 16
+    48       12
+    32       10
+    28       8
+    24       8
+    20       6
+    16       4
    default-border-radius))

 (defn get-padding
@@ -33,29 +37,32 @@
 (defn get-emoji-size
  [size]
  (case size
-    80 36
-    48 24
-    32 15
-    28 12
-    24 11
-    20 11
-    16 11
+    80       36
+    :size-64 30
+    48       24
+    32       15
+    28       12
+    24       11
+    20       11
+    16       11
    default-emoji-size))

 (defn get-border-width
  [size]
-  (case size
-    16 0.8 ;; 0.8 px is for only size 16
-    ;; Rest of the size will have 1 px
-    1))
+  (if (= size 16)
+    0.8 ;; 0.8 px is for only size 16
+    1)) ;; Rest of the size will have 1 px
+

 (defn root-container
  [{:keys [type size theme customization-color]
    :or   {size                default-size
           customization-color :blue}}]
-  (let [watch-only? (= type :watch-only)]
-    (cond-> {:width            size
-             :height           size
+  (let [watch-only? (= type :watch-only)
+        width       (cond-> size
+                      (keyword? size) (container-size size))]
+    (cond-> {:width            width
+             :height           width
             :background-color (colors/custom-color-by-theme customization-color 50 60 nil nil theme)
             :border-radius    (get-border-radius size)
             :border-color     (if (= theme :light) colors/neutral-80-opa-5 colors/white-opa-5)
@@ -11,7 +11,7 @@

  (h/test "with emoji, no lock set, large size"
    (let [emoji "🍓"]
-      (h/render [component/view {:emoji emoji :size :size/l}])
+      (h/render [component/view {:emoji emoji :size :size-32}])
      (h/is-null (h/query-by-label-text :initials))
      (h/is-truthy (h/query-by-text emoji))
      (h/is-null (h/query-by-label-text :lock))))
@@ -31,5 +31,5 @@
  (h/test "no emoji, large size"
    (h/render [component/view
               {:full-name "Status Mobile"
-                :size      :size/l}])
+                :size      :size-32}])
    (h/is-truthy (h/query-by-text "SM"))))
@@ -5,17 +5,27 @@

 (defn outer-container
  [{:keys [size color]}]
-  (let [size (if (= size :size/l) 32 24)]
-    {:width            size
-     :height           size
-     :border-radius    size
+  (let [container-size (case size
+                         :size-64 64
+                         :size-32 32
+                         24)]
+    {:width            container-size
+     :height           container-size
+     :border-radius    container-size
     :justify-content  :center
     :align-items      :center
     :background-color (colors/theme-alpha color 0.1 0.1)}))

+(defn emoji-size
+  [size]
+  {:font-size (case size
+                :size-64 24
+                :size-32 15
+                11)})
+
 (defn lock-container
  [size]
-  (let [distance (if (= size :size/l) 20 12)]
+  (let [distance (if (= size :size-32) 20 12)]
    {:position         :absolute
     :left             distance
     :top              distance
@@ -5,17 +5,19 @@
            [quo2.components.markdown.text :as text]
            [quo2.foundations.colors :as colors]
            [react-native.core :as rn]
-            utils.string))
+            [utils.string]))

 (defn- initials
  [full-name size color]
-  (let [amount-initials (if (= size :size/l) 2 1)
+  (let [amount-initials (if (#{:size-32 :size-64} size) 2 1)
        channel-name    (string/replace full-name "#" "")]
    [text/text
-     {:accessibility-label :initials
-      :size                :paragraph-2
-      :weight              :semi-bold
-      :style               {:color color}}
+     (cond-> {:accessibility-label :initials
+              :style               {:color color}
+              :size                :paragraph-2
+              :weight              :semi-bold}
+       (= size :size-64) (assoc :size   :heading-1
+                                :weight :medium))
     (utils.string/get-initials channel-name amount-initials)]))

 (defn- lock
@@ -54,8 +56,8 @@
    :style               (style/outer-container {:size size :color customization-color})}
   (if (string/blank? emoji)
     [initials full-name size customization-color]
-     [text/text
-      {:accessibility-label :emoji
-       :size                (if (= size :size/l) :paragraph-1 :label)}
+     [rn/text
+      {:style               (style/emoji-size size)
+       :accessibility-label :emoji}
      (string/trim emoji)])
   [lock locked? size]])
@@ -7,30 +7,31 @@
            [quo2.components.avatars.group-avatar.style :as style]))

 (def sizes
-  {:size/s-20 {:icon      12
-               :container 20}
-   :size/s-28 {:icon      16
-               :container 28}
-   :size/s-32 {:icon      16
-               :container 32}
-   :size/s-48 {:icon      20
-               :container 48}
-   :size/s-80 {:icon      32
-               :container 80}})
+  {:size-20 {:icon      12
+             :container 20}
+   :size-28 {:icon      16
+             :container 28}
+   :size-32 {:icon      16
+             :container 32}
+   :size-48 {:icon      20
+             :container 48}
+   :size-80 {:icon      32
+             :container 80}})

 (defn- view-internal
  [_]
  (fn [{:keys [size theme customization-color picture icon-name]
-        :or   {size                :size/s-20
+        :or   {size                :size-20
               customization-color :blue
               picture             nil
               icon-name           :i/group}}]
    (let [container-size (get-in sizes [size :container])
          icon-size      (get-in sizes [size :icon])]
      [rn/view
-       {:style (style/container {:container-size      container-size
-                                 :customization-color customization-color
-                                 :theme               theme})}
+       {:accessibility-label :group-avatar
+        :style               (style/container {:container-size      container-size
+                                               :customization-color customization-color
+                                               :theme               theme})}
       (if picture
         [fast-image/fast-image
          {:source picture
@@ -5,19 +5,19 @@
            [react-native.core :as rn]))

 (def ^:private sizes
-  {:size/s-48 {:component 48
-               :icon      20}
-   :size/s-32 {:component 32
-               :icon      20}
-   :size/s-24 {:component 24
-               :icon      16}
-   :size/s-20 {:component 20
-               :icon      12}})
+  {:size-48 {:component 48
+             :icon      20}
+   :size-32 {:component 32
+             :icon      20}
+   :size-24 {:component 24
+             :icon      16}
+   :size-20 {:component 20
+             :icon      12}})

 (defn icon-avatar-internal
  [{:keys [size icon color opacity border? theme]
    :or   {opacity 20
-           size    :size/s-32}}]
+           size    :size-32}}]
  (let [{component-size :component icon-size :icon} (get sizes size)
        circle-color                                (colors/custom-color color 50 opacity)
        icon-color                                  (colors/custom-color-by-theme color 50 60)]
@@ -2,48 +2,54 @@
  (:require [quo2.foundations.colors :as colors]))

 (def sizes
-  {:big    {:dimensions                      80
-            :status-indicator                12
-            :status-indicator-border         4
-            :status-indicator-center-to-edge 12
-            :font-size                       :heading-1
-            :ring-width                      4}
-   :medium {:dimensions                      48
-            :status-indicator                8
-            :status-indicator-border         2
-            :status-indicator-center-to-edge 6
-            :font-size                       :heading-2
-            :ring-width                      2}
-   :small  {:dimensions                      32
-            :status-indicator                8
-            :status-indicator-border         2
-            :status-indicator-center-to-edge 4
-            :font-size                       :paragraph-2
-            :ring-width                      2}
-   28      {:dimensions                      28
-            :status-indicator                0
-            :status-indicator-border         0
-            :status-indicator-center-to-edge 0
-            :font-size                       :paragraph-2
-            :ring-width                      0}
-   :xs     {:dimensions                      24
-            :status-indicator                0
-            :status-indicator-border         0
-            :status-indicator-center-to-edge 0
-            :font-size                       :paragraph-2
-            :ring-width                      2}
-   :xxs    {:dimensions                      20
-            :status-indicator                0
-            :status-indicator-border         0
-            :status-indicator-center-to-edge 0
-            :font-size                       :label
-            :ring-width                      2}
-   :xxxs   {:dimensions                      16
-            :status-indicator                0
-            :status-indicator-border         0
-            :status-indicator-center-to-edge 0
-            :font-size                       :label
-            :ring-width                      2}})
+  {:big     {:dimensions                      80
+             :status-indicator                12
+             :status-indicator-border         4
+             :status-indicator-center-to-edge 12
+             :font-size                       :heading-1
+             :ring-width                      4}
+   :size-64 {:dimensions                      64
+             :status-indicator                8
+             :status-indicator-border         2
+             :status-indicator-center-to-edge 6
+             :font-size                       :heading-1
+             :ring-width                      2}
+   :medium  {:dimensions                      48
+             :status-indicator                8
+             :status-indicator-border         2
+             :status-indicator-center-to-edge 6
+             :font-size                       :heading-2
+             :ring-width                      2}
+   :small   {:dimensions                      32
+             :status-indicator                8
+             :status-indicator-border         2
+             :status-indicator-center-to-edge 4
+             :font-size                       :paragraph-2
+             :ring-width                      2}
+   28       {:dimensions                      28
+             :status-indicator                0
+             :status-indicator-border         0
+             :status-indicator-center-to-edge 0
+             :font-size                       :paragraph-2
+             :ring-width                      0}
+   :xs      {:dimensions                      24
+             :status-indicator                0
+             :status-indicator-border         0
+             :status-indicator-center-to-edge 0
+             :font-size                       :paragraph-2
+             :ring-width                      2}
+   :xxs     {:dimensions                      20
+             :status-indicator                0
+             :status-indicator-border         0
+             :status-indicator-center-to-edge 0
+             :font-size                       :label
+             :ring-width                      2}
+   :xxxs    {:dimensions                      16
+             :status-indicator                0
+             :status-indicator-border         0
+             :status-indicator-center-to-edge 0
+             :font-size                       :label
+             :ring-width                      2}})

 (defn initials-avatar
  [size customization-color theme]
@@ -39,7 +39,7 @@
   :background-color intials avatar background color
   :color            intials avatar text color
   :size             intials avatar radius
-   :ring?            render ident ring around avatar?}
+   :ring?            render ident ring around avatar? NOTE: this option may not work if override-ring? is not nil}

  supported color formats:
  #RRGGBB
@@ -8,18 +8,21 @@
  {:small   20
   :medium  32
   :large   48
+   :size-64 64
   :x-large 80})

 (def font-sizes
  {:small   :label
   :medium  :paragraph-2
   :large   :paragraph-1
+   :size-64 :heading-1
   :x-large :heading-1})

 (def font-weights
  {:small   :medium
   :medium  :semi-bold
   :large   :semi-bold
+   :size-64 :medium
   :x-large :medium})

 (defn wallet-user-avatar
@@ -1,6 +1,8 @@
 (ns quo2.components.buttons.button.properties
  (:require [quo2.foundations.colors :as colors]))

+(def backgrounds #{:photo :blur})
+
 (defn custom-color-type
  [customization-color icon-only?]
  {:icon-color       colors/white-opa-70
@@ -29,10 +29,11 @@
   only icon
   [button {:icon-only? true} :i/close-circle]"
  [_ _]
-  (let [pressed? (reagent/atom false)]
+  (let [pressed-state? (reagent/atom false)]
    (fn
      [{:keys [on-press on-long-press disabled? type background size icon-left icon-right icon-top
-               customization-color theme accessibility-label icon-only? container-style inner-style]
+               customization-color theme accessibility-label icon-only? container-style inner-style
+               pressed? on-press-in on-press-out]
        :or   {type                :primary
               size                40
               customization-color (cond (= type :primary)  :blue
@@ -46,14 +47,18 @@
                                           :background          background
                                           :type                type
                                           :theme               theme
-                                           :pressed?            @pressed?
+                                           :pressed?            (if pressed? pressed? @pressed-state?)
                                           :icon-only?          icon-only?})
            icon-size (when (= 24 size) 12)]
        [rn/touchable-without-feedback
         {:disabled            disabled?
          :accessibility-label accessibility-label
-          :on-press-in         #(reset! pressed? true)
-          :on-press-out        #(reset! pressed? nil)
+          :on-press-in         (fn []
+                                 (reset! pressed-state? true)
+                                 (when on-press-in (on-press-in)))
+          :on-press-out        (fn []
+                                 (reset! pressed-state? nil)
+                                 (when on-press-out (on-press-out)))
          :on-press            on-press
          :on-long-press       on-long-press}
         [rn/view
@@ -76,7 +81,7 @@
             [customization-colors/overlay
              {:customization-color customization-color
               :theme               theme
-               :pressed?            @pressed?}])
+               :pressed?            (if pressed? pressed? @pressed-state?)}])
           (when (= background :photo)
             [blur/view
              {:blur-radius   20
@@ -70,7 +70,7 @@
  [sliding-complete?]
  (reset! sliding-complete? true))

-(defn- reset-track-position
+(defn reset-track-position
  [x-pos]
  (animate-spring x-pos 0))

@@ -1,7 +1,6 @@
 (ns quo2.components.buttons.slide-button.component-spec
  (:require [quo2.components.buttons.slide-button.view :as slide-button]
            [quo2.components.buttons.slide-button.constants :as constants]
-            [quo2.components.buttons.slide-button.utils :as utils]
            ["@testing-library/react-native" :as rtl]
            ["react-native-gesture-handler/jest-utils" :as gestures-jest]
            [reagent.core :as r]
@@ -82,17 +81,11 @@
      (h/has-style track-mock {:opacity constants/disable-opacity})))

  (h/test "render the small button"
-    (h/render [slide-button/view (assoc default-props :size :small)])
+    (h/render [slide-button/view (assoc default-props :size :size/s-40)])
    (let [mock         (h/get-by-test-id :slide-button-track)
          small-height (:track-height constants/small-dimensions)]
      (h/has-style mock {:height small-height})))

-  (h/test "render with the correct customization-color"
-    (h/render [slide-button/view (assoc default-props :customization-color :purple)])
-    (let [track-mock   (h/get-by-test-id :slide-button-track)
-          purple-color (utils/slider-color :track :purple)]
-      (h/has-style track-mock {:backgroundColor purple-color})))
-
  (h/test
    "calls on-complete when dragged"
    (let [props          (merge default-props {:on-complete (h/mock-fn)})
@@ -13,10 +13,10 @@
   :right    0})

 (defn thumb-container
-  [interpolate-track thumb-size customization-color]
+  [{:keys [interpolate-track thumb-size customization-color theme]}]
  (reanimated/apply-animations-to-style
   {:transform [{:translate-x (interpolate-track :track-clamp)}]}
-   {:background-color (utils/slider-color :main customization-color)
+   {:background-color (utils/slider-color :main customization-color theme)
    :border-radius    12
    :height           thumb-size
    :width            thumb-size
@@ -46,7 +46,7 @@
    :justify-content :space-around}))

 (defn track
-  [disabled? customization-color height]
+  [{:keys [disabled? customization-color height theme]}]
  {:align-items      :flex-start
   :justify-content  :center
   :border-radius    14
@@ -54,7 +54,7 @@
   :align-self       :stretch
   :padding          constants/track-padding
   :opacity          (if disabled? 0.3 1)
-   :background-color (utils/slider-color :track customization-color)})
+   :background-color (utils/slider-color :track customization-color theme)})

 (defn track-cover
  [interpolate-track]
@@ -74,7 +74,7 @@
   :width           track-width})

 (defn track-text
-  [customization-color]
+  [customization-color theme]
  (-> typography/paragraph-1
      (merge typography/font-medium)
-      (assoc :color (utils/slider-color :main customization-color))))
+      (assoc :color (utils/slider-color :main customization-color theme))))
@@ -6,9 +6,15 @@
 (defn slider-color
  "- `color-key`               `:main`/`:track`
   - `customization-color` Customization color"
-  [color-key customization-color]
-  (let [colors-by-key {:main  (colors/custom-color-by-theme customization-color 50 60)
-                       :track (colors/custom-color-by-theme customization-color 50 60 10 10)}]
+  [color-key customization-color theme]
+  (let [colors-by-key {:main  (colors/theme-colors
+                               (colors/custom-color customization-color 50)
+                               (colors/custom-color customization-color 60)
+                               theme)
+                       :track (colors/theme-colors
+                               (colors/custom-color customization-color 50 10)
+                               (colors/custom-color customization-color 60 10)
+                               theme)}]
    (color-key colors-by-key)))

 (defn clamp-value
@@ -28,8 +34,8 @@
 (defn get-dimensions
  [track-width size dimension-key]
  (let [default-dimensions (case size
-                             :small constants/small-dimensions
-                             :large constants/large-dimensions
+                             :size/s-40 constants/small-dimensions
+                             :size/s-48 constants/large-dimensions
                             constants/large-dimensions)]
    (-> default-dimensions
        (merge {:usable-track (calc-usable-track
@@ -10,7 +10,8 @@
    [reagent.core :as reagent]
    [oops.core :as oops]
    [react-native.reanimated :as reanimated]
-    [quo2.components.buttons.slide-button.constants :as constants]))
+    [quo2.components.buttons.slide-button.constants :as constants]
+    [quo2.theme :as quo.theme]))

 (defn- f-slider
  [{:keys [disabled?]}]
@@ -20,14 +21,15 @@
        on-track-layout    (fn [evt]
                             (let [width (oops/oget evt "nativeEvent.layout.width")]
                               (reset! track-width width)))]
-
-    (fn [{:keys [on-complete
+    (fn [{:keys [on-reset
+                 on-complete
                 track-text
                 track-icon
                 disabled?
                 customization-color
                 size
-                 container-style]}]
+                 container-style
+                 theme]}]
      (let [x-pos             (reanimated/use-shared-value 0)
            dimensions        (partial utils/get-dimensions
                                       (or @track-width constants/default-width)
@@ -36,12 +38,19 @@
                                       x-pos
                                       (dimensions :usable-track)
                                       (dimensions :thumb))]
-
        (rn/use-effect (fn []
                         (when @sliding-complete?
                           (on-complete)))
                       [@sliding-complete?])

+        (rn/use-effect (fn []
+                         (when on-reset
+                           (reset! sliding-complete? false)
+                           (reset! gestures-disabled? false)
+                           (animations/reset-track-position x-pos)
+                           (on-reset)))
+                       [on-reset])
+
        [gesture/gesture-detector
         {:gesture (animations/drag-gesture x-pos
                                            gestures-disabled?
@@ -50,21 +59,25 @@
                                            sliding-complete?)}
         [reanimated/view
          {:test-ID   :slide-button-track
-           :style     (merge (style/track disabled? customization-color (dimensions :track-height))
+           :style     (merge (style/track {:disabled?           disabled?
+                                           :customization-color customization-color
+                                           :height              (dimensions :track-height)
+                                           :theme               theme})
                             container-style)
           :on-layout (when-not (some? @track-width)
                        on-track-layout)}
          [reanimated/view {:style (style/track-cover interpolate-track)}
           [rn/view {:style (style/track-cover-text-container @track-width)}
            [icon/icon track-icon
-             {:color (utils/slider-color :main customization-color)
+             {:color (utils/slider-color :main customization-color theme)
              :size  20}]
            [rn/view {:width 4}]
-            [rn/text {:style (style/track-text customization-color)} track-text]]]
+            [rn/text {:style (style/track-text customization-color theme)} track-text]]]
          [reanimated/view
-           {:style (style/thumb-container interpolate-track
-                                          (dimensions :thumb)
-                                          customization-color)}
+           {:style (style/thumb-container {:interpolate-track   interpolate-track
+                                           :thumb-size          (dimensions :thumb)
+                                           :customization-color customization-color
+                                           :theme               theme})}
           [reanimated/view {:style (style/arrow-icon-container interpolate-track)}
            [icon/icon :arrow-right
             {:color colors/white
@@ -76,16 +89,19 @@
             {:color colors/white
              :size  20}]]]]]))))

-(defn view
+(defn- view-internal
  "Options
  - `on-complete`         Callback called when the sliding is complete
  - `disabled?`           Boolean that disables the button
                          (_and gestures_)
-  - `size`                `:small`/`:large`
+  - `size`                :size/s-40`/`:size/s-48`
  - `track-text`          Text that is shown on the track
  - `track-icon`          Key of the icon shown on the track
                          (e.g. `:face-id`)
  - `customization-color` Customization color
+  - `on-reset`            A callback which can be used to reset the component and run required functionality
  "
  [props]
  [:f> f-slider props])
+
+(def view (quo.theme/with-theme view-internal))
@@ -1,87 +0,0 @@
-(ns quo2.components.code.code.style
-  (:require [quo2.foundations.colors :as colors]))
-
-;; Example themes:
-;; https://github.com/react-syntax-highlighter/react-syntax-highlighter/tree/master/src/styles/hljs
-(defn theme
-  [theme-key]
-  (case theme-key
-    :hljs-comment (colors/theme-colors colors/neutral-40 colors/neutral-60)
-    :hljs-title   (colors/custom-color-by-theme :sky 50 60)
-    :hljs-keyword (colors/custom-color-by-theme :green 50 60)
-    :hljs-string  (colors/custom-color-by-theme :turquoise 50 60)
-    :hljs-literal (colors/custom-color-by-theme :turquoise 50 60)
-    :hljs-number  (colors/custom-color-by-theme :turquoise 50 60)
-    :line-number  colors/neutral-40
-    nil))
-
-(defn text-style
-  [class-names]
-  (let [text-color (->> class-names
-                        (map keyword)
-                        (some (fn [class-name]
-                                (when-let [text-color (theme class-name)]
-                                  text-color))))]
-    (cond-> {:flex-shrink 1
-             :line-height 18}
-      text-color (assoc :color text-color))))
-
-(defn border-color
-  []
-  (colors/theme-colors colors/neutral-20 colors/neutral-80))
-
-(defn container
-  []
-  {:overflow         :hidden
-   :padding          8
-   :background-color (colors/theme-colors colors/white colors/neutral-80-opa-40)
-   :border-color     (border-color)
-   :border-width     1
-   :border-radius    16})
-
-(def gradient-container
-  {:position :absolute
-   :bottom   0
-   :left     0
-   :right    0
-   :z-index  1})
-
-(def gradient {:height 48})
-
-(defn line-number-container
-  [line-number-width]
-  {:position         :absolute
-   :bottom           0
-   :top              0
-   :left             0
-   :width            (+ line-number-width 8 7)
-   :background-color (colors/theme-colors colors/neutral-5 colors/neutral-80)})
-
-(defn divider
-  [line-number-width]
-  {:position         :absolute
-   :bottom           0
-   :top              0
-   :left             (+ line-number-width 7 7)
-   :width            1
-   :z-index          2
-   :background-color (border-color)})
-
-(def line {:flex-direction :row})
-
-(defn line-number
-  [width]
-  {:margin-right 20 ; 8+12 margin
-   :width        width})
-
-(def copy-button
-  {:position :absolute
-   :bottom   8
-   :right    8
-   :z-index  1})
-
-(defn gradient-color [] (colors/theme-colors colors/white colors/neutral-80))
-
-(defn button-background-color
-  []
-  (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5))
@@ -0,0 +1,107 @@
+(ns quo2.components.code.common.style
+  (:require [quo2.foundations.colors :as colors]))
+
+;; Example themes:
+;; https://github.com/react-syntax-highlighter/react-syntax-highlighter/tree/master/src/styles/hljs
+(defn highlight-theme
+  [theme-key]
+  (case theme-key
+    :hljs-comment      (colors/theme-colors colors/neutral-40 colors/neutral-60)
+    :hljs-title        (colors/custom-color-by-theme :sky 50 60)
+    :hljs-keyword      (colors/custom-color-by-theme :green 50 60)
+    :hljs-string       (colors/custom-color-by-theme :turquoise 50 60)
+    :hljs-literal      (colors/custom-color-by-theme :turquoise 50 60)
+    :hljs-number       (colors/custom-color-by-theme :turquoise 50 60)
+    :hljs-symbol       (colors/custom-color-by-theme :orange 50 50)
+    :hljs-builtin-name (colors/custom-color-by-theme :pink 50 50)
+    :line-number       colors/neutral-40
+    nil))
+
+(defn text-style
+  [class-names preview?]
+  (let [text-color (->> class-names
+                        (map keyword)
+                        (some (fn [class-name]
+                                (when-let [text-color (highlight-theme class-name)]
+                                  text-color))))]
+    (cond-> {:flex-shrink 1
+             :line-height 18}
+      preview?   (assoc :color colors/white)
+      text-color (assoc :color text-color))))
+
+(defn border-color
+  []
+  (colors/theme-colors colors/neutral-20 colors/neutral-80))
+
+(defn container
+  [preview? theme]
+  (if preview?
+    {:overflow         :hidden
+     :width            108
+     :background-color (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)
+     :border-radius    8}
+    {:overflow         :hidden
+     :padding          8
+     :background-color (colors/theme-colors colors/white colors/neutral-80-opa-40 theme)
+     :border-color     (border-color)
+     :border-width     1
+     :border-radius    16}))
+
+(def gradient-container
+  {:position :absolute
+   :bottom   0
+   :left     0
+   :right    0
+   :z-index  1})
+
+(def gradient {:height 48})
+
+(defn line-number-container
+  [line-number-width preview? theme]
+  (cond-> {:position         :absolute
+           :bottom           0
+           :top              0
+           :left             0
+           :width            (+ line-number-width 8 7)
+           :background-color (colors/theme-colors colors/neutral-5 colors/neutral-80 theme)}
+    preview? (assoc :width            20
+                    :background-color (colors/theme-colors colors/neutral-10 colors/neutral-70 theme))))
+
+(defn divider
+  [line-number-width]
+  {:position         :absolute
+   :bottom           0
+   :top              0
+   :left             (+ line-number-width 7 7)
+   :width            1
+   :z-index          2
+   :background-color (border-color)})
+
+(def line {:flex-direction :row})
+
+(defn line-number
+  [width preview?]
+  (if preview?
+    {:width            width
+     :padding-vertical 3
+     :padding-left     8
+     :padding-right    4}
+    {:margin-right 20 ; 8+12 margin
+     :width        width}))
+
+(def line-content
+  {:flex               1
+   :padding-horizontal 8
+   :padding-vertical   3})
+
+(def copy-button
+  {:position :absolute
+   :bottom   8
+   :right    8
+   :z-index  1})
+
+(defn gradient-color [] (colors/theme-colors colors/white colors/neutral-80))
+
+(defn button-background-color
+  []
+  (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5))
@@ -1,8 +1,8 @@
-(ns quo2.components.code.snippet
+(ns quo2.components.code.common.view
  (:require [cljs-bean.core :as bean]
            [clojure.string :as string]
            [quo2.components.buttons.button.view :as button]
-            [quo2.components.code.code.style :as style]
+            [quo2.components.code.common.style :as style]
            [quo2.components.markdown.text :as text]
            [react-native.core :as rn]
            [react-native.linear-gradient :as linear-gradient]
@@ -10,39 +10,41 @@
            [reagent.core :as reagent]))

 (defn- render-nodes
-  [nodes]
+  [nodes preview?]
  (map (fn [{:keys [children value last-line?] :as node}]
         (if children
           (into [text/text
                  (cond-> {:weight :code
                           :size   :paragraph-2
-                           :style  (style/text-style (get-in node [:properties :className]))}
+                           :style  (style/text-style (get-in node [:properties :className]) preview?)}
                    last-line? (assoc :number-of-lines 1))]
-                 (render-nodes children))
+                 (render-nodes children preview?))
           ;; Remove newlines as we already render each line separately.
           (string/trim-newline value)))
       nodes))

 (defn- line
-  [{:keys [line-number line-number-width]} children]
+  [{:keys [line-number line-number-width preview?]} children]
  [rn/view {:style style/line}
-   [rn/view {:style (style/line-number line-number-width)}
+   [rn/view {:style (style/line-number line-number-width preview?)}
    [text/text
-     {:style  (style/text-style ["line-number"])
+     {:style  (style/text-style ["line-number"] preview?)
      :weight :code
      :size   :paragraph-2}
     line-number]]
-   children])
+   (cond->> children
+     preview? (conj [rn/view {:style style/line-content}]))])

 (defn- code-block
-  [{:keys [rows line-number-width]}]
+  [{:keys [rows line-number-width preview?]}]
  [rn/view
-   (->> rows
-        (render-nodes)
+   (->> preview?
+        (render-nodes rows)
        (map-indexed (fn [idx row-content]
                       [line
                        {:line-number       (inc idx)
-                         :line-number-width line-number-width}
+                         :line-number-width line-number-width
+                         :preview?          preview?}
                        row-content]))
        (into [:<>]))])

@@ -66,36 +68,44 @@
      (* 9 max-line-digits font-scale))))

 (defn- f-native-renderer
-  [{:keys [rows max-lines on-copy-press]
+  [{:keys [rows max-lines on-copy-press preview? theme]
    :or   {max-lines ##Inf}}]
  (let [font-scale          (:font-scale (rn/get-window))
        total-rows          (count rows)
-        number-rows-to-show (min (count rows) max-lines)
-        line-number-width   (calc-line-number-width font-scale number-rows-to-show)
+        number-rows-to-show (if preview?
+                              0
+                              (min (count rows) max-lines))
+        line-number-width   (if preview? 20 (calc-line-number-width font-scale number-rows-to-show))
        truncated?          (< number-rows-to-show total-rows)
        rows-to-show-coll   (if truncated?
                              (as-> rows $
                                (update $ number-rows-to-show assoc :last-line? true)
                                (take (inc number-rows-to-show) $))
                              rows)]
-    [rn/view {:style (style/container)}
-     [rn/view {:style (style/line-number-container line-number-width)}]
-     [rn/view {:style (style/divider line-number-width)}]
-     [mask-view {:apply-mask? truncated?}
-      [code-block
-       {:rows              rows-to-show-coll
-        :line-number-width line-number-width}]]
-     [rn/view {:style style/copy-button}
-      [button/button
-       {:icon-only? true
-        :type       :grey
-        :background :blur
-        :size       24
-        :on-press   on-copy-press}
-       :main-icons/copy]]]))
+    [rn/view {:style (style/container preview? theme)}
+     [rn/view {:style (style/line-number-container line-number-width preview? theme)}]
+     (if preview?
+       [code-block
+        {:rows              rows-to-show-coll
+         :line-number-width line-number-width
+         :preview?          preview?}]
+       [:<>
+        [rn/view {:style (style/divider line-number-width)}]
+        [mask-view {:apply-mask? truncated?}
+         [code-block
+          {:rows              rows-to-show-coll
+           :line-number-width line-number-width}]]
+        [rn/view {:style style/copy-button}
+         [button/button
+          {:icon-only? true
+           :type       :grey
+           :background :blur
+           :size       24
+           :on-press   on-copy-press}
+          :main-icons/copy]]])]))

-(defn snippet
-  [{:keys [language max-lines on-copy-press]} children]
+(defn view
+  [{:keys [language max-lines on-copy-press preview? theme]} children]
  [highlighter/highlighter
   {:language          language
    :renderer          (fn [^js/Object props]
@@ -103,8 +113,11 @@
                          [:f> f-native-renderer
                           {:rows          (-> props .-rows bean/->clj)
                            :on-copy-press #(when on-copy-press (on-copy-press children))
-                            :max-lines     max-lines}]))
+                            :max-lines     max-lines
+                            :preview?      preview?
+                            :theme         theme}]))
    :show-line-numbers false
    :style             {}
    :custom-style      {:background-color nil}}
   children])
+
@@ -0,0 +1,15 @@
+(ns quo2.components.code.snippet.view
+  (:require [quo2.theme :as theme]
+            [quo2.components.code.common.view :as code-common]))
+
+(defn- view-internal
+  [_]
+  (fn [{:keys [language max-lines on-copy-press]} children]
+    [code-common/view
+     {:language      language
+      :max-lines     max-lines
+      :on-copy-press on-copy-press
+      :preview?      false}
+     children]))
+
+(def view (theme/with-theme view-internal))
@@ -0,0 +1,11 @@
+(ns quo2.components.code.snippet-preview.view
+  (:require [quo2.components.code.common.view :as code-common]))
+
+(defn view
+  [{:keys [language]} children]
+  [code-common/view
+   {:preview?  true
+    :language  language
+    :max-lines 0
+    :theme     :dark}
+   children])
@@ -0,0 +1,54 @@
+(ns quo2.components.colors.color.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(def color-button-common
+  {:width             48
+   :height            48
+   :border-width      4
+   :border-radius     24
+   :margin-horizontal 4
+   :transform         [{:rotate "45deg"}]
+   :border-color      :transparent})
+
+(defn color-button
+  [color selected?]
+  (merge color-button-common
+         (when selected?
+           {:border-top-color    (colors/alpha color 0.4)
+            :border-end-color    (colors/alpha color 0.4)
+            :border-bottom-color (colors/alpha color 0.2)
+            :border-start-color  (colors/alpha color 0.2)})))
+
+(defn color-circle
+  [color border?]
+  {:width            40
+   :height           40
+   :transform        [{:rotate "-45deg"}]
+   :background-color color
+   :justify-content  :center
+   :align-items      :center
+   :border-color     color
+   :border-width     (if border? 2 0)
+   :overflow         :hidden
+   :border-radius    20})
+
+(defn feng-shui
+  [theme]
+  {:width            40
+   :height           40
+   :transform        [{:rotate "45deg"}]
+   :overflow         :hidden
+   :border-color     (colors/theme-colors colors/neutral-100 colors/white theme)
+   :border-width     2
+   :background-color (colors/theme-colors colors/neutral-100 colors/white theme)
+   :border-radius    20})
+
+(defn left-half
+  [theme]
+  {:flex             1
+   :background-color (colors/theme-colors colors/white colors/neutral-100 theme)})
+
+(defn right-half
+  [theme]
+  {:flex             1
+   :background-color (colors/theme-colors colors/neutral-100 colors/white theme)})
@@ -0,0 +1,50 @@
+(ns quo2.components.colors.color.view
+  (:require
+    [quo2.components.icon :as icon]
+    [quo2.foundations.colors :as colors]
+    [quo2.theme :as quo.theme]
+    [react-native.core :as rn]
+    [quo2.components.colors.color.style :as style]))
+
+(defn- feng-shui
+  [{:keys [color theme]}]
+  [rn/view
+   {:accessibility-label color
+    :style               (style/feng-shui theme)}
+   [rn/view {:style (style/left-half theme)}]
+   [rn/view {:style (style/right-half theme)}]])
+
+(defn- view-internal
+  [{:keys [color
+           selected?
+           on-press
+           blur?
+           theme]
+    :as   props}]
+  (let [border?   (and (not blur?) (not selected?))
+        hex-color (if (= :feng-shui color)
+                    (colors/theme-colors colors/neutral-100 colors/white theme)
+                    (colors/theme-colors (colors/custom-color color 50)
+                                         (colors/custom-color color 60)
+                                         theme))]
+
+    [rn/pressable
+     {:style               (style/color-button hex-color selected?)
+      :accessibility-label :color-picker-item
+      :on-press            #(on-press color)}
+     (if (and (= :feng-shui color) (not selected?))
+       [feng-shui
+        (assoc props
+               :hex-color hex-color
+               :border?   border?)]
+       [rn/view
+        {:accessibility-label color
+         :style               (style/color-circle hex-color border?)}
+        (when selected?
+          [icon/icon :i/check
+           {:size  20
+            :color (if (= :feng-shui color)
+                     (colors/theme-colors colors/white colors/neutral-100 theme)
+                     colors/white)}])])]))
+
+(def view (quo.theme/with-theme view-internal))
@@ -3,8 +3,6 @@
            [reagent.core :as reagent]
            [test-helpers.component :as h]))

-(def color-list [:blue :yellow :turquoise :copper :sky :camel :orange :army :pink :purple :magenta])
-
 (h/describe "color-picker"
  (h/test "color picker rendered"
    (h/render [color-picker/view])
@@ -26,6 +24,6 @@
    (h/render [color-picker/view])
    (js/Promise.all (map (fn [color]
                           (h/is-truthy (h/get-all-by-label-text color)))
-                         color-list))))
+                         color-picker/color-list))))


@@ -1,50 +0,0 @@
-(ns quo2.components.colors.color-picker.style
-  (:require [quo2.foundations.colors :as colors]))
-
-(def color-picker-container
-  {:flex-direction  :row
-   :flex-wrap       :wrap
-   :justify-content :space-between})
-
-(def flex-break
-  {:flex-basis "100%"
-   :height     10})
-
-(def color-button-common
-  {:width         48
-   :height        48
-   :border-width  4
-   :border-radius 24
-   :transform     [{:rotate "45deg"}]
-   :border-color  :transparent})
-
-(defn color-button
-  [color selected?]
-  (merge color-button-common
-         (when selected?
-           {:border-top-color    (colors/alpha color 0.4)
-            :border-end-color    (colors/alpha color 0.4)
-            :border-bottom-color (colors/alpha color 0.2)
-            :border-start-color  (colors/alpha color 0.2)})))
-
-(defn color-circle
-  [color border?]
-  {:width            40
-   :height           40
-   :transform        [{:rotate "-45deg"}]
-   :background-color color
-   :justify-content  :center
-   :align-items      :center
-   :border-color     color
-   :border-width     (if border? 2 0)
-   :overflow         :hidden
-   :border-radius    20})
-
-(defn secondary-overlay
-  [secondary-color border?]
-  {:width            (if border? 18 20)
-   :height           40
-   :position         :absolute
-   :right            0
-   :background-color secondary-color})
-
@@ -1,77 +1,34 @@
 (ns quo2.components.colors.color-picker.view
  (:require [react-native.core :as rn]
-            [quo2.foundations.colors :as colors]
-            [quo2.components.icon :as icon]
            [reagent.core :as reagent]
-            [quo2.components.colors.color-picker.style :as style]))
+            [quo2.components.colors.color.view :as color]))

-;; TODO: using :no-color this to keep alignment of colors correct while b & w is being developed.
-;; https://github.com/status-im/status-mobile/issues/15442
 (def color-list
-  [:blue :yellow :turquoise :copper :sky :camel :orange :army :pink :purple :magenta :no-color])
-
-(defn picker-colors
-  [blur?]
-  (map (fn [color]
-         {:name  color
-          :color (colors/custom-color-by-theme color (if blur? 60 50) 60)})
-       color-list))
+  [:blue :yellow :purple :turquoise :magenta :sky :orange :army :flamingo :camel :copper])

 (defn- on-change-handler
  [selected color-name on-change]
  (reset! selected color-name)
  (when on-change (on-change color-name)))

-(defn empty-color-item
-  []
-  [rn/view {:style style/color-button-common}])
-
-(defn- color-item
-  [{:keys [name
-           color
-           secondary-color
-           selected?
-           on-press
-           blur?]}]
-  (let [border? (and (not blur?) (and secondary-color (not selected?)))]
-    (if (= :no-color name)
-      [empty-color-item]
-      [rn/touchable-opacity
-       {:style               (style/color-button color selected?)
-        :accessibility-label :color-picker-item
-        :on-press            #(on-press name)}
-       [rn/view
-        {:accessibile         true
-         :accessibility-label name
-         :style               (style/color-circle color border?)}
-        (when (and secondary-color (not selected?))
-          [rn/view
-           {:style (style/secondary-overlay secondary-color border?)}])
-        (when selected?
-          [icon/icon :i/check
-           {:size  20
-            :color (or secondary-color
-                       colors/white)}])]])))
-
 (defn view
  "Options
-   - `default-selected?` Default selected color name.
-   - `selected` Selected color name.
+   - `default-selected` Default selected color name.
   - `on-change` Callback called when a color is selected `(fn [color-name])`.
   - `blur?` Boolean to enable blur background support.}"
-  [{:keys [default-selected?]}]
-  (let [internal-selected (reagent/atom default-selected?)]
-    (fn [{:keys [blur? on-change selected]}]
-      (when (and (not (nil? selected)) (not= @internal-selected selected))
-        (reset! internal-selected selected))
-      [rn/view {:style style/color-picker-container}
-       (doall (map-indexed (fn [index color]
-                             [:<> {:key (color :name)}
-                              [color-item
-                               (merge color
-                                      {:selected? (= (color :name) @internal-selected)
-                                       :on-press  #(on-change-handler internal-selected % on-change)
-                                       :blur?     blur?})]
-                              (when (= index 5) [rn/view {:style style/flex-break}])])
-                           (picker-colors blur?)))])))
-
+  [{:keys [default-selected]}]
+  (let [selected (reagent/atom default-selected)]
+    (fn [{:keys [blur? on-change feng-shui?]}]
+      [rn/scroll-view
+       {:horizontal                        true
+        :shows-horizontal-scroll-indicator false}
+       (doall (map (fn [color]
+                     [color/view
+                      {:selected? (= color @selected)
+                       :on-press  #(on-change-handler selected % on-change)
+                       :blur?     blur?
+                       :key       color
+                       :color     color}])
+                   ;; TODO: using :feng-shui? temporarily while b & w is being developed.
+                   ;; https://github.com/status-im/status-mobile/discussions/16676
+                   (if feng-shui? (conj color-list :feng-shui) color-list)))])))
@@ -4,7 +4,9 @@
 (defn get-color
  [type customization-color theme]
  (case type
-    :default   (colors/custom-color customization-color 50)
+    :default   (colors/theme-colors (colors/custom-color customization-color 50)
+                                    (colors/custom-color customization-color 60)
+                                    theme)
    :secondary (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme)
    :grey      (colors/theme-colors colors/neutral-10 colors/neutral-80 theme)
    :outline   (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)
@@ -1,6 +1,10 @@
 (ns quo2.components.dividers.divider-label.style
  (:require [quo2.foundations.colors :as colors]))

+(defn get-height
+  [tight?]
+  (if tight? 34 42))
+
 (defn- get-border-color
  [blur? theme]
  (colors/theme-colors (if blur? colors/neutral-80-opa-5 colors/neutral-10)
@@ -17,6 +21,7 @@
  [blur? tight? chevron theme]
  {:border-top-width 1
   :border-top-color (get-border-color blur? theme)
+   :height           (get-height tight?)
   :padding-top      (if tight? 6 14)
   :padding-bottom   7
   :padding-left     (if (= :left chevron) 16 20)
@@ -2,10 +2,10 @@
  (:require [quo2.foundations.colors :as colors]))

 (defn divider-line
-  [blur? theme]
-  {:border-color        (if blur?
-                          (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme)
-                          (colors/theme-colors colors/neutral-10 colors/neutral-90 theme))
-   :padding-top         12
-   :padding-bottom      8
-   :border-bottom-width 1})
+  [{:keys [blur? container-style theme]}]
+  (merge
+   {:border-color        (if blur?
+                           (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme)
+                           (colors/theme-colors colors/neutral-10 colors/neutral-90 theme))
+    :border-bottom-width 1}
+   container-style))
@@ -5,7 +5,7 @@
    [quo2.components.dividers.divider-line.style :as style]))

 (defn- view-internal
-  [{:keys [blur? theme]}]
-  [rn/view {:style (style/divider-line blur? theme)}])
+  [props]
+  [rn/view {:style (style/divider-line props)}])

 (def view (quo.theme/with-theme view-internal))
@@ -0,0 +1,98 @@
+(ns quo2.components.drawers.drawer-top.component-spec
+  (:require [test-helpers.component :as h]
+            [quo2.core :as quo]))
+
+(h/describe "drawer top tests"
+  (h/test "component renders in default type"
+    (h/render [quo/drawer-top
+               {:title "Title"
+                :type  :default}])
+    (h/is-truthy (h/get-by-text "Title")))
+
+  (h/test "component renders in default + description type"
+    (h/render [quo/drawer-top
+               {:title       "Title"
+                :type        :default
+                :description "Description"}])
+    (h/is-truthy (h/get-by-text "Title"))
+    (h/is-truthy (h/get-by-text "Description")))
+
+  (h/test "component renders in info type"
+    (h/render [quo/drawer-top
+               {:title "Title"
+                :type  :info}])
+    (h/is-truthy (h/get-by-text "Title"))
+    (h/is-truthy (h/get-by-label-text :info-icon)))
+
+  (h/test "component renders in info + description type"
+    (h/render [quo/drawer-top
+               {:title       "Title"
+                :description "Description"
+                :type        :info}])
+    (h/is-truthy (h/get-by-text "Title"))
+    (h/is-truthy (h/get-by-text "Description"))
+    (h/is-truthy (h/get-by-label-text :info-icon)))
+
+  (h/test "component renders in context-tag type"
+    (h/render [quo/drawer-top
+               {:title          "Title"
+                :type           :context-tag
+                :community-name "Coinbase"}])
+    (h/is-truthy (h/get-by-text "Title"))
+    (h/is-truthy (h/get-by-label-text :context-tag-wrapper)))
+
+  (h/test "component renders in context-tag + button type"
+    (h/render [quo/drawer-top
+               {:title          "Title"
+                :type           :context-tag
+                :button-icon    :i/placeholder
+                :community-name "Coinbase"}])
+    (h/is-truthy (h/get-by-text "Title"))
+    (h/is-truthy (h/get-by-label-text :button-icon))
+    (h/is-truthy (h/get-by-label-text :context-tag-wrapper)))
+
+  (h/test "component renders in account type"
+    (h/render [quo/drawer-top
+               {:title                "Title"
+                :type                 :account
+                :account-avatar-emoji "🍿"
+                :networks             [:ethereum]
+                :description          "0x62b...0a5"
+                :customization-color  :purple}])
+    (h/is-truthy (h/get-by-text "Title"))
+    (h/is-truthy (h/get-by-text "0x62b...0a5"))
+    (h/is-truthy (h/get-by-label-text :account-avatar)))
+
+  (h/test "component renders in keypair type when keycard? is false"
+    (h/render [quo/drawer-top
+               {:title       "Title"
+                :keycard?    false
+                :icon-avatar :i/placeholder
+                :type        :keypair}])
+    (h/is-truthy (h/get-by-text "Title"))
+    (-> (h/expect (h/get-by-translation-text :on-device))
+        (.toBeTruthy)))
+
+  (h/test "component renders in keypair type when keycard? is true"
+    (h/render [quo/drawer-top
+               {:title       "Title"
+                :keycard?    true
+                :icon-avatar :i/placeholder
+                :type        :keypair}])
+    (h/is-truthy (h/get-by-text "Title"))
+    (-> (h/expect (h/get-by-translation-text :on-keycard))
+        (.toBeTruthy)))
+
+  (h/test "component renders in default-keypair type"
+    (h/render [quo/drawer-top
+               {:title       "Title"
+                :description "0x62b...0a5"
+                :type        :default-keypair}])
+    (h/is-truthy (h/get-by-text "Title"))
+    (h/is-truthy (h/get-by-label-text :default-keypair-text)))
+
+  (h/test "component renders in label type"
+    (h/render [quo/drawer-top
+               {:label "label"
+                :type  :label}])
+    (h/is-truthy (h/get-by-text "label"))))
@@ -0,0 +1,31 @@
+(ns quo2.components.drawers.drawer-top.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(def container
+  {:padding-horizontal 20
+   :padding-bottom     12
+   :flex-direction     :row})
+
+(def body-container
+  {:flex 1})
+
+(defn description
+  [theme blur?]
+  {:color (if blur?
+            colors/white-opa-40
+            (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))})
+
+(def left-container
+  {:margin-right    8
+   :justify-content :center})
+
+(defn network-text-color
+  [network]
+  {:color (colors/custom-color network)})
+
+(def row
+  {:flex-direction :row
+   :align-items    :center})
+
+(def keycard-icon
+  {:margin-left 4})
@@ -0,0 +1,204 @@
+(ns quo2.components.drawers.drawer-top.view
+  (:require [quo2.theme :as quo.theme]
+            [quo2.components.markdown.text :as text]
+            [quo2.components.drawers.drawer-top.style :as style]
+            [quo2.components.buttons.button.view :as button]
+            [quo2.components.tags.context-tag.view :as context-tag]
+            [react-native.core :as rn]
+            [quo2.components.icon :as icons]
+            [quo2.components.avatars.account-avatar.view :as account-avatar]
+            [quo2.components.avatars.icon-avatar :as icon-avatar]
+            [quo2.components.avatars.user-avatar.view :as user-avatar]
+            [quo2.foundations.colors :as colors]
+            [utils.i18n :as i18n]))
+
+(defn- left-image
+  [{:keys [type customization-color account-avatar-emoji icon-avatar profile-picture]}]
+  (case type
+    :account         [account-avatar/view
+                      {:customization-color customization-color
+                       :size                32
+                       :emoji               account-avatar-emoji
+                       :type                :default}]
+    :keypair         [icon-avatar/icon-avatar
+                      {:icon    icon-avatar
+                       :border? true
+                       :color   :neutral}]
+
+    :default-keypair [user-avatar/user-avatar
+                      {:size              :small
+                       :status-indicator? false
+                       :profile-picture   profile-picture}]
+    nil))
+
+(defn- network-view
+  [network]
+  [text/text
+   {:size   :paragraph-2
+    :weight :regular
+    :style  (style/network-text-color network)}
+   (str (subs (name network) 0 3) ":")])
+
+(defn- keypair-subtitle
+  [{:keys [theme blur? keycard?]}]
+  [rn/view {:style style/row}
+   [text/text
+    {:size   :paragraph-2
+     :weight :regular
+     :style  (style/description theme blur?)}
+    (if keycard?
+      (i18n/label :t/on-keycard)
+      (i18n/label :t/on-device))]
+   (when keycard?
+     [icons/icon
+      :i/keycard-card
+      {:color           (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
+       :size            16
+       :container-style style/keycard-icon}])])
+
+(defn- acocunt-subtitle
+  [{:keys [networks theme blur? description]}]
+  [rn/view {:style style/row}
+   (for [network networks]
+     ^{:key (str network)}
+     [network-view network])
+   [text/text
+    {:size   :paragraph-2
+     :weight :regular
+     :style  (style/description theme blur?)}
+    description]])
+
+(defn- default-keypair-subtitle
+  [{:keys [description theme blur?]}]
+  [text/text
+   {:accessibility-label :default-keypair-text
+    :size                :paragraph-2
+    :weight              :regular
+    :style               (style/description theme blur?)}
+   (str description " · " (i18n/label :t/on-device))])
+
+(defn- context-tag-subtitle
+  [{:keys [community-logo community-name]}]
+  [rn/view
+   {:accessibility-label :context-tag-wrapper
+    :style               {:flex-wrap :wrap}}
+   [context-tag/view
+    {:type           :community
+     :community-name community-name
+     :community-logo community-logo
+     :size           24}]])
+
+(defn- description-subtitle
+  [{:keys [theme blur? description]}]
+  [text/text
+   {:size   :paragraph-1
+    :weight :regular
+    :style  (style/description theme blur?)}
+   description])
+
+(defn- subtitle
+  [{:keys [type theme blur? keycard? networks description community-name community-logo]}]
+  (cond
+    (= :keypair type)
+    [keypair-subtitle
+     {:theme    theme
+      :blur?    blur?
+      :keycard? keycard?}]
+
+    (= :account type)
+    [acocunt-subtitle
+     {:networks    networks
+      :theme       theme
+      :blur?       blur?
+      :description description}]
+
+    (= :default-keypair type)
+    [default-keypair-subtitle
+     {:description description
+      :theme       theme
+      :blur?       blur?}]
+
+    (= :context-tag type)
+    [context-tag-subtitle
+     {:community-logo community-logo
+      :community-name community-name}]
+
+    (and (not= :label type) description)
+    [description-subtitle
+     {:theme       theme
+      :blur?       blur?
+      :description description}]))
+
+(defn- right-icon
+  [{:keys [theme type on-button-press on-button-long-press button-disabled? button-icon]}]
+  (cond
+    (= :info type)
+    [icons/icon
+     :i/info
+     {:accessibility-label :info-icon
+      :size                20
+      :color               (colors/theme-colors colors/neutral-50
+                                                colors/neutral-40
+                                                theme)}]
+    (and (= :context-tag type) button-icon)
+    [button/button
+     {:accessibility-label :button-icon
+      :on-press            on-button-press
+      :on-long-press       on-button-long-press
+      :disabled?           button-disabled?
+      :type                :primary
+      :size                24
+      :icon-only?          true}
+     button-icon]))
+
+(defn- left-title
+  [{:keys [type label title theme blur?]}]
+  (case type
+    :label [text/text
+            {:weight :medium
+             :size   :paragraph-2
+             :style  (style/description theme blur?)}
+            label]
+    [text/text
+     {:size   :heading-2
+      :weight :semi-bold}
+     title]))
+
+(defn- view-internal
+  [{:keys [title type theme description blur? community-name community-logo button-icon on-button-press
+           on-button-long-press
+           button-disabled? account-avatar-emoji customization-color icon-avatar
+           profile-picture keycard? networks label]}]
+  [rn/view {:style style/container}
+   [rn/view {:style style/left-container}
+    [left-image
+     {:type                 type
+      :customization-color  customization-color
+      :account-avatar-emoji account-avatar-emoji
+      :icon-avatar          icon-avatar
+      :profile-picture      profile-picture}]]
+   [rn/view {:style style/body-container}
+    [left-title
+     {:type  type
+      :label label
+      :title title
+      :theme theme
+      :blur? blur?}]
+    [subtitle
+     {:type           type
+      :theme          theme
+      :blur?          blur?
+      :keycard?       keycard?
+      :networks       networks
+      :description    description
+      :community-name community-name
+      :community-logo community-logo}]]
+   [right-icon
+    {:theme                theme
+     :type                 type
+     :on-button-press      on-button-press
+     :on-button-long-press on-button-long-press
+     :button-disabled?     button-disabled?
+     :button-icon          button-icon}]])
+
+(def view (quo.theme/with-theme view-internal))
@@ -1,20 +0,0 @@
-(ns quo2.components.dropdowns.dropdown
-  (:require [quo2.components.dropdowns.old-button-view :as old-button]))
-
-(defn dropdown
-  [_ _]
-  (fn [{:keys [on-change selected] :as opts} children]
-    ;TODO: Dropdown needs to be implemented/refactored to be its own component -
-    ;https://github.com/status-im/status-mobile/issues/16456
-    [old-button/button
-     (merge
-      opts
-      {:after                   (if selected :i/chevron-top :i/chevron-down)
-       :icon-size               12
-       :icon-container-size     14
-       :icon-container-rounded? true
-       :override-after-margins  {:left  7
-                                 :right 9}
-       :pressed                 selected
-       :on-press                #(when on-change (on-change selected))})
-     children]))
@@ -0,0 +1,35 @@
+(ns quo2.components.dropdowns.dropdown.component-spec
+  (:require [quo2.components.dropdowns.dropdown.view :as dropdown]
+            [test-helpers.component :as h]))
+
+(h/describe "Dropdown"
+  (h/test "default render"
+    (let [label "Recent"]
+      (h/render [dropdown/view {} label])
+      (h/is-truthy (h/get-by-label-text :dropdown))
+      (h/is-null (h/query-by-label-text :left-icon))
+      (h/is-truthy (h/get-by-text label))
+      (h/is-truthy (h/get-by-label-text :right-icon))))
+
+  (h/test "render with icon"
+    (let [label "Recent"]
+      (h/render [dropdown/view {:icon? true} label])
+      (h/is-truthy (h/get-by-label-text :dropdown))
+      (h/is-truthy (h/get-by-label-text :left-icon))
+      (h/is-truthy (h/get-by-text label))
+      (h/is-truthy (h/get-by-label-text :right-icon))))
+
+  (h/test "render only emoji"
+    (let [label "🍑"]
+      (h/render [dropdown/view {:emoji? true} label])
+      (h/is-truthy (h/get-by-label-text :dropdown))
+      (h/is-null (h/query-by-label-text :left-icon))
+      (h/is-truthy (h/get-by-text label))
+      (h/is-null (h/query-by-label-text :right-icon))))
+
+  (h/test "on-press"
+    (let [event (h/mock-fn)
+          label "Recent"]
+      (h/render [dropdown/view {:on-press event} label])
+      (h/fire-event :press (h/get-by-text label))
+      (h/was-called event))))
@@ -0,0 +1,120 @@
+(ns quo2.components.dropdowns.dropdown.properties
+  (:require [quo2.foundations.colors :as colors]))
+
+(def backgrounds #{:photo :blur})
+
+(def sizes
+  {:size-40 {:size             40
+             :icon-size        20
+             :emoji-size       20
+             :emoji-padding    10
+             :padding-vertical 9
+             :padding-left     {:default 16 :icon 12}
+             :padding-right    12
+             :border-radius    12
+             :text-size        :paragraph-1}
+   :size-32 {:size             32
+             :icon-size        20
+             :emoji-size       20
+             :emoji-padding    6
+             :padding-vertical 5
+             :padding-left     {:default 12 :icon 8}
+             :padding-right    8
+             :border-radius    10
+             :text-size        :paragraph-1}
+   :size-24 {:size             24
+             :icon-size        12
+             :emoji-size       12
+             :emoji-padding    6
+             :padding-vertical 3
+             :padding-left     {:default 8 :icon 8}
+             :padding-right    8
+             :border-radius    8
+             :text-size        :paragraph-2}})
+
+(defn- custom-color-type
+  [customization-color]
+  {:left-icon-color    colors/white-opa-70
+   :right-icon-color   colors/white-opa-20
+   :right-icon-color-2 colors/white
+   :label-color        colors/white
+   :background-color   (colors/custom-color customization-color 50)})
+
+(def sizes-to-exclude-blur-in-photo-bg #{:size-40})
+
+(defn- grey-photo
+  [theme active? size]
+  {:left-icon-color    (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 theme)
+   :right-icon-color   (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme)
+   :right-icon-color-2 (colors/theme-colors colors/neutral-100 colors/white theme)
+   :label-color        (colors/theme-colors colors/neutral-100 colors/white theme)
+   :blur-overlay-color (when (and (= theme :dark) (nil? (sizes-to-exclude-blur-in-photo-bg size)))
+                         (if active? colors/neutral-80-opa-50 colors/neutral-80-opa-40))
+   :blur-type          (if (= theme :light) :light :dark)
+   :background-color   (cond
+                         (= theme :light)
+                         (if active? colors/white-opa-50 colors/white-opa-40)
+
+                         (and (= theme :dark) (sizes-to-exclude-blur-in-photo-bg size))
+                         (if active? colors/neutral-80-opa-50 colors/neutral-80-opa-40))})
+
+(defn- grey-blur
+  [theme active?]
+  {:left-icon-color    (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-70 theme)
+   :right-icon-color   (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme)
+   :right-icon-color-2 (colors/theme-colors colors/neutral-100 colors/white theme)
+   :label-color        (colors/theme-colors colors/neutral-100 colors/white theme)
+   :background-color   (if active?
+                         (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme)
+                         (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme))})
+
+(defn- outline-blur
+  [theme active?]
+  {:left-icon-color    (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 theme)
+   :right-icon-color   (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme)
+   :right-icon-color-2 (colors/theme-colors colors/neutral-100 colors/white theme)
+   :label-color        (colors/theme-colors colors/neutral-100 colors/white theme)
+   :border-color       (if active?
+                         (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-20 theme)
+                         (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme))})
+
+(defn- outline
+  [theme active?]
+  {:left-icon-color    (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
+   :right-icon-color   (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)
+   :right-icon-color-2 (colors/theme-colors colors/neutral-100 colors/white theme)
+   :label-color        (colors/theme-colors colors/neutral-100 colors/white theme)
+   :border-color       (if active?
+                         (colors/theme-colors colors/neutral-40 colors/neutral-60 theme)
+                         (colors/theme-colors colors/neutral-30 colors/neutral-70 theme))})
+
+(defn- grey
+  [theme active?]
+  {:left-icon-color    (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
+   :right-icon-color   (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)
+   :right-icon-color-2 (colors/theme-colors colors/neutral-100 colors/white theme)
+   :label-color        (colors/theme-colors colors/neutral-100 colors/white theme)
+   :background-color   (if active?
+                         (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)
+                         (colors/theme-colors colors/neutral-5 colors/neutral-90 theme))})
+
+(defn- ghost
+  [theme active?]
+  {:left-icon-color    (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
+   :right-icon-color   (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)
+   :right-icon-color-2 (colors/theme-colors colors/neutral-100 colors/white theme)
+   :label-color        (colors/theme-colors colors/neutral-100 colors/white theme)
+   :background-color   (when active?
+                         (colors/theme-colors colors/neutral-10 colors/neutral-80 theme))})
+
+(defn get-colors
+  [{:keys [customization-color theme type state background size]}]
+  (let [active? (= state :active)]
+    (cond
+      (and (= background :photo) (= type :grey))   (grey-photo theme active? size)
+      (and (= background :blur) (= type :grey))    (grey-blur theme active?)
+      (and (= background :blur) (= type :outline)) (outline-blur theme active?)
+      (= type :outline)                            (outline theme active?)
+      (= type :grey)                               (grey theme active?)
+      (= type :ghost)                              (ghost theme active?)
+      (= type :customization)                      (custom-color-type customization-color))))
@@ -0,0 +1,53 @@
+(ns quo2.components.dropdowns.dropdown.style)
+
+(def gap 4)
+
+(def blur-view
+  {:position :absolute
+   :top      0
+   :left     0
+   :right    0
+   :bottom   0})
+
+(def left-icon
+  {:margin-right gap})
+
+(defn right-icon
+  [label-color]
+  {:color        label-color
+   :margin-right gap})
+
+(defn- add-styles-for-emoji
+  [style size emoji-padding]
+  (-> style
+      (dissoc :padding-vertical :padding-left :padding-right)
+      (assoc :width   size
+             :padding emoji-padding)))
+
+(defn root-container
+  [{:keys [size border-radius padding-vertical padding-right padding-left emoji-padding]}
+   {:keys [background-color border-color]}
+   {:keys [icon? emoji? state]}]
+  (cond-> {:height           size
+           :align-items      :center
+           :justify-content  :center
+           :flex-direction   :row
+           :padding-vertical padding-vertical
+           :padding-left     (:default padding-left)
+           :padding-right    padding-right
+           :overflow         :hidden
+           :background-color background-color
+           :border-radius    border-radius}
+
+    icon?
+    (assoc :padding-left (:icon padding-left))
+
+    emoji?
+    (add-styles-for-emoji size emoji-padding)
+
+    border-color
+    (assoc :border-color border-color
+           :border-width 1)
+
+    (= state :disabled)
+    (assoc :opacity 0.3)))
@@ -0,0 +1,87 @@
+(ns quo2.components.dropdowns.dropdown.view
+  (:require [quo2.components.dropdowns.dropdown.properties :as properties]
+            [quo2.components.dropdowns.dropdown.style :as style]
+            [quo2.components.icon :as icon]
+            [quo2.components.markdown.text :as text]
+            [quo2.foundations.customization-colors :as customization-colors]
+            [quo2.theme :as theme]
+            [react-native.blur :as blur]
+            [react-native.core :as rn]))
+
+(defn- view-internal
+  [{:keys [type size state background customization-color theme on-press icon-name icon? emoji?
+           accessibility-label]
+    :or   {type      :grey
+           size      :size-40
+           state     :default
+           icon?     false
+           emoji?    false
+           icon-name :i/placeholder}
+    :as   props}
+   text]
+  (let [{:keys [icon-size text-size emoji-size border-radius]
+         :as   size-properties} (properties/sizes size)
+        {:keys [left-icon-color right-icon-color right-icon-color-2 label-color blur-type
+                blur-overlay-color]
+         :as   colors}          (properties/get-colors props)
+        right-icon              (if (= state :active) :i/pullup :i/dropdown)
+        customization-type?     (= type :customization)
+        show-blur-background?   (and (= background :photo)
+                                     (= type :grey)
+                                     (nil? (properties/sizes-to-exclude-blur-in-photo-bg size)))]
+    [rn/pressable
+     {:accessibility-label (or accessibility-label :dropdown)
+      :disabled            (= state :disabled)
+      :on-press            on-press
+      :style               (style/root-container size-properties colors props)}
+     (when show-blur-background?
+       [blur/view
+        {:blur-radius   20
+         :blur-type     blur-type
+         :overlay-color blur-overlay-color
+         :style         style/blur-view}])
+     (when customization-type?
+       [customization-colors/overlay
+        {:customization-color customization-color
+         :theme               theme
+         :pressed?            (= state :active)
+         :border-radius       border-radius}])
+     (if emoji?
+       [rn/text
+        {:adjusts-font-size-to-fit true
+         :style                    {:font-size emoji-size}}
+        text]
+       [:<>
+        (when icon?
+          [icon/icon
+           icon-name
+           {:accessibility-label :left-icon
+            :color               left-icon-color
+            :size                icon-size
+            :container-style     style/left-icon}])
+        [text/text
+         {:size            text-size
+          :weight          :medium
+          :number-of-lines 1
+          :style           (style/right-icon label-color)}
+         text]
+        [icon/icon
+         right-icon
+         {:size                icon-size
+          :accessibility-label :right-icon
+          :color               right-icon-color
+          :color-2             right-icon-color-2}]])]))
+
+(def view
+  "Props:
+    - type:       :outline |:grey (default) | :ghost | :customization
+    - size:       :size-40 (default) | :size-32 | :size-24
+    - state:      :default (default) | :active | :disabled
+    - emoji?:     boolean
+    - icon?:      boolean
+    - background: :blur | :photo (optional)
+    - icon-name:  keyword
+    - on-press:   function
+   
+    Child: string - used as label or emoji (for emoji only)"
+  (theme/with-theme view-internal))
@@ -4,10 +4,10 @@
 (defn container-border-color
  [{:keys [state blur? theme pressed?]}]
  (let [default-color (if blur?
-                        colors/neutral-80-opa-5
+                        (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme)
                        (colors/theme-colors colors/neutral-30 colors/neutral-70 theme))
        active-color  (if blur?
-                        colors/neutral-80-opa-10
+                        (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme)
                        (colors/theme-colors colors/neutral-40 colors/neutral-60 theme))]
    (condp = state
      :disabled default-color
@@ -20,7 +20,7 @@
       [preview-list/view
        {:type      :network
         :list-size (count networks)
-         :size      :size/s-20}
+         :size      :size-20}
        networks]])))

 (def view (quo.theme/with-theme internal-view))
@@ -1,264 +0,0 @@
-(ns quo2.components.dropdowns.old-button-style
-  (:require [quo2.foundations.colors :as colors]))
-
-(def blur-view
-  {:position :absolute
-   :top      0
-   :left     0
-   :right    0
-   :bottom   0})
-
-(defn before-icon-style
-  [{:keys [override-margins size icon-container-size icon-background-color icon-container-rounded?
-           icon-size]}]
-  (merge
-   {:margin-left     (or (get override-margins :left)
-                         (if (= size 40) 12 8))
-    :margin-right    (or (get override-margins :right) 4)
-    :align-items     :center
-    :justify-content :center}
-   (when icon-container-size
-     {:width  icon-container-size
-      :height icon-container-size})
-   (when icon-background-color
-     {:background-color icon-background-color})
-   (when icon-container-rounded?
-     {:border-radius (/ (or icon-container-size icon-size) 2)})))
-
-(defn after-icon-style
-  [{:keys [override-margins size icon-container-size icon-background-color icon-container-rounded?
-           icon-size]}]
-  (merge
-   {:margin-left     (or (get override-margins :left) 4)
-    :margin-right    (or (get override-margins :right)
-                         (if (= size 40) 12 8))
-    :align-items     :center
-    :justify-content :center}
-   (when icon-container-size
-     {:width  icon-container-size
-      :height icon-container-size})
-   (when icon-background-color
-     {:background-color icon-background-color})
-   (when icon-container-rounded?
-     {:border-radius (/ (or icon-container-size icon-size) 2)})))
-
-(defn themes
-  [customization-color]
-  {:light
-   {:primary         {:icon-color           colors/white
-                      :icon-secondary-color colors/white-opa-70
-                      :label-color          colors/white
-                      :background-color     {:default  (colors/custom-color customization-color 50)
-                                             :pressed  (colors/custom-color customization-color 60)
-                                             :disabled (colors/custom-color customization-color 50)}}
-    :secondary       {:icon-color       colors/primary-50
-                      :label-color      colors/primary-50
-                      :background-color {:default  colors/primary-50-opa-20
-                                         :pressed  colors/primary-50-opa-40
-                                         :disabled colors/primary-50-opa-20}}
-    :grey            {:icon-color           colors/neutral-100
-                      :icon-secondary-color colors/neutral-50
-                      :label-color          colors/neutral-100
-                      :background-color     {:default  colors/neutral-10
-                                             :pressed  colors/neutral-20
-                                             :disabled colors/neutral-10}}
-    :dark-grey       {:icon-color           colors/neutral-100
-                      :icon-secondary-color colors/neutral-50
-                      :label-color          colors/neutral-100
-                      :background-color     {:default  colors/neutral-20
-                                             :pressed  colors/neutral-30
-                                             :disabled colors/neutral-20}}
-    :outline         {:icon-color           colors/neutral-50
-                      :icon-secondary-color colors/neutral-50
-                      :label-color          colors/neutral-100
-                      :border-color         {:default  colors/neutral-30
-                                             :pressed  colors/neutral-40
-                                             :disabled colors/neutral-30}}
-    :ghost           {:icon-color           colors/neutral-50
-                      :icon-secondary-color colors/neutral-50
-                      :label-color          colors/neutral-100
-                      :background-color     {:pressed colors/neutral-10}}
-    :danger          {:icon-color           colors/white
-                      :icon-secondary-color colors/white-opa-70
-                      :label-color          colors/white
-                      :background-color     {:default  colors/danger-50
-                                             :pressed  colors/danger-60
-                                             :disabled colors/danger-50}}
-    :positive        {:icon-color           colors/white
-                      :icon-secondary-color colors/white-opa-70
-                      :label-color          colors/white
-                      :background-color     {:default  colors/success-50
-                                             :pressed  colors/success-60
-                                             :disabled colors/success-50-opa-30}}
-    :photo-bg        {:icon-color           colors/neutral-100
-                      :icon-secondary-color colors/neutral-80-opa-40
-                      :label-color          colors/neutral-100
-                      :background-color     {:default  colors/white-opa-40
-                                             :pressed  colors/white-opa-50
-                                             :disabled colors/white-opa-40}}
-    :blur-bg         {:icon-color           colors/neutral-100
-                      :icon-secondary-color colors/neutral-80-opa-40
-                      :label-color          colors/neutral-100
-                      :background-color     {:default  colors/neutral-80-opa-5
-                                             :pressed  colors/neutral-80-opa-10
-                                             :disabled colors/neutral-80-opa-5}}
-    :blurred         {:icon-color            colors/neutral-100
-                      :icon-secondary-color  colors/neutral-100
-                      :icon-background-color {:default colors/neutral-20
-                                              :blurred colors/neutral-80-opa-10}
-                      :label-color           colors/neutral-100
-                      :background-color      {:default  colors/neutral-10
-                                              :pressed  colors/neutral-10
-                                              :disabled colors/neutral-10-opa-10-blur}
-                      :blur-overlay-color    colors/neutral-10-opa-40-blur
-                      :blur-type             :light}
-    :blur-bg-outline {:icon-color           colors/neutral-100
-                      :icon-secondary-color colors/neutral-80-opa-40
-                      :label-color          colors/neutral-100
-                      :border-color         {:default  colors/neutral-80-opa-10
-                                             :pressed  colors/neutral-80-opa-20
-                                             :disabled colors/neutral-80-opa-10}}
-    :shell           {:icon-color       colors/white
-                      :label-color      colors/white
-                      :background-color {:default  colors/neutral-95
-                                         :pressed  colors/neutral-95
-                                         :disabled colors/neutral-95}}}
-   :dark
-   {:primary         {:icon-color           colors/white
-                      :icon-secondary-color colors/white-opa-70
-                      :label-color          colors/white
-                      :background-color     {:default  (colors/custom-color customization-color 60)
-                                             :pressed  (colors/custom-color customization-color 50)
-                                             :disabled (colors/custom-color customization-color 60)}}
-    :secondary       {:icon-color       colors/primary-50
-                      :label-color      colors/primary-50
-                      :background-color {:default  colors/primary-50-opa-20
-                                         :pressed  colors/primary-50-opa-30
-                                         :disabled colors/primary-50-opa-20}}
-    :grey            {:icon-color           colors/white
-                      :icon-secondary-color colors/neutral-40
-                      :label-color          colors/white
-                      :background-color     {:default  colors/neutral-90
-                                             :pressed  colors/neutral-60
-                                             :disabled colors/neutral-90}}
-    :dark-grey       {:icon-color           colors/white
-                      :icon-secondary-color colors/neutral-40
-                      :label-color          colors/white
-                      :background-color     {:default  colors/neutral-70
-                                             :pressed  colors/neutral-60
-                                             :disabled colors/neutral-70}}
-    :outline         {:icon-color           colors/neutral-40
-                      :icon-secondary-color colors/neutral-40
-                      :label-color          colors/white
-                      :border-color         {:default  colors/neutral-70
-                                             :pressed  colors/neutral-60
-                                             :disabled colors/neutral-70}}
-    :ghost           {:icon-color           colors/neutral-40
-                      :icon-secondary-color colors/neutral-40
-                      :label-color          colors/white
-                      :background-color     {:pressed colors/neutral-80}}
-    :danger          {:icon-color           colors/white
-                      :icon-secondary-color colors/white-opa-70
-                      :label-color          colors/white
-                      :background-color     {:default  colors/danger-60
-                                             :pressed  colors/danger-50
-                                             :disabled colors/danger-60}}
-    :positive        {:icon-color           colors/white
-                      :icon-secondary-color colors/white-opa-70
-                      :label-color          colors/white
-                      :background-color     {:default  colors/success-60
-                                             :pressed  colors/success-50
-                                             :disabled colors/success-60-opa-30}}
-    :photo-bg        {:icon-color           colors/white
-                      :icon-secondary-color colors/neutral-30
-                      :label-color          colors/white
-                      :background-color     {:default  colors/neutral-80-opa-40
-                                             :pressed  colors/neutral-80-opa-50
-                                             :disabled colors/neutral-80-opa-40}}
-    :blur-bg         {:icon-color           colors/white
-                      :icon-secondary-color colors/white-opa-70
-                      :label-color          colors/white
-                      :background-color     {:default  colors/white-opa-5
-                                             :pressed  colors/white-opa-10
-                                             :disabled colors/white-opa-5}}
-    :blurred         {:icon-color            colors/white
-                      :icon-secondary-color  colors/white
-                      :icon-background-color {:default colors/neutral-80
-                                              :blurred colors/white-opa-10}
-                      :label-color           colors/white
-                      :background-color      {:default  colors/neutral-90
-                                              :pressed  colors/neutral-90
-                                              :disabled colors/neutral-90-opa-10-blur}
-                      :blur-overlay-color    colors/neutral-80-opa-40
-                      :blur-type             :dark}
-    :blur-bg-outline {:icon-color           colors/white
-                      :icon-secondary-color colors/white-opa-40
-                      :label-color          colors/white
-                      :border-color         {:default  colors/white-opa-10
-                                             :pressed  colors/white-opa-20
-                                             :disabled colors/white-opa-5}}
-    :shell           {:icon-color       colors/white
-                      :label-color      colors/white
-                      :background-color {:default colors/neutral-95}}}})
-
-(defn shape-style-container
-  [type icon size]
-  {:height        size
-   :border-radius (if (and icon (#{:primary :secondary :danger} type))
-                    24
-                    (case size
-                      56 12
-                      40 12
-                      32 10
-                      24 8))})
-
-(defn style-container
-  [{:keys [type size disabled background-color border-color icon above width before after blur-active?]}]
-  (merge {:height             size
-          :align-items        :center
-          :justify-content    :center
-          :flex-direction     (if above :column :row)
-          :padding-horizontal (when-not (or icon before after)
-                                (case size
-                                  56 16
-                                  40 16
-                                  32 12
-                                  24 8))
-          :padding-left       (when-not (or icon before)
-                                (case size
-                                  56 16
-                                  40 16
-                                  32 12
-                                  24 8))
-          :padding-right      (when-not (or icon after)
-                                (case size
-                                  56 16
-                                  40 16
-                                  32 12
-                                  24 8))
-          :padding-top        (when-not (or icon before after)
-                                (case size
-                                  56 0
-                                  40 9
-                                  32 5
-                                  24 3))
-          :padding-bottom     (when-not (or icon before after)
-                                (case size
-                                  56 0
-                                  40 9
-                                  32 5
-                                  24 4))
-          :overflow           :hidden}
-         (when (or (and (= type :blurred) (not blur-active?))
-                   (not= type :blurred))
-           {:background-color background-color})
-         (shape-style-container type icon size)
-         (when width
-           {:width width})
-         (when icon
-           {:width size})
-         (when border-color
-           {:border-color border-color
-            :border-width 1})
-         (when disabled
-           {:opacity 0.3})))
@@ -1,138 +0,0 @@
-(ns quo2.components.dropdowns.old-button-view
-  (:require [quo2.components.icon :as quo2.icons]
-            [quo2.components.markdown.text :as text]
-            [quo2.theme :as theme]
-            [react-native.core :as rn]
-            [react-native.blur :as blur]
-            [reagent.core :as reagent]
-            [quo2.components.dropdowns.old-button-style :as style]))
-
-(defn- button-internal
-  "with label
-   [button opts \"label\"]
-   opts
-   {:type   :primary/:secondary/:grey/:dark-grey/:outline/:ghost/
-            :danger/:photo-bg/:blur-bg/:blur-bg-outline/:shell/:community
-    :size   40 [default] /32/24
-    :icon   true/false
-    :community-color '#FFFFFF'
-    :community-text-color '#000000'
-    :before :icon-keyword
-    :after  :icon-keyword}
-
-   only icon
-   [button {:icon true} :i/close-circle]"
-  [_ _]
-  (let [pressed-in (reagent/atom false)]
-    (fn
-      [{:keys [on-press disabled type size before after above icon-secondary-no-color
-               width customization-color theme override-background-color pressed
-               on-long-press accessibility-label icon icon-no-color style inner-style test-ID
-               blur-active? override-before-margins override-after-margins icon-size icon-container-size
-               icon-container-rounded?]
-        :or   {type                :primary
-               size                40
-               customization-color :primary
-               blur-active?        true}}
-       children]
-      (let [{:keys [icon-color icon-secondary-color background-color label-color border-color blur-type
-                    blur-overlay-color icon-background-color]}
-            (get-in (style/themes customization-color)
-                    [theme type])
-            state (cond disabled                 :disabled
-                        (or @pressed-in pressed) :pressed
-                        :else                    :default)
-            blur-state (if blur-active? :blurred :default)
-            icon-size (or icon-size (when (= 24 size) 12))
-            icon-secondary-color (or icon-secondary-color icon-color)]
-        [rn/touchable-without-feedback
-         (merge {:test-ID             test-ID
-                 :disabled            disabled
-                 :accessibility-label accessibility-label
-                 :on-press-in         #(reset! pressed-in true)
-                 :on-press-out        #(reset! pressed-in nil)}
-                (when on-press
-                  {:on-press on-press})
-                (when on-long-press
-                  {:on-long-press on-long-press}))
-         [rn/view
-          {:style (merge
-                   (style/shape-style-container type icon size)
-                   {:width width}
-                   style)}
-          [rn/view
-           {:style (merge
-                    (style/style-container {:type type
-                                            :size size
-                                            :disabled disabled
-                                            :background-color
-                                            (or override-background-color (get background-color state))
-                                            :border-color
-                                            (get border-color state)
-                                            :icon icon
-                                            :above above
-                                            :width width
-                                            :before before
-                                            :after after
-                                            :blur-active? blur-active?})
-                    (when (= state :pressed) {:opacity 0.9})
-                    inner-style)}
-           (when (and (= type :blurred)
-                      blur-active?)
-             [blur/view
-              {:blur-radius   20
-               :blur-type     blur-type
-               :overlay-color blur-overlay-color
-               :style         style/blur-view}])
-           (when above
-             [rn/view
-              [quo2.icons/icon above
-               {:container-style {:margin-bottom 2}
-                :color           icon-secondary-color
-                :size            icon-size}]])
-           (when before
-             [rn/view
-              {:style (style/before-icon-style
-                       {:override-margins        override-before-margins
-                        :size                    size
-                        :icon-container-size     icon-container-size
-                        :icon-background-color   (get icon-background-color blur-state)
-                        :icon-container-rounded? icon-container-rounded?
-                        :icon-size               icon-size})}
-              [quo2.icons/icon before
-               {:color icon-secondary-color
-                :size  icon-size}]])
-           [rn/view
-            (cond
-              (or icon icon-no-color)
-              [quo2.icons/icon children
-               {:color    icon-color
-                :no-color icon-no-color
-                :size     icon-size}]
-
-              (string? children)
-              [text/text
-               {:size            (when (#{56 24} size) :paragraph-2)
-                :weight          :medium
-                :number-of-lines 1
-                :style           {:color label-color}}
-
-               children]
-
-              (vector? children)
-              children)]
-           (when after
-             [rn/view
-              {:style (style/after-icon-style
-                       {:override-margins        override-after-margins
-                        :size                    size
-                        :icon-container-size     icon-container-size
-                        :icon-background-color   (get icon-background-color blur-state)
-                        :icon-container-rounded? icon-container-rounded?
-                        :icon-size               icon-size})}
-              [quo2.icons/icon after
-               {:no-color icon-secondary-no-color
-                :color    icon-secondary-color
-                :size     icon-size}]])]]]))))
-
-(def button (theme/with-theme button-internal))
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
alwx	7376ae1509	Updates for unread messages indicator	2023-10-02 17:30:58 +02:00
Mohsen	ee85d6d596	[#17288 ] refactor: migrate previews to new api (#17470 )	2023-10-02 16:28:35 +03:00
Omar Basem	d8d8a6c7a0	Quo2: Token Input followup (#17419 ) * Quo2: token input followup	2023-10-02 09:01:39 +04:00
jakub	f5f1e6302d	ci: use new OpenSea API keys They are split by both platform and build type. Depends on: https://github.com/status-im/status-jenkins-lib/pull/74 Signed-off-by: Jakub Sokołowski <jakub@status.im>	2023-09-29 16:32:45 +02:00
Mohamed Javid	9c26a54006	Add network-dropdown to wallet-overview component (#17440 ) This commit adds the "network-dropdown" component to the "wallet-overview" component. Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>	2023-09-29 18:53:06 +05:30
codemaster	ab868a6ae5	Implement switcher group messaging card (#16802 )	2023-09-29 23:11:21 +10:00
Parvesh Monu	695bbcbe81	fix bottom tabs unread badge for group chats (#17454 )	2023-09-29 17:59:35 +05:30
Mohamed Javid	bf76ca167a	Implement dropdown component and update it's usage across the codebase (#17412 ) This commit: - Removes the existing dropdown component which uses the old button component under the hood - Implements the Dropdown component - Updates the usage in the page-nav component for types dropdown, token and wallet-networks - Updates the usage in the photo selector bottom sheet - Updates the usage in the Quo2 preview main screen --------- Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>	2023-09-29 17:37:27 +05:30
Ulises Manuel	af1942dff3	[#17220 ] - New 64 avatars size (#17283 ) * Add 64 size for user-avatar * Add 64 size for channel-avatar * Add 64 size for account-avatar * Add 64 size for wallet-avatar	2023-09-29 03:48:02 -06:00
yqrashawn	1c31127a6f	fix: missing/empty user-avatar in component previews (#17430 )	2023-09-29 15:30:04 +08:00
Ajay Sivan	fe404ab005	Remove old quo code from status_im2 namespace (#17404 )	2023-09-28 09:27:31 -07:00
Brian Sztamfater	8869271054	feat: implement account list item component (#17303 ) Signed-off-by: Brian Sztamfater <brian@status.im>	2023-09-28 12:27:36 -03:00
Brian Sztamfater	5ea78084d1	feat: implement saved address component (#17398 ) Signed-off-by: Brian Sztamfater <brian@status.im>	2023-09-28 12:13:49 -03:00
Mohsen	ba57ab9ae4	[#17288 ] refactor: migrate previews to new api (#17420 )	2023-09-28 15:26:15 +03:00
Siddarth Kumar Jamie Caprani frank	0522120c66	Standardized in-app authentication (#16916 ) * chore: move password input to connected component --------- Co-authored-by: Jamie Caprani <jamiecaprani@gmail.com> Co-authored-by: frank <lovefree103@gmail.com>	2023-09-28 04:23:15 -07:00
Parvesh Monu	6b9b5fa300	Only use animated loading skeleton for ios (#17432 )	2023-09-27 20:43:21 +05:30
Omar Basem	77733b3a65	Quo2: Color picker (#17405 ) * Quo2: color picker	2023-09-27 15:34:16 +04:00
Volodymyr Kozieiev	79f7b6c6ba	Transaction summary design followup fixes (#17360 )	2023-09-27 11:54:41 +01:00
flexsurfer	db787f9d4b	remove status-im.utils.clocks (#17434 )	2023-09-27 12:04:40 +02:00
flexsurfer	a847f508f9	[#17410 ] migrate status-im.ethereum.core (#17422 )	2023-09-27 11:57:51 +02:00
Lungu Cristian	4152b9318b	Quo2: section label (#17219 ) * feat: added section-label to quo2 * fix: addressed review comments * ref: reorder and small change * fix: blur only for dark and adjusted styling	2023-09-27 12:07:10 +03:00
codemaster	96f476fc2b	feat: Implement quo2 code-snippet-preview component (#17235 )	2023-09-27 07:41:52 +10:00
Yevheniia Berdnyk	70d6291c57	e2e: some todos and updates	2023-09-26 18:55:42 +03:00
Parvesh Monu	90cb5d3d88	fix group card remains in shell after leaving the group (#17417 )	2023-09-26 20:33:56 +05:30
Ibrahem Khalil	da5086aae2	[17377-17378] Fix reply view in activity center showing only one phot… (#17388 )	2023-09-26 15:59:36 +03:00
Alex Tumanov	baf3fb9bbd	Remove test tmp folder before each new test run (#17263 )	2023-09-26 13:49:24 +02:00
Flavio Fraschetti	f12c7401d1	WIP: refactor notifications (#17413 ) to accomplish #17288 migrated : notifications Issue Opened: A bug has been identified within the activity-logs component and is currently under investigation.	2023-09-25 19:04:03 +01:00
mmilad75	3082605d1e	Handle account-card component pressed state bg color (#17234 ) Handle account-card component pressed state bg color	2023-09-25 16:30:54 +03:30
Mohsen Ghafouri	1dfab2b416	[#17333 ] fix: disable ring for small avatar (#17385 )	2023-09-25 15:47:38 +03:00
Mohamed Javid	a9b63e0f22	Update "Preview List" component to use "Number Tag" for overflow item (#17257 ) This commit updates - the preview-list component to use "number-tag" for overflow items in the list as a follow-up of the PR Update "Preview list" component. - the usage of the preview-list component in the context-tag (multiuser and multinetwork type) is updated as it was broken. - the size APIs of preview-list and number-tag and their usage across the codebase to respect the new guidelines. --------- Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>	2023-09-25 17:28:20 +05:30
Jamie CapraniandUlises M	f47a4a18e8	chore: add docs with size (#17279 ) * chore: update guidelines for sizes * chore: update to size uses in codebase to follow new convention --------- Co-authored-by: Ulises M <ulises.ssb@hotmail.com>	2023-09-25 05:22:07 -06:00
flexsurfer	723573833e	[#17357 ] move status-im.async-storage.core (#17380 )	2023-09-25 12:45:39 +02:00
Ibrahem Khalil	53f40b55f2	Adjust PR template to add before/after (#17402 )	2023-09-25 13:42:37 +03:00
Mohsen Ghafouri	6fd5a97b59	[#17288 ] refactor: migrate previews to new api (#17366 )	2023-09-25 13:19:50 +03:00
Mohsen Ghafouri	848cac31ba	[#17300 ] fix: syncing device indicator color and some alignment (#17340 )	2023-09-25 11:55:54 +03:00
Omar Basem	7e646f7823	revert podfile (#17406 )	2023-09-25 12:40:27 +04:00
flexsurfer	b2cae88924	[#17383 ] migrate status-im.utils.types (#17389 )	2023-09-25 09:32:55 +02:00
Omar Basem	1aadffd300	Quo2: keypair blur (#17294 ) * quo2: keypair blur	2023-09-25 08:32:04 +04:00
Volodymyr Kozieiev	08689e568a	Links to recorded meetings added to docs (#17399 )	2023-09-22 16:42:58 +01:00
frank	7543dc9001	fix: identifier rings are displayed on avatars for users with a set ENS (#17346 )	2023-09-22 21:51:54 +08:00
Parvesh Monu	a99ae74da7	remove messages screen global states (#17365 )	2023-09-21 21:21:42 +05:30
Parvesh Monu	db41eb303d	fix unread badges behavior on Jump-to screen (#17363 )	2023-09-21 17:53:38 +05:30
frank	e5ef15b531	Prevent Logged In Account Local Pairing / Syncing With Another Account (#17342 )	2023-09-21 10:02:42 +08:00
Jamie Caprani	e41fb03b6f	adjust colors resolver to handle communities color (#17339 )	2023-09-21 01:03:02 +02:00
Jamie Caprani	0ae1e9bc5a	chore: updating theming in quo2 components and chat (#17199 )	2023-09-21 00:41:00 +02:00
flexsurfer	ddd0796381	[#17355 ] status-im.utils.image-processing (#17356 )	2023-09-20 16:14:53 +02:00
flexsurfer	92cc49184d	move messages legacy view (#17354 )	2023-09-20 15:42:57 +02:00
Mohsen Ghafouri	41282a9f5d	[#17309 ] fix: wrong cursor position in a pre-filled composer (#17329 )	2023-09-20 16:24:03 +03:00
flexsurfer	5bb954f8a7	[#17351 ] remove status-im.utils.platform (#17352 )	2023-09-20 14:17:52 +02:00
flexsurfer	6a169bd0bd	[#17347 ] move [status-im.utils.http :as http] to status-im2 (#17350 )	2023-09-20 14:16:07 +02:00
Siddarth Kumar	a15c9788fe	add support for Xcode 15 (#17343 ) After upgrading to Xcode 15 make run-ios would fail with ``` ❌ /Users/siddarthkumar/code/status-im/PR/status-mobile/ios/Pods/boost/boost/container_hash/hash.hpp:131:33: no template named 'unary_function' in namespace 'std'; did you mean '__unary_function'? struct hash_base : std::unary_function<T, std::size_t> {}; ``` This commit fixes the issue and makes existing codebase compatible with newer Xcode. reference issue in react-native repo : facebook/react-native#37748	2023-09-20 14:41:12 +05:30
Jamie Caprani	6279264ff1	chore: remove colors/dark? method from colors file and update uses (#17202 )	2023-09-19 08:16:18 -07:00
frank	cb9ae21cf2	process backedup(profile/settings) signal (#17306 )	2023-09-19 22:05:59 +08:00
Jamie Caprani	6eb53ca2db	fix: update use of setting-item component to match new api (#17244 )	2023-09-19 05:05:07 -07:00
Tetiana Churikova	5d6800cee0	e2e: update cython and pyyaml (#17297 )	2023-09-19 13:52:30 +02:00
frank	d5af6b62a7	fix: display name not displayed after sync (#17311 )	2023-09-19 17:18:38 +08:00
BalogunofAfrica	f2366219a3	fix: carousel text overflow (#17293 )	2023-09-19 09:15:50 +01:00
BalogunofAfrica	95e0715163	fix: intro screen carousel (#17269 ) * fix: last slide showing for a split second * fix: use scale resize-method to load image faster on android	2023-09-19 08:51:55 +01:00
Brian Sztamfater	9479f02b39	feat: wallet select address screen UI in empty state (#17248 ) Signed-off-by: Brian Sztamfater <brian@status.im>	2023-09-18 16:17:11 -03:00
Parvesh Monu	9df1b854bd	Remove use of camel-snake-kebab from shell worklet (#17310 )	2023-09-18 16:51:39 +05:30
frank	442600bc28	use new API for ens name registration (#17127 ) * use new API for ens name registration https://github.com/status-im/status-go/compare/4cc53630...223d215e * update status-go-version.json * update status-go-version.json * fix Error:Field validation for 'KeycardPairingDataFile' failed on the 'required' tag * update status-go-version.json * fix lint issue	2023-09-16 11:37:06 +08:00
Mohsen Ghafouri	b73ea572ee	[#17288 ] refactor: migrate previews (markdown, messages) to new api (#17280 )	2023-09-15 19:53:30 +03:00
Siddarth Kumar	a24ddbeefa	address design feedback on profile share UI (#16257 ) This commit adds UI Touchups to profile share screen according to a recent Design Review.	2023-09-15 18:02:13 +05:30
Mohsen Ghafouri	a53ba0c4e1	[#17218 ] fix: android channel name ellipsize completely (#17262 )	2023-09-15 14:52:26 +03:00
Volodymyr Kozieiev	4006495b22	fix keyword renaming performance (#17291 )	2023-09-15 12:02:44 +01:00
frank	72b8979c79	add doc: How to catch crash on ios use xcode (#17278 ) * add doc: How to catch crash on ios use xcode * addressed feedback from @ilmotta and @siddarthkay	2023-09-15 12:04:11 +08:00
Omar Basem	4d9ebdb9f9	Quo2: Account list card blur (#17271 ) * Quo2: account list card blur	2023-09-15 07:43:48 +04:00
Icaro Motta	e2f837fcbc	Raise clj-kondo linter levels (#17289 ) Recently, we changed clj-kondo default fail-level from "warning" to "error", but we missed the fact that we needed to raise the default level for all linters set to "warning".	2023-09-14 11:28:43 -03:00
flexsurfer	07d1b13520	temporary remove "curated.communities.update" (#17286 )	2023-09-14 15:57:29 +02:00
Lungu Cristian	5d4fbe7ef1	fix: quo2 reaction styles (size + colors) (#17224 )	2023-09-14 12:21:11 +03:00
Mohamed Javid	0003800f05	Implement Emoji Picker (#17195 ) This commit adds Emoji Picker in the app for usage in Message Composer and Wallet Account. --------- Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>	2023-09-13 23:08:13 +05:30
Icaro Motta	dab4d953ec	Fix incorrect usage of functional component (#17281 ) Every keypress on an input field of the preview descriptor re-rendered the whole functional component and the input focus was lost. As we know from past issues, we should never use this pattern: (defn component [] [:f> (fn [] ...)])	2023-09-13 13:22:53 -03:00
Brian Sztamfater	baa9dff237	feat: implement address input (#17191 ) Signed-off-by: Brian Sztamfater <brian@status.im>	2023-09-13 10:26:29 -03:00
frank	9706111256	fix unable to reset pwd on ios (#17259 )	2023-09-13 09:06:32 +08:00
Omar Basem	344c9ba9b7	Quo2: Settings item blur (#17258 ) * quo2: settings item blur	2023-09-12 21:49:10 +04:00
Icaro Motta	6ea31695d6	Do not warn about subscriptions being used in non-reactive contexts (#17240 ) Force re-frame to stop warning about subscriptions in non-reactive contexts while executing subscription tests (i.e. unit tests using the macro test-helpers.unit/deftest-sub). The net result? No more hundreds of useless warnings in the output of make test. re-frame: Subscribe was called outside of a reactive context. See: https://day8.github.io/re-frame/FAQs/UseASubscriptionInAJsEvent/ The warning is actually useful in production code, but in a subscription test we already know we're never inside a reactive context.	2023-09-12 11:58:06 -03:00
Yevheniia Berdnyk	2c52001e22	e2e: fixes 12.09	2023-09-12 16:46:49 +03:00
Volodymyr Kozieiev	dd1f938e85	Transaction summary component (#17163 ) * Transaction summary component	2023-09-12 14:44:40 +01:00
mmilad75	fcbe6fe2b4	Implement "Drawer top" component (#17196 ) Implement "Drawer top" component	2023-09-12 12:03:15 +03:30
Flavio Fraschetti	dfd91c0e5f	Bump release to 1.25.0 (#17247 )	2023-09-11 14:42:15 +01:00