Merge branch 'develop' into jc/promesa

src/legacy/status_im/data_store/communities.cljs

@@ -64,6 +64,7 @@
  :canJoin :can-join?
  :requestedToJoinAt :requested-to-join-at
  :isMember :is-member?
+ :outroMessage :outro-message
  :adminSettings :admin-settings
  :tokenPermissions :token-permissions
  :communityTokensMetadata :tokens-metadata

src/quo/components/drawers/drawer_action/component_spec.cljs

@@ -0,0 +1,54 @@
+(ns quo.components.drawers.drawer-action.component-spec
+ (:require
+ [quo.components.drawers.drawer-action.view :as drawer-action]
+ [quo.foundations.colors :as colors]
+ [test-helpers.component :as h]))
+
+(h/describe "Drawers: drawer-action"
+ (h/test "default render"
+ (h/render-with-theme-provider [drawer-action/view {}])
+ (h/is-truthy (h/query-by-label-text :container)))
+
+ (h/test "on-press-in changes internal state to :pressed"
+ (h/render-with-theme-provider [drawer-action/view {}])
+ (h/fire-event :on-press-in (h/get-by-label-text :container))
+ (h/wait-for #(h/has-style (h/query-by-label-text :container)
+ {:backgroundColor (colors/resolve-color :blue :light 5)})))
+
+ (h/test "render default action with state :selected"
+ (h/render-with-theme-provider [drawer-action/view {:state :selected}])
+ (h/has-style (h/query-by-label-text :container)
+ {:backgroundColor (colors/resolve-color :blue :light 5)})
+ (h/is-truthy (h/query-by-label-text :check-icon)))
+
+ (h/test "call on-press"
+ (let [on-press (h/mock-fn)]
+ (h/render-with-theme-provider [drawer-action/view {:on-press on-press}])
+ (h/fire-event :on-press (h/get-by-label-text :container))
+ (h/was-called on-press)))
+
+
+ (h/test "render :arrow action"
+ (h/render-with-theme-provider [drawer-action/view {:action :arrow}])
+ (h/is-truthy (h/query-by-label-text :arrow-icon)))
+
+ (h/test "render :toggle action"
+ (h/render-with-theme-provider [drawer-action/view {:action :toggle}])
+ (h/is-truthy (h/query-by-label-text "toggle-off")))
+
+ (h/test "render :toggle action with state :selected"
+ (h/render-with-theme-provider [drawer-action/view
+ {:action :toggle
+ :state :selected}])
+ (h/is-truthy (h/query-by-label-text "toggle-on"))
+ (h/has-style (h/query-by-label-text :container)
+ {:backgroundColor :transparent}))
+
+ (h/test "render default action with icon, title, description"
+ (h/render-with-theme-provider [drawer-action/view
+ {:icon :i/contact
+ :title "Check contact"
+ :description "Just a small desc"}])
+ (h/is-truthy (h/query-by-label-text :left-icon))
+ (h/is-truthy (h/query-by-text "Check contact"))
+ (h/is-truthy (h/query-by-text "Just a small desc"))))

src/quo/components/drawers/drawer_action/schema.cljs

@@ -0,0 +1,16 @@
+(ns quo.components.drawers.drawer-action.schema)
+
+(def ?schema
+ [:=>
+ [:cat
+ [:map {:closed true}
+ [:action {:optional true} [:maybe [:enum :arrow :toggle]]]
+ [:icon {:optional true} [:maybe :keyword]]
+ [:description {:optional true} [:maybe :string]]
+ [:state {:optional true} [:maybe [:enum :selected]]]
+ [:title {:optional true} :string]
+ [:on-press {:optional true} [:maybe fn?]]
+ [:customization-color {:optional true}
+ [:maybe :schema.common/customization-color]]
+ [:blur? {:optional true} [:maybe :boolean]]]]
+ :any])

src/quo/components/drawers/drawer_action/style.cljs

