Merge branch 'develop' into 16845

doc/decisions/0014-wallet-team.md

@@ -16,7 +16,7 @@ The responsibilities of the team are to implement the new wallet UI, with the su
 
 ## Decision
 
-Some team members have already expressed interest and some have been asked and accepted to join the wallet team, these team members are:
+The team members for the initial wallet team are:
 
 - @rasom
 - @OmarBasem
@@ -25,7 +25,5 @@ Some team members have already expressed interest and some have been asked and a
 - @briansztamfater
 - @smohamedjavid
 - @ulisesmac
-
-# Follow-up Actions
-
-- We still need 3/4 team members to join the wallet team
+- @erikseppanen
+- @mmilad75

doc/decisions/0015-team-structure.md

@@ -33,7 +33,7 @@ The people identified for each sections are as follow:
 
 - Messaging @flexsurfer, followed by @alwx
 - Syncing & Onboarding @siddarthkay
-- Communities @ilmotta
+- Communities @ilmotta, followed by @ajayesivan
 - Activity Center & Shell @J-Son89, followed by @Parveshdhull
 - Wallet (once the vertical team is created) @J-Son89, followed by @briansztamfater
 

src/quo2/components/avatars/group_avatar/style.cljs

@@ -3,12 +3,12 @@
 
 (defn container
   [{:keys [container-size customization-color theme]}]
-  {:width container-size
-   :height container-size
-   :align-items :center
-   :justify-content :center
-   :border-radius (/ container-size 2)
-   :background-color
-   (colors/theme-colors (colors/custom-color customization-color 50)
-                        (colors/custom-color customization-color 60)
-                        theme)})
+  {:width            container-size
+   :height           container-size
+   :align-items      :center
+   :justify-content  :center
+   :border-radius    (/ container-size 2)
+   :overflow         :hidden
+   :background-color (colors/theme-colors (colors/custom-color customization-color 50)
+                                          (colors/custom-color customization-color 60)
+                                          theme)})

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

@@ -7,34 +7,27 @@
             [quo2.components.avatars.group-avatar.style :as style]))
 
 (def sizes
-  {:icon      {:x-small 12
-               :small   16
-               :medium  16
-               :large   20
-               :x-large 32}
-   :container {:x-small 20
-               :small   28
-               :medium  32
-               :large   48
-               :x-large 80}})
+  {20 {:icon 12}
+   28 {:icon 16}
+   32 {:icon 16}
+   48 {:icon 20}
+   80 {:icon 32}})
 
 (defn- view-internal
   [_]
   (fn [{:keys [size theme customization-color picture]
-        :or   {size                :x-small
-               customization-color :blue
-               picture             nil}}]
-    (let [container-size (get-in sizes [:container size])
-          icon-size      (get-in sizes [:icon size])]
+        :or   {size                20
+               customization-color :blue}}]
+    (let [icon-size (get-in sizes [size :icon])]
       [rn/view
-       {:style (style/container {:container-size      container-size
+       {:style (style/container {:container-size      size
                                  :customization-color customization-color
                                  :theme               theme})}
        (if picture
          [fast-image/fast-image
           {:source picture
-           :style  {:width  container-size
-                    :height container-size}}]
+           :style  {:width  size
+                    :height size}}]
          [icon/icon :i/members
           {:size  icon-size
            :color colors/white-opa-70}])])))

src/status_im2/contexts/communities/overview/view.cljs

@@ -256,7 +256,7 @@
   [description]
   [quo/text
    {:accessibility-label :community-description-text
-    :number-of-lines     2
+    :number-of-lines     4
     :ellipsize-mode      :tail
     :weight              :regular
     :size                :paragraph-1

src/status_im2/contexts/quo_preview/avatars/group_avatar.cljs

@@ -10,28 +10,28 @@
   [{:label   "Size"
     :key     :size
     :type    :select
-    :options [{:key   :x-small
-               :value "x-small"}
-              {:key   :small
-               :value "Small"}
-              {:key   :medium
-               :value "Medium"}
-              {:key   :large
-               :value "Large"}
-              {:key   :x-large
-               :value "x-Large"}]}
+    :options [{:key   20
+               :value 20}
+              {:key   28
+               :value 28}
+              {:key   32
+               :value 32}
+              {:key   48
+               :value 48}
+              {:key   80
+               :value 80}]}
    {:label "Avatar"
     :key   :picture?
     :type  :boolean}
    (preview/customization-color-option)])
 
