feat: Add script to import & sync external PRs

This commit adds a script which requires 2 arguments : - full PR link - branch url of the forked repository This script will then import the branch from the forked repository and create a new PR with it. This new PR will have title and descriptions copied over from the original PR. This helps in running CI pipelines for external contributors.
chore: remove uses of override theme prop (#16570 )
2023-07-28 15:23:30 +05:30 · 2023-07-28 02:36:54 -07:00 · 2023-07-27 16:56:12 +02:00 · 2023-07-27 13:14:09 +02:00 · 2023-07-26 14:08:57 -06:00 · 2023-07-26 18:19:10 +05:30
427 changed files with 8530 additions and 6179 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
@@ -1,8 +1,8 @@
 ---
-name: Bug Report
-about: Bug Report
+name: MVPBug Report
+about: MVPBug Report
 title: ''
-labels: bug
+labels: 'E:Mobile Bugfixes MVP'
 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)
+
@@ -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)
@@ -74,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 \
@@ -123,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}\" \
@@ -24,6 +24,7 @@

 [Patching](patching.md)

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

 ## Testing

@@ -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. 
@@ -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);
@@ -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",
@@ -0,0 +1,55 @@
+#!/bin/bash
+
+if [ -z "$1" ]; then
+  echo "Please provide the full branch URL as an argument."
+  exit 1
+fi
+
+if [ -z "$2" ]; then
+    echo "Please provide the full pull request URL as second argument."
+    exit 1
+fi
+
+# Extract PR number from the URL
+PR_URL="$2"
+PR_NUMBER=$(echo "$PR_URL" | awk -F '/' '{print $NF}')
+
+# Fetch PR Info
+PR_TITLE=$(gh pr view "$PR_NUMBER" --json title -q '.title')
+PR_DESCRIPTION=$(gh pr view "$PR_NUMBER" --json body -q '.body')
+BRANCH_NAME=$(gh pr view "$PR_NUMBER" --json headRefName -q '.headRefName')
+
+# Extracting the repo URL and branch name
+FULL_URL="$1"
+REPO_URL=$(echo "$FULL_URL" | awk -F "/tree/" '{print $1}')
+REPO_NAME=$(basename "$REPO_URL")
+NEW_REMOTE_URL="https://github.com/status-im/status-mobile"
+
+# Clone the repo if not already cloned
+if [ ! -d "$REPO_NAME" ]; then
+    git clone "$REPO_URL"
+    cd "$REPO_NAME" || exit
+    gh repo set-default "$REPO_URL"
+else
+    cd "$REPO_NAME" || exit
+    gh repo set-default "$REPO_URL"
+    git fetch
+fi
+
+# Check if branch already exists
+BRANCH_EXISTS=$(git show-ref refs/heads/"$BRANCH_NAME" 2>/dev/null)
+
+if [ -z "$BRANCH_EXISTS" ]; then
+    # New Import
+    git checkout -b "$BRANCH_NAME" "origin/$BRANCH_NAME"
+    git remote add source "$REPO_URL"
+    git remote set-url origin $NEW_REMOTE_URL
+    git push -u origin "$BRANCH_NAME"
+    gh pr create --base develop --head "$BRANCH_NAME" --title "[IMPORTED] $PR_TITLE" --body "$PR_DESCRIPTION"
+else
+    # Sync Existing Import
+    git checkout "$BRANCH_NAME"
+    git fetch source "$BRANCH_NAME"
+    git rebase source/"$BRANCH_NAME" # Rebase instead of merge
+    git push origin "$BRANCH_NAME" # Push updates to your imported branch
+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
@@ -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])]])))
@@ -5,7 +5,7 @@
            [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)]
@@ -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]
@@ -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]))

@@ -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)))))])
@@ -15,7 +15,7 @@
   :margin-bottom (+ (safe-area/get-bottom) 8)})

 (defn title
-  [shell?]
+  [theme]
  {:color (colors/theme-colors colors/neutral-100
                               colors/white
-                               (when shell? :dark))})
+                               theme)})
@@ -1,11 +1,12 @@
 (ns quo2.components.drawers.documentation-drawers.view
-  (:require [quo2.components.buttons.button :as button]
+  (: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]))
+            [react-native.gesture :as gesture]
+            [quo2.theme :as quo.theme]))

-(defn view
+(defn- view-internal
  "Options
   - `title` Title text
   - `show-button?` Show button
@@ -15,7 +16,7 @@
   - `shell?` use shell theme
   `content` Content of the drawer
   "
-  [{:keys [title show-button? on-press-button button-label button-icon shell?]} content]
+  [{:keys [title show-button? on-press-button button-label button-icon theme shell?]} content]
  [gesture/scroll-view
   {:style                             style/outer-container
    :always-bounce-vertical            false
@@ -24,18 +25,18 @@
    [text/text
     {:size                :heading-2
      :accessibility-label :documentation-drawer-title
-      :style               (style/title shell?)
+      :style               (style/title theme)
      :weight              :semi-bold}
     title]
    [rn/view {:style style/content :accessibility-label :documentation-drawer-content}
     content]
    (when show-button?
      [button/button
-       (cond-> {:size                24
-                :type                (if shell? :blur-bg-outline :outline)
-                :on-press            on-press-button
-                :accessibility-label :documentation-drawer-button
-                :after               button-icon}
-         shell? (assoc :override-theme :dark))
+       {:size                24
+        :type                (if shell? :blur-bg-outline :outline)
+        :on-press            on-press-button
+        :accessibility-label :documentation-drawer-button
+        :after               button-icon}
       button-label])]])

+(def view (quo.theme/with-theme view-internal))
@@ -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,5 +1,5 @@
 (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]
@@ -33,10 +33,10 @@
               upper-button-on-press :on-press} upper-button]
     [rn/view {:style styles/button-container}
      [button/button
-       {:type                      :primary
-        :size                      32
-        :override-background-color (styles/upper-button-color customization-color)
-        :on-press                  upper-button-on-press}
+       {: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]
@@ -1,6 +1,6 @@
 (ns quo2.components.header
  (:require [oops.core :refer [oget]]
-            [quo2.components.buttons.button :as button]
+            [quo2.components.buttons.button.view :as button]
            [quo2.components.markdown.text :as text]
            [quo2.foundations.colors :as colors]
            [react-native.core :as rn]
@@ -3,6 +3,7 @@
            [quo2.components.icons.icons :as icons]
            [quo2.components.icons.svg :as icons.svg]
            [quo2.foundations.colors :as colors]
+            [quo2.theme :as quo.theme]
            [react-native.core :as rn]))

 (defn- valid-color?
@@ -12,11 +13,10 @@
           (not (string/blank? color)))))

 (defn memo-icon-fn
-  [icon-name
-   {:keys [color color-2 no-color
-           container-style size accessibility-label]
+  [{:keys [color color-2 no-color
+           container-style size accessibility-label theme]
    :or   {accessibility-label :icon}}
-   _]
+   icon-name]
  (let [size (or size 20)]
    ^{:key icon-name}
    (if-let [svg-icon (icons.svg/get-icon icon-name size)]
@@ -34,15 +34,15 @@
               (when (not no-color)
                 {:tint-color (if (and (string? color) (not (string/blank? color)))
                                color
-                                (colors/theme-colors colors/neutral-100 colors/white))})
+                                (colors/theme-colors colors/neutral-100 colors/white theme))})

               container-style)
        :accessibility-label accessibility-label
        :source (icons/icon-source (str (name icon-name) size))}])))

-(def themed-icon (memoize memo-icon-fn))
+(def ^:private themed-icon (memoize (quo.theme/with-theme memo-icon-fn)))

 (defn icon
  ([icon-name] (icon icon-name nil))
  ([icon-name params]
-   (themed-icon icon-name params (colors/dark?))))
+   (themed-icon params icon-name)))
@@ -35,4 +35,5 @@
   (get-icons 16)
   (get-icons 20)
   (get-icons 24)