@@ -0,0 +1,55 @@
+(ns quo.components.drawers.drawer-action.style
+ (:require
+ [quo.foundations.colors :as colors]))
+
+(defn- background-color
+ [{:keys [state action customization-color theme pressed? blur?]}]
+ (let [checked? (and (= :selected state) (nil? action))]
+ (cond
+ (and (or checked? pressed?) blur?)
+ colors/white-opa-5
+
+ (or pressed? checked?)
+ (colors/resolve-color customization-color theme 5)
+
+ :else :transparent)))
+
+(defn container
+ [{:keys [description?] :as props}]
+ {:flex-direction :row
+ :align-items :center
+ :padding-vertical (if description? 8 13)
+ :padding-horizontal 13
+ :border-radius 12
+ :background-color (background-color props)})
+
+(defn text-container
+ []
+ {:flex 1
+ :margin-right 12})
+
+(defn- neutral-color
+ [theme blur?]
+ (if blur?
+ colors/white-70-blur
+ (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)))
+
+(defn left-icon
+ []
+ {:align-self :flex-start
+ :margin-right 13
+ :margin-top 1})
+
+(defn icon-color
+ [{:keys [theme blur?]}]
+ (neutral-color theme blur?))
+
+(defn desc
+ [{:keys [theme blur?]}]
+ {:color (neutral-color theme blur?)})
+
+(defn check-color
+ [{:keys [theme blur? customization-color]}]
+ (if blur?
+ colors/white-70-blur
+ (colors/resolve-color customization-color theme)))

src/quo/components/drawers/drawer_action/view.cljs