-(def avatar (resources/get-mock-image :user-picture-male4))
+(def avatar (resources/get-mock-image :photo1))
 
 (defn cool-preview
   []
   (let [state (reagent/atom {:theme               :light
                              :customization-color :blue
-                             :size                :small
+                             :size                20
                              :picture?            false})]
     (fn []
       [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}

src/status_im2/contexts/quo_preview/colors/color_picker.cljs

@@ -1,48 +1,26 @@
 (ns status-im2.contexts.quo-preview.colors.color-picker
   (:require [quo2.core :as quo]
-            [quo2.foundations.colors :as colors]
-            [react-native.blur :as blur]
-            [react-native.core :as rn]
             [reagent.core :as reagent]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label   "Color:"
-    :key     :color
+  [{:key     :selected
     :type    :select
     :options (map (fn [color]
                     (let [k (get color :name)]
                       {:key k :value k}))
                   (quo/picker-colors))}
-   {:label "Blur?"
-    :key   :blur
-    :type  :boolean}])
+   {:key  :blur?
+    :type :boolean}])
 
-(defn cool-preview
+(defn view
   []
-  (let [state (reagent/atom {:color "orange" :blur false})
-        blur  (reagent/cursor state [:blur])
-        color (reagent/cursor state [:color])]
+  (let [state (reagent/atom {:selected :orange
+                             :blur?    false})]
     (fn []
-      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
-       [rn/view {:padding-bottom 150}
-        [preview/customizer state descriptor]
-        [(if @blur blur/view :<>)
-         [rn/view {:padding-vertical 60 :align-items :center}
-          [quo/color-picker
-           {:blur?     @blur
-            :selected  @color
-            :on-change #(reset! color %)}]]]]])))
-
-(defn preview-color-picker
-  []
-  [rn/view
-   {:background-color (colors/theme-colors
-                       colors/white
-                       colors/neutral-95)
-    :flex             1}
-   [rn/flat-list
-    {:flex                         1
-     :keyboard-should-persist-taps :always
-     :header                       [cool-preview]
-     :key-fn                       str}]])
+      [preview/preview-container
+       {:state                 state
+        :descriptor            descriptor
+        :blur?                 (:blur? @state)
+        :show-blur-background? true}
+       [quo/color-picker (assoc @state :on-change #(swap! state assoc :selected %))]])))

src/status_im2/contexts/quo_preview/dividers/divider_label.cljs

@@ -1,54 +1,29 @@
 (ns status-im2.contexts.quo-preview.dividers.divider-label
-  (:require [quo2.components.dividers.divider-label :as divider-label]
-            [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]
+  (:require [quo2.core :as quo]
             [reagent.core :as reagent]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label "Label:"
-    :key   :label
-    :type  :text}
-   {:label   "Chevron position:"
-    :key     :chevron-position
+  [{:type :text :key :label}
+   {:type :text :key :counter-value}
+   {:type :boolean :key :increase-padding-top?}
+   {:type :boolean :key :blur?}
+   {:key     :chevron-position
     :type    :select
-    :options [{:key   :left
-               :value "Left"}
-              {:key   :right
-               :value "Right"}]}
-   {:label "Counter value:"
-    :key   :counter-value
-    :type  :text}
-   {:label "Increase padding top:"
-    :key   :increase-padding-top?
-    :type  :boolean}
-   {:label "Blur:"
-    :key   :blur?
-    :type  :boolean}])
+    :options [{:key :left}
+              {:key :right}]}])
 
-(defn cool-preview
+(defn view
   []
-  (let [state (reagent/atom {:label                 "Welcome"
+  (let [state (reagent/atom {:blur?                 false
                              :chevron-position      :left
-                             :counter-value         0
+                             :counter-value         "0"
                              :increase-padding-top? true
-                             :blur?                 false})]
+                             :label                 "Welcome"})]
     (fn []
-      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
-       [rn/view {:padding-bottom 150}
-        [preview/customizer state descriptor]
-        [rn/view {:padding-vertical 60}
-         [divider-label/divider-label @state]]]])))
-
-(defn preview-divider-label
-  []
-  [rn/view
-   {:background-color (colors/theme-colors
-                       colors/white
-                       colors/neutral-90)
-    :flex             1}
-   [rn/flat-list
-    {:flex                         1
-     :keyboard-should-persist-taps :always
-     :header                       [cool-preview]
-     :key-fn                       str}]])
+      [preview/preview-container
+       {:state                 state
+        :descriptor            descriptor
+        :blur?                 (:blur? @state)
+        :show-blur-background? true}
+       [quo/divider-label @state]])))