many fixes and some improvements on header

status-im · Jul 1, 2022 · b2b03b5 · b2b03b5
1 parent cfb6e41
commit b2b03b5
Show file tree

Hide file tree

Showing 12 changed files with 92 additions and 80 deletions.
diff --git a/src/quo2/components/button.cljs b/src/quo2/components/button.cljs
@@ -61,7 +61,7 @@
                                                     :pressed  colors/danger-40
                                                     :disabled colors/danger-50}}}})
 
-(defn style-container [type size disabled background-color border-color icon above width before after rounded]
+(defn style-container [type size disabled background-color border-color icon above width before after]
   (merge {:height             size
           :align-items        :center
           :justify-content    :center
@@ -88,9 +88,7 @@
            {:border-color border-color
             :border-width 1})
          (when disabled
-           {:opacity 0.3})
-         (when rounded
-           {:border-radius (/ width 2)})))
+           {:opacity 0.3})))
 
 (defn button
   "with label
@@ -107,10 +105,9 @@
   [_ _]
   (let [pressed (reagent/atom false)]
     (fn [{:keys [on-press disabled type size before after above width
-                 on-long-press accessibility-label icon style rounded]
+                 on-long-press accessibility-label icon style]
           :or   {type :primary
-                 size 40
-                 rounded false}}
+                 size 40}}
          children]
       (let [{:keys [icon-color background-color label border-color]}
             (get-in themes [(theme/get-theme) type])
@@ -140,8 +137,7 @@
                             above
                             width
                             before
-                            after
-                            rounded)
+                            after)
                            style)}
           (when above
             [rn/view

diff --git a/src/quo2/foundations/colors.cljs b/src/quo2/foundations/colors.cljs
@@ -197,12 +197,7 @@
 
 ;; background
 
-(def ui-background-light white)
-(def ui-background-02-light "rgba(245,249,250,1)")
-(def ui-background-03-light "rgba(230,237,240,1)")
-(def ui-background-dark "rgba(24,28,36,1)")
-(def ui-background-02-dark "rgba(4,11,20,1)")
-(def ui-background-03-dark "rgba(14, 22, 32, 1)")
+(def ui-background-02-light "#F5F9FA")
 
 ;; divider
 (def divider-light "rgba(237, 242, 244, 1)")

diff --git a/src/quo2/foundations/typography.cljs b/src/quo2/foundations/typography.cljs
@@ -1,5 +1,4 @@
-(ns quo2.foundations.typography
-  (:require [quo2.foundations.colors :as quo2.colors]))
+(ns quo2.foundations.typography)
 
 (def heading-1 {:font-size   27
                 :line-height 32.4
@@ -30,11 +29,4 @@
 
 (def font-bold {:font-family "Inter-Bold"}) ; 700
 
-(def monospace {:font-family "InterStatus-Regular"})
-
-(defn message-default-style []
-  {:font-family "Inter-Regular"
-   :color       (quo2.colors/theme-colors quo2.colors/black quo2.colors/white)
-   :font-size   15
-   :line-height 21.75
-   :letter-spacing -0.135})
+(def monospace {:font-family "InterStatus-Regular"})
diff --git a/src/status_im/ui/components/plus_button.cljs b/src/status_im/ui/components/plus_button.cljs
@@ -8,12 +8,13 @@
 (def action-button-container
   {:align-items     :center
    :justify-content :center
-   :height          32})
+   :height          32
+   :border-radius   16
+   :overflow        :hidden})
 
 (defn action-button []
   {:width            32
    :height           32
-   :background-color (:interactive-01 @colors/theme)
    :border-radius    18
    :align-items      :center
    :justify-content  :center})
@@ -48,7 +49,6 @@
    [quo2.button/button {:type                :primary
                         :size                32
                         :width               32
-                        :rounded             true
                         :accessibility-label (or accessibility-label :plus-button)
                         :on-press            on-press}
     [react/view (action-button)

diff --git a/src/status_im/ui/components/search_input/view.cljs b/src/status_im/ui/components/search_input/view.cljs
@@ -23,15 +23,15 @@
                        :container-style     {:border-radius 10
                                              :border-width 1
                                              :border-color (:ui-01  @colors/theme)
-                                             :background-color (quo2.colors/theme-colors quo2.colors/white quo2.colors/ui-background-03-dark)
+                                             :background-color (quo2.colors/theme-colors quo2.colors/white quo2.colors/neutral-90)
                                              :overflow :hidden}
                        :input-style         {:height         32
                                              :padding-top    2
                                              :padding-bottom 2
-                                             :background-color (quo2.colors/theme-colors quo2.colors/white quo2.colors/ui-background-03-dark)}
+                                             :background-color (quo2.colors/theme-colors quo2.colors/white quo2.colors/neutral-90)}
                        :before              {:icon      :main-icons/search2
                                              :style     {:padding-horizontal 8
-                                                         :background-color (quo2.colors/theme-colors quo2.colors/white quo2.colors/ui-background-03-dark)}
+                                                         :background-color (quo2.colors/theme-colors quo2.colors/white quo2.colors/neutral-90)}
                                              :on-press  #(some-> ^js @input-ref (.focus))
                                              :icon-opts {:color (quo2.colors/theme-colors quo2.colors/neutral-50 quo2.colors/white)}}
                        :on-focus            #(do

diff --git a/src/status_im/ui/components/topbar.cljs b/src/status_im/ui/components/topbar.cljs
@@ -1,6 +1,7 @@
 (ns status-im.ui.components.topbar
   (:require [re-frame.core :as re-frame]
-            [quo.core :as quo]))
+            [quo.core :as quo]
+            [quo2.foundations.colors :as quo2.colors]))
 
 (def default-button-width 48)
 
