Merge branch 'develop' into issue-13832

src/quo/components/bottom_sheet/style.cljs

@@ -1,5 +1,6 @@
 (ns quo.components.bottom-sheet.style
   (:require [quo.design-system.colors :as colors]
+            [quo2.foundations.colors :as quo2.colors]
             [quo.design-system.spacing :as spacing]))
 
 (def border-radius 16)
@@ -24,8 +25,12 @@
    :bottom           0})
 
 (defn content-container
-  [window-height]
-  {:background-color        (:ui-background @colors/theme)
+  [window-height new-ui?]
+  {:background-color       (if new-ui?
+                             (quo2.colors/theme-colors
+                              quo2.colors/white
+                              quo2.colors/neutral-90)
+                             (:ui-background @colors/theme))
    :border-top-left-radius  border-radius
    :border-top-right-radius border-radius
    :height                  (* window-height 2)})

src/quo/components/bottom_sheet/view.cljs

@@ -8,7 +8,8 @@
             [quo.components.safe-area :as safe-area]
             [quo.components.bottom-sheet.style :as styles]
             [quo.gesture-handler :as gesture-handler]
-            [quo.design-system.colors :as colors]))
+            [quo.design-system.colors :as colors]
+            [status-im.utils.config :as config]))
 
 (def opacity-coeff 0.8)
 (def close-duration 150)
@@ -101,7 +102,8 @@
                               {:inputRange  [(animated/multiply open-snap-point opacity-coeff) 0]
                                :outputRange [1 0]
                                :extrapolate (:clamp animated/extrapolate)})))
-                          [])]
+                          [])
+        new-ui?           @config/new-ui-enabled?]
     (animated/code!
      (fn []
        (animated/cond* (animated/and* (animated/eq master-state (:end gesture-handler/states))
@@ -185,7 +187,7 @@
                                      (when platform/ios?
                                        {:opacity          opacity
                                         :background-color (:backdrop @colors/theme)}))}]]
