updates

* Bugfixes for the style of "New to Status" screen

* Updates

.gitignore

@@ -100,9 +100,8 @@ Statusgo.xcframework
 
 #ios
 /ios/Pods/
+/ios/logs/
 /ios/StatusIm.xcworkspace
-/ios/react-native-xcode.log
-/ios/set_xcode_version.log
 .ruby-version
 status-e2e/
 
@@ -183,4 +182,4 @@ test/appium/tests/users.py
 /.calva/
 
 ## component-tests
-*.log
+*.log

ci/Jenkinsfile.android

@@ -1,4 +1,4 @@
-library 'status-jenkins-lib@v1.6.6'
+library 'status-jenkins-lib@v1.6.9'
 
 /* Options section can't access functions in objects. */
 def isPRBuild = utils.isPRBuild()

ci/Jenkinsfile.combined

@@ -1,4 +1,4 @@
-library 'status-jenkins-lib@v1.6.6'
+library 'status-jenkins-lib@v1.6.9'
 
 pipeline {
   agent { label 'linux' }

ci/Jenkinsfile.ios

@@ -1,4 +1,4 @@
-library 'status-jenkins-lib@v1.6.6'
+library 'status-jenkins-lib@v1.6.9'
 
 /* Options section can't access functions in objects. */
 def isPRBuild = utils.isPRBuild()
@@ -63,6 +63,9 @@ pipeline {
       steps {
         script { api = ios.bundle() }
       }
+      post {
+        failure { archiveArtifacts 'ios/logs/*' }
+      }
     }
     stage('Parallel Upload') {
       parallel {

ci/Jenkinsfile.nix-cache

@@ -1,4 +1,4 @@
-library 'status-jenkins-lib@v1.6.6'
+library 'status-jenkins-lib@v1.6.9'
 
 pipeline {
   agent { label params.AGENT_LABEL }

ci/Jenkinsfile.tests

@@ -1,4 +1,4 @@
-library 'status-jenkins-lib@v1.6.6'
+library 'status-jenkins-lib@v1.6.9'
 
 /* Options section can't access functions in objects. */
 def isPRBuild = utils.isPRBuild()

ci/tests/Jenkinsfile.e2e-nightly

@@ -1,4 +1,4 @@
-library 'status-jenkins-lib@v1.6.6'
+library 'status-jenkins-lib@v1.6.9'
 
 pipeline {
 

ci/tests/Jenkinsfile.e2e-prs

@@ -1,4 +1,4 @@
-library 'status-jenkins-lib@v1.6.6'
+library 'status-jenkins-lib@v1.6.9'
 
 pipeline {
 

ci/tests/Jenkinsfile.e2e-upgrade

@@ -1,4 +1,4 @@
-library 'status-jenkins-lib@v1.6.6'
+library 'status-jenkins-lib@v1.6.9'
 
 pipeline {
 

ci/tools/Jenkinsfile.fastlane-clean

@@ -1,4 +1,4 @@
-library 'status-jenkins-lib@v1.6.6'
+library 'status-jenkins-lib@v1.6.9'
 
 pipeline {
   agent { label 'macos' }

ci/tools/Jenkinsfile.playstore-meta

@@ -1,4 +1,4 @@
-library 'status-jenkins-lib@v1.6.6'
+library 'status-jenkins-lib@v1.6.9'
 
 pipeline {
   agent { label 'linux' }

ci/tools/Jenkinsfile.xcode-clean

@@ -1,4 +1,4 @@
-library 'status-jenkins-lib@v1.6.6'
+library 'status-jenkins-lib@v1.6.9'
 
 pipeline {
   agent {

doc/new-guidelines.md

@@ -116,6 +116,20 @@ deref'ed atoms.
   {:background-color (colors/theme-colors colors/white colors/neutral-90)})
 ```
 
+### Custom Colors
+
+The Status designs have a lot of customization of user and group colors with components and pages. For consistency it is best to use `customization-color` as the prop key on pages and components. This will help easily identify what pages and components in the application are using customized colors.
+
+```clojure
+;; bad
+(defn community-card [{keys [custom-color]}] 
+  ...)
+
+;; good
+(defn community-card [{keys [customization-color]}] 
+  ...)
+```
+
 ### Using TODOs comments
 
 _TODO_ comments are used extensively in the codebase, but prefer to use them

fastlane/Fastfile

@@ -123,6 +123,7 @@ def build_ios_adhoc(readonly: false, pr_build: false)
     export_method: 'ad-hoc',
     output_name: 'StatusIm',
     output_directory: 'status-ios',
+    buildlog_path: 'ios/logs',
     export_options: {
       signingStyle: 'manual',
       provisioningProfiles: {
@@ -162,6 +163,7 @@ def build_ios_e2e
     # 3. directory where to up StatusIm.app
     derived_data_path: 'status-ios',
     output_name: 'StatusIm.app',
+    buildlog_path: 'ios/logs',
     # -------------------------------------
     # Normal stuff
     scheme: 'StatusIm',
@@ -239,6 +241,7 @@ platform :ios do
       clean: true,
       export_method: 'app-store',
       output_directory: 'status-ios',
+      buildlog_path: 'ios/logs',
       include_symbols: false,
       export_options: {
         "combileBitcode": true,

ios/Podfile.lock

@@ -228,6 +228,8 @@ PODS:
     - React-Core
   - react-native-netinfo (4.7.0):
     - React
+  - react-native-orientation-locker (1.5.0):
+    - React-Core
   - react-native-randombytes (3.6.1):
     - React-Core
   - react-native-safe-area-context (2.0.0):
@@ -238,7 +240,7 @@ PODS:
     - React
   - react-native-status (1.0.0):
     - React
-  - react-native-status-keycard (2.5.38):
+  - react-native-status-keycard (2.5.39):
     - Keycard
     - React
   - react-native-webview (11.16.0):
@@ -433,6 +435,7 @@ DEPENDENCIES:
   - react-native-lottie-splash-screen (from `../node_modules/react-native-lottie-splash-screen`)
   - react-native-mail (from `../node_modules/react-native-mail`)
   - "react-native-netinfo (from `../node_modules/@react-native-community/netinfo`)"
+  - react-native-orientation-locker (from `../node_modules/react-native-orientation-locker`)
   - react-native-randombytes (from `../node_modules/react-native-randombytes`)
   - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
   - react-native-shake (from `../node_modules/react-native-shake`)
@@ -545,6 +548,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-mail"
   react-native-netinfo:
     :path: "../node_modules/@react-native-community/netinfo"
+  react-native-orientation-locker:
+    :path: "../node_modules/react-native-orientation-locker"
   react-native-randombytes:
     :path: "../node_modules/react-native-randombytes"
   react-native-safe-area-context:
@@ -666,12 +671,13 @@ SPEC CHECKSUMS:
   react-native-lottie-splash-screen: 068688c15dd478301fda00f8d87d7fb7d5b9a93e
   react-native-mail: 8fdcd3aef007c33a6877a18eb4cf7447a1d4ce4a
   react-native-netinfo: ddaca8bbb9e6e914b1a23787ccb879bc642931c9
+  react-native-orientation-locker: 851f6510d8046ea2f14aa169b1e01fcd309a94ba
   react-native-randombytes: 421f1c7d48c0af8dbcd471b0324393ebf8fe7846
   react-native-safe-area-context: 60f654e00b6cc416573f6d5dbfce3839958eb57a
   react-native-shake: de052eaa3eadc4a326b8ddd7ac80c06e8d84528c
   react-native-slider: 12bd76d3d568c9c5500825db54123d44b48e4ad4
   react-native-status: 21f75d492fd311dc111303da38a7a2b23a8a8466
-  react-native-status-keycard: f60ca57d789aad6875c64ece81ab06ef0609e0d3
+  react-native-status-keycard: f1c1227b2d5984c10fb44db68e4bfd2937f31e98
   react-native-webview: 28a8636d97ee641f2ee8f20492d7a6c269c1d703
   React-RCTActionSheet: e911b99f0d6fa7711ffc2f62d236b12a32771835
   React-RCTAnimation: ad8b853170a059faf31d6add34f67d22391bbe01

ios/StatusIm.xcodeproj/project.pbxproj

@@ -526,7 +526,7 @@
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = "/usr/bin/env sh";
-			shellScript = "set -o errexit\nexport NODE_BINARY=\"${NODE_BINARY:-node}\"\nexport NODE_ARGS=\" --openssl-legacy-provider --max-old-space-size=16384 \"\n\nbash -x ../node_modules/react-native/scripts/react-native-xcode.sh > ./react-native-xcode.log 2>&1";
+			shellScript = "set -o errexit\nexport NODE_BINARY=\"${NODE_BINARY:-node}\"\nexport NODE_ARGS=\" --openssl-legacy-provider --max-old-space-size=16384 \"\n\nbash -x ../node_modules/react-native/scripts/react-native-xcode.sh > ./logs/react-native-xcode.log 2>&1";
 		};
 		0F876BD5356F61BF142A01A0 /* [CP] Check Pods Manifest.lock */ = {
 			isa = PBXShellScriptBuildPhase;
@@ -584,7 +584,7 @@
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = "/usr/bin/env sh";
-			shellScript = "set -o errexit\nexport NODE_BINARY=\"${NODE_BINARY:-node}\"\nexport NODE_ARGS=\" --openssl-legacy-provider --max-old-space-size=16384 \"\n\nbash -x ../node_modules/react-native/scripts/react-native-xcode.sh > ./react-native-xcode.log 2>&1";
+			shellScript = "set -o errexit\nexport NODE_BINARY=\"${NODE_BINARY:-node}\"\nexport NODE_ARGS=\" --openssl-legacy-provider --max-old-space-size=16384 \"\n\nbash -x ../node_modules/react-native/scripts/react-native-xcode.sh > ./logs/react-native-xcode.log 2>&1";
 		};
 		3AAD2AD724A3A60E0075D594 /* Run Script */ = {
 			isa = PBXShellScriptBuildPhase;
@@ -598,7 +598,7 @@
 			);
 			runOnlyForDeploymentPostprocessing = 1;
 			shellPath = "/usr/bin/env sh";
-			shellScript = "\"${PROJECT_DIR}/scripts/set_xcode_version.sh\" > ./set_xcode_version.log 2>&1";
+			shellScript = "\"${PROJECT_DIR}/scripts/set_xcode_version.sh\" > ./logs/set_xcode_version.log 2>&1";
 		};
 		3C1038075AE5E6FB86AC2319 /* [CP] Copy Pods Resources */ = {
 			isa = PBXShellScriptBuildPhase;
@@ -678,7 +678,7 @@
 			);
 			runOnlyForDeploymentPostprocessing = 1;
 			shellPath = "/usr/bin/env sh";
-			shellScript = "\"${PROJECT_DIR}/scripts/set_xcode_version.sh\" > ./set_xcode_version.log 2>&1";
+			shellScript = "\"${PROJECT_DIR}/scripts/set_xcode_version.sh\" > ./logs/set_xcode_version.log 2>&1";
 		};
 		E732E3E1B024946173BF6D3D /* [CP] Copy Pods Resources */ = {
 			isa = PBXShellScriptBuildPhase;

ios/logs/README.md

@@ -0,0 +1,14 @@
+# Description
+
+This directory is the destination of logs created by Fastlane and React Native Xcode script.
+
+# Logs
+
+* `react-native-xcode.log` - Output from `node_modules/react-native/scripts/react-native-xcode.sh`.
+  - Created by redirecting output of `shellScript` in `ios/StatusIm.xcodeproj/project.pbxproj`.
+* `Status PR-StatusImPR.log - Created by [Fastlane Gym](https://docs.fastlane.tools/actions/gym/).
+  - Configred via [`Fastfile`](../Fastfile) using `buildlog_path` argument for `build_ios_app`.
+
+# CI
+
+These log files are uploaded to Jenkins as CI job artifacts on failure using `archiveArtifacts`.

modules/react-native-status/android/src/main/java/im/status/ethereum/module/StatusModule.java

@@ -1139,11 +1139,6 @@ class StatusModule extends ReactContextBaseJavaModule implements LifecycleEventL
         executeRunnableStatusGoMethod(() -> Statusgo.generateAlias(seed), callback);
     }
 
-    @ReactMethod
-    public void emojiHash(final String publicKey, final Callback callback) throws JSONException {
-        executeRunnableStatusGoMethod(() -> Statusgo.emojiHash(publicKey), callback);
-    }
-
     @ReactMethod(isBlockingSynchronousMethod = true)
     public String identicon(final String seed) {
         return Statusgo.identicon(seed);

modules/react-native-status/ios/RCTStatus/RCTStatus.m

@@ -866,12 +866,6 @@ RCT_EXPORT_METHOD(generateAliasAsync:(NSString *)publicKey
     callback(@[result]);
 }
 
-RCT_EXPORT_METHOD(emojiHash:(NSString *)publicKey
-                  callback:(RCTResponseSenderBlock)callback) {
-    NSString *result = StatusgoEmojiHash(publicKey);
-    callback(@[result]);
-}
-
 RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD(identicon:(NSString *)publicKey) {
   return StatusgoIdenticon(publicKey);
 }

nix/shell.nix

@@ -12,7 +12,7 @@ in mkShell {
 
   buildInputs = with pkgs; lib.unique ([
     # core utilities that should always be present in a shell
-    bash curl wget file unzip flock
+    bash curl wget file unzip flock procps
     git gnumake jq ncurses gnugrep parallel
     lsof # used in start-react-native.sh
     # build specific utilities
@@ -22,7 +22,7 @@ in mkShell {
     # other nice to have stuff
     yarn nodejs python27
   ] # and some special cases
-    ++ lib.optionals stdenv.isDarwin [ cocoapods clang ]
+    ++ lib.optionals stdenv.isDarwin [ cocoapods clang tcl ]
     ++ lib.optionals (!stdenv.isDarwin) [ gcc8 ]
   );
 

src/js/worklets/lightbox.js

@@ -0,0 +1,10 @@
+import { useDerivedValue } from 'react-native-reanimated';
+
+export function infoLayout(input, isTop) {
+    return useDerivedValue(
+        function () {
+            'worklet'
+            return isTop ? input.value : -input.value
+        }
+    );
+}

src/js/worklets/scroll_view.js

@@ -0,0 +1,7 @@
+import {useAnimatedScrollHandler} from "react-native-reanimated";
+
+export function useAnimatedScrollHandlerWorklet(scrollY) {
+    return useAnimatedScrollHandler((event) => {
+        scrollY.value = event.contentOffset.y;
+    })
+}

src/mocks/js_dependencies.cljs

@@ -147,7 +147,10 @@ globalThis.__STATUS_MOBILE_JS_IDENTITY_PROXY__ = new Proxy({}, {get() { return (
     :SvgXml   #js {:render identity}
     :default  #js {:render identity}})
 (def react-native-webview #js {:default {}})
-(def react-native-audio-toolkit #js {:MediaStates {}})
+(def react-native-audio-toolkit
+  #js
+   {:MediaStates        {}
+    :PlaybackCategories {}})
 (def net-info #js {})
 (def touchid #js {})
 (def react-native-image-viewing #js {:default {}})
@@ -352,11 +355,6 @@ globalThis.__STATUS_MOBILE_JS_IDENTITY_PROXY__ = new Proxy({}, {get() { return (
 (def worklet-factory
   #js {:applyAnimationsToStyle (fn [])})
 
-(def shell-worklets #js {})
-
-(def bottom-sheet #js {})
-(def record-audio-worklets #js {})
-
 ;; Update i18n_resources.cljs
 (defn mock
   [module]
@@ -404,10 +402,12 @@ globalThis.__STATUS_MOBILE_JS_IDENTITY_PROXY__ = new Proxy({}, {get() { return (
     "@react-native-async-storage/async-storage"     async-storage
     "react-native-svg"                              react-native-svg
     "react-native-orientation-locker"               react-native-orientation-locker
-    "../src/js/worklet_factory.js"                  worklet-factory
-    "../src/js/shell_worklets.js"                   shell-worklets
-    "../src/js/bottom_sheet.js"                     bottom-sheet
-    "../src/js/record_audio_worklets.js"            record-audio-worklets
+    "../src/js/worklets/core.js"                    worklet-factory
+    "../src/js/worklets/shell.js"                   #js {}
+    "../src/js/worklets/bottom_sheet.js"            #js {}
+    "../src/js/worklets/record_audio.js"            #js {}
+    "../src/js/worklets/scroll_view.js"             #js {}
+    "../src/js/worklets/lightbox.js"                #js {}
     "./fleets.js"                                   default-fleets
     "@walletconnect/client"                         wallet-connect-client
     "../translations/ar.json"                       (js/JSON.parse (slurp "./translations/ar.json"))

src/quo2/components/avatars/user_avatar.cljs

@@ -1,138 +0,0 @@
-(ns quo2.components.avatars.user-avatar
-  (:require [clojure.string :as string]
-            [quo2.components.markdown.text :as text]
-            [quo2.foundations.colors :as colors]
-            [quo2.theme :refer [dark?]]
-            [react-native.core :as rn]
-            [react-native.fast-image :as fast-image]))
-
-(def sizes
-  {:big    {:outer                   80
-            :inner                   72
-            :status-indicator        20
-            :status-indicator-border 4
-            :font-size               :heading-1}
-   :medium {:outer                   48
-            :inner                   44
-            :status-indicator        12
-            :status-indicator-border 2
-            :font-size               :paragraph-1}
-   :small  {:outer                   32
-            :inner                   28
-            :status-indicator        12
-            :status-indicator-border 2
-            :font-size               :paragraph-2}
-   :xs     {:outer                   24
-            :inner                   24
-            :status-indicator        0
-            :status-indicator-border 0
-            :font-size               :paragraph-2}
-   :xxs    {:outer                   20
-            :inner                   20
-            :status-indicator        0
-            :status-indicator-border 0
-            :font-size               :label}
-   :xxxs   {:outer                   16
-            :inner                   16
-            :status-indicator        0
-            :status-indicator-border 0
-            :font-size               :label}})
-
-(defn dot-indicator
-  [{:keys [size online? ring? dark?]}]
-  (let [dimensions   (get-in sizes [size :status-indicator])
-        border-width (get-in sizes [size :status-indicator-border])
-        right        (case size
-                       :big    2
-                       :medium 0
-                       :small  -2
-                       0)
-        bottom       (case size
-                       :big    (if ring? -1 2)
-                       :medium (if ring? 0 -2)
-                       :small  -2
-                       0)]
-    [rn/view
-     {:style {:background-color (if online?
-                                  colors/success-50
-                                  colors/neutral-40)
-              :width            dimensions
-              :height           dimensions
-              :border-width     border-width
-              :border-radius    dimensions
-              :border-color     (if dark?
-                                  colors/neutral-100
-                                  colors/white)
-              :position         :absolute
-              :bottom           bottom
-              :right            right}}]))
-
-(defn initials-style
-  [inner-dimensions outer-dimensions]
-  {:position         :absolute
-   :top              (/ (- outer-dimensions inner-dimensions) 2)
-   :left             (/ (- outer-dimensions inner-dimensions) 2)
-   :width            inner-dimensions
-   :height           inner-dimensions
-   :border-radius    inner-dimensions
-   :justify-content  :center
-   :align-items      :center
-   :background-color (colors/custom-color-by-theme :turquoise 50 60)})
-
-(defn outer-styles
-  [outer-dimensions]
-  {:width         outer-dimensions
-   :height        outer-dimensions
-   :border-radius outer-dimensions})
-
-(def one-initial-letter-sizes #{:xs :xxs :xxxs})
-(def valid-ring-sizes #{:big :medium :small})
-
-(defn initials-avatar
-  [{:keys [full-name size inner-dimensions outer-dimensions]}]
-  (let [amount-initials (if (one-initial-letter-sizes size) 1 2)
-        initials        (as-> full-name $
-                          (string/split $ " ")
-                          (map (comp string/upper-case first) $)
-                          (take amount-initials $)
-                          (string/join $))
-        font-size       (get-in sizes [size :font-size])]
-    [rn/view {:style (initials-style inner-dimensions outer-dimensions)}
-     [text/text
-      {:style  {:color colors/white-opa-70}
-       :weight :semi-bold
-       :size   font-size}
-      initials]]))
-
-(defn user-avatar
-  "If no `profile-picture` is given, draws the initials based on the `full-name` and
-  uses `ring-background` to display the ring behind the initials when given. Otherwise,
-  shows the profile picture which already comes with the ring drawn over it."
-  [{:keys [full-name status-indicator? online? size profile-picture ring-background]
-    :or   {status-indicator? true
-           online?           true
-           size              :big}}]
-  (let [full-name        (or full-name "empty name")
-        draw-ring?       (and ring-background (valid-ring-sizes size))
-        outer-dimensions (get-in sizes [size :outer])
-        inner-dimensions (get-in sizes [size (if draw-ring? :inner :outer)])]
-    [rn/view
-     {:style               (outer-styles outer-dimensions)
-      :accessibility-label :user-avatar}
-     ;; The `profile-picture` already has the ring in it
-     (when-let [image (or profile-picture ring-background)]
-       [fast-image/fast-image
-        {:style  (outer-styles outer-dimensions)
-         :source image}])
-     (when-not profile-picture
-       [initials-avatar
-        {:full-name        full-name
-         :size             size
-         :inner-dimensions inner-dimensions
-         :outer-dimensions outer-dimensions}])
-     (when status-indicator?
-       [dot-indicator
-        {:size    size
-         :online? online?
-         :ring?   draw-ring?
-         :dark?   (dark?)}])]))

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

@@ -0,0 +1,129 @@
+(ns quo2.components.avatars.user-avatar.component-spec
+  (:require [quo2.components.avatars.user-avatar.view :as user-avatar]
+            [test-helpers.component :as h]))
+
+(defonce mock-picture (js/require "../resources/images/mock2/user_picture_male4.png"))
+
+(h/describe "user avatar"
+  (h/test "Default render"
+    (h/render [user-avatar/user-avatar])
+    (h/is-truthy (h/get-by-label-text :user-avatar))
+    (h/is-truthy (h/get-by-text "EN")))
+
+  (h/describe "Profile picture"
+    (h/test "Renders"
+      (h/render
+       [user-avatar/user-avatar {:profile-picture mock-picture}])
+      (h/is-truthy (h/get-by-label-text :profile-picture)))
+
+    (h/test "Renders even if `:full-name` is passed"
+      (h/render
+       [user-avatar/user-avatar
+        {:profile-picture mock-picture
+         :full-name       "New User1"}])
+      (h/is-truthy (h/get-by-label-text :profile-picture))
+      (h/is-null (h/query-by-label-text :initials-avatar)))
+
+    (h/describe "Status indicator"
+      (h/test "Render"
+        (h/render
+         [user-avatar/user-avatar
+          {:profile-picture   mock-picture
+           :status-indicator? true}])
+        (h/is-truthy (h/get-by-label-text :profile-picture))
+        (h/is-truthy (h/get-by-label-text :status-indicator)))
+
+      (h/test "Do not render"
+        (h/render
+         [user-avatar/user-avatar
+          {:profile-picture   mock-picture
+           :status-indicator? false}])
+        (h/is-truthy (h/get-by-label-text :profile-picture))
+        (h/is-null (h/query-by-label-text :status-indicator)))))
+
+  (h/describe "Initials Avatar"
+    (h/describe "Render initials"
+      (letfn [(user-avatar-component [size]
+                [user-avatar/user-avatar
+                 {:full-name "New User"
+                  :size      size}])]
+        (h/describe "Two letters"
+          (h/test "Size :big"
+            (h/render (user-avatar-component :big))
+            (h/is-truthy (h/get-by-text "NU")))
+
+          (h/test "Size :medium"
+            (h/render (user-avatar-component :medium))
+            (h/is-truthy (h/get-by-text "NU")))
+
+          (h/test "Size :small"
+            (h/render (user-avatar-component :small))
+            (h/is-truthy (h/get-by-text "NU"))))
+
+        (h/describe "One letter"
+          (h/test "Size :xs"
+            (h/render (user-avatar-component :xs))
+            (h/is-truthy (h/get-by-text "N")))
+
+          (h/test "Size :xxs"
+            (h/render (user-avatar-component :xxs))
+            (h/is-truthy (h/get-by-text "N")))
+
+          (h/test "Size :xxxs"
+            (h/render (user-avatar-component :xxxs))
+            (h/is-truthy (h/get-by-text "N"))))))
+
+    (h/describe "Render ring"
+      (letfn [(user-avatar-component [size]
+                [user-avatar/user-avatar
+                 {:full-name       "New User"
+                  :ring-background mock-picture
+                  :size            size}])]
+        (h/describe "Passed and drawn"
+          (h/test "Size :big"
+            (h/render (user-avatar-component :big))
+            (h/is-truthy (h/get-by-label-text :initials-avatar))
+            (h/is-truthy (h/get-by-label-text :ring-background)))
+
+          (h/test "Size :medium"
+            (h/render (user-avatar-component :medium))
+            (h/is-truthy (h/get-by-label-text :initials-avatar))
+            (h/is-truthy (h/get-by-label-text :ring-background)))
+
+          (h/test "Size :small"
+            (h/render (user-avatar-component :small))
+            (h/is-truthy (h/get-by-label-text :initials-avatar))
+            (h/is-truthy (h/get-by-label-text :ring-background))))
+
+        (h/describe "Passed and not drawn (because of invalid size for ring)"
+          (h/test "Size :xs"
+            (h/render (user-avatar-component :xs))
+            (h/is-truthy (h/get-by-label-text :initials-avatar))
+            (h/is-null (h/query-by-label-text :ring-background)))
+
+          (h/test "Size :xxs"
+            (h/render (user-avatar-component :xxs))
+            (h/is-truthy (h/get-by-label-text :initials-avatar))
+            (h/is-null (h/query-by-label-text :ring-background)))
+
+          (h/test "Size :xxxs"
+            (h/render (user-avatar-component :xxxs))
+            (h/is-truthy (h/get-by-label-text :initials-avatar))
+            (h/is-null (h/query-by-label-text :ring-background))))))
+
+    (h/describe "Status indicator"
+      (h/test "Render"
+        (h/render
+         [user-avatar/user-avatar
+          {:full-name         "Test User"
+           :status-indicator? true}])
+        (h/is-truthy (h/get-by-label-text :initials-avatar))
+        (h/is-truthy (h/get-by-label-text :status-indicator)))
+
+      (h/test "Do not render"
+        (h/render
+         [user-avatar/user-avatar
+          {:full-name         "Test User"
+           :status-indicator? false}])
+        (h/is-truthy (h/get-by-label-text :initials-avatar))
+        (h/is-null (h/query-by-label-text :status-indicator))))))

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

@@ -0,0 +1,83 @@
+(ns quo2.components.avatars.user-avatar.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(def sizes
+  {:big    {:outer                   80
+            :inner                   72
+            :status-indicator        20
+            :status-indicator-border 4
+            :font-size               :heading-1}
+   :medium {:outer                   48
+            :inner                   44
+            :status-indicator        12
+            :status-indicator-border 2
+            :font-size               :paragraph-1}
+   :small  {:outer                   32
+            :inner                   28
+            :status-indicator        12
+            :status-indicator-border 2
+            :font-size               :paragraph-2}
+   :xs     {:outer                   24
+            :inner                   24
+            :status-indicator        0
+            :status-indicator-border 0
+            :font-size               :paragraph-2}
+   :xxs    {:outer                   20
+            :inner                   20
+            :status-indicator        0
+            :status-indicator-border 0
+            :font-size               :label}
+   :xxxs   {:outer                   16
+            :inner                   16
+            :status-indicator        0
+            :status-indicator-border 0
+            :font-size               :label}})
+
+(defn outer
+  [size]
+  (let [dimensions (get-in sizes [size :outer])]
+    {:width         dimensions
+     :height        dimensions
+     :border-radius dimensions}))
+
+(defn initials-avatar
+  [size draw-ring? customization-color]
+  (let [outer-dimensions (get-in sizes [size :outer])
+        inner-dimensions (get-in sizes [size (if draw-ring? :inner :outer)])]
+    {:position         :absolute
+     :top              (/ (- outer-dimensions inner-dimensions) 2)
+     :left             (/ (- outer-dimensions inner-dimensions) 2)
+     :width            inner-dimensions
+     :height           inner-dimensions
+     :border-radius    inner-dimensions
+     :justify-content  :center
+     :align-items      :center
+     :background-color (colors/custom-color-by-theme customization-color 50 60)}))
+
+(def initials-avatar-text
+  {:color colors/white-opa-70})
+
+(defn dot
+  [size online? ring?]
+  (let [background   (if online? colors/success-50 colors/neutral-40)
+        dimensions   (get-in sizes [size :status-indicator])
+        border-width (get-in sizes [size :status-indicator-border])
+        right        (case size
+                       :big    2
+                       :medium 0
+                       :small  -2
+                       0)
+        bottom       (case size
+                       :big    (if ring? -1 2)
+                       :medium (if ring? 0 -2)
+                       :small  -2
+                       0)]
+    {:position         :absolute
+     :bottom           bottom
+     :right            right
+     :width            dimensions
+     :height           dimensions
+     :border-width     border-width
+     :border-radius    dimensions
+     :border-color     (colors/theme-colors colors/white colors/neutral-100)
+     :background-color background}))

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

@@ -0,0 +1,61 @@
+(ns quo2.components.avatars.user-avatar.view
+  (:require [clojure.string :as string]
+            [quo2.components.avatars.user-avatar.style :as style]
+            [quo2.components.markdown.text :as text]
+            [react-native.core :as rn]
+            [react-native.fast-image :as fast-image]))
+
+(defn- extract-initials
+  [full-name amount-initials]
+  (let [upper-case-first-letter (comp string/upper-case first)
+        names-list              (string/split full-name " ")]
+    (->> names-list
+         (map upper-case-first-letter)
+         (take amount-initials)
+         (string/join))))
+
+(defn initials-avatar
+  [{:keys [full-name size draw-ring? customization-color]}]
+  (let [font-size       (get-in style/sizes [size :font-size])
+        amount-initials (if (#{:xs :xxs :xxxs} size) 1 2)]
+    [rn/view
+     {:accessibility-label :initials-avatar
+      :style               (style/initials-avatar size draw-ring? customization-color)}
+     [text/text
+      {:style  style/initials-avatar-text
+       :size   font-size
+       :weight :semi-bold}
+      (extract-initials full-name amount-initials)]]))
+
+(def valid-ring-sizes #{:big :medium :small})
+
+(defn user-avatar
+  "If no `profile-picture` is given, draws the initials based on the `full-name` and
+  uses `ring-background` to display the ring behind the initials when given. Otherwise,
+  shows the `profile-picture` which already comes with the ring drawn."
+  [{:keys [full-name status-indicator? online? size profile-picture ring-background
+           customization-color]
+    :or   {status-indicator?   true
+           online?             true
+           size                :big
+           customization-color :turquoise}}]
+  (let [full-name    (or full-name "empty name")
+        draw-ring?   (and ring-background (valid-ring-sizes size))
+        outer-styles (style/outer size)]
+    [rn/view {:style outer-styles :accessibility-label :user-avatar}
+     ;; The `profile-picture` already has the ring in it
+     (when-let [image (or profile-picture ring-background)]
+       [fast-image/fast-image
+        {:accessibility-label (if draw-ring? :ring-background :profile-picture)
+         :style               outer-styles
+         :source              image}])
+     (when-not profile-picture
+       [initials-avatar
+        {:full-name           full-name
+         :size                size
+         :draw-ring?          draw-ring?
+         :customization-color customization-color}])
+     (when status-indicator?
+       [rn/view
+        {:accessibility-label :status-indicator
+         :style               (style/dot size online? draw-ring?)}])]))

src/quo2/components/buttons/button.cljs

@@ -204,7 +204,7 @@
    [button opts \"label\"]
    opts
    {:type   :primary/:secondary/:grey/:dark-grey/:outline/:ghost/
-            :danger/:photo-bg/:blur-bg/:blur-bg-ouline/:shell/:community
+            :danger/:photo-bg/:blur-bg/:blur-bg-outline/:shell/:community
     :size   40/32/24
     :icon   true/false
     :community-color '#FFFFFF'
@@ -213,14 +213,14 @@
     :after  :icon-keyword}
 
    only icon
-   [button {:icon true} :main-icons/close-circle]"
+   [button {:icon true} :i/close-circle]"
   [_ _]
   (let [pressed (reagent/atom false)]
     (fn
       [{:keys [on-press disabled type size community-color community-text-color before after above
                width
                override-theme override-background-color
-               on-long-press accessibility-label icon icon-no-color style test-ID]
+               on-long-press accessibility-label icon icon-no-color style inner-style test-ID]
         :or   {type :primary
                size 40}}
        children]
@@ -275,7 +275,8 @@
                       (community-themed? type community-color)
                       (merge
                        {:background-color community-color}
-                       (when (= state :pressed) {:opacity 0.9}))))}
+                       (when (= state :pressed) {:opacity 0.9})))
+                    inner-style)}
            (when above
              [rn/view
               [quo2.icons/icon above

src/quo2/components/community/community_card_view.cljs

@@ -5,8 +5,8 @@
             [react-native.core :as rn]))
 
 (defn community-card-view-item
-  [{:keys [name description locked images
-           status tokens cover tags width]} on-press]
+  [{:keys [name description locked images cover
+           status tokens tags width]} on-press]
   [rn/touchable-without-feedback
    {:accessibility-label :community-card-item
     :on-press            on-press}
@@ -18,16 +18,16 @@
       :on-press on-press}
      [rn/view
       {:flex 1}
-      [rn/view (style/community-cover-container 40)
+      [rn/view (style/community-cover-container 60)
        [rn/image
         {:source cover
          :style
-         {:flex          1
-          :border-radius 20}}]]
+         {:flex                    1
+          :border-top-right-radius 20
+          :border-top-left-radius  20}}]]
       [rn/view (style/card-view-content-container 12)
        [rn/view (style/card-view-chat-icon 48)
         [icon/community-icon {:images images} 48]]
-
        (when (= status :gated)
          [rn/view (style/permission-tag-styles)
           [community-view/permission-tag-container

src/quo2/components/community/community_list_view.cljs

@@ -78,42 +78,42 @@
   [props
    {:keys [name
            muted?
-           unread-messages?
-           unread-mentions-count
+           unviewed-messages-count
+           unviewed-mentions-count
            status
-           community-icon
+           images
            tokens
-           locked?]}]
+           locked?
+           style]}]
   [rn/touchable-highlight
    (merge {:underlay-color (colors/theme-colors
                             colors/neutral-5
                             colors/neutral-95)
            :style          {:border-radius 12}}
           props)
-   [rn/view {:flex 1}
-    [rn/view (style/membership-info-container)
-     [community-icon/community-icon
-      {:images community-icon} 32]
-     [rn/view
-      {:flex            1
-       :margin-left     12
-       :justify-content :center}
-      [text/text
-       {:accessibility-label :chat-name-text
-        :number-of-lines     1
-        :ellipsize-mode      :tail
-        :weight              :semi-bold
-        :size                :paragraph-1}
-       name]]
+   [rn/view (merge (style/membership-info-container) style)
+    [community-icon/community-icon
+     {:images images} 32]
+    [rn/view
+     {:flex            1
+      :margin-left     12
+      :justify-content :center}
+     [text/text
+      {:accessibility-label :chat-name-text
+       :number-of-lines     1
+       :ellipsize-mode      :tail
+       :weight              :semi-bold
+       :size                :paragraph-1}
+      name]]
 
-     [rn/view
-      {:justify-content :center
-       :margin-right    16}
-      (if (= status :gated)
-        [community-view/permission-tag-container
-         {:locked? locked?
-          :tokens  tokens}]
-        [notification-view
-         {:muted?                muted?
-          :unread-mentions-count unread-mentions-count
-          :unread-messages?      unread-messages?}])]]]])
+    [rn/view
+     {:justify-content :center
+      :margin-right    16}
+     (if (= status :gated)
+       [community-view/permission-tag-container
+        {:locked? locked?
+         :tokens  tokens}]
+       [notification-view
+        {:muted?                muted?
+         :unread-mentions-count unviewed-mentions-count
+         :unread-messages?      (pos? unviewed-messages-count)}])]]])

src/quo2/components/community/community_view.cljs

@@ -42,16 +42,15 @@
 (defn community-tags
   [tags]
   [rn/view (style/community-tags-container)
-   (for [{:keys [id tag-label resource]} tags]
-     ^{:key id}
+   (for [{:keys [name emoji]} tags]
+     ^{:key name}
      [rn/view {:margin-right 8}
       [tag/tag
-       {:id        id
-        :size      24
-        :label     tag-label
+       {:size      24
+        :label     name
         :type      :emoji
         :labelled? true
-        :resource  resource}]])])
+        :resource  emoji}]])])
 
 (defn community-title
   [{:keys [title description size] :or {size :small}}]
@@ -82,6 +81,5 @@
                        colors/neutral-80)
     :locked?          locked?
     :tokens           tokens
-
     :size             24
     :on-press         on-press}])

src/quo2/components/community/discover_card.cljs

@@ -92,6 +92,7 @@
                                  colors/neutral-90)}
              {:flex-direction    :row
               :margin-horizontal 20
+              :margin-vertical   8
               :height            56
               :padding-right     12})
       [card-title-and-description title description]

src/quo2/components/community/style.cljs

@@ -15,9 +15,9 @@
    :shadow-radius    radius
    :shadow-opacity   1
    :shadow-color     colors/shadow
+   :elevation        1
    :border-radius    radius
    :justify-content  :space-between
-   :elevation        2
    :background-color (colors/theme-colors
                       colors/white
                       colors/neutral-90)})
@@ -57,14 +57,18 @@
 
 (defn card-view-content-container
   [padding-horizontal]
-  {:flex             1
-   :height           20
-   :padding-left     padding-horizontal
-   :padding-right    padding-horizontal
-   :border-radius    16
-   :background-color (colors/theme-colors
-                      colors/white
-                      colors/neutral-90)})
+  {:position                :absolute
+   :top                     40
+   :bottom                  0
+   :left                    0
+   :right                   0
+   :height                  20
+   :padding-horizontal      padding-horizontal
+   :border-top-right-radius 16
+   :border-top-left-radius  16
+   :background-color        (colors/theme-colors
+                             colors/white
+                             colors/neutral-90)})
 
 (defn card-view-chat-icon
   [icon-size]

src/quo2/components/counter/__tests__/counter_component_spec.cljs

@@ -1,34 +1,29 @@
 (ns quo2.components.counter.--tests--.counter-component-spec
-  (:require ["@testing-library/react-native" :as rtl]
-            [quo2.components.counter.counter :as counter]
-            [reagent.core :as reagent]))
+  (:require [quo2.components.counter.counter :as counter]
+            [test-helpers.component :as h]))
 
-(defn render-counter
-  ([]
-   (render-counter {} nil))
-  ([opts value]
-   (rtl/render (reagent/as-element [counter/counter opts value]))))
+(h/describe "counter component"
+  (h/test "default render of counter component"
+    (h/render [counter/counter {} nil])
+    (-> (h/expect (h/get-by-test-id :counter-component))
+        (h/is-truthy)))
 
-(js/global.test "default render of counter component"
-  (fn []
-    (render-counter)
-    (-> (js/expect (rtl/screen.getByTestId "counter-component"))
-        (.toBeTruthy))))
+  (h/test "renders counter with a string value"
+    (h/render [counter/counter {} "1"])
+    (-> (h/expect (h/get-by-text "1"))
+        (h/is-truthy)))
 
-(js/global.test "renders counter with a string value"
-  (fn []
-    (render-counter {} "1")
-    (-> (js/expect (rtl/screen.getByText "1"))
-        (.toBeTruthy))))
+  (h/test "renders counter with an integer value"
+    (h/render [counter/counter {} 1])
+    (-> (h/expect (h/get-by-text "1"))
+        (h/is-truthy)))
 
-(js/global.test "renders counter with an integer value"
-  (fn []
-    (render-counter {} 1)
-    (-> (js/expect (rtl/screen.getByText "1"))
-        (.toBeTruthy))))
+  (h/test "renders counter with max value 99+ by default"
+    (h/render [counter/counter {} 100])
+    (-> (h/expect (h/get-by-text "99+"))
+        (h/is-truthy)))
 
-(js/global.test "renders counter with value 99+ when the value is greater than 99"
-  (fn []
-    (render-counter {} "100")
-    (-> (js/expect (rtl/screen.getByText "99+"))
-        (.toBeTruthy))))
+  (h/test "renders counter with custom max value when set to 150"
+    (h/render [counter/counter {:max-value 150} 151])
+    (-> (h/expect (h/get-by-text "150+"))
+        (h/is-truthy))))

src/quo2/components/counter/counter.cljs

@@ -1,8 +1,10 @@
 (ns quo2.components.counter.counter
-  (:require [quo2.components.markdown.text :as text]
-            [quo2.foundations.colors :as colors]
-            [quo2.theme :as theme]
-            [react-native.core :as rn]))
+  (:require
+    [quo2.components.markdown.text :as text]
+    [quo2.foundations.colors :as colors]
+    [quo2.theme :as theme]
+    [react-native.core :as rn]
+    [utils.number :as utils-number]))
 
 (def themes
   {:light {:default   colors/primary-50
@@ -19,9 +21,9 @@
   (get-in themes [(theme/get-theme) key]))
 
 (defn counter
-  "type:    default, secondary, grey, outline
-   value:   integer"
-  [{:keys [type override-text-color override-bg-color style accessibility-label]} value]
+  [{:keys [type override-text-color override-bg-color style accessibility-label max-value]
+    :or   {max-value 99}}
+   value]
   (let [type       (or type :default)
         text-color (or override-text-color
                        (if (or
@@ -29,11 +31,9 @@
                             (= type :default))
                          colors/white
                          colors/neutral-100))
-        value      (if (integer? value)
-                     value
-                     (js/parseInt value))
-        label      (if (> value 99)
-                     "99+"
+        value      (utils-number/parse-int value)
+        label      (if (> value max-value)
+                     (str max-value "+")
                      (str value))
         width      (case (count label)
                      1 16
@@ -59,7 +59,7 @@
                                     (or override-bg-color
                                         (get-color type)))
 
-                             (> value 99)
+                             (> value max-value)
                              (assoc :padding-left 0.5))}
      [text/text
       {:weight :medium

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

@@ -4,22 +4,24 @@
 (def outer-container {:height 216})
 
 (def top-card
-  {:flex               1
-   :padding-vertical   12
-   :padding-horizontal 20
-   :border-radius      20
-   :background-color   colors/neutral-80})
+  {:flex                    1
+   :padding-vertical        12
+   :padding-horizontal      20
+   :border-top-left-radius  20
+   :border-top-right-radius 20
+   :background-color        colors/neutral-80})
 
 (def bottom-card
-  {:position           :absolute
-   :top                80
-   :left               0
-   :right              0
-   :bottom             0
-   :padding-vertical   12
-   :padding-horizontal 20
-   :border-radius      20
-   :background-color   (colors/alpha colors/white 0.05)})
+  {:position                :absolute
+   :top                     80
+   :left                    0
+   :right                   0
+   :bottom                  0
+   :padding-vertical        12
+   :padding-horizontal      20
+   :border-top-left-radius  20
+   :border-top-right-radius 20
+   :background-color        (colors/alpha colors/white 0.05)})
 
 (def bottom-container
   {:flex-direction  :row

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

@@ -39,13 +39,14 @@
     children))
 
 (defn card
-  [{:keys [on-press style heading gap top?]} children]
+  [{:keys [on-press style heading gap accessibility-label top?]} children]
   [rn/touchable-highlight
-   {:on-press       on-press
-    :border-radius  20
-    :style          style
-    :underlay-color (:background-color style)}
-   [rn/view {}
+   {:accessibility-label accessibility-label
+    :on-press            on-press
+    :border-radius       20
+    :style               style
+    :underlay-color      (:background-color style)}
+   [rn/view
     [text/text
      {:size   :heading-1
       :style  (style/heading-text gap)
@@ -60,9 +61,11 @@
    opts
    {:container-style  style-object
     :top-card         { :on-press event
-                        :heading  string}
+                        :heading  string
+                        :accessibility-label keyword}
     :bottom-card      { :on-press event
-                        :heading  string}}
+                        :heading  string
+                        :accessibility-label keyword}}
     child-1           string, keyword or hiccup
     child-2           string, keyword or hiccup
    "

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

@@ -1,4 +1,4 @@
-(ns quo2.components.input.style
+(ns quo2.components.inputs.input.style
   (:require [quo2.components.markdown.text :as text]
             [quo2.foundations.colors :as colors]))
 

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

@@ -1,7 +1,7 @@
-(ns quo2.components.input.view
+(ns quo2.components.inputs.input.view
   (:require [oops.core :as oops]
             [quo2.components.icon :as icon]
-            [quo2.components.input.style :as style]
+            [quo2.components.inputs.input.style :as style]
             [quo2.components.markdown.text :as text]
             [react-native.core :as rn]
             [reagent.core :as reagent]))

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

@@ -0,0 +1,29 @@
+(ns quo2.components.inputs.profile-input.component-spec
+  (:require [quo2.components.inputs.profile-input.view :as profile-input]
+            [test-helpers.component :as h]))
+
+(h/describe "Profile Input"
+  (h/test "renders user avatar with placeholder name if no value is specified"
+    (h/render [profile-input/profile-input
+               {:placeholder "Your Name"}])
+    (-> (js/expect (h/get-by-text "YN"))
+        (.toBeTruthy)))
+
+  (h/test "renders user avatar with full name if a value is specified"
+    (let [event (h/mock-fn)]
+      (h/render [profile-input/profile-input
+                 {:on-change          event
+                  :placeholder        "Your Name"
+                  :image-picker-props {:full-name "Test Name"}}])
+      (h/fire-event :change (h/get-by-text "TN"))
+      (-> (js/expect (h/get-by-text "TN"))
+          (.toBeTruthy))))
+
+  (h/test "on press event fires"
+    (let [event (h/mock-fn)]
+      (h/render [profile-input/profile-input
+                 {:placeholder "Your Name"
+                  :on-press    event}])
+      (h/fire-event :press (h/get-by-label-text :select-profile-picture-button))
+      (-> (js/expect event)
+          (.toHaveBeenCalledTimes 1)))))

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

@@ -0,0 +1,29 @@
+(ns quo2.components.inputs.profile-input.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(defn container
+  [customization-color]
+  {:background-color   (colors/custom-color customization-color 50 40)
+   :padding-horizontal 12
+   :padding-top        12
+   :padding-bottom     10
+   :border-radius      16
+   :height             102
+   :flex               1})
+
+(def button
+  {:position      :absolute
+   :top           23
+   :bottom        0
+   :left          33
+   :right         0
+   :width         24
+   :height        24
+   :border-radius 24})
+
+(def button-inner {:border-radius 24})
+
+(def input-container
+  {:flex-direction :row
+   :margin-top     4
+   :align-items    :center})

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

@@ -0,0 +1,51 @@
+(ns quo2.components.inputs.profile-input.view
+  (:require
+    [quo2.components.buttons.button :as buttons]
+    [quo2.components.avatars.user-avatar.view :as user-avatar]
+    [quo2.components.inputs.profile-input.style :as style]
+    [quo2.components.inputs.title-input.view :as title-input]
+    [quo2.foundations.colors :as colors]
+    [react-native.core :as rn]
+    [react-native.hole-view :as hole-view]))
+
+(defn profile-input
+  [{:keys [customization-color
+           placeholder
+           on-press
+           title-input-props
+           image-picker-props]}]
+  (let [full-name (:full-name image-picker-props)]
+    [rn/view
+     {:style (style/container customization-color)}
+     [rn/view
+      [hole-view/hole-view
+       {:holes [{:x            33
+                 :y            23
+                 :width        24
+                 :height       24
+                 :borderRadius 12}]}
+       [user-avatar/user-avatar
+        (merge image-picker-props
+               {:customization-color customization-color
+                :full-name           (if (seq full-name)
+                                       full-name
+                                       placeholder)
+                :status-indicator?   false
+                :size                :medium})]]
+      [buttons/button
+       {:accessibility-label       :select-profile-picture-button
+        :type                      :grey
+        :override-theme            :dark
+        :override-background-color (colors/alpha colors/white 0.05)
+        :on-press                  on-press
+        :icon-size                 20
+        :width                     24
+        :size                      24
+        :icon                      :i/camera
+        :style                     style/button
+        :inner-style               style/button-inner} :i/camera]]
+     [rn/view {:style style/input-container}
+      [title-input/title-input
+       (merge title-input-props
+              {:placeholder         placeholder
+               :customization-color customization-color})]]]))

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

@@ -0,0 +1,40 @@
+(ns quo2.components.inputs.title-input.component-spec
+  (:require [quo2.components.inputs.title-input.view :as title-input]
+            [test-helpers.component :as h]))
+
+(h/describe "profile: title-input"
+  (h/test "renders empty"
+    (h/render [title-input/title-input
+               {:value          ""
+                :on-change-text (h/mock-fn)}])
+    (-> (js/expect (h/get-by-label-text :profile-title-input))
+        (.toBeTruthy)))
+
+  (h/test "empty text renders with max length digits and 00"
+    (h/render [title-input/title-input
+               {:value          ""
+                :max-length     24
+                :on-change-text (h/mock-fn)}])
+    (-> (js/expect (h/get-by-text "00"))
+        (.toBeTruthy))
+    (-> (js/expect (h/get-by-text "/24"))
+        (.toBeTruthy)))
+
+  (h/test "renders with max length digits and character count"
+    (h/render [title-input/title-input
+               {:default-value  "abc"
+                :max-length     24
+                :on-change-text (h/mock-fn)} "abc"])
+    (-> (js/expect (h/get-by-text "03"))
+        (.toBeTruthy))
+    (-> (js/expect (h/get-by-text "/24"))
+        (.toBeTruthy)))
+
+  (h/test "text updates on change"
+    (let [on-change-text (h/mock-fn)]
+      (h/render [title-input/title-input
+                 {:value          "mock text"
+                  :on-change-text on-change-text}])
+      (h/fire-event :change-text (h/get-by-label-text :profile-title-input) "mock-text-new")
+      (-> (js/expect on-change-text)
+          (.toHaveBeenCalled)))))

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

@@ -0,0 +1,52 @@
+(ns quo2.components.inputs.title-input.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(defn get-focused-placeholder-color
+  [blur?]
+  (if blur?
+    (colors/theme-colors colors/neutral-80-opa-20 (colors/alpha colors/white 0.2))
+    (colors/theme-colors colors/neutral-30 colors/neutral-60)))
+
+(defn get-placeholder-color
+  [blur?]
+  (if blur?
+    (colors/theme-colors colors/neutral-80-opa-40 (colors/alpha colors/white 0.3))
+    (colors/theme-colors colors/neutral-40 colors/neutral-50)))
+
+(defn- get-disabled-color
+  [blur?]
+  (if blur?
+    (colors/theme-colors colors/neutral-80-opa-40 (colors/alpha colors/white 0.3))
+    (colors/theme-colors colors/neutral-40 colors/neutral-50)))
+
+(defn- get-char-count-color
+  [blur?]
+  (if blur?
+    (colors/theme-colors colors/neutral-80-opa-40 (colors/alpha colors/white 0.4))
+    (colors/theme-colors colors/neutral-40 colors/neutral-50)))
+
+(defn get-selection-color
+  [customization-color blur?]
+  (if blur?
+    (colors/theme-colors colors/neutral-100 colors/white)
+    (colors/custom-color customization-color (if colors/dark? 60 50))))
+
+(def text-input-container {:flex 1})
+
+(defn title-text
+  [disabled? blur?]
+  {:text-align-vertical :bottom
+   :color               (when disabled? (get-disabled-color blur?))})
+
+(defn char-count
+  [blur?]
+  {:color (get-char-count-color blur?)})
+
+(def container
+  {:flex-direction  :row
+   :flex            1
+   :justify-content :center
+   :align-items     :center})
+
+(def counter-container
+  {:padding-top 8})

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

@@ -0,0 +1,65 @@
+(ns quo2.components.inputs.title-input.view
+  (:require
+    [quo2.components.inputs.title-input.style :as style]
+    [quo2.components.markdown.text :as text]
+    [reagent.core :as reagent]
+    [react-native.core :as rn]))
+
+(defn- pad-0
+  [value]
+  (if (<= (count value) 1)
+    (str 0 value)
+    value))
+
+(defn title-input
+  [{:keys [blur?
+           on-change-text
+           placeholder
+           max-length
+           default-value]
+    :or   {max-length    0
+           default-value ""}}]
+  (let [focused?  (reagent/atom false)
+        value     (reagent/atom default-value)
+        on-change (fn [v]
+                    (reset! value v)
+                    (when on-change-text
+                      (on-change-text v)))]
+    (fn [{:keys [customization-color disabled?]}]
+      [rn/view
+       {:style style/container}
+       [rn/view {:style style/text-input-container}
+        [rn/text-input
+         {:style
+          (text/text-style
+           {:size   :heading-2
+            :weight :semi-bold
+            :style  (style/title-text disabled? blur?)})
+          :default-value default-value
+          :accessibility-label :profile-title-input
+          :on-focus #(swap! focused? (fn [] true))
+          :on-blur #(swap! focused? (fn [] false))
+          :input-mode :text
+          :on-change-text on-change
+          :editable (not disabled?)
+          :max-length max-length
+          :placeholder placeholder
+          :selection-color (style/get-selection-color customization-color blur?)
+          :placeholder-text-color (if @focused?
+                                    (style/get-focused-placeholder-color blur?)
+                                    (style/get-placeholder-color blur?))}]]
+       [rn/view
+        {:style style/counter-container}
+        [text/text
+         [text/text
+          {:style (style/char-count blur?)
+           :size  :paragraph-2}
+          (pad-0
+           (str
+            (count @value)))]
+         [text/text
+          {:style (style/char-count blur?)
+           :size  :paragraph-2}
+          (str "/"
+               (pad-0
+                (str max-length)))]]]])))

src/quo2/components/list_items/preview_list.cljs

@@ -1,5 +1,5 @@
 (ns quo2.components.list-items.preview-list
-  (:require [quo2.components.avatars.user-avatar :as user-avatar]
+  (:require [quo2.components.avatars.user-avatar.view :as user-avatar]
             [quo2.components.icon :as quo2.icons]
             [quo2.components.markdown.text :as quo2.text]
             [quo2.foundations.colors :as colors]

src/quo2/components/list_items/user_list.cljs

@@ -1,6 +1,6 @@
 (ns quo2.components.list-items.user-list
   (:require [react-native.core :as rn]
-            [quo2.components.avatars.user-avatar :as user-avatar]
+            [quo2.components.avatars.user-avatar.view :as user-avatar]
             [quo2.components.markdown.text :as text]
             [quo2.components.icon :as icons]
             [quo2.foundations.colors :as colors]

src/quo2/components/messages/system_message.cljs

@@ -1,6 +1,6 @@
 (ns quo2.components.messages.system-message
   (:require [quo2.components.avatars.icon-avatar :as icon-avatar]
-            [quo2.components.avatars.user-avatar :as user-avatar]
+            [quo2.components.avatars.user-avatar.view :as user-avatar]
             [quo2.components.markdown.text :as text]
             [quo2.foundations.colors :as colors]
             [quo2.theme :as theme]

src/quo2/components/navigation/page_nav.cljs

@@ -1,6 +1,6 @@
 (ns quo2.components.navigation.page-nav
   (:require [clojure.string :as string]
-            [quo2.components.avatars.user-avatar :as user-avatar]
+            [quo2.components.avatars.user-avatar.view :as user-avatar]
             [quo2.components.buttons.button :as button]
             [quo2.components.icon :as icons]
             [quo2.components.markdown.text :as text]
@@ -30,7 +30,7 @@
            {:no-color true})))
 
 (defn left-section-view
-  [{:keys [on-press icon accessibility-label type] :or {type :grey}}
+  [{:keys [on-press icon accessibility-label type icon-override-theme] :or {type :grey}}
    put-middle-section-on-left?]
   [rn/view {:style (when put-middle-section-on-left? {:margin-right 5})}
    [button/button
@@ -38,7 +38,8 @@
      :icon                true
      :type                type
      :size                32
-     :accessibility-label accessibility-label}
+     :accessibility-label accessibility-label
+     :override-theme      icon-override-theme}
     icon]])
 
 (defn- mid-section-comp
@@ -148,10 +149,20 @@
                   :flex-direction  :row
                   :justify-content :flex-end)}
    (let [last-icon-index (-> right-section-buttons count dec)]
-     (map-indexed (fn [index {:keys [icon on-press type style] :or {type :grey}}]
+     (map-indexed (fn [index
+                       {:keys [icon on-press type style icon-override-theme]
+                        :or   {type :grey}}]
                     ^{:key index}
-                    [rn/view {:style (merge {:margin-right (if (not= index last-icon-index) 8 0)} style)}
-                     [button/button {:on-press on-press :icon true :type type :size 32}
+                    [rn/view
+                     {:style (assoc style
+                                    :margin-right
+                                    (if (= index last-icon-index) 0 8))}
+                     [button/button
+                      {:on-press       on-press
+                       :icon           true
+                       :type           type
+                       :size           32
+                       :override-theme icon-override-theme}
                       icon]])
                   right-section-buttons))])
 
@@ -179,16 +190,14 @@
      :left-section 
      {:type                  button-type
       :on-press              event
-      :icon                  icon 
-      :icon-color            color
-      :icon-background-color color
+      :icon                  icon
+      :icon-override-theme   :light/:dark
      }
      :right-section-buttons vector of 
       {:type                  button-type
        :on-press              event
        :icon                  icon
-       :icon-color            color 
-       :icon-background-color color
+       :icon-override-theme   :light/:dark
       }
    }
   "

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

@@ -7,9 +7,9 @@
             [quo2.components.notifications.activity-log.style :as style]
             [quo2.components.tags.status-tags :as status-tags]
             [quo2.foundations.colors :as colors]
-            [utils.i18n :as i18n]
             [react-native.core :as rn]
-            [reagent.core :as reagent]))
+            [reagent.core :as reagent]
+            [utils.i18n :as i18n]))
 
 (defn- activity-reply-text-input
   [{:keys [on-update-reply max-reply-length valid-reply?]} reply-input]
@@ -37,7 +37,7 @@
                                 (when on-update-reply
                                   (on-update-reply %)))
       :auto-capitalize     :none
-      :auto-focus          true
+      :auto-focus          false
       :accessibility-label :identity-verification-reply-text-input
       :placeholder         (i18n/label :t/type-something)
       :return-key-type     :none
@@ -129,19 +129,20 @@
      (-> button
          (assoc :size size)
          (assoc :type subtype)
-         (assoc :disabled (and replying? (disable-when @reply-input)))
+         (assoc :disabled (and replying? disable-when (disable-when @reply-input)))
          (update :style merge common-style {:margin-right 8}))
      label]))
 
 (defmethod footer-item-view :status
-  [{:keys [label subtype]} _ _]
+  [{:keys [label subtype blur?]} _ _]
   [status-tags/status-tag
    {:size   :small
     :label  label
-    :status {:type subtype}}])
+    :status {:type subtype}
+    :blur?  blur?}])
 
 (defn- footer
-  [_ _]
+  [_]
   (let [reply-input (reagent/atom "")]
     (fn [{:keys [replying? items] :as props}]
       [:<>

src/quo2/components/onboarding/small_option_card/style.cljs

@@ -1,6 +1,9 @@
 (ns quo2.components.onboarding.small-option-card.style
   (:require [quo2.foundations.colors :as colors]))
 
+(def main-variant-height 335)
+(def icon-variant-height 56)
+
 (def text-container {:flex 1})
 
 (def title
@@ -41,12 +44,10 @@
 
 (def touchable-overlay {:border-radius 16})
 
-(defn card-container
-  [main-variant?]
-  (when main-variant? {:height 343}))
-
 (defn card
-  [main-variant?]
+  [height]
   {:background-color colors/white-opa-5
    :border-radius    16
-   :height           (if main-variant? 335 56)})
+   :height           height})
+
+(def main-variant-extra-space {:height 8})

src/quo2/components/onboarding/small_option_card/view.cljs

@@ -35,7 +35,7 @@
      :subtitle subtitle}]])
 
 (defn- main-variant
-  [{:keys [title subtitle image]}]
+  [{:keys [title subtitle image max-height]}]
   [rn/view {:style style/main-variant}
    [rn/view {:style style/main-variant-text-container}
     [texts
@@ -43,24 +43,32 @@
       :subtitle subtitle}]]
    [fast-image/fast-image
     {:accessibility-label :small-option-card-main-image
-     :style               {:flex 1}
+     :style               {:flex 1 :max-height max-height}
      :resize-mode         :contain
      :source              image}]])
 
 (defn small-option-card
-  [{:keys [variant title subtitle image on-press]
+  "Variants: `:main` or `:icon`"
+  [{:keys [variant title subtitle image max-height on-press]
     :or   {variant :main}}]
   (let [main-variant?  (= variant :main)
-        card-component (if main-variant? main-variant icon-variant)]
-    [rn/touchable-highlight
-     {:accessibility-label :small-option-card
-      :style               style/touchable-overlay
-      :active-opacity      1
-      :underlay-color      colors/white-opa-5
-      :on-press            on-press}
-     [rn/view {:style (style/card-container main-variant?)}
-      [rn/view {:style (style/card main-variant?)}
+        card-component (if main-variant? main-variant icon-variant)
+        card-height    (cond
+                         (not main-variant?) style/icon-variant-height
+                         max-height          (min max-height style/main-variant-height)
+                         :else               style/main-variant-height)]
+    [rn/view
+     [rn/touchable-highlight
+      {:accessibility-label :small-option-card
+       :style               style/touchable-overlay
+       :active-opacity      1
+       :underlay-color      colors/white-opa-5
+       :on-press            on-press}
+      [rn/view {:style (style/card card-height)}
        [card-component
-        {:title    title
-         :subtitle subtitle
-         :image    image}]]]]))
+        {:title      title
+         :subtitle   subtitle
+         :image      image
+         :max-height max-height}]]]
+     (when main-variant?
+       [rn/view {:style style/main-variant-extra-space}])]))

src/quo2/components/profile/profile_card/view.cljs

@@ -6,7 +6,7 @@
             [quo2.foundations.colors :as colors]
             [quo2.components.markdown.text :as text]
             [quo2.components.buttons.button :as button]
-            [quo2.components.avatars.user-avatar :as user-avatar]
+            [quo2.components.avatars.user-avatar.view :as user-avatar]
             [quo2.components.profile.profile-card.style :as style]))
 
 (defn profile-card

src/quo2/components/profile/select_profile/view.cljs

@@ -3,7 +3,7 @@
     [quo2.components.profile.select-profile.style :as style]
     [react-native.core :as rn]
     [quo2.components.markdown.text :as text]
-    [quo2.components.avatars.user-avatar :as user-avatar]
+    [quo2.components.avatars.user-avatar.view :as user-avatar]
     [reagent.core :as reagent]))
 
 (defn- on-change-handler

src/quo2/components/record_audio/record_audio/__tests__/record_audio_component_spec.cljs

@@ -27,7 +27,8 @@
        :on-start-should-set-responder
        (h/get-by-test-id "record-audio")
        {:nativeEvent {:locationX 70
-                      :locationY 70}})
+                      :locationY 70
+                      :timestamp 0}})
       (-> (h/expect event)
           (.toHaveBeenCalledTimes 1))))
 
@@ -36,19 +37,23 @@
       (h/render [record-audio/record-audio
                  {:on-reviewing-audio              event
                   :record-audio-permission-granted true}])
-      (with-redefs [audio/start-recording (fn [_ on-start _]
-                                            (on-start))]
+      (with-redefs [audio/start-recording        (fn [_ on-start _]
+                                                   (on-start))
+                    audio/get-recorder-file-path (fn [] "file-path")]
         (h/fire-event
          :on-start-should-set-responder
          (h/get-by-test-id "record-audio")
          {:nativeEvent {:locationX 70
-                        :locationY 70}})
+                        :locationY 70
+                        :timestamp 0}})
         (h/advance-timers-by-time 500)
         (h/fire-event
          :on-responder-release
          (h/get-by-test-id "record-audio")
          {:nativeEvent {:locationX 70
-                        :locationY 70}})
+                        :locationY 70
+                        :timestamp 200}})
+        (h/advance-timers-by-time 250)
         (-> (h/expect event)
             (.toHaveBeenCalledTimes 1)))))
 
@@ -59,27 +64,40 @@
                   :record-audio-permission-granted true}])
       (with-redefs [audio/start-recording        (fn [_ on-start _]
                                                    (on-start))
-                    audio/get-recorder-file-path (fn [] "audio-file-path")]
+                    audio/get-recorder-file-path (fn [] "audio-file-path")
+                    audio/get-player-duration    (fn [] 5000)]
         (h/fire-event
          :on-start-should-set-responder
          (h/get-by-test-id "record-audio")
          {:nativeEvent {:locationX 70
-                        :locationY 70}})
+                        :locationY 70
+                        :timestamp 0}})
         (h/advance-timers-by-time 500)
         (h/fire-event
          :on-responder-release
          (h/get-by-test-id "record-audio")
          {:nativeEvent {:locationX 70
-                        :locationY 70}})
+                        :locationY 70
+                        :timestamp 200}})
+        (h/fire-event
+         :on-start-should-set-responder
+         (h/get-by-test-id "record-audio")
+         {:nativeEvent {:locationX 70
+                        :locationY 70
+                        :timestamp 0}})
+        (h/advance-timers-by-time 500)
         (h/fire-event
          :on-responder-release
          (h/get-by-test-id "record-audio")
          {:nativeEvent {:locationX 80
-                        :locationY 80}})
+                        :locationY 80
+                        :timestamp 200}})
+        (h/advance-timers-by-time 250)
         (-> (js/expect event)
             (.toHaveBeenCalledTimes 1))
         (-> (js/expect event)
-            (.toHaveBeenCalledWith "audio-file-path")))))
+            (.toHaveBeenCalledWith {:file-path "audio-file-path"
+                                    :duration  5000})))))
 
   (h/test "record-audio on-send works after sliding to the send button"
     (let [event (js/jest.fn)]
@@ -95,7 +113,8 @@
          :on-start-should-set-responder
          (h/get-by-test-id "record-audio")
          {:nativeEvent {:locationX 70
-                        :locationY 70}})
+                        :locationY 70
+                        :timestamp 0}})
         (h/advance-timers-by-time 500)
         (h/fire-event
          :on-responder-move
@@ -108,11 +127,14 @@
          :on-responder-release
          (h/get-by-test-id "record-audio")
          {:nativeEvent {:locationX 40
-                        :locationY 80}})
+                        :locationY 80
+                        :timestamp 200}})
+        (h/advance-timers-by-time 250)
         (-> (js/expect event)
             (.toHaveBeenCalledTimes 1))
         (-> (js/expect event)
-            (.toHaveBeenCalledWith "audio-file-path")))))
+            (.toHaveBeenCalledWith {:file-path "audio-file-path"
+                                    :duration  500})))))
 
   (h/test "record-audio on-cancel works after reviewing audio"
     (let [event (js/jest.fn)]
@@ -125,18 +147,22 @@
          :on-start-should-set-responder
          (h/get-by-test-id "record-audio")
          {:nativeEvent {:locationX 70
-                        :locationY 70}})
+                        :locationY 70
+                        :timestamp 0}})
         (h/advance-timers-by-time 500)
         (h/fire-event
          :on-responder-release
          (h/get-by-test-id "record-audio")
          {:nativeEvent {:locationX 70
-                        :locationY 70}})
+                        :locationY 70
+                        :timestamp 200}})
         (h/fire-event
          :on-responder-release
          (h/get-by-test-id "record-audio")
          {:nativeEvent {:locationX 40
-                        :locationY 80}})
+                        :locationY 80
+                        :timestamp 200}})
+        (h/advance-timers-by-time 250)
         (-> (js/expect event)
             (.toHaveBeenCalledTimes 1)))))
 
