Merge branch 'develop' into 17509

package.json

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

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

@@ -35,7 +35,7 @@
    :indicator-size   status indicator outer radius, set to nil or 0 when no indicator
    :indicator-border `indicator-size`-`indicator-border` is the inner radius
    :indicator-color  color for status indicator
-   :theme   :light or :dark
+   :theme            :light or :dark
    :background-color intials avatar background color
    :color            intials avatar text color
    :size             intials avatar radius

src/quo2/components/avatars/wallet_user_avatar.cljs

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

src/quo2/components/navigation/page_nav/style.cljs

@@ -12,12 +12,13 @@
    :align-items        :center})
 
 (defn center-content-container
-  [centered?]
+  [centered? center-opacity]
   {:flex              1
    :margin-horizontal 12
    :flex-direction    :row
    :align-items       :center
-   :justify-content   (if centered? :center :flex-start)})
+   :justify-content   (if centered? :center :flex-start)
+   :opacity           center-opacity})
 
 (def right-actions-container
   {:flex-direction :row})
@@ -79,6 +80,7 @@
      :text-align-vertical :center}))
 
 (def community-network-logo
-  {:width        24
-   :height       24
-   :margin-right 6})
+  {:width         24
+   :height        24
+   :border-radius 12
+   :margin-right  6})

src/quo2/components/navigation/page_nav/view.cljs

