updates

ios/Podfile.lock

@@ -228,6 +228,8 @@ PODS:
     - React-Core
   - react-native-netinfo (4.7.0):
     - React
+  - react-native-orientation-locker (1.5.0):
+    - React-Core
   - react-native-randombytes (3.6.1):
     - React-Core
   - react-native-safe-area-context (2.0.0):
@@ -238,7 +240,7 @@ PODS:
     - React
   - react-native-status (1.0.0):
     - React
-  - react-native-status-keycard (2.5.38):
+  - react-native-status-keycard (2.5.39):
     - Keycard
     - React
   - react-native-webview (11.16.0):
@@ -390,6 +392,7 @@ PODS:
     - libwebp (~> 1.0)
     - SDWebImage/Core (~> 5.10)
   - secp256k1 (0.1.6)
+  - ShowTime (2.5.3)
   - SQLCipher (3.4.2):
     - SQLCipher/standard (= 3.4.2)
   - SQLCipher/common (3.4.2)
@@ -433,6 +436,7 @@ DEPENDENCIES:
   - react-native-lottie-splash-screen (from `../node_modules/react-native-lottie-splash-screen`)
   - react-native-mail (from `../node_modules/react-native-mail`)
   - "react-native-netinfo (from `../node_modules/@react-native-community/netinfo`)"
+  - react-native-orientation-locker (from `../node_modules/react-native-orientation-locker`)
   - react-native-randombytes (from `../node_modules/react-native-randombytes`)
   - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
   - react-native-shake (from `../node_modules/react-native-shake`)
@@ -469,6 +473,7 @@ DEPENDENCIES:
   - RNShare (from `../node_modules/react-native-share`)
   - RNSVG (from `../node_modules/react-native-svg`)
   - secp256k1 (from `https://github.com/status-im/secp256k1.swift.git`)
+  - ShowTime
   - SQLCipher (~> 3.0)
   - SSZipArchive (= 2.4.3)
   - TouchID (from `../node_modules/react-native-touch-id`)
@@ -482,6 +487,7 @@ SPEC REPOS:
     - libwebp
     - SDWebImage
     - SDWebImageWebPCoder
+    - ShowTime
     - SQLCipher
     - SSZipArchive
     - TOCropViewController
@@ -545,6 +551,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-mail"
   react-native-netinfo:
     :path: "../node_modules/@react-native-community/netinfo"
+  react-native-orientation-locker:
+    :path: "../node_modules/react-native-orientation-locker"
   react-native-randombytes:
     :path: "../node_modules/react-native-randombytes"
   react-native-safe-area-context:
@@ -640,7 +648,7 @@ SPEC CHECKSUMS:
   FBLazyVector: 352a8ca9bbc8e2f097d680747a8c97ecef12d469
   FBReactNativeSpec: 7dfb84f624136a45727c813ed21d130cd3e61beb
   Folly: b73c3869541e86821df3c387eb0af5f65addfab4
-  glog: 997518ea2aa2d8cd5df9797b641b758d52ecf2bc
+  glog: 36ce0530c6d2c3a5a4326885ef4069564887a1db
   HMSegmentedControl: 34c1f54d822d8308e7b24f5d901ec674dfa31352
   Keycard: ac6df4d91525c3c82635ac24d4ddd9a80aca5fc8
   libwebp: 60305b2e989864154bd9be3d772730f08fc6a59c
@@ -666,12 +674,13 @@ SPEC CHECKSUMS:
   react-native-lottie-splash-screen: 068688c15dd478301fda00f8d87d7fb7d5b9a93e
   react-native-mail: 8fdcd3aef007c33a6877a18eb4cf7447a1d4ce4a
   react-native-netinfo: ddaca8bbb9e6e914b1a23787ccb879bc642931c9
