diff --git a/src/quo2/components/messages/author/style.cljs b/src/quo2/components/messages/author/style.cljs index b9fc5cbf36..0e51745ce1 100644 --- a/src/quo2/components/messages/author/style.cljs +++ b/src/quo2/components/messages/author/style.cljs @@ -14,7 +14,8 @@ (defn chat-key-text [] {:color (colors/theme-colors colors/neutral-40 colors/neutral-50) - :margin-left 8}) + :margin-left 8 + :padding-top 1}) (defn middle-dot-chat-key [] diff --git a/src/status_im2/contexts/chat/messages/avatar/view.cljs b/src/status_im2/contexts/chat/messages/avatar/view.cljs index 864c0673db..fd784101f5 100644 --- a/src/status_im2/contexts/chat/messages/avatar/view.cljs +++ b/src/status_im2/contexts/chat/messages/avatar/view.cljs @@ -8,7 +8,7 @@ (let [display-name (first (rf/sub [:contacts/contact-two-names-by-identity public-key])) photo-path (rf/sub [:chats/photo-path public-key]) online? (rf/sub [:visibility-status-updates/online? public-key])] - [rn/view {:style {:padding-top 2}} + [rn/view {:style {:padding-top 4}} [rn/touchable-opacity {:active-opacity 1 :on-press #(rf/dispatch [:chat.ui/show-profile public-key])} diff --git a/src/status_im2/contexts/chat/messages/content/text/view.cljs b/src/status_im2/contexts/chat/messages/content/text/view.cljs index 6f606e6a2e..637fe6fb3d 100644 --- a/src/status_im2/contexts/chat/messages/content/text/view.cljs +++ b/src/status_im2/contexts/chat/messages/content/text/view.cljs @@ -104,9 +104,9 @@ (fn [acc e] (render-inline acc e chat-id style-override mention-first)) [quo/text - {:size :paragraph-1 - :style {:margin-bottom (if mention-first (if platform/ios? 4 0) 2) - :margin-top (if mention-first (if platform/ios? -4 0) 2) + {:style {:size :paragraph-1 + :margin-bottom (if mention-first (if platform/ios? 4 0) 2) + :margin-top (if mention-first (if platform/ios? -4 0) -1) :color (when (seq style-override) colors/white)}}] children)]) diff --git a/src/status_im2/contexts/chat/messages/content/view.cljs b/src/status_im2/contexts/chat/messages/content/view.cljs index 10ce8a1fd6..0d4e97770e 100644 --- a/src/status_im2/contexts/chat/messages/content/view.cljs +++ b/src/status_im2/contexts/chat/messages/content/view.cljs @@ -39,7 +39,7 @@ (not show-reactions?) show-user-info?) [avatar/avatar from :small] - [rn/view {:padding-top 2 :width 32}])) + [rn/view {:padding-top 4 :width 32}])) (defn author [{:keys [response-to diff --git a/src/status_im2/contexts/chat/messages/drawers/view.cljs b/src/status_im2/contexts/chat/messages/drawers/view.cljs index 395ad6d0ea..7a88f312ff 100644 --- a/src/status_im2/contexts/chat/messages/drawers/view.cljs +++ b/src/status_im2/contexts/chat/messages/drawers/view.cljs @@ -229,11 +229,13 @@ :icon (:icon action) :on-press (fn [] (rf/dispatch [:hide-bottom-sheet]) - (when on-press (on-press)))}])) - (when-not (empty? danger-actions) - [quo/separator]) + (when on-press (on-press)))}]))] - ;; DANGER ACTIONS + (when-not (empty? danger-actions) + [quo/separator {:style {:margin-vertical 8}}]) + + ;; DANGER ACTIONS + [rn/view {:style {:padding-horizontal 8}} (for [action danger-actions] (let [on-press (:on-press action)] ^{:key (:id action)} @@ -244,11 +246,13 @@ :icon (:icon action) :on-press (fn [] (rf/dispatch [:hide-bottom-sheet]) - (when on-press (on-press)))}])) - (when-not (empty? admin-actions) - [quo/separator]) + (when on-press (on-press)))}]))] - ;; ADMIN ACTIONS + (when-not (empty? admin-actions) + [quo/separator {:style {:margin-vertical 8}}]) + + ;; ADMIN ACTIONS + [rn/view {:style {:padding-horizontal 8}} (for [action admin-actions] (let [on-press (:on-press action)] ^{:key (:id action)} diff --git a/src/status_im2/contexts/chat/messages/navigation/style.cljs b/src/status_im2/contexts/chat/messages/navigation/style.cljs index 3786a1c67c..4c393ec903 100644 --- a/src/status_im2/contexts/chat/messages/navigation/style.cljs +++ b/src/status_im2/contexts/chat/messages/navigation/style.cljs @@ -5,17 +5,6 @@ (defonce ^:const navigation-bar-height 100) (defonce ^:const header-offset 56) -(defn button-container - [position] - (merge - {:width 32 - :height 32 - :border-radius 10 - :justify-content :center - :align-items :center - :background-color (colors/theme-colors colors/white-opa-40 colors/neutral-80-opa-40)} - position)) - (defn background-view [theme] {:position :absolute @@ -62,14 +51,15 @@ :opacity (if loaded? 1 0)}) (def header-container - {:position :absolute - :top header-offset - :left 0 - :right 0 - :padding-bottom 8 - :display :flex - :flex-direction :row - :overflow :hidden}) + {:position :absolute + :top header-offset + :left 0 + :right 0 + :padding-bottom 8 + :padding-horizontal 20 + :display :flex + :flex-direction :row + :overflow :hidden}) (def header {:flex 1}) diff --git a/src/status_im2/contexts/chat/messages/navigation/view.cljs b/src/status_im2/contexts/chat/messages/navigation/view.cljs index 8195ce6e20..cd1b311746 100644 --- a/src/status_im2/contexts/chat/messages/navigation/view.cljs +++ b/src/status_im2/contexts/chat/messages/navigation/view.cljs @@ -15,7 +15,7 @@ [utils.re-frame :as rf])) (defn f-view - [{:keys [scroll-y chat chat-screen-loaded? all-loaded? display-name online? photo-path]}] + [{:keys [theme scroll-y chat chat-screen-loaded? all-loaded? display-name online? photo-path]}] (let [{:keys [group-chat chat-id]} chat opacity-animation (reanimated/interpolate scroll-y [style/navigation-bar-height @@ -46,22 +46,24 @@ [reanimated/view {:style (style/animated-blur-view all-loaded? opacity-animation)} [blur/view - {:blur-amount 20 - :blur-type (colors/theme-colors :light :dark) - :blur-radius (if platform/ios? 20 10) - :style {:flex 1}}]] + {:blur-amount 20 + :blur-type :transparent + :overlay-color (colors/theme-colors colors/white-70-blur colors/neutral-95-opa-70-blur theme) + :blur-radius (if platform/ios? 20 10) + :style {:flex 1}}]] [rn/view {:style style/header-container} - [rn/touchable-opacity - {:active-opacity 1 + [quo/button + {:icon-only? true + :type :grey + :background :blur + :size 32 + :accessibility-label :back-button :on-press #(do (when config/shell-navigation-disabled? (rf/dispatch [:chat/close])) - (rf/dispatch [:navigate-back])) - :accessibility-label :back-button - :style (style/button-container {:margin-left 20})} - [quo/icon :i/arrow-left - {:size 20 :color (colors/theme-colors colors/black colors/white)}]] + (rf/dispatch [:navigate-back]))} + :i/arrow-left] [reanimated/view {:style (style/animated-header all-loaded? translate-animation title-opacity-animation)} [rn/view {:style style/header-content-container} @@ -88,15 +90,17 @@ :style (style/header-status)} (i18n/label (if online? :t/online :t/offline))])]]] - [rn/touchable-opacity - {:active-opacity 1 - :style (style/button-container {:margin-right 20}) + [quo/button + {:icon-only? true + :type :grey + :background :blur + :size 32 :accessibility-label :options-button :on-press (fn [] (rf/dispatch [:dismiss-keyboard]) (rf/dispatch [:show-bottom-sheet {:content (fn [] [actions/chat-actions chat true])}]))} - [quo/icon :i/options {:size 20 :color (colors/theme-colors colors/black colors/white)}]]] + :i/options]] [:f> pin.banner/f-banner {:chat-id chat-id