-   (get-icons 32)))
+   (get-icons 32)
+   (get-icons 48)))
@@ -14,8 +14,8 @@
           :error   colors/danger-60}})

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

 (defn info-message
  "[info-message opts \"message\"]
@@ -30,12 +30,12 @@
           :close-button colors/white}})

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

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

 (defn container
  [{:keys [theme type include-button?]}]
@@ -1,6 +1,6 @@
 (ns quo2.components.info.information-box.view
  (:require [clojure.string :as string]
-            [quo2.components.buttons.button :as button]
+            [quo2.components.buttons.button.view :as button]
            [quo2.components.icon :as icons]
            [quo2.components.info.information-box.style :as style]
            [quo2.components.markdown.text :as text]
@@ -3,62 +3,62 @@
            [quo2.foundations.colors :as colors]))

 (defn variants-colors
-  [blur? override-theme]
+  [blur? theme]
  (if blur?
-    {:label         (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 override-theme)
-     :icon          (colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70 override-theme)
-     :button-border (colors/theme-colors colors/neutral-80-opa-30 colors/white-opa-10 override-theme)
-     :password-icon (colors/theme-colors colors/neutral-100 colors/white-opa-70 override-theme)
-     :clear-icon    (colors/theme-colors colors/neutral-80-opa-30 colors/white-opa-10 override-theme)
+    {:label         (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 theme)
+     :icon          (colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70 theme)
+     :button-border (colors/theme-colors colors/neutral-80-opa-30 colors/white-opa-10 theme)
+     :password-icon (colors/theme-colors colors/neutral-100 colors/white-opa-70 theme)
+     :clear-icon    (colors/theme-colors colors/neutral-80-opa-30 colors/white-opa-10 theme)
     :cursor        (colors/theme-colors (colors/custom-color :blue 50)
                                         colors/white
-                                         override-theme)}
-    {:label         (colors/theme-colors colors/neutral-50 colors/neutral-40 override-theme)
-     :icon          (colors/theme-colors colors/neutral-50 colors/neutral-40 override-theme)
-     :button-border (colors/theme-colors colors/neutral-30 colors/neutral-70 override-theme)
-     :clear-icon    (colors/theme-colors colors/neutral-40 colors/neutral-60 override-theme)
-     :password-icon (colors/theme-colors colors/neutral-50 colors/white override-theme)
+                                         theme)}
+    {:label         (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
+     :icon          (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
+     :button-border (colors/theme-colors colors/neutral-30 colors/neutral-70 theme)
+     :clear-icon    (colors/theme-colors colors/neutral-40 colors/neutral-60 theme)
+     :password-icon (colors/theme-colors colors/neutral-50 colors/white theme)
     :cursor        (colors/theme-colors (colors/custom-color :blue 50)
                                         (colors/custom-color :blue 60)
-                                         override-theme)}))
+                                         theme)}))

 (defn status-colors
-  [status blur? override-theme]
+  [status blur? theme]
  (if blur?
    (case status
      :focus
-      {:border-color (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-40 override-theme)
-       :placeholder  (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-20 override-theme)
-       :text         (colors/theme-colors colors/neutral-100 colors/white override-theme)}
+      {:border-color (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-40 theme)
+       :placeholder  (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-20 theme)
+       :text         (colors/theme-colors colors/neutral-100 colors/white theme)}
      :error
-      {:border-color (colors/theme-colors colors/danger-opa-40 colors/danger-opa-40 override-theme)
-       :placeholder  (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 override-theme)
-       :text         (colors/theme-colors colors/neutral-100 colors/white override-theme)}
+      {:border-color (colors/theme-colors colors/danger-opa-40 colors/danger-opa-40 theme)
+       :placeholder  (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 theme)
+       :text         (colors/theme-colors colors/neutral-100 colors/white theme)}
      :disabled
-      {:border-color (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 override-theme)
-       :placeholder  (colors/theme-colors colors/neutral-80-opa-30 colors/white-opa-20 override-theme)
-       :text         (colors/theme-colors colors/neutral-80-opa-30 colors/white-opa-20 override-theme)}
+      {:border-color (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme)
+       :placeholder  (colors/theme-colors colors/neutral-80-opa-30 colors/white-opa-20 theme)
+       :text         (colors/theme-colors colors/neutral-80-opa-30 colors/white-opa-20 theme)}
      ;; :default
-      {:border-color (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 override-theme)
-       :placeholder  (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 override-theme)
-       :text         (colors/theme-colors colors/neutral-100 colors/white override-theme)})
+      {:border-color (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme)
+       :placeholder  (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 theme)
+       :text         (colors/theme-colors colors/neutral-100 colors/white theme)})
    (case status
      :focus
-      {:border-color (colors/theme-colors colors/neutral-40 colors/neutral-60 override-theme)
-       :placeholder  (colors/theme-colors colors/neutral-30 colors/neutral-60 override-theme)
-       :text         (colors/theme-colors colors/neutral-100 colors/white override-theme)}
+      {:border-color (colors/theme-colors colors/neutral-40 colors/neutral-60 theme)
+       :placeholder  (colors/theme-colors colors/neutral-30 colors/neutral-60 theme)
+       :text         (colors/theme-colors colors/neutral-100 colors/white theme)}
      :error
-      {:border-color (colors/theme-colors colors/danger-opa-40 colors/danger-opa-40 override-theme)
-       :placeholder  (colors/theme-colors colors/neutral-40 colors/white-opa-40 override-theme)
-       :text         (colors/theme-colors colors/neutral-100 colors/white override-theme)}
+      {:border-color (colors/theme-colors colors/danger-opa-40 colors/danger-opa-40 theme)
+       :placeholder  (colors/theme-colors colors/neutral-40 colors/white-opa-40 theme)
+       :text         (colors/theme-colors colors/neutral-100 colors/white theme)}
      :disabled
-      {:border-color (colors/theme-colors colors/neutral-20 colors/neutral-80 override-theme)
-       :placeholder  (colors/theme-colors colors/neutral-40 colors/neutral-40 override-theme)
-       :text         (colors/theme-colors colors/neutral-40 colors/neutral-40 override-theme)}
+      {:border-color (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)
+       :placeholder  (colors/theme-colors colors/neutral-40 colors/neutral-40 theme)
+       :text         (colors/theme-colors colors/neutral-40 colors/neutral-40 theme)}
      ;; :default
-      {:border-color (colors/theme-colors colors/neutral-20 colors/neutral-80 override-theme)
-       :placeholder  (colors/theme-colors colors/neutral-40 colors/neutral-50 override-theme)
-       :text         (colors/theme-colors colors/neutral-100 colors/white override-theme)})))
+      {:border-color (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)
+       :placeholder  (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)
+       :text         (colors/theme-colors colors/neutral-100 colors/white theme)})))

 (defn input-container
  [colors-by-status small? disabled?]
@@ -5,7 +5,7 @@
            [quo2.components.markdown.text :as text]
            [react-native.core :as rn]
            [reagent.core :as reagent]
-            [quo2.theme :as theme]))
+            [quo2.theme :as quo.theme]))

 (defn- label-&-counter
  [{:keys [label current-chars char-limit variant-colors]}]
@@ -54,7 +54,7 @@

 (def ^:private custom-props
  "Custom properties that must be removed from properties map passed to InputText."
-  [:type :blur? :override-theme :error? :right-icon :left-icon :disabled? :small? :button
+  [:type :blur? :theme :error? :right-icon :left-icon :disabled? :small? :button
   :label :char-limit :on-char-limit-reach :icon-name :multiline? :on-focus :on-blur])

 (defn- base-input
@@ -74,15 +74,15 @@
                                (reset! char-count amount-chars)
                                (when (>= amount-chars char-limit)
                                  (on-char-limit-reach amount-chars))))]
