chore: update status-go version

* feat: dapps tab

.carve_ignore

@@ -136,11 +136,6 @@ quo.animated/re-timing
 quo.design-system.colors/white
 quo.design-system.colors/black
 status-im.transport.core-test/messages
-status-im.ethereum.core/sidechain?
-status-im.ethereum.core/network-with-upstream-rpc?
-status-im.ethereum.core/current-address
-status-im.ethereum.core/network->network-name
-status-im.ethereum.core/estimate-gas
 quo.core/animated-header
 quo.core/safe-area-provider
 quo.core/safe-area-consumer

.clj-kondo/config.edn

@@ -9,23 +9,29 @@
                 status-im.utils.styles/defn    clojure.core/defn
                 test-helpers.unit/deftest-sub  clojure.core/defn
                 taoensso.tufte/defnp           clojure.core/defn}
- :linters      {:clj-kondo-config              {:level :error}
+ :linters      {:case-duplicate-test           {:level :error}
+                :case-quoted-test              {:level :error}
+                :case-symbol-test              {:level :error}
+                :clj-kondo-config              {:level :error}
                 :cond-else                     {:level :error}
                 :consistent-alias              {:level   :error
                                                 :aliases {clojure.string  string
                                                           clojure.set     set
                                                           clojure.walk    walk
                                                           taoensso.timbre log}}
+                :deprecated-namespace          {:level :warning}
                 :docstring-blank               {:level :error}
+                :equals-true                   {:level :error}
                 :inline-def                    {:level :error}
                 :invalid-arity                 {:skip-args [status-im.utils.fx/defn utils.re-frame/defn]}
                 :loop-without-recur            {:level :error}
+                :minus-one                     {:level :error}
                 :misplaced-docstring           {:level :error}
                 :missing-body-in-when          {:level :error}
                 :missing-clause-in-try         {:level :error}
                 :missing-else-branch           {:level :error}
                 :not-empty?                    {:level :error}
-                :quoted-case-test-constant     {:level :error}
+                :plus-one                      {:level :error}
                 :redundant-do                  {:level :error}
                 :redundant-let                 {:level :error}
                 :refer-all                     {:level :error}
@@ -48,6 +54,8 @@
                                                           number
                                                           status-im.test-helpers/restore-app-db]}
                 :unresolved-var                {:level :error}
+                :uninitialized-var             {:level :error}
+                :unused-alias                  {:level :warning}
                 :unused-binding                {:level :error}
                 :unused-import                 {:level :error}
                 :unused-namespace              {:level :error}

.env

@@ -33,3 +33,4 @@ SWAP_ENABLED=1
 STICKERS_TEST_ENABLED=1
 LOCAL_PAIRING_ENABLED=1
 TEST_STATEOFUS=1
+FAST_CREATE_COMMUNITY_ENABLED=1

.env.release

@@ -19,3 +19,4 @@ ENABLE_ROOT_ALERT=1
 MAX_IMAGES_BATCH=1
 DELETE_MESSAGE_ENABLED=1
 COLLECTIBLES_ENABLED=1
+FAST_CREATE_COMMUNITY_ENABLED=0

.github/PULL_REQUEST_TEMPLATE.md

@@ -63,4 +63,10 @@ Documentation change PR (review please): https://github.com/status-im/status.im/
 
 <!-- (PRs will only be accepted if squashed into single commit.) -->
 
+### Before and after screenshots comparison
+
+| Figma (if available) | iOS (if available)    | Android (if available)
+| --- | --- | --- |
+| Please embed Image/Video here of the before and after.  | Please embed Image/Video here of the before and after.  | Please embed Image/Video here of the before and after. |
+
 status: ready <!-- Can be ready or wip -->

.zprintrc

@@ -31,6 +31,7 @@
   "defview"         :arg1-body
   "letsubs"         :binding
   "with-let"        "let"
+  "reg-event-fx"    :arg1-pair
   "testing"         :arg1-body
   "deftest-sub"     :arg1-body
   "wait-for"        :arg1-body

Makefile

