diff --git a/doc/new-guidelines.md b/doc/new-guidelines.md index d05058da7c3c..008005caf1a3 100644 --- a/doc/new-guidelines.md +++ b/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 diff --git a/src/quo2/components/inputs/title_input/component_spec.cljs b/src/quo2/components/inputs/title_input/component_spec.cljs index 37431dac2aaf..22910b420af7 100644 --- a/src/quo2/components/inputs/title_input/component_spec.cljs +++ b/src/quo2/components/inputs/title_input/component_spec.cljs @@ -5,14 +5,16 @@ (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")) @@ -20,7 +22,8 @@ (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))))) diff --git a/src/quo2/components/inputs/title_input/style.cljs b/src/quo2/components/inputs/title_input/style.cljs index 632bdd38ff87..f8788334c5e8 100644 --- a/src/quo2/components/inputs/title_input/style.cljs +++ b/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}) diff --git a/src/quo2/components/inputs/title_input/view.cljs b/src/quo2/components/inputs/title_input/view.cljs index c5b0cd9b3b31..763e0bc20be1 100644 --- a/src/quo2/components/inputs/title_input/view.cljs +++ b/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)))]]]]))) diff --git a/src/quo2/components/settings/accounts/view.cljs b/src/quo2/components/settings/accounts/view.cljs index cf3ccb7cae1f..7289b66e2ce1 100644 --- a/src/quo2/components/settings/accounts/view.cljs +++ b/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} diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index 42d8e71cd27e..57d6577359d6 100644 --- a/src/quo2/core.cljs +++ b/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 diff --git a/src/quo2/foundations/colors.cljs b/src/quo2/foundations/colors.cljs index 38d09cfce9c6..ffc7c9f165c1 100644 --- a/src/quo2/foundations/colors.cljs +++ b/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 diff --git a/src/status_im2/contexts/quo_preview/inputs/title_input.cljs b/src/status_im2/contexts/quo_preview/inputs/title_input.cljs index 5b4a0736245a..6aed4283a0dc 100644 --- a/src/status_im2/contexts/quo_preview/inputs/title_input.cljs +++ b/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}]]) diff --git a/src/status_im2/contexts/quo_preview/settings/accounts.cljs b/src/status_im2/contexts/quo_preview/settings/accounts.cljs index e5cb19f7cec7..8bd6c6c49410 100644 --- a/src/status_im2/contexts/quo_preview/settings/accounts.cljs +++ b/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