updates

2023-06-26 13:42:11 +04:00
387 changed files with 3782 additions and 4839 deletions
@@ -0,0 +1,37 @@
+module.exports = {
+  testRunner: 'jest',
+  testRegex: '\\.visual\\.js$',
+  'runner-config': 'visual-test/config.json',
+  devices: {
+    simulator: {
+      type: 'ios.simulator',
+      device: {
+        type: 'iPhone 11 Pro',
+      },
+    },
+  },
+  apps: {
+    'ios.release': {
+      name: 'StatusIm',
+      type: 'ios.app',
+      binaryPath: 'ios/build/Build/Products/Release-iphonesimulator/StatusIm.app',
+      build: 'make release-ios',
+    },
+    'ios.debug': {
+      name: 'StatusIm',
+      type: 'ios.app',
+      binaryPath: process.env.TEST_BINARY_PATH,
+      build: "make run-ios SIMULATOR='iPhone 11 Pro'",
+    },
+  },
+  configurations: {
+    'ios.sim.release': {
+      device: 'simulator',
+      app: 'ios.release',
+    },
+    'ios.sim.debug': {
+      device: 'simulator',
+      app: 'ios.debug',
+    },
+  },
+};
@@ -43,4 +43,4 @@ As a <user|developer|...>, I want to <task> so that <goal>.
 [comment]: # (if on Android please replicate bug whilst running adb logcat)
 ```
 ...
-```
+```
@@ -14,17 +14,17 @@ WHITE  := $(shell tput -Txterm setaf 7)
 YELLOW := $(shell tput -Txterm setaf 3)
 RESET  := $(shell tput -Txterm sgr0)
 HELP_FUN = \
-			 %help; \
-			 while(<>) { push @{$$help{$$2 // 'options'}}, [$$1, $$3] if /^([a-zA-Z\-]+)\s*:.*\#\#(?:@([a-zA-Z\-]+))?\s(.*)$$/ }; \
-			 print "Usage: make [target]\n\nSee STARTING_GUIDE.md for more info.\n\n"; \
-			 for (sort keys %help) { \
-				 print "${WHITE}$$_:${RESET}\n"; \
-				 for (@{$$help{$$_}}) { \
-					 $$sep = " " x (32 - length $$_->[0]); \
-					 print "  ${YELLOW}$$_->[0]${RESET}$$sep${GREEN}$$_->[1]${RESET}\n"; \
-				 }; \
-				 print "\n"; \
-			 }
+		   %help; \
+		   while(<>) { push @{$$help{$$2 // 'options'}}, [$$1, $$3] if /^([a-zA-Z\-]+)\s*:.*\#\#(?:@([a-zA-Z\-]+))?\s(.*)$$/ }; \
+		   print "Usage: make [target]\n\nSee STARTING_GUIDE.md for more info.\n\n"; \
+		   for (sort keys %help) { \
+			   print "${WHITE}$$_:${RESET}\n"; \
+			   for (@{$$help{$$_}}) { \
+				   $$sep = " " x (32 - length $$_->[0]); \
+				   print "  ${YELLOW}$$_->[0]${RESET}$$sep${GREEN}$$_->[1]${RESET}\n"; \
+			   }; \
+			   print "\n"; \
+		   }
 HOST_OS := $(shell uname | tr '[:upper:]' '[:lower:]')

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

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

+
 shadow-server: export TARGET := clojure
 shadow-server:##@ Start shadow-cljs in server mode for watching
 	yarn shadow-cljs server
@@ -344,6 +343,14 @@ test: ##@test Run tests once in NodeJS
 	yarn shadow-cljs compile test && \
 	node --require ./test-resources/override.js target/test/test.js

+
+run-visual-test-ios: export TARGET := clojure
+run-visual-test-ios: XCODE_DERIVED_DATA := $(HOME)/Library/Developer/Xcode/DerivedData
+run-visual-test-ios: APPLICATION_NAME := StatusIm-brfnruzfrkkycpbndmdoeyrigthc
+run-visual-test-ios: export TEST_BINARY_PATH := $(XCODE_DERIVED_DATA)/$(APPLICATION_NAME)/Build/Products/Debug-iphonesimulator/StatusIm.app
+run-visual-test-ios: ##@test Run tests once in NodeJS
+	detox test --configuration ios.sim.debug
+
 component-test-watch: export TARGET := clojure
 component-test-watch: export COMPONENT_TEST := true
 component-test-watch: export BABEL_ENV := test
@@ -1,4 +1,4 @@
 {
  "name": "StatusIm",
  "displayName": "StatusIm"
-}
+}
@@ -1,4 +1,3 @@
-#!/usr/bin/env groovy
 library 'status-jenkins-lib@v1.7.9'

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

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

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

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

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

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

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

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

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

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

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

-  We should avoid 8 point stories by breaking them down into smaller stories as much as possible.
+  We should avoid 8 point stories by breaking them down into smaller stories as much as possible.
@@ -169,7 +169,7 @@ For VS Code users.
 ### Start and connect the REPL

 1. Open the `status-mobile` folder.
-1. Start [Status development](starting-guide.md#development) (Starting the `run-clojure` and `run-metro` jobs in split view in the VS Code integrated terminal works great.)
+1. Start [Status development](STARTING_GUIDE.md#development) (Starting the `run-clojure` and `run-metro` jobs in split view in the VS Code integrated terminal works great.)
 1. Run the VS Code command: **Calva: Connect to a running REPL Server in the project**
   1. Select the project type `shadow-cljs`
   1. Accept the suggested connection `host:port`
@@ -3,4 +3,4 @@
    "version" : 1,
    "author" : "xcode"
  }
-}
+}
@@ -1156,7 +1156,23 @@ RCT_EXPORT_METHOD(deactivateKeepAwake)

 - (NSString*) deviceName
 {
-    return [[UIDevice currentDevice] name];;
+
+    NSString* deviceName = nil;
+
+    if ([self.deviceId rangeOfString:@"iPod"].location != NSNotFound) {
+        deviceName = @"iPod Touch";
+    }
+    else if([self.deviceId rangeOfString:@"iPad"].location != NSNotFound) {
+        deviceName = @"iPad";
+    }
+    else if([self.deviceId rangeOfString:@"iPhone"].location != NSNotFound){
+        deviceName = @"iPhone";
+    }
+    else if([self.deviceId rangeOfString:@"AppleTV"].location != NSNotFound){
+        deviceName = @"Apple TV";
+    }
+
+    return deviceName;
 }

 - (NSDictionary *)constantsToExport
@@ -18,4 +18,4 @@
    "url": "https://github.com/status-im/react-native-status/issues"
  },
  "homepage": "https://github.com/status-im/react-native-status#readme"
-}
+}
@@ -49,12 +49,6 @@ in {
    doCheck = false;
  });

-  # Downgrade watchman in attempt to fix "too many files open issue"
-  watchman = callPackage ./pkgs/watchman {
-    inherit (super.darwin.apple_sdk.frameworks) CoreServices;
-    autoconf = super.buildPackages.autoconf269;
-  };
-
  # Package version adjustments
  gradle = super.gradle_7;
  nodejs = super.nodejs-18_x;
@@ -17,20 +17,9 @@ let

  # Override some packages and utilities
  pkgsOverlay = import ./overlay.nix;
-
-  # Fix for lack of Android SDK for M1 Macs.
-  systemOverride = let
-    inherit (builtins) currentSystem getEnv;
-    envSystemOverride = getEnv "NIXPKGS_SYSTEM_OVERRIDE";
-  in
-    if envSystemOverride != "" then
-      envSystemOverride
-    else
-      currentSystem;
 in
  # import nixpkgs with a config override
  (import nixpkgsSrc) {
    config = defaultConfig // config;
-    system = systemOverride;
    overlays = [ pkgsOverlay ];
  }
@@ -3,10 +3,7 @@
 # for the Android development environment.
 #

-{ androidenv, lib, stdenv }:
-
-assert lib.assertMsg (stdenv.system != "aarch64-darwin")
-  "aarch64-darwin not supported for Android SDK. Use: NIXPKGS_SYSTEM_OVERRIDE=x86_64-darwin";
+{ androidenv }:

 # The "android-sdk-license" license is accepted
 # by setting android_sdk.accept_license = true.
@@ -1,23 +0,0 @@
-# Issue
-
-`watchman` was upgraded significantly during the last nixpkgs upgrade (`4.9.0` (Aug 16, 2017) to `2023.01.30.00` - 6 years between):
- https://github.com/status-im/status-mobile/pull/14944
- https://github.com/status-im/nixpkgs/commit/4e9c02bcc709fe1737a746add0e8e0109133d808
-
-Probably causing developers to have "too many files open" issue:
-https://github.com/status-im/status-mobile/issues/16341
-
-```
-Error: A non-recoverable condition has triggered.  Watchman needs your help!
-The triggering condition was at timestamp=1687286390: opendir(/Users/javid/Projects/status-mobile/node_modules/metro-core/node_modules/jest-regex-util/build) -> Too many open files
-All requests will continue to fail with this message until you resolve
-the underlying problem.  You will find more information on fixing this at
-https://facebook.github.io/watchman/docs/troubleshooting.html#poison-opendir
-```
-
-# Fix
-This is an attempt to fix the issue by downgrading the watchman
-
-# Upgrade
-When upgrading in the future, please read the comments:
-https://github.com/status-im/status-mobile/issues/16341
@@ -1,48 +0,0 @@
-{ stdenv, lib, config, fetchFromGitHub, autoconf, automake, pcre
-, libtool, pkg-config, openssl
-, confFile ? config.watchman.confFile or null
-, withApple ? stdenv.isDarwin, CoreServices
-}:
-
-stdenv.mkDerivation rec {
-  pname = "watchman";
-  version = "4.9.0";
-
-  src = fetchFromGitHub {
-    owner = "facebook";
-    repo = "watchman";
-    rev = "v${version}";
-    sha256 = "0fdaj5pmicm6j17d5q7px800m5rmam1a400x3hv1iiifnmhgnkal";
-  };
-
-  nativeBuildInputs = [ autoconf automake pkg-config libtool ];
-  buildInputs = [ pcre openssl ]
-    #++ lib.optionals withApple [ CoreServices ];
-    ++ lib.optionals stdenv.isDarwin [ CoreServices ];
-
-  configureFlags = [
-    "--enable-lenient"
-    "--enable-conffile=${if confFile == null then "no" else confFile}"
-    "--with-pcre=yes"
-
-    # For security considerations re: --disable-statedir, see:
-    # https://github.com/facebook/watchman/issues/178
-    "--disable-statedir"
-  ];
-
-  prePatch = ''
-    patchShebangs .
-  '';
-
-  preConfigure = ''
-    ./autogen.sh
-  '';
-
-  meta = with lib; {
-    description = "Watches files and takes action when they change";
-    homepage    = "https://facebook.github.io/watchman";
-    maintainers = with maintainers; [ cstrahan ];
-    platforms   = with platforms; linux ++ darwin;
-    license     = licenses.asl20;
-  };
-}
@@ -25,7 +25,7 @@ cleanup() {

 # If you want to clean after every build set _NIX_CLEAN=true
 if [[ -n "${_NIX_CLEAN}" ]]; then
-  trap cleanup EXIT ERR INT QUIT
+    trap cleanup EXIT ERR INT QUIT
 fi

 # build output will end up under /nix, we have to extract it
@@ -44,12 +44,6 @@ if [[ -z "${TARGET}" ]]; then
  exit 1
 fi

-# Hack fix for missing Android SDK for aarch64 on Darwin. See systemOverride in `nix/pkgs.nix`.
-if [[ "${TARGET}" =~ ^(targets.status-go.mobile.android|targets.mobile.android.release)$ ]]; then
-  os=$(uname -s | tr '[:upper:]' '[:lower:]')
-  export NIXPKGS_SYSTEM_OVERRIDE="x86_64-${os}"
-fi
-
 # Some defaults flags, --pure could be optional in the future.
 # NOTE: The --keep-failed flag can be used for debugging issues.
 nixOpts=(
@@ -8,8 +8,7 @@ file_group() {
    if [[ "${UNAME}" == "Linux" ]]; then
        stat -Lc "%G" "${1}" 2>/dev/null
    elif [[ "${UNAME}" == "Darwin" ]]; then
-        # Avoid using Nix GNU stat when in Nix shell.
-        /usr/bin/stat -Lf "%Sg" "${1}" 2>/dev/null
+        stat -Lf "%Sg" "${1}" 2>/dev/null
    fi
 }

@@ -1,5 +1,6 @@
 #!/usr/bin/env bash

+#
 # This script is used by the Makefile to have an implicit nix-shell.
 # The following environment variables modify the script behavior:
 # - TARGET: This attribute is passed via --attr to Nix, defining the scope.
@@ -63,12 +64,6 @@ if [[ -n "${_NIX_PURE}" ]]; then
    pureDesc='pure '
 fi

-# Hack fix for missing Android SDK for aarch64 on Darwin. See systemOverride in `nix/pkgs.nix`.
-if [[ "${TARGET}" =~ ^(android-sdk|android|gradle|keytool|status-go)$ ]]; then
-    os=$(uname -s | tr '[:upper:]' '[:lower:]')
-    export NIXPKGS_SYSTEM_OVERRIDE="x86_64-${os}"
-fi
-
 echo -e "${GRN}Configuring ${pureDesc}Nix shell for target '${TARGET}'...${RST}" 1>&2

 # Save derivation from being garbage collected
@@ -90,6 +90,7 @@
    "@testing-library/react-native": "^11.2.0",
    "@types/jest": "^28.1.6",
    "concurrently": "^7.6.0",
+    "detox": "^19.9.1",
    "jest": "^26.6.3",
    "jest-circus": "^26.0.0",
    "jest-image-snapshot": "^5.1.0",
@@ -194,4 +194,4 @@
            }
        }
    }
-}
+}
@@ -1,33 +0,0 @@
-#!/usr/bin/env bash
-
-set -eof pipefail
-
-FILES=$(comm -23 <(sort <(git ls-files --cached --others --exclude-standard)) <(sort <(git ls-files --deleted)) | grep --ignore-case -E '\.(java|cpp|nix|json|sh|md|js|clj|cljs|cljc|edn)$')
-N_FILES=$(echo "$FILES" | wc -l)
-LINT_SHOULD_FIX=0
-
-if [[ -n $1 && $1 != '--fix' ]]; then
-    echo "Unknown option '$1'" >&2
-    exit 1
-elif [[ $1 == '--fix' ]]; then
-    LINT_SHOULD_FIX=1
-fi
-
-echo "Checking ${N_FILES} files for missing trailing newlines."
-
-# Do not process the whole file and only check the last character. Ignore empty
-# files. Taken from https://stackoverflow.com/a/10082466.
-for file in $FILES; do
-    if [ -s "$file" ] && [ "$(tail -c1 "$file"; echo x)" != $'\nx' ]; then
-        if [[ $LINT_SHOULD_FIX -eq 1 ]]; then
-            echo "" >>"$file"
-        else
-            LINT_ERROR=1
-            echo "No trailing newline: $file" >&2
-        fi
-    fi
-done
-
-if [[ $LINT_ERROR -eq 1 ]]; then
-    exit 1
-fi
@@ -1,92 +0,0 @@
-import { useAnimatedStyle, useDerivedValue } from 'react-native-reanimated';
-
-export function background(color, progress) {
-  return useDerivedValue(function () {
-    'worklet';
-    const r = parseInt(color.substring(1, 3), 16);
-    const g = parseInt(color.substring(3, 5), 16);
-    const b = parseInt(color.substring(5, 7), 16);
-
-    return progress.value <= 25 ? `rgba(${r}, ${g}, ${b}, .4)` : `rgba(${r}, ${g}, ${b}, .2)`;
-  });
-}
-
-export function opacity(progress) {
-  return useDerivedValue(function () {
-    'worklet';
-    return progress.value <= 25 ? 1 : 0.3;
-  });
-}
-
-export function avatarOpacity(progress) {
-  return useDerivedValue(function () {
-    'worklet';
-    const progressValue = progress.value;
-
-    switch (true) {
-      case progressValue <= 25:
-        return 1;
-      case progressValue <= 50:
-        return 0.1;
-      default:
-        return 0.3;
-    }
-  });
-}
-
-export function ringOpacity(progress) {
-  return useDerivedValue(function () {
-    'worklet';
-    return progress.value <= 50 ? 1 : 0.3;
-  });
-}
-
-export function userHashOpacity(progress) {
-  return useDerivedValue(function () {
-    'worklet';
-    const progressValue = progress.value;
-    switch (true) {
-      case progressValue <= 25:
-        return 1;
-      case progressValue <= 50:
-        return 0.3;
-      case progressValue <= 75:
-        return 1;
-      default:
-        return 0.3;
-    }
-  });
-}
-
-export function userHashColor(progress) {
-  return useDerivedValue(function () {
-    'worklet';
-    const progressValue = progress.value;
-    switch (true) {
-      case progressValue <= 25:
-        return 'rgba(255, 255, 255, .6)';
-      case progressValue <= 50:
-        return 'rgba(255, 255, 255, .6)';
-      case progressValue <= 75:
-        return 'rgb(255, 255, 255)';
-      default:
-        return 'rgba(255, 255, 255, .6)';
-    }
-  });
-}
-
-export function emojiHashStyle(progress) {
-  return useAnimatedStyle(function () {
-    'worklet';
-    const progressValue = progress.value;
-
-    switch (true) {
-      case progressValue <= 25:
-        return { opacity: 1 };
-      case progressValue <= 75:
-        return { opacity: 0.3 };
-      default:
-        return { opacity: 1 };
-    }
-  });
-}
@@ -1,8 +1,6 @@
 import { useDerivedValue, withTiming, Easing } from 'react-native-reanimated';

 const slideAnimationDuration = 300;
-const totalPages = 4;
-const pageSize = 100 / totalPages;

 const easeOut = {
  duration: slideAnimationDuration,
@@ -17,15 +15,29 @@ export function dynamicProgressBarWidth(staticProgressBarWidth, progress) {
  });
 }

-export function carouselLeftPosition(windowWidth, progress, isDragging, dragAmount) {
+export function carouselLeftPosition(windowWidth, progress) {
  return useDerivedValue(function () {
    'worklet';
    const progressValue = progress.value;
-    const dragAmountValue = dragAmount.value;
-
-    const baseOffset = (Math.floor(progressValue / pageSize) % totalPages) * windowWidth;
-    const adjustedOffset = baseOffset === 0 && dragAmountValue > 0 ? baseOffset : -baseOffset + dragAmountValue;
-
-    return isDragging.value ? withTiming(adjustedOffset, easeOut) : withTiming(-baseOffset, easeOut);
+    switch (true) {
+      case progressValue < 25:
+        return 0;
+      case progressValue === 25:
+        return withTiming(-windowWidth, easeOut);
+      case progressValue < 50:
+        return -windowWidth;
+      case progressValue === 50:
+        return withTiming(-2 * windowWidth, easeOut);
+      case progressValue < 75:
+        return -2 * windowWidth;
+      case progressValue === 75:
+        return withTiming(-3 * windowWidth, easeOut);
+      case progressValue < 100:
+        return -3 * windowWidth;
+      case progressValue === 100:
+        return withTiming(-4 * windowWidth, easeOut);
+      default:
+        return 0;
+    }
  });
 }
@@ -13,7 +13,6 @@ which is explained in better detail in this video
 https://www.youtube.com/watch?v=iEBoZDHCN5Y&t=2205s
 there is a bug with the pitch and roll calculations provided directly from the sensor data so the calculation had to
 be done using the quaternions directly.
-This link is useful to understand this: https://engineering.stackexchange.com/questions/3348/calculating-pitch-yaw-and-roll-from-mag-acc-and-gyro-data
 */
 export function sensorAnimatedImage(zIndex, offset, stretch) {
  'worklet';
@@ -1,4 +1,4 @@
-import { useDerivedValue, withTiming, withSequence, withDelay, Easing, runOnJS } from 'react-native-reanimated';
+import { useDerivedValue, withTiming, withSequence, withDelay, Easing } from 'react-native-reanimated';
 import * as constants from './constants';

 // Derived Values
@@ -88,61 +88,3 @@ export function screenZIndex(screenState) {
    }
  });
 }
-
-export function screenBorderRadius(screenState) {
-  return useDerivedValue(function () {
-    'worklet';
-    switch (screenState.value) {
-      case constants.OPEN_SCREEN_WITH_SHELL_ANIMATION:
-        return withDelay(constants.SHELL_ANIMATION_TIME, withTiming(0, { duration: 0 }));
-      case constants.OPEN_SCREEN_WITH_SLIDE_ANIMATION:
-      case constants.OPEN_SCREEN_WITHOUT_ANIMATION:
-        return 0;
-      case constants.CLOSE_SCREEN_WITH_SLIDE_ANIMATION:
-        return withDelay(constants.SHELL_ANIMATION_TIME, withTiming(20, { duration: 0 }));
-      case constants.CLOSE_SCREEN_WITHOUT_ANIMATION:
-      case constants.CLOSE_SCREEN_WITH_SHELL_ANIMATION:
-        return 20;
-    }
-  });
-}
-
-export function screenGestureOnUpdate(screenLeft) {
-  return function (event) {
-    'worklet';
-    const absoluteX = event.absoluteX;
-    if (absoluteX !== null) {
-      screenLeft.value = event.absoluteX;
-    }
-  };
-}
-
-export function screenGestureOnEnd(data) {
-  return function (event) {
-    'worklet';
-
-    const { screenLeft, screenState, screenWidth, leftVelocity, rightVelocity, screenClosedCallback } = data;
-    const absoluteX = event.absoluteX ?? 0;
-    const velocityX = event.velocityX ?? 0;
-    const closeScreen = velocityX > rightVelocity || (velocityX > leftVelocity && absoluteX >= screenWidth / 2);
-
-    // Velocity (points/sec) = Distance/time
-    var animationVelocity = (screenWidth * 1000) / constants.SHELL_ANIMATION_TIME;
-
-    if (Math.abs(velocityX) > animationVelocity) {
-      animationVelocity = velocityX; // Faster fling
-    }
-
-    const newDistance = closeScreen ? screenWidth - absoluteX : absoluteX;
-    const animationTime = (newDistance * 1000) / animationVelocity;
-
-    screenLeft.value = withTiming(closeScreen ? screenWidth : 0, {
-      duration: animationTime,
-      easing: Easing.bezier(0, 0, 0.58, 1),
-    });
-
-    if (closeScreen) {
-      runOnJS(screenClosedCallback)(animationTime);
-    }
-  };
-}
@@ -364,79 +364,77 @@ globalThis.__STATUS_MOBILE_JS_IDENTITY_PROXY__ = new Proxy({}, {get() { return (
 (defn mock
  [module]
  (case module
-    "react-native-languages"                         react-native-languages
-    "react-native-background-timer"                  background-timer
-    "react-native-image-crop-picker"                 image-crop-picker
-    "react-native-gesture-handler"                   react-native-gesture-handler
-    "react-native-static-safe-area-insets"           react-native-static-safe-area-insets
-    "react-native-config"                            config
-    "react-native-iphone-x-helper"                   (clj->js {:getStatusBarHeight (fn [])
-                                                               :getBottomSpace     (fn [])})
-    "react-native-screens"                           (clj->js {})
-    "react-native-reanimated"                        react-native-reanimated
-    "react-native-redash/lib/module/v1"              react-native-redash
-    "react-native-redash"                            react-native-redash
-    "react-native-fetch-polyfill"                    fetch
-    "react-native-status-keycard"                    status-keycard
-    "react-native-keychain"                          keychain
-    "react-native-touch-id"                          touchid
-    "@react-native-community/netinfo"                net-info
-    "react-native-dialogs"                           dialogs
-    "react-native"                                   react-native
-    "react-native-fs"                                fs
-    "react-native-mail"                              react-native-mail
-    "react-native-image-resizer"                     image-resizer
-    "react-native-haptic-feedback"                   react-native-haptic-feedback
-    "react-native-device-info"                       react-native-device-info
-    "react-native-push-notification"                 react-native-push-notification
-    "react-native-linear-gradient"                   react-native-gradien
-    "@react-native-community/masked-view"            masked-view
-    "react-native-blob-util"                         react-native-blob-util
-    "react-native-navigation"                        react-native-navigation
-    "@react-native-community/push-notification-ios"  push-notification-ios
-    "@react-native-community/blur"                   react-native-blur
-    "@react-native-community/cameraroll"             react-native-camera-roll
-    "react-native-camera-kit"                        react-native-camera-kit
-    "react-native-permissions"                       react-native-permissions
-    "rn-emoji-keyboard"                              rn-emoji-keyboard
-    "react-native-hole-view"                         react-native-hole-view
-    "react-native-draggable-flatlist"                react-native-draggable-flatlist
-    "react-native-webview"                           react-native-webview
-    "@react-native-community/audio-toolkit"          react-native-audio-toolkit
-    "react-native-image-viewing"                     react-native-image-viewing
-    "react-native-share"                             react-native-share
-    "@react-native-async-storage/async-storage"      async-storage
-    "react-native-svg"                               react-native-svg
-    "react-native-transparent-video"                 react-native-transparent-video
-    "react-native-orientation-locker"                react-native-orientation-locker
-    "../src/js/worklets/core.js"                     worklet-factory
-    "../src/js/worklets/shell/bottom_tabs.js"        #js {}
-    "../src/js/worklets/shell/home_stack.js"         #js {}
-    "../src/js/worklets/shell/floating_screen.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/onboarding_carousel.js"      #js {}
-    "../src/js/worklets/lightbox.js"                 #js {}
-    "../src/js/worklets/parallax.js"                 #js {}
-    "../src/js/worklets/identifiers_highlighting.js" #js {}
-    "./fleets.js"                                    default-fleets
-    "@walletconnect/client"                          wallet-connect-client
-    "../translations/ar.json"                        (js/JSON.parse (slurp "./translations/ar.json"))
-    "../translations/de.json"                        (js/JSON.parse (slurp "./translations/de.json"))
-    "../translations/en.json"                        (js/JSON.parse (slurp "./translations/en.json"))
-    "../translations/es.json"                        (js/JSON.parse (slurp "./translations/es.json"))
-    "../translations/es_419.json"                    (js/JSON.parse (slurp "./translations/es_419.json"))
-    "../translations/fil.json"                       (js/JSON.parse (slurp "./translations/fil.json"))
-    "../translations/fr.json"                        (js/JSON.parse (slurp "./translations/fr.json"))
-    "../translations/id.json"                        (js/JSON.parse (slurp "./translations/id.json"))
-    "../translations/it.json"                        (js/JSON.parse (slurp "./translations/it.json"))
-    "../translations/ko.json"                        (js/JSON.parse (slurp "./translations/ko.json"))
-    "../translations/pt_BR.json"                     (js/JSON.parse (slurp "./translations/pt_BR.json"))
-    "../translations/ru.json"                        (js/JSON.parse (slurp "./translations/ru.json"))
-    "../translations/tr.json"                        (js/JSON.parse (slurp "./translations/tr.json"))
-    "../translations/zh.json"                        (js/JSON.parse (slurp "./translations/zh.json"))
-    "../translations/zh_hant.json"                   (js/JSON.parse (slurp
-                                                                     "./translations/zh_hant.json"))
-    "../translations/zh_TW.json"                     (js/JSON.parse (slurp "./translations/zh_TW.json"))
+    "react-native-languages"                        react-native-languages
+    "react-native-background-timer"                 background-timer
+    "react-native-image-crop-picker"                image-crop-picker
+    "react-native-gesture-handler"                  react-native-gesture-handler
+    "react-native-static-safe-area-insets"          react-native-static-safe-area-insets
+    "react-native-config"                           config
+    "react-native-iphone-x-helper"                  (clj->js {:getStatusBarHeight (fn [])
+                                                              :getBottomSpace     (fn [])})
+    "react-native-screens"                          (clj->js {})
+    "react-native-reanimated"                       react-native-reanimated
+    "react-native-redash/lib/module/v1"             react-native-redash
+    "react-native-redash"                           react-native-redash
+    "react-native-fetch-polyfill"                   fetch
+    "react-native-status-keycard"                   status-keycard
+    "react-native-keychain"                         keychain
+    "react-native-touch-id"                         touchid
+    "@react-native-community/netinfo"               net-info
+    "react-native-dialogs"                          dialogs
+    "react-native"                                  react-native
+    "react-native-fs"                               fs
+    "react-native-mail"                             react-native-mail
+    "react-native-image-resizer"                    image-resizer
+    "react-native-haptic-feedback"                  react-native-haptic-feedback
+    "react-native-device-info"                      react-native-device-info
+    "react-native-push-notification"                react-native-push-notification
+    "react-native-linear-gradient"                  react-native-gradien
+    "@react-native-community/masked-view"           masked-view
+    "react-native-blob-util"                        react-native-blob-util
+    "react-native-navigation"                       react-native-navigation
+    "@react-native-community/push-notification-ios" push-notification-ios
+    "@react-native-community/blur"                  react-native-blur
+    "@react-native-community/cameraroll"            react-native-camera-roll
+    "react-native-camera-kit"                       react-native-camera-kit
+    "react-native-permissions"                      react-native-permissions
+    "rn-emoji-keyboard"                             rn-emoji-keyboard
+    "react-native-hole-view"                        react-native-hole-view
+    "react-native-draggable-flatlist"               react-native-draggable-flatlist
+    "react-native-webview"                          react-native-webview
+    "@react-native-community/audio-toolkit"         react-native-audio-toolkit
+    "react-native-image-viewing"                    react-native-image-viewing
+    "react-native-share"                            react-native-share
+    "@react-native-async-storage/async-storage"     async-storage
+    "react-native-svg"                              react-native-svg
+    "react-native-transparent-video"                react-native-transparent-video
+    "react-native-orientation-locker"               react-native-orientation-locker
+    "../src/js/worklets/core.js"                    worklet-factory
+    "../src/js/worklets/shell/bottom_tabs.js"       #js {}
+    "../src/js/worklets/shell/home_stack.js"        #js {}
+    "../src/js/worklets/shell/floating_screen.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/onboarding_carousel.js"     #js {}
+    "../src/js/worklets/lightbox.js"                #js {}
+    "../src/js/worklets/parallax.js"                #js {}
+    "./fleets.js"                                   default-fleets
+    "@walletconnect/client"                         wallet-connect-client
+    "../translations/ar.json"                       (js/JSON.parse (slurp "./translations/ar.json"))
+    "../translations/de.json"                       (js/JSON.parse (slurp "./translations/de.json"))
+    "../translations/en.json"                       (js/JSON.parse (slurp "./translations/en.json"))
+    "../translations/es.json"                       (js/JSON.parse (slurp "./translations/es.json"))
+    "../translations/es_419.json"                   (js/JSON.parse (slurp "./translations/es_419.json"))
+    "../translations/fil.json"                      (js/JSON.parse (slurp "./translations/fil.json"))
+    "../translations/fr.json"                       (js/JSON.parse (slurp "./translations/fr.json"))
+    "../translations/id.json"                       (js/JSON.parse (slurp "./translations/id.json"))
+    "../translations/it.json"                       (js/JSON.parse (slurp "./translations/it.json"))
+    "../translations/ko.json"                       (js/JSON.parse (slurp "./translations/ko.json"))
+    "../translations/pt_BR.json"                    (js/JSON.parse (slurp "./translations/pt_BR.json"))
+    "../translations/ru.json"                       (js/JSON.parse (slurp "./translations/ru.json"))
+    "../translations/tr.json"                       (js/JSON.parse (slurp "./translations/tr.json"))
+    "../translations/zh.json"                       (js/JSON.parse (slurp "./translations/zh.json"))
+    "../translations/zh_hant.json"                  (js/JSON.parse (slurp "./translations/zh_hant.json"))
+    "../translations/zh_TW.json"                    (js/JSON.parse (slurp "./translations/zh_TW.json"))
    nil))
@@ -4,8 +4,7 @@
            [taoensso.timbre :as log]
            [react-native.platform :as platform]
            [react-native.core :as rn]
-            [utils.transforms :as types]
-            [clojure.string :as string]))
+            [utils.transforms :as types]))

 (defn status
  []
@@ -388,14 +387,6 @@
     :build-id  (.-buildId status)
     :device-id (.-deviceId status)}))

-(defn get-installation-name
-  []
-  ;; NOTE(rasom): Only needed for android devices currently
-  (when platform/android?
-    (string/join " "
-                 ((juxt :model :device-id)
-                  (get-device-model-info)))))
-
 (defn get-node-config
  [callback]
  (log/debug "[native-module] get-node-config")
@@ -11,4 +11,4 @@
   (for [i (keys icons/icons)]
     [rn/view {:flex-direction :row}
      [icons/icon (keyword i)]
-      [rn/text i]])])
+      [rn/text i]])])
@@ -4,9 +4,7 @@
            [quo2.foundations.colors :as colors]
            [quo2.theme :as theme]
            [react-native.core :as rn]
-            [react-native.blur :as blur]
-            [reagent.core :as reagent]
-            [quo2.components.buttons.style :as style]))
+            [reagent.core :as reagent]))

 (defn themes
  [customization-color]
@@ -68,16 +66,6 @@
                      :background-color     {:default  colors/neutral-80-opa-5
                                             :pressed  colors/neutral-80-opa-10
                                             :disabled colors/neutral-80-opa-5}}
-    :blurred         {:icon-color            colors/neutral-100
-                      :icon-secondary-color  colors/neutral-100
-                      :icon-background-color {:default colors/neutral-20
-                                              :blurred colors/neutral-80-opa-10}
-                      :label-color           colors/neutral-100
-                      :background-color      {:default  colors/neutral-10
-                                              :pressed  colors/neutral-10
-                                              :disabled colors/neutral-10-opa-10-blur}
-                      :blur-overlay-color    colors/neutral-10-opa-40-blur
-                      :blur-type             :light}
    :blur-bg-outline {:icon-color           colors/neutral-100
                      :icon-secondary-color colors/neutral-80-opa-40
                      :label-color          colors/neutral-100
@@ -147,16 +135,6 @@
                      :background-color     {:default  colors/white-opa-5
                                             :pressed  colors/white-opa-10
                                             :disabled colors/white-opa-5}}
-    :blurred         {:icon-color            colors/white
-                      :icon-secondary-color  colors/white
-                      :icon-background-color {:default colors/neutral-80
-                                              :blurred colors/white-opa-10}
-                      :label-color           colors/white
-                      :background-color      {:default  colors/neutral-90
-                                              :pressed  colors/neutral-90
-                                              :disabled colors/neutral-90-opa-10-blur}
-                      :blur-overlay-color    colors/neutral-80-opa-40
-                      :blur-type             :dark}
    :blur-bg-outline {:icon-color           colors/white
                      :icon-secondary-color colors/white-opa-40
                      :label-color          colors/white
@@ -179,11 +157,12 @@
                      24 8))})

 (defn style-container
-  [type size disabled background-color border-color icon above width before after blur-active?]
+  [type size disabled background-color border-color icon above width before after]
  (merge {:height             size
          :align-items        :center
          :justify-content    :center
          :flex-direction     (if above :column :row)
+          :background-color   background-color
          :padding-horizontal (when-not (or icon before after)
                                (case size
                                  56 16
@@ -213,11 +192,7 @@
                                  56 0
                                  40 9
                                  32 5
-                                  24 4))
-          :overflow           :hidden}
-         (when (or (and (= type :blurred) (not blur-active?))
-                   (not= type :blurred))
-           {:background-color background-color})
+                                  24 4))}
         (shape-style-container type icon size)
         (when width
           {:width width})
@@ -249,23 +224,18 @@
    (fn
      [{:keys [on-press disabled type size before after above icon-secondary-no-color
               width customization-color theme override-background-color pressed
-               on-long-press accessibility-label icon icon-no-color style inner-style test-ID
-               blur-active? override-before-margins override-after-margins icon-size icon-container-size
-               icon-container-rounded?]
+               on-long-press accessibility-label icon icon-no-color style inner-style test-ID]
        :or   {type                :primary
               size                40
-               customization-color :primary
-               blur-active?        true}}
+               customization-color :primary}}
       children]
-      (let [{:keys [icon-color icon-secondary-color background-color label-color border-color blur-type
-                    blur-overlay-color icon-background-color]}
+      (let [{:keys [icon-color icon-secondary-color background-color label-color border-color]}
            (get-in (themes customization-color)
                    [theme type])
            state (cond disabled                 :disabled
                        (or @pressed-in pressed) :pressed
                        :else                    :default)
-            blur-state (if blur-active? :blurred :default)
-            icon-size (or icon-size (when (= 24 size) 12))
+            icon-size (when (= 24 size) 12)
            icon-secondary-color (or icon-secondary-color icon-color)]
        [rn/touchable-without-feedback
         (merge {:test-ID             test-ID
@@ -294,17 +264,9 @@
                     above
                     width
                     before
-                     after
-                     blur-active?)
+                     after)
                    (when (= state :pressed) {:opacity 0.9})
                    inner-style)}
-           (when (and (= type :blurred)
-                      blur-active?)
-             [blur/view
-              {:blur-radius   20
-               :blur-type     blur-type
-               :overlay-color blur-overlay-color
-               :style         style/blur-view}])
           (when above
             [rn/view
              [quo2.icons/icon above
@@ -313,16 +275,11 @@
                :size            icon-size}]])
           (when before
             [rn/view
-              {:style (style/before-icon-style
-                       {:override-margins        override-before-margins
-                        :size                    size
-                        :icon-container-size     icon-container-size
-                        :icon-background-color   (get icon-background-color blur-state)
-                        :icon-container-rounded? icon-container-rounded?
-                        :icon-size               icon-size})}
              [quo2.icons/icon before
-               {:color icon-secondary-color
-                :size  icon-size}]])
+               {:container-style {:margin-left  (if (= size 40) 12 8)
+                                  :margin-right 4}
+                :color           icon-secondary-color
+                :size            icon-size}]])
           [rn/view
            (cond
              (or icon icon-no-color)
@@ -344,16 +301,11 @@
              children)]
           (when after
             [rn/view
-              {:style (style/after-icon-style
-                       {:override-margins        override-after-margins
-                        :size                    size
-                        :icon-container-size     icon-container-size
-                        :icon-background-color   (get icon-background-color blur-state)
-                        :icon-container-rounded? icon-container-rounded?
-                        :icon-size               icon-size})}
              [quo2.icons/icon after
-               {:no-color icon-secondary-no-color
-                :color    icon-secondary-color
-                :size     icon-size}]])]]]))))
+               {:container-style {:margin-left  4
+                                  :margin-right (if (= size 40) 12 8)}
+                :no-color        icon-secondary-no-color
+                :color           icon-secondary-color
+                :size            icon-size}]])]]]))))

 (def button (theme/with-theme button-internal))
@@ -2,7 +2,6 @@
  (:require [react-native.core :as rn]
            [quo2.components.buttons.predictive-keyboard.style :as style]
            [quo2.components.info.info-message :as info-message]
-            [quo2.theme :as theme]
            [react-native.linear-gradient :as linear-gradient]
            [quo2.foundations.colors :as colors]
            [quo2.components.buttons.button :as button]))
@@ -13,33 +12,32 @@
   :blur  [colors/white-opa-5 colors/white-opa-0]})

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

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

-(defn- view-internal
+(defn view
  "Options
   - `type` `:words`/`:error`/`:info`/`:empty`.
   - `blur?` Boolean to enable blur background support.
   - `text`  error/info text.
   - `words` List of words to display in the keyboard.
-   - `on-press` Callback called when a word is pressed `(fn [word])`
-   - `theme` :light or :dark, received from with-theme HOC."
-  [{:keys [type blur? text words on-press theme]}]
+   - `on-press` Callback called when a word is pressed `(fn [word])`."
+  [{:keys [type blur? text words on-press]}]
  [linear-gradient/linear-gradient
   {:style               {:flex-direction :row}
    :accessibility-label :predictive-keyboard
    :colors              (if blur?
                           (gradients :blur)
-                           (colors/theme-colors (gradients :light) (gradients :dark) theme))}
+                           (colors/theme-colors (gradients :light) (gradients :dark)))}
   [rn/view {:style (style/wrapper type)}
    (case type
      :words
@@ -48,7 +46,8 @@
        :data                              words
        :content-container-style           style/word-list
        :render-fn                         word-component
-        :render-data                       {:on-press on-press}
+        :render-data                       {:blur?    blur?
+                                            :on-press on-press}
        :shows-horizontal-scroll-indicator false
        :separator                         [separator]
        :horizontal                        true
@@ -71,5 +70,3 @@
                 :icon-color colors/white-opa-70}))
       text]
      nil)]])
-
-(def view (theme/with-theme view-internal))
@@ -1,42 +0,0 @@
-(ns quo2.components.buttons.style)
-
-(def blur-view
-  {:position :absolute
-   :top      0
-   :left     0
-   :right    0
-   :bottom   0})
-
-(defn before-icon-style
-  [{:keys [override-margins size icon-container-size icon-background-color icon-container-rounded?
-           icon-size]}]
-  (merge
-   {:margin-left     (or (get override-margins :left)
-                         (if (= size 40) 12 8))
-    :margin-right    (or (get override-margins :right) 4)
-    :align-items     :center
-    :justify-content :center}
-   (when icon-container-size
-     {:width  icon-container-size
-      :height icon-container-size})
-   (when icon-background-color
-     {:background-color icon-background-color})
-   (when icon-container-rounded?
-     {:border-radius (/ (or icon-container-size icon-size) 2)})))
-
-(defn after-icon-style
-  [{:keys [override-margins size icon-container-size icon-background-color icon-container-rounded?
-           icon-size]}]
-  (merge
-   {:margin-left     (or (get override-margins :left) 4)
-    :margin-right    (or (get override-margins :right)
-                         (if (= size 40) 12 8))
-    :align-items     :center
-    :justify-content :center}
-   (when icon-container-size
-     {:width  icon-container-size
-      :height icon-container-size})
-   (when icon-background-color
-     {:background-color icon-background-color})
-   (when icon-container-rounded?
-     {:border-radius (/ (or icon-container-size icon-size) 2)})))
@@ -9,33 +9,33 @@
   :height          20})

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

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

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

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

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

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

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

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

 (def chevron-icon-container-width 20)
@@ -36,18 +36,18 @@
        padding-top                 (if increase-padding-top? 16 8)
        text-and-icon-color         (if dark? colors/neutral-40 colors/neutral-50)
        counter-text-color          (if dark? colors/white colors/neutral-100)]
-    [rn/touchable-without-feedback {:on-press on-press}
+    [rn/touchable-without-feedback
+     {:on-press on-press}
     [rn/view
      {:accessible          true
       :accessibility-label :divider-label
-       :style               (merge {:border-top-width 1
-                                    :border-top-color border-and-counter-bg-color
-                                    :padding-top      padding-top
-                                    :padding-bottom   padding-bottom
-                                    :padding-left     16
-                                    :padding-right    16
-                                    :align-items      :center
-                                    :flex-direction   :row}
+       :style               (merge {:border-top-width   1
+                                    :border-top-color   border-and-counter-bg-color
+                                    :padding-top        padding-top
+                                    :padding-bottom     padding-bottom
+                                    :padding-horizontal 16
+                                    :align-items        :center
+                                    :flex-direction     :row}
                                   container-style)}
      (when (= chevron-position :left)
        [rn/view
@@ -1,10 +1,4 @@
-(ns quo2.components.drawers.documentation-drawers.style
-  (:require [quo2.foundations.colors :as colors]
-            [react-native.safe-area :as safe-area]))
-
-(def outer-container
-  ;; Margin negative to fill the bottom-sheet container where this component is used
-  {:margin-bottom (- (+ (safe-area/get-bottom) 8))})
+(ns quo2.components.drawers.documentation-drawers.style)

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

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

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

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

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

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

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

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

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

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

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

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

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

-(defn card
-  [props children]
-  [:f> f-card props children])
-
-(defn f-view
+(defn view
  "[view opts]
   opts
   {:container-style  style-object
@@ -114,101 +70,29 @@
    child-1           string, keyword or hiccup
    child-2           string, keyword or hiccup
   "
-  [{:keys [container-style top-card bottom-card on-init animations-duration animations-delay]}
-   child-1
-   child-2]
-  (let [max-height           (+ (:height (rn/get-window)) (if platform/android? (safe-area/get-top) 0))
-        height               (reanimated/use-shared-value default-height)
-        top-padding          (reanimated/use-shared-value 12)
-        border-radius        (reanimated/use-shared-value 20)
-        bottom-view-top      (reanimated/use-shared-value 80)
-        top-title-opacity    (reanimated/use-shared-value 1)
-        top-children-opacity (reanimated/use-shared-value 1)
-        animations-delay     (/ animations-delay 1.4)
-        start-top-animation  (fn []
-                               (reanimated/animate-shared-value-with-delay bottom-view-top
-                                                                           (:height (rn/get-screen))
-                                                                           animations-duration
-                                                                           :easing4
-                                                                           animations-delay)
-                               (reanimated/animate-shared-value-with-delay
-                                height
-                                max-height
-                                animations-duration
-                                :easing4
-                                animations-delay)
-                               (reanimated/animate-shared-value-with-delay
-                                top-padding
-                                (+ 68 (safe-area/get-top))
-                                animations-duration
-                                :easing4
-                                animations-delay)
-                               (reanimated/animate-shared-value-with-delay
-                                top-children-opacity
-                                0
-                                animations-duration
-                                :easing4 animations-delay)
-                               (reanimated/animate-shared-value-with-delay
-                                top-title-opacity
-                                0
-                                0
-                                :linear
-                                (+ animations-delay animations-duration 500)))
-        reset-top-animation  (fn []
-                               (reanimated/set-shared-value top-title-opacity 1)
-                               (reanimated/animate-shared-value-with-delay bottom-view-top
-                                                                           80
-                                                                           animations-duration
-                                                                           :easing4
-                                                                           50)
-                               (reanimated/animate-shared-value-with-timing
-                                height
-                                default-height
-                                animations-duration
-                                :easing4)
-                               (reanimated/animate-shared-value-with-timing
-                                top-padding
-                                12
-                                animations-duration
-                                :easing4)
-                               (reanimated/animate-shared-value-with-timing
-                                top-children-opacity
-                                1
-                                animations-duration
-                                :easing4))]
-    (rn/use-effect (fn []
-                     (when on-init
-                       (on-init reset-top-animation))))
-    [reanimated/view {:style (style/outer-container height border-radius container-style)}
-     [blur/view
-      {:blur-type   :dark
-       :blur-amount 10
-       :style       style/blur-view-style}
-      [rn/view
-       {:style style/blur-content-style}
-       [reanimated/view
-        {:style (reanimated/apply-animations-to-style
-                 {:padding-top top-padding}
-                 style/top-card)}
-        [card
-         (merge {:gap                  4
-                 :top?                 true
-                 :style                {:flex 1}
-                 :top-children-opacity top-children-opacity
-                 :top-title-opacity    top-title-opacity
-                 :default-on-press     start-top-animation}
-                top-card)
-         child-1]]
-       [reanimated/view
-        {:style (reanimated/apply-animations-to-style
-                 {:top bottom-view-top}
-                 style/bottom-card)}
-        [card
-         (merge {:style {:flex 1}
-                 :gap   10}
-                bottom-card)
-         child-2]]]]]))
-
-(defn view
-  [props child-1 child-2]
-  [:f> f-view props child-1 child-2])
+  [{:keys [container-style top-card bottom-card]} child-1 child-2]
+  [rn/view
+   {:style (merge container-style style/outer-container)}
+   [blur/view
+    {:blur-type   :dark
+     :blur-amount 10
+     :style       {:flex                    1
+                   :border-top-left-radius  20
+                   :border-top-right-radius 20}}]
+   [rn/view
+    {:style {:flex             1
+             :background-color :transparent
+             :position         :absolute
+             :top              0
+             :left             0
+             :right            0
+             :bottom           0}}
+    [card
+     (merge {:gap   4
+             :top?  true
+             :style style/top-card}
+            top-card) child-1]
+    [card
+     (merge {:style style/bottom-card
+             :gap   20}
+            bottom-card) child-2]]])
@@ -7,12 +7,8 @@
    [button/button
     (merge
      opts
-      {:after                   (if selected :i/chevron-top :i/chevron-down)
-       :icon-size               12
-       :icon-container-size     14
-       :icon-container-rounded? true
-       :override-after-margins  {:left  7
-                                 :right 9}
+      {:after                   (if selected :i/pullup :i/dropdown)
+       :icon-secondary-no-color true
       :pressed                 selected
       :on-press                #(when on-change (on-change selected))})
     children]))
@@ -3,10 +3,9 @@
            [quo2.components.empty-state.empty-state.styles :as styles]
            [quo2.components.markdown.text :as text]
            [react-native.core :as rn]
-            [react-native.fast-image :as fast-image]
-            [quo2.theme :as theme]))
+            [react-native.fast-image :as fast-image]))

-(defn- empty-state-internal
+(defn empty-state
  [{:keys        [customization-color image title description blur?]
    upper-button :upper-button
    lower-button :lower-button
@@ -33,18 +32,19 @@
               upper-button-on-press :on-press} upper-button]
     [rn/view {:style styles/button-container}
      [button/button
-       {:type                      :primary
-        :size                      32
-        :override-background-color (styles/upper-button-color customization-color)
-        :on-press                  upper-button-on-press}
+       (cond-> {:type                      :primary
+                :size                      32
+                :override-background-color (styles/upper-button-color customization-color)
+                :on-press                  upper-button-on-press}
+         blur? (assoc :override-theme :dark))
       upper-button-text]
+
      (when-let [{lower-button-text     :text
                  lower-button-on-press :on-press} lower-button]
        [button/button
-         {:style    {:margin-top 12}
-          :size     32
-          :type     :blur-bg
-          :on-press lower-button-on-press}
+         (cond-> {:style    {:margin-top 12}
+                  :size     32
+                  :type     :blur-bg
+                  :on-press lower-button-on-press}
+           blur? (assoc :override-theme :dark))
         lower-button-text])])])
-
-(def empty-state (theme/with-theme empty-state-internal))
@@ -37,6 +37,7 @@
    [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
@@ -49,5 +50,6 @@
    [title-input/title-input
     (merge title-input-props
            {:blur?               true
+             :override-theme      :dark
             :placeholder         placeholder
             :customization-color customization-color})]]])
@@ -3,50 +3,50 @@
            [react-native.platform :as platform]))

 (defn get-focused-placeholder-color
-  [blur? theme]
+  [blur? override-theme]
  (if blur?
-    (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-20 theme)
-    (colors/theme-colors colors/neutral-30 colors/neutral-60 theme))
+    (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-20 override-theme)
+    (colors/theme-colors colors/neutral-30 colors/neutral-60 override-theme))
 )

 (defn get-placeholder-color
-  [blur? theme]
+  [blur? override-theme]
  (if blur?
-    (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-30 theme)
-    (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)))
+    (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-30 override-theme)
+    (colors/theme-colors colors/neutral-40 colors/neutral-50 override-theme)))

 (defn- get-disabled-color
-  [blur? theme]
+  [blur? override-theme]
  (if blur?
    (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-30)
-    (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)))
+    (colors/theme-colors colors/neutral-40 colors/neutral-50 override-theme)))

 (defn- get-char-count-color
-  [blur? theme]
+  [blur? override-theme]
  (if blur?
    (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40)
-    (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)))
+    (colors/theme-colors colors/neutral-40 colors/neutral-50 override-theme)))

 (defn get-selection-color
-  [customization-color blur? theme]
+  [customization-color blur? override-theme]
  (colors/alpha (if blur?
-                  (colors/theme-colors colors/neutral-100 colors/white theme)
+                  (colors/theme-colors colors/neutral-100 colors/white override-theme)
                  (colors/custom-color customization-color
-                                       (if (or (= :dark theme) colors/dark?) 60 50)))
+                                       (if (or (= :dark override-theme) colors/dark?) 60 50)))
                (if platform/ios? 1 0.2)))

 (def text-input-container {:flex 1})

 (defn title-text
-  [disabled? blur? theme]
+  [disabled? blur? override-theme]
  {:text-align-vertical :bottom
   :color               (if disabled?
-                          (get-disabled-color blur? theme)
-                          (colors/theme-colors colors/neutral-100 colors/white theme))})
+                          (get-disabled-color blur? override-theme)
+                          (colors/theme-colors colors/neutral-100 colors/white override-theme))})

 (defn char-count
-  [blur? theme]
-  {:color (get-char-count-color blur? theme)})
+  [blur? override-theme]
+  {:color (get-char-count-color blur? override-theme)})

 (def container
  {:flex-direction  :row
@@ -12,14 +12,14 @@
    (str 0 value)
    value))

-(defn- title-input-internal
+(defn title-input
  [{:keys [blur?
           on-change-text
           auto-focus
           placeholder
           max-length
           default-value
-           theme]
+           override-theme]
    :or   {max-length    0
           auto-focus    false
           default-value ""}}]
@@ -38,10 +38,10 @@
          (text/text-style
           {:size   :heading-2
            :weight :semi-bold
-            :style  (style/title-text disabled? blur? theme)})
+            :style  (style/title-text disabled? blur? override-theme)})
          :default-value default-value
          :accessibility-label :profile-title-input
-          :keyboard-appearance (theme/theme-value :light :dark theme)
+          :keyboard-appearance (theme/theme-value :light :dark override-theme)
          :on-focus #(swap! focused? (constantly true))
          :on-blur #(swap! focused? (constantly false))
          :auto-focus auto-focus
@@ -50,24 +50,22 @@
          :editable (not disabled?)
          :max-length max-length
          :placeholder placeholder
-          :selection-color (style/get-selection-color customization-color blur? theme)
+          :selection-color (style/get-selection-color customization-color blur? override-theme)
          :placeholder-text-color (if @focused?
-                                    (style/get-focused-placeholder-color blur? theme)
-                                    (style/get-placeholder-color blur? theme))}]]
+                                    (style/get-focused-placeholder-color blur? override-theme)
+                                    (style/get-placeholder-color blur? override-theme))}]]
       [rn/view
        {:style style/counter-container}
        [text/text
         [text/text
-          {:style (style/char-count blur? theme)
+          {:style (style/char-count blur? override-theme)
           :size  :paragraph-2}
          (pad-0
           (str
            (count @value)))]
         [text/text
-          {:style (style/char-count blur? theme)
+          {:style (style/char-count blur? override-theme)
           :size  :paragraph-2}
          (str "/"
               (pad-0
                (str max-length)))]]]])))
-
-(def title-input (theme/with-theme title-input-internal))
@@ -1,11 +1,12 @@
 (ns quo2.components.list-items.channel
  (:require [quo2.components.avatars.channel-avatar :as channel-avatar]
-            [quo2.components.common.unread-grey-dot.view :refer [unread-grey-dot]]
            [quo2.components.counter.counter :as quo2.counter]
            [quo2.components.icon :as quo2.icons]
            [quo2.components.markdown.text :as quo2.text]
            [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]))
+            [quo2.theme :as theme]
+            [react-native.core :as rn]
+            [quo2.components.common.unread-grey-dot.view :refer [unread-grey-dot]]))

 (def ^:private custom-props
  [:name :locked? :mentions-count :unread-messages?
@@ -20,20 +21,22 @@
        name-text      (:name props)]
    [rn/touchable-opacity standard-props
     [rn/view
-      {:style (cond-> {:height          48
-                       :border-radius   12
-                       :flex-direction  :row
-                       :justify-content :space-between
-                       :align-items     :center
-                       :width           "100%"
-                       :padding-left    12
-                       :padding-right   12}
-                is-active-channel? (assoc :background-color
-                                          (colors/theme-alpha channel-color 0.05 0.05)))}
+      {:style (merge {:height          48
+                      :display         :flex
+                      :border-radius   12
+                      :flex-direction  :row
+                      :justify-content :space-between
+                      :align-items     :center
+                      :width           "100%"
+                      :padding-left    12
+                      :padding-right   12}
+                     (when is-active-channel?
+                       {:background-color (colors/theme-alpha channel-color 0.05 0.05)}))}
      [rn/view
-       {:style               {:flex-direction  :row
-                              :justify-content :flex-start
-                              :align-items     :center}
+       {:display             :flex
+        :flex-direction      :row
+        :justify-content     :flex-start
+        :align-items         :center
        :accessible          true
        :accessibility-label :chat-name-text}
       [channel-avatar/channel-avatar
@@ -42,25 +45,28 @@
         :emoji-background-color (colors/theme-alpha channel-color 0.1 0.1)
         :emoji                  emoji}]
       [quo2.text/text
-        {:style  (cond-> {:margin-left 12}
-                   (and (not locked?) muted?)
-                   (assoc :color (colors/theme-colors colors/neutral-40 colors/neutral-60)))
+        {:style  (merge {:margin-left 12}
+                        (when (and (not locked?) muted?)
+                          {:color (if (theme/dark?) colors/neutral-60 colors/neutral-40)}))
         :weight :medium
-         :size   :paragraph-1}
-        (str "# " name-text)]]
-      (when-not locked?
-        [rn/view {:style {:height 20 :justify-content :center}}
-         (cond
-           muted?
-           [quo2.icons/icon :i/muted
-            {:size            20
-             :color           colors/neutral-40
-             :container-style {:margin-right 1 :margin-top 2}}]
-
-           (pos? (int mentions-count))
-           [rn/view {:style {:margin-right 2 :margin-top 2}}
-            [quo2.counter/counter {:override-bg-color channel-color}
-             mentions-count]]
-
-           unread-messages?
-           [unread-grey-dot :unviewed-messages-public])])]]))
+         :size   :paragraph-1} (str "# " name-text)]]
+      [rn/view
+       {:style {:height          20
+                :justify-content :center}}
+       (when (and (not locked?)
+                  muted?)
+         [quo2.icons/icon :i/muted
+          {:size  20
+           :color colors/neutral-40}])
+       (when (and (not locked?)
+                  (not muted?)
+                  (pos? (int mentions-count)))
+         [rn/view
+          {:style {:margin-right 2
+                   :margin-top   2}}
+          [quo2.counter/counter {:override-bg-color channel-color} mentions-count]])
+       (when (and (not locked?)
+                  (not muted?)
+                  (not (pos? (int mentions-count)))
+                  unread-messages?)
+         [unread-grey-dot :unviewed-messages-public])]]]))
@@ -1,95 +0,0 @@
-(ns quo2.components.loaders.skeleton.constants)
-
-(def ^:const layout-dimensions
-  {:messages      {:height      56
-                   :padding-top 12}
-   :list-items    {:height      56
-                   :padding-top 12}
-   :notifications {:height      90
-                   :padding-top 8}})
-
-(def ^:const content-dimensions
-  {:messages      {0 {:author  {:width         112
-                                :height        8
-                                :margin-bottom 8}
-                      :message {:width         144
-                                :height        16
-                                :margin-bottom 0}}
-                   1 {:author  {:width         96
-                                :height        8
-                                :margin-bottom 8}
-                      :message {:width         212
-                                :height        16
-                                :margin-bottom 0}}
-                   2 {:author  {:width         80
-                                :height        8
-                                :margin-bottom 8}
-                      :message {:width         249
-                                :height        16
-                                :margin-bottom 0}}
-                   3 {:author  {:width         124
-                                :height        8
-                                :margin-bottom 8}
-                      :message {:width         156
-                                :height        16
-                                :margin-bottom 0}}}
-   :list-items    {0 {:author  {:width         112
-                                :height        8
-                                :margin-bottom 0}
-                      :message {:width         144
-                                :height        16
-                                :margin-bottom 8}}
-                   1 {:author  {:width         96
-                                :height        8
-                                :margin-bottom 0}
-                      :message {:width         212
-                                :height        16
-                                :margin-bottom 8}}
-                   2 {:author  {:width         80
-                                :height        8
-                                :margin-bottom 0}
-                      :message {:width         249
-                                :height        16
-                                :margin-bottom 8}}
-                   3 {:author  {:width         124
-                                :height        8
-                                :margin-bottom 0}
-                      :message {:width         156
-                                :height        16
-                                :margin-bottom 8}}}
-   :notifications {0 {:author   {:width         109
-                                 :height        8
-                                 :margin-bottom 8}
-                      :message  {:width         167
-                                 :height        16
-                                 :margin-bottom 8}
-                      :message2 {:width         242
-                                 :height        30
-                                 :margin-bottom 0}}
-                   1 {:author   {:width         165
-                                 :height        8
-                                 :margin-bottom 8}
-                      :message  {:width         112
-                                 :height        16
-                                 :margin-bottom 8}
-                      :message2 {:width         294
-                                 :height        30
-                                 :margin-bottom 0}}
-                   2 {:author   {:width         136
-                                 :height        8
-                                 :margin-bottom 8}
-                      :message  {:width         178
-                                 :height        16
-                                 :margin-bottom 8}
-                      :message2 {:width         178
-                                 :height        30
-                                 :margin-bottom 0}}
-                   3 {:author   {:width         136
-                                 :height        8
-                                 :margin-bottom 8}
-                      :message  {:width         166
-                                 :height        16
-                                 :margin-bottom 8}
-                      :message2 {:width         256
-                                 :height        30
-                                 :margin-bottom 0}}}})
@@ -1,29 +0,0 @@
-(ns quo2.components.loaders.skeleton.style
-  (:require [quo2.components.loaders.skeleton.constants :as constants]))
-
-(defn container
-  [content]
-  {:flex-direction :row
-   :padding        12
-   :padding-top    (get-in constants/layout-dimensions [content :padding-top])
-   :height         (get-in constants/layout-dimensions [content :height])})
-
-(defn avatar
-  [color]
-  {:height           32
-   :width            32
-   :border-radius    16
-   :background-color color})
-
-(def content-container
-  {:padding-left 8})
-
-(defn content-view
-  [{:keys [type index content color]}]
-  (let [{:keys [width height margin-bottom]}
-        (get-in constants/content-dimensions [content index type])]
-    {:height           height
-     :width            width
-     :border-radius    6
-     :background-color color
-     :margin-bottom    margin-bottom}))
@@ -1,46 +0,0 @@
-(ns quo2.components.loaders.skeleton.view
-  (:require [quo2.theme :as theme]
-            [react-native.core :as rn]
-            [quo2.foundations.colors :as colors]
-            [quo2.components.loaders.skeleton.style :as style]
-            [quo2.components.loaders.skeleton.constants :as constants]))
-
-(defn- skeleton-item
-  [index content color]
-  [rn/view {:style (style/container content)}
-   [rn/view {:style (style/avatar color)}]
-   [rn/view {:style style/content-container}
-    [rn/view
-     {:style (style/content-view
-              {:type    (if (= content :list-items) :message :author)
-               :index   index
-               :content content
-               :color   color})}]
-    [rn/view
-     {:style (style/content-view
-              {:type    (if (= content :list-items) :author :message)
-               :index   index
-               :content content
-               :color   color})}]
-    (when (= content :notifications)
-      [rn/view
-       {:style (style/content-view {:type    :message2
-                                    :index   index
-                                    :content content
-                                    :color   color})}])]])
-
-(defn- internal-view
-  [{:keys [content theme blur? parent-height]}]
-  (let [number-of-skeletons (int (Math/floor (/ parent-height
-                                                (get-in constants/layout-dimensions [content :height]))))
-        color               (cond
-                              blur?           colors/white-opa-5
-                              (= theme :dark) colors/neutral-90
-                              :else           colors/neutral-5)]
-    [rn/view {:style {:padding 8}}
-     (doall
-      (for [index (range number-of-skeletons)]
-        ^{:key index}
-        [skeleton-item (mod index 4) content color]))]))
-
-(def view (theme/with-theme internal-view))
@@ -1,38 +0,0 @@
-(ns quo2.components.markdown.list.component-spec
-  (:require [quo2.components.markdown.list.view :as list]
-            [test-helpers.component :as h]))
-
-(h/describe "tests for markdown/list component"
-  (h/test "renders component with title"
-    (h/render [list/view {:title "test title"}])
-    (h/is-truthy (h/get-by-text "test title")))
-
-  (h/test "renders component with description"
-    (h/render [list/view
-               {:title       "test title"
-                :description "test description"}])
-    (h/is-truthy (h/get-by-text "test description")))
-
-  (h/test "renders component with title and description"
-    (h/render [list/view
-               {:title       "test title"
-                :description "test description"}])
-    (h/is-truthy (h/get-by-text "test title"))
-    (h/is-truthy (h/get-by-text "test description")))
-
-  (h/test "renders step component when step-number is valid and type is step"
-    (h/render [list/view
-               {:type        :step
-                :step-number 1}])
-    (h/is-truthy (h/get-by-label-text :step-counter)))
-
-  (h/test "renders decription with a context tag component and description after the tag"
-    (h/render [list/view
-               {:step-number           1
-                :description           "Lorem ipsum "
-                :tag-name              "dolor"
-                :description-after-tag "text after tag"}])
-    (h/is-truthy (h/get-by-text "Lorem ipsum"))
-    (h/is-truthy (h/get-by-label-text :user-avatar))
-    (h/is-truthy (h/get-by-text "dolor"))
-    (h/is-truthy (h/get-by-text "text after tag"))))
@@ -1,15 +0,0 @@
-(ns quo2.components.markdown.list.style)
-
-(defn container
-  [container-style]
-  (merge container-style
-         {:flex-direction :row
-          :flex           1
-          :align-items    :flex-start}))
-
-(def index
-  {:margin-left 5})
-
-(def text-container
-  {:margin-left 8
-   :flex        1})
@@ -1,65 +0,0 @@
-(ns quo2.components.markdown.list.view
-  (:require [react-native.core :as rn]
-            [quo2.components.markdown.text :as text]
-            [quo2.components.counter.step.view :as step]
-            [quo2.components.markdown.list.style :as style]
-            [quo2.components.icon :as icon]
-            [quo2.foundations.colors :as colors]
-            [quo2.theme :as theme]
-            [quo2.components.tags.context-tag.view :as context-tag]))
-
-(defn get-colors
-  [theme blur?]
-  (cond (and blur? (= theme :dark)) colors/white-opa-40
-        (= theme :dark)             colors/neutral-50
-        :else                       colors/neutral-40))
-
-(defn description-text
-  [{:keys [description tag-name tag-picture description-after-tag blur?]}]
-  (if-not tag-name
-    [text/text
-     {:accessibility-label :list-item-description
-      :size                :paragraph-2}
-     description]
-    [rn/view {:style {:flex-direction :row :align-items :center}}
-     [text/text
-      {:accessibility-label :list-item-description
-       :size                :paragraph-2}
-      description]
-     [rn/view {:style {:margin-left 4}}
-      [context-tag/context-tag {:blur? blur?} tag-picture tag-name]]
-     [text/text
-      {:style               {:margin-left 4}
-       :accessibility-label :list-item-description-after-tag
-       :size                :paragraph-2}
-      description-after-tag]]))
-
-(defn- internal-view
-  [{:keys [theme title description tag-picture tag-name description-after-tag step-number
-           customization-color type blur? container-style]
-    :or   {type :bullet}}]
-  [rn/view {:style (style/container container-style)}
-   [rn/view {:style style/index}
-    (if (= type :step)
-      [step/step
-       {:in-blur-view?       blur?
-        :customization-color customization-color
-        :type                (if customization-color :complete :neutral)} step-number]
-      [icon/icon :i/bullet {:color (get-colors theme blur?)}])]
-   [rn/view {:style style/text-container}
-    (when title
-      [text/text
-       {:accessibility-label :list-item-title
-        :weight              :semi-bold
-        :size                :paragraph-2}
-       title])
-    (when description
-      [rn/view (when title {:style {:margin-top 0}})
-       [description-text
-        {:description           description
-         :tag-name              tag-name
-         :tag-picture           tag-picture
-         :description-after-tag description-after-tag
-         :blur?                 blur?}]])]])
-
-(def view (theme/with-theme internal-view))
@@ -5,8 +5,7 @@
            [quo2.components.icon :as icons]
            [quo2.components.markdown.text :as text]
            [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]
-            [quo2.theme :as theme]))
+            [react-native.core :as rn]))

 (def ^:private centrify-style
  {:display         :flex
@@ -31,7 +30,7 @@
           {:no-color true})))

 (defn left-section-view
-  [{:keys [on-press icon accessibility-label type icon-background-color]
+  [{:keys [on-press icon accessibility-label type icon-background-color icon-override-theme]
    :or   {type :grey}}
   put-middle-section-on-left?]
  [rn/view {:style (when put-middle-section-on-left? {:margin-right 5})}
@@ -41,6 +40,7 @@
     :type                      type
     :size                      32
     :accessibility-label       accessibility-label
+     :override-theme            icon-override-theme
     :override-background-color icon-background-color}
    icon]])

@@ -87,10 +87,10 @@

 (defn- mid-section-view
  [{:keys [horizontal-description? one-icon-align-left? type left-align?
-           main-text right-icon main-text-icon-color left-icon on-press avatar theme]
+           main-text right-icon main-text-icon-color left-icon on-press avatar]
    :as   props}]
-  (let [text-color           (colors/theme-colors colors/neutral-95 colors/neutral-5 theme)
-        text-secondary-color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
+  (let [text-color           (if (colors/dark?) colors/neutral-5 colors/neutral-95)
+        text-secondary-color (if (colors/dark?) colors/neutral-40 colors/neutral-50)
        component-instance   [mid-section-comp (assoc props :text-secondary-color text-secondary-color)]]
    [rn/touchable-opacity {:on-press on-press}
     [rn/view
@@ -152,7 +152,7 @@
                  :justify-content :flex-end)}
   (let [last-icon-index (-> right-section-buttons count dec)]
     (map-indexed (fn [index
-                       {:keys [icon on-press type style icon-background-color
+                       {:keys [icon on-press type style icon-override-theme icon-background-color
                               accessibility-label label]
                        :or   {type :grey}}]
                    ^{:key index}
@@ -168,11 +168,12 @@
                       :type                      type
                       :before                    (when label icon)
                       :size                      32
+                       :override-theme            icon-override-theme
                       :override-background-color icon-background-color}
                      (if label label icon)]])
                  right-section-buttons))])

-(defn- page-nav-internal
+(defn page-nav
  "[page-nav opts]
   opts
   { :one-icon-align-left?    true/false
@@ -197,26 +198,25 @@
     {:type                  button-type
      :on-press              event
      :icon                  icon
+      :icon-override-theme   :light/:dark
     }
     :right-section-buttons vector of
      {:type                  button-type
       :on-press              event
       :icon                  icon
+       :icon-override-theme   :light/:dark
      }
-      :theme :light or :dark
   }
  "
  [{:keys [container-style one-icon-align-left? horizontal-description?
           align-mid? page-nav-color page-nav-background-uri
           mid-section
           left-section
-           right-section-buttons
-           theme]}]
+           right-section-buttons]}]
  (let [put-middle-section-on-left? (or align-mid?
                                        (> (count right-section-buttons) 1))
        mid-section-props
        {:type                    (:type mid-section)
-         :theme                   theme
         :horizontal-description? horizontal-description?
         :description-img         (:description-img mid-section)
         :main-text               (:main-text mid-section)
@@ -258,5 +258,3 @@
          (not put-middle-section-on-left?)
          [mid-section-view mid-section-props]))]
     [right-section-view right-section-buttons]]))
-
-(def page-nav (theme/with-theme page-nav-internal))
@@ -21,7 +21,8 @@

 (defn toast-undo-action
  [duration on-press override-theme]
-  [toast-action-container {:on-press on-press :accessibility-label :toast-undo-action}
+  [toast-action-container
+   {:on-press on-press :accessibility-label :toast-undo-action}
   [rn/view {:style {:margin-right 5}}
    [count-down-circle/circle-timer {:duration duration}]]
   [text/text
@@ -30,17 +31,17 @@

 (defn- toast-container
  [{:keys [left title text right container-style override-theme]}]
-  [rn/view {:style (merge style/box-container container-style)}
+  [rn/view
+   {:style (merge style/box-container container-style)}
   [blur/view
    {:style         style/blur-container
     :blur-amount   13
     :blur-radius   10
     :blur-type     :transparent
     :overlay-color :transparent}]
-
-   [rn/view {:style (style/content-container override-theme)}
-    [rn/view {:style style/left-side-container}
-     left]
+   [rn/view
+    {:style (style/content-container override-theme)}
+    [rn/view {:style style/left-side-container} left]
    [rn/view {:style style/right-side-container}
     (when title
       [text/text
@@ -56,7 +57,7 @@
         :style               (style/text override-theme)
         :accessibility-label :toast-content}
        text])]
-    right]])
+    (when right right)]])

 (defn toast
  [{:keys [icon icon-color title text action undo-duration undo-on-press container-style
@@ -1,9 +1,7 @@
 (ns quo2.components.record-audio.record-audio.--tests--.record-audio-component-spec
  (:require [quo2.components.record-audio.record-audio.view :as record-audio]
            [react-native.audio-toolkit :as audio]
-            [test-helpers.component :as h]
-            [reagent.core :as reagent]
-            [utils.datetime :as datetime]))
+            [test-helpers.component :as h]))

 (h/describe "record audio component"
  (h/before-each
@@ -36,16 +34,12 @@
          (.toHaveBeenCalledTimes 1))))

  (h/test "record-audio on-reviewing-audio works"
-    (let [event    (js/jest.fn)
-          on-meter (reagent/atom nil)]
+    (let [event (js/jest.fn)]
      (h/render [record-audio/record-audio
                 {:on-reviewing-audio              event
                  :record-audio-permission-granted true}])
-      (with-redefs [audio/new-recorder           (fn [_ on-meter-fn _]
-                                                   (reset! on-meter on-meter-fn))
-                    audio/start-recording        (fn [_ on-start _]
-                                                   (on-start)
-                                                   (js/setInterval #(@on-meter) 100))
+      (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
@@ -54,30 +48,25 @@
                        :locationY  70
                        :timestamp  0
                        :identifier 0}})
-        (with-redefs [datetime/timestamp (fn [] (+ (.now js/Date) 1000))]
-          (h/advance-timers-by-time 100)
-          (h/fire-event
-           :on-responder-release
-           (h/get-by-test-id "record-audio")
-           {:nativeEvent {:locationX  70
-                          :locationY  70
-                          :timestamp  200
-                          :identifier 0}})
-          (h/advance-timers-by-time 250)
-          (-> (h/expect event)
-              (.toHaveBeenCalledTimes 1))))))
+        (h/advance-timers-by-time 500)
+        (h/fire-event
+         :on-responder-release
+         (h/get-by-test-id "record-audio")
+         {:nativeEvent {:locationX  70
+                        :locationY  70
+                        :timestamp  200
+                        :identifier 0}})
+        (h/advance-timers-by-time 250)
+        (-> (h/expect event)
+            (.toHaveBeenCalledTimes 1)))))

  (h/test "record-audio on-send works after reviewing audio"
-    (let [event    (js/jest.fn)
-          on-meter (reagent/atom nil)]
+    (let [event (js/jest.fn)]
      (h/render [record-audio/record-audio
                 {:on-send                         event
                  :record-audio-permission-granted true}])
-      (with-redefs [audio/new-recorder           (fn [_ on-meter-fn _]
-                                                   (reset! on-meter on-meter-fn))
-                    audio/start-recording        (fn [_ on-start _]
-                                                   (on-start)
-                                                   (js/setInterval #(@on-meter) 100))
+      (with-redefs [audio/start-recording        (fn [_ on-start _]
+                                                   (on-start))
                    audio/get-recorder-file-path (fn [] "audio-file-path")
                    audio/get-player-duration    (fn [] 5000)]
        (h/fire-event
@@ -87,57 +76,46 @@
                        :locationY  70
                        :timestamp  0
                        :identifier 0}})
-        (with-redefs [datetime/timestamp (fn [] (+ (.now js/Date) 1000))]
-          (h/advance-timers-by-time 100)
-          (h/fire-event
-           :on-responder-release
-           (h/get-by-test-id "record-audio")
-           {:nativeEvent {:locationX  70
-                          :locationY  70
-                          :timestamp  200
-                          :identifier 0}})
-          (h/fire-event
-           :on-start-should-set-responder
-           (h/get-by-test-id "record-audio")
-           {:nativeEvent {:locationX  70
-                          :locationY  70
-                          :timestamp  0
-                          :identifier 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
-                          :timestamp  200
-                          :identifier 0}})
-          (h/advance-timers-by-time 250)
-          (-> (js/expect event)
-              (.toHaveBeenCalledTimes 1))
-          (-> (js/expect event)
-              (.toHaveBeenCalledWith {:file-path "audio-file-path"
-                                      :duration  5000}))))))
+        (h/advance-timers-by-time 500)
+        (h/fire-event
+         :on-responder-release
+         (h/get-by-test-id "record-audio")
+         {:nativeEvent {:locationX  70
+                        :locationY  70
+                        :timestamp  200
+                        :identifier 0}})
+        (h/fire-event
+         :on-start-should-set-responder
+         (h/get-by-test-id "record-audio")
+         {:nativeEvent {:locationX  70
+                        :locationY  70
+                        :timestamp  0
+                        :identifier 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
+                        :timestamp  200
+                        :identifier 0}})
+        (h/advance-timers-by-time 250)
+        (-> (js/expect event)
+            (.toHaveBeenCalledTimes 1))
+        (-> (js/expect event)
+            (.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)
-          on-meter    (reagent/atom nil)
-          last-now-ms (atom nil)
-          duration-ms (atom nil)]
+    (let [event (js/jest.fn)]
      (h/render [record-audio/record-audio
                 {:on-send                         event
                  :record-audio-permission-granted true}])
-      (with-redefs [audio/new-recorder           (fn [_ on-meter-fn _]
-                                                   (reset! on-meter on-meter-fn))
-                    audio/start-recording        (fn [_ on-start _]
-                                                   (on-start)
-                                                   (js/setInterval #(@on-meter) 100))
+      (with-redefs [audio/start-recording        (fn [_ on-start _]
+                                                   (on-start))
                    audio/stop-recording         (fn [_ on-stop _]
                                                   (on-stop))
-                    audio/get-recorder-file-path (fn [] "audio-file-path")
-                    datetime/timestamp           (fn []
-                                                   (let [now-ms (.now js/Date)]
-                                                     (reset! last-now-ms now-ms)
-                                                     now-ms))]
+                    audio/get-recorder-file-path (fn [] "audio-file-path")]
        (h/fire-event
         :on-start-should-set-responder
         (h/get-by-test-id "record-audio")
@@ -145,46 +123,36 @@
                        :locationY  70
                        :timestamp  0
                        :identifier 0}})
-        (with-redefs [datetime/timestamp (fn []
-                                           (let [now-plus-ms  (+ (.now js/Date) 1000)
-                                                 time-diff-ms (- now-plus-ms @last-now-ms)]
-                                             (when-not @duration-ms
-                                               (reset! duration-ms time-diff-ms))
-                                             now-plus-ms))]
-          (h/advance-timers-by-time 100)
-          (h/fire-event
-           :on-responder-move
-           (h/get-by-test-id "record-audio")
-           {:nativeEvent {:locationX  80
-                          :locationY  -30
-                          :pageX      80
-                          :pageY      -30
-                          :identifier 0}})
-          (h/fire-event
-           :on-responder-release
-           (h/get-by-test-id "record-audio")
-           {:nativeEvent {:locationX  40
-                          :locationY  80
-                          :timestamp  200
-                          :identifier 0}})
-          (h/advance-timers-by-time 250)
-          (-> (js/expect event)
-              (.toHaveBeenCalledTimes 1))
-          (-> (js/expect event)
-              (.toHaveBeenCalledWith {:file-path "audio-file-path"
-                                      :duration  @duration-ms}))))))
+        (h/advance-timers-by-time 500)
+        (h/fire-event
+         :on-responder-move
+         (h/get-by-test-id "record-audio")
+         {:nativeEvent {:locationX  80
+                        :locationY  -30
+                        :pageX      80
+                        :pageY      -30
+                        :identifier 0}})
+        (h/fire-event
+         :on-responder-release
+         (h/get-by-test-id "record-audio")
+         {:nativeEvent {:locationX  40
+                        :locationY  80
+                        :timestamp  200
+                        :identifier 0}})
+        (h/advance-timers-by-time 250)
+        (-> (js/expect event)
+            (.toHaveBeenCalledTimes 1))
+        (-> (js/expect event)
+            (.toHaveBeenCalledWith {:file-path "audio-file-path"
+                                    :duration  500})))))

  (h/test "record-audio on-cancel works after reviewing audio"
-    (let [event    (js/jest.fn)
-          on-meter (reagent/atom nil)]
+    (let [event (js/jest.fn)]
      (h/render [record-audio/record-audio
                 {:on-cancel                       event
                  :record-audio-permission-granted true}])
-      (with-redefs [audio/new-recorder    (fn [_ on-meter-fn _]
-                                            (reset! on-meter on-meter-fn))
-                    audio/start-recording (fn [_ on-start _]
-                                            (on-start)
-                                            (js/setInterval #(@on-meter) 100))]
+      (with-redefs [audio/start-recording (fn [_ on-start _]
+                                            (on-start))]
        (h/fire-event
         :on-start-should-set-responder
         (h/get-by-test-id "record-audio")
@@ -192,37 +160,32 @@
                        :locationY  70
                        :timestamp  0
                        :identifier 0}})
-        (with-redefs [datetime/timestamp (fn [] (+ (.now js/Date) 1000))]
-          (h/advance-timers-by-time 500)
-          (h/fire-event
-           :on-responder-release
-           (h/get-by-test-id "record-audio")
-           {:nativeEvent {:locationX  70
-                          :locationY  70
-                          :timestamp  200
-                          :identifier 0}})
-          (h/fire-event
-           :on-responder-release
-           (h/get-by-test-id "record-audio")
-           {:nativeEvent {:locationX  40
-                          :locationY  80
-                          :timestamp  200
-                          :identifier 0}})
-          (h/advance-timers-by-time 250)
-          (-> (js/expect event)
-              (.toHaveBeenCalledTimes 1))))))
+        (h/advance-timers-by-time 500)
+        (h/fire-event
+         :on-responder-release
+         (h/get-by-test-id "record-audio")
+         {:nativeEvent {:locationX  70
+                        :locationY  70
+                        :timestamp  200
+                        :identifier 0}})
+        (h/fire-event
+         :on-responder-release
+         (h/get-by-test-id "record-audio")
+         {:nativeEvent {:locationX  40
+                        :locationY  80
+                        :timestamp  200
+                        :identifier 0}})
+        (h/advance-timers-by-time 250)
+        (-> (js/expect event)
+            (.toHaveBeenCalledTimes 1)))))

-  (h/test "record-audio on-cancel works after sliding to the cancel button"
-    (let [event    (js/jest.fn)
-          on-meter (reagent/atom nil)]
+  (h/test "cord-audio on-cancel works after sliding to the cancel button"
+    (let [event (js/jest.fn)]
      (h/render [record-audio/record-audio
                 {:on-cancel                       event
                  :record-audio-permission-granted true}])
-      (with-redefs [audio/new-recorder    (fn [_ on-meter-fn _]
-                                            (reset! on-meter on-meter-fn))
-                    audio/start-recording (fn [_ on-start _]
-                                            (on-start)
-                                            (js/setInterval #(@on-meter) 100))
+      (with-redefs [audio/start-recording (fn [_ on-start _]
+                                            (on-start))
                    audio/stop-recording  (fn [_ on-stop _]
                                            (on-stop))]
        (h/fire-event
@@ -232,25 +195,22 @@
                        :locationY  70
                        :timestamp  0
                        :identifier 0}})
-        (with-redefs [datetime/timestamp (fn [] (+ (.now js/Date) 1000))]
-          (h/advance-timers-by-time 500)
-          (h/fire-event
-           :on-responder-move
-           (h/get-by-test-id "record-audio")
-           {:nativeEvent {:locationX  -30
-                          :locationY  80
-                          :pageX      -30
-                          :pageY      80
-                          :identifier 0}})
-          (h/fire-event
-           :on-responder-release
-           (h/get-by-test-id "record-audio")
-           {:nativeEvent {:locationX  -10
-                          :locationY  70
-                          :timestamp  200
-                          :identifier 0}})
-          (h/advance-timers-by-time 250)
-          (-> (js/expect event)
-              (.toHaveBeenCalledTimes 1)))))))
-
-
+        (h/advance-timers-by-time 500)
+        (h/fire-event
+         :on-responder-move
+         (h/get-by-test-id "record-audio")
+         {:nativeEvent {:locationX  -30
+                        :locationY  80
+                        :pageX      -30
+                        :pageY      80
+                        :identifier 0}})
+        (h/fire-event
+         :on-responder-release
+         (h/get-by-test-id "record-audio")
+         {:nativeEvent {:locationX  -10
+                        :locationY  70
+                        :timestamp  200
+                        :identifier 0}})
+        (h/advance-timers-by-time 250)
+        (-> (js/expect event)
+            (.toHaveBeenCalledTimes 1))))))
@@ -29,7 +29,7 @@

 (defn f-record-button-big
  [recording? ready-to-send? ready-to-lock? ready-to-delete? record-button-is-animating?
-   record-button-at-initial-position? locked? reviewing-audio? recording-length-ms
+   record-button-at-initial-position? locked? reviewing-audio? recording-timer recording-length-ms
   clear-timeout touch-active? recorder-ref reload-recorder-fn idle? on-send on-cancel]
  (let [scale (reanimated/use-shared-value 1)
        opacity (reanimated/use-shared-value 0)
@@ -82,6 +82,7 @@
               (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: " %))))
@@ -15,13 +15,11 @@
            [quo2.components.record-audio.record-audio.buttons.lock-button :as lock-button]
            [quo2.components.record-audio.record-audio.buttons.delete-button :as delete-button]
            [quo2.components.record-audio.record-audio.buttons.record-button :as record-button]
-            [clojure.string :as string]
-            [utils.datetime :as datetime]
-            [react-native.platform :as platform]))
+            [clojure.string :as string]))

-(def ^:private min-audio-duration-ms 1000)
-(def ^:private max-audio-duration-ms (if platform/ios? 120800 120500))
-(def ^:private metering-interval 25)
+(def ^:private min-audio-duration-ms 500)
+(def ^:private max-audio-duration-ms 120000)
+(def ^:private metering-interval 100)
 (def ^:private base-filename "am")
 (def ^:private default-format ".aac")

@@ -110,7 +108,7 @@
      time-str]]))

 (defn- f-play-button
-  [playing-audio? player-ref playing-timer audio-current-time-ms seeking-audio? max-duration-ms]
+  [playing-audio? player-ref playing-timer audio-current-time-ms seeking-audio?]
  (let [on-play  (fn []
                   (reset! playing-audio? true)
                   (reset! playing-timer
@@ -119,22 +117,8 @@
                        (let [current-time (audio/get-player-current-time @player-ref)
                              player-state (audio/get-state @player-ref)
                              playing?     (= player-state audio/PLAYING)]
-                          (when (and playing?
-                                     (not @seeking-audio?)
-                                     (> current-time 0)
-                                     (< current-time max-duration-ms))
-                            (reset! audio-current-time-ms current-time))
-                          (when (>= current-time max-duration-ms)
-                            (audio/stop-playing
-                             @player-ref
-                             (fn []
-                               (reset! playing-audio? false)
-                               (when @playing-timer
-                                 (js/clearInterval @playing-timer)
-                                 (reset! playing-timer nil)
-                                 (reset! audio-current-time-ms 0)
-                                 (reset! seeking-audio? false)))
-                             #(log/error "[record-audio] stop player - error: " %)))))
+                          (when (and playing? (not @seeking-audio?) (> current-time 0))
+                            (reset! audio-current-time-ms current-time))))
                      100)))
        on-pause (fn []
                   (reset! playing-audio? false)
@@ -159,7 +143,7 @@
  [{:keys [on-init on-start-recording on-send on-cancel on-reviewing-audio
           record-audio-permission-granted
           on-request-record-audio-permission on-check-audio-permissions
-           audio-file on-lock max-duration-ms]}]
+           audio-file on-lock]}]
  [:f>
   ;; TODO we need to refactor this, and use :f> with defined function, currenly state is reseted each
   ;; time parent component
@@ -176,7 +160,6 @@
           audio-current-time-ms (reagent/atom 0)
           seeking-audio? (reagent/atom false)
           force-show-controls? (reagent/atom (some? audio-file))
-           recording-start-ms (atom (datetime/timestamp))
           clear-timeout (atom nil)
           record-button-at-initial-position? (atom true)
           record-button-is-animating? (atom false)
@@ -184,6 +167,7 @@
           recorder-ref (atom nil)
           player-ref (atom nil)
           touch-active? (atom false)
+           recording-timer (atom nil)
           playing-timer (atom nil)
           output-file (atom audio-file)
           reached-max-duration? (atom false)
@@ -194,7 +178,7 @@
           rec-options
           (merge
            audio/default-recorder-options
-            {:filename         (str base-filename (datetime/timestamp) default-format)
+            {:filename         (str base-filename (.now js/Date) default-format)
             :meteringInterval metering-interval})
           destroy-player
           (fn []
@@ -225,44 +209,13 @@
           (fn []
             (audio/destroy-recorder @recorder-ref)
             (reset! recorder-ref nil))
-           recorder-on-meter
-           (fn []
-             (when @recording-start-ms
-               (let [now-ms             (datetime/timestamp)
-                     recording-duration (- now-ms
-                                           @recording-start-ms)]
-                 (reset! recording-length-ms recording-duration)
-                 (when (>= recording-duration max-audio-duration-ms)
-                   (reset! reached-max-duration? (not @locked?))
-                   (reset! reviewing-audio? true)
-                   (reset! idle? false)
-                   (reset! locked? false)
-                   (reset! recording? false)
-                   (reset! ready-to-lock? false)
-                   (reset! ready-to-send? false)
-                   (reset! ready-to-delete? false)
-                   (audio/stop-recording
-                    @recorder-ref
-                    (fn []
-                      (reset! output-file (audio/get-recorder-file-path
-                                           @recorder-ref))
-                      (reload-player nil)
-                      (log/debug "[record-audio] stop recording - success"))
-                    #(log/error "[record-audio] stop recording - error: " %))
-                   (js/setTimeout #(reset! idle? false) 1000)
-                   (reset! recording-length-ms 0)
-                   (reset! recording-start-ms nil)
-                   (when on-reviewing-audio
-                     (on-reviewing-audio (audio/get-recorder-file-path
-                                          @recorder-ref))))
-                 (log/debug "[record-audio] new recorder - on meter"))))
           reload-recorder
           (fn []
             (when @recorder-ref
               (destroy-recorder))
             (reset! recorder-ref (audio/new-recorder
                                   rec-options
-                                   recorder-on-meter
+                                   #(log/debug "[record-audio] new recorder - on meter")
                                   #(log/debug "[record-audio] new recorder - on ended"))))
           reset-recorder
           (fn []
@@ -285,6 +238,9 @@
             (when @clear-timeout
               (js/clearTimeout @clear-timeout)
               (reset! clear-timeout nil))
+             (when @recording-timer
+               (js/clearInterval @recording-timer)
+               (reset! recording-timer nil))
             (when @playing-timer
               (js/clearInterval @playing-timer)
               (reset! playing-timer nil))
@@ -302,7 +258,7 @@
                                             record-button-area)
                     new-recorder           (audio/new-recorder
                                             rec-options
-                                             recorder-on-meter
+                                             #(log/debug "[record-audio] new recorder - on meter")
                                             #(log/debug "[record-audio] new recorder - on ended"))]
                 (reset! touch-timestamp (oops/oget e "nativeEvent.timestamp"))
                 (reset! touch-identifier (oops/oget e "nativeEvent.identifier"))
@@ -313,13 +269,44 @@
                         (reset! recording? pressed-record-button?))
                       (when pressed-record-button?
                         (reset! playing-audio? false)
+                         (when @recording-timer
+                           (js/clearInterval @recording-timer))
                         (reset! output-file nil)
                         (reset! recorder-ref new-recorder)
                         (audio/start-recording
                          new-recorder
                          (fn []
-                            (reset! recording-start-ms (datetime/timestamp))
                            (reset! audio-current-time-ms 0)
+                            (reset! recording-timer
+                              (js/setInterval
+                               (fn []
+                                 (if (< @recording-length-ms max-audio-duration-ms)
+                                   (reset! recording-length-ms
+                                     (+ @recording-length-ms metering-interval))
+                                   (do
+                                     (reset! reached-max-duration? (not @locked?))
+                                     (reset! reviewing-audio? true)
+                                     (reset! idle? false)
+                                     (reset! locked? false)
+                                     (reset! recording? false)
+                                     (reset! ready-to-lock? false)
+                                     (reset! ready-to-send? false)
+                                     (reset! ready-to-delete? false)
+                                     (audio/stop-recording
+                                      new-recorder
+                                      (fn []
+                                        (reset! output-file (audio/get-recorder-file-path
+                                                             new-recorder))
+                                        (reload-player nil)
+                                        (log/debug "[record-audio] stop recording - success"))
+                                      #(log/error "[record-audio] stop recording - error: " %))
+                                     (js/setTimeout #(reset! idle? false) 1000)
+                                     (js/clearInterval @recording-timer)
+                                     (reset! recording-length-ms 0)
+                                     (when on-reviewing-audio
+                                       (on-reviewing-audio (audio/get-recorder-file-path
+                                                            new-recorder))))))
+                               metering-interval))
                            (log/debug "[record-audio] start recording - success"))
                          #(log/error "[record-audio] start recording - error: " %))
                         (when on-start-recording
@@ -437,8 +424,7 @@
                     (reset! force-show-controls? false)
                     (when on-send
                       (on-send {:file-path @output-file
-                                 :duration  (min max-audio-duration-ms
-                                                 (int (audio/get-player-duration @player-ref)))}))
+                                 :duration  (int (audio/get-player-duration @player-ref))}))
                     (when @player-ref
                       (audio/stop-playing
                        @player-ref
@@ -489,8 +475,8 @@
                           (log/debug "[record-audio] stop recording - success"))
                         #(log/error "[record-audio] stop recording - error: " %))
                        (js/setTimeout #(reset! idle? false) 1000)
+                        (js/clearInterval @recording-timer)
                        (reset! recording-length-ms 0)
-                        (reset! recording-start-ms nil)
                        (reset! disabled? false))
                      (if (> touch-timestamp-diff min-touch-duration) 0 250)))
                   (and (not @locked?) (not @reviewing-audio?) (not @record-button-is-animating?))
@@ -515,8 +501,8 @@
                           (reset! ready-to-lock? false)
                           (reset! idle? true)
                           (js/setTimeout #(reset! idle? false) 1000)
+                           (js/clearInterval @recording-timer)
                           (reset! recording-length-ms 0)
-                           (reset! recording-start-ms nil)
                           (reset! disabled? false)
                           (log/debug "[record-audio] stop recording - success"))
                         #(log/error "[record-audio] stop recording - error: " %)))
@@ -546,12 +532,11 @@
          (when @reviewing-audio?
            [:<>
             [:f> f-play-button playing-audio? player-ref playing-timer audio-current-time-ms
-              seeking-audio? max-duration-ms]
+              seeking-audio?]
             [:f> soundtrack/f-soundtrack
              {:audio-current-time-ms audio-current-time-ms
               :player-ref            @player-ref
-               :seeking-audio?        seeking-audio?
-               :max-audio-duration-ms max-duration-ms}]])
+               :seeking-audio?        seeking-audio?}]])
          (when (or @recording? @reviewing-audio?)
            [:f> f-time-counter @recording? @recording-length-ms @ready-to-delete? @reviewing-audio?
             @audio-current-time-ms])
@@ -582,6 +567,7 @@
            record-button-at-initial-position?
            locked?
            reviewing-audio?
+            recording-timer
            recording-length-ms
            clear-timeout
            touch-active?
@@ -10,8 +10,8 @@
 (def ^:private thumb-dark (js/require "../resources/images/icons2/12x12/thumb-dark.png"))

 (defn f-soundtrack
-  [{:keys [audio-current-time-ms player-ref style seeking-audio? max-audio-duration-ms]}]
-  (let [audio-duration-ms (min max-audio-duration-ms (audio/get-player-duration player-ref))]
+  [{:keys [audio-current-time-ms player-ref style seeking-audio?]}]
+  (let [audio-duration-ms (audio/get-player-duration player-ref)]
    [:<>
     [slider/slider
      {:test-ID                  "soundtrack"
@@ -26,4 +26,4 @@
               {:data [{:id    1
                        :label "Item 1"}
                      ]} types/tab])
-    (h/is-truthy (h/get-by-text "Item 1"))))
+    (h/is-truthy (h/get-by-text "Item 1"))))
@@ -49,8 +49,6 @@
    quo2.components.list-items.preview-list
    quo2.components.list-items.user-list
    quo2.components.loaders.skeleton
-    quo2.components.loaders.skeleton.view
-    quo2.components.markdown.list.view
    quo2.components.markdown.text
    quo2.components.messages.author.view
    quo2.components.messages.gap
@@ -93,6 +91,7 @@
    quo2.components.settings.reorder-item.view
    quo2.components.community.channel-actions))

+(def text quo2.components.markdown.text/text)
 (def icon quo2.components.icon/icon)
 (def separator quo2.components.separator/separator)
 (def header quo2.components.header/header)
@@ -108,11 +107,12 @@
 (def group-avatar-tag quo2.components.tags.context-tag.view/group-avatar-tag)
 (def audio-tag quo2.components.tags.context-tag.view/audio-tag)
 (def community-tag quo2.components.tags.context-tag.view/community-tag)
-
-
+(def floating-shell-button quo2.components.navigation.floating-shell-button/floating-shell-button)
+(def page-nav quo2.components.navigation.page-nav/page-nav)
 (def disclaimer quo2.components.selectors.disclaimer.view/view)
 (def checkbox quo2.components.selectors.selectors.view/checkbox)
 (def filter quo2.components.selectors.filter.view/view)
+(def skeleton quo2.components.loaders.skeleton/skeleton)
 (def author quo2.components.messages.author.view/author)

 ;;;; SELECTORS
@@ -190,18 +190,6 @@
 (def preview-list quo2.components.list-items.preview-list/preview-list)
 (def user-list quo2.components.list-items.user-list/user-list)

-;;;; LOADERS
-(def skeleton quo2.components.loaders.skeleton/skeleton)
-(def static-skeleton quo2.components.loaders.skeleton.view/view)
-
-;;;; NAVIGATION
-(def floating-shell-button quo2.components.navigation.floating-shell-button/floating-shell-button)
-(def page-nav quo2.components.navigation.page-nav/page-nav)
-
-;;;; MARKDOWN
-(def markdown-list quo2.components.markdown.list.view/view)
-(def text quo2.components.markdown.text/text)
-
 ;;;; NOTIFICATIONS
 (def activity-log quo2.components.notifications.activity-log.view/view)
 (def info-count quo2.components.notifications.info-count/info-count)
@@ -23,7 +23,6 @@
    [quo2.components.links.url-preview-list.component-spec]
    [quo2.components.links.url-preview.component-spec]
    [quo2.components.markdown.--tests--.text-component-spec]
-    [quo2.components.markdown.list.component-spec]
    [quo2.components.notifications.notification.component-spec]
    [quo2.components.onboarding.small-option-card.component-spec]
    [quo2.components.password.tips.component-spec]
@@ -121,11 +121,7 @@
 (def white-70-blur (alpha white 0.7))
 (def neutral-80-opa-1-blur (alpha "#192438" 0.1))
 (def neutral-5-opa-70-blur (alpha neutral-5 0.7))
-(def neutral-10-opa-10-blur (alpha neutral-10 0.1))
-(def neutral-10-opa-40-blur (alpha neutral-10 0.4))
 (def neutral-80-opa-80-blur (alpha "#192438" 0.8))
-(def neutral-90-opa-10-blur (alpha neutral-90 0.1))
-(def neutral-90-opa-40-blur (alpha neutral-90 0.4))
 (def neutral-90-opa-70-blur (alpha neutral-90 0.7))
 (def neutral-95-opa-70-blur neutral-95-opa-70)
 (def neutral-100-opa-70-blur neutral-100-opa-70)
@@ -1,6 +1,5 @@
 (ns react-native.cameraroll
  (:require ["@react-native-community/cameraroll" :as CameraRoll]
-            [react-native.fs :as fs]
            [utils.transforms :as transforms]
            [taoensso.timbre :as log]))

@@ -15,9 +14,3 @@
  (-> (.getAlbums CameraRoll (clj->js opts))
      (.then #(callback (transforms/js->clj %)))
      (.catch #(log/warn "could not get camera roll albums" %))))
-
-(defn save-image
-  [path]
-  (-> (.save CameraRoll (clj->js path))
-      (.then #(fs/unlink path))
-      (.catch #(fs/unlink path))))
@@ -68,10 +68,6 @@
   (fn []
     (js->clj (.get (.-Dimensions ^js react-native) "screen") :keywordize-keys true))))

-(def small-screen?
-  (let [height (:height (get-screen))]
-    (< height 700)))
-
 (defn hw-back-add-listener
  [callback]
  (.addEventListener (.-BackHandler ^js react-native) "hardwareBackPress" callback))
@@ -19,8 +19,6 @@

 (defn gesture-pan [] (.Pan ^js Gesture))

-(defn gesture-long-press [] (.LongPress ^js Gesture))
-
 (defn gesture-pinch [] (.Pinch ^js Gesture))

 (defn on-begin [gesture handler] (.onBegin ^js gesture handler))
@@ -37,10 +35,6 @@

 (defn min-distance [gesture dist] (.minDistance ^js gesture dist))

-(defn fail-offset-x [gesture offset] (.failOffsetX ^js gesture offset))
-
-(defn hit-slop [gesture settings] (.hitSlop ^js gesture settings))
-
 (defn number-of-taps [gesture count] (.numberOfTaps ^js gesture count))

 (defn enabled [gesture enabled?] (.enabled ^js gesture enabled?))
@@ -33,10 +33,6 @@
  [comp]
  (.showOverlay Navigation (clj->js comp)))

-(defn pop-to
-  [comp]
-  (.popTo Navigation (clj->js comp)))
-
 (defn pop-to-root
  [tab]
  (.popToRoot Navigation (clj->js tab)))
@@ -1,5 +1,5 @@
 (ns react-native.permissions
-  (:require ["react-native-permissions" :refer (check openSettings requestMultiple PERMISSIONS RESULTS)]
+  (:require ["react-native-permissions" :refer (check requestMultiple PERMISSIONS RESULTS)]
            [react-native.platform :as platform]))

 (def permissions-map
@@ -38,5 +38,3 @@
  (-> (check (get permissions-map permission))
      (.then #(on-result (not (#{(.-BLOCKED RESULTS) (.-DENIED RESULTS)} %))))
      (.catch #(on-error %))))
-
-(def open-settings openSettings)
@@ -34,7 +34,6 @@
 (def create-animated-component (comp reagent/adapt-react-class (.-createAnimatedComponent reanimated)))

 (def view (reagent/adapt-react-class (.-View reanimated)))
-(def text (reagent/adapt-react-class (.-Text reanimated)))
 (def scroll-view (reagent/adapt-react-class (.-ScrollView reanimated)))
 (def image (reagent/adapt-react-class (.-Image reanimated)))

@@ -81,8 +80,7 @@
  {:linear  (bezier 0 0 1 1)
   :easing1 (bezier 0.25 0.1 0.25 1)
   :easing2 (bezier 0 0.3 0.6 0.9)
-   :easing3 (bezier 0.3 0.3 0.3 0.9)
-   :easing4 (bezier 0.3 0.3 1 1)})
+   :easing3 (bezier 0.3 0.3 0.3 0.9)})

 ;; Helper functions
 (defn get-shared-value
@@ -10,8 +10,7 @@

 (defn- get-static-bottom
  []
-  (some-> StaticSafeAreaInsets
-          (oops/oget "safeAreaInsetsBottom")))
+  (oops/oget StaticSafeAreaInsets "safeAreaInsetsBottom"))

 (defn get-top
  []
@@ -21,8 +20,8 @@

 (defn get-bottom
  []
-  (if-let [bottom (and platform/ios? (get-static-bottom))]
-    bottom
+  (if platform/ios?
+    (get-static-bottom)
    0))

 (defn get-insets
@@ -22,7 +22,7 @@
 (rf/defn fetch
  [cofx id]
  (let [network (get-in cofx [:db :networks/current-network])]
-    (get-in cofx [:db :profile/profile :custom-bootnodes network id])))
+    (get-in cofx [:db :multiaccount :custom-bootnodes network id])))

 (rf/defn set-input
  {:events [:bootnodes.ui/input-changed]}
@@ -54,26 +54,26 @@
 (defn custom-bootnodes-in-use?
  [{:keys [db]}]
  (let [network (:networks/current-network db)]
-    (get-in db [:profile/profile :custom-bootnodes-enabled? network])))
+    (get-in db [:multiaccount :custom-bootnodes-enabled? network])))

 (rf/defn delete
-  [{{:profile/keys [profile] :as db} :db :as cofx} id]
-  (let [network     (:networks/current-network db)
-        new-profile (update-in profile [:custom-bootnodes network] dissoc id)]
+  [{{:keys [multiaccount] :as db} :db :as cofx} id]
+  (let [network          (:networks/current-network db)
+        new-multiaccount (update-in multiaccount [:custom-bootnodes network] dissoc id)]
    (rf/merge cofx
-              {:db (assoc db :profile/profile new-profile)}
+              {:db (assoc db :multiaccount new-multiaccount)}
              (multiaccounts.update/multiaccount-update
               :custom-bootnodes
-               (:custom-bootnodes new-profile)
+               (:custom-bootnodes new-multiaccount)
               {:success-event (when (custom-bootnodes-in-use? cofx)
                                 [:multiaccounts.update.callback/save-settings-success])}))))

 (rf/defn upsert
  {:events       [:bootnodes.ui/save-pressed]
   :interceptors [(re-frame/inject-cofx :random-id-generator)]}
-  [{{:bootnodes/keys [manage] :profile/keys [profile] :as db} :db
-    random-id-generator                                       :random-id-generator
-    :as                                                       cofx}]
+  [{{:bootnodes/keys [manage] :keys [multiaccount] :as db} :db
+    random-id-generator                                    :random-id-generator
+    :as                                                    cofx}]
  (let [{:keys [name id url]} manage
        network               (:networks/current-network db)
        bootnode              (build
@@ -82,7 +82,7 @@
                               (:value url)
                               network)
        new-bootnodes         (assoc-in
-                               (:custom-bootnodes profile)
+                               (:custom-bootnodes multiaccount)
                               [network (:id bootnode)]
                               bootnode)]

@@ -99,7 +99,7 @@
  {:events [:bootnodes.ui/custom-bootnodes-switch-toggled]}
  [{:keys [db] :as cofx} value]
  (let [current-network    (:networks/current-network db)
-        bootnodes-settings (get-in db [:profile/profile :custom-bootnodes-enabled?])]
+        bootnodes-settings (get-in db [:multiaccount :custom-bootnodes-enabled?])]
    (multiaccounts.update/multiaccount-update
     cofx
     :custom-bootnodes-enabled?
@@ -20,9 +20,9 @@
                        {:random-id-generator (constantly "some-id")
                         :db                  {:bootnodes/manage new-bootnode
                                               :networks/current-network "mainnet_rpc"
-                                               :profile/profile {:not-empty
-                                                                 "would throw an error if was empty"}}})]
-      (is (= expected (get-in actual [:db :profile/profile :custom-bootnodes])))))
+                                               :multiaccount {:not-empty
+                                                              "would throw an error if was empty"}}})]
+      (is (= expected (get-in actual [:db :multiaccount :custom-bootnodes])))))
  (testing "adding an existing bootnode"
    (let [new-bootnode {:id   {:value "a"}
                        :name {:value "new-name"}
@@ -35,13 +35,13 @@
                        {:random-id-generator (constantly "some-id")
                         :db                  {:bootnodes/manage         new-bootnode
                                               :networks/current-network "mainnet_rpc"
-                                               :profile/profile          {:custom-bootnodes
+                                               :multiaccount             {:custom-bootnodes
                                                                          {"mainnet_rpc"
                                                                           {"a" {:name    "name"
                                                                                 :address "url"
                                                                                 :chain   "mainnet_rpc"
                                                                                 :id      "a"}}}}}})]
-      (is (= expected (get-in actual [:db :profile/profile :custom-bootnodes]))))))
+      (is (= expected (get-in actual [:db :multiaccount :custom-bootnodes]))))))

 (deftest set-input-bootnode
  (testing "it validates names"
@@ -72,7 +72,7 @@

 (deftest edit-bootnode
  (let [db   {:networks/current-network "mainnet_rpc"
-              :profile/profile
+              :multiaccount
              {:custom-bootnodes
               {"mainnet_rpc"
                {"a" {:id      "a"
@@ -123,7 +123,7 @@
 (deftest fetch-bootnode
  (testing "it fetches the bootnode from the db"
    (let [cofx {:db {:networks/current-network "mainnet_rpc"
-                     :profile/profile          {:custom-bootnodes
+                     :multiaccount             {:custom-bootnodes
                                                {"mainnet_rpc"
                                                 {"a" {:id "a"
                                                       :name "name"
@@ -138,7 +138,7 @@
    (testing "it returns true when enabled"
      (is (model/custom-bootnodes-in-use?
           {:db {:networks/current-network "mainnet_rpc"
-                 :profile/profile          {:custom-bootnodes-enabled?
+                 :multiaccount             {:custom-bootnodes-enabled?
                                            {"mainnet_rpc" true}}}}))))
  (testing "is on a different network"
    (testing "it returns false when not enabled"
@@ -146,13 +146,13 @@
    (testing "it returns true when enabled"
      (is (not (model/custom-bootnodes-in-use?
                {:db {:networks/current-network "goerli_rpc"
-                      :profile/profile          {:custom-bootnodes-enabled?
+                      :multiaccount             {:custom-bootnodes-enabled?
                                                 {"mainnnet_rpc" true}}}}))))))

 (deftest delete-bootnode
  (testing "non existing bootnode"
    (let [cofx   {:db {:networks/current-network "mainnet_rpc"
-                       :profile/profile          {:custom-bootnodes
+                       :multiaccount             {:custom-bootnodes
                                                  {"mainnet_rpc"
                                                   {"a" {:id "a"
                                                         :name "name"
@@ -165,7 +165,7 @@
        (is (model/fetch actual "a")))))
  (testing "existing bootnode"
    (let [cofx   {:db {:networks/current-network "mainnet_rpc"
-                       :profile/profile          {:custom-bootnodes
+                       :multiaccount             {:custom-bootnodes
                                                  {"mainnet_rpc"
                                                   {"a" {:id "a"
                                                         :name "name"
@@ -385,7 +385,7 @@
 (rf/defn web3-send-async
  [cofx dapp-name {:keys [method params id] :as payload} message-id]
  (let [message?      (web3-sign-message? method)
-        dapps-address (get-in cofx [:db :profile/profile :dapps-address])
+        dapps-address (get-in cofx [:db :multiaccount :dapps-address])
        typed?        (and (not= constants/web3-personal-sign method)
                           (not= constants/web3-eth-sign method))]
    (if (or message? (= constants/web3-send-transaction method))
@@ -42,7 +42,7 @@

 (defn get-permission-data
  [cofx allowed-permission]
-  (let [multiaccount (get-in cofx [:db :profile/profile])]
+  (let [multiaccount (get-in cofx [:db :multiaccount])]
    (get {constants/dapp-permission-contact-code (:public-key multiaccount)
          constants/dapp-permission-web3         [(:dapps-address multiaccount)]}
         allowed-permission)))
@@ -9,7 +9,7 @@
  (let [dapp-name  "test.com"
        dapp-name2 "test2.org"
        cofx       {:db (assoc-in (:db (browser/open-url {:db {}} dapp-name))
-                         [:profile/profile :public-key]
+                         [:multiaccount :public-key]
                         "public-key")}
        dapp-id    (core.tests/get-dapp-id cofx dapp-name)]
    (testing "dapps permissions are initialized"
@@ -1,13 +1,16 @@
 (ns status-im.chat.models.images
-  (:require ["react-native-blob-util" :default ReactNativeBlobUtil]
+  (:require ["@react-native-community/cameraroll" :as CameraRoll]
+            ["react-native-blob-util" :default ReactNativeBlobUtil]
            [re-frame.core :as re-frame]
            [react-native.share :as share]
-            [react-native.cameraroll :as cameraroll]
+            [utils.i18n :as i18n]
+            [react-native.permissions :as permissions]
            [status-im.ui.components.react :as react]
            [status-im2.config :as config]
            [react-native.fs :as fs]
            [utils.re-frame :as rf]
            [status-im.utils.platform :as platform]
+            [status-im.utils.utils :as utils]
            [taoensso.timbre :as log]))

 (def temp-image-url (str (fs/cache-dir) "/StatusIm_Image.jpeg"))
@@ -19,7 +22,7 @@
                         :path   temp-image-url}))
      (.fetch "GET" base64-uri)
      (.then #(on-success (.path %)))
-      (.catch #(log/error "could not download image" {:error %}))))
+      (.catch #(log/error "could not save image"))))

 (defn share-image
  [uri]
@@ -30,11 +33,23 @@
                                     #(fs/unlink downloaded-url)
                                     #(fs/unlink downloaded-url)))))

-(defn save-image-to-gallery
-  [base64-uri on-success]
-  (-> (download-image-http base64-uri cameraroll/save-image)
-      (.then on-success)
-      (.catch #(log/error (str "could not save image to gallery" %)))))
+(defn save-to-gallery [path] (.save CameraRoll path))
+
+(re-frame/reg-fx
+ ::save-image-to-gallery
+ (fn [base64-uri]
+   (if platform/ios?
+     (-> (download-image-http base64-uri save-to-gallery)
+         (.catch #(utils/show-popup (i18n/label :t/error)
+                                    (i18n/label :t/external-storage-denied))))
+     (permissions/request-permissions
+      {:permissions [:write-external-storage]
+       :on-allowed  #(download-image-http base64-uri save-to-gallery)
+       :on-denied   (fn []
+                      (utils/set-timeout
+                       #(utils/show-popup (i18n/label :t/error)
+                                          (i18n/label :t/external-storage-denied))
+                       50))}))))

 (re-frame/reg-fx
 ::chat-open-image-picker-camera
@@ -11,18 +11,17 @@
            [status-im2.contexts.chat.composer.link-preview.events :as link-preview]
            [taoensso.timbre :as log]
            [utils.i18n :as i18n]
-            [utils.re-frame :as rf]
-            [utils.string :as utils.string]))
+            [utils.re-frame :as rf]))

 (defn text->emoji
  "Replaces emojis in a specified `text`"
  [text]
-  (utils.string/safe-replace text
-                             #":([a-z_\-+0-9]*):"
-                             (fn [[original emoji-id]]
-                               (if-let [emoji-map (object/get (.-lib emojis) emoji-id)]
-                                 (.-char ^js emoji-map)
-                                 original))))
+  (utils/safe-replace text
+                      #":([a-z_\-+0-9]*):"
+                      (fn [[original emoji-id]]
+                        (if-let [emoji-map (object/get (.-lib emojis) emoji-id)]
+                          (.-char ^js emoji-map)
+                          original))))

 ;; effects
 (re-frame/reg-fx
@@ -148,7 +147,7 @@
  (when-not (string/blank? input-text)
    (let [{:keys [message-id]}
          (get-in db [:chat/inputs current-chat-id :metadata :responding-to-message])
-          preferred-name (get-in db [:profile/profile :preferred-name])
+          preferred-name (get-in db [:multiaccount :preferred-name])
          emoji? (message-content/emoji-only-content? {:text        input-text
                                                       :response-to message-id})]
      {:chat-id       current-chat-id
@@ -170,7 +169,7 @@
            {:chat-id      chat-id
             :album-id     album-id
             :content-type constants/content-type-image
-             :image-path   (utils.string/safe-replace resized-uri #"file://" "")
+             :image-path   (utils/safe-replace resized-uri #"file://" "")
             :image-width  width
             :image-height height
             :text         input-text
@@ -83,7 +83,7 @@
  [{db :db} chat-id]
  {:db                          (mark-chat-all-read db chat-id)
   :clear-message-notifications [[chat-id]
-                                 (get-in db [:profile/profile :remote-push-notifications-enabled?])]
+                                 (get-in db [:multiaccount :remote-push-notifications-enabled?])]
   :json-rpc/call               [{:method     "wakuext_markAllRead"
                                  :params     [chat-id]
                                  :on-success #(re-frame/dispatch [::mark-all-read-successful])}]})
@@ -94,7 +94,7 @@
  (let [community-chat-ids (map #(str community-id %)
                                (keys (get-in db [:communities community-id :chats])))]
    {:clear-message-notifications [community-chat-ids
-                                   (get-in db [:profile/profile :remote-push-notifications-enabled?])]
+                                   (get-in db [:multiaccount :remote-push-notifications-enabled?])]
     :json-rpc/call               [{:method     "wakuext_markAllReadInCommunity"
                                    :params     [community-id]
                                    :on-success #(re-frame/dispatch
@@ -9,7 +9,7 @@
  {:db                    (assoc db
                                 :commands/select-account
                                 {:message message
-                                  :from    (ethereum/get-default-account (:profile/wallet-accounts db))})
+                                  :from    (ethereum/get-default-account (:multiaccount/accounts db))})
   :show-select-acc-sheet nil})

 (rf/defn set-selected-account
@@ -11,7 +11,7 @@
            [status-im.bottom-sheet.events :as bottom-sheet]
            [status-im2.common.toasts.events :as toasts]
            [status-im2.constants :as constants]
-            [status-im2.contexts.shell.activity-center.events :as activity-center]
+            [status-im2.contexts.activity-center.events :as activity-center]
            [status-im2.navigation.events :as navigation]
            [taoensso.timbre :as log]
            [utils.i18n :as i18n]
@@ -102,7 +102,7 @@

 (rf/defn handle-requests-to-join
  [{:keys [db]} requests]
-  (let [my-public-key (get-in db [:profile/profile :public-key])]
+  (let [my-public-key (get-in db [:multiaccount :public-key])]
    {:db (reduce (fn [db {:keys [public-key] :as request}]
                   (let [my-request? (= my-public-key public-key)]
                     (if my-request?
@@ -278,7 +278,7 @@
  (let [community-chat-ids (map #(str community-id %)
                                (keys (get-in db [:communities community-id :chats])))]
    {:clear-message-notifications [community-chat-ids
-                                   (get-in db [:profile/profile :remote-push-notifications-enabled?])]
+                                   (get-in db [:multiaccount :remote-push-notifications-enabled?])]
     :dispatch                    [:shell/close-switcher-card community-id]
     :json-rpc/call               [{:method      "wakuext_leaveCommunity"
                                    :params      [community-id]
@@ -795,14 +795,14 @@
 (rf/defn store-category-state
  {:events [::store-category-state]}
  [{:keys [db]} community-id category-id state-open?]
-  (let [public-key (get-in db [:profile/profile :public-key])
+  (let [public-key (get-in db [:multiaccount :public-key])
        hash       (category-hash public-key community-id category-id)]
    {::async-storage/set! {hash state-open?}}))

 (rf/defn update-category-states-in-db
  {:events [::category-states-loaded]}
  [{:keys [db]} community-id hashes states]
-  (let [public-key     (get-in db [:profile/profile :public-key])
+  (let [public-key     (get-in db [:multiaccount :public-key])
        categories-old (get-in db [:communities community-id :categories])
        categories     (reduce (fn [acc [category-id category]]
                                 (let [hash             (get hashes category-id)
@@ -816,7 +816,7 @@
 (rf/defn load-category-states
  {:events [:communities/load-category-states]}
  [{:keys [db]} community-id]
-  (let [public-key            (get-in db [:profile/profile :public-key])
+  (let [public-key            (get-in db [:multiaccount :public-key])
        categories            (get-in db [:communities community-id :categories])
        {:keys [keys hashes]} (reduce (fn [acc category]
                                        (let [category-id (get category 0)
@@ -6,7 +6,7 @@
            [status-im2.contexts.contacts.events :as contacts-store]
            [utils.re-frame :as rf]
            [status-im.utils.types :as types]
-            [status-im2.contexts.shell.activity-center.events :as activity-center]
+            [status-im2.contexts.activity-center.events :as activity-center]
            [status-im2.navigation.events :as navigation]))

 (rf/defn clean-up-chat
@@ -49,7 +49,7 @@
                    (assoc-in [:contacts/contacts public-key :added?] false))
            :dispatch [:shell/close-switcher-card public-key]
            :clear-message-notifications
-            [[public-key] (get-in db [:profile/profile :remote-push-notifications-enabled?])]}
+            [[public-key] (get-in db [:multiaccount :remote-push-notifications-enabled?])]}
           (activity-center/notifications-fetch-unread-count)
           fxs)))

--- a/Show More
+++ b/Show More