-    (fn [{:keys [blur? override-theme error? right-icon left-icon disabled? small? button
+    (fn [{:keys [blur? theme error? right-icon left-icon disabled? small? button
                 label char-limit multiline? clearable? on-focus on-blur]
          :as   props}]
      (let [status-kw        (cond
                               disabled? :disabled
                               error?    :error
                               :else     @status)
-            colors-by-status (style/status-colors status-kw blur? override-theme)
-            variant-colors   (style/variants-colors blur? override-theme)
+            colors-by-status (style/status-colors status-kw blur? theme)
+            variant-colors   (style/variants-colors blur? theme)
            clean-props      (apply dissoc props custom-props)]
        [:<>
         (when (or label char-limit)
@@ -101,7 +101,7 @@
           (cond-> {:style                  (style/input colors-by-status small? @multiple-lines?)
                    :accessibility-label    :input
                    :placeholder-text-color (:placeholder colors-by-status)
-                    :keyboard-appearance    (theme/theme-value :light :dark override-theme)
+                    :keyboard-appearance    (quo.theme/theme-value :light :dark theme)
                    :cursor-color           (:cursor variant-colors)
                    :editable               (not disabled?)
                    :on-focus               (fn []
@@ -148,11 +148,11 @@
                                    :icon-name (if @password-shown? :i/hide :i/reveal)
                                    :on-press  #(swap! password-shown? not)})])))

-(defn input
+(defn input-internal
  "This input supports the following properties:
  - :type - Can be `:text`(default) or `:password`.
  - :blur? - Boolean to set the blur color variant.
-  - :override-theme - Can be `light` or `:dark`.
+  - :theme - Can be `light` or `:dark`.
  - :small? - Boolean to specify if this input is rendered in its small version.
  - :multiline? - Boolean to specify if this input support multiple lines.
  - :icon-name - The name of an icon to display at the left of the input.
@@ -188,3 +188,5 @@
    (if (= type :password)
      [password-input base-props]
      [base-input base-props])))
+
+(def input (quo.theme/with-theme input-internal))
@@ -1,10 +1,9 @@
 (ns quo2.components.inputs.profile-input.view
  (:require
-    [quo2.components.buttons.button :as buttons]
+    [quo2.components.buttons.button.view :as buttons]
    [quo2.components.avatars.user-avatar.view :as user-avatar]
    [quo2.components.inputs.profile-input.style :as style]
    [quo2.components.inputs.title-input.view :as title-input]
-    [quo2.foundations.colors :as colors]
    [react-native.core :as rn]
    [react-native.hole-view :as hole-view]))

@@ -35,16 +34,16 @@
             :status-indicator? false
             :size              :medium)]]
    [buttons/button
-     {:accessibility-label       :select-profile-picture-button
-      :type                      :grey
-      :override-background-color (colors/alpha colors/white 0.05)
-      :on-press                  on-press
-      :icon-size                 20
-      :width                     24
-      :size                      24
-      :icon                      :i/camera
-      :style                     style/button
-      :inner-style               style/button-inner} :i/camera]]
+     {:accessibility-label :select-profile-picture-button
+      :type                :grey
+      :background          :blur
+      :on-press            on-press
+      :icon-size           20
+      :width               24
+      :size                24
+      :icon                :i/camera
+      :style               style/button
+      :inner-style         style/button-inner} :i/camera]]
   [rn/view {:style style/input-container}
    [title-input/title-input
     (merge title-input-props
@@ -17,29 +17,29 @@
         :text-align-vertical :top))

 (defn placeholder-color
-  [input-state override-theme blur?]
+  [input-state theme blur?]
  (cond
    (and (= input-state :focused) blur?)
-    (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-20 override-theme)
+    (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-20 theme)

    (= input-state :focused) ; Not blur
-    (colors/theme-colors colors/neutral-30 colors/neutral-60 override-theme)
+    (colors/theme-colors colors/neutral-30 colors/neutral-60 theme)

    blur? ; :default & blur
-    (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-30 override-theme)
+    (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-30 theme)

    :else ; :default & not blur
-    (colors/theme-colors colors/neutral-40 colors/neutral-50 override-theme)))
+    (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)))

 (defn cursor-color
-  [customization-color override-theme]
+  [customization-color theme]
  (colors/theme-colors (colors/custom-color customization-color 50)
                       (colors/custom-color customization-color 60)
-                       override-theme))
+                       theme))

 (defn error-word
-  []
+  [theme]
  {:height             22
   :padding-horizontal 20
   :background-color   colors/danger-50-opa-10
-   :color              (colors/theme-colors colors/danger-50 colors/danger-60)})
+   :color              (colors/theme-colors colors/danger-50 colors/danger-60 theme)})
@@ -3,19 +3,19 @@
            [quo2.components.inputs.recovery-phrase.style :as style]
            [react-native.core :as rn]
            [reagent.core :as reagent]
