fix: profile screen initial avatar alignment (#18426)

debfe1ca...debfe1ca

Signed-off-by: yqrashawn <namy.19@gmail.com>

src/status_im/subs/profile.cljs

@@ -73,10 +73,12 @@
                                                   :key-uid        target-key-uid
                                                   :theme          (theme/get-theme)
                                                   :override-ring? override-ring?})
-          (image-server/get-initials-avatar-uri-fn {:port           port
+          (image-server/get-initials-avatar-uri-fn
+           {:port            port
             :ratio           pixel-ratio/ratio
             :key-uid         target-key-uid
             :theme           (theme/get-theme)
+            :uppercase-ratio (:uppercase-ratio constants/initials-avatar-font-conf)
             :override-ring?  override-ring?
             :font-file       font-file}))}))))
 

src/utils/image_server.cljs

@@ -2,6 +2,7 @@
   (:require
     [react-native.fs :as utils.fs]
     [react-native.platform :as platform]
+    [schema.core :as schema]
     [utils.datetime :as datetime]))
 
 (def ^:const image-server-uri-prefix "https://localhost:")
@@ -182,6 +183,19 @@
    "&ringWidth="
    (* ring-width ratio)))
 
+(schema/=> get-initials-avatar-uri
+  [:=>
+   [:cat
+    [:map
+     [:color string?]
+     [:background-color string?]
+     [:size number?]
+     [:ratio float?]
+     [:uppercase-ratio number?]
+     [:font-size number?]
+     [:font-file string?]]]
+   [:string]])
+
 (defn get-initials-avatar-uri-fn
   "return a fn that calls `get-account-initials-uri`
   pass the fn to user-avatar component to fill the style related options

src/utils/image_server_test.cljs

@@ -42,9 +42,9 @@
         :color                    "#0E162000"
         :font-size                12
         :font-file                "/font/Inter Medium.otf"
-        :uppercase-ratio          "uppercase-ratio"
+        :uppercase-ratio          0.6
         :indicator-size           2
         :indicator-center-to-edge 6
         :indicator-color          "#0E1620"
         :ring-width               4})
-      "https://localhost:port/accountInitials?publicKey=public-key&keyUid=key-uid&length=length&size=96&bgColor=background-color&color=%230E162000&fontSize=24&fontFile=%2Ffont%2FInter%20Medium.otf&uppercaseRatio=uppercase-ratio&theme=:light&clock=&name=full-nametimestamp&indicatorColor=%230E1620&indicatorSize=4&indicatorBorder=0&indicatorCenterToEdge=12&addRing=1&ringWidth=8"))))
+      "https://localhost:port/accountInitials?publicKey=public-key&keyUid=key-uid&length=length&size=96&bgColor=background-color&color=%230E162000&fontSize=24&fontFile=%2Ffont%2FInter%20Medium.otf&uppercaseRatio=0.6&theme=:light&clock=&name=full-nametimestamp&indicatorColor=%230E1620&indicatorSize=4&indicatorBorder=0&indicatorCenterToEdge=12&addRing=1&ringWidth=8"))))