@@ -20,8 +21,9 @@
     label
     (assoc :label label)))
 
-(defn topbar [{:keys [navigation use-insets right-accessories modal? content border-bottom?]
-               :or   {border-bottom? true}
+(defn topbar [{:keys [navigation use-insets right-accessories modal? content border-bottom? new-ui?] ;; remove new-ui? key, temp fix
+               :or   {border-bottom? true
+                      new-ui?        false}
                :as   props}]
   (let [navigation (if (= navigation :none)
                      nil
@@ -36,4 +38,6 @@
                            :border-bottom    border-bottom?}
                           props
                           (when (seq right-accessories)
-                            {:right-accessories right-accessories}))])]))
+                            {:right-accessories right-accessories})
+                          (when new-ui?
+                            {:background (quo2.colors/theme-colors quo2.colors/white quo2.colors/divider-dark)}))])]))
diff --git a/src/status_im/ui/screens/chat/styles/message/message.cljs b/src/status_im/ui/screens/chat/styles/message/message.cljs
@@ -3,7 +3,7 @@
             [quo.design-system.colors :as colors]
             [status-im.ui.components.react :as react]
             [status-im.ui.screens.chat.styles.photos :as photos]
-            [quo2.foundations.typography :as quo2.typography]))
+            [quo2.foundations.colors :as quo2.colors]))
 
 (defn style-message-text
   []
@@ -233,11 +233,18 @@
   {:font-size 14
    :color colors/gray})
 
+(defn message-default-style []
+  {:font-family "Inter-Regular"
+   :color       (quo2.colors/theme-colors quo2.colors/black quo2.colors/white)
+   :font-size   15
+   :line-height 21.75
+   :letter-spacing -0.135})
+
 ;; Markdown styles
 
 (defn default-text-style []
   {:max-font-size-multiplier react/max-font-size-multiplier
-   :style (quo2.typography/message-default-style)})
+   :style (message-default-style)})
 
 (defn outgoing-text-style []
   (update (default-text-style) :style

diff --git a/src/status_im/ui/screens/chat/utils.cljs b/src/status_im/ui/screens/chat/utils.cljs
@@ -33,7 +33,7 @@
                             :letter-spacing -0.2}}
         first-name]))))
 