-            [quo2.theme :as theme]))
+            [quo2.theme :as quo.theme]))

 (def ^:private custom-props
-  [:customization-color :override-theme :blur? :cursor-color :multiline :on-focus :on-blur
+  [:customization-color :theme :blur? :cursor-color :multiline :on-focus :on-blur
   :placeholder-text-color :mark-errors? :error-pred :word-limit])

 (defn- error-word
-  [text]
-  [rn/text {:style (style/error-word)}
+  [text theme]
+  [rn/text {:style (style/error-word theme)}
   text])

 (defn- mark-error-words
-  [pred-last-word pred-previous-words text word-limit]
+  [{:keys [pred-last-word pred-previous-words text word-limit theme]}]
  (let [last-index (dec (count (string/split text #"\s+")))
        words      (map #(apply str %)
                        (partition-by #(= " " %) text))]
@@ -31,18 +31,18 @@
                       :always           (update :result
                                                 conj
                                                 (if invalid-word?
-                                                   [error-word word]
+                                                   [error-word word theme]
                                                   word)))))
                 {:result [:<>]
                  :idx    0})
         :result)))

-(defn recovery-phrase-input
+(defn recovery-phrase-input-internal
  [_ _]
  (let [state       (reagent/atom :default)
        set-focused #(reset! state :focused)
        set-default #(reset! state :default)]
-    (fn [{:keys [customization-color override-theme blur? on-focus on-blur mark-errors?
+    (fn [{:keys [customization-color theme blur? on-focus on-blur mark-errors?
                 error-pred-current-word error-pred-written-words word-limit]
          :or   {customization-color      :blue
                 word-limit               ##Inf
@@ -55,9 +55,9 @@
         [rn/text-input
          (merge {:accessibility-label    :recovery-phrase-input
                  :style                  (style/input)
-                  :placeholder-text-color (style/placeholder-color @state override-theme blur?)
-                  :cursor-color           (style/cursor-color customization-color override-theme)
-                  :keyboard-appearance    (theme/theme-value :light :dark override-theme)
+                  :placeholder-text-color (style/placeholder-color @state theme blur?)
+                  :cursor-color           (style/cursor-color customization-color theme)
+                  :keyboard-appearance    (quo.theme/theme-value :light :dark theme)
                  :multiline              true
                  :on-focus               (fn []
                                            (set-focused)
@@ -67,5 +67,11 @@
                                            (when on-blur (on-blur)))}
                 extra-props)
          (if mark-errors?
-            (mark-error-words error-pred-current-word error-pred-written-words text word-limit)
+            (mark-error-words {:pred-last-word      error-pred-current-word
+                               :pred-previous-words error-pred-written-words
+                               :text                text
+                               :word-limit          word-limit
+                               :theme               theme})
            text)]]))))
+
+(def recovery-phrase-input (quo.theme/with-theme recovery-phrase-input-internal))
@@ -1,5 +1,5 @@
 (ns quo2.components.links.link-preview.view
-  (:require [quo2.components.buttons.button :as button]
+  (:require [quo2.components.buttons.button.view :as button]
            [quo2.components.links.link-preview.style :as style]
            [quo2.components.markdown.text :as text]
            [react-native.core :as rn]))
@@ -1,6 +1,6 @@
 (ns quo2.components.list-items.channel
-  (:require [quo2.components.avatars.channel-avatar :as channel-avatar]
-            [quo2.components.common.unread-grey-dot.view :refer [unread-grey-dot]]
+  (:require [quo2.components.avatars.channel-avatar.view :as channel-avatar]
+            [quo2.components.common.unread-grey-dot.view :as unread-grey-dot]
            [quo2.components.counter.counter :as quo2.counter]
            [quo2.components.icon :as quo2.icons]
            [quo2.components.markdown.text :as quo2.text]
@@ -13,10 +13,11 @@

 (defn list-item
  [{:keys [locked? mentions-count unread-messages?
-           muted? is-active-channel? emoji channel-color]
-    :or   {channel-color colors/primary-50}
+           muted? is-active-channel? emoji channel-color
+           default-color]
    :as   props}]
-  (let [standard-props (apply dissoc props custom-props)
+  (let [channel-color  (or channel-color default-color)
+        standard-props (apply dissoc props custom-props)
        name-text      (:name props)]
    [rn/touchable-opacity standard-props
     [rn/view
@@ -36,11 +37,12 @@
                              :align-items     :center}
        :accessible          true
        :accessibility-label :chat-name-text}
-       [channel-avatar/channel-avatar
-        {:big?                   true
-         :locked?                locked?
-         :emoji-background-color (colors/theme-alpha channel-color 0.1 0.1)
-         :emoji                  emoji}]
+       [channel-avatar/view
+        {:size                :size/l
+         :locked?             locked?
+         :full-name           (:name props)
+         :customization-color channel-color
+         :emoji               emoji}]
       [quo2.text/text
        {:style  (cond-> {:margin-left 12}
                   (and (not locked?) muted?)
@@ -63,4 +65,4 @@
             mentions-count]]

           unread-messages?
-           [unread-grey-dot :unviewed-messages-public])])]]))
+           [unread-grey-dot/unread-grey-dot :unviewed-messages-public])])]]))
@@ -0,0 +1,70 @@
+(ns quo2.components.list-items.community.component-spec
+  (:require [quo2.components.list-items.community.view :as component]
+            [test-helpers.component :as h]))
+
+(h/describe "Community list"
+  (h/test "default render"
+    (h/render [component/view {}])
+    (h/is-truthy (h/get-by-label-text :community-item-title))
+    (h/is-null (h/query-by-label-text :community-item-info)))
+
+  (h/describe "type share"
+    (h/test "renders"
+      (h/render [component/view
+                 {:type     :share
+                  :title    "Title"
+                  :subtitle "Subtitle"}])
+      (h/is-truthy (h/get-by-text "# Title"))
+      (h/is-truthy (h/get-by-text "Subtitle"))
+      (h/is-null (h/query-by-label-text :community-item-info))))
+
+  (h/describe "type engage"
+    (h/test "default, no info"
+      (h/render [component/view {:type :engage}])
+      (h/is-null (h/query-by-label-text :community-item-info)))
+
+    (h/test "info is :navigation"
+      (h/render [component/view {:type :engage :info :navigation}])
+      (h/is-truthy (h/get-by-label-text :info-navigation)))
+
+    (h/test "info is :token-gated"
+      (h/render [component/view {:type :engage :info :token-gated}])
+      (h/is-truthy (h/get-by-label-text :info-token-gated)))
+
+    (h/test "info is :muted"
+      (h/render [component/view {:type :engage :info :muted}])
+      (h/is-truthy (h/get-by-label-text :info-muted)))
+
+    (h/test "info is :notification"
+      (h/render [component/view {:type :engage :info :notification}])
+      (h/is-truthy (h/get-by-label-text :info-notification-dot)))
+
+    (h/test "info is :mention"
+      (h/render [component/view
+                 {:type         :engage
+                  :info         :mention
+                  :unread-count 9000}])
+      (h/is-truthy (h/get-by-text "99+"))))
+
+  (h/describe "type discover"
+    (h/test "default, no info, no member stats"
+      (h/render [component/view {:type :discover}])
+      (h/is-null (h/query-by-label-text :stats-members-count))
+      (h/is-null (h/query-by-label-text :community-item-info)))
+
+    (h/test "info is :token-gated, show member stats"
+      (let [on-press-info (h/mock-fn)]
+        (h/render [component/view
+                   {:type          :discover
+                    :info          :token-gated
+                    :locked?       true
+                    :blur?         false
+                    :on-press-info on-press-info
+                    :members       {:members-count 9876 :active-count 1350}
+                    :tokens        [{:id 1 :group [{:id 1}]}]}])
+        (h/is-truthy (h/get-by-label-text :community-item-info))
+        (h/is-truthy (h/get-by-label-text :permission-tag))
+        (h/is-truthy (h/get-by-label-text :stats-members-count))
+        (h/is-truthy (h/get-by-label-text :stats-active-count))
+        (h/fire-event :press (h/get-by-label-text :permission-tag))
+        (h/was-called on-press-info)))))
@@ -0,0 +1,65 @@
+(ns quo2.components.list-items.community.style
+  (:require [quo2.foundations.colors :as colors]
+            [quo2.foundations.shadows :as shadows]))
+
+(def logo
+  {:border-radius 50
+   :border-width  0
+   :width         32
+   :height        32
+   :margin-right  10})
+
+(defn notification-dot
+  [blur? theme]
+  {:width            8
+   :height           8
+   :border-radius    4
+   :background-color (if (and (= :dark theme) blur?)
+                       colors/white-opa-40
+                       (colors/theme-colors colors/neutral-40 colors/neutral-60 theme))})
+
+(defn title
+  [{:keys [type info blur? theme]}]
+  {:color (cond
+            (and (= type :engage) (= info :muted))
+            (colors/theme-colors colors/neutral-40 colors/neutral-60 theme)
+
+            (and (= type :engage) (= info :default) (not blur?))
+            (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
+
+            (and (= type :engage) (= info :default) (= :dark theme) blur?)
+            colors/white-70-blur
+
+            :else
+            (colors/theme-colors colors/neutral-100 colors/white theme))})
+
+(defn subtitle
+  [blur? theme]
+  {:color (if (and (= :dark theme) blur?)
+            colors/white-opa-40
+            (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))})
+
+(defn container
+  [{:keys [type pressed? blur? customization-color theme info]}]
+  (merge {:padding-vertical   8
+          :padding-horizontal 12
+          :border-radius      12
+          :flex-direction     :row
+          :align-items        :center
+          :background-color   (cond
+                                (and pressed? (= type :engage) (= info :default) (= :dark theme) blur?)
+                                colors/white-opa-5
+
+                                (and pressed? (#{:engage :share} type))
+                                (colors/theme-alpha customization-color 0.05 0.05)
+
+                                (and (not pressed?) (= type :discover) (not blur?))
+                                (colors/theme-colors colors/white colors/neutral-90 theme)
+
+                                (and (not pressed?) (= type :discover) (= :dark theme) blur?)
+                                colors/white-opa-5
+
+                                (and pressed? (= type :discover))
+                                (colors/theme-colors colors/white :transparent theme))}
+         (when (and (= type :discover) (not pressed?))
+           (shadows/get 3))))
@@ -0,0 +1,165 @@
+(ns quo2.components.list-items.community.view
+  (:require [quo2.components.community.community-view :as community-view]
+            [quo2.components.counter.counter :as counter]
+            [quo2.components.icon :as icons]
+            [quo2.components.list-items.community.style :as style]
+            [quo2.components.markdown.text :as text]
+            [quo2.foundations.colors :as colors]
+            [quo2.theme :as quo.theme]
+            [react-native.core :as rn]
+            [reagent.core :as reagent]))
+
+(defn- logo-component
+  [logo]
+  [rn/image {:source logo :style style/logo}])
+
+(defn- title-component
+  [{:keys [title type] :as props}]
+  [text/text
+   {:weight              :semi-bold
+    :size                :paragraph-1
+    :accessibility-label :community-item-title
+    :number-of-lines     1
+    :ellipsize-mode      :tail
+    :style               (style/title props)}
+   (if (= type :share)
+     (str "# " title)
+     title)])
+
+(defn- subtitle-component
+  [subtitle blur? theme]
+  [text/text
+   {:size                :paragraph-2
+    :number-of-lines     1
+    :accessibility-label :community-item-subtitle
+    :style               (style/subtitle blur? theme)}
+   subtitle])
+
+(defn- notification-dot
+  [blur? theme]
+  [rn/view
+   {:style               (style/notification-dot blur? theme)
+    :accessibility-label :info-notification-dot}])
+
+(defn- info-component
+  [{:keys [customization-color info type blur? locked? on-press-info theme tokens unread-count]}]
+  (let [component
+        (cond
+          (and (= type :discover) (= info :token-gated) (seq tokens))
+          [community-view/permission-tag-container
+           {:locked?  locked?
+            :tokens   tokens
+            :on-press on-press-info
+            :theme    theme
+            :blur?    blur?}]
+
+          (and (= type :engage) (= info :mention) (pos? unread-count))
+          [counter/counter
+           {:type              :default
+            :override-bg-color customization-color}
+           unread-count]
+
+          (and (= type :engage) (= info :notification))
+          [notification-dot blur? theme]
+
+          (and (= type :engage) (= info :muted))
+          [icons/icon :i/muted
+           {:accessibility-label :info-muted
+            :color               (colors/theme-colors colors/neutral-40 colors/neutral-60 theme)}]
+
+          (and (= type :engage) (= info :token-gated))
+          [icons/icon (if locked? :i/locked :i/unlocked)
+           {:accessibility-label :info-token-gated
+            :color               (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}]
+
+          (and (= type :engage) (= info :navigation))
+          [icons/icon :i/chevron-right
+           {:accessibility-label :info-navigation
+            :color               (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}])]
+    (when component
+      [rn/view
+       {:accessibility-label :community-item-info
+        :style               {:margin-left 10}}
+       component])))
+
+(defn- view-internal
+  "Options:
+
+  :type - :discover/engage/share
+  :info - keyword - Acceptable values vary based on the :type option.
+
+  :title - string
+  :logo - image resource
+  :theme - :light/dark
+
+  :container-style - style map - Override styles in top-level view component.
+
+  :members - {:members-count number, :active-count number} - When non-nil, the
+  statistics component will be shown.
+
+  :tokens - A sequence of maps, e.g. [{:id 1 :group [{:id 1 :token-icon an-icon}]}].
+
+  :locked? - boolean - When true, the permission-tag icon or the token gated
+  icon will appear as closed.
+
+  :blur? - boolean - It will be taken into account when true and dark mode is
+  enabled.
+
+  :customization-color - color - It will be passed down to components that
+  should vary based on a custom color.
+
+  :on-press/:on-long-press - fn - Used by the top-level pressable component.
+
+  :on-press-info - fn - Will be called when the info component is pressed.
+
+  :unread-count - number - When the info is :mention, it will be used to show
+  the number of unread mentions.
+  "
+  []
+  (let [pressed? (reagent/atom false)]
+    (fn [{:keys [members type info tokens locked? title subtitle
+                 logo blur? customization-color
+                 on-press on-long-press on-press-info
+                 container-style unread-count theme]}]
+      [rn/pressable
+       {:accessibility-label :container
+        :on-press-in         (fn [] (reset! pressed? true))
+        :on-press            on-press
+        :on-long-press       on-long-press
+        :on-press-out        (fn [] (reset! pressed? false))
+        :style               (merge (style/container {:blur?               blur?
+                                                      :customization-color customization-color
+                                                      :info                info
+                                                      :type                type
+                                                      :pressed?            @pressed?
+                                                      :theme               theme})
+                                    container-style)}
+       [logo-component logo]
+       [rn/view {:style {:flex 1}}
+        [title-component
+         {:blur? blur?
+          :info  info
+          :theme theme
+          :title title
+          :type  type}]
+        (when (and (= type :share) subtitle)
+          [subtitle-component subtitle blur? theme])
+        (when (and members (= type :discover))
+          [community-view/community-stats-column
+           {:type          :list-view
+            :theme         theme
+            :blur?         blur?
+            :members-count (:members-count members)
+            :active-count  (:active-count members)}])]
+       [info-component
+        {:blur?               blur?
+         :customization-color customization-color
+         :info                info
+         :type                type
+         :locked?             locked?
+         :on-press-info       on-press-info
+         :theme               theme
+         :tokens              tokens
+         :unread-count        unread-count}]])))
+
+(def view (quo.theme/with-theme view-internal))
@@ -7,11 +7,11 @@
 (defn themes
  [type]
  (case type
-    :main        {:icon-color (theme-colors colors/neutral-50 colors/neutral-10)
-                  :background (theme-colors colors/white colors/neutral-90)
+    :main        {:icon-color (theme-colors colors/neutral-50 colors/neutral-40)
+                  :background (theme-colors colors/white colors/neutral-95)
                  :text-color (theme-colors colors/neutral-100 colors/white)}
    :danger      {:icon-color (theme-colors colors/danger-50 colors/danger-60)
-                  :background (theme-colors colors/white colors/neutral-90)
+                  :background (theme-colors colors/white colors/neutral-95)
                  :text-color (theme-colors colors/danger-50 colors/danger-60)}
    :transparent {:icon-color (theme-colors colors/neutral-50 colors/neutral-10)
                  :text-color (theme-colors colors/neutral-100 colors/white)}))
@@ -5,7 +5,8 @@
            [quo2.foundations.colors :as colors]
            [react-native.core :as rn]
            [react-native.fast-image :as fast-image]
-            [react-native.hole-view :as hole-view]))
+            [react-native.hole-view :as hole-view]
+            [quo2.theme :as quo.theme]))

 (def params
  {32 {:border-radius {:circular 16 :rounded 10}
@@ -61,13 +62,13 @@
     [avatar item type size border-radius]]))

 (defn get-overflow-color
-  [transparent? transparent-color light-color dark-color override-theme]
+  [transparent? transparent-color light-color dark-color theme]
  (if transparent?
    transparent-color
-    (colors/theme-colors light-color dark-color override-theme)))
+    (colors/theme-colors light-color dark-color theme)))

 (defn overflow-label
-  [label size transparent? border-radius margin-left override-theme more-than-99-label]
+  [{:keys [label size transparent? border-radius margin-left theme more-than-99-label]}]
  [rn/view
   {:style {:width            size
            :height           size
@@ -80,7 +81,7 @@
                               colors/white-opa-10
                               colors/neutral-20
                               colors/neutral-70
-                               override-theme)}}
+                               theme)}}
   (if (= size 16)
     [quo2.icons/icon :i/more
      {:size  12
@@ -89,7 +90,7 @@
               colors/white-opa-70
               colors/neutral-50
               colors/neutral-40
-               override-theme)}]
+               theme)}]
     [quo2.text/text
      {:size   (if (= size 32) :paragraph-2 :label)
       :weight :medium
@@ -98,7 +99,7 @@
                              colors/white-opa-70
                              colors/neutral-60
                              colors/neutral-40
-                              override-theme)
+                              theme)
                :margin-left -2}}
      ;; If overflow label is below 100, show label as +label (ex. +30), else just show 99+
      (if (< label 100)
@@ -111,7 +112,7 @@
    (:account :collectible :photo) :rounded
    :circular))