@@ -153,7 +179,8 @@
          :on-start-should-set-responder
          (h/get-by-test-id "record-audio")
          {:nativeEvent {:locationX 70
-                        :locationY 70}})
+                        :locationY 70
+                        :timestamp 0}})
         (h/advance-timers-by-time 500)
         (h/fire-event
          :on-responder-move
@@ -166,6 +193,8 @@
          :on-responder-release
          (h/get-by-test-id "record-audio")
          {:nativeEvent {:locationX -10
-                        :locationY 70}})
+                        :locationY 70
+                        :timestamp 200}})
+        (h/advance-timers-by-time 250)
         (-> (js/expect event)
             (.toHaveBeenCalledTimes 1))))))

src/quo2/components/record_audio/record_audio/buttons/delete_button.cljs

@@ -4,58 +4,60 @@
             [quo2.foundations.colors :as colors]
             [react-native.reanimated :as reanimated]
             [react-native.core :refer [use-effect]]
-            [quo2.components.record-audio.record-audio.helpers :refer
-             [animate-linear-with-delay
-              animate-easing-with-delay
-              animate-linear
-              set-value]]))
+            [quo2.components.record-audio.record-audio.helpers :as helpers]))
 
 (defn delete-button
-  [recording? ready-to-delete? reviewing-audio?]
+  [recording? ready-to-delete? reviewing-audio? force-show-controls?]
   [:f>
    (fn []
-     (let [opacity                   (reanimated/use-shared-value 0)
-           translate-x               (reanimated/use-shared-value 20)
-           scale                     (reanimated/use-shared-value 1)
+     (let [opacity                   (reanimated/use-shared-value (if force-show-controls? 1 0))
+           translate-x               (reanimated/use-shared-value (if force-show-controls? 35 20))
+           scale                     (reanimated/use-shared-value (if force-show-controls? 0.75 1))
            connector-opacity         (reanimated/use-shared-value 0)
            connector-width           (reanimated/use-shared-value 24)
            connector-height          (reanimated/use-shared-value 12)
            border-radius-first-half  (reanimated/use-shared-value 8)
            border-radius-second-half (reanimated/use-shared-value 8)
            start-x-animation         (fn []
-                                       (animate-linear-with-delay translate-x 12 50 133.33)
-                                       (animate-easing-with-delay connector-opacity 1 0 93.33)
-                                       (animate-easing-with-delay connector-width 56 83.33 80)
-                                       (animate-easing-with-delay connector-height 56 83.33 80)
-                                       (animate-easing-with-delay border-radius-first-half 28 83.33 80)
-                                       (animate-easing-with-delay border-radius-second-half 28 83.33 80))
+                                       (helpers/animate-linear-with-delay translate-x 12 50 133.33)
+                                       (helpers/animate-easing-with-delay connector-opacity 1 0 93.33)
+                                       (helpers/animate-easing-with-delay connector-width 56 83.33 80)
+                                       (helpers/animate-easing-with-delay connector-height 56 83.33 80)
+                                       (helpers/animate-easing-with-delay border-radius-first-half
+                                                                          28
+                                                                          83.33
+                                                                          80)
+                                       (helpers/animate-easing-with-delay border-radius-second-half
+                                                                          28
+                                                                          83.33
+                                                                          80))
            reset-x-animation         (fn []
-                                       (animate-linear translate-x 0 100)
-                                       (set-value connector-opacity 0)
-                                       (set-value connector-width 24)
-                                       (set-value connector-height 12)
-                                       (set-value border-radius-first-half 8)
-                                       (set-value border-radius-second-half 16))
+                                       (helpers/animate-linear translate-x 0 100)
+                                       (helpers/set-value connector-opacity 0)
+                                       (helpers/set-value connector-width 24)
+                                       (helpers/set-value connector-height 12)
+                                       (helpers/set-value border-radius-first-half 8)
+                                       (helpers/set-value border-radius-second-half 16))
            fade-in-animation         (fn []
-                                       (animate-linear translate-x 0 200)
-                                       (animate-linear opacity 1 200))
+                                       (helpers/animate-linear translate-x 0 200)
+                                       (helpers/animate-linear opacity 1 200))
            fade-out-animation        (fn []
-                                       (animate-linear
+                                       (helpers/animate-linear
                                         translate-x
                                         (if @reviewing-audio? 35 20)
                                         200)
                                        (if @reviewing-audio?
-                                         (animate-linear scale 0.75 200)
-                                         (animate-linear opacity 0 200))
-                                       (set-value connector-opacity 0)
-                                       (set-value connector-width 24)
-                                       (set-value connector-height 12)
-                                       (set-value border-radius-first-half 8)
-                                       (set-value border-radius-second-half 16))
+                                         (helpers/animate-linear scale 0.75 200)
+                                         (helpers/animate-linear opacity 0 200))
+                                       (helpers/set-value connector-opacity 0)
+                                       (helpers/set-value connector-width 24)
+                                       (helpers/set-value connector-height 12)
+                                       (helpers/set-value border-radius-first-half 8)
+                                       (helpers/set-value border-radius-second-half 16))
            fade-out-reset-animation  (fn []
-                                       (animate-linear opacity 0 200)
-                                       (animate-linear-with-delay translate-x 20 0 200)
-                                       (animate-linear-with-delay scale 1 0 200))]
+                                       (helpers/animate-linear opacity 0 200)
+                                       (helpers/animate-linear-with-delay translate-x 20 0 200)
+                                       (helpers/animate-linear-with-delay scale 1 0 200))]
        (use-effect (fn []
                      (if @recording?
                        (fade-in-animation)

src/quo2/components/record_audio/record_audio/buttons/lock_button.cljs

@@ -4,11 +4,7 @@
             [quo2.foundations.colors :as colors]
             [react-native.reanimated :as reanimated]
             [react-native.core :refer [use-effect]]
-            [quo2.components.record-audio.record-audio.helpers :refer
-             [animate-linear-with-delay
-              animate-easing-with-delay
-              animate-linear
-              set-value]]))
+            [quo2.components.record-audio.record-audio.helpers :as helpers]))
 
 (defn lock-button
   [recording? ready-to-lock? locked?]
@@ -22,36 +18,36 @@
            border-radius-first-half  (reanimated/use-shared-value 8)
            border-radius-second-half (reanimated/use-shared-value 8)
            start-x-y-animation       (fn []
-                                       (animate-linear-with-delay translate-x-y 8 50 116.66)
-                                       (animate-easing-with-delay connector-opacity 1 0 80)
-                                       (animate-easing-with-delay width 56 83.33 63.33)
-                                       (animate-easing-with-delay height 56 83.33 63.33)
-                                       (animate-easing-with-delay border-radius-first-half
-                                                                  28
-                                                                  83.33
-                                                                  63.33)
-                                       (animate-easing-with-delay border-radius-second-half
-                                                                  28
-                                                                  83.33
-                                                                  63.33))
+                                       (helpers/animate-linear-with-delay translate-x-y 8 50 116.66)
+                                       (helpers/animate-easing-with-delay connector-opacity 1 0 80)
+                                       (helpers/animate-easing-with-delay width 56 83.33 63.33)
+                                       (helpers/animate-easing-with-delay height 56 83.33 63.33)
+                                       (helpers/animate-easing-with-delay border-radius-first-half
+                                                                          28
+                                                                          83.33
+                                                                          63.33)
+                                       (helpers/animate-easing-with-delay border-radius-second-half
+                                                                          28
+                                                                          83.33
+                                                                          63.33))
            reset-x-y-animation       (fn []
-                                       (animate-linear translate-x-y 0 100)
-                                       (set-value connector-opacity 0)
-                                       (set-value width 24)
-                                       (set-value height 12)
-                                       (set-value border-radius-first-half 8)
-                                       (set-value border-radius-second-half 16))
+                                       (helpers/animate-linear translate-x-y 0 100)
+                                       (helpers/set-value connector-opacity 0)
+                                       (helpers/set-value width 24)
+                                       (helpers/set-value height 12)
+                                       (helpers/set-value border-radius-first-half 8)
+                                       (helpers/set-value border-radius-second-half 16))
            fade-in-animation         (fn []
-                                       (animate-linear translate-x-y 0 220)
-                                       (animate-linear opacity 1 220))
+                                       (helpers/animate-linear translate-x-y 0 220)
+                                       (helpers/animate-linear opacity 1 220))
            fade-out-animation        (fn []
-                                       (animate-linear translate-x-y 20 200)
-                                       (animate-linear opacity 0 200)
-                                       (set-value connector-opacity 0)
-                                       (set-value width 24)
-                                       (set-value height 12)
-                                       (set-value border-radius-first-half 8)
-                                       (set-value border-radius-second-half 16))]
+                                       (helpers/animate-linear translate-x-y 20 200)
+                                       (helpers/animate-linear opacity 0 200)
+                                       (helpers/set-value connector-opacity 0)
+                                       (helpers/set-value width 24)
+                                       (helpers/set-value height 12)
+                                       (helpers/set-value border-radius-first-half 8)
+                                       (helpers/set-value border-radius-second-half 16))]
        (use-effect (fn []
                      (if @recording?
                        (fade-in-animation)

src/quo2/components/record_audio/record_audio/buttons/record_button.cljs

@@ -5,15 +5,15 @@
             [react-native.core :as rn :refer [use-effect]]
             [react-native.reanimated :as reanimated]
             [quo2.components.buttons.button :as button]
-            [quo2.components.record-audio.record-audio.helpers :refer [set-value]]))
+            [quo2.components.record-audio.record-audio.helpers :as helpers]))
 
 (defn record-button
   [recording? reviewing-audio?]
   [:f>
    (fn []
      (let [opacity        (reanimated/use-shared-value 1)
-           show-animation #(set-value opacity 1)
-           hide-animation #(set-value opacity 0)]
+           show-animation #(helpers/set-value opacity 1)
+           hide-animation #(helpers/set-value opacity 0)]
        (use-effect (fn []
                      (if (or @recording? @reviewing-audio?)
                        (hide-animation)
@@ -25,4 +25,4 @@
           :size                32
           :width               32
           :accessibility-label :mic-button}
-         [icons/icon :i/audio {:color (colors/theme-colors colors/neutral-100 colors/white)}]]]))])
+         [icons/icon :i/audio {:color (colors/theme-colors colors/neutral-50 colors/neutral-40)}]]]))])

