diff --git a/src/quo/components/list/item.cljs b/src/quo/components/list/item.cljs index c92f64cdfa..c1bd0a4445 100644 --- a/src/quo/components/list/item.cljs +++ b/src/quo/components/list/item.cljs @@ -153,22 +153,24 @@ ;; Occupy only content width, never grow, but shrink if need be :flex-grow 0 :flex-shrink 1 + :padding-right 16 :align-items (or (:left-side-alignment props) :center)}} [icon-column props] [title-column props]]) -(defn right-side [{:keys [chevron active disabled accessory accessory-text animated-accessory?]}] +(defn right-side [{:keys [chevron active disabled accessory accessory-text accessory-style animated-accessory?]}] (when (or chevron accessory) - [rn/view {:style {:align-items :center - :justify-content :flex-end - :flex-direction :row - ;; Grow to occupy full space, shrink when need be, but always maitaining 16px left gutter - :flex-grow 1 - :flex-shrink 1 - :margin-left 16 - ;; When the left-side leaves no room for right-side, the rendered element is pushed out. A flex-basis ensures that there is some room reserved. - ;; The number 80px was determined by trial and error. - :flex-basis 80}} + [rn/view {:style (merge {:align-items :center + :justify-content :flex-end + :flex-direction :row + ;; Grow to occupy full space, shrink when need be, but always maitaining 16px left gutter + :flex-grow 1 + :flex-shrink 0 + :margin-left 16 + ;; When the left-side leaves no room for right-side, the rendered element is pushed out. A flex-basis ensures that there is some room reserved. + ;; The number 80px was determined by trial and error. + :flex-basis 80} + accessory-style)} [rn/view {:style (:tiny spacing/padding-horizontal)} (case accessory :radio [controls/radio {:value active :disabled disabled}] @@ -194,7 +196,7 @@ [{:keys [theme accessory disabled subtitle-max-lines icon icon-container-style left-side-alignment title subtitle subtitle-secondary active on-press on-long-press chevron size text-size - accessory-text accessibility-label title-accessibility-label + accessory-text accessibility-label title-accessibility-label accessory-style haptic-feedback haptic-type error animated animated-accessory? title-text-weight] :or {subtitle-max-lines 1 theme :main @@ -254,6 +256,7 @@ :on-press on-press :accessory-text accessory-text :animated-accessory? animated-accessory? + :accessory-style accessory-style :accessory accessory}]]] (when error [tooltip/tooltip (merge {:bottom-value 0} diff --git a/src/status_im/ui/screens/chat/views.cljs b/src/status_im/ui/screens/chat/views.cljs index 003dea85f3..a00b7116f4 100644 --- a/src/status_im/ui/screens/chat/views.cljs +++ b/src/status_im/ui/screens/chat/views.cljs @@ -332,7 +332,9 @@ :height 256}])) (defn topbar [] - [toolbar-content/toolbar-content-view-inner @(re-frame/subscribe [:chats/current-chat])]) + (let [window-width @(re-frame/subscribe [:dimensions/window-width])] + [react/view {:flex 1 :width (- window-width 120)} + [toolbar-content/toolbar-content-view-inner @(re-frame/subscribe [:chats/current-chat])]])) (defn chat [] (let [curr-chat-id (:chat-id @(re-frame/subscribe [:chats/current-chat-chat-view])) diff --git a/src/status_im/ui/screens/communities/requests_to_join.cljs b/src/status_im/ui/screens/communities/requests_to_join.cljs index ac88e33ca2..26e212f291 100644 --- a/src/status_im/ui/screens/communities/requests_to_join.cljs +++ b/src/status_im/ui/screens/communities/requests_to_join.cljs @@ -26,7 +26,7 @@ [react/touchable-highlight {:on-press #(re-frame/dispatch [:communities.ui/decline-request-to-join-pressed community-id request-id])} [icons/icon :main-icons/cancel {:width 35 :height 35 - :container-style {:padding-left 10} + :container-style {:margin-left 16} :color colors/red}]]]) (defn render-request [{:keys [id public-key]} _ _ {:keys [community-id @@ -36,7 +36,8 @@ [quo/list-item {:title (multiaccounts/displayed-name member) :accessibility-label :member-item - + :accessory-style (when can-manage-users? + {:flex-basis 120}) :accessory (when can-manage-users? [request-actions community-id id]) :icon [chat-icon/contact-icon-contacts-tab diff --git a/src/status_im/ui/screens/multiaccounts/views.cljs b/src/status_im/ui/screens/multiaccounts/views.cljs index 4e9718fbad..a670279dd6 100644 --- a/src/status_im/ui/screens/multiaccounts/views.cljs +++ b/src/status_im/ui/screens/multiaccounts/views.cljs @@ -20,10 +20,10 @@ [:multiaccounts.login.ui/multiaccount-selected key-uid]) :icon [photos/photo (multiaccounts/displayed-photo account) {:size styles/multiaccount-image-size}] :title name + :accessory-style (when keycard-pairing {:flex-basis 100}) :accessory (when keycard-pairing [react/view {:justify-content :center :align-items :center - :margin-right 7 :width 32 :height 32 :border-radius 24