-(defn preview-list
+(defn- preview-list-internal
  "[preview-list opts items]
   opts
   {:type          :user/:community/:account/:token/:collectible/:dapp
@@ -120,7 +121,7 @@
    :transparent?  overflow-label transparent?}
   items           preview list items (only 4 items is required for preview)
  "
-  [{:keys [type size list-size transparent? override-theme more-than-99-label]} items]
+  [{:keys [type size list-size transparent? theme more-than-99-label]} items]
  (let [items-arr     (into [] items)
        list-size     (or list-size (count items))
        margin-left   (get-in params [size :margin-left])
@@ -135,5 +136,13 @@
       [list-item index type size (get items-arr index) list-size
        margin-left hole-size hole-radius hole-x hole-y border-radius])
     (when (> list-size 4)
-       [overflow-label (- list-size 3) size transparent? border-radius margin-left override-theme
-        more-than-99-label])]))
+       [overflow-label
+        {:label              (- list-size 3)
+         :size               size
+         :transparent?       transparent?
+         :border-radius      border-radius
+         :margin-left        margin-left
+         :theme              theme
+         :more-than-99-label more-than-99-label}])]))
+
+(def preview-list (quo.theme/with-theme preview-list-internal))
@@ -31,8 +31,8 @@

 (defn- internal-view
  [{:keys [content theme blur? parent-height]}]
-  (let [number-of-skeletons (int (Math/floor (/ parent-height
-                                                (get-in constants/layout-dimensions [content :height]))))
+  (let [skeleton-height     (get-in constants/layout-dimensions [content :height])
+        number-of-skeletons (int (Math/ceil (/ parent-height skeleton-height)))
        color               (cond
                              blur?           colors/white-opa-5
                              (= theme :dark) colors/neutral-90
@@ -1,12 +1,12 @@
 (ns quo2.components.markdown.text
  (:require [quo2.foundations.colors :as colors]
            [quo2.foundations.typography :as typography]
-            [quo2.theme :as theme]
+            [quo2.theme :as quo.theme]
            [react-native.core :as rn]
            [reagent.core :as reagent]))

 (defn text-style
-  [{:keys [size align weight style]}]
+  [{:keys [size align weight style theme]}]
  (merge (case (or weight :regular)
           :regular   typography/font-regular
           :medium    typography/font-medium
@@ -25,14 +25,23 @@
         {:text-align (or align :auto)}
         (if (:color style)
           style
-           (assoc style :color (if (= (theme/get-theme) :dark) colors/white colors/neutral-100)))))
+           (assoc style
+                  :color
+                  (if (= (or theme (quo.theme/get-theme)) :dark) colors/white colors/neutral-100)))))
+
+(defn- text-view-internal
+  [props & children]
+  (let [style (text-style props)]
+    (into [rn/text
+           (merge {:style style}
+                  (dissoc props :style :size :align :weight :color :theme))]
+          children)))
+
+(def ^:private text-view (quo.theme/with-theme text-view-internal))

 (defn text
  []
-  (let [this  (reagent/current-component)
-        props (reagent/props this)
-        style (text-style props)]
-    (into [rn/text
-           (merge {:style style}
-                  (dissoc props :style :size :align :weight :color))]
-          (reagent/children this))))
+  (let [this     (reagent/current-component)
+        props    (reagent/props this)
+        children (reagent/children this)]
+    (into [text-view props] children)))
@@ -17,8 +17,8 @@
           :background colors/neutral-95}})

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

 (def ui-images
  {:light {:horizontal (js/require "../resources/images/ui/message-gap-hborder-light.png")
@@ -28,8 +28,8 @@
           :circles    (js/require "../resources/images/ui/message-gap-circle-bg-dark.png")}})

 (defn get-image
-  [key]
-  (get-in ui-images [(theme/get-theme) key]))
+  [k]
+  (get-in ui-images [(theme/get-theme) k]))

 ;;; components
 ;;;; borders