+  react-native-orientation-locker: 851f6510d8046ea2f14aa169b1e01fcd309a94ba
   react-native-randombytes: 421f1c7d48c0af8dbcd471b0324393ebf8fe7846
   react-native-safe-area-context: 60f654e00b6cc416573f6d5dbfce3839958eb57a
   react-native-shake: de052eaa3eadc4a326b8ddd7ac80c06e8d84528c
   react-native-slider: 12bd76d3d568c9c5500825db54123d44b48e4ad4
   react-native-status: 21f75d492fd311dc111303da38a7a2b23a8a8466
-  react-native-status-keycard: f60ca57d789aad6875c64ece81ab06ef0609e0d3
+  react-native-status-keycard: f1c1227b2d5984c10fb44db68e4bfd2937f31e98
   react-native-webview: 28a8636d97ee641f2ee8f20492d7a6c269c1d703
   React-RCTActionSheet: e911b99f0d6fa7711ffc2f62d236b12a32771835
   React-RCTAnimation: ad8b853170a059faf31d6add34f67d22391bbe01
@@ -704,12 +713,13 @@ SPEC CHECKSUMS:
   SDWebImage: a7f831e1a65eb5e285e3fb046a23fcfbf08e696d
   SDWebImageWebPCoder: 908b83b6adda48effe7667cd2b7f78c897e5111d
   secp256k1: f61d67e6fdcb85fd727acf1bf35ace6036db540c
+  ShowTime: 06cc9dc79886274b21041fe19b79c9eff59b9714
   SQLCipher: f9fcf29b2e59ced7defc2a2bdd0ebe79b40d4990
   SSZipArchive: fe6a26b2a54d5a0890f2567b5cc6de5caa600aef
   TOCropViewController: edfd4f25713d56905ad1e0b9f5be3fbe0f59c863
   TouchID: ba4c656d849cceabc2e4eef722dea5e55959ecf4
   Yoga: 0276e9f20976c8568e107cfc1163a8629051adc0
 
-PODFILE CHECKSUM: ca5d07911eadc1267649ecc15379e5127a0cc839
+PODFILE CHECKSUM: 06348d9065f85ab25a2c9560c69af5425c37e29e
 
 COCOAPODS: 1.11.3

package.json

@@ -62,6 +62,7 @@
     "react-native-mail": "^6.1.1",
     "react-native-modal": "^13.0.1",
     "react-native-navigation": "^7.27.1",
+    "react-native-navigation-bar-color": "^2.0.2",
     "react-native-orientation-locker": "^1.5.0",
     "react-native-permissions": "^2.1.5",
     "react-native-randombytes": "^3.6.1",

src/mocks/js_dependencies.cljs

