fix: community buttons (#18392)

src/status_im/contexts/communities/actions/community_rules_list/style.cljs

@@ -7,8 +7,7 @@
    :margin-top     16})
 
 (def community-rule-index
-  {:margin-left 5})
+  {:margin-left 4})
 
 (def community-rule-text
-  {:margin-left 6
+  {:flex 1})
-   :flex        1})

src/status_im/contexts/communities/actions/community_rules_list/view.cljs

@@ -44,9 +44,10 @@
     (str title ": " content)]])
 
 (defn view
-  [rules]
+  [rules scroll-enabled?]
   [rn/flat-list
    {:shows-horizontal-scroll-indicator false
+    :scroll-enabled                    scroll-enabled?
     :data                              rules
     :separator                         [rn/view {:margin-top 1}]
     :render-fn                         community-rule-item}])

src/status_im/contexts/communities/actions/request_to_join/style.cljs

@@ -11,32 +11,31 @@
    :align-items     :center
    :justify-content :space-between})
 
-(def request-icon
+(def container
-  {:height           32
+  {:flex 1})
-   :width            32
+
-   :align-items      :center
+(def community-icon
-   :background-color colors/white
+  {:margin-right :auto :margin-top 4})
-   :border-color     colors/neutral-20
-   :border-width     1
-   :border-radius    8
-   :display          :flex
-   :justify-content  :center})
 
 (def cancel-button
   {:flex         1
    :margin-right 12})
 
-(defn bottom-container
+(def bottom-container
-  []
+  {:padding-top       32
-  {:padding-top     32
+   :flex-direction    :row
-   :flex-direction  :row
+   :align-items       :center
-   :align-items     :center
+   :margin-horizontal 20
-   :justify-content :space-evenly})
+   :justify-content   :space-evenly})
 
 (def final-disclaimer-container
-  {:margin-top         12
+  {:margin-bottom      7
+   :margin-top         12
    :padding-horizontal 40})
 
 (def final-disclaimer-text
   {:color      colors/neutral-50
    :text-align :center})
+
+(def rules-text
+  {:margin-top 24})

src/status_im/contexts/communities/actions/request_to_join/view.cljs

@@ -1,6 +1,8 @@
 (ns status-im.contexts.communities.actions.request-to-join.view
   (:require
     [quo.core :as quo]
+    [quo.foundations.colors :as colors]
+    [quo.theme]
     [react-native.core :as rn]
     [react-native.gesture :as gesture]
     [status-im.common.password-authentication.view :as password-authentication]
@@ -18,14 +20,15 @@
                                           {:community-id id :password %}])}])
   (rf/dispatch [:navigate-back]))
 
-(defn request-to-join
+(defn- view-internal
-  []
+  [{:keys [theme]}]
   (fn []
     (let [{:keys [name
                   id
-                  images]} (rf/sub [:get-screen-params])]
+                  images]} (rf/sub [:get-screen-params])
-      [rn/view {:flex 1}
+          {:keys [color]}  (rf/sub [:communities/community id])]
-       [gesture/scroll-view {:style {:flex 1}}
+      [rn/safe-area-view {:flex 1}
+       [gesture/scroll-view {:style style/container}
         [rn/view style/page-container
          [rn/view {:style style/title-container}
           [quo/text
@@ -33,33 +36,36 @@
             :weight              :semi-bold
             :size                :heading-2}
            (i18n/label :t/request-to-join)]]
-         [rn/view {:style {:margin-right :auto :margin-top 8}}
+         [rn/view {:style style/community-icon}
           [quo/context-tag
            {:type           :community
             :size           24
             :community-logo (:thumbnail images)
             :community-name name}]]
          [quo/text
-          {:style               {:margin-top 24}
+          {:style               style/rules-text
            :accessibility-label :communities-rules-title
            :weight              :semi-bold
            :size                :paragraph-1}
           (i18n/label :t/community-rules)]
-         [community-rules/view community-rules/standard-rules]
+         [community-rules/view community-rules/standard-rules false]]]
-         [rn/view {:style (style/bottom-container)}
+       [rn/view {:style style/bottom-container}
-          [quo/button
+        [quo/button
-           {:accessibility-label :cancel
+         {:accessibility-label :cancel
-            :on-press            #(rf/dispatch [:navigate-back])
+          :on-press            #(rf/dispatch [:navigate-back])
-            :type                :grey
+          :type                :grey
-            :container-style     style/cancel-button}
+          :container-style     style/cancel-button}
-           (i18n/label :t/cancel)]
+         (i18n/label :t/cancel)]
-          [quo/button
+        [quo/button
-           {:accessibility-label :join-community-button
+         {:accessibility-label :join-community-button
-            :on-press            #(join-community-and-navigate-back id)
+          :on-press            #(join-community-and-navigate-back id)
-            :container-style     {:flex 1}}
+          :container-style     {:flex 1}
-           (i18n/label :t/request-to-join)]]
+          :inner-style         {:background-color (colors/resolve-color color theme)}}
-         [rn/view {:style style/final-disclaimer-container}
+         (i18n/label :t/request-to-join)]]
-          [quo/text
+       [rn/view {:style style/final-disclaimer-container}
-           {:size  :paragraph-2
+        [quo/text
-            :style style/final-disclaimer-text}
+         {:size  :paragraph-2
-           (i18n/label :t/request-to-join-disclaimer)]]]]])))
+          :style style/final-disclaimer-text}
+         (i18n/label :t/request-to-join-disclaimer)]]])))
+
+(def view (quo.theme/with-theme view-internal))

src/status_im/navigation/screens.cljs

@@ -97,7 +97,7 @@
 
     {:name      :community-requests-to-join
      :options   {:sheet? true}
-     :component join-menu/request-to-join}
+     :component join-menu/view}
 
     {:name      :community-account-selection
      :options   {:sheet? true}