-(defn format-reply-author [from username current-public-key style]
+(defn format-reply-author [from username current-public-key style outgoing]
   (let [contact-name (str reply-symbol username)]
     (or (and (= from current-public-key)
              [react/text {:style (style true)}
@@ -48,7 +48,9 @@
                                                   :line-height 18
                                                   :font-weight "500"})}
              (or (stateofus/username trimmed-name) trimmed-name)])
-          [react/text {:style (merge {:color       colors/gray
+          [react/text {:style (merge {:color       (if outgoing
+                                                     colors/white-transparent-70-persist
+                                                     colors/gray)
                                       :font-size   12
                                       :line-height 18
                                       :font-weight "400"})}

diff --git a/src/status_im/ui/screens/chat/views.cljs b/src/status_im/ui/screens/chat/views.cljs
@@ -40,7 +40,8 @@
             [status-im.navigation.state :as navigation.state]
             [status-im.react-native.resources :as resources]
             [status-im.ui.components.topbar :as topbar]
-            [quo2.foundations.colors :as quo2.colors]))
+            [quo2.foundations.colors :as quo2.colors]
+            [quo2.components.button :as quo2.button]))
 
 (defn invitation-requests [chat-id admins]
   (let [current-pk @(re-frame/subscribe [:multiaccount/public-key])
@@ -56,6 +57,18 @@
              (i18n/label :t/group-membership-request)]]])))))
 
 (defn add-contact-bar [public-key]
+  (when-not (or @(re-frame/subscribe [:contacts/contact-added? public-key])
+                @(re-frame/subscribe [:contacts/contact-blocked? public-key]))
+    [react/touchable-highlight
+     {:on-press
+      #(re-frame/dispatch [:contact.ui/add-to-contact-pressed public-key])
+      :accessibility-label :add-to-contacts-button}
+     [react/view {:style (merge (style/add-contact) {:background-color (quo2.colors/theme-colors quo2.colors/white quo2.colors/divider-dark)})}
+      [icons/icon :main-icons/add
+       {:color colors/blue}]
+      [react/i18n-text {:style style/add-contact-text :key :add-to-contacts}]]]))
+
+(defn add-contact-bar-old [public-key]
   (when-not (or @(re-frame/subscribe [:contacts/contact-added? public-key])
                 @(re-frame/subscribe [:contacts/contact-blocked? public-key]))
     [react/touchable-highlight
@@ -471,21 +484,19 @@
        :style                        (when platform/android? {:scaleY -1})})]))
 
 (defn back-button []
-  [react/view
-   [quo/button {:type     :icon
-                :style {:width 32 :height 32 :background-color (quo2.colors/theme-colors quo2.colors/ui-background-03-light quo2.colors/ui-background-03-dark) :border-radius 10}
-                :accessibility-label "back-button"
-                :on-press #(re-frame/dispatch [:navigate-back])
-                :theme    :icon}
-    :main-icons/arrow-left]])
+  [quo2.button/button {:type     :grey
+                       :size     32
+                       :width    32
+                       :accessibility-label "back-button"
+                       :on-press #(re-frame/dispatch [:navigate-back])}
+   [icons/icon :main-icons/arrow-left {:color (quo2.colors/theme-colors quo2.colors/black quo2.colors/white)}]])
 
 (defn search-button []
-  [react/view
-   [quo/button {:type     :icon
-                :style {:width 32 :height 32 :background-color (quo2.colors/theme-colors quo2.colors/ui-background-03-light quo2.colors/ui-background-03-dark) :border-radius 10}
-                :accessibility-label "search-button"
-                :theme    :icon}
-    :main-icons/search]])
+  [quo2.button/button {:type     :grey
+                       :size     32
+                       :width    32
+                       :accessibility-label "search-button"}
+   [icons/icon :main-icons/search {:color (quo2.colors/theme-colors quo2.colors/black quo2.colors/white)}]])
 
 (defn topbar-content []
   (let [window-width @(re-frame/subscribe [:dimensions/window-width])
@@ -532,7 +543,7 @@
          (when chat-id
            (if group-chat
              [invitation-requests chat-id admins]
-             (when-not mutual-contact-requests-enabled? [add-contact-bar chat-id])))
+             (when-not mutual-contact-requests-enabled? [add-contact-bar-old chat-id])))
          ;;MESSAGES LIST
          [messages-view-old {:chat          chat
                              :bottom-space  max-bottom-space
@@ -585,13 +596,15 @@
             mutual-contact-requests-enabled? @(re-frame/subscribe [:mutual-contact-requests/enabled?])
             max-bottom-space (max @bottom-space @panel-space)]
         [:<>
-         [topbar/topbar {:navigation      :none
+         ;; It is better to not use topbar component because of performance
+         [topbar/topbar {:navigation :none
                          :left-component [react/view {:flex-direction :row :margin-left 16}
                                           [back-button]]
                          :title-component [topbar-content]
                          :right-component [react/view {:flex-direction :row :margin-right 16}
                                            [search-button]]
-                         :border-bottom false}]
+                         :border-bottom false
+                         :new-ui? true}]
          [connectivity/loading-indicator]
          (when chat-id
            (if group-chat

diff --git a/src/status_im/ui/screens/home/views.cljs b/src/status_im/ui/screens/home/views.cljs
@@ -248,9 +248,11 @@
 
 (views/defview notifications-button []
   (views/letsubs [notif-count [:activity.center/notifications-count]]
-    [react/view {:style {:margin-left 12}}
-     [quo2.button/button {:style {:width 32 :height 32 :background-color (quo2.colors/theme-colors quo2.colors/ui-background-03-light quo2.colors/ui-background-03-dark) :border-radius 10}
+    [react/view
+     [quo2.button/button {:type :grey
                           :size 32
+                          :width 32
+                          :style {:margin-left 12}
                           :accessibility-label :notifications-button
                           :on-press #(do
                                        (re-frame/dispatch [:mark-all-activity-center-notifications-as-read])
@@ -279,25 +281,26 @@
         [react/view {:style               styles/counter-public
                      :accessibility-label :notifications-unread-badge}]])]))
 
-(views/defview qr-button []
-  [react/view {:style {:margin-left 12}}
-   [quo2.button/button {:style {:width 32 :height 32 :background-color (quo2.colors/theme-colors quo2.colors/ui-background-03-light quo2.colors/ui-background-03-dark) :border-radius 10}
-                        :accessibility-label "qr-button"
-                        :size 32
-                        :on-press #(do
-                                     (re-frame/dispatch [::qr-scanner/scan-code
-                                                         {:handler ::qr-scanner/on-scan-success}]))}
-    [icons/icon :main-icons/qr2 {:color (quo2.colors/theme-colors quo2.colors/black quo2.colors/white)}]]])
+(defn qr-button []
+  [quo2.button/button {:type :grey
+                       :accessibility-label "qr-button"
+                       :size 32
+                       :width 32
+                       :style {:margin-left 12}
+                       :on-press #(do
+                                    (re-frame/dispatch [::qr-scanner/scan-code
+                                                        {:handler ::qr-scanner/on-scan-success}]))}
+   [icons/icon :main-icons/qr2 {:color (quo2.colors/theme-colors quo2.colors/black quo2.colors/white)}]])
 
-(views/defview scan-button []
-  [react/view
-   [quo2.button/button {:style {:width 32 :height 32 :background-color (quo2.colors/theme-colors quo2.colors/ui-background-03-light quo2.colors/ui-background-03-dark) :border-radius 10}
-                        :size 32
-                        :accessibility-label "scan-button"
-                        :on-press #(do
-                                     (re-frame/dispatch [::qr-scanner/scan-code
-                                                         {:handler ::qr-scanner/on-scan-success}]))}
-    [icons/icon :main-icons/scan2 {:color (quo2.colors/theme-colors quo2.colors/black quo2.colors/white)}]]])
+(defn scan-button []
+  [quo2.button/button {:type :grey
+                       :size 32
+                       :width 32
+                       :accessibility-label "scan-button"
+                       :on-press #(do
+                                    (re-frame/dispatch [::qr-scanner/scan-code
+                                                        {:handler ::qr-scanner/on-scan-success}]))}
+   [icons/icon :main-icons/scan2 {:color (quo2.colors/theme-colors quo2.colors/black quo2.colors/white)}]])
 
 (views/defview profile-button []
   (views/letsubs [{:keys [public-key preferred-name emoji]} [:multiaccount]]
@@ -307,11 +310,11 @@
        :chat-icon              chat-icon.styles/chat-icon-chat-list}]]))
 
 (defn home []
-  [react/keyboard-avoiding-view {:style {:flex 1 :background-color (quo2.colors/theme-colors quo2.colors/ui-background-02-light quo2.colors/ui-background-02-dark)}
+  [react/keyboard-avoiding-view {:style {:flex 1 :background-color (quo2.colors/theme-colors quo2.colors/primary-10 quo2.colors/switcher-background)}
                                  :ignore-offset true}
    [topbar/topbar {:navigation      :none
                    :use-insets true
-                   :background (quo2.colors/theme-colors quo2.colors/ui-background-02-light quo2.colors/ui-background-02-dark)
+                   :background (quo2.colors/theme-colors quo2.colors/primary-10 quo2.colors/switcher-background)
                    :left-component [react/view {:flex-direction :row :margin-left 16}
                                     [profile-button]]
                    :right-component [react/view {:flex-direction :row :margin-right 16}

diff --git a/src/status_im/ui/screens/home/views/inner_item.cljs b/src/status_im/ui/screens/home/views/inner_item.cljs
@@ -209,7 +209,7 @@
     [react/touchable-opacity (merge {:style {:height 64 :background-color background-color}} opts)
      [:<>
       (when (pos? unviewed-messages-count)
-        [react/view {:position :absolute :top 2 :left 8 :right 8 :bottom 2 :border-radius 16 :background-color "#4360DF0D"}])
+        [react/view {:position :absolute :top 2 :left 8 :right 8 :bottom 2 :border-radius 16 :background-color quo2.colors/primary-50-opa-5}])
       [chat-icon.screen/emoji-chat-icon-view chat-id group-chat chat-name emoji
        {:container              (assoc chat-icon.styles/container-chat-list
                                        :top 12 :left 20 :position :absolute)

diff --git a/src/status_im/ui/screens/profile/visibility_status/styles.cljs b/src/status_im/ui/screens/profile/visibility_status/styles.cljs
@@ -20,7 +20,7 @@
    :height           size
    :border-radius    (/ size 2)
    :border-width     3.5
-   :border-color     (quo2.colors/theme-colors quo2.colors/ui-background-light quo2.colors/ui-background-dark)})
+   :border-color     (quo2.colors/theme-colors quo2.colors/white quo2.colors/neutral-90)})
 
 (defn visibility-status-dot-old [dot-color size]
   {:background-color dot-color