diff --git a/resources/images/icons2/12x12/negative-state@2x.png b/resources/images/icons2/12x12/negative-state@2x.png new file mode 100644 index 0000000000..a1fb88e6f0 Binary files /dev/null and b/resources/images/icons2/12x12/negative-state@2x.png differ diff --git a/resources/images/icons2/12x12/negative-state@3x.png b/resources/images/icons2/12x12/negative-state@3x.png new file mode 100644 index 0000000000..347592a41f Binary files /dev/null and b/resources/images/icons2/12x12/negative-state@3x.png differ diff --git a/resources/images/icons2/12x12/pending-dark-blur@2x.png b/resources/images/icons2/12x12/pending-dark-blur@2x.png new file mode 100644 index 0000000000..cb39e1a630 Binary files /dev/null and b/resources/images/icons2/12x12/pending-dark-blur@2x.png differ diff --git a/resources/images/icons2/12x12/pending-dark-blur@3x.png b/resources/images/icons2/12x12/pending-dark-blur@3x.png new file mode 100644 index 0000000000..6a7b83a7b4 Binary files /dev/null and b/resources/images/icons2/12x12/pending-dark-blur@3x.png differ diff --git a/resources/images/icons2/12x12/pending-dark@2x.png b/resources/images/icons2/12x12/pending-dark@2x.png new file mode 100644 index 0000000000..5d752740e2 Binary files /dev/null and b/resources/images/icons2/12x12/pending-dark@2x.png differ diff --git a/resources/images/icons2/12x12/pending-dark@3x.png b/resources/images/icons2/12x12/pending-dark@3x.png new file mode 100644 index 0000000000..2856d93998 Binary files /dev/null and b/resources/images/icons2/12x12/pending-dark@3x.png differ diff --git a/resources/images/icons2/12x12/pending-light@2x.png b/resources/images/icons2/12x12/pending-light@2x.png new file mode 100644 index 0000000000..5a7706fc6a Binary files /dev/null and b/resources/images/icons2/12x12/pending-light@2x.png differ diff --git a/resources/images/icons2/12x12/pending-light@3x.png b/resources/images/icons2/12x12/pending-light@3x.png new file mode 100644 index 0000000000..12778ca12a Binary files /dev/null and b/resources/images/icons2/12x12/pending-light@3x.png differ diff --git a/resources/images/icons2/12x12/positive-state@2x.png b/resources/images/icons2/12x12/positive-state@2x.png new file mode 100644 index 0000000000..b40a50e26c Binary files /dev/null and b/resources/images/icons2/12x12/positive-state@2x.png differ diff --git a/resources/images/icons2/12x12/positive-state@3x.png b/resources/images/icons2/12x12/positive-state@3x.png new file mode 100644 index 0000000000..171f1e4e0b Binary files /dev/null and b/resources/images/icons2/12x12/positive-state@3x.png differ diff --git a/resources/images/icons2/20x20/negative-state@2x.png b/resources/images/icons2/20x20/negative-state@2x.png new file mode 100644 index 0000000000..2f694036e1 Binary files /dev/null and b/resources/images/icons2/20x20/negative-state@2x.png differ diff --git a/resources/images/icons2/20x20/negative-state@3x.png b/resources/images/icons2/20x20/negative-state@3x.png new file mode 100644 index 0000000000..33ee14f0c3 Binary files /dev/null and b/resources/images/icons2/20x20/negative-state@3x.png differ diff --git a/resources/images/icons2/20x20/pending-dark-blur@2x.png b/resources/images/icons2/20x20/pending-dark-blur@2x.png new file mode 100644 index 0000000000..f87620a4d7 Binary files /dev/null and b/resources/images/icons2/20x20/pending-dark-blur@2x.png differ diff --git a/resources/images/icons2/20x20/pending-dark-blur@3x.png b/resources/images/icons2/20x20/pending-dark-blur@3x.png new file mode 100644 index 0000000000..40f1495d71 Binary files /dev/null and b/resources/images/icons2/20x20/pending-dark-blur@3x.png differ diff --git a/resources/images/icons2/20x20/pending-dark@2x.png b/resources/images/icons2/20x20/pending-dark@2x.png new file mode 100644 index 0000000000..d96d724e18 Binary files /dev/null and b/resources/images/icons2/20x20/pending-dark@2x.png differ diff --git a/resources/images/icons2/20x20/pending-dark@3x.png b/resources/images/icons2/20x20/pending-dark@3x.png new file mode 100644 index 0000000000..2d98e3d97b Binary files /dev/null and b/resources/images/icons2/20x20/pending-dark@3x.png differ diff --git a/resources/images/icons2/20x20/pending-light@2x.png b/resources/images/icons2/20x20/pending-light@2x.png new file mode 100644 index 0000000000..e9ded33b35 Binary files /dev/null and b/resources/images/icons2/20x20/pending-light@2x.png differ diff --git a/resources/images/icons2/20x20/pending-light@3x.png b/resources/images/icons2/20x20/pending-light@3x.png new file mode 100644 index 0000000000..960f93e19a Binary files /dev/null and b/resources/images/icons2/20x20/pending-light@3x.png differ diff --git a/resources/images/icons2/20x20/positive-state@2x.png b/resources/images/icons2/20x20/positive-state@2x.png new file mode 100644 index 0000000000..afe819aebd Binary files /dev/null and b/resources/images/icons2/20x20/positive-state@2x.png differ diff --git a/resources/images/icons2/20x20/positive-state@3x.png b/resources/images/icons2/20x20/positive-state@3x.png new file mode 100644 index 0000000000..4ca5369b3f Binary files /dev/null and b/resources/images/icons2/20x20/positive-state@3x.png differ diff --git a/src/quo2/components/notifications/activity_log/view.cljs b/src/quo2/components/notifications/activity_log/view.cljs index a980ffeb3b..a7c87566a5 100644 --- a/src/quo2/components/notifications/activity_log/view.cljs +++ b/src/quo2/components/notifications/activity_log/view.cljs @@ -7,9 +7,9 @@ [quo2.components.notifications.activity-log.style :as style] [quo2.components.tags.status-tags :as status-tags] [quo2.foundations.colors :as colors] - [utils.i18n :as i18n] [react-native.core :as rn] - [reagent.core :as reagent])) + [reagent.core :as reagent] + [utils.i18n :as i18n])) (defn- activity-reply-text-input [{:keys [on-update-reply max-reply-length valid-reply?]} reply-input] @@ -134,11 +134,12 @@ label])) (defmethod footer-item-view :status - [{:keys [label subtype]} _ _] + [{:keys [label subtype blur?]} _ _] [status-tags/status-tag {:size :small :label label - :status {:type subtype}}]) + :status {:type subtype} + :blur? blur?}]) (defn- footer [_ _] diff --git a/src/quo2/components/tags/__tests__/status_tags_component_spec.cljs b/src/quo2/components/tags/__tests__/status_tags_component_spec.cljs new file mode 100644 index 0000000000..0beb4db174 --- /dev/null +++ b/src/quo2/components/tags/__tests__/status_tags_component_spec.cljs @@ -0,0 +1,33 @@ +(ns quo2.components.tags.--tests--.status-tags-component-spec + (:require [quo2.components.tags.status-tags :as quo2] + [test-helpers.component :as h])) + +(defn render-status-tag + [opts] + (h/render [quo2/status-tag opts])) + +(h/describe "status tag component" + (h/test "renders status tag with positive type" + (render-status-tag {:status {:type :positive} + :label "Positive" + :size :small}) + (-> (h/expect (h/get-all-by-label-text :status-tag-positive)) + (.toBeTruthy)) + (-> (h/expect (h/get-by-text "Positive")) + (.toBeTruthy))) + (h/test "renders status tag with negative type" + (render-status-tag {:status {:type :negative} + :label "Negative" + :size :small}) + (-> (h/expect (h/get-all-by-label-text :status-tag-negative)) + (.toBeTruthy)) + (-> (h/expect (h/get-by-text "Negative")) + (.toBeTruthy))) + (h/test "renders status tag with pending type" + (render-status-tag {:status {:type :pending} + :label "Pending" + :size :small}) + (-> (h/expect (h/get-all-by-label-text :status-tag-pending)) + (.toBeTruthy)) + (-> (h/expect (h/get-by-text "Pending")) + (.toBeTruthy)))) diff --git a/src/quo2/components/tags/status_tags.cljs b/src/quo2/components/tags/status_tags.cljs index 2d9f525a5e..b5fbeb28ea 100644 --- a/src/quo2/components/tags/status_tags.cljs +++ b/src/quo2/components/tags/status_tags.cljs @@ -27,15 +27,18 @@ background-color icon text-color - label]}] + label + accessibility-label]}] (let [paragraph-size (if (= size :small) :paragraph-2 :paragraph-1)] [rn/view - (assoc (if (= size :small) - small-container-style - large-container-style) - :border-width 1 - :border-color border-color - :background-color background-color) + {:accessible true + :accessibility-label accessibility-label + :style (assoc (if (= size :small) + small-container-style + large-container-style) + :border-width 1 + :border-color border-color + :background-color background-color)} [rn/view {:flex-direction :row :flex 1} @@ -45,7 +48,7 @@ [icon/icon icon {:no-color true - :size 12}]] + :size (if (= size :large) 20 12)}]] [text/text {:size paragraph-size :weight :medium @@ -53,41 +56,51 @@ :color text-color}} label]]]))) (defn- positive - [size theme label] + [size theme label _] [base-tag - {:size size - :icon :verified - :background-color colors/success-50-opa-10 - :border-color colors/success-50-opa-20 - :label label - :text-color (if (= theme :light) - colors/success-50 - colors/success-60)}]) + {:accessibility-label :status-tag-positive + :size size + :icon :i/positive-state + :background-color colors/success-50-opa-10 + :border-color colors/success-50-opa-20 + :label label + ;; The positive tag uses the same color for `light` and `dark blur` variant + :text-color (if (= theme :dark) colors/success-60 colors/success-50)}]) (defn- negative - [size theme label] + [size theme label _] [base-tag - {:size size - :icon :untrustworthy - :background-color colors/danger-50-opa-10 - :border-color colors/danger-50-opa-20 - :label label - :text-color (if (= theme :light) - colors/danger-50 - colors/danger-60)}]) + {:accessibility-label :status-tag-negative + :size size + :icon :i/negative-state + :background-color colors/danger-50-opa-10 + :border-color colors/danger-50-opa-20 + :label label + ;; The negative tag uses the same color for `dark` and `dark blur` variant + :text-color (if (= theme :light) colors/danger-50 colors/danger-60)}]) (defn- pending - [size _ label] + [size theme label blur?] [base-tag - {:size size - :icon :pending - :label label - :background-color colors/white-opa-5 - :border-color colors/white-opa-5 - :text-color colors/white-opa-70}]) + {:accessibility-label :status-tag-pending + :size size + :label label + :icon (if blur? + :i/pending-dark-blur + (if (= theme :light) :i/pending-light :i/pending-dark)) + :background-color (if blur? + colors/white-opa-5 + (colors/theme-colors colors/neutral-10 colors/neutral-80-opa-40 theme)) + :border-color (if blur? + colors/white-opa-5 + (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)) + + :text-color (if blur? + colors/white-opa-70 + (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}]) (defn status-tag - [{:keys [status size override-theme label]}] + [{:keys [status size override-theme label blur?]}] (when status (when-let [status-component (case (:type status) :positive positive @@ -97,4 +110,5 @@ [status-component size (or override-theme (quo2.theme/get-theme)) - label]))) + label + blur?]))) diff --git a/src/quo2/core_spec.cljs b/src/quo2/core_spec.cljs index 4c8a624307..24af045a4a 100644 --- a/src/quo2/core_spec.cljs +++ b/src/quo2/core_spec.cljs @@ -16,4 +16,5 @@ [quo2.components.record-audio.soundtrack.--tests--.soundtrack-component-spec] [quo2.components.profile.select-profile.component-spec] [quo2.components.selectors.--tests--.selectors-component-spec] - [quo2.components.selectors.filter.component-spec])) + [quo2.components.selectors.filter.component-spec] + [quo2.components.tags.--tests--.status-tags-component-spec])) diff --git a/src/quo2/foundations/colors.cljs b/src/quo2/foundations/colors.cljs index b136b1ab60..6044e0ca26 100644 --- a/src/quo2/foundations/colors.cljs +++ b/src/quo2/foundations/colors.cljs @@ -139,8 +139,8 @@ ;;;;Success ;;Solid -(def success-50 "#26A69A") -(def success-60 "#208B81") +(def success-50 "#23ADA0") +(def success-60 "#1C8A80") ;;50 with transparency (def success-50-opa-5 (alpha success-50 0.05)) @@ -162,8 +162,8 @@ (def danger-opa-40 (alpha danger 0.4)) ;;Solid -(def danger-50 "#E65F5C") -(def danger-60 "#C1504D") +(def danger-50 "#E95460") +(def danger-60 "#BA434D") ;;50 with transparency (def danger-50-opa-5 (alpha danger-50 0.05)) diff --git a/src/status_im2/contexts/activity_center/notification/admin/view.cljs b/src/status_im2/contexts/activity_center/notification/admin/view.cljs index 46cd18c86d..b453cdf965 100644 --- a/src/status_im2/contexts/activity_center/notification/admin/view.cljs +++ b/src/status_im2/contexts/activity_center/notification/admin/view.cljs @@ -49,12 +49,14 @@ [{:type :status :subtype :positive :key :status-accepted + :blur? true :label (i18n/label :t/accepted)}] constants/activity-center-membership-status-declined [{:type :status :subtype :negative :key :status-declined + :blur? true :label (i18n/label :t/declined)}] constants/activity-center-membership-status-pending diff --git a/src/status_im2/contexts/activity_center/notification/contact_requests/view.cljs b/src/status_im2/contexts/activity_center/notification/contact_requests/view.cljs index f1e433c778..9dbe83c65d 100644 --- a/src/status_im2/contexts/activity_center/notification/contact_requests/view.cljs +++ b/src/status_im2/contexts/activity_center/notification/contact_requests/view.cljs @@ -63,12 +63,14 @@ {:type :status :subtype :pending :key :status-pending + :blur? true :label (i18n/label :t/pending)}] constants/contact-request-message-state-declined [{:type :status :subtype :pending :key :status-pending + :blur? true :label (i18n/label :t/pending)}] nil)}]))) @@ -92,12 +94,14 @@ [{:type :status :subtype :positive :key :status-accepted + :blur? true :label (i18n/label :t/accepted)}] constants/contact-request-message-state-declined [{:type :status :subtype :negative :key :status-declined + :blur? true :label (i18n/label :t/declined)}] constants/contact-request-message-state-pending diff --git a/src/status_im2/contexts/quo_preview/notifications/activity_logs.cljs b/src/status_im2/contexts/quo_preview/notifications/activity_logs.cljs index 1cb3c4e498..16648d0c40 100644 --- a/src/status_im2/contexts/quo_preview/notifications/activity_logs.cljs +++ b/src/status_im2/contexts/quo_preview/notifications/activity_logs.cljs @@ -47,8 +47,8 @@ :key :danger} {:value "Primary" :key :primary} - {:value "Success" - :key :success}]} + {:value "Positive" + :key :positive}]} {:label "Button 1 label" :key :button-1-label :type :text} @@ -59,8 +59,8 @@ :key :danger} {:value "Primary" :key :primary} - {:value "Success" - :key :success}]} + {:value "Positive" + :key :positive}]} {:label "Button 2 label" :key :button-2-label :type :text} @@ -122,25 +122,33 @@ :message :with-title :timestamp "Today 00:00" :title "Activity Title" - :unread? true})] + :unread? true + :items []})] (fn [] (let [{:keys [button-1-type button-1-label button-2-type - button-2-label]} + button-2-label + status]} @state props (cond-> @state (and (seq button-1-label) button-1-type) - (assoc :button-1 - {:label button-1-label - :type button-1-type}) + (update :items + conj + {:type :button + :label button-1-label + :subtype button-1-type + :on-press #(js/alert "Button 1 Clicked")}) (and (seq button-2-label) button-2-type) - (assoc :button-2 - {:label button-2-label - :type button-2-type}) + (update :items + conj + {:type :button + :label button-2-label + :subtype button-2-type + :on-press #(js/alert "Button 2 Clicked")}) (= (:message @state) :simple) (assoc :message {:body "The quick brown fox forgot to jump."}) @@ -148,10 +156,13 @@ (= (:message @state) :with-mention) (assoc :message message-with-mention) - (some? (:status @state)) - (update :status - (fn [status] - {:label (name status) :type status})) + (some? status) + (update :items + conj + {:type :status + :subtype status + :blur? true + :label (name status)}) (= (:message @state) :with-title) (assoc :message message-with-title) diff --git a/src/status_im2/contexts/quo_preview/preview.cljs b/src/status_im2/contexts/quo_preview/preview.cljs index 2270f58e74..2e04250d85 100644 --- a/src/status_im2/contexts/quo_preview/preview.cljs +++ b/src/status_im2/contexts/quo_preview/preview.cljs @@ -1,8 +1,10 @@ (ns status-im2.contexts.quo-preview.preview (:require [clojure.string :as string] [quo2.foundations.colors :as colors] + [react-native.blur :as blur] [react-native.core :as rn] - [reagent.core :as reagent]) + [reagent.core :as reagent] + [status-im2.common.resources :as resources]) (:require-macros status-im2.contexts.quo-preview.preview)) (def container @@ -212,3 +214,36 @@ :type :select :options [{:key :primary :value "Primary"} {:key :secondary :value "Secondary"}]}]) + +(defn blur-view + [{:keys [show-blur-background? image height blur-view-props style]} children] + [rn/view + {:style {:flex 1 + :padding-horizontal 16 + :padding-vertical 16}} + (when show-blur-background? + [rn/view + {:style {:height (or height 100) + :border-radius 16 + :overflow :hidden}} + [rn/image + {:source (or image (resources/get-mock-image :community-cover)) + :style {:height "100%" + :width "100%"}}] + [blur/view + (merge {:style {:position :absolute + :top 0 + :bottom 0 + :left 0 + :right 0} + :blur-amount 10 + :overlay-color (colors/theme-colors + colors/white-opa-70 + colors/neutral-80-opa-80)} + blur-view-props)]]) + [rn/view + {:style (merge {:position :absolute + :top 32 + :padding-horizontal 16} + style)} + children]]) diff --git a/src/status_im2/contexts/quo_preview/tags/status_tags.cljs b/src/status_im2/contexts/quo_preview/tags/status_tags.cljs index 9198322121..b9fe3172d1 100644 --- a/src/status_im2/contexts/quo_preview/tags/status_tags.cljs +++ b/src/status_im2/contexts/quo_preview/tags/status_tags.cljs @@ -3,8 +3,8 @@ [quo2.foundations.colors :as colors] [react-native.core :as rn] [reagent.core :as reagent] - [utils.i18n :as i18n] - [status-im2.contexts.quo-preview.preview :as preview])) + [status-im2.contexts.quo-preview.preview :as preview] + [utils.i18n :as i18n])) (def status-tags-options {:label "Status" @@ -25,32 +25,36 @@ :options [{:value "Small" :key :small} {:value "Large" - :key :large}]}]) + :key :large}]} + {:label "Blur?" + :key :blur? + :type :boolean}]) (defn cool-preview [] (let [state (reagent/atom {:status :positive - :size :small})] + :size :small + :blur? false})] (fn [] - (let [props (cond-> @state - (= :positive (:status @state)) (assoc :status - {:label (i18n/label :positive) - :type :positive}) - (= :negative (:status @state)) (assoc :status - {:label (i18n/label :negative) - :type :negative}) - (= :pending (:status @state)) (assoc :status - {:label (i18n/label :pending) - :type :pending}))] + (let [props (case (:status @state) + :positive (-> @state + (assoc :status {:type :positive}) + (assoc :label (i18n/label :t/positive))) + :negative (-> @state + (assoc :status {:type :negative}) + (assoc :label (i18n/label :t/negative))) + :pending (-> @state + (assoc :status {:type :pending}) + (assoc :label (i18n/label :t/pending))))] [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 - :justify-content :center} - [quo2/status-tag props]]]])))) + [preview/blur-view + {:show-blur-background? (:blur? @state) + :blur-view-props {:blur-type :dark + :overlay-color colors/neutral-80-opa-80} + :style {:align-self :center}} [quo2/status-tag props]]]])))) (defn preview-status-tags []