From bbbd4b9d46d27fbd33b392506bdcdffd8d3fca33 Mon Sep 17 00:00:00 2001 From: Ibrkhalil Date: Fri, 15 Dec 2023 17:06:16 +0200 Subject: [PATCH] Refactors --- .../internal_link_card/channel/style.cljs | 24 ++++++------ .../internal_link_card/channel/view.cljs | 19 +++++----- .../internal_link_card/community/style.cljs | 38 ++++++++++++------- .../internal_link_card/community/view.cljs | 21 +++++----- .../links/internal_link_card/user/style.cljs | 18 ++++----- .../links/internal_link_card/user/view.cljs | 13 +++---- .../links/internal_link_card_community.cljs | 3 +- 7 files changed, 71 insertions(+), 65 deletions(-) diff --git a/src/quo/components/links/internal_link_card/channel/style.cljs b/src/quo/components/links/internal_link_card/channel/style.cljs index 2242980e3cc2..9f3ebb343db8 100644 --- a/src/quo/components/links/internal_link_card/channel/style.cljs +++ b/src/quo/components/links/internal_link_card/channel/style.cljs @@ -10,11 +10,12 @@ :border-radius 16}) (defn loading-first-line-bar - [theme] - {:style {:background-color (colors/theme-colors colors/neutral-5 colors/neutral-80 theme) - :width 72 - :height 16 - :border-radius 6}}) + [theme margin-right?] + {:background-color (colors/theme-colors colors/neutral-5 colors/neutral-80 theme) + :width 72 + :margin-right (when margin-right? 4) + :height 16 + :border-radius 6}) (defn loading-second-line-bar [theme] @@ -37,10 +38,10 @@ :border-radius 12}) (defn container - [] + [theme] {:border-width 1 - :border-color (colors/theme-colors colors/neutral-20 colors/neutral-80) - :background-color (colors/theme-colors colors/white colors/neutral-80-opa-40) + :border-color (colors/theme-colors colors/neutral-20 colors/neutral-80 theme) + :background-color (colors/theme-colors colors/white colors/neutral-80-opa-40 theme) :border-radius 16 :padding-horizontal 12 :padding-top 10 @@ -52,8 +53,7 @@ :align-items :center}) (def title - {:flex 1 - :margin-bottom 2}) + {:margin-bottom 2}) (def logo {:margin-right 6 @@ -65,4 +65,6 @@ [theme] {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}) -(def row-spacing {:flex-direction :row :margin-bottom 13}) +(def row-spacing + {:flex-direction :row + :margin-bottom 13}) diff --git a/src/quo/components/links/internal_link_card/channel/view.cljs b/src/quo/components/links/internal_link_card/channel/view.cljs index 5452bd84b22b..f5dc2e059f3d 100644 --- a/src/quo/components/links/internal_link_card/channel/view.cljs +++ b/src/quo/components/links/internal_link_card/channel/view.cljs @@ -24,7 +24,7 @@ {:size :paragraph-1 :number-of-lines 1 :weight :semi-bold - :style (dissoc style/title :flex) + :style style/title :accessibility-label :title} title] [icon/icon :i/chevron-right (style/channel-chevron-props theme)] @@ -32,7 +32,7 @@ {:size :paragraph-1 :number-of-lines 1 :weight :semi-bold - :style (dissoc style/title :flex) + :style style/title :accessibility-label :title} channel-name]]) @@ -53,25 +53,24 @@ (defn- loading-view [theme] [rn/view - {:accessibility-label :loading + {:accessibility-label :loading-channel-link-view :style {:height 215}} [rn/view {:style {:flex-direction :row}} [rn/view {:style style/row-spacing} - [rn/view (style/loading-circle theme)] - [rn/view (assoc (style/loading-first-line-bar theme) :margin-right 4)]] + [rn/view {:style (style/loading-circle theme)}] + [rn/view {:style (style/loading-first-line-bar theme true)}]] [rn/view {:style style/row-spacing} - [rn/view (style/loading-circle theme)] - [rn/view (style/loading-first-line-bar theme)]]] + [rn/view {:style (style/loading-circle theme)}] + [rn/view {:style (style/loading-first-line-bar theme false)}]]] [rn/view {:style (style/loading-second-line-bar theme)}] [rn/view {:style (style/loading-thumbnail-box theme)}]]) (defn view-internal [{:keys [title description loading? icon banner theme on-press channel-name] - :or {loading? false - channel-name "#general"}}] + :or {channel-name "empty name"}}] [rn/pressable - {:style (style/container) + {:style (style/container theme) :accessibility-label :internal-link-card :on-press on-press} (if loading? diff --git a/src/quo/components/links/internal_link_card/community/style.cljs b/src/quo/components/links/internal_link_card/community/style.cljs index 1533b82458eb..7d17baa4678d 100644 --- a/src/quo/components/links/internal_link_card/community/style.cljs +++ b/src/quo/components/links/internal_link_card/community/style.cljs @@ -18,14 +18,17 @@ :border-radius 16}) (def loading-stat-container - {:flex-direction :row :align-items :center :margin-right 12 :margin-bottom -6}) + {:flex-direction :row + :align-items :center + :margin-right 12 + :margin-bottom -6}) (defn loading-first-line-bar [theme] - {:style {:background-color (colors/theme-colors colors/neutral-5 colors/neutral-80 theme) - :width 145 - :height 16 - :border-radius 6}}) + {:background-color (colors/theme-colors colors/neutral-5 colors/neutral-80 theme) + :width 145 + :height 16 + :border-radius 6}) (defn loading-second-line-bar [theme] @@ -48,10 +51,10 @@ :border-radius 12}) (defn container - [] + [theme] {:border-width 1 - :border-color (colors/theme-colors colors/neutral-20 colors/neutral-80) - :background-color (colors/theme-colors colors/white colors/neutral-80-opa-40) + :border-color (colors/theme-colors colors/neutral-20 colors/neutral-80 theme) + :background-color (colors/theme-colors colors/white colors/neutral-80-opa-40 theme) :border-radius 16 :padding-horizontal 12 :padding-top 10 @@ -63,13 +66,20 @@ :align-items :center}) (def title - {:flex 1 - :margin-bottom 2}) + {:margin-bottom 2}) (def logo - {:margin-right 6 - :width 16 + {:width 16 :height 16 - :border-radius 8}) + :border-radius 8 + :margin-right 4 + :margin-bottom 2}) + +(def row-spacing + {:flex-direction :row + :margin-bottom 12 + :margin-top 4}) -(def row-spacing {:flex-direction :row :margin-bottom 12 :margin-top 4}) +(def stat-container + {:flex-direction :row + :margin-top 12}) diff --git a/src/quo/components/links/internal_link_card/community/view.cljs b/src/quo/components/links/internal_link_card/community/view.cljs index 1109ee1ab8be..8bc963352125 100644 --- a/src/quo/components/links/internal_link_card/community/view.cljs +++ b/src/quo/components/links/internal_link_card/community/view.cljs @@ -14,9 +14,7 @@ :number-of-lines 3 :accessibility-label :description} description] - [rn/view - {:style {:flex-direction :row - :margin-top 12}} + [rn/view {:style style/stat-container} [community-stat/view {:value members-count :icon :i/members @@ -34,7 +32,7 @@ {:size :paragraph-1 :number-of-lines 1 :weight :semi-bold - :style (dissoc style/title :flex) + :style style/title :accessibility-label :title} title]) @@ -50,7 +48,7 @@ [rn/image {:accessibility-label :logo :source logo - :style (assoc style/logo :margin-right 4 :margin-bottom 2)}]) + :style style/logo}]) (defn- stat-loading [theme] @@ -60,22 +58,21 @@ (defn- loading-view [theme] - [rn/view {:accessibility-label :loading} + [rn/view {:accessibility-label ::loading-community-link-view} [rn/view {:style style/row-spacing} - [rn/view (style/loading-circle theme)] - [rn/view (style/loading-first-line-bar theme)]] + [rn/view {:style (style/loading-circle theme)}] + [rn/view {:style (style/loading-first-line-bar theme)}]] [rn/view {:style (style/loading-second-line-bar theme)}] - [rn/view style/row-spacing + [rn/view {:style style/row-spacing} [stat-loading theme] [stat-loading theme]] [rn/view {:style (style/loading-thumbnail-box theme)}]]) (defn- internal-view [{:keys [title description loading? icon banner members-count active-members-count - theme on-press] - :or {loading? false}}] + theme on-press]}] [rn/pressable - {:style (style/container) + {:style (style/container theme) :accessibility-label :internal-link-card :on-press on-press} (if loading? diff --git a/src/quo/components/links/internal_link_card/user/style.cljs b/src/quo/components/links/internal_link_card/user/style.cljs index 6a0c0537157a..b7d0eed87e7b 100644 --- a/src/quo/components/links/internal_link_card/user/style.cljs +++ b/src/quo/components/links/internal_link_card/user/style.cljs @@ -11,10 +11,10 @@ (defn loading-first-line-bar [theme] - {:style {:background-color (colors/theme-colors colors/neutral-5 colors/neutral-80 theme) - :width 145 - :height 16 - :border-radius 6}}) + {:background-color (colors/theme-colors colors/neutral-5 colors/neutral-80 theme) + :width 145 + :height 16 + :border-radius 6}) (defn loading-second-line-bar [theme] @@ -46,8 +46,8 @@ (merge (linear-gradient-props theme customization-color) {:style {:border-width 1 - :border-color (colors/theme-colors colors/neutral-20 colors/neutral-80) - :background-color (colors/theme-colors colors/white colors/neutral-80-opa-40) + :border-color (colors/theme-colors colors/neutral-20 colors/neutral-80 theme) + :background-color (colors/theme-colors colors/white colors/neutral-80-opa-40 theme) :border-radius 16 :padding-horizontal 12 :padding-top 10 @@ -59,13 +59,13 @@ :align-items :center}) (def title - {:flex 1 - :margin-bottom 2}) + {:margin-bottom 2}) (def logo {:margin-right 6 :width 16 :height 16 - :border-radius 8}) + :border-radius 8 + :margin-bottom 2}) (def row-spacing {:flex-direction :row :margin-bottom 12}) diff --git a/src/quo/components/links/internal_link_card/user/view.cljs b/src/quo/components/links/internal_link_card/user/view.cljs index a9f76f6617f7..6f1ab359d2ca 100644 --- a/src/quo/components/links/internal_link_card/user/view.cljs +++ b/src/quo/components/links/internal_link_card/user/view.cljs @@ -28,7 +28,7 @@ {:size :paragraph-1 :number-of-lines 1 :weight :semi-bold - :style (dissoc style/title :flex) + :style style/title :accessibility-label :title} title]) @@ -37,21 +37,20 @@ [rn/image {:accessibility-label :logo :source logo - :style (assoc style/logo :margin-bottom 2)}]) + :style style/logo}]) (defn- loading-view [theme] - [rn/view {:accessibility-label :loading} + [rn/view {:accessibility-label :loading-user-link-view} [rn/view {:style style/row-spacing} - [rn/view (style/loading-circle theme)] - [rn/view (style/loading-first-line-bar theme)]] + [rn/view {:style (style/loading-circle theme)}] + [rn/view {:style (style/loading-first-line-bar theme)}]] [rn/view {:style (style/loading-second-line-bar theme)}] [rn/view {:style (style/last-bar-line-bar theme)}]]) (defn view-internal [{:keys [title loading? icon - theme on-press subtitle emojis customization-color] - :or {loading? true}}] + theme on-press subtitle emojis customization-color]}] [(if loading? rn/view linear-gradient/linear-gradient) (style/container customization-color loading? theme) [rn/pressable diff --git a/src/status_im2/contexts/quo_preview/links/internal_link_card_community.cljs b/src/status_im2/contexts/quo_preview/links/internal_link_card_community.cljs index 69616c63eb2c..3436884fa274 100644 --- a/src/status_im2/contexts/quo_preview/links/internal_link_card_community.cljs +++ b/src/status_im2/contexts/quo_preview/links/internal_link_card_community.cljs @@ -39,8 +39,7 @@ :i/muted :i/mention :i/mobile :i/close-circle :i/unlocked :i/locked :i/pin :i/clear :i/check] :active-members-count 12 - :link "https://status.app/community-link" - :loading? false + :loading? true :customization-color :purple :banner :light-blur-background :type :community