@@ -82,11 +82,12 @@
    :border-radius 50}])

 (defn timestamp
-  [str]
+  [s]
  [text/text
   {:size  :label
    :style {:text-transform :none
-            :color          (get-color :time)}} str])
+            :color          (get-color :time)}}
+   s])

 (defn info-button
  [on-press]
@@ -5,12 +5,12 @@

 (defn dynamic-button-view
  [type dynamic-buttons style]
-  (when-let [{:keys [count on-press customization-color label]} (get dynamic-buttons type)]
+  (when-let [{:keys [on-press customization-color label] :as props} (get dynamic-buttons type)]
    [dynamic-button/dynamic-button
     {:type                type
      :label               label
      :on-press            on-press
-      :count               count
+      :count               (:count props)
      :style               style
      :customization-color customization-color}]))

@@ -1,7 +1,7 @@
 (ns quo2.components.navigation.page-nav
  (:require [clojure.string :as string]
            [quo2.components.avatars.user-avatar.view :as user-avatar]
-            [quo2.components.buttons.button :as button]
+            [quo2.components.buttons.button.view :as button]
            [quo2.components.icon :as icons]
            [quo2.components.markdown.text :as text]
            [quo2.foundations.colors :as colors]
@@ -25,11 +25,12 @@
 (def message-body
  {:color colors/white})

-(def message-container
+(defn message-container
+  [attachment]
  {:border-radius      12
   :margin-top         12
   :padding-horizontal 12
-   :padding-vertical   8
+   :padding-vertical   (if (#{:photo :gif} attachment) 12 8)
   :background-color   colors/white-opa-5})

 (def footer-container
@@ -1,7 +1,7 @@
 (ns quo2.components.notifications.activity-log.view
  (:require [clojure.string :as string]
            [quo.core :as quo]
-            [quo2.components.buttons.button :as button]
+            [quo2.components.buttons.button.view :as button]
            [quo2.components.icon :as icon]
            [quo2.components.markdown.text :as text]
            [quo2.components.notifications.activity-log.style :as style]
@@ -74,8 +74,8 @@
           context))))

 (defn- activity-message
-  [{:keys [title body title-number-of-lines body-number-of-lines]}]
-  [rn/view {:style style/message-container}
+  [{:keys [title body title-number-of-lines body-number-of-lines attachment]}]
+  [rn/view {:style (style/message-container attachment)}
   (when title
     [text/text
      {:size                :paragraph-2
@@ -150,8 +150,8 @@
         [activity-reply-text-input props reply-input])
       (when items
         [rn/view style/footer-container
-          (for [{:keys [key] :as item} items]
-            ^{:key key}
+          (for [item items]
+            ^{:key (:key item)}
            [footer-item-view item replying? reply-input])])])))

 (defn view
@@ -0,0 +1,13 @@
+(ns quo2.components.notifications.activity-logs-photos.style)
+
+(def photos-container
+  {:flex           1
+   :height         40
+   :flex-direction :row})
+
+(defn photo
+  [index]
+  {:width         40
+   :height        40
+   :border-radius 10
+   :margin-left   (if (= index 0) 0 8)})
@@ -0,0 +1,14 @@
+(ns quo2.components.notifications.activity-logs-photos.view
+  (:require [react-native.core :as rn]
+            [quo2.components.notifications.activity-logs-photos.style :as style]))
+
+(defn view
+  [{:keys [photos]}]
+  [rn/view {:style style/photos-container}
+   (map-indexed
+    (fn [index photo]
+      ^{:key index}
+      [rn/image
+       {:source photo
+        :style  (style/photo index)}])
+    photos)])
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Siddarth Kumar	41cf687b3f	feat: Add script to import & sync external PRs This commit adds a script which requires 2 arguments : - full PR link - branch url of the forked repository This script will then import the branch from the forked repository and create a new PR with it. This new PR will have title and descriptions copied over from the original PR. This helps in running CI pipelines for external contributors.	2023-07-28 15:23:30 +05:30
Jamie Caprani	a8303dbe50	chore: remove uses of override theme prop (#16570 )	2023-07-28 02:36:54 -07:00
Tetiana Churikova	43cba161d6	gh: add label to bug template (#16796 )	2023-07-27 16:56:12 +02:00
Yevheniia BerdnykandChurikova Tetiana	ce08131c01	e2e: new pub key (#16779 ) Co-authored-by: Churikova Tetiana <tatiana@status.im>	2023-07-27 13:14:09 +02:00
Ulises Manuel Cárdenas	4f044765e1	[#16278 ] fix tips in white camera border (#16716 ) * Remove unnecessary wrapper * Fix border tips and refactor * Add comment about using 1.9 width	2023-07-26 14:08:57 -06:00
Parvesh Monu	7cd9f76043	Fix UI freezing when image is opened from activity center (#16707 )	2023-07-26 18:19:10 +05:30
Icaro Motta	238e35a281	Unshadow more Clojure core vars (#16777 ) This is a continuation of https://github.com/status-im/status-mobile/pull/16500 (Lint & fix some shadowed core Clojure(Script) vars). Notes: As a reminder, the goal is to eventually disallow shadowing core Clojure vars entirely, but to get there and avoid rebase hell and regressions, we need to do in smaller steps, especially because we can't safely automate the process of unshadowing vars. We are already down from ~500 shadowed core vars to 350 in total. Why is this PR is using names such as "s", "v" or "sym"? Names such as s or v are the so called idiomatic names, and are listed in the Clojure Style Guide https://guide.clojure.style/#idiomatic-names. I used them whenever I felt appropriate. For the var cljs.core/symbol I opted to use sym, even though the symbol in question is not necessarily a Clojure symbol, I think the alias conveys the meaning well enough (https://www.clojure.org/guides/learn/syntax#_symbols_and_idents). New vars linted: - comparator - identity - str - symbol - val Outstanding shadowed vars include type, name, hash, comp.	2023-07-26 11:26:12 +00:00
Alexander	57c538e9d0	Update navigation bar to support dark mode (#16762 ) * Dark mode top bar * Fixes * Style fix	2023-07-26 09:48:51 +02:00
Omar BasemandMilad	e49a3ab5cd	feat: category reorder component (#16719 ) * feat: category reorder component --------- Co-authored-by: Milad <mmilad.sanati@gmail.com>	2023-07-26 11:11:17 +04:00
Mohamed Javid	1721b40b3f	Refactor `toast` component to use theme context (#16711 ) This commit refactors the "Toast" component to use theme context for consistency across the codebase. Each toast will have its theme provider, which will help the children to use the context properly without interfering with other toast's context. The following components are refactored to use with-theme / theme-context as it is used in the "Toast": - "text" component - "user-avatar" component - "icon" component - "circle-timer" component This commit also updates the icon keyword used in the ":toasts/upsert" event dispatch to respect icon guidelines. Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>	2023-07-25 20:36:02 +05:30
mmilad75	ec6800216b	Notification Centre - add Empty Content screen (#16715 ) * Notification Centre - add Empty Content screen (#16715)	2023-07-25 18:06:00 +03:30
Alexander	15add24cd7	Show authout details in message preview of context drawer (#16765 )	2023-07-25 15:34:32 +02:00
Parvesh Monu	28f790b436	fix missing duration value in muted chat button text (#16769 )	2023-07-25 17:22:12 +05:30
Tetiana Churikova	9aafe61f5f	gh: update templates (#16771 )	2023-07-25 12:33:34 +02:00
frank	02d45fa06f	discard backup message when recovering account (#16748 ) * discard backup message when recovering account * fix test failed * update status-go-version.json	2023-07-25 15:03:57 +08:00
Yevheniia Berdnyk	99dc79842d	e2e: nigthly fixes 24.07	2023-07-24 23:14:16 +03:00
Parvesh Monu	2a8e6cb304	Implement activity logs photos component (#16760 )	2023-07-25 00:49:26 +05:30
Yevheniia Berdnyk	eb3de978ce	e2e: mute chats	2023-07-24 17:43:44 +03:00
Brian Sztamfater	e672bf9163	feat: onboarding transition for new to status flow (#16554 ) Signed-off-by: Brian Sztamfater <brian@status.im>	2023-07-24 10:17:36 -03:00
Omar Basem	e33c877989	feat: camera screen (1/2) (#16569 ) * feat: camera screen (1/2)	2023-07-24 16:46:43 +04:00
BalogunofAfrica	c5a486622d	feat: browser input (#16487 )	2023-07-24 13:28:43 +02:00
flexsurferandYevheniia Berdnyk	00f39225ea	Do not show biometrics onboarding screen if biometric is not available (#16744 ) * fix biometric screen * updated e2e --------- Co-authored-by: Yevheniia Berdnyk <ie.berdnyk@gmail.com>	2023-07-24 13:06:35 +02:00
Ulises Manuel Cárdenas	0ac6817488	[#16551 ] - shared community name in switcher (#16576 ) * Fix community tag text ellipsis * Fix channel card overflow and ellipsis in switcher	2023-07-21 14:15:29 -06:00
Jamie Caprani	33d41dc5d5	Refactor Button and correct use of community color (#16536 ) * chore: refactor button and add use for community colors * chore: update color in button to work with community color * chore: correct uses of button across app	2023-07-21 06:43:41 -07:00
Omar Basem	76eea91ba2	feat: category quo2 component (#16713 ) * feat: category component	2023-07-21 10:13:36 +04:00
Churikova Tetiana	1b2ad33926	e2e: TimeoutException	2023-07-20 20:06:43 +03:00
Mohamed Javid	9731e7039c	Refactor `Bottom Sheet` to use Theme Context (#16710 ) This commit updates "Bottom Sheet" to use the theme (for theme provider) provided on the bottom sheet args when dispatching. This will ensure the theme is passed down to its child components where it can consume and render based on the theme. Changes done: In Bottom Sheet: - Fix Bottom Sheet to use the correct background colour (neutral-95) for dark mode (as per Figma) - Fix the Icon colour for danger in light mode - Updated Quo2 Preview to provide an option for the bottom sheet theme In Action Drawer: - Refactor the Action Drawer component to consume theme context Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>	2023-07-20 19:43:17 +05:30
Mohamed Javid	b14757b120	[Fix] Scroll to bottom on editing message (#16630 ) This commit fixes (by skipping) the scroll to the bottom of messages when the user edits a message and sends it. Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>	2023-07-20 16:57:09 +05:30
John Ngei	2317e856bf	Mute community * mute and unmute community https://github.com/status-im/status-go/compare/dfdaa722...e6187aec * mute and unmute community and all community chats https://github.com/status-im/status-go/compare/dfdaa722...3abc86e4 * updated statu-go https://github.com/status-im/status-go/compare/dfdaa722...919123e1 * refactored mute chat drawer https://github.com/status-im/status-go/compare/d3e650d5...3af0b17c * refactored mute chat drawer https://github.com/status-im/status-go/compare/dfdaa722...3af0b17c * fixing mute channels * fixed mute community channels * update community chats mute status https://github.com/status-im/status-go/compare/dfdaa722...dc50ac21 * added mute and unmute community toast https://github.com/status-im/status-go/compare/dfdaa722...c06f7a6c * unmute community when atleast one community channel is unmuted https://github.com/status-im/status-go/compare/dfdaa722...e691c475 * updated status-go https://github.com/status-im/status-go/compare/b2e56f5d...c52718cd * updated status-go version v0.162.5	2023-07-19 16:30:42 +03:00
flexsurfer	32f18c3d3c	[#16703 ] The display name is not resolved in chats for user sender after relogin (#16704 )	2023-07-18 10:04:42 +02:00
Andrea Maria Piana	e99f6de434	Update version to 0.162.3	2023-07-17 15:53:14 +01:00
Parvesh Monu	bb3b3061c6	fix navigation to community from discover communities screen (#16702 )	2023-07-17 13:56:46 +05:30
Ibrahem Khalil	0067468d57	Fix failing mute till test (#16453 )	2023-07-16 15:02:32 +03:00
Ibrahem Khalil	b2cbed444c	[161108] Optimize message styling when there's multiple mentions on top of each other (#16505 )	2023-07-16 14:40:09 +03:00
Yevheniia Berdnyk	1d0186a12e	fix for airplane mode	2023-07-15 00:17:17 +03:00
Parvesh Monu	c0e4653129	hide mutual update's system messages (#16674 )	2023-07-14 19:29:19 +05:30
Andrea Maria Piana	60f18fc6fb	Update readme	2023-07-14 10:42:17 +01:00
Parvesh Monu	b531dadf96	fix navigating to chat via the 'Jump to' button breaks composer (#16604 )	2023-07-14 13:45:12 +05:30
Andrea Maria Piana	2b0ea01710	Avoid panic when config missing in community	2023-07-14 08:26:21 +01:00
Mohamed Javid	9f5e7ce3f9	Add flash toggle for the camera in sync screen (#16558 ) This commit adds a flash toggle for the camera in the "Sign in" and "Scan sync code" screens. Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>	2023-07-13 17:33:53 +05:30
Parvesh Monu	a340e2a55c	fix image long press issue and cropping (#16571 )	2023-07-13 14:07:42 +05:30
Icaro Motta	88c4521321	Move status-im.utils.money to utils.money (#16573 )	2023-07-12 18:26:04 +00:00
codemaster	645a5b312b	fix: banner images/colors in shell (#16239 )	2023-07-13 00:56:43 +10:00
Andrés Felipe Ceballos M	c55f12ecf8	[#15950 ] Updated build-image-messages (#16518 ) Author: andresceballosm <ceballosmarandres@gmail.com>	2023-07-12 18:34:29 +05:30
Icaro Motta	6c28e9349f	Fix & optimize shadows foundation (#16553 ) Rewrite the shadows foundation API: - Fix (implementation & usages): theme changes were not causing shadows to be reevaluated. - Optimization: define all possible shadow values at compile time. Good to reduce cycles on garbage collection since recreating the shadow map all the time is unnecessary and also to save cycles on computing colors since calls to colors/alpha are not memoized. - API redesign: unify access to Design System shadows in a single function. None of the actual shadow values changed. Fixes https://github.com/status-im/status-mobile/issues/16526 API rationale ============= The quo2.foundations.shadows namespace reflects what's in the Design System > Foundations > Shadows https://www.figma.com/file/v98g9ZiaSHYUdKWrbFg9eM/Foundations?type=design&node-id=624-965&mode=design&t=CvIotdjbHKHcHjpd-0). Figma users see these shadows in other components as "Shadow/Normal/Light/03". Notice the shadow's weight is shown as a number (not the semantic name in Figma, e.g. "intense", "strong"): So to make things as easy as possible, I opted for exposing a single public function named "get", which receives arguments in order of frequency of usage and which expects shadow weights as numbers so that devs don't need to mentally translate 1 to "soft", or 3 to "intense".	2023-07-12 11:35:14 +00:00
Icaro Motta	6170686e34	Rewrite Community List component (#16527 ) Re-implements the component Community List according to guidelines and, most importantly, fixes a bunch of issues and tries to achieve 100% compatibility with Figma. The new implementation is trying to mirror Figma properties as much as possible. Fixes https://github.com/status-im/status-mobile/issues/16447 Changelog: - Refactor to guidelines. - Fix: original implementation in money/format-amounts had a bug caught by new unit tests ("1000000" was formatted incorrectly). - Fix: Community permission tag correct background when theme is overridden and when blur is enabled. - Fix: Notification dot uses correct colors for dark mode and blur variants. - Fix: Community stats background when blur is enabled. - Fix: Community stats icon color when blur is enabled. - Add: The component's Quo preview screen is smarter and will only show form fields (aka descriptors) that are relevant for each component type (engage, discover or share). - Add: replace hardcoded community statistics with an implementation that actually accepts real numbers and which are correctly formatted. - Add: New Quo descriptor type number. - Add: Component uses correct shadows according to foundations/shadows.	2023-07-12 11:14:24 +00:00
Mohamed Javid	72e56dcf75	[Fix] Login Validation Error (#16562 ) This commit fixes the log-in validation issue due to not receiving the "node.login" signal from "status-go". Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>	2023-07-12 16:12:50 +05:30
Jamie Caprani	4801342a42	chore: add doc on pixel perfection (#16539 )	2023-07-12 03:31:14 -07:00
Tetiana Churikova	7282ba04bc	e2e: fixes shell nav (#16545 )	2023-07-12 11:21:39 +02:00
Ibrahem Khalil	2e397f0065	[16524] Fix chevron icon showing when chat is muted (#16528 )	2023-07-12 11:28:53 +03:00
Parvesh Monu	bcb55a1ab3	Enable shell navigation (#16438 )	2023-07-12 13:24:50 +05:30
Alexander	224d6c7cad	Top bar fixes (#16506 ) * Recent fixes * More fix attempts (more successful now) * Updates for `on-content-size-change` * Lint fix * Update * View fixes	2023-07-11 20:30:22 +02:00
Mohamed Javid	126a8705cd	[Fix] Seen state in Activity Center when it is open (#16541 ) This commit fixes the seen state of notifications, if the user is in the Activity Center screen while receiving a new notification. Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>	2023-07-11 20:59:17 +05:30
Jamie Caprani	3fce4816dc	feat: add video and animation to generating keys page (#16415 )	2023-07-11 07:26:40 -07:00
Omar Basem	704b160964	feat: album selector animation (#16533 ) * feat: album selector animation	2023-07-11 15:16:24 +04:00
Ibrahem Khalil	7350c88920	[16467] Fix delete for me doesn't work on chat reopen (#16529 )	2023-07-11 13:42:14 +03:00
Omar Basem	7392b9bf50	Lightbox opacity swipe animation, and margins (#16510 ) * feat: lightbox animations	2023-07-11 13:41:34 +04:00
Ibrahem Khalil	f5948fa016	[16543] Fix muting channel from inside and outside chat page (#16544 )	2023-07-10 22:42:15 +03:00
Mohamed Javid	919fbf2091	[Fix] Profile colour in "Jump to" and "View profile" buttons (#16538 ) This commit fixes the profile colour in the following screens: - "View Profile" button on the "Add a contact" page - "Jump to" button inside the chat - "Jump to" button in the "Community Overview" screen Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>	2023-07-10 18:44:31 +05:30
Parvesh Monu	728d9d01c5	fix App is not opened on the last viewed chat with biometric login enabled (#16516 )	2023-07-10 15:33:31 +05:30
Jamie Caprani	9ac14b6fac	chore: update guidelines for figma api to match quo2 component api (#16454 )	2023-07-10 02:45:39 -07:00
Brian Sztamfater	4414f8ffd3	fix: onboarding carousel screen overflows affecting navigation (#16514 ) Signed-off-by: Brian Sztamfater <brian@status.im>	2023-07-07 12:55:38 -03:00
Andrea Maria Piana	1e8ea3fd16	Enable lightclient https://github.com/status-im/status-go/compare/67050429...67050429	2023-07-07 15:40:24 +01:00
Icaro Motta	17f5ad79f4	Fixes for the Community Channel avatar component (#16379 ) - Community channels may not have an emoji, and in such cases, it should fall back to a single letter. The component was recently updated in Figma after this concern was brought up to designers. - The default (fallback) color to be used in the list of community channels should be the community color, not a default "primary-50" as was before. It's a subtle change because the colors are rendered at 10% transparency. - Rewrote the channel-avatar component to follow guidelines. Fixes: - https://github.com/status-im/status-mobile/issues/16332 - https://github.com/status-im/status-mobile/issues/16327	2023-07-07 14:16:50 +00:00
Siddarth Kumar	d76e64b1bb	fix: profile redirect on newly created account (#16340 ) This commit gets rid of the app-state check which is buggy, The app-state becomes `active` after the universal link code has executed always resulting in the redirect not happening.	2023-07-07 19:21:00 +05:30
flexsurfer	ac675e28eb	[#16520 ] ENS setting is unavailable on PRs when test network is set (#16521 )	2023-07-07 15:34:02 +02:00
Omar Basem	5755d2e21a	Lightbox text sheet (#16471 ) * feat: lightbox text	2023-07-07 17:10:04 +04:00
Rahul Pratap	cf2a3bfce7	Fixed issues with styling in pinned messages panel. (#16498 )	2023-07-07 17:16:12 +05:30
Siddarth Kumar	dcda44fab6	fix: ellipsis on compressed-keys as per designs (#16492 ) This commit does the following: - Moves `get-abbreviated-profile-url` from shell share view into `utils.address` and update its usage. - Adds `get-shortened-compressed-key` to `utils.address` and update the code using `get-shortened-key` to now use `get-shortened-compressed-key` instead. - Adds test for newly introduced utils.	2023-07-07 16:31:17 +05:30
Yevheniia Berdnyk	362aa476ae	e2e: fix for nightly apk upload (#16517 )	2023-07-07 11:08:13 +02:00
Jamie Caprani	25b088833d	chore: move button into view and style files (#16442 ) * chore: move button into view and style files	2023-07-07 00:20:37 -07:00
flexsurfer	3395baa966	fix smthg test folder (#16519 )	2023-07-07 08:46:54 +02:00
flexsurfer	4327653b0b	[#16422 ] Merge profile and profile overview into one map in status-go (#16507 ) * [#16422] Merge profile and profile overview into one map in status-go	2023-07-06 19:46:21 +02:00
Yevheniia Berdnyk	26dcc16ea6	e2e: fix for endless apk upload + teardown	2023-07-06 17:47:35 +03:00
Icaro Motta	9ed68ee7d1	Lint & fix some shadowed core Clojure(Script) vars (#16500 ) It's well known that shadowing core Clojure vars can lead to unexpected bugs. In fact, it's a common source of bugs in other languages too. In the status-mobile repository there are, in total, 562 shadowed vars, ~500 are core vars. Excluding the "old code" we still have 285 offenders. In status-mobile I've already seen two bugs caused by shadowed vars, both with the shadowed var "name". But probably other problems happened in the past, and others will happen in the future if we don't do something about this. This PR is also my response to my frustration trying to review PRs and checking for shadowed vars, humans were not meant for that! In this commit we are enabling ":shadowed-var" to lint certain (not all) core vars as errors (not warnings). In future PRs we can gradually unshadow more vars. For the record, name is shadowed 40 times in the new code and 130 in total, and type is shadowed 93 times in the new code and 124 in total! What about non-core vars, should we allow shadowing? There are ~70 non-core shadowed vars. In my opinion, we should also lint and disallow shadowing non-core vars, since it may cause the same kind of bugs of shadowing core vars. But this decision can be left for another moment/issue, after we have fixed the most prominent problem of shadowing core vars. Which vars are unshadowed in this PR? I fixed 62 errors and unshadowed cljs.core/iter, cljs.core/time, cljs.core/count, cljs.core/key, clojure.core/key. Resources: - [clj-kondo linter: shadowed-var](https://github.com/clj-kondo/clj-kondo/blob/master/doc/linters.md#shadowed-var)	2023-07-06 10:28:07 +00:00
Parvesh Monu	4d7cf3e94e	Replace placeholders on "Jump to" page (#16501 )	2023-07-06 15:27:18 +05:30
flexsurfer	4decba8d00	multiaccounts refactoring S3, refactor keychain and touchid, move and refactor create/recover/login profile (#16448 ) * multiaccounts refactoring S3 E1, refactor keychain and touchid,simplify app init flow, refactor biometric flow * S3 E2 move and refactor create/recover/login methods	2023-07-06 11:25:57 +02:00
Ibrahem Khalil	229a806f12	[16079] Fix dark mode for communities and messages home (#16382 )	2023-07-05 22:34:13 +03:00
Ibrahem Khalil	abe653c086	[16469] Fix conditional of selection user's name in confirmation drawer (#16489 )	2023-07-05 20:06:19 +03:00
AlexanderandOmar Basem	f047665f75	Dynamically calculate composer height to adjust the spacing on the bottom of the list (#16235 ) * fix: Android auto scrolling to bottom of chat --------- Co-authored-by: Omar Basem <omarbasem.0101@gmail.com>	2023-07-05 18:30:27 +04:00
Tetiana Churikova	ea3b090265	e2e: change numpocesses (#16494 )	2023-07-05 14:59:36 +02:00