fix up spacing here and there

status-im · Mar 31, 2023 · 8812845 · 8812845
1 parent a3773c9
commit 8812845
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 46 deletions.
diff --git a/src/status_im2/contexts/share/style.cljs b/src/status_im2/contexts/share/style.cljs
@@ -30,15 +30,26 @@
    :margin-top 12
    :margin-bottom 4
    :margin-horizontal (* window-width 0.053)
-   :width :89.3%
    :background-color colors/white-opa-5
    :flex-direction :column
    :justify-content :center
    :align-items :center})
 
+
+(defn emoji-hash-container [window-width]
+  {:border-radius emoji-hash-container-radius
+   :margin-top 12
+   :padding-vertical :1%
+   :margin-horizontal (* window-width 0.053)
+   :background-color colors/white-opa-5
+   :flex-direction :row
+   :justify-content :space-between
+   :align-items :center})
+
+
+
 (def profile-address-column
-  {:align-self :flex-start
-   :flex-direction :column})
+  {:flex-direction :column})
 
 
 (def profile-address-label
@@ -48,7 +59,7 @@
 
 (def copyable-text-container-style
   {:background-color :transparent
-   :width :100%})
+   })
 
 (defn profile-address-content [max-width]
   {:color colors/white
@@ -66,36 +77,43 @@
    :right 14
    :top 10})
 
-(def emoji-hash-container
-  {:border-radius emoji-hash-container-radius
-   :padding-vertical :1%
-   :margin-horizontal :5.3%
-   :width :89.3%
-   :background-color colors/white-opa-5
-   :flex-direction :column
-   :justify-content :center
-   :align-items :center})
 
-(def profile-address-container
+
+(defn profile-address-container [qr-size]
   {:flex-direction :row
-   :margin-top 6})
+   :justify-content :space-between
+   :margin-top 6
+   :width qr-size})
 
 (def emoji-hash-label
   {:color colors/white-opa-40
-   :align-self :flex-start
-   :padding-horizontal 20})
+   :padding-left 12
+   :margin-top 8})
+
+(def share-button-container
+  {:flex-direction :column
+   :justify-content :center
+   :align-items :center
+   :padding-left 12
+   })
+
+(defn qr-image [qr-size]
+  {:width         qr-size
+   :height        qr-size
+   :border-radius 12})
 
 (defn set-custom-width [section-width]
   {:width section-width})
 
 (defn emoji-hash-content [max-width]
   {:color colors/white
    :align-self :flex-start
-   :padding-left 20
    :padding-top 4
    :padding-bottom 8
+   :padding-left 12
    :font-weight :500
-   :font-size 10})
+   :font-size 14
+   :max-width max-width})
 
 (def emoji-share-button-container
   {:padding 8

diff --git a/src/status_im2/contexts/share/view.cljs b/src/status_im2/contexts/share/view.cljs
@@ -38,7 +38,7 @@
 
 (defn profile-tab [window-width]
       (let [multiaccount           (rf/sub [:multiaccount])
-            emoji-hash             (string/join " " (get multiaccount :emoji-hash))
+            emoji-hash             (string/join "" (get multiaccount :emoji-hash))
             key-uid                (get multiaccount :key-uid)
             current-pk             (get multiaccount :public-key)
             port                   (rf/sub [:mediaserver/port])
@@ -61,18 +61,14 @@
                                     "&size="
                                     qr-size
                                     "&imageName="
-                                    profile-image-type)
-            ]
-        (log/info "emoji-hash ->"  (string/join " " (get multiaccount :emoji-hash)))
+                                    profile-image-type)]
       [:<>
        [rn/view {:style (style/qr-code-container window-width)}
         [rn/view {:style {:flex-direction :row
                           :justify-content :center}}
             [rn/image {:source {:uri           media-server-url}
-                       :style  {:width         qr-size
-                                :height        qr-size
-                                :border-radius 12}}]]
-        [rn/view {:style style/profile-address-container}
+                       :style  (style/qr-image qr-size)}]]
+        [rn/view {:style (style/profile-address-container qr-size)}
          [rn/view {:style style/profile-address-column}
           [quo/text
            {:size :paragraph-2
@@ -86,10 +82,7 @@
                      :number-of-lines 1}
             profile-qr-url]]]
 
-         [rn/view {:style {:flex-direction :column
-                           :justify-content :center
-                           :align-items :center
-                           }}
+         [rn/view {:style style/share-button-container}
           [quo/button
            {:icon                true
             :type                :blur-bg
@@ -100,31 +93,33 @@
             }
            :i/share]]]]
 
-       [rn/view {:style style/emoji-hash-container}
+       [rn/view {:style (style/emoji-hash-container window-width)}
          [rn/view {:style style/profile-address-container}
           [rn/view {:style style/profile-address-column}
            [quo/text {:size :paragraph-2
                       :weight :medium
                       :style style/emoji-hash-label}
             (i18n/label :t/emoji-hash)]
            [copyable-text/copyable-text-view {:copied-text emoji-hash :container-style style/copyable-text-container-style}
-            [rn/view {:style {:flex-direction :row}}
-             [rn/text {:style (style/emoji-hash-content (* window-width 0.7))} emoji-hash]
-             [quo/button
-                           {:icon                true
-                            :type                :blur-bg
-                            :size                32
-                            :accessibility-label :link-to-profile
-                            :override-theme      :dark
-                            :style               style/header-button
-                            }
-                           :i/share]]
-            ]]]]
+            [rn/text {:style (style/emoji-hash-content (* window-width 0.76))} emoji-hash]]
+          ]]
+          [rn/view {:style style/share-button-container}
+           [quo/button
+            {:icon                true
+             :type                :blur-bg
+             :size                32
+             :accessibility-label :link-to-profile
+             :override-theme      :dark
+             :style               {:margin-right 12}
+             }
+            :i/copy]]
+
+        ]
        ]))
 
 (defn wallet-tab [window-width]
   [:<>
-  [rn/text "wallet-tab"]
+  [rn/text {:style {:color colors/white}} "not yet implemented" ]
    ]
   )
 
@@ -145,7 +140,7 @@
                :fade-end-percentage 0.79
                :scroll-on-press?    true
                :fade-end?           true
-               :on-change        #(reset! selected-tab %)
+               :on-change           #(reset! selected-tab %)
                :default-active      @selected-tab
                :data                [{:id    profile-tab-id
                                       :label (i18n/label :t/profile)}