src/quo2/components/record_audio/record_audio/buttons/record_button_big.cljs

@@ -8,12 +8,8 @@
             [taoensso.timbre :as log]
             [cljs-bean.core :as bean]
             [reagent.core :as reagent]
-            [quo2.components.record-audio.record-audio.helpers :refer
-             [animate-linear
-              animate-linear-with-delay
-              animate-linear-with-delay-loop
-              animate-easing
-              set-value]]))
+            [quo2.components.record-audio.record-audio.helpers :as helpers]
+            [utils.worklets.record-audio :as worklets.record-audio]))
 
 (def ^:private scale-to-each 1.8)
 (def ^:private scale-to-total 2.6)
@@ -23,14 +19,6 @@
 (def ^:private signal-anim-duration 3900)
 (def ^:private signal-anim-duration-2 1950)
 
-(def ^:private record-audio-worklets (js/require "../src/js/record_audio_worklets.js"))
-
-(defn- ring-scale
-  [scale substract]
-  (.ringScale ^js record-audio-worklets
-              scale
-              substract))
-
 (def ^:private animated-ring
   (reagent/adapt-react-class
    (rn/memo
@@ -45,129 +33,133 @@
    clear-timeout touch-active? recorder-ref reload-recorder-fn idle? on-send on-cancel]
   [:f>
    (fn []
-     (let [scale                (reanimated/use-shared-value 1)
-           opacity              (reanimated/use-shared-value 0)
-           opacity-from         (if @ready-to-lock? opacity-from-lock opacity-from-default)
-           animations           (map
-                                 (fn [index]
-                                   (let [ring-scale (ring-scale scale (* scale-padding index))]
-                                     {:scale   ring-scale
-                                      :opacity (reanimated/interpolate ring-scale
-                                                                       [1 scale-to-each]
-                                                                       [opacity-from 0])}))
-                                 (range 0 5))
-           rings-color          (cond
-                                  @ready-to-lock?   (colors/theme-colors colors/neutral-80-opa-5-opaque
-                                                                         colors/neutral-80)
-                                  @ready-to-delete? colors/danger-50
-                                  :else             colors/primary-50)
-           translate-y          (reanimated/use-shared-value 0)
-           translate-x          (reanimated/use-shared-value 0)
-           button-color         colors/primary-50
-           icon-color           (if (and (not (colors/dark?)) @ready-to-lock?) colors/black colors/white)
-           icon-opacity         (reanimated/use-shared-value 1)
-           red-overlay-opacity  (reanimated/use-shared-value 0)
+     (let [scale (reanimated/use-shared-value 1)
+           opacity (reanimated/use-shared-value 0)
+           opacity-from (if @ready-to-lock? opacity-from-lock opacity-from-default)
+           animations (map
+                       (fn [index]
+                         (let [ring-scale (worklets.record-audio/ring-scale scale
+                                                                            (* scale-padding
+                                                                               index))]
+                           {:scale   ring-scale
+                            :opacity (reanimated/interpolate ring-scale
+                                                             [1 scale-to-each]
+                                                             [opacity-from 0])}))
+                       (range 0 5))
+           rings-color (cond
+                         @ready-to-lock?   (colors/theme-colors colors/neutral-80-opa-5-opaque
+                                                                colors/neutral-80)
+                         @ready-to-delete? colors/danger-50
+                         :else             colors/primary-50)
+           translate-y (reanimated/use-shared-value 0)
+           translate-x (reanimated/use-shared-value 0)
+           button-color colors/primary-50
+           icon-color (if (and (not (colors/dark?)) @ready-to-lock?) colors/black colors/white)
+           icon-opacity (reanimated/use-shared-value 1)
+           red-overlay-opacity (reanimated/use-shared-value 0)
            gray-overlay-opacity (reanimated/use-shared-value 0)
-           complete-animation   (fn []
-                                  (cond
-                                    (and @ready-to-lock? (not @record-button-is-animating?))
-                                    (do
-                                      (reset! locked? true)
-                                      (reset! ready-to-lock? false))
-                                    (and (not @locked?) (not @reviewing-audio?))
-                                    (audio/stop-recording
-                                     @recorder-ref
-                                     (fn []
-                                       (cond
-                                         @ready-to-send?
-                                         (when on-send
-                                           (on-send (audio/get-recorder-file-path @recorder-ref)))
-                                         @ready-to-delete?
-                                         (when on-cancel
-                                           (on-cancel)))
-                                       (reload-recorder-fn)
-                                       (reset! recording? false)
-                                       (reset! ready-to-send? false)
-                                       (reset! ready-to-delete? false)
-                                       (reset! ready-to-lock? false)
-                                       (reset! idle? true)
-                                       (js/setTimeout #(reset! idle? false) 1000)
-                                       (js/clearInterval @recording-timer)
-                                       (reset! recording-length-ms 0)
-                                       (log/debug "[record-audio] stop recording - success"))
-                                     #(log/error "[record-audio] stop recording - error: " %))))
-           start-animation      (fn []
-                                  (set-value opacity 1)
-                                  (animate-linear scale 2.6 signal-anim-duration)
-                                  ;; TODO: Research if we can implement this with withSequence method
-                                  ;; from Reanimated 2
-                                  ;; GitHub issue [#14561]:
-                                  ;; https://github.com/status-im/status-mobile/issues/14561
-                                  (reset! clear-timeout
-                                    (js/setTimeout
-                                     (fn []
-                                       (set-value scale scale-to-each)
-                                       (animate-linear-with-delay-loop scale
-                                                                       scale-to-total
-                                                                       signal-anim-duration-2
-                                                                       0))
-                                     signal-anim-duration)))
-           stop-animation       (fn []
-                                  (set-value opacity 0)
-                                  (reanimated/cancel-animation scale)
-                                  (set-value scale 1)
-                                  (when @clear-timeout (js/clearTimeout @clear-timeout)))
-           start-y-animation    (fn []
-                                  (reset! record-button-at-initial-position? false)
-                                  (reset! record-button-is-animating? true)
-                                  (animate-easing translate-y -64 250)
-                                  (animate-linear-with-delay icon-opacity 0 33.33 76.66)
-                                  (js/setTimeout (fn []
-                                                   (reset! record-button-is-animating? false)
-                                                   (when-not @touch-active? (complete-animation)))
-                                                 250))
-           reset-y-animation    (fn []
-                                  (animate-easing translate-y 0 300)
-                                  (animate-linear icon-opacity 1 500)
-                                  (js/setTimeout (fn []
-                                                   (reset! record-button-at-initial-position? true))
-                                                 500))
-           start-x-animation    (fn []
-                                  (reset! record-button-at-initial-position? false)
-                                  (reset! record-button-is-animating? true)
-                                  (animate-easing translate-x -64 250)
-                                  (animate-linear-with-delay icon-opacity 0 33.33 76.66)
-                                  (animate-linear red-overlay-opacity 1 33.33)
-                                  (js/setTimeout (fn []
-                                                   (reset! record-button-is-animating? false)
-                                                   (when-not @touch-active? (complete-animation)))
-                                                 250))
-           reset-x-animation    (fn []
-                                  (animate-easing translate-x 0 300)
-                                  (animate-linear icon-opacity 1 500)
-                                  (animate-linear red-overlay-opacity 0 100)
-                                  (js/setTimeout (fn []
-                                                   (reset! record-button-at-initial-position? true))
-                                                 500))
-           start-x-y-animation  (fn []
-                                  (reset! record-button-at-initial-position? false)
-                                  (reset! record-button-is-animating? true)
-                                  (animate-easing translate-y -44 200)
-                                  (animate-easing translate-x -44 200)
-                                  (animate-linear-with-delay icon-opacity 0 33.33 33.33)
-                                  (animate-linear gray-overlay-opacity 1 33.33)
-                                  (js/setTimeout (fn []
-                                                   (reset! record-button-is-animating? false)
-                                                   (when-not @touch-active? (complete-animation)))
-                                                 200))
-           reset-x-y-animation  (fn []
-                                  (animate-easing translate-y 0 300)
-                                  (animate-easing translate-x 0 300)
-                                  (animate-linear icon-opacity 1 500)
-                                  (animate-linear gray-overlay-opacity 0 800)
-                                  (js/setTimeout (fn []
-                                                   (reset! record-button-at-initial-position? true))
-                                                 800))]
+           complete-animation
+           (fn []
+             (cond
+               (and @ready-to-lock? (not @record-button-is-animating?))
+               (do
+                 (reset! locked? true)
+                 (reset! ready-to-lock? false))
+               (and (not @locked?) (not @reviewing-audio?))
+               (audio/stop-recording
+                @recorder-ref
+                (fn []
+                  (cond
+                    @ready-to-send?
+                    (when on-send
+                      (on-send {:file-path (audio/get-recorder-file-path @recorder-ref)
+                                :duration  @recording-length-ms}))
+                    @ready-to-delete?
+                    (when on-cancel
+                      (on-cancel)))
+                  (reload-recorder-fn)
+                  (reset! recording? false)
+                  (reset! ready-to-send? false)
+                  (reset! ready-to-delete? false)
+                  (reset! ready-to-lock? false)
+                  (reset! idle? true)
+                  (js/setTimeout #(reset! idle? false) 1000)
+                  (js/clearInterval @recording-timer)
+                  (reset! recording-length-ms 0)
+                  (log/debug "[record-audio] stop recording - success"))
+                #(log/error "[record-audio] stop recording - error: " %))))
+           start-animation (fn []
+                             (helpers/set-value opacity 1)
+                             (helpers/animate-linear scale 2.6 signal-anim-duration)
+                             ;; TODO: Research if we can implement this with withSequence method
+                             ;; from Reanimated 2
+                             ;; GitHub issue [#14561]:
+                             ;; https://github.com/status-im/status-mobile/issues/14561
+                             (reset! clear-timeout
+                               (js/setTimeout
+                                (fn []
+                                  (helpers/set-value scale scale-to-each)
+                                  (helpers/animate-linear-with-delay-loop scale
+                                                                          scale-to-total
+                                                                          signal-anim-duration-2
+                                                                          0))
+                                signal-anim-duration)))
+           stop-animation (fn []
+                            (helpers/set-value opacity 0)
+                            (reanimated/cancel-animation scale)
+                            (helpers/set-value scale 1)
+                            (when @clear-timeout (js/clearTimeout @clear-timeout)))
+           start-y-animation (fn []
+                               (reset! record-button-at-initial-position? false)
+                               (reset! record-button-is-animating? true)
+                               (helpers/animate-easing translate-y -64 250)
+                               (helpers/animate-linear-with-delay icon-opacity 0 33.33 76.66)
+                               (js/setTimeout (fn []
+                                                (reset! record-button-is-animating? false)
+                                                (when-not @touch-active? (complete-animation)))
+                                              250))
+           reset-y-animation (fn []
+                               (helpers/animate-easing translate-y 0 300)
+                               (helpers/animate-linear icon-opacity 1 500)
+                               (js/setTimeout (fn []
+                                                (reset! record-button-at-initial-position? true))
+                                              500))
+           start-x-animation (fn []
+                               (reset! record-button-at-initial-position? false)
+                               (reset! record-button-is-animating? true)
+                               (helpers/animate-easing translate-x -64 250)
+                               (helpers/animate-linear-with-delay icon-opacity 0 33.33 76.66)
+                               (helpers/animate-linear red-overlay-opacity 1 33.33)
+                               (js/setTimeout (fn []
+                                                (reset! record-button-is-animating? false)
+                                                (when-not @touch-active? (complete-animation)))
+                                              250))
+           reset-x-animation (fn []
+                               (helpers/animate-easing translate-x 0 300)
+                               (helpers/animate-linear icon-opacity 1 500)
+                               (helpers/animate-linear red-overlay-opacity 0 100)
+                               (js/setTimeout (fn []
+                                                (reset! record-button-at-initial-position? true))
+                                              500))
+           start-x-y-animation (fn []
+                                 (reset! record-button-at-initial-position? false)
+                                 (reset! record-button-is-animating? true)
+                                 (helpers/animate-easing translate-y -44 200)
+                                 (helpers/animate-easing translate-x -44 200)
+                                 (helpers/animate-linear-with-delay icon-opacity 0 33.33 33.33)
+                                 (helpers/animate-linear gray-overlay-opacity 1 33.33)
+                                 (js/setTimeout (fn []
+                                                  (reset! record-button-is-animating? false)
+                                                  (when-not @touch-active? (complete-animation)))
+                                                200))
+           reset-x-y-animation (fn []
+                                 (helpers/animate-easing translate-y 0 300)
+                                 (helpers/animate-easing translate-x 0 300)
+                                 (helpers/animate-linear icon-opacity 1 500)
+                                 (helpers/animate-linear gray-overlay-opacity 0 800)
+                                 (js/setTimeout (fn []
+                                                  (reset! record-button-at-initial-position? true))
+                                                800))]
        (use-effect (fn []
                      (cond
                        @recording?

src/quo2/components/record_audio/record_audio/buttons/send_button.cljs

@@ -4,60 +4,63 @@
             [quo2.foundations.colors :as colors]
             [react-native.reanimated :as reanimated]
             [react-native.core :refer [use-effect]]
-            [quo2.components.record-audio.record-audio.helpers :refer
-             [animate-linear
-              animate-linear-with-delay
-              animate-easing-with-delay
-              set-value]]))
+            [quo2.components.record-audio.record-audio.helpers :as helpers]))
 
 (defn send-button
-  [recording? ready-to-send? reviewing-audio?]
+  [recording? ready-to-send? reviewing-audio? force-show-controls?]
   [:f>
    (fn []
-     (let [opacity                   (reanimated/use-shared-value 0)
-           translate-y               (reanimated/use-shared-value 20)
+     (let [opacity                   (reanimated/use-shared-value (if force-show-controls? 1 0))
+           translate-y               (reanimated/use-shared-value (if force-show-controls? 76 20))
            connector-opacity         (reanimated/use-shared-value 0)
            width                     (reanimated/use-shared-value 12)
            height                    (reanimated/use-shared-value 24)
            border-radius-first-half  (reanimated/use-shared-value 16)
            border-radius-second-half (reanimated/use-shared-value 8)
            start-y-animation         (fn []
-                                       (animate-linear-with-delay translate-y 12 50 133.33)
-                                       (animate-easing-with-delay connector-opacity 1 0 93.33)
-                                       (animate-easing-with-delay width 56 83.33 80)
-                                       (animate-easing-with-delay height 56 83.33 80)
-                                       (animate-easing-with-delay border-radius-first-half 28 83.33 80)
-                                       (animate-easing-with-delay border-radius-second-half 28 83.33 80))
+                                       (helpers/animate-linear-with-delay translate-y 12 50 133.33)
+                                       (helpers/animate-easing-with-delay connector-opacity 1 0 93.33)
+                                       (helpers/animate-easing-with-delay width 56 83.33 80)
+                                       (helpers/animate-easing-with-delay height 56 83.33 80)
+                                       (helpers/animate-easing-with-delay border-radius-first-half
+                                                                          28
+                                                                          83.33
+                                                                          80)
+                                       (helpers/animate-easing-with-delay border-radius-second-half
+                                                                          28
+                                                                          83.33
+                                                                          80))
            reset-y-animation         (fn []
-                                       (animate-linear translate-y 0 100)
-                                       (set-value connector-opacity 0)
-                                       (set-value width 12)
-                                       (set-value height 24)
-                                       (set-value border-radius-first-half 16)
-                                       (set-value border-radius-second-half 8))
+                                       (helpers/animate-linear translate-y 0 100)
+                                       (helpers/set-value connector-opacity 0)
+                                       (helpers/set-value width 12)
+                                       (helpers/set-value height 24)
+                                       (helpers/set-value border-radius-first-half 16)
+                                       (helpers/set-value border-radius-second-half 8))
            fade-in-animation         (fn []
-                                       (animate-linear translate-y 0 200)
-                                       (animate-linear opacity 1 200))
+                                       (helpers/animate-linear translate-y 0 200)
+                                       (helpers/animate-linear opacity 1 200))
            fade-out-animation        (fn []
-                                       (animate-linear
-                                        translate-y
-                                        (if @reviewing-audio? 76 20)
-                                        200)
+                                       (when-not force-show-controls?
+                                         (helpers/animate-linear
+                                          translate-y
+                                          (if @reviewing-audio? 76 20)
+                                          200))
                                        (when-not @reviewing-audio?
-                                         (animate-linear opacity 0 200))
-                                       (set-value connector-opacity 0)
-                                       (set-value width 24)
-                                       (set-value height 12)
-                                       (set-value border-radius-first-half 8)
-                                       (set-value border-radius-second-half 16))
+                                         (helpers/animate-linear opacity 0 200))
+                                       (helpers/set-value connector-opacity 0)
+                                       (helpers/set-value width 24)
+                                       (helpers/set-value height 12)
+                                       (helpers/set-value border-radius-first-half 8)
+                                       (helpers/set-value border-radius-second-half 16))
            fade-out-reset-animation  (fn []
-                                       (animate-linear opacity 0 200)
-                                       (animate-linear-with-delay translate-y 20 0 200)
-                                       (set-value connector-opacity 0)
-                                       (set-value width 24)
-                                       (set-value height 12)
-                                       (set-value border-radius-first-half 8)
-                                       (set-value border-radius-second-half 16))]
+                                       (helpers/animate-linear opacity 0 200)
+                                       (helpers/animate-linear-with-delay translate-y 20 0 200)
+                                       (helpers/set-value connector-opacity 0)
+                                       (helpers/set-value width 24)
+                                       (helpers/set-value height 12)
+                                       (helpers/set-value border-radius-first-half 8)
+                                       (helpers/set-value border-radius-second-half 16))]
        (use-effect (fn []
                      (if @recording?
                        (fade-in-animation)