-      [animated/view {:style (merge (styles/content-container window-height)
+      [animated/view {:style (merge (styles/content-container window-height new-ui?)
                                     {:transform [{:translateY (if (= sheet-height max-height)
                                                                 (animated/add translate-y keyboard-height-android-delta)
                                                                 translate-y)}

src/quo/components/list/item.cljs

@@ -10,6 +10,8 @@
             [quo.components.tooltip :as tooltip]
             ;; FIXME:
             [status-im.ui.components.icons.icons :as icons]
+            [quo2.foundations.colors :as quo2.colors]
+            [quo2.components.icon :as quo.icons]
             [quo.components.animated.pressable :as animated]))
 
 (defn themes [theme]
@@ -38,7 +40,17 @@
                :icon-bg-color      (:ui-01 @colors/theme)
                :active-background  (:ui-01 @colors/theme)
                :passive-background (:ui-background @colors/theme)
-               :text-color         (:text-02 @colors/theme)}))
+               :text-color         (:text-02 @colors/theme)}
+    :light    {:icon-color         quo2.colors/neutral-50
+               :icon-bg-color      quo2.colors/white
+               :text-color         quo2.colors/black
+               :active-background  quo2.colors/neutral-10
+               :passive-background quo2.colors/white}
+    :dark     {:icon-color         quo2.colors/neutral-40
+               :icon-bg-color      quo2.colors/neutral-90
+               :text-color         quo2.colors/white
+               :active-background  quo2.colors/neutral-70
+               :passive-background quo2.colors/neutral-90}))
 
 (defn size->icon-size [size]
   (case size
@@ -65,7 +77,7 @@
         children))
 
 (defn icon-column
-  [{:keys [icon icon-bg-color icon-color size icon-container-style]}]
+  [{:keys [icon icon-bg-color icon-color size icon-container-style new-ui?]}]
   (when icon
     (let [icon-size (size->icon-size size)]
       [rn/view {:style (or icon-container-style (:tiny spacing/padding-horizontal))}
@@ -74,13 +86,19 @@
          icon
 
          (keyword? icon)
-         [rn/view {:style {:width            icon-size
-                           :height           icon-size
-                           :align-items      :center
-                           :justify-content  :center
-                           :border-radius    (/ icon-size 2)
-                           :background-color icon-bg-color}}
-          [icons/icon icon {:color icon-color}]])])))
+         (if new-ui?
+           [quo.icons/icon icon {:container-style {:align-items     :center
+                                                   :justify-content :center}
+                                 :color       icon-color
+                                 :size        20
+                                 :resize-mode :center}]
+           [rn/view {:style {:width            icon-size
+                             :height           icon-size
+                             :align-items      :center
+                             :justify-content  :center
+                             :border-radius    (/ icon-size 2)
+                             :background-color icon-bg-color}}
+            [icons/icon icon {:color icon-color}]]))])))
 
 (defn title-column
   [{:keys [title text-color subtitle subtitle-max-lines subtitle-secondary
@@ -252,7 +270,8 @@
                    :subtitle                  subtitle
                    :subtitle-max-lines        subtitle-max-lines
                    :subtitle-secondary        subtitle-secondary
-                   :right-side-present?       (or accessory chevron)}]
+                   :right-side-present?       (or accessory chevron)
+                   :new-ui?                   :new-ui?}]
        [right-side {:chevron             chevron
                     :active              active
                     :disabled            disabled

src/quo2/components/base_tag.cljs

@@ -0,0 +1,32 @@
+(ns quo2.components.base-tag
+  (:require
+   [quo.react-native :as rn]))
+
+(defn style-container [size disabled border-color border-width background-color label type]
+  (merge {:height             size
+          :border-color       border-color
+          :background-color   background-color
+          :border-width       border-width
+          :border-radius      size
+          :align-items        :center
+          :justify-content    :center}
+         (when disabled
+           {:opacity 0.3})
+         (when (and (or (= type :icon) (= type :emoji)) (not label))
+           {:width       size})))
+
+(defn base-tag
+  "opts
+   {:type :icon/:emoji/:label/:permission
+    :size 32/24}
+    :labelled true"
+  [_]
+  (fn [{:keys [id size disabled border-color border-width background-color on-press
+               accessibility-label label type] :or   {size 32}} children]
+    [rn/touchable-without-feedback (merge {:disabled            disabled
+                                           :accessibility-label accessibility-label}
+                                          (when on-press
+                                            {:on-press #(on-press id)}))
+     [rn/view {:style (merge (style-container size disabled border-color border-width
+                                              background-color label type))}
+      children]]))

src/quo2/components/button.cljs

@@ -48,7 +48,7 @@
                                  :background-color {:default  colors/primary-50-opa-20
                                                     :pressed  colors/primary-50-opa-30
                                                     :disabled colors/primary-50-opa-20}}
-                     :grey      {:icon-color       colors/neutral-40
+                     :grey      {:icon-color       colors/white
                                  :label            {:style {:color colors/white}}
                                  :background-color {:default  colors/neutral-80
                                                     :pressed  colors/neutral-60

src/quo2/components/community_card_view.cljs

@@ -0,0 +1,190 @@
+(ns quo2.components.community-card-view
+  (:require
+   [quo2.components.text :as text]
+   [quo2.components.icon :as icons]
+   [quo2.foundations.colors :as colors]
+   [quo2.components.permission-tag :as permission]
+   [quo2.components.filter-tag  :as filter-tag]
+   [status-im.communities.core :as communities]
+   [status-im.utils.handlers :refer [>evt <sub]]
+   [status-im.ui.components.react :as react]
+   [status-im.utils.money :as money]
+   [status-im.i18n.i18n :as i18n]
+   [status-im.ui.screens.communities.styles :as styles]
+   [status-im.ui.screens.communities.community :as community]
+   [status-im.ui.screens.communities.icon :as communities.icon]))
+
+(defn format-members [count]
+  (if (> count 1000000)
+    (str (money/with-precision (/ count 1000000) 1) (i18n/label :t/M))
+    (if (and (> count 999) (< count 1000000))
+      (str (money/with-precision (/ count 1000) 1) (i18n/label :t/K))
+      count)))
+
+(defn community-stats [{:keys [icon count icon-color]}]
+  [react/view (styles/stats-count-container)
+   [react/view {:margin-right  4}
+    [icons/icon icon {:container-style {:align-items     :center
+                                        :justify-content :center}
+                      :resize-mode      :center
+                      :size             16
+                      :color            icon-color}]]
+   [text/text {:weight  :regular
+               :size    :paragraph-1}
+    (format-members count)]])
+
+(defn community-stats-column [type]
+  (let [icon-color  (colors/theme-colors colors/neutral-50 colors/neutral-40)]
+    [react/view (if (= type :card-view)
+                  (styles/card-stats-container)
+                  (styles/list-stats-container))
+     [community-stats {:icon       :main-icons2/group
+                       :count      630000
+                       :icon-color icon-color}]
+     [community-stats {:icon       :main-icons2/lightning
+                       :count      3300
+                       :icon-color icon-color}]
+     [community-stats {:icon       :main-icons2/placeholder
+                       :count      63
+                       :icon-color icon-color}]]))
+
+(defn community-tags [tags]
+  [react/view (styles/community-tags-container)
+   (for [{:keys [id tag-label resource]} tags]
+     ^{:key id}
+     [react/view {:margin-right 8}
+      [filter-tag/filter-tag
+       {:id          id
+        :size        24
+        :label       tag-label
+        :type        :emoji
+        :labelled    true
+        :resource    resource}]])])
+
+(defn community-title [{:keys [title description]}]
+  [react/view (styles/community-title-description-container)
+   (when title
+     [text/text
+      {:accessibility-label :chat-name-text
+       :number-of-lines     1
+       :ellipsize-mode      :tail
+       :weight              :semi-bold
+       :size                :heading-2}
+      title])
+   (when description
+     [text/text
+      {:accessibility-label :community-description-text
+       :number-of-lines     2
+       :ellipsize-mode      :tail
+       :weight  :regular
+       :size    :paragraph-1}
+      description])])
+
+(defn permission-tag-container [{:keys [locked tokens]}]
+  [permission/tag {:background-color (colors/theme-colors
+                                      colors/neutral-10
+                                      colors/neutral-80)
+                   :locked           locked
+                   :tokens           tokens
+                   :size             24}])
+
+(defn community-card-view-item [{:keys [id name description locked
+                                        status tokens cover tags featured] :as community}]
+  (let [width (* (<sub [:dimensions/window-width]) 0.90)]
+    [react/view {:style (merge (styles/community-card 20)
+                               {:margin-bottom      16}
+                               (if featured
+                                 {:margin-right      12
+                                  :width             width}
+                                 {:flex              1
+                                  :margin-horizontal 20}))}
+     [react/view {:style         {:height          230
+                                  :border-radius   20}
+                  :on-press      (fn []
+                                   (>evt [::communities/load-category-states id])
+                                   (>evt [:dismiss-keyboard])
+                                   (>evt [:navigate-to :community {:community-id id}]))
+                  :on-long-press #(>evt [:bottom-sheet/show-sheet
+                                         {:content (fn [] [community/community-actions community])}])}
+      [react/view {:flex    1}
+       [react/view (styles/community-cover-container)
+        [react/image {:source      cover
+                      :style  {:flex            1
+                               :border-radius   20}}]]
+       [react/view (styles/card-view-content-container)
+        [react/view (styles/card-view-chat-icon)
+         [communities.icon/community-icon-redesign community 48]]
+        (when (= status :gated)
+          [react/view (styles/permission-tag-styles)
+           [permission-tag-container {:locked       locked
+                                      :status       status
+                                      :tokens       tokens}]])
+        [community-title {:title       name
+                          :description description}]
+        [community-stats-column :card-view]
+        [community-tags tags]]]]]))
+
+(defn communities-list-view-item [{:keys [id name locked status tokens background-color] :as community}]
+  [react/view {:style (merge (styles/community-card 16)
+                             {:margin-bottom    12
+                              :margin-horizontal 20})}
+   [react/view {:style         {:height             56
+                                :border-radius      16}
+                :on-press      (fn []
+                                 (>evt [::communities/load-category-states id])
+                                 (>evt [:dismiss-keyboard])
+                                 (>evt [:navigate-to :community {:community-id id}]))
+                :on-long-press #(>evt [:bottom-sheet/show-sheet
+                                       {:content (fn []
+                                                   [community/community-actions community])}])}
+    [react/view {:flex    1}
+     [react/view {:flex-direction     :row
+                  :border-radius      16
+                  :padding-horizontal 12
+                  :align-items        :center
+                  :padding-vertical   8
+                  :background-color   background-color}
+      [react/view
+       [communities.icon/community-icon-redesign community 32]]
+      [react/view {:flex              1
+                   :margin-horizontal 12}
+       [text/text {:weight              :semi-bold
+                   :size                :paragraph-1
+                   :accessibility-label :community-name-text
+                   :number-of-lines     1
+                   :ellipsize-mode      :tail}
+        name]
+       [community-stats-column :list-view]]
+      (when (= status :gated)
+        [permission-tag-container {:locked       locked
+                                   :status       status
+                                   :tokens       tokens}])]]]])
+
+(defn communities-membership-list-item [{:keys [id name status tokens locked] :as community}]
+  [react/view {:margin-bottom       12
+               :padding-horizontal  8}
+   [react/touchable-highlight {:underlay-color      colors/primary-50-opa-5
+                               :style               {:border-radius 12}
+                               :on-press      (fn []
+                                                (>evt [::communities/load-category-states id])
+                                                (>evt [:dismiss-keyboard])
+                                                (>evt [:navigate-to :community {:community-id id}]))
+                               :on-long-press #(>evt [:bottom-sheet/show-sheet
+                                                      {:content (fn []
+                                                                  [community/community-actions community])}])}
+    [react/view {:flex               1
+                 :padding-vertical   8
+                 :padding-horizontal 12}
+     [react/view {:flex-direction    :row
+                  :border-radius     16
+                  :align-items       :center}
+      [communities.icon/community-icon-redesign community 48]
+      [react/view {:margin-left   12
+                   :flex          1}
+       [community-title {:title  name}]]
+      (when (= status :gated)
+        [react/view {:justify-content   :center
+                     :margin-right      12}
+         [permission-tag-container {:locked       locked
+                                    :status       status
+                                    :tokens       tokens}]])]]]])