ui: create profile asset image (#6895)

* ui: create profile asset image

* images

* spacing

* spacing

* layout

---------

Co-authored-by: Evgeny Poberezkin <evgeny@poberezkin.com>

apps/ios/Shared/Views/Onboarding/CreateProfile.swift

@@ -45,33 +45,37 @@ struct CreateProfile: View {
     var body: some View {
         List {
             Group {
-                ZStack(alignment: .center) {
-                    ZStack(alignment: .topTrailing) {
-                        ProfileImage(imageStr: profileImage, size: 128)
-                        if profileImage != nil {
-                            Button {
-                                profileImage = nil
-                            } label: {
-                                Image(systemName: "multiply")
-                                    .resizable()
-                                    .aspectRatio(contentMode: .fit)
-                                    .frame(width: 12)
+                HStack(spacing: 0) {
+                    Spacer(minLength: 0)
+                    ZStack(alignment: .center) {
+                        ZStack(alignment: .topTrailing) {
+                            ProfileImage(imageStr: profileImage, size: 128)
+                            if profileImage != nil {
+                                Button {
+                                    profileImage = nil
+                                } label: {
+                                    Image(systemName: "multiply")
+                                        .resizable()
+                                        .aspectRatio(contentMode: .fit)
+                                        .frame(width: 12)
+                                }
                             }
                         }
-                    }
 
-                    editImageButton { showChooseSource = true }
-                        .buttonStyle(BorderlessButtonStyle())
+                        editImageButton { showChooseSource = true }
+                            .buttonStyle(BorderlessButtonStyle())
+                    }
+                    .padding(.horizontal, 10) // Offsets transparent space built into 3D asset
+                    Spacer(minLength: 0)
+                    #if SIMPLEX_ASSETS
+                    Image(colorScheme == .light ? "create-profile" : "create-profile-light")
+                        .resizable()
+                        .scaledToFit()
+                        .frame(height: 140)
+                    // No trailing spacer — asset image has empty space on the right
+                    #endif
                 }
-                // TODO: add 3D asset image next to profile image (fix asset first - trim transparent space)
-//                    #if SIMPLEX_ASSETS
-//                    Image(colorScheme == .light ? "your-profile" : "your-profile-light")
-//                        .resizable()
-//                        .scaledToFit()
-//                        .frame(height: 140)
-//                    #endif
             }
-            .frame(maxWidth: .infinity)
             .listRowBackground(Color.clear)
             .listRowSeparator(.hidden)
             .listRowInsets(EdgeInsets(top: 8, leading: 0, bottom: 0, trailing: 0))

apps/multiplatform/common/src/commonMain/kotlin/chat/simplex/common/views/WelcomeView.kt

@@ -97,6 +97,7 @@ fun CreateProfile(chatModel: ChatModel, close: () -> Unit) {
           verticalAlignment = Alignment.CenterVertically
         ) {
           Box(
+            modifier = if (BuildConfigCommon.SIMPLEX_ASSETS) Modifier.padding(horizontal = 3.dp) else Modifier,
             contentAlignment = Alignment.Center
           ) {
             Box(contentAlignment = Alignment.TopEnd) {
@@ -109,15 +110,14 @@ fun CreateProfile(chatModel: ChatModel, close: () -> Unit) {
               }
             }
           }
-          // TODO: add 3D asset image next to profile image (fix asset first - trim transparent space)
-//          if (BuildConfigCommon.SIMPLEX_ASSETS) {
-//            Image(
-//              painterResource(if (isInDarkTheme()) MR.images.your_profile_light else MR.images.your_profile),
-//              contentDescription = null,
-//              contentScale = ContentScale.Fit,
-//              modifier = Modifier.height(140.dp)
-//            )
-//          }
+          if (BuildConfigCommon.SIMPLEX_ASSETS) {
+            Image(
+              painterResource(if (isInDarkTheme()) MR.images.create_profile_light else MR.images.create_profile),
+              contentDescription = null,
+              contentScale = ContentScale.Fit,
+              modifier = Modifier.height(140.dp)
+            )
+          }
         }
         Column(Modifier.padding(horizontal = DEFAULT_PADDING)) {
           Row(Modifier.padding(bottom = DEFAULT_PADDING_HALF).fillMaxWidth(), horizontalArrangement = Arrangement.SpaceBetween) {

apps/multiplatform/common/src/commonMain/resources/assets/default/MR/images/create_profile.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <path d="M0,0h24v24H0z" fill="#00000000"/>
+</svg>

apps/multiplatform/common/src/commonMain/resources/assets/default/MR/images/create_profile_light.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <path d="M0,0h24v24H0z" fill="#00000000"/>
+</svg>