Offsets for composer + dynamic height calculation

[#16278 ] fix tips in white camera border (#16716 )
2023-07-28 12:45:44 +02:00 · 2023-07-28 12:39:11 +02:00 · 2023-07-26 14:08:57 -06:00 · 2023-07-26 18:19:10 +05:30 · 2023-07-26 11:26:12 +00:00 · 2023-07-26 09:48:51 +02:00
495 changed files with 10180 additions and 6792 deletions
@@ -14,6 +14,21 @@
                                              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.
+                                    :include [comparator
+                                              count
+                                              identity
+                                              iter
+                                              key
+                                              str
+                                              symbol
+                                              time
+                                              val]}
                :invalid-arity     {:skip-args [status-im.utils.fx/defn utils.re-frame/defn]}
                ;; TODO remove number when this is fixed
                ;; https://github.com/borkdude/clj-kondo/issues/867
@@ -22,7 +22,6 @@ KEYCARD_TEST_MENU=0
 QR_READ_TEST_MENU=1
 ENABLE_ROOT_ALERT=1
 ENABLE_QUO_PREVIEW=1
-MAX_IMAGES_BATCH=5
 APN_TOPIC=im.status.ethereum.pr
 COMMUNITIES_ENABLED=1
 DATABASE_MANAGEMENT_ENABLED=1
@@ -21,7 +21,6 @@ COMMANDS_ENABLED=1
 KEYCARD_TEST_MENU=1
 QR_READ_TEST_MENU=1
 ENABLE_ROOT_ALERT=0
-MAX_IMAGES_BATCH=5
 APN_TOPIC=im.status.ethereum.pr
 VERIFY_TRANSACTION_CHAIN_ID=5
 VERIFY_ENS_CHAIN_ID=5
@@ -26,7 +26,6 @@ VERIFY_TRANSACTION_CHAIN_ID=5
 VERIFY_ENS_CHAIN_ID=5
 TEST_STATEOFUS=1
 BLANK_PREVIEW=0
-MAX_IMAGES_BATCH=5
 DATABASE_MANAGEMENT_ENABLED=1
 COMMUNITIES_ENABLED=1
 COMMUNITIES_MANAGEMENT_ENABLED=1
@@ -17,7 +17,6 @@ RPC_NETWORKS_ONLY=0
 PARTITIONED_TOPIC=0
 CONTRACT_NODES=1
 ENABLE_ROOT_ALERT=1
-MAX_IMAGES_BATCH=5
 BLANK_PREVIEW=0
 COMMUNITIES_ENABLED=1
 DATABASE_MANAGEMENT_ENABLED=1
