update blur

updates

updates

updates

updates

updates

updates

updates

updates

ios/Podfile.lock

@@ -228,8 +228,6 @@ 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):
@@ -240,7 +238,7 @@ PODS:
     - React
   - react-native-status (1.0.0):
     - React
-  - react-native-status-keycard (2.5.39):
+  - react-native-status-keycard (2.5.38):
     - Keycard
     - React
   - react-native-webview (11.16.0):
@@ -392,7 +390,6 @@ 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)
@@ -436,7 +433,6 @@ 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`)
@@ -473,7 +469,6 @@ 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`)
@@ -487,7 +482,6 @@ SPEC REPOS:
     - libwebp
     - SDWebImage
     - SDWebImageWebPCoder
-    - ShowTime
     - SQLCipher
     - SSZipArchive
     - TOCropViewController
@@ -551,8 +545,6 @@ 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:
@@ -648,7 +640,7 @@ SPEC CHECKSUMS:
   FBLazyVector: 352a8ca9bbc8e2f097d680747a8c97ecef12d469
   FBReactNativeSpec: 7dfb84f624136a45727c813ed21d130cd3e61beb
   Folly: b73c3869541e86821df3c387eb0af5f65addfab4
-  glog: 36ce0530c6d2c3a5a4326885ef4069564887a1db
+  glog: 997518ea2aa2d8cd5df9797b641b758d52ecf2bc
   HMSegmentedControl: 34c1f54d822d8308e7b24f5d901ec674dfa31352
   Keycard: ac6df4d91525c3c82635ac24d4ddd9a80aca5fc8
   libwebp: 60305b2e989864154bd9be3d772730f08fc6a59c
@@ -674,13 +666,12 @@ 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: f1c1227b2d5984c10fb44db68e4bfd2937f31e98
+  react-native-status-keycard: f60ca57d789aad6875c64ece81ab06ef0609e0d3
   react-native-webview: 28a8636d97ee641f2ee8f20492d7a6c269c1d703
   React-RCTActionSheet: e911b99f0d6fa7711ffc2f62d236b12a32771835
   React-RCTAnimation: ad8b853170a059faf31d6add34f67d22391bbe01
@@ -713,13 +704,12 @@ SPEC CHECKSUMS:
   SDWebImage: a7f831e1a65eb5e285e3fb046a23fcfbf08e696d
   SDWebImageWebPCoder: 908b83b6adda48effe7667cd2b7f78c897e5111d
   secp256k1: f61d67e6fdcb85fd727acf1bf35ace6036db540c
-  ShowTime: 06cc9dc79886274b21041fe19b79c9eff59b9714
   SQLCipher: f9fcf29b2e59ced7defc2a2bdd0ebe79b40d4990
   SSZipArchive: fe6a26b2a54d5a0890f2567b5cc6de5caa600aef
   TOCropViewController: edfd4f25713d56905ad1e0b9f5be3fbe0f59c863
   TouchID: ba4c656d849cceabc2e4eef722dea5e55959ecf4
   Yoga: 0276e9f20976c8568e107cfc1163a8629051adc0
 
-PODFILE CHECKSUM: 06348d9065f85ab25a2c9560c69af5425c37e29e
+PODFILE CHECKSUM: ca5d07911eadc1267649ecc15379e5127a0cc839
 
 COCOAPODS: 1.11.3

package.json

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

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

@@ -1,63 +1,80 @@
 (ns quo2.components.profile.profile-card.view
-  (: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]))
-
+  (: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]))
 
 (defn 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)}
+  [{: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}
    [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}]