@@ -309,9 +309,11 @@ $$(comm -23 <(sort <(git ls-files --cached --others --exclude-standard)) <(sort
 endef
 
 lint: export TARGET := clojure
+lint: export CLJ_LINTER_PRINT_WARNINGS ?= false
 lint: ##@test Run code style checks
 	@sh scripts/lint-re-frame-in-quo-components.sh && \
-	clj-kondo --config .clj-kondo/config.edn --cache false --fail-level error --lint src && \
+	sh scripts/lint-old-quo-usage.sh && \
+	clj-kondo --config .clj-kondo/config.edn --cache false --fail-level error --lint src $(if $(filter $(CLJ_LINTER_PRINT_WARNINGS),true),,| grep -v ': warning: ') && \
 	ALL_CLOJURE_FILES=$(call find_all_clojure_files) && \
 	zprint '{:search-config? true}' -sfc $$ALL_CLOJURE_FILES && \
 	sh scripts/lint-trailing-newline.sh && \
@@ -360,6 +362,7 @@ component-test-watch: export TARGET := clojure
 component-test-watch: export COMPONENT_TEST := true
 component-test-watch: export BABEL_ENV := test
 component-test-watch: ##@ Watch tests and re-run no changes to cljs files
+	rm -rf ./component-spec
 	yarn install
 	nodemon --exec 'yarn shadow-cljs compile component-test && jest --config=test/jest/jest.config.js' -e cljs
 
@@ -367,6 +370,7 @@ component-test: export TARGET := clojure
 component-test: export COMPONENT_TEST := true
 component-test: export BABEL_ENV := test
 component-test: ##@test Run component tests once in NodeJS
+	rm -rf ./component-spec
 	yarn install
 	yarn shadow-cljs compile component-test && \
 	jest --config=test/jest/jest.config.js

README.md

@@ -16,7 +16,7 @@ We believe in a medium of pure free trade, economies with fair, permission-less
 
 We want to take responsibility for our data, the way we conduct ourselves privately and promote this way of life to a mass audience.
 
-We want deep insights into our own economies so we can make informed, data-driven decisions on how to make our lives better. The Ethereum blockchain, Smart Contracts, Swarm and Whisper provides us a path forward.
+We want deep insights into our own economies so we can make informed, data-driven decisions on how to make our lives better. The Ethereum blockchain, Smart Contracts, Swarm and Whisper provide us a path forward.
 
 If this interests you, **help us make Status a reality** - anyone can contribute and we need everyone at any skill level to participate.
 

ci/Jenkinsfile.android

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

ci/Jenkinsfile.combined

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

ci/Jenkinsfile.e2e-nightly

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

ci/Jenkinsfile.ios

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

ci/Jenkinsfile.tests

@@ -1,5 +1,5 @@
 #!/usr/bin/env groovy
-library 'status-jenkins-lib@v1.7.14'
+library 'status-jenkins-lib@v1.7.15'
 
 /* Options section can't access functions in objects. */
 def isPRBuild = utils.isPRBuild()
@@ -48,7 +48,7 @@ pipeline {
           steps {
             sh """#!/bin/bash
               set -eo pipefail
-              make lint 2>&1 | tee ${LOG_FILE}
+              make lint CLJ_LINTER_PRINT_WARNINGS=true 2>&1 | tee ${LOG_FILE}
             """
           }
         }

ci/tests/Jenkinsfile.e2e-nightly

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

ci/tests/Jenkinsfile.e2e-prs

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

ci/tests/Jenkinsfile.e2e-upgrade

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

ci/tools/Jenkinsfile.fastlane-clean

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

ci/tools/Jenkinsfile.nix-cache

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

ci/tools/Jenkinsfile.playstore-meta

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

ci/tools/Jenkinsfile.xcode-clean

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

doc/README.md

@@ -35,6 +35,11 @@
 [Component tests (jest) overview](component-tests-overview.md)
 
 
+## Project details
+
+[status-go introduction (recorded meeting)](https://drive.google.com/file/d/1B7TljmTZ8fHkqJH8ChU1Cp4FGDFM03gq/view)
+
+[re-frame usage (recorded meeting)](https://drive.google.com/file/d/1qv_E0CEGzQpu_zGXD0gCTU5EvhC2k8Jy/view)
 
 ## Misc
 

doc/debugging.md

@@ -45,6 +45,42 @@ To do this:
 
 ![geth.log path](images/debugging/geth-path.png)
 
+## Inspecting database content
+
+Encrypted database can be found using commands:
+```
+cd ~/Library/Developer/CoreSimulator/Devices
+find ./ -name accounts.sql
+```
+
+To get unencrypted database you need to export it first:
+- open the status app in simulator
+- on login screen enter the correct password without logging in
+- using repl execute statement to export db:
+   ```
+   (re-frame.core/dispatch [:multiaccounts.login.ui/export-db-submitted])
+   ```
+- save generated `export.db` file
+
+Now you can locate the `export.db` and open it with preferred db viewer.
+
+**Android:**
+
+```sh
+adb root
+adb pull /storage/emulated/0/Android/data/im.status.ethereum.debug/files/Download/export.db /path/to/store/export.db
+```
+
+If you're using a release build, change the path to `/storage/emulated/0/Android/data/im.status.ethereum/files/Download`
+
+**iOS**
+
+```
+cd ~/Library/Developer/CoreSimulator/Devices
+find ./ -name export.db
+```
+
+
 
 ## Tips
 ### From @ilmotta:
@@ -62,3 +98,4 @@ Also to inspect logs in a more flexible manner, instead of the strict output fro
 ```
 adb logcat | grep 'ReactNativeJS\|StatusModule\|GoLog'
 ```
+

doc/decisions/UI-related/7-august-2023-paste-button-ux.md

@@ -0,0 +1,31 @@
+### How should the paste button behave when clipboard is empty?
+
+This question first came up as a review comment to this PR  
+https://github.com/status-im/status-mobile/pull/16852
+
+There were 2 considerations : 
+- Either keep the paste button disabled when there is nothing in the clipboard OR
+- Always keep the paste button enabled 
+
+There were positives and negatives for both approaches.
+
+Positives of keeping paste button disabled when there is nothing in clipboard would require us to 
+check the value of clipboard as soon as the component is mounted (i.e when the user first sees
+the screen). In iOS this means a native permissions dialog would appear requesting for permissions
+to paste from the clipboard.
+
+Negatives of this approach is that as soon as any user navigates to this screen they are greeted with 
+this popup which can be annoying sometimes.
+
+Positives of keeping paste button always enabled is that we can trigger a request to the clipboard on
+tap of the paste button which would trigger the native permissions dialog requesting for permissions 
+to paste from the clipboard.
+In this case seeing this dialog is okay because the user has initiated a paste action.
+
+Negatives of this approach is that in the event the clipboard is empty the user will still see the 
+system dialog and on approving nothing will be pasted (because the clipboard was empty).
+This behaviour can be confusing.
+
+On consulting the Design Team via discord it was concluded that out of the two approaches
+having the paste button always enabled is a better UX overall.
+

doc/export-icons.md

@@ -12,4 +12,4 @@
     [vector-icons/icon :icon-name {:color ...}] 
     ```
     2x@2x
-4. If you want paltform specific icon use `.android` or `.ios` suffixes.  Example `icon_name@2x.android.png`.:w
+4. If you want platform specific icon use `.android` or `.ios` suffixes.  Example `icon_name@2x.android.png`.:w

doc/how-to-launch-e2e.md

@@ -19,7 +19,7 @@ For now we support e2e for Android only.
 ## What's happening when any e2e job is running
 Whenever we need to push set of test scripts we create 16 parallel sessions (max, but depending on amount of cases that are included in job) and each thread: 1) uploads Android .apk file to SauceLabs -> 2) runs through the test steps -> 3) receives results whether test failed on particular step or succeeded with no errors -> 3) Parse test results and push them as a Github comment (if the suite ran against respective PR) and into TestRail.
 
-We push **whole automation test suite (currently 155, amout is changing)** against each nightly build (if the nightly builds job succeeded). Results of the test run are saved in TestRail.
+We push **whole automation test suite (currently 155, amount is changing)** against each nightly build (if the nightly builds job succeeded). Results of the test run are saved in TestRail.
 And also we push set of autotests whenever PR with successful builds got moved in to `E2E Tests` column from [Pipeline for QA dashboard ](https://github.com/status-im/status-react/projects/7). 
 In that case we save results in TestRail as well and push a comment with test results in a respective PR.
 
@@ -49,8 +49,8 @@ Params to specify:
 - apk: [url_to_apk_build_here]
 - pr_id: pull request number (e.g. 1234)
 - branch: branch name from which the test are taken (in most of cases `develop`)
-- keyword expression: tests by area (let's say `ens` or `chat`, thay can be combined`ens or chat or send_tx`. All keywords can be found in testrail, ping Chu for details)
-- test_marks: tests by priorities (by default: `critical or high or medium`, which corresponds the whole suite; to lauch the same suite as in PRs, use `critical or high`)
+- keyword expression: tests by area (let's say `ens` or `chat`, they can be combined`ens or chat or send_tx`. All keywords can be found in testrail, ping Chu for details)
+- test_marks: tests by priorities (by default: `critical or high or medium`, which corresponds the whole suite; to launch the same suite as in PRs, use `critical or high`)
 - testrail_case_id: here is the list of test cases which you may find in test rail (4-digit value)
 
 For easier access you can hit `Rerun tests` in GH comment and testrail_case_id/ apk_name/ pr_id  will be filled automatically. For making sure that tests are being rerun on most recent e2e build it is recommended to paste link to the last e2e build in apk_name field. The list of PR builds can be found in Jenkins Builds block on PR page. 

doc/ide-setup.md

@@ -90,7 +90,7 @@ Press the green run button
 
 <img src="images/ide-setup/8_REPL_6.png" width=75% />
 
-You should now see an dialog with the following message:
+You should now see a dialog with the following message:
 
 ```shell
 Connecting to remote nREPL server...

doc/new-guidelines.md

@@ -467,21 +467,28 @@ Prefer the pure version of `:json-rpc/call` (no callbacks).
 
 ### Registering event handlers
 
-Events must always be declared with the `utils.fx/defn` macro. Also, don't use
+Register events with `re-frame.core/reg-event-fx` and follow [re-frame's best
+practice](https://github.com/day8/re-frame/blob/39adca93673f334dc751ee2d99d340b51a9cc6db/docs/FAQs/BestPractice.md#use-the-fx-effect)
+so use only `:db` and `:fx` effects. `rf/merge` is deprecated and should not be
+used in the new code in `src/status_im2/`. Don't use
 `re-frame.core/reg-event-db`.
 
 ```clojure
 ;; bad
-(re-frame/reg-event-fx
- :wakuv2.ui/save-all-confirmed
- (fn [{:keys [db] :as cofx}]
-   ...))
+(rf/defn invite-people-pressed
+  {:events [:communities/invite-people-pressed]}
+  [cofx id]
+  (rf/merge cofx
+            (reset-community-id-input id)
+            (bottom-sheet/hide-bottom-sheet)
+            (navigation/open-modal :invite-people-community {:invite? true})))
 
 ;; good
-(fx/defn save-all
-  {:events [:wakuv2.ui/save-all-confirmed]}
-  [{:keys [db] :as cofx}]
-  ...)
+(re-frame/reg-event-fx :communities/invite-people-pressed
+ (fn [{:keys [db]} [id]]
+   {:db (assoc db :communities/community-id-input id)
+    :fx [[:dispatch [:hide-bottom-sheet]]
+         [:dispatch [:open-modal :invite-people-community {:invite? true}]]]}))
 ```
 
 ### Registering top-level re-frame subscriptions
@@ -805,7 +812,7 @@ alternative.
 Please check the [Clojure Style](https://guide.clojure.style/#deprecated) documentation
 
 To reduce visual clutter from deprecated methods in your text editor, consult this [example](https://rider-support.jetbrains.com/hc/en-us/community/posts/4419728641810-How-to-disable-the-the-strike-thru-for-deprecated-methods-in-Javascript-#:~:text=Try%20disabling%20%22Preferences%20%7C%20Editor%20%7C,It%20works%20for%20me). The approach can be adapted for settings in VSCode, Emacs, VIM, and others.
-  
+
 ### Test structure
 
 [Unit tests](#glossary) should be created alongside their respective source

doc/starting-guide.md

@@ -4,7 +4,7 @@ This document provides information on how to start developing Status App.
 
 # Getting Started
 
-To start developing start a shell for platform you are interested in.
+To start developing start a shell for the platform you are interested in.
 ```
 make shell TARGET=android
 ```
@@ -55,7 +55,7 @@ Some manual steps are necessary for [developing on a physical iOS Device](#physi
 
 # Build release
 
-To build the app, your can simply run on of the following:
+To build the app, you can simply run on of the following:
 ```
 make release-android
 make release-ios
@@ -88,9 +88,9 @@ https://facebook.github.io/react-native/docs/getting-started.html
 
 ## Configure GitHub Account
 
-The optimal way of pushing to GitHubis using SSH instead of user/pass auth.
+The optimal way of pushing to GitHub is using SSH instead of user/pass auth.
 
-It's recommented that you [add your public SSH key to your GitHub account](https://help.github.com/en/github/authenticating-to-github/adding-a-new-ssh-key-to-your-github-account).
+It's recommended that you [add your public SSH key to your GitHub account](https://help.github.com/en/github/authenticating-to-github/adding-a-new-ssh-key-to-your-github-account).
 
 ## Configure GPG Keys for signing commits
 

ios/Podfile.lock

@@ -707,7 +707,7 @@ SPEC CHECKSUMS:
   FBLazyVector: a8af91c2b5a0029d12ff6b32e428863d63c48991
   FBReactNativeSpec: 1b2309b096448a1dc9d0c43999216f8fda809ae8
   fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
-  glog: d93527a855523adb8c113837db4be68fb00e230d
+  glog: 166d178815c300e8126de9a7900101814eb16253
   HMSegmentedControl: 34c1f54d822d8308e7b24f5d901ec674dfa31352
   Keycard: ac6df4d91525c3c82635ac24d4ddd9a80aca5fc8
   libwebp: f62cb61d0a484ba548448a4bd52aabf150ff6eef

nix/overlay.nix

@@ -38,6 +38,19 @@ in {
     };
   });
 
+  # Clojure's linter receives frequent upgrades, and we want to take advantage
+  # of the latest available rules.
+  clj-kondo = super.clj-kondo.override rec {
+    buildGraalvmNativeImage = args: super.buildGraalvmNativeImage (args // rec {
+      inherit (args) pname;
+      version = "2023.09.07";
+      src = super.fetchurl {
+        url = "https://github.com/clj-kondo/${pname}/releases/download/v${version}/${pname}-${version}-standalone.jar";
+        sha256 = "sha256-F7ePdITYKkGB6nsR3EFJ7zLDCUoT0g3i+AAjXzBd624=";
+      };
+    });
+  };
+
   # Checks fail on darwin.
   git-lfs = super.git-lfs.overrideAttrs (old: {
     doCheck = false;

nix/status-go/library/default.nix

@@ -22,7 +22,7 @@ buildGoPackage {
     runHook preBuild
     go build \
       -buildmode='c-archive' \
-      -tags='gowaku_skip_migrations' \
+      -tags='gowaku_skip_migrations gowaku_no_rln' \
       -o "$out/libstatus.a" \
       $NIX_BUILD_TOP/main.go
     runHook postBuild

nix/status-go/mobile/build.nix

@@ -48,7 +48,7 @@ in buildGoPackage {
       -target=${concatStringsSep "," targets} \
       ${optionalString isAndroid "-androidapi=${platformVersion}" } \
       ${optionalString isIOS "-iosversion=${platformVersion}" } \
-     -tags='${optionalString isIOS "nowatchdog"} gowaku_skip_migrations' \
+     -tags='${optionalString isIOS "nowatchdog"} gowaku_skip_migrations gowaku_no_rln' \
       -o ${outputFileName} \
       ${source.goPackagePath}/mobile
 

package.json

@@ -35,7 +35,6 @@
     "functional-red-black-tree": "^1.0.1",
     "i18n-js": "^3.3.0",
     "node-libs-react-native": "^1.2.1",
-    "qrcode": "^1.4.1",
     "react": "18.0.0",
     "react-dom": "18.0.0",
     "react-native": "0.69.10",

scripts/lint-old-quo-usage.sh

@@ -0,0 +1,13 @@
+#!/usr/bin/env sh
+
+set -euo pipefail
+
+QUO_USAGES=$(grep -r -E '\[quo\.[^ ]* :(?:as|refer)|\[quo\.[^ ]*\]' --include '*.cljs' --include '*.clj' './src/status_im2' --exclude='./src/status_im2/common/theme/core.cljs' || true)
+
+echo -e "\nChecking 'status_im2' namespace for 'quo' namespace usage."
+
+if [ -n "$QUO_USAGES" ]; then
+    echo -e "\033[0;31mERROR: Usage of the old 'quo' namespace detected in 'status_im2' code. Please update to 'quo2'. \n"
+    echo -e "$QUO_USAGES \033[0m"
+    exit 1
+fi

shadow-cljs.edn

@@ -129,6 +129,7 @@
     ;; needed because we use deref in tests
     :static-fns    false
     :optimizations :simple
+    :warnings      {:fn-deprecated false}
     :infer-externs true}}
 
   ;; mock.js-dependencies is mocking the react-native libraries

src/native_module/core.cljs

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

src/quo2/README.md

@@ -69,6 +69,35 @@ In the image above we can see the properties are `Type`, `State`, `Size`,
   ...)
 ```
 
+### Handling Sizes
+In the designs, sizes are referred to as integers. To avoid having the codebase littered with magic numbers we instead have a keyword convention to use in components to map these keywords with their sizes.
+
+The convention is `:size-<number>`, e.g size `20` is `:size-20`
+
+```clojure
+;; bad
+(defn button
+  [{:keys [size]}]
+  [rn/view
+   {:style {:height (case size
+                      20 20
+                      40 40
+                      0)}}]
+  ...)
+```
+
+```clojure
+;; good
+(defn button
+  [{:keys [size]}]
+  [rn/view
+   {:style {:height (case size
+                      :size-20 20
+                      :size-40 40
+                      0)}}]
+  ...)
+```
+
 ## Clojure var conventions
 
 - Due to the fact that every `view` namespace should export only one component

src/quo2/components/avatars/account_avatar/style.cljs

@@ -6,16 +6,20 @@
 (def default-padding 16)
 (def default-emoji-size 36)
 
+(def ^:private container-size
+  {:size-64 64})
+
 (defn get-border-radius
   [size]
   (case size
-    80 16
-    48 12
-    32 10
-    28 8
-    24 8
-    20 6
-    16 4
+    80       16
+    :size-64 16
+    48       12
+    32       10
+    28       8
+    24       8
+    20       6
+    16       4
     default-border-radius))
 
 (defn get-padding
@@ -33,29 +37,32 @@
 (defn get-emoji-size
   [size]
   (case size
-    80 36
-    48 24
-    32 15
-    28 12
-    24 11
-    20 11
-    16 11
+    80       36
+    :size-64 30
+    48       24
+    32       15
+    28       12
+    24       11
+    20       11
+    16       11
     default-emoji-size))
 
 (defn get-border-width
   [size]
-  (case size
-    16 0.8 ;; 0.8 px is for only size 16
-    ;; Rest of the size will have 1 px
-    1))
+  (if (= size 16)
+    0.8 ;; 0.8 px is for only size 16
+    1)) ;; Rest of the size will have 1 px
+
 
 (defn root-container
   [{:keys [type size theme customization-color]
     :or   {size                default-size
            customization-color :blue}}]
-  (let [watch-only? (= type :watch-only)]
-    (cond-> {:width            size
-             :height           size
+  (let [watch-only? (= type :watch-only)
+        width       (cond-> size
+                      (keyword? size) (container-size size))]
+    (cond-> {:width            width
+             :height           width
              :background-color (colors/custom-color-by-theme customization-color 50 60 nil nil theme)
              :border-radius    (get-border-radius size)
              :border-color     (if (= theme :light) colors/neutral-80-opa-5 colors/white-opa-5)

src/quo2/components/avatars/channel_avatar/component_spec.cljs

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

src/quo2/components/avatars/channel_avatar/style.cljs

@@ -5,17 +5,27 @@
 
 (defn outer-container
   [{:keys [size color]}]
-  (let [size (if (= size :size/l) 32 24)]
-    {:width            size
-     :height           size
-     :border-radius    size
+  (let [container-size (case size
+                         :size-64 64
+                         :size-32 32
+                         24)]
+    {:width            container-size
+     :height           container-size
+     :border-radius    container-size
      :justify-content  :center
      :align-items      :center
      :background-color (colors/theme-alpha color 0.1 0.1)}))
 
+(defn emoji-size
+  [size]
+  {:font-size (case size
+                :size-64 24
+                :size-32 15
+                11)})
+
 (defn lock-container
   [size]
-  (let [distance (if (= size :size/l) 20 12)]
+  (let [distance (if (= size :size-32) 20 12)]
     {:position         :absolute
      :left             distance
      :top              distance

src/quo2/components/avatars/channel_avatar/view.cljs

@@ -5,17 +5,19 @@
             [quo2.components.markdown.text :as text]
             [quo2.foundations.colors :as colors]
             [react-native.core :as rn]
-            utils.string))
+            [utils.string]))
 
 (defn- initials
   [full-name size color]
-  (let [amount-initials (if (= size :size/l) 2 1)
+  (let [amount-initials (if (#{:size-32 :size-64} size) 2 1)
         channel-name    (string/replace full-name "#" "")]
     [text/text
-     {:accessibility-label :initials
-      :size                :paragraph-2
-      :weight              :semi-bold
-      :style               {:color color}}
+     (cond-> {:accessibility-label :initials
+              :style               {:color color}
+              :size                :paragraph-2
+              :weight              :semi-bold}
+       (= size :size-64) (assoc :size   :heading-1
+                                :weight :medium))
      (utils.string/get-initials channel-name amount-initials)]))
 
 (defn- lock
@@ -54,8 +56,8 @@
     :style               (style/outer-container {:size size :color customization-color})}
    (if (string/blank? emoji)
      [initials full-name size customization-color]
-     [text/text
-      {:accessibility-label :emoji
-       :size                (if (= size :size/l) :paragraph-1 :label)}
+     [rn/text
+      {:style               (style/emoji-size size)
+       :accessibility-label :emoji}
       (string/trim emoji)])
    [lock locked? size]])

src/quo2/components/avatars/collection_avatar/component_spec.cljs

@@ -0,0 +1,16 @@
+(ns quo2.components.avatars.collection-avatar.component-spec
+  (:require [quo2.components.avatars.collection-avatar.view :as collection-avatar]
+            [quo2.foundations.resources :as resources]
+            [test-helpers.component :as h]))
+
+(h/describe "collection avatar"
+  (h/describe "Profile picture"
+    (h/test "Doesn't crash without image"
+      (h/render
+       [collection-avatar/view])
+      (h/is-truthy (h/get-by-label-text :collection-avatar)))
+
+    (h/test "Renders with image"
+      (h/render
+       [collection-avatar/view {:image (resources/get-image :bored-ape)}])
+      (h/is-truthy (h/get-by-label-text :collection-avatar)))))

src/quo2/components/avatars/collection_avatar/style.cljs

@@ -0,0 +1,10 @@
+(ns quo2.components.avatars.collection-avatar.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(defn collection-avatar
+  [theme]
+  {:width         24
+   :height        24
+   :border-width  1
+   :border-color  (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme)
+   :border-radius 6})

src/quo2/components/avatars/collection_avatar/view.cljs

@@ -0,0 +1,17 @@
+(ns quo2.components.avatars.collection-avatar.view
+  (:require [quo2.components.avatars.collection-avatar.style :as style]
+            [quo2.theme :as quo.theme]
+            [react-native.fast-image :as fast-image]))
+
+(defn- view-internal
+  "Opts:
+   
+    :image - collection image
+    :theme - keyword -> :light/:dark"
+  [{:keys [image theme]}]
+  [fast-image/fast-image
+   {:accessibility-label :collection-avatar
+    :source              image
+    :style               (style/collection-avatar theme)}])
+
+(def view (quo.theme/with-theme view-internal))

src/quo2/components/avatars/group_avatar/view.cljs

@@ -7,30 +7,31 @@
             [quo2.components.avatars.group-avatar.style :as style]))
 
 (def sizes
-  {:size/s-20 {:icon      12
-               :container 20}
-   :size/s-28 {:icon      16
-               :container 28}
-   :size/s-32 {:icon      16
-               :container 32}
-   :size/s-48 {:icon      20
-               :container 48}
-   :size/s-80 {:icon      32
-               :container 80}})
+  {:size-20 {:icon      12
+             :container 20}
+   :size-28 {:icon      16
+             :container 28}
+   :size-32 {:icon      16
+             :container 32}
+   :size-48 {:icon      20
+             :container 48}
+   :size-80 {:icon      32
+             :container 80}})
 
 (defn- view-internal
   [_]
   (fn [{:keys [size theme customization-color picture icon-name]
-        :or   {size                :size/s-20
+        :or   {size                :size-20
                customization-color :blue
                picture             nil
                icon-name           :i/group}}]
     (let [container-size (get-in sizes [size :container])
           icon-size      (get-in sizes [size :icon])]
       [rn/view
-       {:style (style/container {:container-size      container-size
-                                 :customization-color customization-color
-                                 :theme               theme})}
+       {:accessibility-label :group-avatar
+        :style               (style/container {:container-size      container-size
+                                               :customization-color customization-color
+                                               :theme               theme})}
        (if picture
          [fast-image/fast-image
           {:source picture

src/quo2/components/avatars/icon_avatar.cljs

@@ -5,19 +5,19 @@
             [react-native.core :as rn]))
 
 (def ^:private sizes
-  {:size/s-48 {:component 48
-               :icon      20}
-   :size/s-32 {:component 32
-               :icon      20}
-   :size/s-24 {:component 24
-               :icon      16}
-   :size/s-20 {:component 20
-               :icon      12}})
+  {:size-48 {:component 48
+             :icon      20}
+   :size-32 {:component 32
+             :icon      20}
+   :size-24 {:component 24
+             :icon      16}
+   :size-20 {:component 20
+             :icon      12}})
 
 (defn icon-avatar-internal
   [{:keys [size icon color opacity border? theme]
     :or   {opacity 20
-           size    :size/s-32}}]
+           size    :size-32}}]
   (let [{component-size :component icon-size :icon} (get sizes size)
         circle-color                                (colors/custom-color color 50 opacity)
         icon-color                                  (colors/custom-color-by-theme color 50 60)]

src/quo2/components/avatars/user_avatar/style.cljs

@@ -2,48 +2,54 @@
   (:require [quo2.foundations.colors :as colors]))
 
 (def sizes
-  {:big    {:dimensions                      80
-            :status-indicator                12
-            :status-indicator-border         4
-            :status-indicator-center-to-edge 12
-            :font-size                       :heading-1
-            :ring-width                      4}
-   :medium {:dimensions                      48
-            :status-indicator                8
-            :status-indicator-border         2
-            :status-indicator-center-to-edge 6
-            :font-size                       :heading-2
-            :ring-width                      2}
-   :small  {:dimensions                      32
-            :status-indicator                8
-            :status-indicator-border         2
-            :status-indicator-center-to-edge 4
-            :font-size                       :paragraph-2
-            :ring-width                      2}
-   28      {:dimensions                      28
-            :status-indicator                0
-            :status-indicator-border         0
-            :status-indicator-center-to-edge 0
-            :font-size                       :paragraph-2
-            :ring-width                      0}
-   :xs     {:dimensions                      24
-            :status-indicator                0
-            :status-indicator-border         0
-            :status-indicator-center-to-edge 0
-            :font-size                       :paragraph-2
-            :ring-width                      2}
-   :xxs    {:dimensions                      20
-            :status-indicator                0
-            :status-indicator-border         0
-            :status-indicator-center-to-edge 0
-            :font-size                       :label
-            :ring-width                      2}
-   :xxxs   {:dimensions                      16
-            :status-indicator                0
-            :status-indicator-border         0
-            :status-indicator-center-to-edge 0
-            :font-size                       :label
-            :ring-width                      2}})
+  {:big     {:dimensions                      80
+             :status-indicator                12
+             :status-indicator-border         4
+             :status-indicator-center-to-edge 12
+             :font-size                       :heading-1
+             :ring-width                      4}
+   :size-64 {:dimensions                      64
+             :status-indicator                8
+             :status-indicator-border         2
+             :status-indicator-center-to-edge 6
+             :font-size                       :heading-1
+             :ring-width                      2}
+   :medium  {:dimensions                      48
+             :status-indicator                8
+             :status-indicator-border         2
+             :status-indicator-center-to-edge 6
+             :font-size                       :heading-2
+             :ring-width                      2}
+   :small   {:dimensions                      32
+             :status-indicator                8
+             :status-indicator-border         2
+             :status-indicator-center-to-edge 4
+             :font-size                       :paragraph-2
+             :ring-width                      2}
+   28       {:dimensions                      28
+             :status-indicator                0
+             :status-indicator-border         0
+             :status-indicator-center-to-edge 0
+             :font-size                       :paragraph-2
+             :ring-width                      0}
+   :xs      {:dimensions                      24
+             :status-indicator                0
+             :status-indicator-border         0
+             :status-indicator-center-to-edge 0
+             :font-size                       :paragraph-2
+             :ring-width                      2}
+   :xxs     {:dimensions                      20
+             :status-indicator                0
+             :status-indicator-border         0
+             :status-indicator-center-to-edge 0
+             :font-size                       :label
+             :ring-width                      2}
+   :xxxs    {:dimensions                      16
+             :status-indicator                0
+             :status-indicator-border         0
+             :status-indicator-center-to-edge 0
+             :font-size                       :label
+             :ring-width                      2}})
 
 (defn initials-avatar
   [size customization-color theme]

src/quo2/components/avatars/user_avatar/view.cljs

@@ -35,11 +35,11 @@
    :indicator-size   status indicator outer radius, set to nil or 0 when no indicator
    :indicator-border `indicator-size`-`indicator-border` is the inner radius
    :indicator-color  color for status indicator
-   :theme   :light or :dark
+   :theme            :light or :dark
    :background-color intials avatar background color
    :color            intials avatar text color
    :size             intials avatar radius
-   :ring?            render ident ring around avatar?}
+   :ring?            render ident ring around avatar? NOTE: this option may not work if override-ring? is not nil}
 
   supported color formats:
   #RRGGBB

src/quo2/components/avatars/wallet_user_avatar.cljs

@@ -8,28 +8,31 @@
   {:small   20
    :medium  32
    :large   48
+   :size-64 64
    :x-large 80})
 
 (def font-sizes
   {:small   :label
    :medium  :paragraph-2
    :large   :paragraph-1
+   :size-64 :heading-1
    :x-large :heading-1})
 
 (def font-weights
   {:small   :medium
    :medium  :semi-bold
    :large   :semi-bold
+   :size-64 :medium
    :x-large :medium})
 
 (defn wallet-user-avatar
   "params, first name, last name, color, size
    and if it's dark or not!"
-  [{:keys [f-name l-name color size]
-    :or   {f-name "John"
-           l-name "Doe"
-           color  :red
-           size   :x-large}}]
+  [{:keys [f-name l-name customization-color size]
+    :or   {f-name              "John"
+           l-name              "Doe"
+           customization-color :red
+           size                :x-large}}]
   (let [circle-size    (size circle-sizes)
         small?         (= size :small)
         f-name-initial (-> f-name
@@ -38,8 +41,8 @@
         l-name-initial (-> l-name
                            string/upper-case
                            (subs 0 1))
-        circle-color   (colors/custom-color color 50 20)
-        text-color     (colors/custom-color-by-theme color 50 60)]
+        circle-color   (colors/custom-color customization-color 50 20)
+        text-color     (colors/custom-color-by-theme customization-color 50 60)]
     [rn/view
      {:style {:width            circle-size
               :height           circle-size

src/quo2/components/buttons/button/properties.cljs

@@ -1,6 +1,8 @@
 (ns quo2.components.buttons.button.properties
   (:require [quo2.foundations.colors :as colors]))
 
+(def backgrounds #{:photo :blur})
+
 (defn custom-color-type
   [customization-color icon-only?]
   {:icon-color       colors/white-opa-70

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

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

src/quo2/components/buttons/composer_button/style.cljs

@@ -5,8 +5,8 @@
   [{:keys [pressed? blur? theme]}]
   (cond
     (and pressed? blur?) (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-20 theme)
-    (= pressed? true)    (colors/theme-colors colors/neutral-40 colors/neutral-60 theme)
-    (= blur? true)       (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme)
+    pressed?             (colors/theme-colors colors/neutral-40 colors/neutral-60 theme)
+    blur?                (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme)
     :else                (colors/theme-colors colors/neutral-30 colors/neutral-70 theme)))
 
 (defn get-label-color

src/quo2/components/buttons/slide_button/animations.cljs

@@ -70,7 +70,7 @@
   [sliding-complete?]
   (reset! sliding-complete? true))
 
-(defn- reset-track-position
+(defn reset-track-position
   [x-pos]
   (animate-spring x-pos 0))
 

src/quo2/components/buttons/slide_button/component_spec.cljs

@@ -1,7 +1,6 @@
 (ns quo2.components.buttons.slide-button.component-spec
   (:require [quo2.components.buttons.slide-button.view :as slide-button]
             [quo2.components.buttons.slide-button.constants :as constants]
-            [quo2.components.buttons.slide-button.utils :as utils]
             ["@testing-library/react-native" :as rtl]
             ["react-native-gesture-handler/jest-utils" :as gestures-jest]
             [reagent.core :as r]
@@ -82,17 +81,11 @@
       (h/has-style track-mock {:opacity constants/disable-opacity})))
 
   (h/test "render the small button"
-    (h/render [slide-button/view (assoc default-props :size :small)])
+    (h/render [slide-button/view (assoc default-props :size :size/s-40)])
     (let [mock         (h/get-by-test-id :slide-button-track)
           small-height (:track-height constants/small-dimensions)]
       (h/has-style mock {:height small-height})))
 
-  (h/test "render with the correct customization-color"
-    (h/render [slide-button/view (assoc default-props :customization-color :purple)])
-    (let [track-mock   (h/get-by-test-id :slide-button-track)
-          purple-color (utils/slider-color :track :purple)]
-      (h/has-style track-mock {:backgroundColor purple-color})))
-
   (h/test
     "calls on-complete when dragged"
     (let [props          (merge default-props {:on-complete (h/mock-fn)})

src/quo2/components/buttons/slide_button/style.cljs

@@ -13,10 +13,10 @@
    :right    0})
 
 (defn thumb-container
-  [interpolate-track thumb-size customization-color]
+  [{:keys [interpolate-track thumb-size customization-color theme]}]
   (reanimated/apply-animations-to-style
    {:transform [{:translate-x (interpolate-track :track-clamp)}]}
-   {:background-color (utils/slider-color :main customization-color)
+   {:background-color (utils/slider-color :main customization-color theme)
     :border-radius    12
     :height           thumb-size
     :width            thumb-size
@@ -46,7 +46,7 @@
     :justify-content :space-around}))
 
 (defn track
-  [disabled? customization-color height]
+  [{:keys [disabled? customization-color height theme]}]
   {:align-items      :flex-start
    :justify-content  :center
    :border-radius    14
@@ -54,7 +54,7 @@
    :align-self       :stretch
    :padding          constants/track-padding
    :opacity          (if disabled? 0.3 1)
-   :background-color (utils/slider-color :track customization-color)})
+   :background-color (utils/slider-color :track customization-color theme)})
 
 (defn track-cover
   [interpolate-track]
@@ -74,7 +74,7 @@
    :width           track-width})
 
 (defn track-text
-  [customization-color]
+  [customization-color theme]
   (-> typography/paragraph-1
       (merge typography/font-medium)
-      (assoc :color (utils/slider-color :main customization-color))))
+      (assoc :color (utils/slider-color :main customization-color theme))))

src/quo2/components/buttons/slide_button/utils.cljs

@@ -6,9 +6,15 @@
 (defn slider-color
   "- `color-key`               `:main`/`:track`
    - `customization-color` Customization color"
-  [color-key customization-color]
-  (let [colors-by-key {:main  (colors/custom-color-by-theme customization-color 50 60)
-                       :track (colors/custom-color-by-theme customization-color 50 60 10 10)}]
+  [color-key customization-color theme]
+  (let [colors-by-key {:main  (colors/theme-colors
+                               (colors/custom-color customization-color 50)
+                               (colors/custom-color customization-color 60)
+                               theme)
+                       :track (colors/theme-colors
+                               (colors/custom-color customization-color 50 10)
+                               (colors/custom-color customization-color 60 10)
+                               theme)}]
     (color-key colors-by-key)))
 
 (defn clamp-value
@@ -28,8 +34,8 @@
 (defn get-dimensions
   [track-width size dimension-key]
   (let [default-dimensions (case size
-                             :small constants/small-dimensions
-                             :large constants/large-dimensions
+                             :size/s-40 constants/small-dimensions
+                             :size/s-48 constants/large-dimensions
                              constants/large-dimensions)]
     (-> default-dimensions
         (merge {:usable-track (calc-usable-track

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

@@ -10,7 +10,8 @@
     [reagent.core :as reagent]
     [oops.core :as oops]
     [react-native.reanimated :as reanimated]
-    [quo2.components.buttons.slide-button.constants :as constants]))
+    [quo2.components.buttons.slide-button.constants :as constants]
+    [quo2.theme :as quo.theme]))
 
 (defn- f-slider
   [{:keys [disabled?]}]
@@ -20,14 +21,15 @@
         on-track-layout    (fn [evt]
                              (let [width (oops/oget evt "nativeEvent.layout.width")]
                                (reset! track-width width)))]
-
-    (fn [{:keys [on-complete
+    (fn [{:keys [on-reset
+                 on-complete
                  track-text
                  track-icon
                  disabled?
                  customization-color
                  size
-                 container-style]}]
+                 container-style
+                 theme]}]
       (let [x-pos             (reanimated/use-shared-value 0)
             dimensions        (partial utils/get-dimensions
                                        (or @track-width constants/default-width)
@@ -36,12 +38,19 @@
                                        x-pos
                                        (dimensions :usable-track)
                                        (dimensions :thumb))]
-
         (rn/use-effect (fn []
                          (when @sliding-complete?
                            (on-complete)))
                        [@sliding-complete?])
 
+        (rn/use-effect (fn []
+                         (when on-reset
+                           (reset! sliding-complete? false)
+                           (reset! gestures-disabled? false)
+                           (animations/reset-track-position x-pos)
+                           (on-reset)))
+                       [on-reset])
+
         [gesture/gesture-detector
          {:gesture (animations/drag-gesture x-pos
                                             gestures-disabled?
@@ -50,21 +59,25 @@
                                             sliding-complete?)}
          [reanimated/view
           {:test-ID   :slide-button-track
-           :style     (merge (style/track disabled? customization-color (dimensions :track-height))
+           :style     (merge (style/track {:disabled?           disabled?
+                                           :customization-color customization-color
+                                           :height              (dimensions :track-height)
+                                           :theme               theme})
                              container-style)
            :on-layout (when-not (some? @track-width)
                         on-track-layout)}
           [reanimated/view {:style (style/track-cover interpolate-track)}
            [rn/view {:style (style/track-cover-text-container @track-width)}
             [icon/icon track-icon
-             {:color (utils/slider-color :main customization-color)
+             {:color (utils/slider-color :main customization-color theme)
               :size  20}]
             [rn/view {:width 4}]
-            [rn/text {:style (style/track-text customization-color)} track-text]]]
+            [rn/text {:style (style/track-text customization-color theme)} track-text]]]
           [reanimated/view
-           {:style (style/thumb-container interpolate-track
-                                          (dimensions :thumb)
-                                          customization-color)}
+           {:style (style/thumb-container {:interpolate-track   interpolate-track
+                                           :thumb-size          (dimensions :thumb)
+                                           :customization-color customization-color
+                                           :theme               theme})}
            [reanimated/view {:style (style/arrow-icon-container interpolate-track)}
             [icon/icon :arrow-right
              {:color colors/white
@@ -76,16 +89,19 @@
              {:color colors/white
               :size  20}]]]]]))))
 
-(defn view
+(defn- view-internal
   "Options
   - `on-complete`         Callback called when the sliding is complete
   - `disabled?`           Boolean that disables the button
                           (_and gestures_)
-  - `size`                `:small`/`:large`
+  - `size`                :size/s-40`/`:size/s-48`
   - `track-text`          Text that is shown on the track
   - `track-icon`          Key of the icon shown on the track
                           (e.g. `:face-id`)
   - `customization-color` Customization color
+  - `on-reset`            A callback which can be used to reset the component and run required functionality
   "
   [props]
   [:f> f-slider props])
+
+(def view (quo.theme/with-theme view-internal))

src/quo2/components/buttons/wallet_button/style.cljs

@@ -3,7 +3,7 @@
 
 (defn get-border-color
   [{:keys [pressed? theme]}]
-  (if (= pressed? true)
+  (if pressed?
     (colors/theme-colors colors/neutral-40 colors/neutral-60 theme)
     (colors/theme-colors colors/neutral-30 colors/neutral-70 theme)))
 

src/quo2/components/calendar/calendar/utils.cljs

@@ -6,7 +6,7 @@
 (defn generate-years
   [current-year]
   (let [current-year current-year]
-    (reverse (vec (range (- current-year 100) (+ current-year 1))))))
+    (reverse (vec (range (- current-year 100) (inc current-year))))))
 
 (defn current-year
   []

src/quo2/components/code/code/style.cljs

@@ -1,87 +0,0 @@
-(ns quo2.components.code.code.style
-  (:require [quo2.foundations.colors :as colors]))
-
-;; Example themes:
-;; https://github.com/react-syntax-highlighter/react-syntax-highlighter/tree/master/src/styles/hljs
-(defn theme
-  [theme-key]
-  (case theme-key
-    :hljs-comment (colors/theme-colors colors/neutral-40 colors/neutral-60)
-    :hljs-title   (colors/custom-color-by-theme :sky 50 60)
-    :hljs-keyword (colors/custom-color-by-theme :green 50 60)
-    :hljs-string  (colors/custom-color-by-theme :turquoise 50 60)
-    :hljs-literal (colors/custom-color-by-theme :turquoise 50 60)
-    :hljs-number  (colors/custom-color-by-theme :turquoise 50 60)
-    :line-number  colors/neutral-40
-    nil))
-
-(defn text-style
-  [class-names]
-  (let [text-color (->> class-names
-                        (map keyword)
-                        (some (fn [class-name]
-                                (when-let [text-color (theme class-name)]
-                                  text-color))))]
-    (cond-> {:flex-shrink 1
-             :line-height 18}
-      text-color (assoc :color text-color))))
-
-(defn border-color
-  []
-  (colors/theme-colors colors/neutral-20 colors/neutral-80))
-
-(defn container
-  []
-  {:overflow         :hidden
-   :padding          8
-   :background-color (colors/theme-colors colors/white colors/neutral-80-opa-40)
-   :border-color     (border-color)
-   :border-width     1
-   :border-radius    16})
-
-(def gradient-container
-  {:position :absolute
-   :bottom   0
-   :left     0
-   :right    0
-   :z-index  1})
-
-(def gradient {:height 48})
-
-(defn line-number-container
-  [line-number-width]
-  {:position         :absolute
-   :bottom           0
-   :top              0
-   :left             0
-   :width            (+ line-number-width 8 7)
-   :background-color (colors/theme-colors colors/neutral-5 colors/neutral-80)})
-
-(defn divider
-  [line-number-width]
-  {:position         :absolute
-   :bottom           0
-   :top              0
-   :left             (+ line-number-width 7 7)
-   :width            1
-   :z-index          2
-   :background-color (border-color)})
-
-(def line {:flex-direction :row})
-
-(defn line-number
-  [width]
-  {:margin-right 20 ; 8+12 margin
-   :width        width})
-
-(def copy-button
-  {:position :absolute
-   :bottom   8
-   :right    8
-   :z-index  1})
-
-(defn gradient-color [] (colors/theme-colors colors/white colors/neutral-80))
-
-(defn button-background-color
-  []
-  (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5))

src/quo2/components/code/common/style.cljs

@@ -0,0 +1,107 @@
+(ns quo2.components.code.common.style
+  (:require [quo2.foundations.colors :as colors]))
+
+;; Example themes:
+;; https://github.com/react-syntax-highlighter/react-syntax-highlighter/tree/master/src/styles/hljs
+(defn highlight-theme
+  [theme-key]
+  (case theme-key
+    :hljs-comment      (colors/theme-colors colors/neutral-40 colors/neutral-60)
+    :hljs-title        (colors/custom-color-by-theme :sky 50 60)
+    :hljs-keyword      (colors/custom-color-by-theme :green 50 60)
+    :hljs-string       (colors/custom-color-by-theme :turquoise 50 60)
+    :hljs-literal      (colors/custom-color-by-theme :turquoise 50 60)
+    :hljs-number       (colors/custom-color-by-theme :turquoise 50 60)
+    :hljs-symbol       (colors/custom-color-by-theme :orange 50 50)
+    :hljs-builtin-name (colors/custom-color-by-theme :pink 50 50)
+    :line-number       colors/neutral-40
+    nil))
+
+(defn text-style
+  [class-names preview?]
+  (let [text-color (->> class-names
+                        (map keyword)
+                        (some (fn [class-name]
+                                (when-let [text-color (highlight-theme class-name)]
+                                  text-color))))]
+    (cond-> {:flex-shrink 1
+             :line-height 18}
+      preview?   (assoc :color colors/white)
+      text-color (assoc :color text-color))))
+
+(defn border-color
+  []
+  (colors/theme-colors colors/neutral-20 colors/neutral-80))
+
+(defn container
+  [preview? theme]
+  (if preview?
+    {:overflow         :hidden
+     :width            108
+     :background-color (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)
+     :border-radius    8}
+    {:overflow         :hidden
+     :padding          8
+     :background-color (colors/theme-colors colors/white colors/neutral-80-opa-40 theme)
+     :border-color     (border-color)
+     :border-width     1
+     :border-radius    16}))
+
+(def gradient-container
+  {:position :absolute
+   :bottom   0
+   :left     0
+   :right    0
+   :z-index  1})
+
+(def gradient {:height 48})
+
+(defn line-number-container
+  [line-number-width preview? theme]
+  (cond-> {:position         :absolute
+           :bottom           0
+           :top              0
+           :left             0
+           :width            (+ line-number-width 8 7)
+           :background-color (colors/theme-colors colors/neutral-5 colors/neutral-80 theme)}
+    preview? (assoc :width            20
+                    :background-color (colors/theme-colors colors/neutral-10 colors/neutral-70 theme))))
+
+(defn divider
+  [line-number-width]
+  {:position         :absolute
+   :bottom           0
+   :top              0
+   :left             (+ line-number-width 7 7)
+   :width            1
+   :z-index          2
+   :background-color (border-color)})
+
+(def line {:flex-direction :row})
+
+(defn line-number
+  [width preview?]
+  (if preview?
+    {:width            width
+     :padding-vertical 3
+     :padding-left     8
+     :padding-right    4}
+    {:margin-right 20 ; 8+12 margin
+     :width        width}))
+
+(def line-content
+  {:flex               1
+   :padding-horizontal 8
+   :padding-vertical   3})
+
+(def copy-button
+  {:position :absolute
+   :bottom   8
+   :right    8
+   :z-index  1})
+
+(defn gradient-color [] (colors/theme-colors colors/white colors/neutral-80))
+
+(defn button-background-color
+  []
+  (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5))

src/quo2/components/code/common/view.cljs

@@ -1,8 +1,8 @@
-(ns quo2.components.code.snippet
+(ns quo2.components.code.common.view
   (:require [cljs-bean.core :as bean]
             [clojure.string :as string]
             [quo2.components.buttons.button.view :as button]
-            [quo2.components.code.code.style :as style]
+            [quo2.components.code.common.style :as style]
             [quo2.components.markdown.text :as text]
             [react-native.core :as rn]
             [react-native.linear-gradient :as linear-gradient]
@@ -10,39 +10,41 @@
             [reagent.core :as reagent]))
 
 (defn- render-nodes
-  [nodes]
+  [nodes preview?]
   (map (fn [{:keys [children value last-line?] :as node}]
          (if children
            (into [text/text
                   (cond-> {:weight :code
                            :size   :paragraph-2
-                           :style  (style/text-style (get-in node [:properties :className]))}
+                           :style  (style/text-style (get-in node [:properties :className]) preview?)}
                     last-line? (assoc :number-of-lines 1))]
-                 (render-nodes children))
+                 (render-nodes children preview?))
            ;; Remove newlines as we already render each line separately.
            (string/trim-newline value)))
        nodes))
 
 (defn- line
-  [{:keys [line-number line-number-width]} children]
+  [{:keys [line-number line-number-width preview?]} children]
   [rn/view {:style style/line}
-   [rn/view {:style (style/line-number line-number-width)}
+   [rn/view {:style (style/line-number line-number-width preview?)}
     [text/text
-     {:style  (style/text-style ["line-number"])
+     {:style  (style/text-style ["line-number"] preview?)
       :weight :code
       :size   :paragraph-2}
      line-number]]
-   children])
+   (cond->> children
+     preview? (conj [rn/view {:style style/line-content}]))])
 
 (defn- code-block
-  [{:keys [rows line-number-width]}]
+  [{:keys [rows line-number-width preview?]}]
   [rn/view
-   (->> rows
-        (render-nodes)
+   (->> preview?
+        (render-nodes rows)
         (map-indexed (fn [idx row-content]
                        [line
                         {:line-number       (inc idx)
-                         :line-number-width line-number-width}
+                         :line-number-width line-number-width
+                         :preview?          preview?}
                         row-content]))
         (into [:<>]))])
 
@@ -66,36 +68,44 @@
       (* 9 max-line-digits font-scale))))
 
 (defn- f-native-renderer
-  [{:keys [rows max-lines on-copy-press]
+  [{:keys [rows max-lines on-copy-press preview? theme]
     :or   {max-lines ##Inf}}]
   (let [font-scale          (:font-scale (rn/get-window))
         total-rows          (count rows)
-        number-rows-to-show (min (count rows) max-lines)
-        line-number-width   (calc-line-number-width font-scale number-rows-to-show)
+        number-rows-to-show (if preview?
+                              0
+                              (min (count rows) max-lines))
+        line-number-width   (if preview? 20 (calc-line-number-width font-scale number-rows-to-show))
         truncated?          (< number-rows-to-show total-rows)
         rows-to-show-coll   (if truncated?
                               (as-> rows $
                                 (update $ number-rows-to-show assoc :last-line? true)
                                 (take (inc number-rows-to-show) $))
                               rows)]
-    [rn/view {:style (style/container)}
-     [rn/view {:style (style/line-number-container line-number-width)}]
-     [rn/view {:style (style/divider line-number-width)}]
-     [mask-view {:apply-mask? truncated?}
-      [code-block
-       {:rows              rows-to-show-coll
-        :line-number-width line-number-width}]]
-     [rn/view {:style style/copy-button}
-      [button/button
-       {:icon-only? true
-        :type       :grey
-        :background :blur
-        :size       24
-        :on-press   on-copy-press}
-       :main-icons/copy]]]))
+    [rn/view {:style (style/container preview? theme)}
+     [rn/view {:style (style/line-number-container line-number-width preview? theme)}]
+     (if preview?
+       [code-block
+        {:rows              rows-to-show-coll
+         :line-number-width line-number-width
+         :preview?          preview?}]
+       [:<>
+        [rn/view {:style (style/divider line-number-width)}]
+        [mask-view {:apply-mask? truncated?}
+         [code-block
+          {:rows              rows-to-show-coll
+           :line-number-width line-number-width}]]
+        [rn/view {:style style/copy-button}
+         [button/button
+          {:icon-only? true
+           :type       :grey
+           :background :blur
+           :size       24
+           :on-press   on-copy-press}
+          :main-icons/copy]]])]))
 
-(defn snippet
-  [{:keys [language max-lines on-copy-press]} children]
+(defn view
+  [{:keys [language max-lines on-copy-press preview? theme]} children]
   [highlighter/highlighter
    {:language          language
     :renderer          (fn [^js/Object props]
@@ -103,8 +113,11 @@
                           [:f> f-native-renderer
                            {:rows          (-> props .-rows bean/->clj)
                             :on-copy-press #(when on-copy-press (on-copy-press children))
-                            :max-lines     max-lines}]))
+                            :max-lines     max-lines
+                            :preview?      preview?
+                            :theme         theme}]))
     :show-line-numbers false
     :style             {}
     :custom-style      {:background-color nil}}
    children])
+

src/quo2/components/code/snippet/view.cljs

@@ -0,0 +1,15 @@
+(ns quo2.components.code.snippet.view
+  (:require [quo2.theme :as theme]
+            [quo2.components.code.common.view :as code-common]))
+
+(defn- view-internal
+  [_]
+  (fn [{:keys [language max-lines on-copy-press]} children]
+    [code-common/view
+     {:language      language
+      :max-lines     max-lines
+      :on-copy-press on-copy-press
+      :preview?      false}
+     children]))
+
+(def view (theme/with-theme view-internal))

src/quo2/components/code/snippet_preview/view.cljs

@@ -0,0 +1,11 @@
+(ns quo2.components.code.snippet-preview.view
+  (:require [quo2.components.code.common.view :as code-common]))
+
+(defn view
+  [{:keys [language]} children]
+  [code-common/view
+   {:preview?  true
+    :language  language
+    :max-lines 0
+    :theme     :dark}
+   children])

src/quo2/components/colors/color/style.cljs

@@ -0,0 +1,54 @@
+(ns quo2.components.colors.color.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(def color-button-common
+  {:width             48
+   :height            48
+   :border-width      4
+   :border-radius     24
+   :margin-horizontal 4
+   :transform         [{:rotate "45deg"}]
+   :border-color      :transparent})
+
+(defn color-button
+  [color selected?]
+  (merge color-button-common
+         (when selected?
+           {:border-top-color    (colors/alpha color 0.4)
+            :border-end-color    (colors/alpha color 0.4)
+            :border-bottom-color (colors/alpha color 0.2)
+            :border-start-color  (colors/alpha color 0.2)})))
+
+(defn color-circle
+  [color border?]
+  {:width            40
+   :height           40
+   :transform        [{:rotate "-45deg"}]
+   :background-color color
+   :justify-content  :center
+   :align-items      :center
+   :border-color     color
+   :border-width     (if border? 2 0)
+   :overflow         :hidden
+   :border-radius    20})
+
+(defn feng-shui
+  [theme]
+  {:width            40
+   :height           40
+   :transform        [{:rotate "45deg"}]
+   :overflow         :hidden
+   :border-color     (colors/theme-colors colors/neutral-100 colors/white theme)
+   :border-width     2
+   :background-color (colors/theme-colors colors/neutral-100 colors/white theme)
+   :border-radius    20})
+
+(defn left-half
+  [theme]
+  {:flex             1
+   :background-color (colors/theme-colors colors/white colors/neutral-100 theme)})
+
+(defn right-half
+  [theme]
+  {:flex             1
+   :background-color (colors/theme-colors colors/neutral-100 colors/white theme)})

src/quo2/components/colors/color/view.cljs

@@ -0,0 +1,50 @@
+(ns quo2.components.colors.color.view
+  (:require
+    [quo2.components.icon :as icon]
+    [quo2.foundations.colors :as colors]
+    [quo2.theme :as quo.theme]
+    [react-native.core :as rn]
+    [quo2.components.colors.color.style :as style]))
+
+(defn- feng-shui
+  [{:keys [color theme]}]
+  [rn/view
+   {:accessibility-label color
+    :style               (style/feng-shui theme)}
+   [rn/view {:style (style/left-half theme)}]
+   [rn/view {:style (style/right-half theme)}]])
+
+(defn- view-internal
+  [{:keys [color
+           selected?
+           on-press
+           blur?
+           theme]
+    :as   props}]
+  (let [border?   (and (not blur?) (not selected?))
+        hex-color (if (= :feng-shui color)
+                    (colors/theme-colors colors/neutral-100 colors/white theme)
+                    (colors/theme-colors (colors/custom-color color 50)
+                                         (colors/custom-color color 60)
+                                         theme))]
+
+    [rn/pressable
+     {:style               (style/color-button hex-color selected?)
+      :accessibility-label :color-picker-item
+      :on-press            #(on-press color)}
+     (if (and (= :feng-shui color) (not selected?))
+       [feng-shui
+        (assoc props
+               :hex-color hex-color
+               :border?   border?)]
+       [rn/view
+        {:accessibility-label color
+         :style               (style/color-circle hex-color border?)}
+        (when selected?
+          [icon/icon :i/check
+           {:size  20
+            :color (if (= :feng-shui color)
+                     (colors/theme-colors colors/white colors/neutral-100 theme)
+                     colors/white)}])])]))
+
+(def view (quo.theme/with-theme view-internal))

src/quo2/components/colors/color_picker/component_spec.cljs

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

src/quo2/components/colors/color_picker/style.cljs

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

src/quo2/components/colors/color_picker/view.cljs

@@ -1,77 +1,35 @@
 (ns quo2.components.colors.color-picker.view
   (:require [react-native.core :as rn]
-            [quo2.foundations.colors :as colors]
-            [quo2.components.icon :as icon]
             [reagent.core :as reagent]
-            [quo2.components.colors.color-picker.style :as style]))
+            [quo2.components.colors.color.view :as color]))
 
-;; TODO: using :no-color this to keep alignment of colors correct while b & w is being developed.
-;; https://github.com/status-im/status-mobile/issues/15442
 (def color-list
-  [:blue :yellow :turquoise :copper :sky :camel :orange :army :pink :purple :magenta :no-color])
-
-(defn picker-colors
-  [blur?]
-  (map (fn [color]
-         {:name  color
-          :color (colors/custom-color-by-theme color (if blur? 60 50) 60)})
-       color-list))
+  [:blue :yellow :purple :turquoise :magenta :sky :orange :army :flamingo :camel :copper])
 
 (defn- on-change-handler
   [selected color-name on-change]
   (reset! selected color-name)
   (when on-change (on-change color-name)))
 
-(defn empty-color-item
-  []
-  [rn/view {:style style/color-button-common}])
-
-(defn- color-item
-  [{:keys [name
-           color
-           secondary-color
-           selected?
-           on-press
-           blur?]}]
-  (let [border? (and (not blur?) (and secondary-color (not selected?)))]
-    (if (= :no-color name)
-      [empty-color-item]
-      [rn/touchable-opacity
-       {:style               (style/color-button color selected?)
-        :accessibility-label :color-picker-item
-        :on-press            #(on-press name)}
-       [rn/view
-        {:accessibile         true
-         :accessibility-label name
-         :style               (style/color-circle color border?)}
-        (when (and secondary-color (not selected?))
-          [rn/view
-           {:style (style/secondary-overlay secondary-color border?)}])
-        (when selected?
-          [icon/icon :i/check
-           {:size  20
-            :color (or secondary-color
-                       colors/white)}])]])))
-
 (defn view
   "Options
-   - `default-selected?` Default selected color name.
-   - `selected` Selected color name.
+   - `default-selected` Default selected color name.
    - `on-change` Callback called when a color is selected `(fn [color-name])`.
    - `blur?` Boolean to enable blur background support.}"
-  [{:keys [default-selected?]}]
-  (let [internal-selected (reagent/atom default-selected?)]
-    (fn [{:keys [blur? on-change selected]}]
-      (when (and (not (nil? selected)) (not= @internal-selected selected))
-        (reset! internal-selected selected))
-      [rn/view {:style style/color-picker-container}
-       (doall (map-indexed (fn [index color]
-                             [:<> {:key (color :name)}
-                              [color-item
-                               (merge color
-                                      {:selected? (= (color :name) @internal-selected)
-                                       :on-press  #(on-change-handler internal-selected % on-change)
-                                       :blur?     blur?})]
-                              (when (= index 5) [rn/view {:style style/flex-break}])])
-                           (picker-colors blur?)))])))
-
+  [{:keys [default-selected]}]
+  (let [selected (reagent/atom default-selected)]
+    (fn [{:keys [blur? on-change feng-shui? container-style]}]
+      [rn/scroll-view
+       {:horizontal                        true
+        :shows-horizontal-scroll-indicator false
+        :content-container-style           container-style}
+       (doall (map (fn [color]
+                     [color/view
+                      {:selected? (= color @selected)
+                       :on-press  #(on-change-handler selected % on-change)
+                       :blur?     blur?
+                       :key       color
+                       :color     color}])
+                   ;; TODO: using :feng-shui? temporarily while b & w is being developed.
+                   ;; https://github.com/status-im/status-mobile/discussions/16676
+                   (if feng-shui? (conj color-list :feng-shui) color-list)))])))

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

@@ -4,7 +4,9 @@
 (defn get-color
   [type customization-color theme]
   (case type
-    :default   (colors/custom-color customization-color 50)
+    :default   (colors/theme-colors (colors/custom-color customization-color 50)
+                                    (colors/custom-color customization-color 60)
+                                    theme)
     :secondary (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme)
     :grey      (colors/theme-colors colors/neutral-10 colors/neutral-80 theme)
     :outline   (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)

src/quo2/components/dropdowns/dropdown.cljs

@@ -1,20 +0,0 @@
-(ns quo2.components.dropdowns.dropdown
-  (:require [quo2.components.dropdowns.old-button-view :as old-button]))
-
-(defn dropdown
-  [_ _]
-  (fn [{:keys [on-change selected] :as opts} children]
-    ;TODO: Dropdown needs to be implemented/refactored to be its own component -
-    ;https://github.com/status-im/status-mobile/issues/16456
-    [old-button/button
-     (merge
-      opts
-      {:after                   (if selected :i/chevron-top :i/chevron-down)
-       :icon-size               12
-       :icon-container-size     14
-       :icon-container-rounded? true
-       :override-after-margins  {:left  7
-                                 :right 9}
-       :pressed                 selected
-       :on-press                #(when on-change (on-change selected))})
-     children]))

src/quo2/components/dropdowns/dropdown/component_spec.cljs

@@ -0,0 +1,35 @@
+(ns quo2.components.dropdowns.dropdown.component-spec
+  (:require [quo2.components.dropdowns.dropdown.view :as dropdown]
+            [test-helpers.component :as h]))
+
+(h/describe "Dropdown"
+  (h/test "default render"
+    (let [label "Recent"]
+      (h/render [dropdown/view {} label])
+      (h/is-truthy (h/get-by-label-text :dropdown))
+      (h/is-null (h/query-by-label-text :left-icon))
+      (h/is-truthy (h/get-by-text label))
+      (h/is-truthy (h/get-by-label-text :right-icon))))
+
+  (h/test "render with icon"
+    (let [label "Recent"]
+      (h/render [dropdown/view {:icon? true} label])
+      (h/is-truthy (h/get-by-label-text :dropdown))
+      (h/is-truthy (h/get-by-label-text :left-icon))
+      (h/is-truthy (h/get-by-text label))
+      (h/is-truthy (h/get-by-label-text :right-icon))))
+
+  (h/test "render only emoji"
+    (let [label "🍑"]
+      (h/render [dropdown/view {:emoji? true} label])
+      (h/is-truthy (h/get-by-label-text :dropdown))
+      (h/is-null (h/query-by-label-text :left-icon))
+      (h/is-truthy (h/get-by-text label))
+      (h/is-null (h/query-by-label-text :right-icon))))
+
+  (h/test "on-press"
+    (let [event (h/mock-fn)
+          label "Recent"]
+      (h/render [dropdown/view {:on-press event} label])
+      (h/fire-event :press (h/get-by-text label))
+      (h/was-called event))))

src/quo2/components/dropdowns/dropdown/properties.cljs

@@ -0,0 +1,120 @@
+(ns quo2.components.dropdowns.dropdown.properties
+  (:require [quo2.foundations.colors :as colors]))
+
+(def backgrounds #{:photo :blur})
+
+(def sizes
+  {:size-40 {:size             40
+             :icon-size        20
+             :emoji-size       20
+             :emoji-padding    10
+             :padding-vertical 9
+             :padding-left     {:default 16 :icon 12}
+             :padding-right    12
+             :border-radius    12
+             :text-size        :paragraph-1}
+   :size-32 {:size             32
+             :icon-size        20
+             :emoji-size       20
+             :emoji-padding    6
+             :padding-vertical 5
+             :padding-left     {:default 12 :icon 8}
+             :padding-right    8
+             :border-radius    10
+             :text-size        :paragraph-1}
+   :size-24 {:size             24
+             :icon-size        12
+             :emoji-size       12
+             :emoji-padding    6
+             :padding-vertical 3
+             :padding-left     {:default 8 :icon 8}
+             :padding-right    8
+             :border-radius    8
+             :text-size        :paragraph-2}})
+
+(defn- custom-color-type
+  [customization-color]
+  {:left-icon-color    colors/white-opa-70
+   :right-icon-color   colors/white-opa-20
+   :right-icon-color-2 colors/white
+   :label-color        colors/white
+   :background-color   (colors/custom-color customization-color 50)})
+
+(def sizes-to-exclude-blur-in-photo-bg #{:size-40})
+
+(defn- grey-photo
+  [theme active? size]
+  {:left-icon-color    (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 theme)
+   :right-icon-color   (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme)
+   :right-icon-color-2 (colors/theme-colors colors/neutral-100 colors/white theme)
+   :label-color        (colors/theme-colors colors/neutral-100 colors/white theme)
+   :blur-overlay-color (when (and (= theme :dark) (nil? (sizes-to-exclude-blur-in-photo-bg size)))
+                         (if active? colors/neutral-80-opa-50 colors/neutral-80-opa-40))
+   :blur-type          (if (= theme :light) :light :dark)
+   :background-color   (cond
+                         (= theme :light)
+                         (if active? colors/white-opa-50 colors/white-opa-40)
+
+                         (and (= theme :dark) (sizes-to-exclude-blur-in-photo-bg size))
+                         (if active? colors/neutral-80-opa-50 colors/neutral-80-opa-40))})
+
+(defn- grey-blur
+  [theme active?]
+  {:left-icon-color    (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-70 theme)
+   :right-icon-color   (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme)
+   :right-icon-color-2 (colors/theme-colors colors/neutral-100 colors/white theme)
+   :label-color        (colors/theme-colors colors/neutral-100 colors/white theme)
+   :background-color   (if active?
+                         (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme)
+                         (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme))})
+
+(defn- outline-blur
+  [theme active?]
+  {:left-icon-color    (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 theme)
+   :right-icon-color   (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme)
+   :right-icon-color-2 (colors/theme-colors colors/neutral-100 colors/white theme)
+   :label-color        (colors/theme-colors colors/neutral-100 colors/white theme)
+   :border-color       (if active?
+                         (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-20 theme)
+                         (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme))})
+
+(defn- outline
+  [theme active?]
+  {:left-icon-color    (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
+   :right-icon-color   (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)
+   :right-icon-color-2 (colors/theme-colors colors/neutral-100 colors/white theme)
+   :label-color        (colors/theme-colors colors/neutral-100 colors/white theme)
+   :border-color       (if active?
+                         (colors/theme-colors colors/neutral-40 colors/neutral-60 theme)
+                         (colors/theme-colors colors/neutral-30 colors/neutral-70 theme))})
+
+(defn- grey
+  [theme active?]
+  {:left-icon-color    (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
+   :right-icon-color   (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)
+   :right-icon-color-2 (colors/theme-colors colors/neutral-100 colors/white theme)
+   :label-color        (colors/theme-colors colors/neutral-100 colors/white theme)
+   :background-color   (if active?
+                         (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)
+                         (colors/theme-colors colors/neutral-5 colors/neutral-90 theme))})
+
+(defn- ghost
+  [theme active?]
+  {:left-icon-color    (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
+   :right-icon-color   (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)
+   :right-icon-color-2 (colors/theme-colors colors/neutral-100 colors/white theme)
+   :label-color        (colors/theme-colors colors/neutral-100 colors/white theme)
+   :background-color   (when active?
+                         (colors/theme-colors colors/neutral-10 colors/neutral-80 theme))})
+
+(defn get-colors
+  [{:keys [customization-color theme type state background size]}]
+  (let [active? (= state :active)]
+    (cond
+      (and (= background :photo) (= type :grey))   (grey-photo theme active? size)
+      (and (= background :blur) (= type :grey))    (grey-blur theme active?)
+      (and (= background :blur) (= type :outline)) (outline-blur theme active?)
+      (= type :outline)                            (outline theme active?)
+      (= type :grey)                               (grey theme active?)
+      (= type :ghost)                              (ghost theme active?)
+      (= type :customization)                      (custom-color-type customization-color))))

src/quo2/components/dropdowns/dropdown/style.cljs

@@ -0,0 +1,53 @@
+(ns quo2.components.dropdowns.dropdown.style)
+
+(def gap 4)
+
+(def blur-view
+  {:position :absolute
+   :top      0
+   :left     0
+   :right    0
+   :bottom   0})
+
+(def left-icon
+  {:margin-right gap})
+
+(defn right-icon
+  [label-color]
+  {:color        label-color
+   :margin-right gap})
+
+(defn- add-styles-for-emoji
+  [style size emoji-padding]
+  (-> style
+      (dissoc :padding-vertical :padding-left :padding-right)
+      (assoc :width   size
+             :padding emoji-padding)))
+
+(defn root-container
+  [{:keys [size border-radius padding-vertical padding-right padding-left emoji-padding]}
+   {:keys [background-color border-color]}
+   {:keys [icon? emoji? state]}]
+  (cond-> {:height           size
+           :align-items      :center
+           :justify-content  :center
+           :flex-direction   :row
+           :padding-vertical padding-vertical
+           :padding-left     (:default padding-left)
+           :padding-right    padding-right
+           :overflow         :hidden
+           :background-color background-color
+           :border-radius    border-radius}
+
+    icon?
+    (assoc :padding-left (:icon padding-left))
+
+    emoji?
+    (add-styles-for-emoji size emoji-padding)
+
+    border-color
+    (assoc :border-color border-color
+           :border-width 1)
+
+    (= state :disabled)
+    (assoc :opacity 0.3)))

src/quo2/components/dropdowns/dropdown/view.cljs

@@ -0,0 +1,87 @@
+(ns quo2.components.dropdowns.dropdown.view
+  (:require [quo2.components.dropdowns.dropdown.properties :as properties]
+            [quo2.components.dropdowns.dropdown.style :as style]
+            [quo2.components.icon :as icon]
+            [quo2.components.markdown.text :as text]
+            [quo2.foundations.customization-colors :as customization-colors]
+            [quo2.theme :as theme]
+            [react-native.blur :as blur]
+            [react-native.core :as rn]))
+
+(defn- view-internal
+  [{:keys [type size state background customization-color theme on-press icon-name icon? emoji?
+           accessibility-label]
+    :or   {type      :grey
+           size      :size-40
+           state     :default
+           icon?     false
+           emoji?    false
+           icon-name :i/placeholder}
+    :as   props}
+   text]
+  (let [{:keys [icon-size text-size emoji-size border-radius]
+         :as   size-properties} (properties/sizes size)
+        {:keys [left-icon-color right-icon-color right-icon-color-2 label-color blur-type
+                blur-overlay-color]
+         :as   colors}          (properties/get-colors props)
+        right-icon              (if (= state :active) :i/pullup :i/dropdown)
+        customization-type?     (= type :customization)
+        show-blur-background?   (and (= background :photo)
+                                     (= type :grey)
+                                     (nil? (properties/sizes-to-exclude-blur-in-photo-bg size)))]
+    [rn/pressable
+     {:accessibility-label (or accessibility-label :dropdown)
+      :disabled            (= state :disabled)
+      :on-press            on-press
+      :style               (style/root-container size-properties colors props)}
+     (when show-blur-background?
+       [blur/view
+        {:blur-radius   20
+         :blur-type     blur-type
+         :overlay-color blur-overlay-color
+         :style         style/blur-view}])
+     (when customization-type?
+       [customization-colors/overlay
+        {:customization-color customization-color
+         :theme               theme
+         :pressed?            (= state :active)
+         :border-radius       border-radius}])
+     (if emoji?
+       [rn/text
+        {:adjusts-font-size-to-fit true
+         :style                    {:font-size emoji-size}}
+        text]
+       [:<>
+        (when icon?
+          [icon/icon
+           icon-name
+           {:accessibility-label :left-icon
+            :color               left-icon-color
+            :size                icon-size
+            :container-style     style/left-icon}])
+        [text/text
+         {:size            text-size
+          :weight          :medium
+          :number-of-lines 1
+          :style           (style/right-icon label-color)}
+         text]
+        [icon/icon
+         right-icon
+         {:size                icon-size
+          :accessibility-label :right-icon
+          :color               right-icon-color
+          :color-2             right-icon-color-2}]])]))
+
+(def view
+  "Props:
+    - type:       :outline |:grey (default) | :ghost | :customization
+    - size:       :size-40 (default) | :size-32 | :size-24
+    - state:      :default (default) | :active | :disabled
+    - emoji?:     boolean
+    - icon?:      boolean
+    - background: :blur | :photo (optional)
+    - icon-name:  keyword
+    - on-press:   function
+   
+    Child: string - used as label or emoji (for emoji only)"
+  (theme/with-theme view-internal))

src/quo2/components/dropdowns/network_dropdown/style.cljs

@@ -4,10 +4,10 @@
 (defn container-border-color
   [{:keys [state blur? theme pressed?]}]
   (let [default-color (if blur?
-                        colors/neutral-80-opa-5
+                        (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme)
                         (colors/theme-colors colors/neutral-30 colors/neutral-70 theme))
         active-color  (if blur?
-                        colors/neutral-80-opa-10
+                        (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme)
                         (colors/theme-colors colors/neutral-40 colors/neutral-60 theme))]
     (condp = state
       :disabled default-color

src/quo2/components/dropdowns/network_dropdown/view.cljs

@@ -20,7 +20,7 @@
        [preview-list/view
         {:type      :network
          :list-size (count networks)
-         :size      :size/s-20}
+         :size      :size-20}
         networks]])))
 
 (def view (quo.theme/with-theme internal-view))

src/quo2/components/dropdowns/old_button_style.cljs

@@ -1,264 +0,0 @@
-(ns quo2.components.dropdowns.old-button-style
-  (:require [quo2.foundations.colors :as colors]))
-
-(def blur-view
-  {:position :absolute
-   :top      0
-   :left     0
-   :right    0
-   :bottom   0})
-
-(defn before-icon-style
-  [{:keys [override-margins size icon-container-size icon-background-color icon-container-rounded?
-           icon-size]}]
-  (merge
-   {:margin-left     (or (get override-margins :left)
-                         (if (= size 40) 12 8))
-    :margin-right    (or (get override-margins :right) 4)
-    :align-items     :center
-    :justify-content :center}
-   (when icon-container-size
-     {:width  icon-container-size
-      :height icon-container-size})
-   (when icon-background-color
-     {:background-color icon-background-color})
-   (when icon-container-rounded?
-     {:border-radius (/ (or icon-container-size icon-size) 2)})))
-
-(defn after-icon-style
-  [{:keys [override-margins size icon-container-size icon-background-color icon-container-rounded?
-           icon-size]}]
-  (merge
-   {:margin-left     (or (get override-margins :left) 4)
-    :margin-right    (or (get override-margins :right)
-                         (if (= size 40) 12 8))
-    :align-items     :center
-    :justify-content :center}
-   (when icon-container-size
-     {:width  icon-container-size
-      :height icon-container-size})
-   (when icon-background-color
-     {:background-color icon-background-color})
-   (when icon-container-rounded?
-     {:border-radius (/ (or icon-container-size icon-size) 2)})))
-
-(defn themes
-  [customization-color]
-  {:light
-   {:primary         {:icon-color           colors/white
-                      :icon-secondary-color colors/white-opa-70
-                      :label-color          colors/white
-                      :background-color     {:default  (colors/custom-color customization-color 50)
-                                             :pressed  (colors/custom-color customization-color 60)
-                                             :disabled (colors/custom-color customization-color 50)}}
-    :secondary       {:icon-color       colors/primary-50
-                      :label-color      colors/primary-50
-                      :background-color {:default  colors/primary-50-opa-20
-                                         :pressed  colors/primary-50-opa-40
-                                         :disabled colors/primary-50-opa-20}}
-    :grey            {:icon-color           colors/neutral-100
-                      :icon-secondary-color colors/neutral-50
-                      :label-color          colors/neutral-100
-                      :background-color     {:default  colors/neutral-10
-                                             :pressed  colors/neutral-20
-                                             :disabled colors/neutral-10}}
-    :dark-grey       {:icon-color           colors/neutral-100
-                      :icon-secondary-color colors/neutral-50
-                      :label-color          colors/neutral-100
-                      :background-color     {:default  colors/neutral-20
-                                             :pressed  colors/neutral-30
-                                             :disabled colors/neutral-20}}
-    :outline         {:icon-color           colors/neutral-50
-                      :icon-secondary-color colors/neutral-50
-                      :label-color          colors/neutral-100
-                      :border-color         {:default  colors/neutral-30
-                                             :pressed  colors/neutral-40
-                                             :disabled colors/neutral-30}}
-    :ghost           {:icon-color           colors/neutral-50
-                      :icon-secondary-color colors/neutral-50
-                      :label-color          colors/neutral-100
-                      :background-color     {:pressed colors/neutral-10}}
-    :danger          {:icon-color           colors/white
-                      :icon-secondary-color colors/white-opa-70
-                      :label-color          colors/white
-                      :background-color     {:default  colors/danger-50
-                                             :pressed  colors/danger-60
-                                             :disabled colors/danger-50}}
-    :positive        {:icon-color           colors/white
-                      :icon-secondary-color colors/white-opa-70
-                      :label-color          colors/white
-                      :background-color     {:default  colors/success-50
-                                             :pressed  colors/success-60
-                                             :disabled colors/success-50-opa-30}}
-    :photo-bg        {:icon-color           colors/neutral-100
-                      :icon-secondary-color colors/neutral-80-opa-40
-                      :label-color          colors/neutral-100
-                      :background-color     {:default  colors/white-opa-40
-                                             :pressed  colors/white-opa-50
-                                             :disabled colors/white-opa-40}}
-    :blur-bg         {:icon-color           colors/neutral-100
-                      :icon-secondary-color colors/neutral-80-opa-40
-                      :label-color          colors/neutral-100
-                      :background-color     {:default  colors/neutral-80-opa-5
-                                             :pressed  colors/neutral-80-opa-10
-                                             :disabled colors/neutral-80-opa-5}}
-    :blurred         {:icon-color            colors/neutral-100
-                      :icon-secondary-color  colors/neutral-100
-                      :icon-background-color {:default colors/neutral-20
-                                              :blurred colors/neutral-80-opa-10}
-                      :label-color           colors/neutral-100
-                      :background-color      {:default  colors/neutral-10
-                                              :pressed  colors/neutral-10
-                                              :disabled colors/neutral-10-opa-10-blur}
-                      :blur-overlay-color    colors/neutral-10-opa-40-blur
-                      :blur-type             :light}
-    :blur-bg-outline {:icon-color           colors/neutral-100
-                      :icon-secondary-color colors/neutral-80-opa-40
-                      :label-color          colors/neutral-100
-                      :border-color         {:default  colors/neutral-80-opa-10
-                                             :pressed  colors/neutral-80-opa-20
-                                             :disabled colors/neutral-80-opa-10}}
-    :shell           {:icon-color       colors/white
-                      :label-color      colors/white
-                      :background-color {:default  colors/neutral-95
-                                         :pressed  colors/neutral-95
-                                         :disabled colors/neutral-95}}}
-   :dark
-   {:primary         {:icon-color           colors/white
-                      :icon-secondary-color colors/white-opa-70
-                      :label-color          colors/white
-                      :background-color     {:default  (colors/custom-color customization-color 60)
-                                             :pressed  (colors/custom-color customization-color 50)
-                                             :disabled (colors/custom-color customization-color 60)}}
-    :secondary       {:icon-color       colors/primary-50
-                      :label-color      colors/primary-50
-                      :background-color {:default  colors/primary-50-opa-20
-                                         :pressed  colors/primary-50-opa-30
-                                         :disabled colors/primary-50-opa-20}}
-    :grey            {:icon-color           colors/white
-                      :icon-secondary-color colors/neutral-40
-                      :label-color          colors/white
-                      :background-color     {:default  colors/neutral-90
-                                             :pressed  colors/neutral-60
-                                             :disabled colors/neutral-90}}
-    :dark-grey       {:icon-color           colors/white
-                      :icon-secondary-color colors/neutral-40
-                      :label-color          colors/white
-                      :background-color     {:default  colors/neutral-70
-                                             :pressed  colors/neutral-60
-                                             :disabled colors/neutral-70}}
-    :outline         {:icon-color           colors/neutral-40
-                      :icon-secondary-color colors/neutral-40
-                      :label-color          colors/white
-                      :border-color         {:default  colors/neutral-70
-                                             :pressed  colors/neutral-60
-                                             :disabled colors/neutral-70}}
-    :ghost           {:icon-color           colors/neutral-40
-                      :icon-secondary-color colors/neutral-40
-                      :label-color          colors/white
-                      :background-color     {:pressed colors/neutral-80}}
-    :danger          {:icon-color           colors/white
-                      :icon-secondary-color colors/white-opa-70
-                      :label-color          colors/white
-                      :background-color     {:default  colors/danger-60
-                                             :pressed  colors/danger-50
-                                             :disabled colors/danger-60}}
-    :positive        {:icon-color           colors/white
-                      :icon-secondary-color colors/white-opa-70
-                      :label-color          colors/white
-                      :background-color     {:default  colors/success-60
-                                             :pressed  colors/success-50
-                                             :disabled colors/success-60-opa-30}}
-    :photo-bg        {:icon-color           colors/white
-                      :icon-secondary-color colors/neutral-30
-                      :label-color          colors/white
-                      :background-color     {:default  colors/neutral-80-opa-40
-                                             :pressed  colors/neutral-80-opa-50
-                                             :disabled colors/neutral-80-opa-40}}
-    :blur-bg         {:icon-color           colors/white
-                      :icon-secondary-color colors/white-opa-70
-                      :label-color          colors/white
-                      :background-color     {:default  colors/white-opa-5
-                                             :pressed  colors/white-opa-10
-                                             :disabled colors/white-opa-5}}
-    :blurred         {:icon-color            colors/white
-                      :icon-secondary-color  colors/white
-                      :icon-background-color {:default colors/neutral-80
-                                              :blurred colors/white-opa-10}
-                      :label-color           colors/white
-                      :background-color      {:default  colors/neutral-90
-                                              :pressed  colors/neutral-90
-                                              :disabled colors/neutral-90-opa-10-blur}
-                      :blur-overlay-color    colors/neutral-80-opa-40
-                      :blur-type             :dark}
-    :blur-bg-outline {:icon-color           colors/white
-                      :icon-secondary-color colors/white-opa-40
-                      :label-color          colors/white
-                      :border-color         {:default  colors/white-opa-10
-                                             :pressed  colors/white-opa-20
-                                             :disabled colors/white-opa-5}}
-    :shell           {:icon-color       colors/white
-                      :label-color      colors/white
-                      :background-color {:default colors/neutral-95}}}})
-
-(defn shape-style-container
-  [type icon size]
-  {:height        size
-   :border-radius (if (and icon (#{:primary :secondary :danger} type))
-                    24
-                    (case size
-                      56 12
-                      40 12
-                      32 10
-                      24 8))})
-
-(defn style-container
-  [{:keys [type size disabled background-color border-color icon above width before after blur-active?]}]
-  (merge {:height             size
-          :align-items        :center
-          :justify-content    :center
-          :flex-direction     (if above :column :row)
-          :padding-horizontal (when-not (or icon before after)
-                                (case size
-                                  56 16
-                                  40 16
-                                  32 12
-                                  24 8))
-          :padding-left       (when-not (or icon before)
-                                (case size
-                                  56 16
-                                  40 16
-                                  32 12
-                                  24 8))
-          :padding-right      (when-not (or icon after)
-                                (case size
-                                  56 16
-                                  40 16
-                                  32 12
-                                  24 8))
-          :padding-top        (when-not (or icon before after)
-                                (case size
-                                  56 0
-                                  40 9
-                                  32 5
-                                  24 3))
-          :padding-bottom     (when-not (or icon before after)
-                                (case size
-                                  56 0
-                                  40 9
-                                  32 5
-                                  24 4))
-          :overflow           :hidden}
-         (when (or (and (= type :blurred) (not blur-active?))
-                   (not= type :blurred))
-           {:background-color background-color})
-         (shape-style-container type icon size)
-         (when width
-           {:width width})
-         (when icon
-           {:width size})
-         (when border-color
-           {:border-color border-color
-            :border-width 1})
-         (when disabled
-           {:opacity 0.3})))

src/quo2/components/dropdowns/old_button_view.cljs

@@ -1,138 +0,0 @@
-(ns quo2.components.dropdowns.old-button-view
-  (:require [quo2.components.icon :as quo2.icons]
-            [quo2.components.markdown.text :as text]
-            [quo2.theme :as theme]
-            [react-native.core :as rn]
-            [react-native.blur :as blur]
-            [reagent.core :as reagent]
-            [quo2.components.dropdowns.old-button-style :as style]))
-
-(defn- button-internal
-  "with label
-   [button opts \"label\"]
-   opts
-   {:type   :primary/:secondary/:grey/:dark-grey/:outline/:ghost/
-            :danger/:photo-bg/:blur-bg/:blur-bg-outline/:shell/:community
-    :size   40 [default] /32/24
-    :icon   true/false
-    :community-color '#FFFFFF'
-    :community-text-color '#000000'
-    :before :icon-keyword
-    :after  :icon-keyword}
-
-   only icon
-   [button {:icon true} :i/close-circle]"
-  [_ _]
-  (let [pressed-in (reagent/atom false)]
-    (fn
-      [{:keys [on-press disabled type size before after above icon-secondary-no-color
-               width customization-color theme override-background-color pressed
-               on-long-press accessibility-label icon icon-no-color style inner-style test-ID
-               blur-active? override-before-margins override-after-margins icon-size icon-container-size
-               icon-container-rounded?]
-        :or   {type                :primary
-               size                40
-               customization-color :primary
-               blur-active?        true}}
-       children]
-      (let [{:keys [icon-color icon-secondary-color background-color label-color border-color blur-type
-                    blur-overlay-color icon-background-color]}
-            (get-in (style/themes customization-color)
-                    [theme type])
-            state (cond disabled                 :disabled
-                        (or @pressed-in pressed) :pressed
-                        :else                    :default)
-            blur-state (if blur-active? :blurred :default)
-            icon-size (or icon-size (when (= 24 size) 12))
-            icon-secondary-color (or icon-secondary-color icon-color)]
-        [rn/touchable-without-feedback
-         (merge {:test-ID             test-ID
-                 :disabled            disabled
-                 :accessibility-label accessibility-label
-                 :on-press-in         #(reset! pressed-in true)
-                 :on-press-out        #(reset! pressed-in nil)}
-                (when on-press
-                  {:on-press on-press})
-                (when on-long-press
-                  {:on-long-press on-long-press}))
-         [rn/view
-          {:style (merge
-                   (style/shape-style-container type icon size)
-                   {:width width}
-                   style)}
-          [rn/view
-           {:style (merge
-                    (style/style-container {:type type
-                                            :size size
-                                            :disabled disabled
-                                            :background-color
-                                            (or override-background-color (get background-color state))
-                                            :border-color
-                                            (get border-color state)
-                                            :icon icon
-                                            :above above
-                                            :width width
-                                            :before before
-                                            :after after
-                                            :blur-active? blur-active?})
-                    (when (= state :pressed) {:opacity 0.9})
-                    inner-style)}
-           (when (and (= type :blurred)
-                      blur-active?)
-             [blur/view
-              {:blur-radius   20
-               :blur-type     blur-type
-               :overlay-color blur-overlay-color
-               :style         style/blur-view}])
-           (when above
-             [rn/view
-              [quo2.icons/icon above
-               {:container-style {:margin-bottom 2}
-                :color           icon-secondary-color
-                :size            icon-size}]])
-           (when before
-             [rn/view
-              {:style (style/before-icon-style
-                       {:override-margins        override-before-margins
-                        :size                    size
-                        :icon-container-size     icon-container-size
-                        :icon-background-color   (get icon-background-color blur-state)
-                        :icon-container-rounded? icon-container-rounded?
-                        :icon-size               icon-size})}
-              [quo2.icons/icon before
-               {:color icon-secondary-color
-                :size  icon-size}]])
-           [rn/view
-            (cond
-              (or icon icon-no-color)
-              [quo2.icons/icon children
-               {:color    icon-color
-                :no-color icon-no-color
-                :size     icon-size}]
-
-              (string? children)
-              [text/text
-               {:size            (when (#{56 24} size) :paragraph-2)
-                :weight          :medium
-                :number-of-lines 1
-                :style           {:color label-color}}
-
-               children]
-
-              (vector? children)
-              children)]
-           (when after
-             [rn/view
-              {:style (style/after-icon-style
-                       {:override-margins        override-after-margins
-                        :size                    size
-                        :icon-container-size     icon-container-size
-                        :icon-background-color   (get icon-background-color blur-state)
-                        :icon-container-rounded? icon-container-rounded?
-                        :icon-size               icon-size})}
-              [quo2.icons/icon after
-               {:no-color icon-secondary-no-color
-                :color    icon-secondary-color
-                :size     icon-size}]])]]]))))
-
-(def button (theme/with-theme button-internal))

src/quo2/components/graph/wallet_graph/view.cljs

@@ -55,7 +55,7 @@
        [rn/view {:accessibility-label :line-chart}
         [charts/line-chart
          {:height                  96
-          :width                   (+ width 1)
+          :width                   (inc width)
           :max-value               max-value
           :min-value               0
           :adjust-to-width         true

src/quo2/components/icon.cljs

@@ -21,11 +21,15 @@
     ^{:key icon-name}
     (if-let [svg-icon (icons.svg/get-icon icon-name size)]
       [svg-icon
-       {:size                size
-        :color               (when (valid-color? color) color)
-        :color-2             (when (valid-color? color-2) color-2)
-        :accessibility-label accessibility-label
-        :style               container-style}]
+       (cond-> {:size                size
+                :accessibility-label accessibility-label
+                :style               container-style}
+
+         (and color (valid-color? color))
+         (assoc :color color)
+
+         (and color-2 (valid-color? color-2))
+         (assoc :color-2 color-2))]
       [rn/image
        {:style
         (merge {:width  size

src/quo2/components/icons/svg.cljs

@@ -21,21 +21,109 @@
         children))
 
 (defn- clear-20
-  [{:keys [color color-2] :as props}]
-  (let [color   (or color colors/neutral-100)
-        color-2 (or color-2 colors/white)]
-    [container props
-     [svg/path
-      {:d
-       "M3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10Z"
-       :fill color}]
-     [svg/path
-      {:d
-       "M9.15142 9.99998L7.07566 12.0757L7.9242 12.9243L9.99994 10.8485L12.0757 12.9242L12.9242 12.0757L10.8485 9.99998L12.9242 7.92421L12.0757 7.07568L9.99994 9.15145L7.92421 7.07572L7.07568 7.92425L9.15142 9.99998Z"
-       :fill color-2}]]))
+  [{:keys [color color-2]
+    :or   {color   colors/neutral-100
+           color-2 colors/white}
+    :as   props}]
+  [container props
+   [svg/path
+    {:d
+     "M3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10Z"
+     :fill color}]
+   [svg/path
+    {:d
+     "M9.15142 9.99998L7.07566 12.0757L7.9242 12.9243L9.99994 10.8485L12.0757 12.9242L12.9242 12.0757L10.8485 9.99998L12.9242 7.92421L12.0757 7.07568L9.99994 9.15145L7.92421 7.07572L7.07568 7.92425L9.15142 9.99998Z"
+     :fill color-2}]])
+
+(defn- dropdown-20
+  [{:keys [color color-2]
+    :or   {color   colors/neutral-100
+           color-2 colors/white}
+    :as   props}]
+  [container props
+   [svg/path
+    {:d
+     "M3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10Z"
+     :fill color}]
+   [svg/path
+    {:d
+     "M7 8.5L10 11.5L13 8.5"
+     :stroke color-2
+     :stroke-width 1.2}]])
+
+(defn- pullup-20
+  [{:keys [color color-2]
+    :or   {color   colors/neutral-100
+           color-2 colors/white}
+    :as   props}]
+  [container props
+   [svg/path
+    {:d
+     "M3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10Z"
+     :fill color}]
+   [svg/path
+    {:d
+     "M7 11.5L10 8.5L13 11.5"
+     :stroke color-2
+     :stroke-width 1.2}]])
+
+(defn- dropdown-12
+  [{:keys [color color-2]
+    :or   {color   colors/neutral-100
+           color-2 colors/white}
+    :as   props}]
+  [container props
+   [svg/circle
+    {:cx   6
+     :cy   6
+     :r    6
+     :fill color}]
+   [svg/path
+    {:d
+     "M3.5 5L6 7.5L8.5 5"
+     :stroke color-2
+     :stroke-width 1.1}]])
+
+(defn- pullup-12
+  [{:keys [color color-2]
+    :or   {color   colors/neutral-100
+           color-2 colors/white}
+    :as   props}]
+  [container props
+   [svg/circle
+    {:cx   6
+     :cy   6
+     :r    6
+     :fill color}]
+   [svg/path
+    {:d
+     "M3.5 7L6 4.5L8.5 7"
+     :stroke color-2
+     :stroke-width 1.1}]])
+
+(defn- contact-12
+  [{:keys [color color-2]
+    :or   {color   colors/neutral-100
+           color-2 colors/white}
+    :as   props}]
+  [container props
+   [svg/circle
+    {:cx   6
+     :cy   6
+     :r    6
+     :fill color}]
+   [svg/path
+    {:d
+     "M2.79504 9.01494C2.89473 8.85584 3.00297 8.70977 3.11963 8.5761C3.90594 7.67512 4.97212 7.45024 5.99992 7.45024C7.02772 7.45024 8.0939 7.67512 8.88021 8.5761C8.99688 8.70978 9.10512 8.85585 9.2048 9.01495C8.9501 9.28561 8.66149 9.52401 8.34577 9.72335C8.25403 9.55824 8.15512 9.41818 8.05145 9.29939C7.56503 8.74204 6.88121 8.55024 5.99992 8.55024C5.11862 8.55024 4.43481 8.74204 3.94839 9.29939C3.84472 9.41818 3.74582 9.55824 3.65408 9.72334C3.33835 9.524 3.04975 9.2856 2.79504 9.01494ZM5.99992 3.5502C5.47525 3.5502 5.04992 3.97552 5.04992 4.5002C5.04992 5.02487 5.47525 5.4502 5.99992 5.4502C6.52459 5.4502 6.94992 5.02487 6.94992 4.5002C6.94992 3.97552 6.52459 3.5502 5.99992 3.5502ZM3.94992 4.5002C3.94992 3.36801 4.86773 2.4502 5.99992 2.4502C7.1321 2.4502 8.04992 3.36801 8.04992 4.5002C8.04992 5.63238 7.1321 6.5502 5.99992 6.5502C4.86773 6.5502 3.94992 5.63238 3.94992 4.5002Z"
+     :fill color-2}]])
 
 (def ^:private icons
-  {:i/clear-20 clear-20})
+  {:i/clear-20    clear-20
+   :i/dropdown-20 dropdown-20
+   :i/pullup-20   pullup-20
+   :i/dropdown-12 dropdown-12
+   :i/pullup-12   pullup-12
+   :i/contact-12  contact-12})
 
 (defn- append-to-keyword
   [k & xs]

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

@@ -82,8 +82,8 @@
    :size  20})
 
 (defn input
-  [colors-by-status small? multiple-lines?]
-  (let [base-props (assoc (text/text-style {:size :paragraph-1 :weight :regular})
+  [colors-by-status small? multiple-lines? weight]
+  (let [base-props (assoc (text/text-style {:size :paragraph-1 :weight (or weight :regular)})
                           :flex             1
                           :padding-right    0
                           :padding-left     (if small? 4 8)

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

@@ -58,7 +58,7 @@
    :label :char-limit :on-char-limit-reach :icon-name :multiline? :on-focus :on-blur])
 
 (defn- base-input
-  [{:keys [on-change-text on-char-limit-reach]}]
+  [{:keys [on-change-text on-char-limit-reach container-style weight]}]
   (let [status              (reagent/atom :default)
         internal-on-focus   #(reset! status :focus)
         internal-on-blur    #(reset! status :default)
@@ -84,21 +84,22 @@
             colors-by-status (style/status-colors status-kw blur? theme)
             variant-colors   (style/variants-colors blur? theme)
             clean-props      (apply dissoc props custom-props)]
-        [:<>
+        [rn/view {:style container-style}
          (when (or label char-limit)
            [label-&-counter
             {:variant-colors variant-colors
              :label          label
              :current-chars  @char-count
              :char-limit     char-limit}])
-         [rn/view {:style (style/input-container colors-by-status small? disabled?)}
+         [rn/view
+          {:style (style/input-container colors-by-status small? disabled?)}
           (when-let [{:keys [icon-name]} left-icon]
             [left-accessory
              {:variant-colors variant-colors
               :small?         small?
               :icon-name      icon-name}])
           [rn/text-input
-           (cond-> {:style                  (style/input colors-by-status small? @multiple-lines?)
+           (cond-> {:style                  (style/input colors-by-status small? @multiple-lines? weight)
                     :accessibility-label    :input
                     :placeholder-text-color (:placeholder colors-by-status)
                     :keyboard-appearance    (quo.theme/theme-value :light :dark theme)

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

@@ -49,5 +49,6 @@
       [title-input/view
        (merge title-input-props
               {:blur?               true
+               :size                :heading-2
                :placeholder         placeholder
                :customization-color customization-color})]]]))