@@ -0,0 +1,73 @@
+(ns quo.components.drawers.drawer-action.view
+ (:require
+ [quo.components.drawers.drawer-action.schema :as component-schema]
+ [quo.components.drawers.drawer-action.style :as style]
+ [quo.components.icon :as icon]
+ [quo.components.markdown.text :as text]
+ [quo.components.selectors.selectors.view :as selectors]
+ [quo.theme :as theme]
+ [react-native.core :as rn]
+ [schema.core :as schema]))
+
+(defn view-internal
+ [{:keys [action icon description state title on-press
+ customization-color blur?]
+ :or {customization-color :blue
+ blur? false}}]
+ (let [theme (theme/use-theme-value)
+ [pressed? set-pressed] (rn/use-state false)
+ on-press-in (rn/use-callback #(set-pressed true))
+ on-press-out (rn/use-callback #(set-pressed false))]
+ [rn/pressable
+ {:on-press on-press
+ :on-press-in on-press-in
+ :on-press-out on-press-out
+ :style (style/container {:state state
+ :action action
+ :customization-color customization-color
+ :theme theme
+ :pressed? pressed?
+ :description? (not-empty description)
+ :blur? blur?})
+ :accessibility-label :container}
+ (when icon
+ [icon/icon icon
+ {:accessibility-label :left-icon
+ :container-style (style/left-icon)
+ :color (style/icon-color {:theme theme
+ :blur? blur?})}])
+
+ [rn/view {:style (style/text-container)}
+ [text/text {:weight :medium}
+ title]
+
+ (when (seq description)
+ [text/text
+ {:size :paragraph-2
+ :style (style/desc {:theme theme
+ :blur? blur?})}
+ description])]
+
+ (cond
+ (= action :toggle)
+ [selectors/view
+ {:theme theme
+ :label-prefix "toggle"
+ :customization-color customization-color
+ :type :toggle
+ :checked? (= state :selected)}]
+
+ (= action :arrow)
+ [icon/icon :i/chevron-right
+ {:accessibility-label :arrow-icon
+ :color (style/icon-color {:theme theme
+ :blur? blur?})}]
+
+ (= state :selected)
+ [icon/icon :i/check
+ {:accessibility-label :check-icon
+ :color (style/check-color {:theme theme
+ :blur? blur?
+ :customization-color customization-color})}])]))
+
+(def view (schema/instrument #'view-internal component-schema/?schema))

src/quo/components/gradient/gradient_cover/view.cljs

@@ -12,9 +12,9 @@
  ;; the `:or` destructuring won't work because it's only applied when the
  ;; `:customization-color` key is non-existent. While deleting an account the key exists
  ;; and has a `nil` value.
- (when customization-color
- (let [color-top (colors/resolve-color customization-color 50 20)
-  color-bottom (colors/resolve-color customization-color 50 0)]
+ (let [color-top (colors/resolve-color customization-color 50 20)
+   color-bottom (colors/resolve-color customization-color 50 0)]
+ (when (and color-top color-bottom)
  [linear-gradient/linear-gradient
  {:accessibility-label :gradient-cover
  :colors [color-top color-bottom]

src/quo/components/wallet/account_overview/view.cljs

@@ -100,8 +100,7 @@
  :or {customization-color :blue}}]
  (let [time-frame-string (time-string time-frame time-frame-string)
  up? (= metrics :positive)]
- [rn/view
- {:style style/account-overview-wrapper}
+ [rn/view {:style style/account-overview-wrapper}
  (if (= :loading state)
  [loading-state (colors/theme-colors colors/neutral-5 colors/neutral-90 theme)]
  [rn/view
@@ -113,19 +112,17 @@
  :size :heading-1
  :style style/current-value}
  current-value]
- [rn/view
- {:style style/row-centered}
- [:<>
- (when (seq time-frame-string)
- [text/text
- {:weight :medium
- :size :paragraph-2
- :style (style/bottom-time-text (and (not= :custom time-frame)
- (seq time-frame-to-string)))}
- time-frame-string])
- (when (and (= :custom time-frame)
- (seq time-frame-to-string))
- [custom-time-frame time-frame-to-string])]
+ [rn/view {:style style/row-centered}
+ (when (seq time-frame-string)
+ [text/text
+ {:weight :medium
+ :size :paragraph-2
+ :style (style/bottom-time-text (and (not= :custom time-frame)
+ (seq time-frame-to-string)))}
+ time-frame-string])
+ (when (and (= :custom time-frame)
+ (seq time-frame-to-string))
+ [custom-time-frame time-frame-to-string])
  (when (and (seq percentage-change)
  (seq currency-change))
  [numeric-changes percentage-change currency-change customization-color theme up?])]])]))

src/quo/core.cljs

@@ -48,6 +48,7 @@
  quo.components.drawers.action-drawers.view
  quo.components.drawers.bottom-actions.view
  quo.components.drawers.documentation-drawers.view
+ quo.components.drawers.drawer-action.view
  quo.components.drawers.drawer-buttons.view
  quo.components.drawers.drawer-top.view
  quo.components.drawers.permission-context.view
@@ -250,6 +251,7 @@
 
 ;;;; Drawers
 (def action-drawer quo.components.drawers.action-drawers.view/action-drawer)
+(def drawer-action quo.components.drawers.drawer-action.view/view)
 (def documentation-drawers quo.components.drawers.documentation-drawers.view/view)
 (def drawer-buttons quo.components.drawers.drawer-buttons.view/view)
 (def drawer-top quo.components.drawers.drawer-top.view/view)

src/quo/core_spec.cljs

@@ -25,6 +25,7 @@
  quo.components.drawers.action-drawers.component-spec
  quo.components.drawers.bottom-actions.component-spec
  quo.components.drawers.documentation-drawers.component-spec
+ quo.components.drawers.drawer-action.component-spec
  quo.components.drawers.drawer-buttons.component-spec
  quo.components.drawers.drawer-top.component-spec
  quo.components.drawers.permission-context.component-spec

src/status_im/contexts/chat/messenger/messages/list/style.cljs

@@ -8,10 +8,6 @@
  {:flex 1
  :z-index 2})
 
-(def chat-actions-container
- {:margin-top 16
- :padding-bottom 20})
-
 (defn background-container
  [background-color background-opacity top-margin]
  (reanimated/apply-animations-to-style
@@ -24,12 +20,12 @@
  :height (+ top-margin messages.constants/header-container-radius)}))
 
 (defn header-bottom-part
- [border-radius theme top-margin]
+ [bottom theme top-margin]
  (reanimated/apply-animations-to-style
- {:border-top-left-radius border-radius
- :border-top-right-radius border-radius}
+ {:bottom bottom}
  {:background-color (colors/theme-colors colors/white colors/neutral-95 theme)
  :padding-horizontal 20
+ :border-radius 20
  :margin-top top-margin}))
 
 (defn header-image
@@ -43,5 +39,20 @@
  :border-radius 50
  :border-color (colors/theme-colors colors/white colors/neutral-95 theme)}))
 
-(def bio
- {:margin-top 8})
+(defn user-name-container
+ [top left]
+ (reanimated/apply-animations-to-style
+ {:top top
+ :left left}
+ {:z-index -1}))
+
+(def user-name
+ {:align-items :center
+ :flex-direction :row
+ :margin-top 52})
+
+(defn bio-and-actions
+ [top]
+ (reanimated/apply-animations-to-style
+ {:top top}
+ {:row-gap 16}))