diff --git a/resources/images/icons/alphabetically20@2x.png b/resources/images/icons/alphabetically20@2x.png new file mode 100644 index 0000000000..99061d6aba Binary files /dev/null and b/resources/images/icons/alphabetically20@2x.png differ diff --git a/resources/images/icons/alphabetically20@3x.png b/resources/images/icons/alphabetically20@3x.png new file mode 100644 index 0000000000..99061d6aba Binary files /dev/null and b/resources/images/icons/alphabetically20@3x.png differ diff --git a/resources/images/icons/card-view20@2x.png b/resources/images/icons/card-view20@2x.png new file mode 100644 index 0000000000..e4e8c2c683 Binary files /dev/null and b/resources/images/icons/card-view20@2x.png differ diff --git a/resources/images/icons/card-view20@3x.png b/resources/images/icons/card-view20@3x.png new file mode 100644 index 0000000000..c9849cb87d Binary files /dev/null and b/resources/images/icons/card-view20@3x.png differ diff --git a/resources/images/icons/friend20@2x.png b/resources/images/icons/friend20@2x.png new file mode 100644 index 0000000000..0d8b92f53c Binary files /dev/null and b/resources/images/icons/friend20@2x.png differ diff --git a/resources/images/icons/friend20@3x.png b/resources/images/icons/friend20@3x.png new file mode 100644 index 0000000000..0d8b92f53c Binary files /dev/null and b/resources/images/icons/friend20@3x.png differ diff --git a/resources/images/icons/group16@2x.png b/resources/images/icons/group16@2x.png new file mode 100644 index 0000000000..40af6c0efe Binary files /dev/null and b/resources/images/icons/group16@2x.png differ diff --git a/resources/images/icons/group16@3x.png b/resources/images/icons/group16@3x.png new file mode 100644 index 0000000000..89f8c16dc9 Binary files /dev/null and b/resources/images/icons/group16@3x.png differ diff --git a/resources/images/icons/info20@2x.png b/resources/images/icons/info20@2x.png new file mode 100644 index 0000000000..daef6f21d9 Binary files /dev/null and b/resources/images/icons/info20@2x.png differ diff --git a/resources/images/icons/info20@3x.png b/resources/images/icons/info20@3x.png new file mode 100644 index 0000000000..afb255eb6a Binary files /dev/null and b/resources/images/icons/info20@3x.png differ diff --git a/resources/images/icons/lightning16@2x.png b/resources/images/icons/lightning16@2x.png new file mode 100644 index 0000000000..848ee581d4 Binary files /dev/null and b/resources/images/icons/lightning16@2x.png differ diff --git a/resources/images/icons/lightning16@3x.png b/resources/images/icons/lightning16@3x.png new file mode 100644 index 0000000000..313f5ea268 Binary files /dev/null and b/resources/images/icons/lightning16@3x.png differ diff --git a/resources/images/icons/lightning20@2x.png b/resources/images/icons/lightning20@2x.png new file mode 100644 index 0000000000..a3de60e9d6 Binary files /dev/null and b/resources/images/icons/lightning20@2x.png differ diff --git a/resources/images/icons/lightning20@3x.png b/resources/images/icons/lightning20@3x.png new file mode 100644 index 0000000000..c5175c913c Binary files /dev/null and b/resources/images/icons/lightning20@3x.png differ diff --git a/resources/images/icons/list-view20@2x.png b/resources/images/icons/list-view20@2x.png new file mode 100644 index 0000000000..25fd501268 Binary files /dev/null and b/resources/images/icons/list-view20@2x.png differ diff --git a/resources/images/icons/list-view20@3x.png b/resources/images/icons/list-view20@3x.png new file mode 100644 index 0000000000..25fd501268 Binary files /dev/null and b/resources/images/icons/list-view20@3x.png differ diff --git a/resources/images/icons/locked16@2x.png b/resources/images/icons/locked16@2x.png new file mode 100644 index 0000000000..3131ed0aff Binary files /dev/null and b/resources/images/icons/locked16@2x.png differ diff --git a/resources/images/icons/locked16@3x.png b/resources/images/icons/locked16@3x.png new file mode 100644 index 0000000000..3131ed0aff Binary files /dev/null and b/resources/images/icons/locked16@3x.png differ diff --git a/resources/images/icons/members20@2x.png b/resources/images/icons/members20@2x.png new file mode 100644 index 0000000000..b964b22386 Binary files /dev/null and b/resources/images/icons/members20@2x.png differ diff --git a/resources/images/icons/members20@3x.png b/resources/images/icons/members20@3x.png new file mode 100644 index 0000000000..b964b22386 Binary files /dev/null and b/resources/images/icons/members20@3x.png differ diff --git a/resources/images/icons/notifications20@2x.png b/resources/images/icons/notifications20@2x.png new file mode 100644 index 0000000000..618571a526 Binary files /dev/null and b/resources/images/icons/notifications20@2x.png differ diff --git a/resources/images/icons/notifications20@3x.png b/resources/images/icons/notifications20@3x.png new file mode 100644 index 0000000000..6720c67c53 Binary files /dev/null and b/resources/images/icons/notifications20@3x.png differ diff --git a/resources/images/icons/qr-code20@2x.png b/resources/images/icons/qr-code20@2x.png new file mode 100644 index 0000000000..d8f3a88859 Binary files /dev/null and b/resources/images/icons/qr-code20@2x.png differ diff --git a/resources/images/icons/qr-code20@3x.png b/resources/images/icons/qr-code20@3x.png new file mode 100644 index 0000000000..0e9706811b Binary files /dev/null and b/resources/images/icons/qr-code20@3x.png differ diff --git a/resources/images/icons/scanner20@2x.png b/resources/images/icons/scanner20@2x.png new file mode 100644 index 0000000000..e505a53ab7 Binary files /dev/null and b/resources/images/icons/scanner20@2x.png differ diff --git a/resources/images/icons/scanner20@3x.png b/resources/images/icons/scanner20@3x.png new file mode 100644 index 0000000000..38106e1b48 Binary files /dev/null and b/resources/images/icons/scanner20@3x.png differ diff --git a/resources/images/icons/search20@2x.png b/resources/images/icons/search20@2x.png new file mode 100644 index 0000000000..1bd9849c47 Binary files /dev/null and b/resources/images/icons/search20@2x.png differ diff --git a/resources/images/icons/search20@3x.png b/resources/images/icons/search20@3x.png new file mode 100644 index 0000000000..df0c874586 Binary files /dev/null and b/resources/images/icons/search20@3x.png differ diff --git a/resources/images/icons/security24@2x.png b/resources/images/icons/security24@2x.png new file mode 100755 index 0000000000..c50375e803 Binary files /dev/null and b/resources/images/icons/security24@2x.png differ diff --git a/resources/images/icons/unlocked16@2x.png b/resources/images/icons/unlocked16@2x.png new file mode 100644 index 0000000000..8d0ce15cf0 Binary files /dev/null and b/resources/images/icons/unlocked16@2x.png differ diff --git a/resources/images/icons/unlocked16@3x.png b/resources/images/icons/unlocked16@3x.png new file mode 100644 index 0000000000..8d0ce15cf0 Binary files /dev/null and b/resources/images/icons/unlocked16@3x.png differ diff --git a/resources/images/icons/unlocked20@2x.png b/resources/images/icons/unlocked20@2x.png new file mode 100644 index 0000000000..4f63958d9f Binary files /dev/null and b/resources/images/icons/unlocked20@2x.png differ diff --git a/resources/images/icons/unlocked20@3x.png b/resources/images/icons/unlocked20@3x.png new file mode 100644 index 0000000000..8d0ce15cf0 Binary files /dev/null and b/resources/images/icons/unlocked20@3x.png differ diff --git a/resources/images/ui/community-cover.png b/resources/images/ui/community-cover.png new file mode 100644 index 0000000000..6149370a29 Binary files /dev/null and b/resources/images/ui/community-cover.png differ diff --git a/resources/images/ui/discover.png b/resources/images/ui/discover.png new file mode 100644 index 0000000000..ed782a4077 Binary files /dev/null and b/resources/images/ui/discover.png differ diff --git a/resources/images/ui/lifestyle@2x.png b/resources/images/ui/lifestyle@2x.png new file mode 100644 index 0000000000..149cd8a25f Binary files /dev/null and b/resources/images/ui/lifestyle@2x.png differ diff --git a/resources/images/ui/lifestyle@3x.png b/resources/images/ui/lifestyle@3x.png new file mode 100644 index 0000000000..506d76bf82 Binary files /dev/null and b/resources/images/ui/lifestyle@3x.png differ diff --git a/resources/images/ui/music@2x.png b/resources/images/ui/music@2x.png new file mode 100644 index 0000000000..fff81abbff Binary files /dev/null and b/resources/images/ui/music@2x.png differ diff --git a/resources/images/ui/music@3x.png b/resources/images/ui/music@3x.png new file mode 100644 index 0000000000..c1fc5edd5e Binary files /dev/null and b/resources/images/ui/music@3x.png differ diff --git a/resources/images/ui/podcasts@2x.png b/resources/images/ui/podcasts@2x.png new file mode 100644 index 0000000000..fce6ab7511 Binary files /dev/null and b/resources/images/ui/podcasts@2x.png differ diff --git a/resources/images/ui/podcasts@3x.png b/resources/images/ui/podcasts@3x.png new file mode 100644 index 0000000000..ca26bfa8cc Binary files /dev/null and b/resources/images/ui/podcasts@3x.png differ diff --git a/src/quo/components/bottom_sheet/style.cljs b/src/quo/components/bottom_sheet/style.cljs index 49a7c442ef..fcf7c0571e 100644 --- a/src/quo/components/bottom_sheet/style.cljs +++ b/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)}) diff --git a/src/quo/components/bottom_sheet/view.cljs b/src/quo/components/bottom_sheet/view.cljs index 68b9fc4595..f128d5500a 100644 --- a/src/quo/components/bottom_sheet/view.cljs +++ b/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)} diff --git a/src/quo/components/list/item.cljs b/src/quo/components/list/item.cljs index 7689388e80..10e2c60e9f 100644 --- a/src/quo/components/list/item.cljs +++ b/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 diff --git a/src/quo2/components/base_tag.cljs b/src/quo2/components/base_tag.cljs new file mode 100644 index 0000000000..30fac8c33d --- /dev/null +++ b/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]])) diff --git a/src/quo2/components/button.cljs b/src/quo2/components/button.cljs index 105f192d96..b5dddbe06e 100644 --- a/src/quo2/components/button.cljs +++ b/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 diff --git a/src/quo2/components/community_card_view.cljs b/src/quo2/components/community_card_view.cljs new file mode 100644 index 0000000000..64a25f32aa --- /dev/null +++ b/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 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 (* (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}]])]]]]) diff --git a/src/quo2/components/filter_tag.cljs b/src/quo2/components/filter_tag.cljs new file mode 100644 index 0000000000..1cc7c674e1 --- /dev/null +++ b/src/quo2/components/filter_tag.cljs @@ -0,0 +1,80 @@ +(ns quo2.components.filter-tag + (:require [quo2.foundations.colors :as colors] + [quo.theme :as theme] + [quo.react-native :as rn] + [quo2.components.icon :as icons] + [quo2.components.text :as text] + [quo2.components.base-tag :as base-tag])) + +(def themes {:light {:default {:border-color colors/neutral-20 + :blurred-border-color colors/neutral-80-opa-5 + :text-color {:style {:color colors/black}}} + :active {:border-color colors/neutral-30 + :blurred-border-color colors/neutral-80-opa-10 + :text-color {:style {:color colors/black}}} + :disabled {:border-color colors/neutral-20 + :blurred-border-color colors/neutral-80-opa-5 + :text-color {:style {:color colors/black}}}} + :dark {:default {:border-color colors/neutral-70 + :blurred-border-color colors/white-opa-10 + :text-color {:style {:color colors/white}}} + :active {:border-color colors/neutral-60 + :blurred-border-color colors/white-opa-20 + :text-color {:style {:color colors/white}}} + :disabled {:border-color colors/neutral-70 + :blurred-border-color colors/white-opa-10 + :text-color {:style {:color colors/white}}}}}) + +(defn tag-resources [size type resource icon-color label text-color labelled] + [rn/view {:style (merge {:flex-direction :row + :align-items :center + :justify-content :center} + (when label + {:padding-horizontal (case size 32 12 24 8)}))} + (when (= type :icon) + [icons/icon resource {:container-style (when label + {:margin-right 4}) + :resize-mode :center + :size (case size + 32 20 + 24 12) + :color icon-color}]) + (when (= type :emoji) + [rn/image {:source resource + :style (merge (case size + 32 {:height 20 + :width 20} + 24 {:height 12 + :width 12}) + (when label + {:margin-right 4}))}]) + (when labelled + [text/text (merge {:size (case size + 32 :paragraph-1 + 24 :paragraph-2 + 20 :label nil) + :weight :medium + :number-of-lines 1} + text-color) + label])]) + +(defn filter-tag + [_ _] + (fn [{:keys [id on-press disabled size resource active accessibility-label + label type labelled blurred icon-color] :or {size 32}}] + (let [state (cond disabled :disabled active :active :else :default) + {:keys [border-color blurred-border-color text-color]} + (get-in themes [(theme/get-theme) state])] + [base-tag/base-tag {:id id + :size size + :border-width 1 + :border-color (if blurred + blurred-border-color + border-color) + :on-press on-press + :accessibility-label accessibility-label + :disabled disabled + :type type + :label label} + [tag-resources size type resource icon-color label text-color labelled]]))) + diff --git a/src/quo2/components/filter_tags.cljs b/src/quo2/components/filter_tags.cljs new file mode 100644 index 0000000000..3cac6a6f90 --- /dev/null +++ b/src/quo2/components/filter_tags.cljs @@ -0,0 +1,29 @@ +(ns quo2.components.filter-tags + (:require [reagent.core :as reagent] + [quo.react-native :as rn] + [quo2.components.filter-tag :as tag])) + +(defn tags [{:keys [default-active on-change]}] + (let [active-tab-id (reagent/atom default-active)] + (fn [{:keys [data size type labelled disabled blurred icon-color] :or {size 32}}] + (let [active-id @active-tab-id] + [rn/view {:flex-direction :row} + (for [{:keys [tag-label id resource]} data] + ^{:key id} + [rn/view {:margin-right 8} + [tag/filter-tag + (merge {:id id + :size size + :type type + :label (if labelled tag-label (when (= type :label) tag-label)) + :active (= id active-id) + :disabled disabled + :blurred blurred + :icon-color icon-color + :labelled (if (= type :label) true labelled) + :resource (if (= type :icon) + :main-icons2/placeholder + resource) + :on-press #(do (reset! active-tab-id %) + (when on-change (on-change %)))}) + tag-label]])])))) \ No newline at end of file diff --git a/src/quo2/components/header.cljs b/src/quo2/components/header.cljs new file mode 100644 index 0000000000..e86c566f62 --- /dev/null +++ b/src/quo2/components/header.cljs @@ -0,0 +1,178 @@ +(ns quo2.components.header + (:require [oops.core :refer [oget]] + [quo.animated :as animated] + [quo2.components.button :as button] + [quo2.components.text :as text] + [quo2.foundations.colors :as colors] + [quo.design-system.spacing :as spacing] + [quo.react-native :as rn] + [reagent.core :as reagent])) + +(def header-height 56) + +(defn header-wrapper-style [{:keys [height border-bottom background]}] + (merge + {:background-color (colors/theme-colors + colors/neutral-5 + colors/neutral-95) + :height height} + (when background + {:background-color background}) + (when border-bottom + {:border-bottom-width 1 + :border-bottom-color (colors/theme-colors + colors/neutral-5 + colors/neutral-95)}))) + +(def absolute-fill {:position :absolute + :top 0 + :bottom 0 + :left 0 + :right 0}) + +(def content {:flex 1 + :flex-direction :row + :align-items :center + :justify-content :center}) + +(def left {:position :absolute + :left 0 + :top 0 + :bottom 0 + :justify-content :center + :align-items :flex-start}) + +(def right {:position :absolute + :right 0 + :top 0 + :bottom 0 + :justify-content :center + :align-items :flex-end}) + +(defn title-style [{:keys [left right]} title-align] + (merge + absolute-fill + (case title-align + :left {:left (:width left) + :right (:width right)} + {:align-items :center + :justify-content :center + :left (max (:width left) (:width right)) + :right (max (:width left) (:width right))}))) + +(def header-actions-style + (merge + {:flex 1 + :flex-direction :row + :align-items :center + :justify-content :center} + (:x-tiny spacing/padding-horizontal))) + +(def header-action-placeholder + {:width (:base spacing/spacing)}) + +(def element {:align-items :center + :justify-content :center + :flex 1}) + +(defn header-action [{:keys [icon label on-press disabled accessibility-label]}] + [button/button (merge {:on-press on-press + :disabled disabled} + (cond + icon {:type :icon + :theme :icon} + label {:type :secondary}) + (when accessibility-label + {:accessibility-label accessibility-label})) + (cond + icon icon + label label)]) + +(defn header-actions [{:keys [accessories component]}] + [rn/view {:style element} + (cond + (seq accessories) + (into [rn/view {:style header-actions-style}] + (map header-action accessories)) + + component component + + :else + [rn/view {:style header-action-placeholder}])]) + +(defn header-title [{:keys [title subtitle component title-align]}] + [:<> + (cond + component component + + (and title subtitle) + [:<> + [text/text {:weight :medium + :number-of-lines 1} + title] + [text/text {:weight :regular + :color :secondary + :number-of-lines 1} + subtitle]] + + title [text/text {:weight :bold + :number-of-lines 0 + :align title-align + :size :large} + title])]) + +(defn header [{:keys [left-width right-width]}] + (let [layout (reagent/atom {:left {:width (or left-width 8) + :height header-height} + :right {:width (or right-width 8) + :height header-height} + :title {:width 0 + :height header-height}}) + handle-layout (fn [el get-layout] + (fn [evt] + (let [width (oget evt "nativeEvent" "layout" "width") + height (oget evt "nativeEvent" "layout" "height")] + (when get-layout + (get-layout el {:width width + :height height})) + (swap! layout assoc el {:width width + :height height}))))] + (fn [{:keys [left-accessories left-component border-bottom + right-accessories right-component insets get-layout + title subtitle title-component style title-align + background] + :or {title-align :center + border-bottom false}}] + (let [status-bar-height (get insets :top 0) + height (+ header-height status-bar-height)] + [animated/view {:style (header-wrapper-style {:height height + :background background + :border-bottom border-bottom})} + [rn/view {:pointer-events :box-none + :height status-bar-height}] + [rn/view {:style (merge {:height header-height} + style) + :pointer-events :box-none} + [rn/view {:style absolute-fill + :pointer-events :box-none} + [rn/view {:style content + :pointer-events :box-none} + [rn/view {:style left + :on-layout (handle-layout :left get-layout) + :pointer-events :box-none} + [header-actions {:accessories left-accessories + :component left-component}]] + + [rn/view {:style (title-style @layout title-align) + :on-layout (handle-layout :title get-layout) + :pointer-events :box-none} + [header-title {:title title + :subtitle subtitle + :title-align title-align + :component title-component}]] + + [rn/view {:style right + :on-layout (handle-layout :right get-layout) + :pointer-events :box-none} + [header-actions {:accessories right-accessories + :component right-component}]]]]]])))) diff --git a/src/quo2/components/permission_tag.cljs b/src/quo2/components/permission_tag.cljs new file mode 100644 index 0000000000..d02a5796a6 --- /dev/null +++ b/src/quo2/components/permission_tag.cljs @@ -0,0 +1,127 @@ +(ns quo2.components.permission-tag + (:require [status-im.ui.components.react :as react] + [quo2.components.text :as text] + [quo2.foundations.colors :as colors] + [quo2.components.icon :as icons] + [quo2.components.base-tag :as base-tag] + [status-im.i18n.i18n :as i18n])) + +(defn outer-resource-container [size background-color] + {:background-color background-color + :border-radius size + :width size + :height size + :margin-left (case size 32 -12 24 -8) + :align-items :center + :justify-content :center}) + +(defn extra-count-styles [size] + {:background-color (colors/theme-colors + colors/neutral-20 + colors/neutral-70) + :height (case size 32 28 24 20) + :width (case size 32 28 24 20) + :border-radius size + :justify-content :center + :align-items :center}) + +(defn extra-count [total-group-count selected-count size background-color] + (let [extra-group-count (- total-group-count selected-count)] + (when (> extra-group-count 0) + [react/view (outer-resource-container size background-color) + [react/view (extra-count-styles size) + (if (< extra-group-count 4) + [text/text {:size :label + :style {:align-items :center + :color (colors/theme-colors + colors/neutral-50 + colors/neutral-40)}} + (str "+" extra-group-count)] + [icons/icon :main-icons2/pending-default {:container-style {:align-items :center + :justify-content :center} + :color (colors/theme-colors + colors/neutral-50 + colors/neutral-40) + :size 12}])]]))) + +(defn selected-token-count [group] + (cond + (= (count group) 3) 3 + + (> (count group) 3) 2 + + :else + (count group))) + +(defn token-group [] + (fn [{:keys [group size last-group background-color] + :or {size 24}}] + (let [tokens-count (count group) + selected-tokens (take (selected-token-count group) group)] + [react/view {:flex-direction :row + :align-items :center} + (for [{:keys [token-icon]} selected-tokens] + ^{:key token-icon} + [react/view {:flex-direction :row} + [react/view (outer-resource-container size background-color) + [react/image {:source token-icon + :style {:height (case size 32 28 24 20) + :width (case size 32 28 24 20) + :border-radius size}}]]]) + + [extra-count tokens-count (count selected-tokens) size] + (when-not last-group + [react/view {:align-items :center} + [text/text {:weight :medium + :size (case size 32 :paragraph-2 24 :label) + :style {:color (colors/theme-colors + colors/neutral-50 + colors/neutral-40) + :padding-left 4 + :text-transform :lowercase + :padding-right (case size 32 16 24 12)}} + (i18n/label :t/or)]])]))) + +(defn selected-group-count [tokens] + (cond + (> (count tokens) 3) 3 + + :else + (count tokens))) + +(defn tag-tokens [] + (fn [{:keys [tokens size background-color] + :or {size 24}}] + (let [selected-groups (take (selected-group-count tokens) tokens) + last-group-id ((last selected-groups) :id)] + [react/view {:flex-direction :row + :align-items :center} + (for [{:keys [id group]} selected-groups] + ^{:key id} + [token-group {:group group + :size size + :last-group (if (= id last-group-id) true false) + :background-color background-color}])]))) + +(defn tag + [_ _] + (fn [{:keys [locked tokens size background-color] + :or {size 24}}] + [base-tag/base-tag {:background-color background-color + :size size + :type :permission} + [react/view {:flex-direction :row + :align-items :center + :justify-content :flex-end} + [react/view {:padding-left (case 32 8 24 6) + :padding-right (case size 32 16 24 12)} + [icons/icon (if locked :main-icons2/locked + :main-icons2/unlocked) + {:resize-mode :center + :size (case size 32 20 24 16) + :color (colors/theme-colors + colors/neutral-50 + colors/neutral-40)}]] + [tag-tokens {:tokens tokens + :size size + :background-color background-color}]]])) \ No newline at end of file diff --git a/src/quo2/components/separator.cljs b/src/quo2/components/separator.cljs new file mode 100644 index 0000000000..cbcd7706a7 --- /dev/null +++ b/src/quo2/components/separator.cljs @@ -0,0 +1,14 @@ +(ns quo2.components.separator + (:require [quo.react-native :as react] + [quo2.foundations.colors :as quo2.colors])) + +(defn separator [{:keys [style]}] + [react/view + {:style + (merge + style + {:background-color (quo2.colors/theme-colors + quo2.colors/neutral-30 + quo2.colors/neutral-80) + :align-self :stretch + :height 1})}]) \ No newline at end of file diff --git a/src/quo2/foundations/colors.cljs b/src/quo2/foundations/colors.cljs index 3e7e63596c..21feab5501 100644 --- a/src/quo2/foundations/colors.cljs +++ b/src/quo2/foundations/colors.cljs @@ -42,6 +42,8 @@ (def neutral-70-opa-95 (alpha neutral-70 0.95)) ;;80 with transparency +(def neutral-80-opa-5 (alpha neutral-80 0.05)) +(def neutral-80-opa-10 (alpha neutral-80 0.1)) (def neutral-80-opa-60 (alpha neutral-80 0.6)) (def neutral-80-opa-70 (alpha neutral-80 0.7)) (def neutral-80-opa-80 (alpha neutral-80 0.8)) @@ -218,6 +220,8 @@ (def beige-50 "#CAAE93") (def beige-60 (alpha "#CAAE93" 0.6)) +(def shadow "rgba(9,16,28,0.04)") + (def customization {:dark {:purple purple-60 :indigo indigo-60 diff --git a/src/quo2/screens/community_card_view.cljs b/src/quo2/screens/community_card_view.cljs new file mode 100644 index 0000000000..f3c5e95294 --- /dev/null +++ b/src/quo2/screens/community_card_view.cljs @@ -0,0 +1,56 @@ +(ns quo2.screens.community-card-view + (:require [quo.react-native :as rn] + [quo.previews.preview :as preview] + [reagent.core :as reagent] + [status-im.constants :as constants] + [quo.design-system.colors :as quo.colors] + [quo2.foundations.colors :as colors] + [quo2.components.community-card-view :as community-view] + [status-im.i18n.i18n :as i18n] + [status-im.react-native.resources :as resources])) + +(def community-data + {:id constants/status-community-id + :name "Status" + :description "Status is a secure messaging app, crypto wallet and web3 browser built with the state of the art technology" + :status "gated" + :section "popular" + :permissions true + :cover (resources/get-image :community-cover) + :community-icon (resources/get-image :status-logo) + :color (rand-nth quo.colors/chat-colors) + :tokens [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)}]}] + :tags [{:id 1 :tag-label (i18n/label :t/music) :resource (resources/get-image :music)} + {:id 2 :tag-label (i18n/label :t/lifestyle) :resource (resources/get-image :lifestyle)} + {:id 3 :tag-label (i18n/label :t/podcasts) :resource (resources/get-image :podcasts)}]}) + +(def descriptor [{:label "Community views" + :key :view-style + :type :select + :options [{:key :card-view + :value "Card view"} + {:key :list-view + :value "List view"}]}]) + +(defn cool-preview [] + (let [state (reagent/atom {:view-style :card-view})] + (fn [] + [rn/view {:margin-bottom 50} + [rn/view {:flex 1 + :padding 16} + [preview/customizer state descriptor]] + [rn/view {:padding-vertical 60 + :justify-content :center} + (if (= :card-view (:view-style @state)) + [community-view/community-card-view-item community-data] + [community-view/communities-list-view-item community-data])]]))) + +(defn preview-community-card [] + [rn/view {:background-color (colors/theme-colors colors/neutral-5 + colors/neutral-95) + :flex 1} + [rn/flat-list {:flex 1 + :keyboardShouldPersistTaps :always + :header [cool-preview] + :key-fn str}]]) + diff --git a/src/quo2/screens/filter_tags.cljs b/src/quo2/screens/filter_tags.cljs new file mode 100644 index 0000000000..7330b69b81 --- /dev/null +++ b/src/quo2/screens/filter_tags.cljs @@ -0,0 +1,86 @@ +(ns quo2.screens.filter-tags + (:require [quo.react-native :as rn] + [quo.previews.preview :as preview] + [status-im.ui.components.react :as react] + [quo2.foundations.colors :as colors] + [quo2.components.filter-tags :as quo2.tags] + [status-im.react-native.resources :as resources] + [reagent.core :as reagent])) + +(def descriptor [{:label "Size:" + :key :size + :type :select + :options [{:key 32 + :value "32"} + {:key 24 + :value "24"}]} + {:label "Type:" + :key :type + :type :select + :options [{:key :emoji + :value "Emoji"} + {:key :icon + :value "Icons"} + {:key :label + :value "Label"}]} + {:label "Labelled:" + :key :labelled + :type :boolean} + {:label "Disabled:" + :key :disabled + :type :boolean} + {:label "Blurred background:" + :key :blurred + :type :boolean}]) + +(defn cool-preview [] + (let [state (reagent/atom {:size 32 + :labelled true + :type :emoji})] + (fn [] + [rn/view {:margin-bottom 50 + :padding 16 + :padding-vertical 60} + [rn/view {:flex 1} + [preview/customizer state descriptor]] + [rn/view {:flex 1 + :justify-content :center + :top 60} + (when (:blurred @state) + [rn/view {:flex 1} + [react/view {:flex-direction :row + :height 100} + [react/image {:source (resources/get-image :community-cover) + :style {:flex 1 + :height 100 + :border-radius 16}}]] + [react/view {:flex-direction :row + :height 100 + :position :absolute + :left 0 + :right 0} + [react/blur-view {:flex 1 + :style {:border-radius 16 + :height 100} + :blur-amount 40 + :overlay-color (colors/theme-colors + colors/white-opa-70 + colors/neutral-80-opa-80)}]]]) + [rn/scroll-view {:justify-content :center + :align-items :center + :position :absolute + :padding-horizontal 10} + [quo2.tags/tags (merge @state + {:default-active 1 + :data [{:id 1 :tag-label "Music" :resource (resources/get-image :music)} + {:id 2 :tag-label "Lifestyle" :resource (resources/get-image :lifestyle)} + {:id 3 :tag-label "Podcasts" :resource (resources/get-image :podcasts)}]})]]]]))) +(defn preview-filter-tags [] + [rn/view {:flex 1 + :background-color (colors/theme-colors + colors/neutral-5 + colors/neutral-90)} + [rn/flat-list {:flex 1 + :keyboardShouldPersistTaps :always + :header [cool-preview] + :key-fn str}]]) \ No newline at end of file diff --git a/src/quo2/screens/main.cljs b/src/quo2/screens/main.cljs index fe36c4e0bc..7468eb7f45 100644 --- a/src/quo2/screens/main.cljs +++ b/src/quo2/screens/main.cljs @@ -19,6 +19,9 @@ [quo2.screens.info-message :as info-message] [quo2.screens.information-box :as information-box] [quo.components.safe-area :as safe-area] + [quo2.screens.permission-tag :as permission-tag] + [quo2.screens.community-card-view :as community-card] + [quo2.screens.filter-tags :as filter-tags] [quo.core :as quo])) (def screens [{:name :quo2-texts @@ -65,7 +68,16 @@ :component info-message/preview-info-message} {:name :information-box :insets {:top false} - :component information-box/preview-information-box}]) + :component information-box/preview-information-box} + {:name :quo2-permission-tag + :insets {:top false} + :component permission-tag/preview-permission-tag} + {:name :quo2-filter-tags + :insets {:top false} + :component filter-tags/preview-filter-tags} + {:name :quo2-community-cards + :insets {:top false} + :component community-card/preview-community-card}]) (defn theme-switcher [] [rn/view {:style {:flex-direction :row diff --git a/src/quo2/screens/permission_tag.cljs b/src/quo2/screens/permission_tag.cljs new file mode 100644 index 0000000000..1f5aa20311 --- /dev/null +++ b/src/quo2/screens/permission_tag.cljs @@ -0,0 +1,168 @@ +(ns quo2.screens.permission-tag + (:require [quo.react-native :as rn] + [quo.previews.preview :as preview] + [quo2.components.permission-tag :as permission-tag] + [quo2.foundations.colors :as colors] + [status-im.react-native.resources :as resources] + [reagent.core :as reagent])) + +(def descriptor [{:label "Size:" + :key :size + :type :select + :options [{:key 32 + :value "32"} + {:key 24 + :value "24"}]} + {:label "Locked:" + :key :locked? + :type :boolean}]) + +(def community-tokens + [{:tokens [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)}]}]} + {:tokens [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)} + {:id 2 :token-icon (resources/get-image :status-logo)}]}]} + {:tokens [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)} + {:id 1 :token-icon (resources/get-image :status-logo)} + {:id 3 :token-icon (resources/get-image :status-logo)}]}]} + {:tokens [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)} + {:id 1 :token-icon (resources/get-image :status-logo)} + {:id 2 :token-icon (resources/get-image :status-logo)} + {:id 3 :token-icon (resources/get-image :status-logo)}]}]} + {:tokens [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)}]} + {:id 2 :group [{:id 1 :token-icon (resources/get-image :status-logo)}]}]} + {:tokens [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)}]} + {:id 2 :group [{:id 1 :token-icon (resources/get-image :status-logo)} + {:id 1 :token-icon (resources/get-image :status-logo)}]}]} + {:tokens [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)}]} + {:id 2 :group [{:id 1 :token-icon (resources/get-image :status-logo)} + {:id 2 :token-icon (resources/get-image :status-logo)} + {:id 3 :token-icon (resources/get-image :status-logo)}]}]} + {:tokens [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)}]} + {:id 2 :group [{:id 1 :token-icon (resources/get-image :status-logo)} + {:id 2 :token-icon (resources/get-image :status-logo)} + {:id 3 :token-icon (resources/get-image :status-logo)} + {:id 4 :token-icon (resources/get-image :status-logo)}]}]} + {:tokens [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)} + {:id 2 :token-icon (resources/get-image :status-logo)}]} + {:id 2 :group [{:id 1 :token-icon (resources/get-image :status-logo)} + {:id 2 :token-icon (resources/get-image :status-logo)}]}]} + {:tokens [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)} + {:id 2 :token-icon (resources/get-image :status-logo)}]} + {:id 2 :group [{:id 1 :token-icon (resources/get-image :status-logo)} + {:id 2 :token-icon (resources/get-image :status-logo)} + {:id 3 :token-icon (resources/get-image :status-logo)}]}]} + {:tokens [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)} + {:id 2 :token-icon (resources/get-image :status-logo)}]} + {:id 2 :group [{:id 1 :token-icon (resources/get-image :status-logo)} + {:id 2 :token-icon (resources/get-image :status-logo)} + {:id 3 :token-icon (resources/get-image :status-logo)} + {:id 4 :token-icon (resources/get-image :status-logo)}]}]} + {:tokens [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)} + {:id 2 :token-icon (resources/get-image :status-logo)} + {:id 3 :token-icon (resources/get-image :status-logo)}]} + {:id 2 :group [{:id 1 :token-icon (resources/get-image :status-logo)} + {:id 2 :token-icon (resources/get-image :status-logo)} + {:id 3 :token-icon (resources/get-image :status-logo)}]}]} + {:tokens [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)} + {:id 2 :token-icon (resources/get-image :status-logo)} + {:id 3 :token-icon (resources/get-image :status-logo)}]} + {:id 2 :group [{:id 1 :token-icon (resources/get-image :status-logo)} + {:id 2 :token-icon (resources/get-image :status-logo)} + {:id 3 :token-icon (resources/get-image :status-logo)} + {:id 4 :token-icon (resources/get-image :status-logo)}]}]} + {:tokens [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)} + {:id 2 :token-icon (resources/get-image :status-logo)} + {:id 3 :token-icon (resources/get-image :status-logo)} + {:id 4 :token-icon (resources/get-image :status-logo)}]} + {:id 2 :group [{:id 1 :token-icon (resources/get-image :status-logo)} + {:id 2 :token-icon (resources/get-image :status-logo)} + {:id 3 :token-icon (resources/get-image :status-logo)} + {:id 4 :token-icon (resources/get-image :status-logo)}]}]} + {:tokens [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)}]} + {:id 2 :group [{:id 1 :token-icon (resources/get-image :status-logo)} + {:id 2 :token-icon (resources/get-image :status-logo)} + {:id 3 :token-icon (resources/get-image :status-logo)} + {:id 4 :token-icon (resources/get-image :status-logo)} + {:id 5 :token-icon (resources/get-image :status-logo)} + {:id 6 :token-icon (resources/get-image :status-logo)}]}]} + {:tokens [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)} + {:id 1 :token-icon (resources/get-image :status-logo)}]} + {:id 2 :group [{:id 1 :token-icon (resources/get-image :status-logo)} + {:id 2 :token-icon (resources/get-image :status-logo)} + {:id 3 :token-icon (resources/get-image :status-logo)} + {:id 4 :token-icon (resources/get-image :status-logo)} + {:id 5 :token-icon (resources/get-image :status-logo)} + {:id 6 :token-icon (resources/get-image :status-logo)}]}]} + {:tokens [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)} + {:id 2 :token-icon (resources/get-image :status-logo)} + {:id 3 :token-icon (resources/get-image :status-logo)}]} + {:id 2 :group [{:id 1 :token-icon (resources/get-image :status-logo)} + {:id 2 :token-icon (resources/get-image :status-logo)} + {:id 3 :token-icon (resources/get-image :status-logo)} + {:id 4 :token-icon (resources/get-image :status-logo)} + {:id 5 :token-icon (resources/get-image :status-logo)} + {:id 6 :token-icon (resources/get-image :status-logo)}]}]} + {:tokens [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)} + {:id 2 :token-icon (resources/get-image :status-logo)} + {:id 3 :token-icon (resources/get-image :status-logo)} + {:id 4 :token-icon (resources/get-image :status-logo)}]} + {:id 2 :group [{:id 1 :token-icon (resources/get-image :status-logo)} + {:id 2 :token-icon (resources/get-image :status-logo)} + {:id 3 :token-icon (resources/get-image :status-logo)} + {:id 4 :token-icon (resources/get-image :status-logo)} + {:id 5 :token-icon (resources/get-image :status-logo)} + {:id 6 :token-icon (resources/get-image :status-logo)}]}]} + {:tokens [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)}]} + {:id 2 :group [{:id 1 :token-icon (resources/get-image :status-logo)}]} + {:id 3 :group [{:id 1 :token-icon (resources/get-image :status-logo)}]}]} + {:tokens [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)}]} + {:id 2 :group [{:id 1 :token-icon (resources/get-image :status-logo)} + {:id 2 :token-icon (resources/get-image :status-logo)}]} + {:id 3 :group [{:id 1 :token-icon (resources/get-image :status-logo)} + {:id 2 :token-icon (resources/get-image :status-logo)} + {:id 3 :token-icon (resources/get-image :status-logo)} + {:id 4 :token-icon (resources/get-image :status-logo)} + {:id 5 :token-icon (resources/get-image :status-logo)} + {:id 6 :token-icon (resources/get-image :status-logo)}]}]} + {:tokens [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)}]} + {:id 2 :group [{:id 1 :token-icon (resources/get-image :status-logo)}]} + {:id 3 :group [{:id 1 :token-icon (resources/get-image :status-logo)}]}]} + {:tokens [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)}]} + {:id 2 :group [{:id 1 :token-icon (resources/get-image :status-logo)} + {:id 2 :token-icon (resources/get-image :status-logo)}]} + {:id 3 :group [{:id 1 :token-icon (resources/get-image :status-logo)} + {:id 2 :token-icon (resources/get-image :status-logo)} + {:id 3 :token-icon (resources/get-image :status-logo)} + {:id 4 :token-icon (resources/get-image :status-logo)} + {:id 5 :token-icon (resources/get-image :status-logo)} + {:id 6 :token-icon (resources/get-image :status-logo)}]}]}]) + +(defn cool-preview [] + (let [state (reagent/atom {:size 32})] + (fn [] + [rn/view {:margin-bottom 50 + :padding 16} + [rn/view {:flex 1} + [preview/customizer state descriptor]] + [rn/view {:padding-vertical 60 + :justify-content :center} + (when @state + (for [{:keys [tokens]} community-tokens] + ^{:key tokens} + [rn/view {:margin-top 20 + :align-self :flex-end} + [permission-tag/tag (merge @state + {:tokens tokens + :background-color (colors/theme-colors + colors/neutral-10 + colors/neutral-80)})]]))]]))) + +(defn preview-permission-tag [] + [rn/view {:background-color (colors/theme-colors + colors/white + colors/neutral-80) + :flex 1} + [rn/flat-list {:flex 1 + :keyboardShouldPersistTaps :always + :header [cool-preview] + :key-fn str}]]) \ No newline at end of file diff --git a/src/status_im/bottom_sheet/core.cljs b/src/status_im/bottom_sheet/core.cljs index 588b8ed9b8..10fc193309 100644 --- a/src/status_im/bottom_sheet/core.cljs +++ b/src/status_im/bottom_sheet/core.cljs @@ -21,4 +21,4 @@ {:events [:bottom-sheet/hide]} [{:keys [db]}] {:hide-bottom-sheet nil - :db (assoc db :bottom-sheet/show? false)}) + :db (assoc db :bottom-sheet/show? false)}) \ No newline at end of file diff --git a/src/status_im/i18n/i18n.cljs b/src/status_im/i18n/i18n.cljs index f9340ead75..29b6672f2f 100644 --- a/src/status_im/i18n/i18n.cljs +++ b/src/status_im/i18n/i18n.cljs @@ -63,4 +63,4 @@ (def locale (.-locale i18n)) -(def format-currency goog.i18n/format-currency) +(def format-currency goog.i18n/format-currency) \ No newline at end of file diff --git a/src/status_im/react_native/resources.cljs b/src/status_im/react_native/resources.cljs index d3d4ac38f0..77176e3338 100644 --- a/src/status_im/react_native/resources.cljs +++ b/src/status_im/react_native/resources.cljs @@ -47,7 +47,12 @@ :collectible-dark (js/require "../resources/images/ui/collectible-dark.png") :hand-wave (js/require "../resources/images/ui/hand-wave.png") :graph (js/require "../resources/images/ui/graph.png") - :switcher (js/require "../resources/images/ui/switcher.png")}) + :switcher (js/require "../resources/images/ui/switcher.png") + :discover (js/require "../resources/images/ui/discover.png") + :community-cover (js/require "../resources/images/ui/community-cover.png") + :lifestyle (js/require "../resources/images/ui/lifestyle.png") + :music (js/require "../resources/images/ui/music.png") + :podcasts (js/require "../resources/images/ui/podcasts.png")}) (defn get-theme-image [k] (get ui (when (colors/dark?) (keyword (str (name k) "-dark"))) (get ui k))) diff --git a/src/status_im/switcher/home_stack.cljs b/src/status_im/switcher/home_stack.cljs index 42e3207e3d..2de45b07cb 100644 --- a/src/status_im/switcher/home_stack.cljs +++ b/src/status_im/switcher/home_stack.cljs @@ -1,12 +1,12 @@ (ns status-im.switcher.home-stack (:require [quo2.reanimated :as reanimated] - [quo2.screens.main :as quo2.preview] [status-im.utils.platform :as platform] [status-im.switcher.switcher :as switcher] [status-im.ui.screens.home.views :as home] [status-im.switcher.constants :as constants] [status-im.switcher.bottom-tabs :as bottom-tabs] [status-im.ui.screens.profile.user.views :as profile.user] + [status-im.ui.screens.communities.communities-list-redesign :as communities] [status-im.ui.screens.wallet.accounts.views :as wallet.accounts])) (defn load-stack? [stack-id] @@ -29,7 +29,7 @@ :right 0 :position :absolute})} (case stack-id - :communities-stack [quo2.preview/main-screen] + :communities-stack [communities/views] :chats-stack [home/home] :wallet-stack [wallet.accounts/accounts-overview] :browser-stack [profile.user/my-profile])])])) diff --git a/src/status_im/ui/components/chat_icon/screen.cljs b/src/status_im/ui/components/chat_icon/screen.cljs index 672aed57e3..3641a57bdc 100644 --- a/src/status_im/ui/components/chat_icon/screen.cljs +++ b/src/status_im/ui/components/chat_icon/screen.cljs @@ -93,6 +93,19 @@ :default-chat-icon (styles/default-chat-icon-chat-list color) :default-chat-icon-text (styles/default-chat-icon-text 40)}]) +(defn chat-icon-view-chat-list-redesign + [chat-id group-chat name color size] + [chat-icon-view chat-id group-chat name + {:container (if (= size 20) + (styles/token-icon-container-chat-list size) + (styles/community-icon-container-chat-list size)) + :size size + :chat-icon (if (= size 20) + (styles/community-icon-chat-list-redesign size) + (styles/community-icon-chat-list size)) + :default-chat-icon (styles/default-list-chat-icon-redesign color size) + :default-chat-icon-text (styles/default-chat-icon-text size)}]) + (defn chat-icon-view-chat-sheet [chat-id group-chat name color] [chat-icon-view chat-id group-chat name diff --git a/src/status_im/ui/components/chat_icon/styles.cljs b/src/status_im/ui/components/chat_icon/styles.cljs index 789e8f8b44..a2c2e5e2aa 100644 --- a/src/status_im/ui/components/chat_icon/styles.cljs +++ b/src/status_im/ui/components/chat_icon/styles.cljs @@ -11,12 +11,39 @@ :border-radius 20 :background-color color}) +(defn default-chat-icon-redesign [color size] + {:margin 0 + :width size + :height size + :align-items :center + :justify-content :center + :border-radius (/ size 2) + :background-color color}) + (defn default-chat-icon-chat-list [color] (merge (default-chat-icon color) {:width 40 :height 40 :border-radius 20})) +(defn default-list-chat-icon-redesign [color size] + (merge (default-chat-icon-redesign color size) + {:width size + :height size + :border-radius (/ size 2)})) + +(defn default-community-icon-chat-list [color] + (merge (default-chat-icon color) + {:width 48 + :height 48 + :border-radius 48})) + +(defn default-token-icon-chat-list [color] + (merge (default-chat-icon color) + {:width 20 + :height 20 + :border-radius 20})) + (defn default-chat-icon-chat-toolbar [color] (merge (default-chat-icon color) {:width 36 @@ -46,12 +73,48 @@ :width 40 :height 40}) +(defn chat-icon-redesign [size] + {:margin 4 + :border-radius (/ size 2) + :width size + :height size}) + (def chat-icon-chat-list (merge chat-icon {:width 40 :height 40 :margin 0})) +(defn community-status-icon [size] + {:margin 4 + :border-radius 10 + :width size + :height size}) + +(def community-icon-chat-list + (merge chat-icon + {:width 48 + :height 48 + :margin 0})) + +(defn community-icon-chat-list-redesign [size] + (merge (chat-icon size) + {:width size + :height size + :margin 0})) + +(defn community-status-chat-list-icon [size] + (merge (community-status-icon size) + {:width size + :height size + :margin 0})) + +(def token-icon-chat-list + (merge chat-icon + {:width 20 + :height 20 + :margin 0})) + (def chat-icon-chat-toolbar (merge chat-icon {:width 36 @@ -74,6 +137,14 @@ {:width 40 :height 40}) +(def token-icon-container-chat-list + {:width 20 + :height 20}) + +(def community-icon-container-chat-list + {:width 48 + :height 48}) + (defn container-list-size [size] {:width size :height size}) diff --git a/src/status_im/ui/components/topbar.cljs b/src/status_im/ui/components/topbar.cljs index 4f290872da..bffe2d5279 100644 --- a/src/status_im/ui/components/topbar.cljs +++ b/src/status_im/ui/components/topbar.cljs @@ -40,4 +40,4 @@ (when (seq right-accessories) {:right-accessories right-accessories}) (when new-ui? - {:background (quo2.colors/theme-colors quo2.colors/white quo2.colors/divider-dark)}))])])) + {:background (quo2.colors/theme-colors quo2.colors/neutral-5 quo2.colors/neutral-95)}))])])) diff --git a/src/status_im/ui/components/topnav.cljs b/src/status_im/ui/components/topnav.cljs new file mode 100644 index 0000000000..d5a72f9aba --- /dev/null +++ b/src/status_im/ui/components/topnav.cljs @@ -0,0 +1,48 @@ +(ns status-im.ui.components.topnav + (:require + [re-frame.core :as re-frame] + [quo2.components.button :as quo2.button] + [status-im.qr-scanner.core :as qr-scanner] + [status-im.utils.handlers :refer [ + [quo2.button/button {:icon true + :type :grey + :size 32 + :style {:margin-left 12} + :accessibility-label :notifications-button + :on-press #(do + (re-frame/dispatch [:mark-all-activity-center-notifications-as-read]) + (re-frame/dispatch [:navigate-to :notifications-center]))} + :main-icons2/notifications] + (when (pos? notif-count) + [react/view {:style (merge (styles/counter-public-container) {:top 5 :right 5}) + :pointer-events :none} + [react/view {:style styles/counter-public + :accessibility-label :notifications-unread-badge}]])])) \ No newline at end of file diff --git a/src/status_im/ui/screens/bottom_sheets/views.cljs b/src/status_im/ui/screens/bottom_sheets/views.cljs index 86c4171bf1..fc41b62118 100644 --- a/src/status_im/ui/screens/bottom_sheets/views.cljs +++ b/src/status_im/ui/screens/bottom_sheets/views.cljs @@ -5,6 +5,7 @@ [status-im.ui.screens.keycard.views :as keycard] [status-im.ui.screens.multiaccounts.key-storage.views :as key-storage] [status-im.ui.screens.about-app.views :as about-app] + [status-im.ui.screens.communities.sort-communities :as sort] [status-im.ui.screens.multiaccounts.recover.views :as recover.views] [quo.core :as quo])) @@ -37,7 +38,10 @@ (merge recover.views/bottom-sheet) (= view :migrate-account-password) - (merge key-storage/migrate-account-password))] + (merge key-storage/migrate-account-password) + + (= view :sort-communities) + (merge sort/sort-communities))] [quo/bottom-sheet opts (when content - [content (when options options)])])) + [content (when options options)])])) \ No newline at end of file diff --git a/src/status_im/ui/screens/communities/communities_list_redesign.cljs b/src/status_im/ui/screens/communities/communities_list_redesign.cljs new file mode 100644 index 0000000000..353adbef7d --- /dev/null +++ b/src/status_im/ui/screens/communities/communities_list_redesign.cljs @@ -0,0 +1,237 @@ +(ns status-im.ui.screens.communities.communities-list-redesign + (:require [re-frame.core :as re-frame] + [reagent.core :as reagent] + [status-im.i18n.i18n :as i18n] + [status-im.ui.components.list.views :as list] + [status-im.ui.components.react :as react] + [quo2.components.community-card-view :as community-card] + [quo2.components.separator :as separator] + [quo2.components.text :as quo2.text] + [quo2.components.button :as quo2.button] + [quo2.components.counter :as quo2.counter] + [quo2.components.filter-tags :as filter-tags] + [quo2.components.filter-tag :as filter-tag] + [quo2.foundations.colors :as quo2.colors] + [quo.components.safe-area :as safe-area] + [quo2.components.tabs :as quo2.tabs] + [status-im.ui.screens.chat.photos :as photos] + [status-im.react-native.resources :as resources] + [status-im.multiaccounts.core :as multiaccounts] + [status-im.ui.components.topbar :as topbar] + [status-im.ui.components.plus-button :as plus-button] + [status-im.utils.handlers :refer [ + [react/view {:margin-vertical 4 + :padding-horizontal 20} + [separator/separator]] + [community-segments]]) + [community-segments-view communities]]])]))) \ No newline at end of file diff --git a/src/status_im/ui/screens/communities/community_membership_status.cljs b/src/status_im/ui/screens/communities/community_membership_status.cljs new file mode 100644 index 0000000000..824f34179e --- /dev/null +++ b/src/status_im/ui/screens/communities/community_membership_status.cljs @@ -0,0 +1,149 @@ +(ns status-im.ui.screens.communities.community-membership-status + (:require [re-frame.core :as re-frame] + [reagent.core :as reagent] + [status-im.i18n.i18n :as i18n] + [status-im.ui.components.list.views :as list] + [status-im.ui.components.react :as react] + [quo2.components.community-card-view :as community-card] + [quo2.components.text :as quo2.text] + [quo2.foundations.colors :as quo2.colors] + [quo.components.safe-area :as safe-area] + [quo2.components.tabs :as quo2.tabs] + [status-im.ui.screens.chat.photos :as photos] + [status-im.react-native.resources :as resources] + [status-im.multiaccounts.core :as multiaccounts] + [status-im.ui.components.topbar :as topbar] + [status-im.ui.components.topnav :as topnav] + [status-im.utils.handlers :refer [ + [react/view {:margin-left 20 + :padding-bottom 12} + [text/text + {:style {:accessibility-label :sort-communities-title + :color (colors/theme-colors + colors/neutral-50 + colors/neutral-40) + :weight :medium + :size :paragraph-2}} + (i18n/label :t/sort-communities)]] + [quo/list-item + {:theme (theme/get-theme) + :title (i18n/label :t/alphabetically) + :accessibility-label :alphabetically + :icon :main-icons2/alphabetically + :new-ui? true}] + [quo/list-item + {:theme (theme/get-theme) + :title (i18n/label :t/total-members) + :accessibility-label :total-members + :icon :main-icons2/members + :new-ui? true}] + [quo/list-item + {:theme (theme/get-theme) + :title (i18n/label :t/active-members) + :accessibility-label :active-members + :icon :main-icons2/lightning + :new-ui? true}] + [quo/list-item + {:theme (theme/get-theme) + :title (i18n/label :t/mutal-contacts) + :accessibility-label :mutual-contacts + :icon :main-icons2/friend + :new-ui? true}]]) + +(def sort-communities + {:content sort-communities-view}) diff --git a/src/status_im/ui/screens/communities/styles.cljs b/src/status_im/ui/screens/communities/styles.cljs index 2c95901b2a..0fbccecde8 100644 --- a/src/status_im/ui/screens/communities/styles.cljs +++ b/src/status_im/ui/screens/communities/styles.cljs @@ -1,4 +1,6 @@ -(ns status-im.ui.screens.communities.styles) +(ns status-im.ui.screens.communities.styles + (:require + [quo2.foundations.colors :as colors])) (def category-item {:flex 1 @@ -6,3 +8,92 @@ :align-items :center :height 52 :padding-left 18}) + +(defn community-card [radius] + {:shadow-offset {:width 0 + :height 2} + :shadow-radius radius + :shadow-opacity 1 + :shadow-color colors/shadow + :border-radius radius + :justify-content :space-between + :elevation 2 + :background-color (colors/theme-colors + colors/white + colors/neutral-90)}) + +(defn stats-count-container [] + {:flex-direction :row + :align-items :center + :margin-right 16}) + +(defn card-stats-container [] + {:flex-direction :row + :position :absolute + :top 116 + :left 12 + :right 12}) + +(defn list-stats-container [] + {:flex-direction :row + :align-items :center}) + +(defn community-tags-container [] + {:flex-direction :row + :position :absolute + :top 154 + :left 12 + :right 12}) + +(defn card-view-content-container [] + {:flex 1 + :position :absolute + :top 40 + :left 0 + :right 0 + :bottom 0 + :border-radius 16 + :padding-horizontal 12 + :background-color (colors/theme-colors + colors/white + colors/neutral-90)}) + +(defn card-view-chat-icon [] + {:border-radius 48 + :position :absolute + :top -24 + :left 12 + :padding 2 + :background-color (colors/theme-colors + colors/white + colors/neutral-90)}) + +(defn list-view-content-container [] + {:flex-direction :row + :border-radius 16 + :align-items :center + :background-color (colors/theme-colors + colors/white + colors/neutral-90)}) + +(defn list-view-chat-icon [] + {:border-radius 32 + :padding 12}) + +(defn community-title-description-container [] + {:position :absolute + :top 32 + :left 12 + :right 12}) + +(defn community-cover-container [] + {:flex-direction :row + :height 64 + :border-top-right-radius 20 + :border-top-left-radius 20 + :background-color colors/primary-50-opa-20}) + +(defn permission-tag-styles [] + {:position :absolute + :top 8 + :right 8}) \ No newline at end of file diff --git a/translations/en.json b/translations/en.json index 5b100944ec..9ab5558121 100644 --- a/translations/en.json +++ b/translations/en.json @@ -442,6 +442,7 @@ "disconnected": "Chat offline", "discover": "Discover", "dismiss": "Dismiss", + "discover-communities": "Discover Communities", "done": "Done", "edit": "Edit", "edit-group": "Edit group", @@ -959,7 +960,6 @@ "notifications-switch": "Show notifications", "notifications-non-contacts": "Notifications from non-contacts", "notifications-transactions": "Wallet transactions", - "local-notifications": "Local notifications", "send-push-notifications": "Send Push Notifications", "send-push-notifications-description": "When disabled, the person receiving your messages won't be notified of their arrival", "push-notifications-server-enabled": "Server enabled", @@ -1554,6 +1554,7 @@ "master-account": "Master account", "back-up": "Back up", "key-on-device": "Private key is saved on this device", + "whats-trending": "See what`s trending", "seed-key-uid-mismatch": "Seed doesn't match", "seed-key-uid-mismatch-desc-1": "The seed phrase you entered does not match {{multiaccount-name}}", "seed-key-uid-mismatch-desc-2": "To manage keys for this account verify your seed phrase and try again.", @@ -1681,6 +1682,11 @@ "your-tip-limit": "Your tip limit", "your-price-limit": "Your price limit", "suggested-min-tip": "Suggested min. tip", + "sort-communities": "Sort communities", + "alphabetically": "Alphabetically", + "active-members": "Active members", + "total-members": "Total members", + "mutal-contacts": "Mutual contacts", "suggested-price-limit": "Suggested price limit", "include": "Include", "category": "Category", @@ -1749,9 +1755,9 @@ "send-contact-request-message": "To start a chat you need to become contacts", "contact-request": "Contact request", "say-hi": "Say hi", + "opened" : "Opened", "accepted": "Accepted", "declined": "Declined", - "contact-request": "Contact request", "contact-request-header": "👋 Contact requests", "contact-request-declined": "Declined ⓧ", "contact-request-accepted": "Accepted ✓", @@ -1762,5 +1768,14 @@ "positive": "Positive", "public": "Public", "successful-connection": "Successful Connection", - "all-connections": "All Connections" + "all-connections": "All Connections", + "K": "K", + "M": "M", + "gated": "Gated", + "featured" : "Featured", + "music": "Music", + "lifestyle": "Lifestyle", + "podcasts": "Podcasts", + "NFT":"NFT" + }