@@ -43,4 +43,4 @@ As a <user|developer|...>, I want to <task> so that <goal>.
 [comment]: # (if on Android please replicate bug whilst running adb logcat)
 ```
 ...
-```
+```
@@ -1,8 +1,8 @@
 ---
-name: Bug Report
-about: Bug Report
+name: MVPBug Report
+about: MVPBug Report
 title: ''
-labels: bug
+labels: E:MobileBugfixesMVP
 assignees: ''

 ---
@@ -22,8 +22,7 @@ assignees: ''

 ### Reproduction

-1) Open Status
-2) 
+1. 

 ### Additional Information

@@ -0,0 +1,30 @@
+---
+name: Wont fix Report 
+about: to facilitate future handling, identify and address non-urgent issues that won't be prioritized in the near future
+title: ''
+labels: likely_wont_fix
+assignees: ''
+
+---
+
+## Problem
+
+
+#### Expected behavior
+
+
+#### Actual behavior
+
+
+### Reproduction
+
+1. 
+
+### Additional Information
+
+- Status version: release 
+- Operating System: Android, iOS
+
+
+[comment]: # (Please, add logs/notes if necessary)
+
@@ -14,17 +14,17 @@ WHITE  := $(shell tput -Txterm setaf 7)
 YELLOW := $(shell tput -Txterm setaf 3)
 RESET  := $(shell tput -Txterm sgr0)
 HELP_FUN = \
-		   %help; \
-		   while(<>) { push @{$$help{$$2 // 'options'}}, [$$1, $$3] if /^([a-zA-Z\-]+)\s*:.*\#\#(?:@([a-zA-Z\-]+))?\s(.*)$$/ }; \
-		   print "Usage: make [target]\n\nSee STARTING_GUIDE.md for more info.\n\n"; \
-		   for (sort keys %help) { \
-			   print "${WHITE}$$_:${RESET}\n"; \
-			   for (@{$$help{$$_}}) { \
-				   $$sep = " " x (32 - length $$_->[0]); \
-				   print "  ${YELLOW}$$_->[0]${RESET}$$sep${GREEN}$$_->[1]${RESET}\n"; \
-			   }; \
-			   print "\n"; \
-		   }
+			 %help; \
+			 while(<>) { push @{$$help{$$2 // 'options'}}, [$$1, $$3] if /^([a-zA-Z\-]+)\s*:.*\#\#(?:@([a-zA-Z\-]+))?\s(.*)$$/ }; \
+			 print "Usage: make [target]\n\nSee STARTING_GUIDE.md for more info.\n\n"; \
+			 for (sort keys %help) { \
+				 print "${WHITE}$$_:${RESET}\n"; \
+				 for (@{$$help{$$_}}) { \
+					 $$sep = " " x (32 - length $$_->[0]); \
+					 print "  ${YELLOW}$$_->[0]${RESET}$$sep${GREEN}$$_->[1]${RESET}\n"; \
+				 }; \
+				 print "\n"; \
+			 }
 HOST_OS := $(shell uname | tr '[:upper:]' '[:lower:]')

 # This can come from Jenkins
@@ -307,6 +307,7 @@ lint: ##@test Run code style checks
 	clj-kondo --config .clj-kondo/config.edn --cache false --lint src && \
 	ALL_CLOJURE_FILES=$(call find_all_clojure_files) && \
 	zprint '{:search-config? true}' -sfc $$ALL_CLOJURE_FILES && \
+	sh scripts/lint-trailing-newline.sh && \
 	yarn prettier

 # NOTE: We run the linter twice because of https://github.com/kkinnear/zprint/issues/271
@@ -315,9 +316,9 @@ lint-fix: ##@test Run code style checks and fix issues
 	ALL_CLOJURE_FILES=$(call find_all_clojure_files) && \
 	zprint '{:search-config? true}' -sw $$ALL_CLOJURE_FILES && \
 	zprint '{:search-config? true}' -sw $$ALL_CLOJURE_FILES && \
+	sh scripts/lint-trailing-newline.sh --fix && \
 	yarn prettier

-
 shadow-server: export TARGET := clojure
 shadow-server:##@ Start shadow-cljs in server mode for watching
 	yarn shadow-cljs server
@@ -2,7 +2,9 @@

 [<img src="https://play.google.com/intl/en_us/badges/images/generic/en-play-badge.png" alt="Get it on Google Play" height="80"/>](https://play.google.com/store/apps/details?id=im.status.ethereum)
 [<img src="https://fdroid.gitlab.io/artwork/badge/get-it-on.png" alt="Get it on F-Droid" height="80"/>](https://f-droid.org/packages/im.status.ethereum/)
-[<img src="doc/github_badge.png" alt="Get it on Github" height="80"/>](https://github.com/status-im/status-mobile/releases)
+
+
+[Get it on Github](https://github.com/status-im/status-mobile/releases)

 Join us in creating a browser, messenger, and gateway to a decentralized world. Status is a free (libre) open source mobile client targeting Android & iOS built entirely on [Ethereum](https://ethereum.org/) technologies. That's right, no middle men and `go-ethereum` running directly on your device.

@@ -20,31 +22,31 @@ If this interests you, **help us make Status a reality** - anyone can contribute

 ## How to Contribute?

-Go straight to the [docs](https://status.im/docs) or [join our chat](https://join.status.im/chat/public/status) and choose what interests you:
+Go straight to the [docs](doc/) and choose what interests you:

 - **Developer** Developers are the heart of software and to keep Status beating
 we need all the help we can get! If you're looking to code in ClojureScript or
 Golang then Status is the project for you! We use React Native and there is even
 some Java/Objective-C too! Want to learn more about it? Start by reading our
-[Developer Introduction](https://status.im/developer_tools/) which guides you
+[Developer Introduction](doc/starting-guide.md) which guides you
 through the technology stack and start browsing [beginner
 issues](https://github.com/status-im/status-mobile/issues?utf8=%E2%9C%93&q=is%3Aopen%20is%3Aissue%20label%3A%22good%20first%20issue%22%20).
 Then you can read how to [Build
-Status](https://status.im/technical/build_status/), which talks about managing
-project dependencies, coding guidelines and testing procedures. The [doc/](doc/)
-directory also has valuable information for contributors.
+Status](doc/starting-guide.md), which talks about managing
+project dependencies, coding guidelines and testing procedures.
+Check out our [coding guidelines](doc/new-guidelines.md).

 - **Community Management**
 Metcalfe's law states that the value of a network is proportional to the square of the number of connected users of the system - without community Status is meaningless. We're looking to create a positive, fun environment to explore new ideas, experiment and grow the Status community. Building a community takes a lot of work but the people you'll meet and long lasting relationships you form will be well worth it, check out our [Mission and Community Principles](https://status.im/about)

 - **Specification / Documentation**
-John Dewey once said "Education is not preparation for life; education is life *itself* ". Developers & Designers need guidance and it all starts from documentation and specifications. Our software is only as good as its documentation, head over to our [docs](https://status.im/docs) and see how you can improve what we have.
+John Dewey once said "Education is not preparation for life; education is life *itself* ". Developers & Designers need guidance and it all starts from documentation and specifications. Our software is only as good as its documentation, check out our [docs](doc/) and see how you can improve what we have.

 - **Blog Writing**
-Content is King, keeping our blog up to date and informing the community of news helps keep everyone on the same page. [Jump into our chat](https://join.status.im/chat/public/status) and discuss with the team how you can contribute!
+Content is King, keeping our blog up to date and informing the community of news helps keep everyone on the same page.

 - **Testers**
-It's bug hunting season! Status is currently under active development and there is sure to be a bunch of learning, [build status from scratch](https://status.im/technical/build_status/) or if an android user check out our [nightly builds](https://status.im/nightly). You can shake your phone to submit bug reports, or start browsing our [Github Issues](https://github.com/status-im/status-mobile/issues). Every bug you find brings Status closer to stable, usable software for everyone to enjoy!
+It's bug hunting season! Status is currently under active development and there is sure to be a bunch of learning, [build status from scratch](doc/starting-guide.md) or if an android user check out our [nightly builds](https://status.im/nightly). You can shake your phone to submit bug reports, or start browsing our [Github Issues](https://github.com/status-im/status-mobile/issues). Every bug you find brings Status closer to stable, usable software for everyone to enjoy!

 - **Security**
 Status is a visual interface to make permanent changes on the Blockchain, it handles crypto-tokens that have real value and allows 3rd party code execution. Security is paramount to its success. You are given permission to break Status as hard as you can, as long as you share your findings with the community!
@@ -52,9 +54,6 @@ Status is a visual interface to make permanent changes on the Blockchain, it han
 - **Evangelism**
 Help us spread the word! Tell a friend *right now*, in fact tell **everyone** - yell from a mountain if you have to, every person counts! If you've got a great story to tell or have some interesting way you've spread the word about Status let us know about it in our [chat](https://join.status.im/chat/public/status)

-## Status API
-View our [API Docs](https://status.im/developer_tools/status_web_api.html) and learn how to integrate your DApp into Status. You can read more about how to add your DApp to Status [here](https://status.im/developer_tools/add_your_dapp.html).
-
 ## Give me Binaries!

 You can get our Beta builds for both Android and iOS on our [website](https://status.im), through our [nightly builds](https://status.im/nightly/) or by [building it yourself](https://status.im/technical/build_status/).
@@ -68,12 +67,8 @@ Without the dedication of these outstanding individuals, Status would not exist.

 ## Contact us

-Feel free to email us at [support@status.im](mailto:support@status.im) or better yet, [join our chat](https://join.status.im/chat/public/status).
+Feel free to email us at [support@status.im](mailto:support@status.im).

 ## License

 Licensed under the [Mozilla Public License v2.0](https://github.com/status-im/status-mobile/blob/develop/LICENSE.md)
-
-## Testing Supported by
-
-[![BrowserStack Status](https://www.browserstack.com/automate/badge.svg?badge_key=SFBWQ3k5R2tnT2t6UGsxU1h1U0g3VFlCNnoxVTRHYWNoTDhsb1laaTJZWT0tLUZMUm5sSVFBSU9qSWM1RUJvK1I3Z3c9PQ==--ad15ae7992b432b33743749d40318952415bd98f)](https://www.browserstack.com/automate/public-build/SFBWQ3k5R2tnT2t6UGsxU1h1U0g3VFlCNnoxVTRHYWNoTDhsb1laaTJZWT0tLUZMUm5sSVFBSU9qSWM1RUJvK1I3Z3c9PQ==--ad15ae7992b432b33743749d40318952415bd98f)
@@ -1,4 +1,4 @@
 {
  "name": "StatusIm",
  "displayName": "StatusIm"
-}
+}
@@ -1,3 +1,4 @@
+#!/usr/bin/env groovy
 library 'status-jenkins-lib@v1.7.9'

 /* Options section can't access functions in objects. */
@@ -1,3 +1,4 @@
+#!/usr/bin/env groovy
 library 'status-jenkins-lib@v1.7.9'

 pipeline {
@@ -1,3 +1,4 @@
+#!/usr/bin/env groovy
 library 'status-jenkins-lib@v1.7.9'

 /* Options section can't access functions in objects. */
@@ -1,3 +1,4 @@
+#!/usr/bin/env groovy
 library 'status-jenkins-lib@v1.7.9'

 /* Options section can't access functions in objects. */
@@ -1,3 +1,4 @@
+#!/usr/bin/env groovy
 library 'status-jenkins-lib@v1.7.9'

 pipeline {
@@ -73,7 +74,7 @@ pipeline {
            sh 'cp -f $TEST_ETH_ACCOUNTS_FILE users.py'
            sh """
              python3 -m pytest \
-                --numprocesses 4 \
+                --numprocesses 6 \
                --rerun_count=2 \
                --testrail_report=True \
                -m testrail_id \
@@ -1,3 +1,4 @@
+#!/usr/bin/env groovy
 library 'status-jenkins-lib@v1.7.9'

 pipeline {
@@ -122,7 +123,7 @@ pipeline {
            sh 'cp -f $TEST_ETH_ACCOUNTS_FILE users.py'
            sh """
              python3 -m pytest \
-                --numprocesses 4 \
+                --numprocesses 6 \
                --rerun_count=2 \
                --testrail_report=True \
                -k \"${params.KEYWORD_EXPRESSION}\" \
@@ -1,3 +1,4 @@
+#!/usr/bin/env groovy
 library 'status-jenkins-lib@v1.7.9'

 pipeline {
@@ -1,3 +1,4 @@
+#!/usr/bin/env groovy
 library 'status-jenkins-lib@v1.7.9'

 pipeline {
@@ -1,3 +1,4 @@
+#!/usr/bin/env groovy
 library 'status-jenkins-lib@v1.7.9'

 pipeline {
@@ -1,3 +1,4 @@
+#!/usr/bin/env groovy
 library 'status-jenkins-lib@v1.7.9'

 pipeline {
@@ -1,3 +1,4 @@
+#!/usr/bin/env groovy
 /**
 * This job runs daily and executes `pod repo update` on MacOS
 * This is done to avoid issues with out of date repo causing errors like:
@@ -1,3 +1,4 @@
+#!/usr/bin/env groovy
 library 'status-jenkins-lib@v1.7.9'

 pipeline {
@@ -24,6 +24,7 @@

 [Patching](patching.md)

+[Creating a pixel perfect UI](pixel-perfection.md)

 ## Testing

@@ -45,4 +45,4 @@ The `State` field in the Pivotal story is used to track the progress of a Pivota
  | 5 points | 2 - 3 days       |
  | 8 points | ~1 week          |

-  We should avoid 8 point stories by breaking them down into smaller stories as much as possible.
+  We should avoid 8 point stories by breaking them down into smaller stories as much as possible.
@@ -80,6 +80,52 @@ This mistake mostly happens with functional components

 it's important to name functional components with `f-` prefix

+### Component props and API scheme to match Figma as closely as possible
+
+Ideally, the prop names for components (particularly in quo2 Design System) should match the Figma properties as best as possible. This makes it easier for the developer using that component to configure it correctly for the screen it is being used on and avoids unnecessary overwrites and adjustments being made.
+
+#### Avoid unnecessarily grouping categories to reduce the number of props
+For example in Figma if there is a component and it has the following variants:
+
+|theme: "light" blur: "False"|theme: "dark" blur: "False"|theme: "light" blur: "True"|theme: "dark"  blur: "True"|
+|----------------------------|---------------------------|---------------------------|---------------------------|
+| type :neutral label "ABC"  | type :neutral label "ABC" |                           |                           |
+| type :active  label "ABC"  | type :active  label "ABC" |                           |                           |
+| type :danger  label "ABC"  | type :danger  label "ABC" | type :danger label "ABC"  | type :danger label "ABC"  |
+
+```clojure
+;; bad
+"theme - :light or :dark
+type - can be :neutral :active :danger :danger-blur"
+(defn my-component [{:keys [theme type]} label])
+
+;; good
+"theme - :light or :dark
+ type - can be :neutral :active :danger
+ blur? - boolean
+"
+(defn my-component [{:keys [theme blur? type]} label])
+```
+
+Please note this is only for the external API of the component and there should be no restriction of how the component manages its internal API as that will not affect the developer using the component with the issues described above.
+
+In some cases this is not always possible or does not make sense. However the thought process should be how easy will it be for another developer to use this component with the correct configuration given the screen designs for Figma.
+
+#### Avoid unnecessarily renaming props 
+In general it can be helpful to avoid renaming props from their counterpart in Figma.
+
+For example if Figma has sizes `:small`, `:medium` and `:large`
+
+```clojure
+;; bad
+":size - :little, :default or :big"
+(defn my-component [{:keys [size]}])
+
+;; good
+":size - :small, :medium or :large"
+(defn my-component [{:keys [size]}])
+```
+
 ### Component styles

 Prefer to define styles in a separate file named `style.cljs`, colocated with
@@ -0,0 +1,17 @@
+# Pixel Perfection
+The Status Mobile team aims to align the design implementation perfectly according to a given screens respective Figma design spec.
+
+Currently the Figma Designs match up with an "iPhone 11 Pro" screen size. 
+
+To test your implementation is correct you can take the following steps
+
+- Open a new Figma file so that you have write privileges. 
+- Copy in the component or screen from the Figma file.
+
+- Using the "iPhone 11 Pro" simulator (it is the default now) you take a screenshot of your component and paste it into your Figma file.
+
+- To get the right size, set your screenshot to width 375px
+
+![](images/pixel-perfection/layer-width.png)
+
+- Lower the opacity so you can see it sitting on top of the Figma mock ups. 
@@ -3,4 +3,4 @@
    "version" : 1,
    "author" : "xcode"
  }
-}
+}
@@ -626,10 +626,10 @@ class StatusModule extends ReactContextBaseJavaModule implements LifecycleEventL
    }

    @ReactMethod
-    public void loginWithKeycard(final String accountData, final String password, final String chatKey) {
+    public void loginWithKeycard(final String accountData, final String password, final String chatKey, final String nodeConfigJSON) {
        Log.d(TAG, "loginWithKeycard");
        this.migrateKeyStoreDir(accountData, password);
-        String result = Statusgo.loginWithKeycard(accountData, password, chatKey);
+        String result = Statusgo.loginWithKeycard(accountData, password, chatKey, nodeConfigJSON);
        if (result.startsWith("{\"error\":\"\"")) {
            Log.d(TAG, "LoginWithKeycard result: " + result);
        } else {
@@ -633,14 +633,15 @@ RCT_EXPORT_METHOD(loginAccount:(NSString *)request) {

 RCT_EXPORT_METHOD(loginWithKeycard:(NSString *)accountData
                  password:(NSString *)password
-                  chatKey:(NSString *)chatKey) {
+                  chatKey:(NSString *)chatKey
+                  nodeConfigJSON:(NSString *)nodeConfigJSON) {
 #if DEBUG
    NSLog(@"LoginWithKeycard() method called");
 #endif
    [self getExportDbFilePath];
    [self migrateKeystore:accountData password:password];

-    NSString *result = StatusgoLoginWithKeycard(accountData, password, chatKey);
+    NSString *result = StatusgoLoginWithKeycard(accountData, password, chatKey, nodeConfigJSON);

    NSLog(@"%@", result);
 }
@@ -833,6 +833,37 @@ void _SaveAccountAndLogin(const FunctionCallbackInfo<Value>& args) {

 }

+void _CreateAccountAndLogin(const FunctionCallbackInfo<Value>& args) {
+	Isolate* isolate = args.GetIsolate();
+        Local<Context> context = isolate->GetCurrentContext();
+
+	if (args.Length() != 1) {
+		// Throw an Error that is passed back to JavaScript
+		isolate->ThrowException(Exception::TypeError(
+			String::NewFromUtf8Literal(isolate, "Wrong number of arguments for SaveAccountAndLogin")));
+		return;
+	}
+
+	// Check the argument types
+
+	if (!args[0]->IsString()) {
+		isolate->ThrowException(Exception::TypeError(
+			String::NewFromUtf8Literal(isolate, "Wrong argument type for 'settingsJSON'")));
+		return;
+	}
+
+	String::Utf8Value arg0Obj(isolate, args[0]->ToString(context).ToLocalChecked());
+	char *arg0 = *arg0Obj;
+
+	// Call exported Go function, which returns a C string
+	char *c = CreateAccountAndLogin(arg0);
+
+	Local<String> ret = String::NewFromUtf8(isolate, c).ToLocalChecked();
+	args.GetReturnValue().Set(ret);
+	delete c;
+
+}
+
 void _GenerateAlias(const FunctionCallbackInfo<Value>& args) {
 	Isolate* isolate = args.GetIsolate();
        Local<Context> context = isolate->GetCurrentContext();
@@ -1010,7 +1041,7 @@ void _LoginWithKeycard(const FunctionCallbackInfo<Value>& args) {
 	Isolate* isolate = args.GetIsolate();
        Local<Context> context = isolate->GetCurrentContext();

-	if (args.Length() != 3) {
+	if (args.Length() != 4) {
 		// Throw an Error that is passed back to JavaScript
 		isolate->ThrowException(Exception::TypeError(
 			String::NewFromUtf8Literal(isolate, "Wrong number of arguments for LoginWithKeycard")));
@@ -1034,6 +1065,11 @@ void _LoginWithKeycard(const FunctionCallbackInfo<Value>& args) {
 			String::NewFromUtf8Literal(isolate, "Wrong argument type for 'keyHex'")));
 		return;
 	}
+	if (!args[3]->IsString()) {
+		isolate->ThrowException(Exception::TypeError(
+			String::NewFromUtf8Literal(isolate, "Wrong argument type for 'nodeConfigJSON'")));
+		return;
+	}


 	String::Utf8Value arg0Obj(isolate, args[0]->ToString(context).ToLocalChecked());
@@ -1042,9 +1078,11 @@ void _LoginWithKeycard(const FunctionCallbackInfo<Value>& args) {
 	char *arg1 = *arg1Obj;
 	String::Utf8Value arg2Obj(isolate, args[2]->ToString(context).ToLocalChecked());
 	char *arg2 = *arg2Obj;
+	String::Utf8Value arg3Obj(isolate, args[3]->ToString(context).ToLocalChecked());
+    char *arg3 = *arg3Obj;

 	// Call exported Go function, which returns a C string
-	char *c = LoginWithKeycard(arg0, arg1, arg2);
+	char *c = LoginWithKeycard(arg0, arg1, arg2, arg3);

 	Local<String> ret = String::NewFromUtf8(isolate, c).ToLocalChecked();
 	args.GetReturnValue().Set(ret);
@@ -1929,6 +1967,7 @@ void init(Local<Object> exports) {
 	NODE_SET_METHOD(exports, "hashMessage", _HashMessage);
 	NODE_SET_METHOD(exports, "resetChainData", _ResetChainData);
 	NODE_SET_METHOD(exports, "saveAccountAndLogin", _SaveAccountAndLogin);
+	NODE_SET_METHOD(exports, "createAccountAndLogin", _CreateAccountAndLogin);
 	NODE_SET_METHOD(exports, "generateAlias", _GenerateAlias);
 	NODE_SET_METHOD(exports, "validateMnemonic", _ValidateMnemonic);
 	NODE_SET_METHOD(exports, "multiformatSerializePublicKey", _MultiformatSerializePublicKey);
@@ -18,4 +18,4 @@
    "url": "https://github.com/status-im/react-native-status/issues"
  },
  "homepage": "https://github.com/status-im/react-native-status#readme"
-}
+}
@@ -49,6 +49,12 @@ in {
    doCheck = false;
  });

+  # Downgrade watchman in attempt to fix "too many files open issue"
+  watchman = callPackage ./pkgs/watchman {
+    inherit (super.darwin.apple_sdk.frameworks) CoreServices;
+    autoconf = super.buildPackages.autoconf269;
+  };
+
  # Package version adjustments
  gradle = super.gradle_7;
  nodejs = super.nodejs-18_x;
@@ -0,0 +1,23 @@
+# Issue
+
+`watchman` was upgraded significantly during the last nixpkgs upgrade (`4.9.0` (Aug 16, 2017) to `2023.01.30.00` - 6 years between):
+- https://github.com/status-im/status-mobile/pull/14944
+- https://github.com/status-im/nixpkgs/commit/4e9c02bcc709fe1737a746add0e8e0109133d808
+
+Probably causing developers to have "too many files open" issue:
+https://github.com/status-im/status-mobile/issues/16341
+
+```
+Error: A non-recoverable condition has triggered.  Watchman needs your help!
+The triggering condition was at timestamp=1687286390: opendir(/Users/javid/Projects/status-mobile/node_modules/metro-core/node_modules/jest-regex-util/build) -> Too many open files
+All requests will continue to fail with this message until you resolve
+the underlying problem.  You will find more information on fixing this at
+https://facebook.github.io/watchman/docs/troubleshooting.html#poison-opendir
+```
+
+# Fix
+This is an attempt to fix the issue by downgrading the watchman
+
+# Upgrade
+When upgrading in the future, please read the comments:
+https://github.com/status-im/status-mobile/issues/16341
@@ -0,0 +1,48 @@
+{ stdenv, lib, config, fetchFromGitHub, autoconf, automake, pcre
+, libtool, pkg-config, openssl
+, confFile ? config.watchman.confFile or null
+, withApple ? stdenv.isDarwin, CoreServices
+}:
+
+stdenv.mkDerivation rec {
+  pname = "watchman";
+  version = "4.9.0";
+
+  src = fetchFromGitHub {
+    owner = "facebook";
+    repo = "watchman";
+    rev = "v${version}";
+    sha256 = "0fdaj5pmicm6j17d5q7px800m5rmam1a400x3hv1iiifnmhgnkal";
+  };
+
+  nativeBuildInputs = [ autoconf automake pkg-config libtool ];
+  buildInputs = [ pcre openssl ]
+    #++ lib.optionals withApple [ CoreServices ];
+    ++ lib.optionals stdenv.isDarwin [ CoreServices ];
+
+  configureFlags = [
+    "--enable-lenient"
+    "--enable-conffile=${if confFile == null then "no" else confFile}"
+    "--with-pcre=yes"
+
+    # For security considerations re: --disable-statedir, see:
+    # https://github.com/facebook/watchman/issues/178
+    "--disable-statedir"
+  ];
+
+  prePatch = ''
+    patchShebangs .
+  '';
+
+  preConfigure = ''
+    ./autogen.sh
+  '';
+
+  meta = with lib; {
+    description = "Watches files and takes action when they change";
+    homepage    = "https://facebook.github.io/watchman";
+    maintainers = with maintainers; [ cstrahan ];
+    platforms   = with platforms; linux ++ darwin;
+    license     = licenses.asl20;
+  };
+}
@@ -44,7 +44,7 @@
    "react-native-camera-kit": "^13.0.0",
    "react-native-config": "^1.5.0",
    "react-native-dialogs": "^1.0.4",
-    "react-native-draggable-flatlist": "^3.0.3",
+    "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",
@@ -194,4 +194,4 @@
            }
        }
    }
-}
+}
@@ -0,0 +1,33 @@
+#!/usr/bin/env bash
+
+set -eof pipefail
+
+FILES=$(comm -23 <(sort <(git ls-files --cached --others --exclude-standard)) <(sort <(git ls-files --deleted)) | grep --ignore-case -E '\.(java|cpp|nix|json|sh|md|js|clj|cljs|cljc|edn)$')
+N_FILES=$(echo "$FILES" | wc -l)
+LINT_SHOULD_FIX=0
+
+if [[ -n $1 && $1 != '--fix' ]]; then
+    echo "Unknown option '$1'" >&2
+    exit 1
+elif [[ $1 == '--fix' ]]; then
+    LINT_SHOULD_FIX=1
+fi
+
+echo "Checking ${N_FILES} files for missing trailing newlines."
+
+# Do not process the whole file and only check the last character. Ignore empty
+# files. Taken from https://stackoverflow.com/a/10082466.
+for file in $FILES; do
+    if [ -s "$file" ] && [ "$(tail -c1 "$file"; echo x)" != $'\nx' ]; then
+        if [[ $LINT_SHOULD_FIX -eq 1 ]]; then
+            echo "" >>"$file"
+        else
+            LINT_ERROR=1
+            echo "No trailing newline: $file" >&2
+        fi
+    fi
+done
+
+if [[ $LINT_ERROR -eq 1 ]]; then
+    exit 1
+fi
@@ -6,3 +6,10 @@ export function infoLayout(input, isTop) {
    return isTop ? input.value : -input.value;
  });
 }
+
+export function textSheet(input, isHeight) {
+  return useDerivedValue(function () {
+    'worklet';
+    return isHeight ? input.value : -input.value;
+  });
+}
@@ -1,18 +1,18 @@
 import { Easing } from 'react-native-reanimated';

 // Home Stack States
-export const CLOSE_WITH_ANIMATION = 0;
-export const OPEN_WITH_ANIMATION = 1;
-export const CLOSE_WITHOUT_ANIMATION = 2;
-export const OPEN_WITHOUT_ANIMATION = 3;
+export const CLOSE_WITHOUT_ANIMATION = 0;
+export const OPEN_WITHOUT_ANIMATION = 1;
+export const CLOSE_WITH_ANIMATION = 2;
+export const OPEN_WITH_ANIMATION = 3;

 // Floating Screen States
-export const CLOSE_SCREEN_WITH_SLIDE_ANIMATION = 0;
-export const OPEN_SCREEN_WITH_SLIDE_ANIMATION = 1;
-export const CLOSE_SCREEN_WITH_SHELL_ANIMATION = 2;
-export const OPEN_SCREEN_WITH_SHELL_ANIMATION = 3;
-export const CLOSE_SCREEN_WITHOUT_ANIMATION = 4;
-export const OPEN_SCREEN_WITHOUT_ANIMATION = 5;
+export const CLOSE_SCREEN_WITHOUT_ANIMATION = 0;
+export const OPEN_SCREEN_WITHOUT_ANIMATION = 1;
+export const CLOSE_SCREEN_WITH_SLIDE_ANIMATION = 2;
+export const OPEN_SCREEN_WITH_SLIDE_ANIMATION = 3;
+export const CLOSE_SCREEN_WITH_SHELL_ANIMATION = 4;
+export const OPEN_SCREEN_WITH_SHELL_ANIMATION = 5;

 export const SHELL_ANIMATION_TIME = 200;

@@ -225,12 +225,12 @@
  (.verifyDatabasePassword ^js (status) key-uid hashed-password callback))

 (defn login-with-keycard
-  [{:keys [key-uid multiaccount-data password chat-key]}]
+  [{:keys [key-uid multiaccount-data password chat-key node-config]}]
  (log/debug "[native-module] login-with-keycard")
  (clear-web-data)
  (init-keystore
   key-uid
-   #(.loginWithKeycard ^js (status) multiaccount-data password chat-key)))
+   #(.loginWithKeycard ^js (status) multiaccount-data password chat-key (types/clj->json node-config))))

 (defn set-soft-input-mode
  [mode]
@@ -287,11 +287,11 @@
  and then compressed. Example input/output :
  input key  = zQ3shTAten2v9CwyQD1Kc7VXAqNPDcHZAMsfbLHCZEx6nFqk9 and
  output key = 0x025596a7ff87da36860a84b0908191ce60a504afc94aac93c1abd774f182967ce6"
-  [key callback]
+  [input-key callback]
  (log/info "[native-module] Deserializing and then compressing public key"
            {:fn  :deserialize-and-compress-key
-             :key key})
-  (.deserializeAndCompressKey ^js (status) key callback))
+             :key input-key})
+  (.deserializeAndCompressKey ^js (status) input-key callback))

 (defn compressed-key->public-key
  "Provides compressed key to status-go and gets back the uncompressed public key via deserialization"
@@ -461,19 +461,19 @@
  (.numberToHex ^js (status) (str num)))

 (defn sha3
-  [str]
+  [s]
  (log/debug "[native-module] sha3")
-  (.sha3 ^js (status) str))
+  (.sha3 ^js (status) s))

 (defn utf8-to-hex
-  [str]
+  [s]
  (log/debug "[native-module] utf8-to-hex")
-  (.utf8ToHex ^js (status) str))
+  (.utf8ToHex ^js (status) s))

 (defn hex-to-utf8
-  [str]
+  [s]
  (log/debug "[native-module] hex-to-utf8")
-  (.hexToUtf8 ^js (status) str))
+  (.hexToUtf8 ^js (status) s))

 (defn check-address-checksum
  [address]
@@ -82,8 +82,8 @@
          :restDisplacementThreshold 0.001}})

 (defn set-value
-  [anim val]
-  (ocall anim "setValue" val))
+  [anim v]
+  (ocall anim "setValue" v))

 (def Value (oget animated "Value"))

@@ -178,20 +178,20 @@
  (.withOffset ^js redash (clj->js config)))

 (defn with-spring-transition
-  [val config]
-  (.withSpringTransition ^js redash val (clj->js config)))
+  [v config]
+  (.withSpringTransition ^js redash v (clj->js config)))

 (defn with-timing-transition
-  [val config]
-  (.withTimingTransition ^js redash val (clj->js config)))
+  [v config]
+  (.withTimingTransition ^js redash v (clj->js config)))

 (defn use-spring-transition
-  [val config]
-  (.useSpringTransition ^js redash val (clj->js config)))
+  [v config]
+  (.useSpringTransition ^js redash v (clj->js config)))

 (defn use-timing-transition
-  [val config]
-  (.useTimingTransition ^js redash val (clj->js config)))
+  [v config]
+  (.useTimingTransition ^js redash v (clj->js config)))

 (defn re-timing
  [config]
@@ -232,36 +232,11 @@
     :onGestureEvent       (.-onGestureEvent ^js gesture)}))

 (defn snap-point
-  [value velocity snap-points]
-  (.snapPoint ^js redash value velocity (to-array snap-points)))
-
-(defn cancelable-loop
-  [{:keys [clock duration finished on-reach]}]
-  (let [time       (value 0)
-        frame-time (value 0)
-        position   (value 0)
-        to-value   (value 1)
-        state      {:time      time
-                    :frameTime frame-time
-                    :finished  finished
-                    :position  position}
-        config     {:toValue  to-value
-                    :duration duration
-                    :easing   (:linear easings)}]
-    (block
-     [(timing clock state config)
-      (cond* (and* finished
-                   (eq position to-value))
-             (call* [] on-reach))
-      (cond* finished
-             [(set finished 0)
-              (set time 0)
-              (set frame-time 0)
-              (set position 0)])
-      position])))
+  [v velocity snap-points]
+  (.snapPoint ^js redash v velocity (to-array snap-points)))

 (defn with-easing
-  [{val   :value
+  [{v     :value
    :keys [snap-points velocity offset state easing duration
           animation-over]
    :or   {duration       250
@@ -282,7 +257,7 @@
             (set position offset))
      (cond* (neq state (:end gh/states))
             [(set animation-over 0)
-              (set position (add offset val))])
+              (set position (add offset v))])
      (cond* (and* (eq state (:end gh/states))
                   (not* animation-over))
             [(set position
@@ -11,4 +11,4 @@
   (for [i (keys icons/icons)]
     [rn/view {:flex-direction :row}
      [icons/icon (keyword i)]
-      [rn/text i]])])
+      [rn/text i]])])
@@ -1,12 +1,5 @@
 (ns quo.previews.preview)

-(defn descriptor->values
-  [{:keys [key options type]}]
-  {key (case type
-         :boolean [false true]
-         :text    [nil "Just simple text"] ; NOTE(Ferossgp): add example with long text?
-         :select  (mapv :key options))})
-
 (defmacro list-comp
  [[binding seq-expr & bindings] body-expr]
  (cond (not binding)
@@ -68,8 +68,8 @@
   :background-color   (:ui-background @colors/theme)})

 (defn customizer-boolean
-  [{:keys [label key state]}]
-  (let [state* (reagent/cursor state [key])]
+  [{:keys [label state] :as args}]
+  (let [state* (reagent/cursor state [(:key args)])]
    [rn/view {:style container}
     [label-view state label]
     [rn/view
@@ -95,8 +95,8 @@
        "False"]]]]))

 (defn customizer-text
-  [{:keys [label key state]}]
-  (let [state* (reagent/cursor state [key])]
+  [{:keys [label state] :as args}]
+  (let [state* (reagent/cursor state [(:key args)])]
    [rn/view {:style container}
     [label-view state label]
     [rn/view {:style {:flex 0.6}}
@@ -117,8 +117,8 @@
 (defn customizer-select
  []
  (let [open (reagent/atom nil)]
-    (fn [{:keys [label key state options]}]
-      (let [state*   (reagent/cursor state [key])
+    (fn [{:keys [label state options] :as args}]
+      (let [state*   (reagent/cursor state [(:key args)])
            selected (value-for-key @state* options)]
        [rn/view {:style container}
         [label-view state label]
@@ -133,15 +133,15 @@
            [rn/view {:style (modal-view)}
             [rn/scroll-view
              (doall
-               (for [{:keys [key value]} options]
-                 ^{:key key}
+               (for [{k :key v :value} options]
+                 ^{:key k}
                 [rn/touchable-opacity
-                  {:style    (select-option-style (= @state* key))
+                  {:style    (select-option-style (= @state* k))
                   :on-press #(do
                                (reset! open false)
-                                (reset! state* key))}
-                  [quo/text {:color (if (= @state* key) :link :secondary)}
-                   value]]))
+                                (reset! state* k))}
+                  [quo/text {:color (if (= @state* k) :link :secondary)}
+                   v]]))
              [rn/view {:flex-direction :row}
               [rn/touchable-opacity
                {:style    (select-option-style false)
@@ -175,17 +175,15 @@
   {:style              {:flex 1}
    :padding-horizontal 16}
   (doall
-    (for [{:keys [key type]
-           :as   desc}
-          descriptors
-          :let [descriptor (merge desc
-                                  {:state state})]]
-      ^{:key key}
+    (for [desc descriptors
+          :let [descriptor (merge desc {:state state})]]
+      ^{:key (:key desc)}
      [:<>
-       (case type
+       (case (:type desc)
         :boolean [customizer-boolean descriptor]
         :text    [customizer-text descriptor]
-         :select  [customizer-select descriptor])]))])
+         :select  [customizer-select descriptor]
+         nil)]))])

 (comment
  [{:label "Show error:"
@@ -12,9 +12,9 @@

 ;; Inspired from UIX, Rum and Rumext
 (defn set-ref-val!
-  [ref val]
-  (oset! ref "current" val)
-  val)
+  [ref v]
+  (oset! ref "current" v)
+  v)

 (defn set-native-props
  [^js ref ^js props]
@@ -54,8 +54,8 @@
                   #js [value set-value])))

 (defn use-ref
-  [val]
-  (let [ref (react/useRef val)]
+  [v]
+  (let [ref (react/useRef v)]
    (reify
     cljs.core/IHash
       (-hash [_] (goog/getUid ref))
@@ -1,50 +0,0 @@
-(ns quo2.components.avatars.channel-avatar
-  (:require [quo2.components.icon :as icons]
-            [quo2.components.markdown.text :as text]
-            [quo2.foundations.colors :as colors]
-            [quo2.theme :as theme]
-            [react-native.core :as rn]))
-
-(defn channel-avatar
-  [{:keys [big? locked? emoji-background-color emoji]}]
-  (let [lock-exists? locked?
-        dark?        (theme/dark?)]
-    [rn/view
-     {:style {:width            (if big? 32 24)
-              :height           (if big? 32 24)
-              :border-radius    (if big? 32 24)
-              :justify-content  :center
-              :align-items      :center
-              :background-color emoji-background-color}}
-     [rn/view
-      {:style {:display         :flex
-               :justify-content :center
-               :align-items     :center}}
-      [text/text
-       {:size (if big?
-                :paragraph-1
-                :label)} emoji]
-      (when lock-exists?
-        [rn/view
-         {:style {:position         :absolute
-                  :left             (if big?
-                                      14
-                                      8)
-                  :top              (if big?
-                                      15
-                                      8)
-                  :background-color (if dark?
-                                      colors/neutral-90
-                                      colors/white)
-                  :border-radius    15
-                  :padding          2}}
-         [icons/icon
-          (if locked?
-            :main-icons/locked
-            :main-icons/unlocked)
-          {:color           (if dark?
-                              colors/neutral-40
-                              colors/neutral-50)
-           :container-style {:width  12
-                             :height 12}
-           :size            12}]])]]))
@@ -0,0 +1,35 @@
+(ns quo2.components.avatars.channel-avatar.component-spec
+  (:require [quo2.components.avatars.channel-avatar.view :as component]
+            [test-helpers.component :as h]))
+
+(h/describe "Channel Avatar"
+  (h/test "default render"
+    (h/render [component/view])
+    (h/is-truthy (h/query-by-label-text :initials))
+    (h/is-null (h/query-by-label-text :emoji))
+    (h/is-null (h/query-by-label-text :lock)))
+
+  (h/test "with emoji, no lock set, large size"
+    (let [emoji "🍓"]
+      (h/render [component/view {:emoji emoji :size :size/l}])
+      (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))))
+
+  (h/test "locked"
+    (h/render [component/view {:locked? true}])
+    (h/is-truthy (h/query-by-label-text :lock)))
+
+  (h/test "unlocked"
+    (h/render [component/view {:locked? false}])
+    (h/is-truthy (h/query-by-label-text :lock)))
+
+  (h/test "no emoji, smaller size"
+    (h/render [component/view {:full-name "Status Mobile"}])
+    (h/is-truthy (h/query-by-text "S")))
+
+  (h/test "no emoji, large size"
+    (h/render [component/view
+               {:full-name "Status Mobile"
+                :size      :size/l}])
+    (h/is-truthy (h/query-by-text "SM"))))
@@ -0,0 +1,28 @@
+(ns quo2.components.avatars.channel-avatar.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(def lock-icon-size 12)
+
+(defn outer-container
+  [{:keys [size color]}]
+  (let [size (if (= size :size/l) 32 24)]
+    {:width            size
+     :height           size
+     :border-radius    size
+     :justify-content  :center
+     :align-items      :center
+     :background-color (colors/theme-alpha color 0.1 0.1)}))
+
+(defn lock-container
+  [size]
+  (let [distance (if (= size :size/l) 20 12)]
+    {:position         :absolute
+     :left             distance
+     :top              distance
+     :background-color (colors/theme-colors colors/white colors/neutral-95)
+     :border-radius    (* 2 lock-icon-size)
+     :padding          2}))
+
+(def lock-icon
+  {:width  lock-icon-size
+   :height lock-icon-size})
@@ -0,0 +1,60 @@
+(ns quo2.components.avatars.channel-avatar.view
+  (:require [clojure.string :as string]
+            [quo2.components.avatars.channel-avatar.style :as style]
+            [quo2.components.icon :as icons]
+            [quo2.components.markdown.text :as text]
+            [quo2.foundations.colors :as colors]
+            [react-native.core :as rn]
+            utils.string))
+
+(defn- initials
+  [full-name size color]
+  (let [amount-initials (if (= size :size/l) 2 1)]
+    [text/text
+     {:accessibility-label :initials
+      :size                :paragraph-2
+      :weight              :semi-bold
+      :style               {:color color}}
+     (utils.string/get-initials full-name amount-initials)]))
+
+(defn- lock
+  [locked? size]
+  ;; When `locked?` is nil, we must not display the unlocked icon.
+  (when (boolean? locked?)
+    [rn/view
+     {:accessibility-label :lock
+      :style               (style/lock-container size)}
+     [icons/icon (if locked? :i/locked :i/unlocked)
+      {:color           (colors/theme-colors colors/neutral-50 colors/neutral-40)
+       :container-style style/lock-icon
+       :size            12}]]))
+
+(defn view
+  "Options:
+
+  :size - keyword (default nil) - Container size, for the moment,
+  only :size/l (meaning large) is supported.
+
+  :emoji - string (default nil)
+
+  :customization-color - color (default nil) If the component is used for a
+  community channel, then the default color should be the community custom
+  color.
+
+  :locked? - nil/bool (default nil) - When true/false display a locked/unlocked
+  icon respectively. When nil does not show icon.
+
+  :full-name - string (default nil) - When :emoji is blank, this value will be
+  used to extract the initials.
+  "
+  [{:keys [size emoji customization-color locked? full-name]}]
+  [rn/view
+   {:accessibility-label :channel-avatar
+    :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)}
+      (string/trim emoji)])
+   [lock locked? size]])
@@ -41,7 +41,7 @@
     :border-radius dimensions}))

 (defn initials-avatar
-  [size draw-ring? customization-color]
+  [size draw-ring? customization-color theme]
  (let [outer-dimensions (get-in sizes [size :outer])
        inner-dimensions (get-in sizes [size (if draw-ring? :inner :outer)])]
    {:position         :absolute
@@ -52,7 +52,7 @@
     :border-radius    inner-dimensions
     :justify-content  :center
     :align-items      :center
-     :background-color (colors/custom-color-by-theme customization-color 50 60)}))
+     :background-color (colors/custom-color-by-theme customization-color 50 60 nil nil theme)}))

 (def initials-avatar-text
  {:color colors/white-opa-70})
@@ -67,7 +67,7 @@
     :background-color background}))

 (defn dot
-  [size ring?]
+  [size ring? theme]
  (let [dimensions   (get-in sizes [size :status-indicator])
        border-width (get-in sizes [size :status-indicator-border])
        right        (case size
@@ -89,5 +89,5 @@
     :height           dimensions
     :border-width     border-width
     :border-radius    dimensions
-     :background-color (colors/theme-colors colors/white colors/neutral-100)
-     :border-color     (colors/theme-colors colors/white colors/neutral-100)}))
+     :background-color (colors/theme-colors colors/white colors/neutral-100 theme)
+     :border-color     (colors/theme-colors colors/white colors/neutral-100 theme)}))
@@ -1,44 +1,32 @@
 (ns quo2.components.avatars.user-avatar.view
-  (:require [clojure.string :as string]
-            [quo2.components.avatars.user-avatar.style :as style]
+  (:require [quo2.components.avatars.user-avatar.style :as style]
            [quo2.components.markdown.text :as text]
+            [quo2.theme :as quo.theme]
            [react-native.core :as rn]
-            [react-native.fast-image :as fast-image]))
-
-(defn trim-whitespace [s] (string/join " " (string/split (string/trim s) #"\s+")))
-
-(defn- extract-initials
-  [full-name amount-initials]
-  (let [upper-case-first-letter (comp string/upper-case first)
-        names-list              (string/split (trim-whitespace full-name) " ")]
-    (if (= (first names-list) "")
-      ""
-      (->> names-list
-           (map upper-case-first-letter)
-           (take amount-initials)
-           (string/join)))))
+            [react-native.fast-image :as fast-image]
+            utils.string))

 (defn initials-avatar
-  [{:keys [full-name size draw-ring? customization-color]}]
+  [{:keys [full-name size draw-ring? customization-color theme]}]
  (let [font-size       (get-in style/sizes [size :font-size])
        amount-initials (if (#{:xs :xxs :xxxs} size) 1 2)]
    [rn/view
     {:accessibility-label :initials-avatar
-      :style               (style/initials-avatar size draw-ring? customization-color)}
+      :style               (style/initials-avatar size draw-ring? customization-color theme)}
     [text/text
      {:style  style/initials-avatar-text
       :size   font-size
       :weight :semi-bold}
-      (extract-initials full-name amount-initials)]]))
+      (utils.string/get-initials full-name amount-initials)]]))

 (def valid-ring-sizes #{:big :medium :small})

-(defn user-avatar
+(defn- user-avatar-internal
  "If no `profile-picture` is given, draws the initials based on the `full-name` and
  uses `ring-background` to display the ring behind the initials when given. Otherwise,
  shows the `profile-picture` which already comes with the ring drawn."
  [{:keys [full-name status-indicator? online? size profile-picture ring-background
-           customization-color static? muted?]
+           customization-color static? muted? theme]
    :or   {status-indicator?   true
           online?             true
           size                :big
@@ -62,11 +50,14 @@
        {:full-name           full-name
         :size                size
         :draw-ring?          draw-ring?
-         :customization-color customization-color}])
+         :customization-color customization-color
+         :theme               theme}])
     (when status-indicator?
       [rn/view
        {:accessibility-label :status-indicator
-         :style               (style/dot size draw-ring?)}
+         :style               (style/dot size draw-ring? theme)}
        [rn/view
         {:accessibility-label :inner-status-indicator-dot
          :style               (style/inner-dot size online?)}]])]))
+
+(def user-avatar (quo.theme/with-theme user-avatar-internal))
@@ -0,0 +1,58 @@
+(ns quo2.components.browser.browser-input.component-spec
+  (:require [quo2.components.browser.browser-input.view :as browser-input]
+            [test-helpers.component :as h]))
+
+(h/describe "Browser input"
+  (h/test "Renders empty in default state"
+    (h/render [browser-input/browser-input
+               {:on-change-text (h/mock-fn)
+                :value          ""}])
+    (h/is-truthy (h/get-by-label-text :browser-input)))
+
+  (h/test "On change text is fired"
+    (let [on-change-text (h/mock-fn)]
+      (h/render [browser-input/browser-input
+                 {:on-change-text on-change-text
+                  :value          "mock text"}])
+      (h/fire-event :change-text (h/get-by-label-text :browser-input) "mock-text-new")
+      (h/was-called on-change-text)))
+
+  (h/describe "Input Label"
+    (h/test "Doesn't render label text when input is focused"
+      (h/render [browser-input/browser-input
+                 {:auto-focus true}])
+      (h/is-null (h/query-by-label-text :browser-input-label)))
+
+    (h/test "Renders label text when input has a value and input is not focused"
+      (h/render [browser-input/browser-input
+                 {:default-value "mock default"}])
+      (h/is-truthy (h/query-by-label-text :browser-input-label)))
+
+    (h/test "Renders site favicon when specified"
+      (h/render [browser-input/browser-input
+                 {:default-value "mock default" :favicon :i/verified}])
+      (h/is-truthy (h/query-by-label-text :browser-input-favicon)))
+
+    (h/test "Renders lock icon when lock is enabled"
+      (h/render [browser-input/browser-input
+                 {:default-value "mock default" :locked? true}])
+      (h/is-truthy (h/query-by-label-text :browser-input-locked-icon))))
+
+  (h/describe "Clear button"
+    (h/test "Doesn't render in default state"
+      (h/render [browser-input/browser-input])
+      (h/is-null (h/query-by-label-text :browser-input-clear-button)))
+
+    (h/test "Renders when there is a value"
+      (h/render [browser-input/browser-input
+                 {:default-value "mock text"}])
+      (h/is-truthy (h/query-by-label-text :browser-input-clear-button)))
+
+    (h/test "Is pressable"
+      (let [on-clear (h/mock-fn)]
+        (h/render [browser-input/browser-input
+                   {:default-value "mock text"
+                    :on-clear      on-clear}])
+        (h/is-truthy (h/query-by-label-text :browser-input-clear-button))
+        (h/fire-event :press (h/query-by-label-text :browser-input-clear-button))
+        (h/was-called on-clear)))))
@@ -0,0 +1,56 @@
+(ns quo2.components.browser.browser-input.style
+  (:require [quo2.components.markdown.text :as text]
+            [quo2.foundations.colors :as colors]))
+
+(def clear-icon-container
+  {:align-items     :center
+   :height          20
+   :justify-content :center
+   :margin-left     8
+   :top             4
+   :width           20})
+
+(def favicon-icon-container
+  {:margin-right 2})
+
+(defn input
+  [disabled?]
+  (assoc (text/text-style {:size   :paragraph-1
+                           :weight :regular})
+         :flex       1
+         :min-height 36
+         :min-width  120
+         :opacity    (if disabled? 0.3 1)))
+
+(def lock-icon-container
+  {:margin-left 2})
+
+(defn active-container
+  [display?]
+  {:align-items     :center
+   :flex-direction  :row
+   :justify-content :center
+   :opacity         (if display? 1 0)})
+
+(def default-container
+  {:align-items        :center
+   :bottom             0
+   :flex-direction     :row
+   :left               0
+   :padding-horizontal 20
+   :position           :absolute
+   :right              0
+   :top                0
+   :z-index            10})
+
+(defn text
+  []
+  (assoc (text/text-style {:size   :paragraph-1
+                           :weight :medium})
+         :color
+         (colors/theme-colors colors/neutral-100 colors/white)))
+
+(def root-container
+  {:height             60
+   :padding-horizontal 20
+   :padding-vertical   8})
@@ -0,0 +1,144 @@
+(ns quo2.components.browser.browser-input.view
+  (:require [quo2.components.icon :as icon]
+            [quo2.components.browser.browser-input.style :as style]
+            [react-native.core :as rn]
+            [reagent.core :as reagent]
+            [quo2.foundations.colors :as colors]
+            [quo2.theme :as quo2.theme]
+            [clojure.string :as string]
+            [react-native.platform :as platform]))
+
+(defn remove-http-https-www
+  [value]
+  (string/replace value #"(https?://(www\.)?|http://)" ""))
+
+(defn clear-icon-color
+  [blur? theme]
+  (if blur?
+    (colors/theme-colors colors/neutral-80-opa-30 colors/white-opa-10 theme)
+    (colors/theme-colors colors/neutral-40 colors/neutral-60 theme)))
+
+(defn lock-icon-color
+  [blur? theme]
+  (if blur?
+    (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 theme)
+    (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)))
+
+(defn- clear-button
+  [{:keys [on-press blur? theme]}]
+  [rn/touchable-opacity
+   {:accessibility-label :browser-input-clear-button
+    :on-press            on-press
+    :style               style/clear-icon-container}
+   [icon/icon :i/clear
+    {:color (clear-icon-color blur? theme)}]])
+
+(defn lock-icon
+  [{:keys [blur? theme]}]
+  [rn/view
+   [icon/icon :i/locked
+    {:accessibility-label :browser-input-locked-icon
+     :color               (lock-icon-color blur? theme)
+     :container-style     style/lock-icon-container
+     :size                16}]])
+
+(defn cursor-color
+  [customization-color theme]
+  (colors/theme-colors (colors/custom-color customization-color 50)
+                       (colors/custom-color customization-color 60)
+                       theme))
+
+(defn placeholder-color
+  [state blur? theme]
+  (cond
+    (and blur? (= state :active))
+    (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-20 theme)
+
+    blur?
+    (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-30 theme)
+
+    (= state :active)
+    (colors/theme-colors colors/neutral-30 colors/neutral-60 theme)
+
+    :else
+    (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)))
+
+(def ^:private props-to-remove
+  [:cursor-color :placeholder-text-color :editable :on-change-text :on-focus
+   :on-blur :on-clear :value :disabled? :blur? :customization-color :theme])
+
+(defn browser-input-internal
+  [{:keys [default-value]
+    :or   {default-value ""}}]
+  (let [state       (reagent/atom :default)
+        value       (reagent/atom default-value)
+        set-active  #(reset! state :active)
+        set-default #(reset! state :default)
+        set-value   #(reset! value %)
+        ref         (atom nil)
+        clear-input (fn []
+                      (.clear ^js @ref)
+                      (reset! value ""))
+        focus-input (fn []
+                      (set-active)
+                      (.focus ^js @ref))]
+    (fn [{:keys [disabled? blur? on-change-text customization-color
+                 on-clear on-focus on-blur theme get-ref locked?
+                 favicon favicon-color favicon-size]
+          :as   props}]
+      (let [clean-props (apply dissoc props props-to-remove)]
+        [rn/view {:style style/root-container}
+         (when (and (seq @value) (= @state :default))
+           [rn/touchable-opacity
+            {:style    style/default-container
+             :on-press focus-input}
+            (when favicon
+              [icon/icon favicon
+               {:accessibility-label :browser-input-favicon
+                :color               favicon-color
+                :container-style     style/favicon-icon-container
+                :size                favicon-size}])
+            [rn/text
+             {:accessibility-label :browser-input-label
+              :style               (style/text)} (remove-http-https-www @value)]
+            (when locked?
+              [lock-icon
+               {:blur? blur?
+                :theme theme}])])
+         [rn/view {:style (style/active-container (or (empty? @value) (= @state :active)))}
+          [rn/text-input
+           (merge
+            clean-props
+            {:accessibility-label    :browser-input
+             :auto-capitalize        :none
+             :auto-correct           false
+             :cursor-color           (cursor-color customization-color theme)
+             :editable               (not disabled?)
+             :keyboard-appearance    (colors/theme-colors :light :dark theme)
+             :keyboard-type          :web-search
+             :on-blur                (fn []
+                                       (set-default)
+                                       (when on-blur (on-blur)))
+             :on-change-text         (fn [new-text]
+                                       (set-value new-text)
+                                       (when on-change-text (on-change-text new-text)))
+             :on-focus               (fn []
+                                       (set-active)
+                                       (when on-focus (on-focus)))
+             :placeholder-text-color (placeholder-color @state blur? theme)
+             :ref                    (fn [r]
+                                       (reset! ref r)
+                                       (when get-ref (get-ref r)))
+             :selection-color        (when platform/ios?
+                                       (cursor-color customization-color theme))
+             :select-text-on-focus   true
+             :style                  (style/input disabled?)})]
+          (when (seq @value)
+            [clear-button
+             {:blur?    blur?
+              :on-press (fn []
+                          (clear-input)
+                          (when on-clear (on-clear)))
+              :theme    theme}])]]))))
+
+(def browser-input (quo2.theme/with-theme browser-input-internal))
@@ -1,28 +0,0 @@
-(ns quo2.components.buttons.--tests--.buttons-component-spec
-  (:require ["@testing-library/react-native" :as rtl]
-            [quo2.components.buttons.button :as button]
-            [reagent.core :as reagent]))
-
-(defn render-button
-  ([options label]
-   (rtl/render (reagent/as-element [button/button options label]))))
-
-(js/global.test "default render of button component"
-  (fn []
-    (render-button {:accessibility-label "test-button"} "")
-    (-> (js/expect (rtl/screen.getByLabelText "test-button"))
-        (.toBeTruthy))))
-
-(js/global.test "button renders with a label"
-  (fn []
-    (render-button {} "test-label")
-    (-> (js/expect (rtl/screen.getByText "test-label"))
-        (.toBeTruthy))))
-
-(js/global.test "button on-press works"
-  (let [event (js/jest.fn)]
-    (fn []
-      (render-button {:on-press event} "test-label")
-      (rtl/fireEvent.press (rtl/screen.getByText "test-label"))
-      (-> (js/expect event)
-          (.toHaveBeenCalledTimes 1)))))
@@ -0,0 +1,18 @@
+(ns quo2.components.buttons.button.component-spec
+  (:require [quo2.components.buttons.button.view :as button]
+            [test-helpers.component :as h]))
+
+(h/describe "button tests"
+  (h/test "default render of button component"
+    (h/render [button/button {:accessibility-label "test-button"} ""])
+    (h/is-truthy (h/get-by-label-text "test-button")))
+
+  (h/test "button renders with a label"
+    (h/render [button/button {} "test-label"])
+    (h/is-truthy (h/get-by-text "test-label")))
+
+  (h/test "button on-press works"
+    (let [event (h/mock-fn)]
+      (h/render [button/button {:on-press event} "test-label"])
+      (h/fire-event :press (h/get-by-text "test-label"))
+      (h/was-called event))))
@@ -0,0 +1,103 @@
+(ns quo2.components.buttons.button.properties
+  (:require [quo2.foundations.colors :as colors]))
+
+(defn custom-color-type
+  [customization-color icon-only?]
+  {:icon-color           colors/white
+   :icon-secondary-color colors/white-opa-70
+   :label-color          colors/white
+   :background-color     (colors/custom-color customization-color 50)
+   :border-radius        (when icon-only? 24)})
+
+(defn grey-photo
+  [theme pressed?]
+  {:icon-color            (colors/theme-colors colors/neutral-100 colors/white theme)
+   :icon-secondary-color  (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-70 theme)
+   :label-color           (colors/theme-colors colors/neutral-100 colors/white theme)
+   :icon-background-color (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme)
+   :blur-overlay-color    (if pressed?
+                            (colors/theme-colors colors/white-opa-50
+                                                 colors/neutral-80-opa-50
+                                                 theme)
+                            (colors/theme-colors colors/white-opa-40
+                                                 colors/neutral-80-opa-40
+                                                 theme))
+   :blur-type             (if (= theme :light) :light :dark)})
+
+(defn grey-blur
+  [theme pressed?]
+  {:icon-color           (colors/theme-colors colors/neutral-100 colors/white theme)
+   :icon-secondary-color (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-70 theme)
+   :label-color          (colors/theme-colors colors/neutral-100 colors/white theme)
+   :background-color     (if pressed?
+                           (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 pressed?]
+  {:icon-color           (colors/theme-colors colors/neutral-100 colors/white theme)
+   :icon-secondary-color (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 theme)
+   :label-color          (colors/theme-colors colors/neutral-100 colors/white theme)
+   :border-color         (if pressed?
+                           (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 grey
+  [theme pressed?]
+  {:icon-color           (colors/theme-colors colors/neutral-100 colors/white theme)
+   :icon-secondary-color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
+   :label-color          (colors/theme-colors colors/neutral-100 colors/white theme)
+   :background-color     (if pressed?
+                           (colors/theme-colors colors/neutral-20 colors/neutral-60 theme)
+                           (colors/theme-colors colors/neutral-10 colors/neutral-80 theme))})
+
+(defn dark-grey
+  [theme pressed?]
+  {:icon-color           (colors/theme-colors colors/neutral-100 colors/white theme)
+   :icon-secondary-color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
+   :label-color          (colors/theme-colors colors/neutral-100 colors/white theme)
+   :background-color     (if pressed?
+                           (colors/theme-colors colors/neutral-30 colors/neutral-60 theme)
+                           (colors/theme-colors colors/neutral-20 colors/neutral-90 theme))})
+
+(defn outline
+  [theme pressed?]
+  {:icon-color           (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
+   :icon-secondary-color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
+   :label-color          (colors/theme-colors colors/neutral-100 colors/white theme)
+   :border-color         (if pressed?
+                           (colors/theme-colors colors/neutral-40 colors/neutral-60 theme)
+                           (colors/theme-colors colors/neutral-30 colors/neutral-70 theme))})
+
+(defn ghost
+  [theme pressed?]
+  {:icon-color           (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
+   :icon-secondary-color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
+   :label-color          (colors/theme-colors colors/neutral-100 colors/white theme)
+   :background-color     (when pressed?
+                           (colors/theme-colors colors/neutral-10 colors/neutral-80 theme))})
+
+(defn black
+  [pressed?]
+  {:icon-color       colors/white
+   :label-color      colors/white
+   :background-color (if pressed? colors/neutral-80 colors/neutral-95)})
+
+(defn get-values
+  [{:keys [customization-color theme type background pressed? icon-only?]}]
+  (cond
+    (= type :primary)                              (custom-color-type customization-color icon-only?)
+    (= type :positive)                             (custom-color-type customization-color icon-only?)
+    (= type :danger)                               (custom-color-type customization-color icon-only?)
+    ;; TODO Remove type blurred - https://github.com/status-im/status-mobile/issues/16535
+    (and (= :photo background) (= type :grey))     (grey-photo theme pressed?)
+    ;; TODO Remove type blur-bg - https://github.com/status-im/status-mobile/issues/16535
+    (or (= type :blur-bg)
+        (and (= :blur background) (= type :grey))) (grey-blur theme pressed?)
+    (and (= :blur background) (= type :outline))   (outline-blur theme pressed?)
+    (= type :grey)                                 (grey theme pressed?)
+    (= type :dark-grey)                            (dark-grey theme pressed?)
+    (= type :outline)                              (outline theme pressed?)
+    (= type :ghost)                                (ghost theme pressed?)
+    ;; TODO: remove type shell - https://github.com/status-im/status-mobile/issues/16535
+    (or (= type :shell) (= type :black))           (black pressed?)))
@@ -0,0 +1,106 @@
+(ns quo2.components.buttons.button.style)
+
+(def blur-view
+  {:position :absolute
+   :top      0
+   :left     0
+   :right    0
+   :bottom   0})
+
+(defn icon-style
+  [{:keys [icon-container-size icon-background-color icon-container-rounded?
+           icon-size margin-left margin-right]}]
+  (cond-> (merge {:margin-left     margin-left
+                  :margin-right    margin-right
+                  :align-items     :center
+                  :justify-content :center})
+    icon-container-size
+    (assoc :width icon-container-size :height icon-container-size)
+    icon-background-color
+    (assoc :background-color icon-background-color)
+    icon-container-rounded?
+    (assoc :border-radius (/ (or icon-container-size icon-size) 2))))
+
+(defn icon-left-icon-style
+  [{:keys [override-margins size icon-container-size icon-background-color icon-container-rounded?
+           icon-size]}]
+  (icon-style
+   {:margin-left             (or (get override-margins :left)
+                                 (if (= size 40) 12 8))
+    :margin-right            (or (get override-margins :right) 4)
+    :icon-container-size     icon-container-size
+    :icon-background-color   icon-background-color
+    :icon-container-rounded? icon-container-rounded?
+    :icon-size               icon-size}))
+
+(defn icon-right-icon-style
+  [{:keys [override-margins size icon-container-size icon-background-color icon-container-rounded?
+           icon-size]}]
+  (icon-style {:margin-left             (or (get override-margins :left) 4)
+               :margin-right            (or (get override-margins :right)
+                                            (if (= size 40) 12 8))
+               :icon-container-size     icon-container-size
+               :icon-background-color   icon-background-color
+               :icon-container-rounded? icon-container-rounded?
+               :icon-size               icon-size}))
+
+(defn shape-style-container
+  [size border-radius]
+  {:height        size
+   :border-radius (if border-radius
+                    border-radius
+                    (case size
+                      56 12
+                      40 12
+                      32 10
+                      8))})
+
+(defn style-container
+  [{:keys [size disabled border-radius background-color border-color icon-only? icon-above width
+           icon-left icon-right]}]
+  (merge {:height             size
+          :align-items        :center
+          :justify-content    :center
+          :flex-direction     (if icon-above :column :row)
+          :padding-horizontal (when-not (or icon-only? icon-left icon-right)
+                                (case size
+                                  56 16
+                                  40 16
+                                  32 12
+                                  8))
+          :padding-left       (when-not (or icon-only? icon-left)
+                                (case size
+                                  56 16
+                                  40 16
+                                  32 12
+                                  8))
+          :padding-right      (when-not (or icon-only? icon-right)
+                                (case size
+                                  56 16
+                                  40 16
+                                  32 12
+                                  8))
+          :padding-top        (when-not (or icon-only? icon-left icon-right)
+                                (case size
+                                  56 0
+                                  40 9
+                                  32 5
+                                  3))
+          :padding-bottom     (when-not (or icon-only? icon-left icon-right)
+                                (case size
+                                  56 0
+                                  40 9
+                                  32 5
+                                  4))
+          :overflow           :hidden
+          :background-color   background-color}
+         (shape-style-container size border-radius)
+         (when width
+           {:width width})
+         (when icon-only?
+           {:width size})
+         (when border-color
+           {:border-color border-color
+            :border-width 1})
+         (when disabled
+           {:opacity 0.3})))
@@ -0,0 +1,139 @@
+(ns quo2.components.buttons.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.buttons.button.style :as style]
+            [quo2.components.buttons.button.properties :as button-properties]
+            [quo2.foundations.customization-colors :as customization-colors]))
+
+(defn- button-internal
+  "with label
+   [button opts \"label\"]
+   opts
+   {on-press callback
+    on-long-press callback
+    disabled boolean
+    :type   :primary/:positive:grey/:dark-grey/:outline/:ghost/
+            :danger/:black  (TODO remove :photo-bg/:blur-bg/:blur-bg-outline/:shell/:community)
+    background :photo/:blur or nil
+    :size   40 [default] /32/24/56
+    :icon   true/false
+    :above  :icon-keyword
+    :before :icon-keyword
+    :after  :icon-keyword}
+    :customization-color keyword or hexstring 
+    :theme :light/:dark
+   only icon
+   [button {:icon true} :i/close-circle]"
+  [_ _]
+  (let [pressed? (reagent/atom false)]
+    (fn
+      [{:keys [on-press on-long-press disabled type background size before after above
+               width customization-color theme override-background-color
+               accessibility-label icon style inner-style]
+        :or   {type                :primary
+               size                40
+               customization-color (cond (= type :primary)  :blue
+                                         (= type :positive) :success
+                                         (= type :danger)   :danger
+                                         :else              nil)}}
+       children]
+      (let [icon-only? icon ;; TODO Update external api to icon-only? -
+                            ;; https://github.com/status-im/status-mobile/issues/16535
+            container-style style ;; TODO Update external api to container-style and remove prop width
+            icon-left before ;; TODO Update external api to icon-left
+            icon-right after ;; TODO Update external api to icon-right
+            icon-above above ;; TODO Update external api to icon-above
+            {:keys [icon-color icon-secondary-color background-color label-color border-color blur-type
+                    blur-overlay-color icon-background-color border-radius]}
+            (button-properties/get-values {:customization-color customization-color
+                                           :background          background
+                                           :type                type
+                                           :theme               theme
+                                           :pressed?            @pressed?
+                                           :icon-only?          icon-only?})
+            icon-size (when (= 24 size) 12)
+            icon-secondary-color (or icon-secondary-color icon-color)]
+        [rn/touchable-without-feedback
+         {:disabled            disabled
+          :accessibility-label accessibility-label
+          :on-press-in         #(reset! pressed? true)
+          :on-press-out        #(reset! pressed? nil)
+          :on-press            on-press
+          :on-long-press       on-long-press}
+         [rn/view
+          {:style (merge
+                   (style/shape-style-container size border-radius)
+                   {:width width}
+                   container-style)}
+          [rn/view
+           {:style (merge
+                    (style/style-container {:size size
+                                            :disabled disabled
+                                            :border-radius border-radius
+                                            :background-color
+                                            (or override-background-color background-color)
+                                            :border-color border-color
+                                            :icon-only? icon-only?
+                                            :icon-above icon-above
+                                            :width width
+                                            :icon-left icon-left
+                                            :icon-right icon-right})
+                    inner-style)}
+           (when customization-color
+             [customization-colors/overlay
+              {:customization-color customization-color
+               :theme               theme
+               :pressed?            @pressed?}])
+           (when (= background :photo)
+             [blur/view
+              {:blur-radius   20
+               :blur-type     blur-type
+               :overlay-color blur-overlay-color
+               :style         style/blur-view}])
+           (when icon-above
+             [rn/view
+              [quo2.icons/icon icon-above
+               {:container-style {:margin-bottom 2}
+                :color           icon-secondary-color
+                :size            icon-size}]])
+           (when icon-left
+             [rn/view
+              {:style (style/icon-left-icon-style
+                       {:size                  size
+                        :icon-background-color icon-background-color
+                        :icon-size             icon-size})}
+              [quo2.icons/icon icon-left
+               {:color icon-secondary-color
+                :size  icon-size}]])
+           [rn/view
+            (cond
+              icon-only?
+              [quo2.icons/icon children
+               {:color icon-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 icon-right
+             [rn/view
+              {:style (style/icon-right-icon-style
+                       {:size                  size
+                        :icon-background-color icon-background-color
+                        :icon-size             icon-size})}
+              [quo2.icons/icon icon-right
+               {:color icon-secondary-color
+                :size  icon-size}]])]]]))))
+
+(def button (theme/with-theme button-internal))
@@ -62,7 +62,7 @@
    :customization-color customize jump-to and mention button color}"
  [_]
  (let [pressed? (reagent/atom false)]
-    (fn [{:keys [type label on-press count customization-color style]}]
+    (fn [{:keys [type label on-press customization-color style] :as args}]
      [rn/touchable-opacity
       {:on-press-in         #(reset! pressed? true)
        :on-press-out        #(reset! pressed? false)
@@ -102,6 +102,6 @@
           (case type
             :jump-to                                       label
             :search-with-label                             label
-             (:mention :notification-down :notification-up) (str count))])
+             (:mention :notification-down :notification-up) (str (:count args)))])
        (when (#{:jump-to :notification-down :notification-up} type)
          [icon-view type])]])))
@@ -2,9 +2,10 @@
  (:require [react-native.core :as rn]
            [quo2.components.buttons.predictive-keyboard.style :as style]
            [quo2.components.info.info-message :as info-message]
+            [quo2.theme :as theme]
            [react-native.linear-gradient :as linear-gradient]
            [quo2.foundations.colors :as colors]
-            [quo2.components.buttons.button :as button]))
+            [quo2.components.buttons.button.view :as button]))

 (def ^:private gradients
  {:light [(colors/alpha colors/neutral-40 0.05) (colors/alpha colors/neutral-40 0)]
@@ -12,32 +13,33 @@
   :blur  [colors/white-opa-5 colors/white-opa-0]})

 (defn- word-component
-  [word _ _ {:keys [blur? on-press]}]
+  [word _ _ {:keys [on-press]}]
  [button/button
-   (merge {:type     :blur-bg
-           :size     32
-           :on-press #(on-press word)}
-          (when blur? {:override-theme :dark}))
+   {:type     :blur-bg
+    :size     32
+    :on-press #(on-press word)}
+
   word])

 (defn- separator
  []
  [rn/view {:style {:width 8}}])

-(defn view
+(defn- view-internal
  "Options
   - `type` `:words`/`:error`/`:info`/`:empty`.
   - `blur?` Boolean to enable blur background support.
   - `text`  error/info text.
   - `words` List of words to display in the keyboard.
-   - `on-press` Callback called when a word is pressed `(fn [word])`."
-  [{:keys [type blur? text words on-press]}]
+   - `on-press` Callback called when a word is pressed `(fn [word])`
+   - `theme` :light or :dark, received from with-theme HOC."
+  [{:keys [type blur? text words on-press theme]}]
  [linear-gradient/linear-gradient
   {:style               {:flex-direction :row}
    :accessibility-label :predictive-keyboard
    :colors              (if blur?
                           (gradients :blur)
-                           (colors/theme-colors (gradients :light) (gradients :dark)))}
+                           (colors/theme-colors (gradients :light) (gradients :dark) theme))}
   [rn/view {:style (style/wrapper type)}
    (case type
      :words
@@ -46,8 +48,7 @@
        :data                              words
        :content-container-style           style/word-list
        :render-fn                         word-component
-        :render-data                       {:blur?    blur?
-                                            :on-press on-press}
+        :render-data                       {:on-press on-press}
        :shows-horizontal-scroll-indicator false
        :separator                         [separator]
        :horizontal                        true
@@ -70,3 +71,5 @@
                 :icon-color colors/white-opa-70}))
       text]
      nil)]])
+
+(def view (theme/with-theme view-internal))
@@ -1,42 +0,0 @@
-(ns quo2.components.buttons.style)
-
-(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)})))
@@ -1,7 +1,7 @@
 (ns quo2.components.code.snippet
  (:require [cljs-bean.core :as bean]
            [clojure.string :as string]
-            [quo2.components.buttons.button :as button]
+            [quo2.components.buttons.button.view :as button]
            [quo2.components.code.code.style :as style]
            [quo2.components.markdown.text :as text]
            [react-native.core :as rn]
@@ -1,4 +1,4 @@
-(ns quo2.components.separator
+(ns quo2.components.common.separator.view
  (:require [quo2.foundations.colors :as quo2.colors]
            [react-native.core :as rn]))

@@ -3,6 +3,7 @@
            [quo2.components.community.style :as style]
            [quo2.components.counter.counter :as counter]
            [quo2.components.icon :as icons]
+            [quo2.theme :as theme]
            [quo2.components.markdown.text :as text]
            [quo2.foundations.colors :as colors]
            [quo2.components.community.icon :as community-icon]
@@ -21,8 +22,8 @@
      :resize-mode     :center
      :size            20
      :color           (colors/theme-colors
-                        colors/neutral-40
-                        colors/neutral-50)}]
+                        colors/neutral-50
+                        colors/neutral-40)}]
    (pos? unread-mentions-count)
    [counter/counter {:type :default} unread-mentions-count]

@@ -34,7 +35,7 @@
   {:keys [name
           locked?
           status
-           muted?
+           muted
           unread-messages?
           unread-mentions-count
           community-icon
@@ -59,7 +60,7 @@
         :accessibility-label :community-name-text
         :number-of-lines     1
         :ellipsize-mode      :tail
-         :style               {:color (when muted?
+         :style               {:color (when muted
                                        (colors/theme-colors
                                         colors/neutral-40
                                         colors/neutral-60))}}
@@ -71,14 +72,15 @@
         {:locked? locked?
          :tokens  tokens}]
        [notification-view
-         {:muted?                muted?
+         {:muted?                muted
          :unread-mentions-count unread-mentions-count
          :unread-messages?      unread-messages?}])]]]])

 (defn communities-membership-list-item
  [props
+   bottom-sheet?
   {:keys [name
-           muted?
+           muted
           unviewed-messages-count
           unviewed-mentions-count
           status
@@ -105,17 +107,22 @@
       :number-of-lines     1
       :ellipsize-mode      :tail
       :weight              :semi-bold
-       :size                :paragraph-1}
+       :size                :paragraph-1
+       :style               (when muted
+                              {:color (if (theme/dark?)
+                                        colors/neutral-60
+                                        colors/neutral-40)})}
      name]]

    [rn/view
     {:justify-content :center
-      :margin-right    16}
+      :margin-right    (when bottom-sheet?
+                         16)}
     (if (= status :gated)
       [community-view/permission-tag-container
        {:locked? locked?
         :tokens  tokens}]
       [notification-view
-        {:muted?                muted?
+        {:muted?                muted
         :unread-mentions-count unviewed-mentions-count
         :unread-messages?      (pos? unviewed-messages-count)}])]]])
@@ -5,13 +5,17 @@
            [quo2.components.tags.permission-tag :as permission]
            [quo2.components.tags.tag :as tag]
            [quo2.foundations.colors :as colors]
-            [quo.gesture-handler :as gesture-handler] ;;TODO move to quo2
-            [react-native.core :as rn]))
+            [quo2.theme :as theme]
+            [react-native.core :as rn]
+            [react-native.gesture :as gesture]
+            utils.money))

 (defn community-stats
-  [{:keys [icon members-count icon-color]}]
-  [rn/view (style/stats-count-container)
-   [rn/view {:margin-right 4}
+  [{:keys [icon members-count icon-color accessibility-label]}]
+  [rn/view
+   {:accessibility-label accessibility-label
+    :style               (style/stats-count-container)}
+   [rn/view {:margin-right 2}
    [icons/icon icon
     {:container-style {:align-items     :center
                        :justify-content :center}
@@ -20,29 +24,32 @@
      :color           icon-color}]]
   [text/text
    {:weight :regular
-     :size   :paragraph-1}
+     :size   :paragraph-2}
    members-count]])

 (defn community-stats-column
-  [{:keys [type]}]
-  (let [icon-color (colors/theme-colors colors/neutral-50 colors/neutral-40)]
+  [{:keys [type theme blur? members-count active-count]}]
+  (let [icon-color (if (and (= :dark theme) blur?)
+                     colors/white-opa-40
+                     (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))]
    [rn/view
     (if (= type :card-view)
       (style/card-stats-container)
       (style/list-stats-container))
     [community-stats
-      {:icon          :i/group
-       :members-count "629.2K" ;;TODO here should be formatted value, use money/format-members from
-                               ;;outside this component
-       :icon-color    icon-color}]
+      {:accessibility-label :stats-members-count
+       :icon                :i/group
+       :members-count       (utils.money/format-amount members-count)
+       :icon-color          icon-color}]
     [community-stats
-      {:icon          :i/lightning
-       :members-count "112.1K"
-       :icon-color    icon-color}]]))
+      {:accessibility-label :stats-active-count
+       :icon                :i/active-members
+       :members-count       (utils.money/format-amount active-count)
+       :icon-color          icon-color}]]))

 (defn community-tags
  [{:keys [tags container-style last-item-style]}]
-  [gesture-handler/scroll-view
+  [gesture/scroll-view
   {:shows-horizontal-scroll-indicator false
    :horizontal                        true
    :style                             container-style}
@@ -84,13 +91,16 @@
       :style               {:margin-top (if (= size :large) 8 2)}}
      description])])

-(defn permission-tag-container
-  [{:keys [locked? tokens on-press]}]
+(defn- permission-tag-container-internal
+  [{:keys [locked? blur? tokens on-press theme]}]
  [permission/tag
-   {:background-color (colors/theme-colors
-                       colors/neutral-10
-                       colors/neutral-80)
-    :locked?          locked?
-    :tokens           tokens
-    :size             24
-    :on-press         on-press}])
+   {:accessibility-label :permission-tag
+    :background-color    (if (and (= :dark theme) blur?)
+                           colors/white-opa-10
+                           (colors/theme-colors colors/neutral-10 colors/neutral-80 theme))
+    :locked?             locked?
+    :tokens              tokens
+    :size                24
+    :on-press            on-press}])
+
+(def permission-tag-container (theme/with-theme permission-tag-container-internal))
@@ -12,11 +12,11 @@
   {:style (style/token-row padding?)}
   (doall
    (map-indexed (fn [token-index token]
-                   (let [{:keys [img-src symbol amount sufficient? purchasable? loading?]} token]
+                   (let [{:keys [img-src amount sufficient? purchasable? loading?]} token]
                     ^{:key token-index}
                     [rn/view {:style style/token-tag-spacing}
                      [token-tag/token-tag
-                       {:symbol      symbol
+                       {:symbol      (:symbol token)
                        :value       amount
                        :size        24
                        :sufficient? sufficient?
@@ -17,8 +17,8 @@
           :outline   colors/neutral-70}})

 (defn get-color
-  [key]
-  (get-in themes [(theme/get-theme) key]))
+  [k]
+  (get-in themes [(theme/get-theme) k]))

 (defn counter
  [{:keys [type override-text-color override-bg-color style accessibility-label max-value]
@@ -9,33 +9,33 @@
   :height          20})

 (defn neutral-border-color
-  [in-blur-view? override-theme]
+  [in-blur-view? theme]
  (if in-blur-view?
-    (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-10 override-theme)
-    (colors/theme-colors colors/neutral-20 colors/neutral-80 override-theme)))
+    (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-10 theme)
+    (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)))

-(def active-background-color (colors/custom-color :blue 50 10))
-(def complete-background-color (colors/custom-color :blue 50))
+(defn active-background-color [customization-color] (colors/custom-color customization-color 50 10))
+(defn complete-background-color [customization-color] (colors/custom-color customization-color 50))

 (defn container
-  [size type in-blur-view? override-theme]
+  [{:keys [size type in-blur-view? theme customization-color]}]
  (cond-> container-base
    (#{1 2} size) (assoc :width 20)
    (= size 3) (assoc :width 28)

    (= type :neutral)
    (assoc :border-width 1
-           :border-color (neutral-border-color in-blur-view? override-theme))
+           :border-color (neutral-border-color in-blur-view? theme))

    (= type :active)
-    (assoc :background-color active-background-color)
+    (assoc :background-color (active-background-color customization-color))

    (= type :complete)
-    (assoc :background-color complete-background-color)))
+    (assoc :background-color (complete-background-color customization-color))))

 (defn text-color
  ([type] (text-color type nil))
-  ([type override-theme]
+  ([type theme]
   (case type
-     (:neutral :active) (colors/theme-colors colors/neutral-100-opa-100 colors/white override-theme)
+     (:neutral :active) (colors/theme-colors colors/neutral-100-opa-100 colors/white theme)
     :complete          colors/white)))
@@ -2,11 +2,12 @@
  (:require
    [quo2.components.counter.step.style :as style]
    [quo2.components.markdown.text :as text]
+    [quo2.theme :as theme]
    [react-native.core :as rn]
    [utils.number]))

-(defn step
-  [{:keys [type accessibility-label override-theme in-blur-view?]} value]
+(defn step-internal
+  [{:keys [type accessibility-label theme in-blur-view? customization-color]} value]
  (let [type  (or type :neutral)
        value (utils.number/parse-int value)
        label (str value)
@@ -14,8 +15,14 @@
    [rn/view
     {:accessible          true
      :accessibility-label (or accessibility-label :step-counter)
-      :style               (style/container size type in-blur-view? override-theme)}
+      :style               (style/container {:size                size
+                                             :type                type
+                                             :in-blur-view?       in-blur-view?
+                                             :theme               theme
+                                             :customization-color customization-color})}
     [text/text
      {:weight :medium
       :size   :label
-       :style  {:color (style/text-color type override-theme)}} label]]))
+       :style  {:color (style/text-color type theme)}} label]]))
+
+(def step (theme/with-theme step-internal))
@@ -1,6 +1,6 @@
 (ns quo2.components.dividers.date
  (:require [quo2.components.markdown.text :as text]
-            [quo2.components.separator :as separator]
+            [quo2.components.common.separator.view :as separator]
            [quo2.foundations.colors :as colors]
            [react-native.core :as rn]))

@@ -1,8 +1,8 @@
 (ns quo2.components.dividers.divider-label
-  (:require [quo2.theme :as theme]
-            [quo2.components.icon :as icons]
+  (:require [quo2.components.icon :as icons]
            [quo2.components.markdown.text :as markdown.text]
            [quo2.foundations.colors :as colors]
+            [quo2.theme :as theme]
            [react-native.core :as rn]))

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

 (defn divider
-  []
+  [theme]
  {:border-top-width 1
-   :border-top-color (colors/theme-colors colors/neutral-10 colors/neutral-90)
+   :border-top-color (colors/theme-colors colors/neutral-10 colors/neutral-90 theme)
   :margin-top       8
   :margin-bottom    7
   :align-items      :center
@@ -45,6 +45,6 @@
   :width         20})

 (defn right-text
-  [override-theme]
-  {:color        (colors/theme-colors colors/neutral-50 colors/neutral-40 override-theme)
+  [theme]
+  {:color        (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
   :margin-right 12})
@@ -1,20 +1,21 @@
 (ns quo2.components.drawers.action-drawers.view
-  (:require [quo2.components.icon :as icon]
+  (:require [react-native.core :as rn]
+            [quo2.components.drawers.action-drawers.style :as style]
+            [quo2.components.icon :as icon]
            [quo2.components.markdown.text :as text]
            [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]
-            [quo2.components.drawers.action-drawers.style :as style]))
+            [quo2.theme :as quo.theme]))

 (defn- get-icon-color
-  [danger? override-theme]
+  [danger? theme]
  (if danger?
-    colors/danger-60
-    (colors/theme-colors colors/neutral-50 colors/neutral-40 override-theme)))
+    (colors/theme-colors colors/danger-50 colors/danger-60 theme)
+    (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)))

 (defn- divider
-  []
+  [theme]
  [rn/view
-   {:style               (style/divider)
+   {:style               (style/divider theme)
    :accessible          true
    :accessibility-label :divider}])

@@ -24,7 +25,7 @@
    [rn/view (dissoc props :on-press) child]
    [rn/touchable-highlight props child]))

-(defn- action
+(defn- action-internal
  [{:keys [icon
           label
           sub-label
@@ -34,65 +35,66 @@
           disabled?
           on-press
           add-divider?
-           override-theme
+           theme
           accessibility-label
-           icon-color]
-    :as   action-props}]
-  (when action-props
-    [:<> {:key label}
-     (when add-divider?
-       [divider])
-     [maybe-pressable disabled?
-      {:accessibility-label accessibility-label
-       :style               (style/container sub-label disabled?)
-       :underlay-color      (colors/theme-colors colors/neutral-5 colors/neutral-90 override-theme)
-       :on-press            on-press}
-      [rn/view
-       {:style (style/row-container sub-label)}
-       [rn/view
-        {:accessibility-label :left-icon-for-action
-         :accessible          true
-         :style               style/left-icon}
-        [icon/icon icon
-         {:color (or icon-color (get-icon-color danger? override-theme))
-          :size  20}]]
-       [rn/view
-        {:style style/text-container}
+           icon-color]}]
+  [:<>
+   (when add-divider?
+     [divider theme])
+   [maybe-pressable disabled?
+    {:accessibility-label accessibility-label
+     :style               (style/container sub-label disabled?)
+     :underlay-color      (colors/theme-colors colors/neutral-5 colors/neutral-90 theme)
+     :on-press            on-press}
+    [rn/view
+     {:style (style/row-container sub-label)}
+     [rn/view
+      {:accessibility-label :left-icon-for-action
+       :accessible          true
+       :style               style/left-icon}
+      [icon/icon icon
+       {:color (or icon-color (get-icon-color danger? theme))
+        :size  20}]]
+     [rn/view
+      {:style style/text-container}
+      [text/text
+       {:size   :paragraph-1
+        :weight :medium
+        :style  {:color
+                 (cond
+                   danger? (colors/theme-colors colors/danger-50 colors/danger-60 theme)
+                   :else   (colors/theme-colors colors/neutral-100 colors/white theme))}}
+       label]
+      (when sub-label
        [text/text
-         {:size   :paragraph-1
-          :weight :medium
-          :style  {:color
-                   (cond
-                     danger? (colors/theme-colors colors/danger-50 colors/danger-60 override-theme)
-                     :else   (colors/theme-colors colors/neutral-100 colors/white override-theme))}}
-         label]
-        (when sub-label
+         {:size  :paragraph-2
+          :style {:color
+                  (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
+         sub-label])]
+     (when (or right-text right-icon)
+       [rn/view {:style style/right-side-container}
+        (when right-text
          [text/text
-           {:size  :paragraph-2
-            :style {:color
-                    (colors/theme-colors colors/neutral-50 colors/neutral-40 override-theme)}}
-           sub-label])]
-       (when (or right-text right-icon)
-         [rn/view {:style style/right-side-container}
-          (when right-text
-            [text/text
-             {:accessibility-label :right-text-for-action
-              :size                :paragraph-1
-              :style               (style/right-text override-theme)}
-             right-text])
-          (when right-icon
-            [rn/view
-             {:style               style/right-icon
-              :accessible          true
-              :accessibility-label :right-icon-for-action}
-             [icon/icon right-icon
-              {:color (get-icon-color danger? override-theme)
-               :size  20}]])])]]]))
+           {:accessibility-label :right-text-for-action
+            :size                :paragraph-1
+            :style               (style/right-text theme)}
+           right-text])
+        (when right-icon
+          [rn/view
+           {:style               style/right-icon
+            :accessible          true
+            :accessibility-label :right-icon-for-action}
+           [icon/icon right-icon
+            {:color (get-icon-color danger? theme)
+             :size  20}]])])]]])
+
+(def ^:private action (quo.theme/with-theme action-internal))

 (defn action-drawer
  [sections]
  [:<>
   (doall
    (for [actions sections]
-      (doall
-       (map action actions))))])
+      (let [filtered-actions (filter some? actions)]
+        (doall
+         (map #(with-meta [action %] {:key (:label %)}) filtered-actions)))))])
@@ -1,4 +1,10 @@
-(ns quo2.components.drawers.documentation-drawers.style)
+(ns quo2.components.drawers.documentation-drawers.style
+  (:require [quo2.foundations.colors :as colors]
+            [react-native.safe-area :as safe-area]))
+
+(def outer-container
+  ;; Margin negative to fill the bottom-sheet container where this component is used
+  {:margin-bottom (- (+ (safe-area/get-bottom) 8))})

 (def container
  {:align-items        :flex-start
@@ -6,4 +12,10 @@

 (def content
  {:margin-top    8
-   :margin-bottom 16})
+   :margin-bottom (+ (safe-area/get-bottom) 8)})
+
+(defn title
+  [shell?]
+  {:color (colors/theme-colors colors/neutral-100
+                               colors/white
+                               (when shell? :dark))})
@@ -1,10 +1,9 @@
 (ns quo2.components.drawers.documentation-drawers.view
-  (:require [quo2.components.markdown.text :as text]
+  (:require [quo2.components.buttons.button.view :as button]
            [quo2.components.drawers.documentation-drawers.style :as style]
+            [quo2.components.markdown.text :as text]
            [react-native.core :as rn]
-            [react-native.gesture :as gesture]
-            [quo2.components.buttons.button :as button]
-            [quo2.foundations.colors :as colors]))
+            [react-native.gesture :as gesture]))

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

 (h/describe "drawer-buttons"
+  (h/before-each
+   (fn []
+     (h/use-fake-timers)))
+
+  (h/after-each
+   (fn []
+     (h/clear-all-timers)
+     (h/use-real-timers)))
+
  (h/test "the top heading and subheading render"
    (h/render [drawer-buttons/view
               {:top-card    {:heading :top-heading}
@@ -29,15 +39,16 @@

  (h/test "it clicks the top card"
    (let [event (h/mock-fn)]
-      (h/render [drawer-buttons/view
-                 {:top-card    {:on-press event
-                                :heading  :top-heading}
-                  :bottom-card {:heading :bottom-heading}}
-                 :top-sub-heading
-                 :bottom-sub-heading])
-      (h/fire-event :press (h/get-by-text "top-heading"))
-      (-> (js/expect event)
-          (.toHaveBeenCalled))))
+      (with-redefs [safe-area/get-top (fn [] 10)]
+        (h/render [drawer-buttons/view
+                   {:top-card    {:on-press event
+                                  :heading  :top-heading}
+                    :bottom-card {:heading :bottom-heading}}
+                   :top-sub-heading
+                   :bottom-sub-heading])
+        (h/fire-event :press (h/get-by-text "top-heading"))
+        (-> (js/expect event)
+            (.toHaveBeenCalled)))))

  (h/test "it clicks the bottom card"
    (let [event (h/mock-fn)]
@@ -1,11 +1,20 @@
 (ns quo2.components.drawers.drawer-buttons.style
-  (:require [quo2.foundations.colors :as colors]))
+  (:require [quo2.foundations.colors :as colors]
+            [react-native.reanimated :as reanimated]))

-(def outer-container
-  {:height                  216
-   :border-top-left-radius  20
-   :border-top-right-radius 20
-   :overflow                :hidden})
+(defn outer-container
+  [height border-radius container-style]
+  (reanimated/apply-animations-to-style
+   {:height                  height
+    :border-top-left-radius  border-radius
+    :border-top-right-radius border-radius}
+   (assoc
+    container-style
+    :position :absolute
+    :left     0
+    :right    0
+    :bottom   0
+    :overflow :hidden)))

 (def top-card
  {:flex                    1
@@ -17,7 +26,6 @@

 (def bottom-card
  {:position                :absolute
-   :top                     80
   :left                    0
   :right                   0
   :bottom                  0
@@ -41,6 +49,20 @@
   :align-items     :center
   :border-color    colors/white-opa-5})

+(def blur-view-style
+  {:flex                    1
+   :border-top-left-radius  20
+   :border-top-right-radius 20})
+
+(def blur-content-style
+  {:flex             1
+   :background-color :transparent
+   :position         :absolute
+   :top              0
+   :left             0
+   :right            0
+   :bottom           0})
+
 (def bottom-text
  {:flex  1
   :color colors/white-70-blur})
@@ -51,4 +73,4 @@
 (defn heading-text
  [gap]
  {:color         colors/white
-   :margin-bottom gap})
+   :margin-bottom gap})
@@ -4,7 +4,12 @@
            [quo2.components.markdown.text :as text]
            [quo2.foundations.colors :as colors]
            [react-native.blur :as blur]
-            [quo2.components.drawers.drawer-buttons.style :as style]))
+            [quo2.components.drawers.drawer-buttons.style :as style]
+            [react-native.reanimated :as reanimated]
+            [react-native.platform :as platform]
+            [react-native.safe-area :as safe-area]))
+
+(def default-height 216)

 (defn render-bottom
  [children]
@@ -29,35 +34,74 @@
      children]]
    [render-bottom children]))

-(defn render-children-top
-  [children]
-  (if (label? children)
-    [text/text
-     {:size   :paragraph-2
-      :style  style/top-text
-      :weight :semi-bold}
-     children]
-    children))
+(defn- f-render-children-top
+  [children top-children-opacity]
+  (let [scale        (reanimated/interpolate top-children-opacity [1 0] [1 1.1])
+        padding-left (reanimated/interpolate scale [1 1.1] [0 14])]
+    [reanimated/view
+     {:style (reanimated/apply-animations-to-style
+              {:opacity   top-children-opacity
+               :transform [{:scale scale}
+                           {:translate-x padding-left}]}
+              {})}
+     (if (label? children)
+       [text/text
+        {:size   :paragraph-2
+         :style  style/top-text
+         :weight :semi-bold}
+        children]
+       children)]))

-(defn card
-  [{:keys [on-press style heading gap accessibility-label top?]} children]
+(defn- f-card
+  [{:keys [on-press default-on-press style heading gap accessibility-label top? top-title-opacity
+           top-children-opacity
+           animated-heading]
+    :or   {top-title-opacity (reanimated/use-shared-value 1)}}
+   children]
  [rn/touchable-highlight
   {:accessibility-label accessibility-label
-    :on-press            on-press
+    :on-press            (fn []
+                           (when on-press
+                             (on-press))
+                           (when default-on-press
+                             (default-on-press)))
    :border-radius       20
    :style               style
    :underlay-color      (:background-color style)}
   [rn/view
-    [text/text
-     {:size   :heading-1
-      :style  (style/heading-text gap)
-      :weight :semi-bold}
-     heading]
+    [reanimated/view
+     {:style (reanimated/apply-animations-to-style
+              {:opacity top-title-opacity}
+              {})}
+     [text/text
+      {:size   :heading-1
+       :style  (style/heading-text gap)
+       :weight :semi-bold}
+      heading]]
+    (when animated-heading
+      (let [animated-heading-opacity (reanimated/interpolate top-children-opacity [1 0] [0 1])]
+        [reanimated/view
+         {:style (reanimated/apply-animations-to-style
+                  {:opacity top-title-opacity}
+                  {:position :absolute})}
+         [reanimated/view
+          {:style (reanimated/apply-animations-to-style
+                   {:opacity animated-heading-opacity}
+                   {})}
+          [text/text
+           {:size   :heading-1
+            :style  (style/heading-text gap)
+            :weight :semi-bold}
+           animated-heading]]]))
    (if top?
-      [render-children-top children]
+      [:f> f-render-children-top children top-children-opacity]
      [render-children-bottom children])]])

-(defn view
+(defn card
+  [props children]
+  [:f> f-card props children])
+
+(defn f-view
  "[view opts]
   opts
   {:container-style  style-object
@@ -70,29 +114,101 @@
    child-1           string, keyword or hiccup
    child-2           string, keyword or hiccup
   "
-  [{:keys [container-style top-card bottom-card]} child-1 child-2]
-  [rn/view
-   {:style (merge container-style style/outer-container)}
-   [blur/view
-    {:blur-type   :dark
-     :blur-amount 10
-     :style       {:flex                    1
-                   :border-top-left-radius  20
-                   :border-top-right-radius 20}}]
-   [rn/view
-    {:style {:flex             1
-             :background-color :transparent
-             :position         :absolute
-             :top              0
-             :left             0
-             :right            0
-             :bottom           0}}
-    [card
-     (merge {:gap   4
-             :top?  true
-             :style style/top-card}
-            top-card) child-1]
-    [card
-     (merge {:style style/bottom-card
-             :gap   20}
-            bottom-card) child-2]]])
+  [{:keys [container-style top-card bottom-card on-init animations-duration animations-delay]}
+   child-1
+   child-2]
+  (let [max-height           (+ (:height (rn/get-window)) (if platform/android? (safe-area/get-top) 0))
+        height               (reanimated/use-shared-value default-height)
+        top-padding          (reanimated/use-shared-value 12)
+        border-radius        (reanimated/use-shared-value 20)
+        bottom-view-top      (reanimated/use-shared-value 80)
+        top-title-opacity    (reanimated/use-shared-value 1)
+        top-children-opacity (reanimated/use-shared-value 1)
+        animations-delay     (/ animations-delay 1.4)
+        start-top-animation  (fn []
+                               (reanimated/animate-shared-value-with-delay bottom-view-top
+                                                                           (:height (rn/get-screen))
+                                                                           animations-duration
+                                                                           :easing4
+                                                                           animations-delay)
+                               (reanimated/animate-shared-value-with-delay
+                                height
+                                max-height
+                                animations-duration
+                                :easing4
+                                animations-delay)
+                               (reanimated/animate-shared-value-with-delay
+                                top-padding
+                                (+ 68 (safe-area/get-top))
+                                animations-duration
+                                :easing4
+                                animations-delay)
+                               (reanimated/animate-shared-value-with-delay
+                                top-children-opacity
+                                0
+                                animations-duration
+                                :easing4 animations-delay)
+                               (reanimated/animate-shared-value-with-delay
+                                top-title-opacity
+                                0
+                                0
+                                :linear
+                                (+ animations-delay animations-duration 500)))
+        reset-top-animation  (fn []
+                               (reanimated/set-shared-value top-title-opacity 1)
+                               (reanimated/animate-shared-value-with-delay bottom-view-top
+                                                                           80
+                                                                           animations-duration
+                                                                           :easing4
+                                                                           50)
+                               (reanimated/animate-shared-value-with-timing
+                                height
+                                default-height
+                                animations-duration
+                                :easing4)
+                               (reanimated/animate-shared-value-with-timing
+                                top-padding
+                                12
+                                animations-duration
+                                :easing4)
+                               (reanimated/animate-shared-value-with-timing
+                                top-children-opacity
+                                1
+                                animations-duration
+                                :easing4))]
+    (rn/use-effect (fn []
+                     (when on-init
+                       (on-init reset-top-animation))))
+    [reanimated/view {:style (style/outer-container height border-radius container-style)}
+     [blur/view
+      {:blur-type   :dark
+       :blur-amount 10
+       :style       style/blur-view-style}
+      [rn/view
+       {:style style/blur-content-style}
+       [reanimated/view
+        {:style (reanimated/apply-animations-to-style
+                 {:padding-top top-padding}
+                 style/top-card)}
+        [card
+         (merge {:gap                  4
+                 :top?                 true
+                 :style                {:flex 1}
+                 :top-children-opacity top-children-opacity
+                 :top-title-opacity    top-title-opacity
+                 :default-on-press     start-top-animation}
+                top-card)
+         child-1]]
+       [reanimated/view
+        {:style (reanimated/apply-animations-to-style
+                 {:top bottom-view-top}
+                 style/bottom-card)}
+        [card
+         (merge {:style {:flex 1}
+                 :gap   10}
+                bottom-card)
+         child-2]]]]]))
+
+(defn view
+  [props child-1 child-2]
+  [:f> f-view props child-1 child-2])
@@ -1,10 +1,12 @@
 (ns quo2.components.dropdowns.dropdown
-  (:require [quo2.components.buttons.button :as button]))
+  (:require [quo2.components.dropdowns.old-button-view :as old-button]))

 (defn dropdown
  [_ _]
  (fn [{:keys [on-change selected] :as opts} children]
-    [button/button
+    ;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)
@@ -1,12 +1,46 @@
-(ns quo2.components.buttons.button
-  (:require [quo2.components.icon :as quo2.icons]
-            [quo2.components.markdown.text :as text]
-            [quo2.foundations.colors :as colors]
-            [quo2.theme :as theme]
-            [react-native.core :as rn]
-            [react-native.blur :as blur]
-            [reagent.core :as reagent]
-            [quo2.components.buttons.style :as style]))
+(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]
@@ -179,7 +213,7 @@
                      24 8))})

 (defn style-container
-  [type size disabled background-color border-color icon above width before after blur-active?]
+  [{:keys [type size disabled background-color border-color icon above width before after blur-active?]}]
  (merge {:height             size
          :align-items        :center
          :justify-content    :center
@@ -228,132 +262,3 @@
            :border-width 1})
         (when disabled
           {:opacity 0.3})))
-
-(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 (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
-                   (shape-style-container type icon size)
-                   {:width width}
-                   style)}
-          [rn/view
-           {:style (merge
-                    (style-container
-                     type
-                     size
-                     disabled
-                     (or override-background-color (get background-color state))
-                     (get border-color state)
-                     icon
-                     above
-                     width
-                     before
-                     after
-                     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))
@@ -0,0 +1,138 @@
+(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))
@@ -24,7 +24,3 @@
    {:color colors/white}))

 (def button-container {:margin-top 20})
-
-(defn upper-button-color
-  [customization-color]
-  (colors/custom-color-by-theme customization-color 50 60))
@@ -1,11 +1,12 @@
 (ns quo2.components.empty-state.empty-state.view
-  (:require [quo2.components.buttons.button :as button]
+  (:require [quo2.components.buttons.button.view :as button]
            [quo2.components.empty-state.empty-state.styles :as styles]
            [quo2.components.markdown.text :as text]
            [react-native.core :as rn]
-            [react-native.fast-image :as fast-image]))
+            [react-native.fast-image :as fast-image]
+            [quo2.theme :as theme]))

-(defn empty-state
+(defn- empty-state-internal
  [{:keys        [customization-color image title description blur?]
    upper-button :upper-button
    lower-button :lower-button
@@ -32,19 +33,18 @@
               upper-button-on-press :on-press} upper-button]
     [rn/view {:style styles/button-container}
      [button/button
-       (cond-> {:type                      :primary
-                :size                      32
-                :override-background-color (styles/upper-button-color customization-color)
-                :on-press                  upper-button-on-press}
-         blur? (assoc :override-theme :dark))
+       {:type                :primary
+        :size                32
+        :customization-color customization-color
+        :on-press            upper-button-on-press}
       upper-button-text]
-
      (when-let [{lower-button-text     :text
                  lower-button-on-press :on-press} lower-button]
        [button/button
-         (cond-> {:style    {:margin-top 12}
-                  :size     32
-                  :type     :blur-bg
-                  :on-press lower-button-on-press}
-           blur? (assoc :override-theme :dark))
+         {:style    {:margin-top 12}
+          :size     32
+          :type     :blur-bg
+          :on-press lower-button-on-press}
         lower-button-text])])])
+
+(def empty-state (theme/with-theme empty-state-internal))
--- a/Show More
+++ b/Show More