get rid of max-width calculations :)

status-im · Apr 4, 2023 · 9954eb8 · 9954eb8
1 parent fc677da
commit 9954eb8
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 36 deletions.
diff --git a/src/status_im2/contexts/share/style.cljs b/src/status_im2/contexts/share/style.cljs
@@ -45,7 +45,7 @@
    :margin-horizontal screen-padding
    :background-color  colors/white-opa-5
    :flex-direction    :row
-   :justify-content   :space-between
+   :justify-content   :center
    :align-items       :center})
 
 (def profile-address-column
@@ -56,19 +56,16 @@
    :color       colors/white-opa-40
    :padding-top 10})
 
-(defn profile-address-content
-  [max-width]
+(def profile-address-content
   {:color       colors/white
    :align-self  :flex-start
-   :padding-top 2
-   :max-width   max-width})
+   :padding-top 2})
 
-(defn profile-address-container
-  [qr-size]
-  {:flex-direction  :row
-   :justify-content :space-between
-   :margin-top      6
-   :width           qr-size})
+(def profile-address-container
+  {:flex-direction    :row
+   :justify-content   :space-between
+   :margin-top        6
+   :margin-horizontal 20})
 
 (def emoji-hash-label
   {:color        colors/white-opa-40
@@ -81,23 +78,19 @@
    :align-items     :center
    :padding-left    12})
 
-(defn emoji-hash-content
-  [max-width]
+(def emoji-share-button-container
+  {:flex-direction  :column
+   :justify-content :center
+   :align-items     :center
+   :margin-right    24})
+
+(def emoji-hash-content
   {:color          colors/white
    :align-self     :flex-start
    :padding-top    4
    :padding-bottom 8
    :padding-left   12
-   :font-size      14
-   :max-width      max-width})
-
-(def emoji-share-button-container
-  {:padding          8
-   :position         :absolute
-   :background-color colors/white-opa-5
-   :border-radius    10
-   :right            14
-   :top              2})
+   :font-size      14})
 
 (def tabs-container
   {:padding-horizontal screen-padding

diff --git a/src/status_im2/contexts/share/view.cljs b/src/status_im2/contexts/share/view.cljs
@@ -38,15 +38,13 @@
 
 (defn profile-tab
   [window-width]
-  (let [multiaccount              (rf/sub [:multiaccount])
-        emoji-hash                (string/join (get multiaccount :emoji-hash))
-        qr-size                   (- window-width 64)
-        public-pk                 (get multiaccount :public-key)
-        profile-qr-url            (str const/status-profile-base-url public-pk)
-        port                      (rf/sub [:mediaserver/port])
-        key-uid                   (get multiaccount :key-uid)
-        emoji-hash-max-width      (* window-width 0.76)
-        link-to-profile-max-width (* window-width 0.70)]
+  (let [multiaccount   (rf/sub [:multiaccount])
+        emoji-hash     (string/join (get multiaccount :emoji-hash))
+        qr-size        (- window-width 64)
+        public-pk      (get multiaccount :public-key)
+        profile-qr-url (str const/status-profile-base-url public-pk)
+        port           (rf/sub [:mediaserver/port])
+        key-uid        (get multiaccount :key-uid)]
     [:<>
      [rn/view {:style style/qr-code-container}
       [qr/user-profile-qr-code
@@ -55,7 +53,7 @@
         :qr-size      qr-size
         :public-key   public-pk
         :port         port}]
-      [rn/view {:style (style/profile-address-container qr-size)}
+      [rn/view {:style style/profile-address-container}
        [rn/view {:style style/profile-address-column}
         [quo/text
          {:size   :paragraph-2
@@ -71,7 +69,7 @@
           :on-long-press    #(rf/dispatch [:share/copy-text-and-show-toast profile-qr-url
                                            (i18n/label :t/link-to-profile-copied)])}
          [quo/text
-          {:style           (style/profile-address-content link-to-profile-max-width)
+          {:style           style/profile-address-content
            :size            :paragraph-1
            :weight          :medium
            :ellipsize-mode  :middle
@@ -103,8 +101,8 @@
                                            (i18n/label :t/emoji-hash-copied)])
           :on-long-press    #(rf/dispatch [:share/copy-text-and-show-toast emoji-hash
                                            (i18n/label :t/emoji-hash-copied)])}
-         [rn/text {:style (style/emoji-hash-content emoji-hash-max-width)} emoji-hash]]]]
-      [rn/view {:style style/share-button-container}
+         [rn/text {:style style/emoji-hash-content} emoji-hash]]]]
+      [rn/view {:style style/emoji-share-button-container}
        [quo/button
         {:icon                true
          :type                :blur-bg