@@ -338,9 +338,6 @@ globalThis.__STATUS_MOBILE_JS_IDENTITY_PROXY__ = new Proxy({}, {get() { return (
   (clj->js {:default                    #js {}
             :useDeviceOrientationChange #js {}}))
 
-(def react-native-modal
-  (clj->js {:default #js {}}))
-
 (def wallet-connect-client
   #js
    {:default       #js {}
@@ -407,7 +404,6 @@ globalThis.__STATUS_MOBILE_JS_IDENTITY_PROXY__ = new Proxy({}, {get() { return (
     "@react-native-async-storage/async-storage"     async-storage
     "react-native-svg"                              react-native-svg
     "react-native-orientation-locker"               react-native-orientation-locker
-    "react-native-modal"                            react-native-modal
     "../src/js/worklet_factory.js"                  worklet-factory
     "../src/js/shell_worklets.js"                   shell-worklets
     "../src/js/bottom_sheet.js"                     bottom-sheet

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

@@ -2,14 +2,12 @@
   (:require [quo2.foundations.colors :as colors]))
 
 (defn card-container
-  [customization-color padding-bottom]
-  {:flex-direction     :column
-   :padding-horizontal 12
-   :padding-top        12
-   :padding-bottom     padding-bottom
-   :flex               1
-   :border-radius      16
-   :background-color   (colors/custom-color customization-color 50 40)})
+  [customization-color]
+  {:flex-direction   :column
+   :padding          12
+   :flex             1
+   :border-radius    16
+   :background-color (colors/custom-color customization-color 50 40)})
 
 (def card-header
   {:flex-direction  :row
@@ -18,23 +16,25 @@
 (def name-container
   {:flex-direction :row
    :margin-top     8
+   :margin-bottom  2
    :align-items    :center
    :padding-right  12})
 
 (def user-name
-  {:color colors/white})
+  {:margin-right 4
+   :color        colors/white})
 
 (def emoji-hash
-  {:margin-top 12})
+  {:margin-top 10})
 
 (def user-hash
-  {:margin-top 2
-   :color      colors/white-opa-60})
+  {:color colors/white-opa-60})
+
+(def sign-button
+  {:margin-top 14})
 
 (def keycard-icon
-  {:margin-left 4
-   :color       colors/white-opa-40})
+  {:color colors/white-opa-40})
 
 (def option-button
-  {:background-color colors/white-opa-5
-   :margin-left      8})
+  {:background-color colors/white-opa-5})

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

@@ -1,80 +1,63 @@
 (ns quo2.components.profile.profile-card.view
-  (:require [utils.i18n :as i18n]
-            [react-native.core :as rn]
-            [quo2.components.icon :as icon]
-            [quo2.components.tags.tag :as tag]
-            [quo2.foundations.colors :as colors]
-            [quo2.components.markdown.text :as text]
-            [quo2.components.buttons.button :as button]
-            [quo2.components.avatars.user-avatar :as user-avatar]
-            [quo2.components.profile.profile-card.style :as style]))
+  (:require
+    [quo2.components.profile.profile-card.style :as style]
+    [quo2.foundations.colors :as colors]
+    [quo2.components.avatars.user-avatar :as user-avatar]
+    [quo2.components.icon :as icon]
+    [quo2.components.markdown.text :as text]
+    [quo2.components.buttons.button :as button]
+    [react-native.core :as rn]))
+
 
 (defn profile-card
-  [{:keys [key-card? profile-picture name hash customization-color
-           emoji-hash on-options-press show-emoji-hash? padding-bottom
-           show-options-button? show-user-hash? show-logged-in? on-card-press]
-    :or   {show-emoji-hash?     false
-           show-user-hash?      false
-           customization-color  :turquoise
-           show-options-button? false
-           show-logged-in?      false
-           key-card?            false}}]
-  [rn/touchable-without-feedback
-   {:on-press            on-card-press
-    :flex                1
-    :accessibility-label :profile-card}
+  [{:keys [show-sign-profile? key-card? profile-picture name hash customization-color sign-label
+           emoji-hash on-press-dots on-press-sign show-emoji-hash?]
+    :or   {show-sign-profile?  false
+           show-emoji-hash?    false
+           customization-color :turquoise
+           key-card?           false}}]
+  [rn/view
+   {:style (style/card-container customization-color)}
    [rn/view
-    (style/card-container
-     customization-color
-     (or padding-bottom (if show-emoji-hash? 12 10)))
-    [rn/view
-     {:style style/card-header}
-     [user-avatar/user-avatar
-      {:full-name         name
-       :profile-picture   profile-picture
-       :override-theme    :dark
-       :size              :medium
-       :status-indicator? false}]
-     [rn/view {:flex-direction :row}
-      (when show-logged-in?
-        [tag/tag
-         {:type                :icon
-          :size                32
-          :blurred?            true
-          :labelled?           true
-          :resource            :main-icons2/check
-          :accessibility-label :logged-in-tag
-          :icon-color          colors/success-50
-          :override-theme      :dark
-          :label               (i18n/label :t/logged-in)}])
-      (when show-options-button?
-        [button/button
-         {:size                32
-          :type                :blur-bg
-          :icon                true
-          :override-theme      :dark
-          :style               style/option-button
-          :on-press            on-options-press
-          :accessibility-label :profile-card-options}
-         :i/options])]]
-    [rn/view
-     {:style style/name-container}
+    {:style style/card-header}
+    [user-avatar/user-avatar
+     {:full-name         name
+      :profile-picture   profile-picture
+      :override-theme    :dark
+      :size              :medium
+      :status-indicator? false}]
+    [button/button
+     {:size           32
+      :type           :blur-bg
+      :icon           true
+      :override-theme :dark
+      :style          style/option-button
+      :on-press       on-press-dots}
+     :i/options]]
+   [rn/view
+    {:style style/name-container}
+    [text/text
+     {:size            :heading-2
+      :weight          :semi-bold
+      :number-of-lines 1
+      :style           style/user-name} name]
+    (when key-card?
+      (icon/icon
+       :i/keycard
+       style/keycard-icon))]
+   [text/text
+    {:weight          :monospace
+     :number-of-lines 1
+     :style           style/user-hash} hash]
+   (when (and show-emoji-hash? emoji-hash)
      [text/text
-      {:size            :heading-2
-       :weight          :semi-bold
+      {:weight          :monospace
        :number-of-lines 1
-       :style           style/user-name} name]
-     (when key-card?
-       (icon/icon
-        :i/keycard
-        style/keycard-icon))]
-    (when show-user-hash?
-      [text/text
-       {:weight          :monospace
-        :number-of-lines 1
-        :style           style/user-hash} hash])
-    (when (and show-emoji-hash? emoji-hash)
-      [text/text
-       {:weight          :monospace
-        :number-of-lines 1
-        :style           style/emoji-hash} emoji-hash])]])
+       :style           style/emoji-hash} emoji-hash])
+   (when show-sign-profile?
+     [button/button
+      {:on-press             on-press-sign
+       :type                 :community
+       :community-color      (colors/custom-color customization-color 60)
+       :community-text-color colors/white
+       :style                style/sign-button} sign-label])])

src/quo2/components/tags/tag.cljs

@@ -83,13 +83,13 @@
     - `labelled` boolean: is true if tag has label else false"
   [_ _]
   (fn [{:keys [id on-press disabled? size resource active accessibility-label
-               label type labelled? blurred? icon-color override-theme]
+               label type labelled? blurred? icon-color]
         :or   {size 32}}]
     (let [state (cond disabled? :disabled
                       active    :active
                       :else     :default)
           {:keys [border-color blurred-border-color text-color]}
-          (get-in themes [(or override-theme (theme/get-theme)) state])]
+          (get-in themes [(theme/get-theme) state])]
       [rn/view {:style {:align-items :center}}
        [base-tag/base-tag
         {:id                  id

src/react_native/core.cljs

@@ -70,6 +70,7 @@
   (js->clj (.get (.-Dimensions ^js react-native) "window") :keywordize-keys true))
 
 (def status-bar (.-StatusBar ^js react-native))
+(def sbc (.-backgroundColor ^js status-bar))
 
 (def style-sheet (.-StyleSheet ^js react-native))
 

src/react_native/navigation.cljs

@@ -73,3 +73,8 @@
 (defn merge-options
   [id opts]
   (.mergeOptions Navigation id (clj->js opts)))
+
+(defn update-props
+  [id opts]
+  (.updateProps Navigation id (clj->js opts)))
+

src/status_im2/common/bottom_sheet/styles.cljs

@@ -51,6 +51,7 @@
 (defn background
   [override-theme]
   {:background-color        (colors/theme-colors colors/white colors/neutral-95 override-theme)
+   ;:background-color        :transparent
    :flex                    1
    :border-top-left-radius  border-radius
    :border-top-right-radius border-radius})

src/status_im2/common/home/view.cljs

@@ -45,26 +45,29 @@
 
 
 (defn ac-modal
-  [visible? view-id]
-  (let [status-bar-style (if (or (colors/dark?)
-                                 (not (shell/home-stack-open?)))
-                           :light
-                           :dark)
-        close-modal      (fn []
-                           (reset! visible? false)
-                           (navigation/merge-options (clj->js view-id)
-                                                     (clj->js {:statusBar {:style status-bar-style}})))]
-    [rn/modal
-     {:visible             @visible?
-      :cover-screen           true
-      :transparent            true
-      :status-bar-translucent true
-      :hardware-accelerated   true
-      :animation-type         :slide
-      :style                  {:margin 0
-                               :width  "100%"}
-      :on-back-button-press   close-modal}
-     [ac/view close-modal]]))
+  [visible? is-visible? view-id]
+  [rn/modal
+   {:visible                @visible?
+    :transparent            true
+    :style                  {:margin 0
+                             :width  "100%"}
+    :on-back-button-press   (fn []
+                              (reset! visible? false)
+                              (navigation/merge-options (clj->js view-id)
+                                                        (clj->js {:statusBar {:style :dark}})))
+    :cover-screen           true
+    :animation-type         :slide
+    :hardware-accelerated   true
+    :status-bar-translucent true}
+   [ac/view
+    (fn []
+      (reset! visible? false)
+      (navigation/merge-options (clj->js view-id)
+                                (clj->js {:statusBar {:style (if (or (colors/dark?)
+                                                                     (not (shell/home-stack-open?)))
+                                                               :light
+                                                               :dark)}})))
+    #(reset! is-visible? true)]])
 
 (defn top-nav
   "[top-nav opts]
@@ -80,16 +83,10 @@
         notification-indicator :unread-dot
         counter-label          "0"
         visible?               (reagent/atom false)
-        view-id                (rf/sub [:view-id])
-        open-ac                (fn []
-                                 ;; delaying status-bar style update looks nicer
-                                 (js/setTimeout
-                                  #(navigation/merge-options (clj->js view-id)
-                                                             (clj->js {:statusBar {:style :light}}))
-                                  20)
-                                 (reset! visible? (not @visible?)))]
+        is-visible?            (reagent/atom false)
+        view-id                (rf/sub [:view-id])]
     [rn/view {:style (assoc style :height 56)}
-     [ac-modal visible? view-id]
+     [ac-modal visible? is-visible? view-id]
      ;; Left Section
      [rn/touchable-without-feedback {:on-press #(rf/dispatch [:navigate-to :my-profile])}
       [rn/view
@@ -125,7 +122,15 @@
 
                   :else
                   [{:x 33 :y -7 :width 18 :height 18 :borderRadius 7}])}
-        [base-button :i/activity-center open-ac :open-activity-center-button button-common-props]]
+        ;[base-button :i/activity-center #(rf/dispatch [:activity-center/open])
+        ; :open-activity-center-button button-common-props]
+        [base-button :i/activity-center
+         (fn []
+           (js/setTimeout #(navigation/merge-options (clj->js view-id)
+                                                     (clj->js {:statusBar {:style :light}}))
+                          20)
+           (reset! visible? (not @visible?)))
+         :open-activity-center-button button-common-props]]
        (when new-notifications?
          (if (= notification-indicator :counter)
            [quo/counter

src/status_im2/contexts/activity_center/style.cljs

@@ -1,6 +1,5 @@
 (ns status-im2.contexts.activity-center.style
-  (:require [quo2.foundations.colors :as colors]
-            [react-native.platform :as platform]))
+  (:require [quo2.foundations.colors :as colors]))
 
 (def screen-padding 20)
 
@@ -16,9 +15,10 @@
    :color              colors/white})
 
 (defn screen-container
-  [window-width top bottom]
+  [window-width window-height top bottom]
   {:flex           1
    :width          window-width
+   ;:height        window-height
    :padding-top    (if (pos? top) (+ top 12) 12)
    :padding-bottom bottom})
 
@@ -61,25 +61,3 @@
    :height           120
    :background-color colors/danger-50
    :margin-bottom    20})
-
-(def blur-background
-  {:position :absolute
-   :background-color colors/neutral-80-opa-80
-   :top      0
-   :bottom   0
-   :left     0
-   :right    0})
-
-(defn options-content-container
-  [bottom-inset]
-  {:background-color        colors/neutral-100
-   :padding-bottom          (if platform/ios? bottom-inset 20)
-   :padding-top             20
-   :border-top-left-radius  20
-   :border-top-right-radius 20})
-
-(def options-modal-container
-  {:justify-content :flex-end
-   :margin          0
-   :width           "100%"
-   :align-self      :center})

src/status_im2/contexts/activity_center/view.cljs

@@ -3,6 +3,7 @@
             [quo2.core :as quo]
             [quo2.foundations.colors :as colors]
             [react-native.core :as rn]
+            [react-native.platform :as platform]
             [react-native.safe-area :as safe-area]
             [reagent.core :as reagent]
             [status-im2.contexts.activity-center.notification-types :as types]
@@ -21,6 +22,7 @@
 (defn filter-selector-read-toggle
   []
   (let [unread-filter-enabled? (rf/sub [:activity-center/filter-status-unread-enabled?])]
+    [rn/view]
     [quo/filter
      {:pressed?       unread-filter-enabled?
       :blur?          true
@@ -31,11 +33,17 @@
                                                        :unread)}])}]))
 
 
-(defn options-content
+(defn options-bottom-sheet-content
   [bottom-inset]
   (let [unread-count (rf/sub [:activity-center/unread-count])]
     [rn/view
-     {:style (style/options-content-container bottom-inset)}
+     {:style {:background-color        colors/neutral-100
+              :padding-bottom          (if platform/ios? bottom-inset 20)
+              :padding-top             20
+              ;:height                  100
+              :border-top-left-radius  20
+              :border-top-right-radius 20
+              :width                   "100%"}}
      [quo/action-drawer
       [[{:icon           :i/check
          :override-theme :dark
@@ -55,20 +63,6 @@
                              (js/alert "No unread notifications to mark as read"))
                            (rf/dispatch [:bottom-sheet/hide]))}]]]]))
 
