Refactors

status-im · Dec 15, 2023 · bbbd4b9 · bbbd4b9
1 parent 484dc07
commit bbbd4b9
Show file tree

Hide file tree

Showing 7 changed files with 71 additions and 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
@@ -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
@@ -24,15 +24,15 @@
     {: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)]
    [text/text
     {: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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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