[#9233, #9173] fix some screens

Signed-off-by: yenda <eric@status.im>

src/status_im/ui/screens/intro/views.cljs

@@ -123,14 +123,15 @@
                        :style {:width image-size :height image-size}}])])))
 
 (defn choose-key [{:keys [multiaccounts selected-id view-height]}]
-  [react/scroll-view {:content-container-style {:flex 1
+  [react/view
-                                                :justify-content (if (< view-height 600) :flex-start :flex-end)
+   {:style {:flex            1
-                                                :margin-top (if (< view-height 600) 20 0)
+            :justify-content :center}}
-                                                ;; We have to align top multiaccount entry
+   [react/view
-                                                ;; with top key storage entry on the next screen
+    {:style {:flex       1
-                                                :margin-bottom (if (< view-height 600)
+             :height     200
-                                                                 0
+             :max-height 338}}
-                                                                 (/ view-height 12))}}
+    [react/scroll-view
+     {:content-container-style {:justify-content :flex-start}}
      (for [[acc accessibility-n] (map vector multiaccounts (range (count multiaccounts)))]
        (let [selected? (= (:id acc) selected-id)
              public-key (get-in acc [:derived constants/path-whisper-keyword :publicKey])]
@@ -154,14 +155,16 @@
                                        :text-align :left
                                        :font-family "monospace")}
              (utils/get-shortened-address public-key)]]
-         [radio/radio selected?]]]))])
+           [radio/radio selected?]]]))]]])
 
 (defn storage-entry [{:keys [type icon icon-width icon-height
                              image image-selected image-width image-height
                              title desc]} selected-storage-type]
   (let [selected? (= type selected-storage-type)]
     [react/view
-     [react/view {:style {:padding-top 14 :padding-bottom 4}}
+     {:style {:flex 1
+              :padding-top 14}}
+     [react/view {:style {:padding-bottom 4}}
       [react/text {:style (assoc styles/wizard-text :text-align :left :margin-left 16)}
        (i18n/label type)]]
      [react/touchable-highlight
@@ -200,16 +203,20 @@
                         :image-height   24
                         :title          :keycard
                         :desc           :keycard-desc}]]
-    [react/view {:style {:flex 1
+    [react/view
-                         :justify-content (if (< view-height 600) :flex-start :flex-end)
+     {:style {:flex            1
-                         ;; We have to align top storage entry
+              :justify-content :center}}
-                         ;; with top multiaccount entry on the previous screen
+     [react/view
-                         :margin-bottom (if (< view-height 600)
+      {:style
-                                          0
+       {:max-height       420
-                                          (+ (- 322 226) (/ view-height 12)))}}
+        :flex             1
+        :justify-content  :flex-start}}
+      [react/view {:style {:justify-content :flex-start
+                           :height          264}}
        [storage-entry (first storage-types) selected-storage-type]
-     [react/view {:style {:min-height 16 :max-height 16}}]
+       [react/view {:style {:flex       1
-     [storage-entry (second storage-types) selected-storage-type]]))
+                            :max-height 16}}]
+       [storage-entry (second storage-types) selected-storage-type]]]]))
 
 (defn password-container [confirm-failure? view-width]
   (let [horizontal-margin 16]
@@ -315,7 +322,8 @@
                                    "-alt") (step-kw-to-num step)))))]
      (cond (#{:choose-key :select-key-storage} step)
            ; Use nested text for the "Learn more" link
-           [react/nested-text {:style styles/wizard-text}
+           [react/nested-text {:style (merge styles/wizard-text
+                                             {:height 60})}
             (str (i18n/label (keyword (str "intro-wizard-text" (step-kw-to-num step)))) " ")
             [{:on-press #(re-frame/dispatch [:bottom-sheet/show-sheet :learn-more
                                              {:title (i18n/label (if (= step :choose-key) :t/about-names-title :t/about-key-storage-title))

src/status_im/ui/screens/wallet/components/views.cljs

@@ -332,6 +332,8 @@
       [react/view styles/network-icon
        [vector-icons/icon :main-icons/network {:color :white}]]
       [react/text
+       {:style {:flex         1
+                :padding-left 16}}
        (cond (ethereum/testnet? network-id)
              (i18n/label :t/testnet-text {:testnet (get-in ethereum/chains [(ethereum/chain-id->chain-keyword network-id) :name] "Unknown")})
 

translations/en.json

@@ -529,7 +529,7 @@
 	"intro-title2": "Secure crypto wallet",
 	"intro-title3": "Decentralized apps",
 	"intro-wizard-text1": "Your identity is secure by design. You get a locally generated cryptographic keypair",
-	"intro-wizard-text2": "This name is your identity in Status.  It can’t be changed once you choose one. ",
+	"intro-wizard-text2": "This name is your identity in Status. It can’t be changed once you choose one.",
 	"intro-wizard-text3": "Your key is stored locally. There is no copy. Only you have access.",
 	"intro-wizard-text4": "Secure and encrypt your key",
 	"intro-wizard-text6": "Status will notify you about new messages. You can edit your notification preferences later in settings",
@@ -593,7 +593,7 @@
 	"keycard-recovery-success-header": "Your key has been\n successfully recovered",
 	"keycard-unauthorized-operation": "You're unauthorized to perform this operation.\n Please tap valid card and try again.",
 	"language": "Language",
-	"learn-more": "Learn more",
+	"learn-more": "Learn\u00a0more",
 	"learn-more-about-keycard": "Learn more about Keycard",
 	"leave": "Leave",
 	"leave-group": "Leave group",