-(defn options-bottom-sheet
-  [visible? bottom-inset]
-  ;; not using the `bottom-sheet` component as it renders behind the full screen `Modal` component on
-  ;; Android
-  [rn/modal
-   {:is-visible                         @visible?
-    :use-native-driver                  true
-    :use-native-driver-for-backdrop     true
-    :hide-modal-content-while-animating true
-    :backdrop-opacity                   0.5
-    :on-backdrop-press                  #(reset! visible? false)
-    :style                              style/options-modal-container}
-   [options-content bottom-inset]])
-
 (defn empty-tab
   []
   (let [filter-status (rf/sub [:activity-center/filter-status])]
@@ -153,7 +147,7 @@
                                                     (contains? types-with-unread types/system))}]}]))
 
 (defn header
-  [request-close open-options]
+  [request-close open-sheet]
   [rn/view
    [rn/view {:style style/header-container}
     [quo/button
@@ -170,7 +164,11 @@
       :size                32
       :accessibility-label :activity-center-open-more
       :override-theme      :dark
-      :on-press            open-options}
+      :on-press            open-sheet
+      ;:on-press            #(rf/dispatch [:bottom-sheet/show-sheet
+      ;                                    {:content        options-bottom-sheet-content
+      ;                                     :override-theme :dark}])
+     }
      :i/options]]
    [quo/text
     {:size   :heading-1
@@ -221,19 +219,36 @@
 (defn view
   [request-close]
   (let [active-swipeable (atom nil)
-        visible?         (reagent/atom false)]
+        visible?         (reagent/atom false)
+        view-id          (rf/sub [:view-id])]
     [:f>
      (fn []
        (rn/use-effect-once #(rf/dispatch [:activity-center.notifications/fetch-first-page]))
        [safe-area/consumer
         (fn [{:keys [top bottom]}]
           (let [notifications (rf/sub [:activity-center/notifications])
-                window-width  (rf/sub [:dimensions/window-width])]
-            [rn/view {:style (style/screen-container window-width top bottom)}
+                window-width  (rf/sub [:dimensions/window-width])
+                window-height (rf/sub [:dimensions/window-height])]
+            [rn/view {:style (style/screen-container window-width window-height top bottom)}
+             [rn/modal
+              {:is-visible                         @visible?
+               :use-native-driver                  true
+               :use-native-driver-for-backdrop     true
+               :hide-modal-content-while-animating true
+               :backdrop-opacity                   0.5
+               :on-backdrop-press                  #(reset! visible? false)
+               :style                              {:justify-content :flex-end
+                                                    :margin          0
+                                                    :width           "100%"
+                                                    :align-self      :center}}
+              [options-bottom-sheet-content bottom]]
              [blur/view
-              {:blurAmount 5
-               :style      style/blur-background}]
-             [options-bottom-sheet visible? bottom]
+              {:blurAmount 32
+               :style      {:position :absolute
+                            :top      0
+                            :bottom   0
+                            :left     0
+                            :right    0}}]
              [header request-close #(reset! visible? true)]
              [rn/flat-list
               {:data                      notifications

src/status_im2/contexts/quo_preview/profile/profile_card.cljs

@@ -7,21 +7,15 @@
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label "Show: Is from key card?"
+  [{:label "Show: Sign in to this profile?"
+    :key   :show-sign-profile?
+    :type  :boolean}
+   {:label "Show: Is from key card?"
     :key   :key-card?
     :type  :boolean}
    {:label "Show: Emoji hash?"
     :key   :show-emoji-hash?
     :type  :boolean}
-   {:label "Show: User hash?"
-    :key   :show-user-hash?
-    :type  :boolean}
-   {:label "Show: Options Button?"
-    :key   :show-options-button?
-    :type  :boolean}
-   {:label "Show: Logged In?"
-    :key   :show-logged-in?
-    :type  :boolean}
    {:label   "Customization Color"
     :key     :customization-color
     :type    :select
@@ -57,21 +51,22 @@
     :type  :text}
    {:label "Emoji hash"
     :key   :emoji-hash
+    :type  :text}
+   {:label "Sign button label"
+    :key   :sign-label
     :type  :text}])
 
 (defn cool-preview
   []
-  (let [state (reagent/atom {:key-card? false
+  (let [state (reagent/atom {:show-sign-profile? true
+                             :key-card? true
                              :name "Matt Grote"
-                             :on-options-press nil
-                             :on-card-press nil
-                             :show-options-button? true
-                             :show-logged-in? true
-                             :show-user-hash? false
+                             :sign-label "Sign in to this profile"
+                             :on-press-dots nil
                              :on-press-sign nil
                              :customization-color :turquoise
                              :profile-picture (resources/get-mock-image :user-picture-male5)
-                             :show-emoji-hash? false
+                             :show-emoji-hash? true
                              :hash "zQ3k83euenmcikw7474hfu73t5N"
                              :emoji-hash "😄😂🫣🍑😇🤢😻🥷🏻🦸🏻‍♀️🦸🏻🦸🏻‍♂️🦹🏻‍♀️🧑🏻‍🎄🎅🏻"})]
     (fn []

translations/en.json

@@ -1975,6 +1975,5 @@
     "strength-divider-weak-label": "Weak",
     "strength-divider-okay-label": "Okay",
     "strength-divider-strong-label": "Strong",
-    "strength-divider-very-strong-label": "Very strong",
-    "logged-in": "Logged in"
+    "strength-divider-very-strong-label": "Very strong"
 }

yarn.lock

@@ -9473,6 +9473,11 @@ react-native-modal@^13.0.1:
     prop-types "^15.6.2"
     react-native-animatable "1.3.3"
 
+react-native-navigation-bar-color@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/react-native-navigation-bar-color/-/react-native-navigation-bar-color-2.0.2.tgz#2e14ca79a656d81d5b4b7433ae43966ef5206444"
+  integrity sha512-ZmpLWRocyme1au11e5ZuecMS/UCi57nlzgnioi03Q6ERMbeUOqqbWgNBaNB7SsCeqBV6fZPjo3+A64zEIpzw4w==
+
 react-native-navigation@^7.27.1:
   version "7.27.1"
   resolved "https://registry.yarnpkg.com/react-native-navigation/-/react-native-navigation-7.27.1.tgz#90bfac2a400109cc036394b4ee807a997da6a7b4"