@@ -86,22 +86,22 @@
      nil)])
 
 (defn- title-center
-  [{:keys [centered? title]}]
-  [rn/view {:style (style/center-content-container centered?)}
+  [{:keys [centered? title center-opacity]}]
+  [rn/view {:style (style/center-content-container centered? center-opacity)}
    [text/text
     {:weight          :medium
      :size            :paragraph-1
      :number-of-lines 1}
     title]])
 
 (defn- dropdown-center
-  [{:keys [theme background dropdown-on-press dropdown-selected? dropdown-text]}]
+  [{:keys [theme background dropdown-on-press dropdown-selected? dropdown-text center-opacity]}]
   (let [dropdown-type  (cond
                          (= background :photo)                      :grey
                          (and (= theme :dark) (= background :blur)) :grey
                          :else                                      :ghost)
         dropdown-state (if dropdown-selected? :active :default)]
-    [rn/view {:style (style/center-content-container true)}
+    [rn/view {:style (style/center-content-container true center-opacity)}
      [dropdown/view
       {:type       dropdown-type
        :state      dropdown-state
@@ -111,8 +111,8 @@
       dropdown-text]]))
 
 (defn- token-center
-  [{:keys [theme background token-logo token-name token-abbreviation]}]
-  [rn/view {:style (style/center-content-container false)}
+  [{:keys [theme background token-logo token-name token-abbreviation center-opacity]}]
+  [rn/view {:style (style/center-content-container false center-opacity)}
    [rn/image {:style style/token-logo :source token-logo}]
    [text/text
     {:style           style/token-name
@@ -128,8 +128,8 @@
     token-abbreviation]])
 
 (defn- channel-center
-  [{:keys [theme background channel-emoji channel-name channel-icon]}]
-  [rn/view {:style (style/center-content-container false)}
+  [{:keys [theme background channel-emoji channel-name channel-icon center-opacity]}]
+  [rn/view {:style (style/center-content-container false center-opacity)}
    [rn/text {:style style/channel-emoji}
     channel-emoji]
    [text/text
@@ -141,11 +141,11 @@
    [icons/icon channel-icon {:size 16 :color (style/channel-icon-color theme background)}]])
 
 (defn- title-description-center
-  [{:keys [background theme picture title description]}]
-  [rn/view {:style (style/center-content-container false)}
+  [{:keys [background theme picture title description center-opacity]}]
+  [rn/view {:style (style/center-content-container false center-opacity)}
    (when picture
      [rn/view {:style style/group-avatar-picture}
-      [group-avatar/view {:picture picture :size 28}]])
+      [group-avatar/view {:picture picture :size :size-28}]])
    [rn/view {:style style/title-description-container}
     [text/text
      {:style           style/title-description-title
@@ -161,11 +161,11 @@
      description]]])
 
 (defn- community-network-center
-  [{:keys [type community-logo network-logo community-name network-name]}]
+  [{:keys [type community-logo network-logo community-name network-name center-opacity]}]
   (let [community? (= type :community)
         shown-logo (if community? community-logo network-logo)
         shown-name (if community? community-name network-name)]
-    [rn/view {:style (style/center-content-container false)}
+    [rn/view {:style (style/center-content-container false center-opacity)}
      [rn/image
       {:style  style/community-network-logo
        :source shown-logo}]
@@ -176,8 +176,8 @@
       shown-name]]))
 
 (defn- wallet-networks-center
-  [{:keys [networks networks-on-press background]}]
-  [rn/view {:style (style/center-content-container true)}
+  [{:keys [networks networks-on-press background center-opacity]}]
+  [rn/view {:style (style/center-content-container true center-opacity)}
    [network-dropdown/view
     {:state    :default
      :on-press networks-on-press

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

@@ -6,10 +6,14 @@
 
 (def text-container {:flex 1})
 
-(def title
+(def icon-title
   {:color  colors/white
    :height 22})
 
+(def main-title
+  {:color  colors/white
+   :height 26})
+
 (def subtitle
   {:color  colors/white-opa-70
    :height 18})
@@ -33,21 +37,23 @@
    :height 32})
 
 (def main-variant
-  {:flex          1
-   :margin-bottom -8})
+  {:flex 1})
 
 (def main-variant-text-container
   {:height             62
    :padding-top        10
-   :padding-bottom     12
    :padding-horizontal 12})
 
-(def touchable-overlay {:border-radius 16})
+(defn main-variant-image
+  [max-height]
+  {:flex       1
+   :max-height max-height})
+
+(def main-button
+  {:padding-horizontal 12 :margin-bottom 12 :margin-top 8})
 
 (defn card
   [height]
   {:background-color colors/white-opa-5
    :border-radius    16
    :height           height})
-
-(def main-variant-extra-space {:height 8})

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

@@ -1,74 +1,84 @@
 (ns quo2.components.onboarding.small-option-card.view
   (:require [quo2.components.markdown.text :as text]
             [quo2.components.onboarding.small-option-card.style :as style]
+            [quo2.components.buttons.button.view :as button]
             [quo2.foundations.colors :as colors]
             [react-native.core :as rn]
             [react-native.fast-image :as fast-image]))
 
-(defn- texts
-  [{:keys [title subtitle]}]
-  [rn/view {:style style/text-container}
-   [text/text
-    {:style           style/title
-     :size            :paragraph-1
-     :weight          :semi-bold
-     :number-of-lines 1}
-    title]
-   [text/text
-    {:style           style/subtitle
-     :size            :paragraph-2
-     :weight          :regular
-     :number-of-lines 1}
-    subtitle]])
-
 (defn- icon-variant
-  [{:keys [title subtitle image]}]
-  [rn/view {:style style/icon-variant}
+  [{:keys [title subtitle image accessibility-label on-press]}]
+  [rn/pressable
+   {:accessibility-label accessibility-label
+    :style               style/icon-variant
+    :underlay-color      colors/white-opa-5
+    :on-press            on-press}
    [rn/view {:style style/icon-variant-image-container}
     [fast-image/fast-image
      {:accessibility-label :small-option-card-icon-image
       :style               style/icon-variant-image
       :resize-mode         :contain
       :source              image}]]
-   [texts
-    {:title    title
-     :subtitle subtitle}]])
+   [rn/view {:style style/text-container}
+    [text/text
+     {:style           style/icon-title
+      :size            :paragraph-1
+      :weight          :semi-bold
+      :number-of-lines 1}
+     title]
+    [text/text
+     {:style           style/subtitle
+      :size            :paragraph-2
+      :weight          :regular
+      :number-of-lines 1}
+     subtitle]]])
 
 (defn- main-variant
-  [{:keys [title subtitle image max-height]}]
+  [{:keys [title subtitle button-label image max-height accessibility-label on-press]}]
   [rn/view {:style style/main-variant}
    [rn/view {:style style/main-variant-text-container}
-    [texts
-     {:title    title
-      :subtitle subtitle}]]
+    [text/text
+     {:style           style/main-title
+      :size            :heading-2
+      :weight          :semi-bold
+      :number-of-lines 1}
+     title]
+    [text/text
+     {:style           style/subtitle
+      :size            :paragraph-2
+      :weight          :regular
+      :number-of-lines 1}
+     subtitle]]
    [fast-image/fast-image
     {:accessibility-label :small-option-card-main-image
-     :style               {:flex 1 :max-height max-height}
+     :style               (style/main-variant-image max-height)
      :resize-mode         :contain
-     :source              image}]])
+     :source              image}]
+   [button/button
+    {:on-press            on-press
+     :accessibility-label accessibility-label
+     :type                :grey
+     :size                40
+     :container-style     style/main-button
+     :theme               :dark
+     :background          :blur}
+    button-label]])
 
 (defn small-option-card
-  "Variants: `:main` or `:icon`"
-  [{:keys [variant title subtitle image max-height on-press accessibility-label]
+  [{:keys [variant title subtitle button-label image max-height on-press accessibility-label]
     :or   {variant :main accessibility-label :small-option-card}}]
   (let [main-variant?  (= variant :main)
         card-component (if main-variant? main-variant icon-variant)
         card-height    (cond
                          (not main-variant?) style/icon-variant-height
                          max-height          (min max-height style/main-variant-height)
                          :else               style/main-variant-height)]
-    [rn/view
-     [rn/touchable-highlight
-      {:accessibility-label accessibility-label
-       :style               style/touchable-overlay
-       :active-opacity      1
-       :underlay-color      colors/white-opa-5
-       :on-press            on-press}
-      [rn/view {:style (style/card card-height)}
-       [card-component
-        {:title      title
-         :subtitle   subtitle
-         :image      image
-         :max-height max-height}]]]
-     (when main-variant?
-       [rn/view {:style style/main-variant-extra-space}])]))
+    [rn/view {:style (style/card card-height)}
+     [card-component
+      {:title               title
+       :subtitle            subtitle
+       :button-label        button-label
+       :on-press            on-press
+       :accessibility-label accessibility-label
+       :image               image
+       :max-height          max-height}]]))