-    [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)
+    (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}
      [text/text
-      {:weight          :monospace
+      {:size            :heading-2
+       :weight          :semi-bold
        :number-of-lines 1
-       :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])])
+       :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])]])

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]
+               label type labelled? blurred? icon-color override-theme]
         :or   {size 32}}]
     (let [state (cond disabled? :disabled
                       active    :active
                       :else     :default)
           {:keys [border-color blurred-border-color text-color]}
-          (get-in themes [(theme/get-theme) state])]
+          (get-in themes [(or override-theme (theme/get-theme)) state])]
       [rn/view {:style {:align-items :center}}
        [base-tag/base-tag
         {:id                  id

src/react_native/core.cljs

@@ -70,7 +70,6 @@
   (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,8 +73,3 @@
 (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,7 +51,6 @@
 (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,29 +45,26 @@
 
 
 (defn ac-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)]])
+  [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]]))
 
 (defn top-nav
   "[top-nav opts]
@@ -83,10 +80,16 @@
         notification-indicator :unread-dot
         counter-label          "0"
         visible?               (reagent/atom false)
-        is-visible?            (reagent/atom false)
-        view-id                (rf/sub [:view-id])]
+        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?)))]
     [rn/view {:style (assoc style :height 56)}
-     [ac-modal visible? is-visible? view-id]
+     [ac-modal visible? view-id]
      ;; Left Section
      [rn/touchable-without-feedback {:on-press #(rf/dispatch [:navigate-to :my-profile])}
       [rn/view
@@ -122,15 +125,7 @@
 
                   :else
                   [{:x 33 :y -7 :width 18 :height 18 :borderRadius 7}])}
-        ;[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]]
+        [base-button :i/activity-center open-ac :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,5 +1,6 @@
 (ns status-im2.contexts.activity-center.style
-  (:require [quo2.foundations.colors :as colors]))
+  (:require [quo2.foundations.colors :as colors]
+            [react-native.platform :as platform]))
 
 (def screen-padding 20)
 
@@ -15,10 +16,9 @@
    :color              colors/white})
 
 (defn screen-container
-  [window-width window-height top bottom]
+  [window-width top bottom]
   {:flex           1
    :width          window-width
-   ;:height        window-height
    :padding-top    (if (pos? top) (+ top 12) 12)
    :padding-bottom bottom})
 
@@ -61,3 +61,25 @@
    :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,7 +3,6 @@
             [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]
@@ -22,7 +21,6 @@
 (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
@@ -33,17 +31,11 @@
                                                        :unread)}])}]))
 
 
-(defn options-bottom-sheet-content
+(defn options-content
   [bottom-inset]
   (let [unread-count (rf/sub [:activity-center/unread-count])]
     [rn/view
-     {: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%"}}
+     {:style (style/options-content-container bottom-inset)}
      [quo/action-drawer
       [[{:icon           :i/check
          :override-theme :dark
@@ -63,6 +55,20 @@
                              (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])]
@@ -147,7 +153,7 @@
                                                     (contains? types-with-unread types/system))}]}]))
 
 (defn header
-  [request-close open-sheet]
+  [request-close open-options]
   [rn/view
    [rn/view {:style style/header-container}
     [quo/button
@@ -164,11 +170,7 @@
       :size                32
       :accessibility-label :activity-center-open-more
       :override-theme      :dark
-      :on-press            open-sheet
-      ;:on-press            #(rf/dispatch [:bottom-sheet/show-sheet
-      ;                                    {:content        options-bottom-sheet-content
-      ;                                     :override-theme :dark}])
-     }
+      :on-press            open-options}
      :i/options]]
    [quo/text
     {:size   :heading-1
@@ -219,36 +221,19 @@
 (defn view
   [request-close]
   (let [active-swipeable (atom nil)
-        visible?         (reagent/atom false)
-        view-id          (rf/sub [:view-id])]
+        visible?         (reagent/atom false)]
     [: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])
-                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]]
+                window-width  (rf/sub [:dimensions/window-width])]
+            [rn/view {:style (style/screen-container window-width top bottom)}
              [blur/view
-              {:blurAmount 32
-               :style      {:position :absolute
-                            :top      0
-                            :bottom   0
-                            :left     0
-                            :right    0}}]
+              {:blurAmount 5
+               :style      style/blur-background}]
+             [options-bottom-sheet visible? bottom]
              [header request-close #(reset! visible? true)]
              [rn/flat-list
               {:data                      notifications

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

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

translations/en.json

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

yarn.lock

@@ -9473,11 +9473,6 @@ 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"