updates

doc/new-guidelines.md

@@ -116,6 +116,20 @@ deref'ed atoms.
   {:background-color (colors/theme-colors colors/white colors/neutral-90)})
 ```
 
+### Custom Colors
+
+The Status designs have a lot of customization of user and group colors with components and pages. For consistency it is best to use `customization-color` as the prop key on pages and components. This will help easily identify what pages and components in the application are using customized colors.
+
+```clojure
+;; bad
+(defn community-card [{keys [custom-color]}] 
+  ...)
+
+;; good
+(defn community-card [{keys [customization-color]}] 
+  ...)
+```
+
 ### Using TODOs comments
 
 _TODO_ comments are used extensively in the codebase, but prefer to use them

src/quo2/components/inputs/title_input/component_spec.cljs

@@ -5,22 +5,25 @@
 (h/describe "profile: title-input"
   (h/test "renders empty"
     (h/render [title-input/title-input
-               {:on-change-text (h/mock-fn)} ""])
+               {:value          ""
+                :on-change-text (h/mock-fn)}])
     (-> (js/expect (h/get-by-label-text :profile-title-input))
         (.toBeTruthy)))
 
   (h/test "empty text renders with max length digits and 00"
     (h/render [title-input/title-input
-               {:max-length     24
-                :on-change-text (h/mock-fn)} ""])
+               {:value          ""
+                :max-length     24
+                :on-change-text (h/mock-fn)}])
     (-> (js/expect (h/get-by-text "00"))
         (.toBeTruthy))
     (-> (js/expect (h/get-by-text "/24"))
         (.toBeTruthy)))
 
   (h/test "renders with max length digits and character count"
     (h/render [title-input/title-input
-               {:max-length     24
+               {:default-value  "abc"
+                :max-length     24
                 :on-change-text (h/mock-fn)} "abc"])
     (-> (js/expect (h/get-by-text "03"))
         (.toBeTruthy))
@@ -30,7 +33,8 @@
   (h/test "text updates on change"
     (let [on-change-text (h/mock-fn)]
       (h/render [title-input/title-input
-                 {:on-change-text on-change-text} "mock text"])
+                 {:value          "mock text"
+                  :on-change-text on-change-text}])
       (h/fire-event :change-text (h/get-by-label-text :profile-title-input) "mock-text-new")
       (-> (js/expect on-change-text)
           (.toHaveBeenCalled)))))

src/quo2/components/inputs/title_input/style.cljs

@@ -1,47 +1,42 @@
 (ns quo2.components.inputs.title-input.style
   (:require [quo2.foundations.colors :as colors]))
 
-
 (defn get-focused-placeholder-color
   [blur?]
-  (colors/theme-color-with-blur
-   blur?
-   colors/neutral-30
-   (colors/alpha colors/neutral-80 0.2)
-   colors/neutral-60
-   (colors/alpha colors/white 0.2)))
+  (if blur?
+    (colors/theme-colors colors/neutral-80-opa-20 (colors/alpha colors/white 0.2))
+    (colors/theme-colors colors/neutral-30 colors/neutral-60)))
 
 (defn get-placeholder-color
   [blur?]
-  (colors/theme-color-with-blur
-   blur?
-   colors/neutral-40
-   (colors/alpha colors/neutral-80 0.4)
-   colors/neutral-50
-   (colors/alpha colors/white 0.3)))
+  (if blur?
+    (colors/theme-colors colors/neutral-80-opa-40 (colors/alpha colors/white 0.3))
+    (colors/theme-colors colors/neutral-40 colors/neutral-50)))
 
 (defn- get-disabled-color
   [blur?]
-  (colors/theme-color-with-blur
-   blur?
-   colors/neutral-40
-   (colors/alpha colors/neutral-80 0.4)
-   colors/neutral-50
-   (colors/alpha colors/white 0.3)))
+  (if blur?
+    (colors/theme-colors colors/neutral-80-opa-40 (colors/alpha colors/white 0.3))
+    (colors/theme-colors colors/neutral-40 colors/neutral-50)))
 
 (defn- get-char-count-color
   [blur?]
-  (colors/theme-color-with-blur
-   blur?
-   colors/neutral-40
-   (colors/alpha colors/neutral-80 0.4)
-   colors/neutral-50
-   (colors/alpha colors/white 0.4)))
+  (if blur?
+    (colors/theme-colors colors/neutral-80-opa-40 (colors/alpha colors/white 0.4))
+    (colors/theme-colors colors/neutral-40 colors/neutral-50)))
+
+(defn get-selection-color
+  [customization-color blur?]
+  (if blur?
+    (colors/theme-colors colors/neutral-100 colors/white)
+    (colors/custom-color customization-color (if colors/dark? 60 50))))
+
+(def text-input-container {:flex 1})
 
 (defn title-text
   [disabled? blur?]
-  {:color (when disabled? (get-disabled-color blur?))})
-
+  {:text-align-vertical :bottom
+   :color               (when disabled? (get-disabled-color blur?))})
 
 (defn char-count
   [blur?]
@@ -50,5 +45,8 @@
 (def container
   {:flex-direction  :row
    :flex            1
-   :justify-content :space-between
-   :align-items     :baseline})
+   :justify-content :center
+   :align-items     :center})
+
+(def counter-container
+  {:padding-top 8})

src/quo2/components/inputs/title_input/view.cljs

@@ -1,8 +1,8 @@
 (ns quo2.components.inputs.title-input.view
   (:require
     [quo2.components.inputs.title-input.style :as style]
-    [reagent.core :as reagent]
     [quo2.components.markdown.text :as text]
+    [reagent.core :as reagent]
     [react-native.core :as rn]))
 
 (defn- pad-0
@@ -12,38 +12,54 @@
     value))
 
 (defn title-input
-  [{:keys [on-change-text
+  [{:keys [blur?
+           on-change-text
            placeholder
-           max-length]
-    :or   {max-length 0}}]
-  (let [focused? (reagent/atom false)]
-    (fn [{:keys [disabled? blur?]} value]
+           max-length
+           default-value]
+    :or   {max-length    0
+           default-value ""}}]
+  (let [focused?  (reagent/atom false)
+        value     (reagent/atom default-value)
+        on-change (fn [v]
+                    (reset! value v)
+                    (when on-change-text
+                      (on-change-text v)))]
+    (fn [{:keys [customization-color disabled?]}]
       [rn/view
        {:style style/container}
-       [rn/view
+       [rn/view {:style style/text-input-container}
         [rn/text-input
          {:style
           (text/text-style
            {:size   :heading-2
             :weight :semi-bold
             :style  (style/title-text disabled? blur?)})
-          :value value
+          :default-value default-value
           :accessibility-label :profile-title-input
-          :on-focus #(swap! focused? not)
-          :on-blur #(swap! focused? not)
+          :on-focus #(swap! focused? (fn [] true))
+          :on-blur #(swap! focused? (fn [] false))
           :input-mode :text
-          :on-change-text on-change-text
+          :on-change-text on-change
           :editable (not disabled?)
           :max-length max-length
           :placeholder placeholder
+          :selection-color (style/get-selection-color customization-color blur?)
           :placeholder-text-color (if @focused?
                                     (style/get-focused-placeholder-color blur?)
                                     (style/get-placeholder-color blur?))}]]
        [rn/view
+        {:style style/counter-container}
         [text/text
          [text/text
           {:style (style/char-count blur?)
-           :size  :paragraph-2} (pad-0 (str (count value)))]
+           :size  :paragraph-2}
+          (pad-0
+           (str
+            (count @value)))]
          [text/text
           {:style (style/char-count blur?)
-           :size  :paragraph-2} (str "/" (pad-0 (str max-length)))]]]])))
+           :size  :paragraph-2}
+          (str "/"
+               (pad-0
+                (str max-length)))]]]])))

src/quo2/components/settings/accounts/view.cljs

@@ -6,9 +6,9 @@
             [react-native.core :as rn]))
 
 (defn card-background
-  [{:keys [custom-color]}]
+  [{:keys [customization-color]}]
   [:<>
-   [rn/view {:style (style/background-top custom-color)}]
+   [rn/view {:style (style/background-top customization-color)}]
    [rn/view {:style (style/background-bottom)}]])
 
 (defn avatar
@@ -28,12 +28,12 @@
     :i/more]])
 
 (defn account
-  [{:keys [account-name account-address avatar-icon custom-color on-press-menu]}]
+  [{:keys [account-name account-address avatar-icon customization-color on-press-menu]}]
   [rn/view {:style style/card}
-   [card-background {:custom-color custom-color}]
+   [card-background {:customization-color customization-color}]
    [rn/view {:style style/card-top}
     [avatar
-     {:color custom-color
+     {:color customization-color
       :icon  avatar-icon}]
     [menu-button {:on-press on-press-menu}]]
    [rn/view {:style style/card-bottom}

src/quo2/core.cljs

@@ -29,6 +29,7 @@
     quo2.components.header
     quo2.components.icon
     quo2.components.info.info-message
+    quo2.components.info.information-box
     quo2.components.inputs.title-input.view
     quo2.components.list-items.channel
     quo2.components.list-items.menu-item

src/quo2/foundations/colors.cljs

@@ -39,14 +39,6 @@
         (alpha light-color light-opacity)
         (alpha dark-color dark-opacity))))))
 
-(defn theme-color-with-blur
-  [blur? light light-blur dark dark-blur]
-  (cond
-    (and blur? (theme/dark?))       dark-blur
-    (and blur? (not (theme/dark?))) light-blur
-    (theme/dark?)                   dark
-    :else                           light))
-
 
 ;;;;Neutral
 

src/status_im2/contexts/quo_preview/inputs/title_input.cljs

@@ -3,6 +3,7 @@
             [react-native.core :as rn]
             [reagent.core :as reagent]
             [quo2.core :as quo]
+            [react-native.blur :as blur]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
@@ -12,34 +13,55 @@
    {:label "blur?"
     :key   :blur?
     :type  :boolean}
-  ])
+   {:label   "Cursor Color"
+    :key     :color
+    :type    :select
+    :options (map (fn [color]
+                    (let [key (get color :name)]
+                      {:key key :value key}))
+                  (quo/picker-colors))}])
 
 (defn cool-preview
   []
-  (let [state          (reagent/atom {:blur?     false
+  (let [state          (reagent/atom {:color     nil
+                                      :blur?     false
                                       :disabled? false})
-        value          (reagent/atom "")
         max-length     24
-        on-change-text (fn [v]
-                         (reset! value v)
-                         (reagent/flush)
-                       )]
+        on-change-text (fn [_v]
+                         (println (str "cool-preview -> on-change-text called " _v)))]
     (fn []
       [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
        [rn/view {:padding-bottom 150}
         [rn/view {:flex 1}]
         [preview/customizer state descriptor]
-        [rn/view
-         {:padding-vertical  60
-          :flex-direction    :row
-          :margin-horizontal 20
-          :justify-content   :center}
-         [quo/title-input
-          {:max-length     max-length
-           :on-change-text on-change-text
-           :disabled?      (:disabled? @state)
-           :blur?          (:blur? @state)
-           :placeholder    "type something here"} @value]]]])))
+        (if (:blur? @state)
+          [blur/view
+           {:background-color  colors/neutral-80-opa-80
+            :padding-vertical  60
+            :flex-direction    :row
+            :margin-horizontal 20
+            :justify-content   :center}
+           [quo/title-input
+            {:max-length          max-length
+             :default-value       ""
+             :on-change-text      on-change-text
+             :disabled?           (:disabled? @state)
+             :customization-color (:color @state)
+             :blur?               (:blur? @state)
+             :placeholder         "type something here"}]]
+          [rn/view
+           {:padding-vertical  60
+            :flex-direction    :row
+            :margin-horizontal 20
+            :justify-content   :center}
+           [quo/title-input
+            {:max-length          max-length
+             :default-value       ""
+             :on-change-text      on-change-text
+             :disabled?           (:disabled? @state)
+             :customization-color (:color @state)
+             :blur?               (:blur? @state)
+             :placeholder         "type something here"}]])]])))
 
 (defn preview-title-input
   []
@@ -48,7 +70,7 @@
                                            colors/neutral-90)
     :flex             1}
    [rn/flat-list
-    {:flex                      1
-     :keyboardShouldPersistTaps :always
-     :header                    [cool-preview]
-     :key-fn                    str}]])
+    {:flex                         1
+     :keyboard-should-persist-taps :always
+     :header                       [cool-preview]
+     :key-fn                       str}]])

src/status_im2/contexts/quo_preview/settings/accounts.cljs

@@ -8,7 +8,7 @@
 
 (def descriptor
   [{:label   "Custom color"
-    :key     :custom-color
+    :key     :customization-color
     :type    :select
     :options (map (fn [[k _]]
                     {:key k :value (string/capitalize (name k))})
@@ -22,12 +22,12 @@
 
 (defn cool-preview
   []
-  (let [state (reagent/atom {:custom-color    :blue
-                             :account-name    "Booze for Dubai"
-                             :account-address "0x21a ... 49e"
-                             :avatar-icon     :i/placeholder
-                             :on-press-menu   (fn []
-                                                (js/alert "Menu button pressed"))})]
+  (let [state (reagent/atom {:customization-color :blue
+                             :account-name        "Booze for Dubai"
+                             :account-address     "0x21a ... 49e"
+                             :avatar-icon         :i/placeholder
+                             :on-press-menu       (fn []
+                                                    (js/alert "Menu button pressed"))})]
     (fn []
       [rn/view
        {:margin-bottom 50