mobile: welcome/about page (#1946)

* mobile: welcome/about page

* scroll view (fixes trimmed texts)

* layout

* bigger frame

* minHeight, to allow scroling with large font

---------

Co-authored-by: spacedandy <8711996+spaced4ndy@users.noreply.github.com>

apps/android/app/src/main/java/chat/simplex/app/views/onboarding/SimpleXInfo.kt

@@ -18,8 +18,7 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.*
-import androidx.compose.ui.unit.sp
 import chat.simplex.app.R
 import chat.simplex.app.model.ChatModel
 import chat.simplex.app.model.User
@@ -47,15 +46,15 @@ fun SimpleXInfoLayout(
       .verticalScroll(rememberScrollState())
       .padding(horizontal = DEFAULT_PADDING),
   ) {
-    Box(Modifier.fillMaxWidth().padding(top = 24.dp, bottom = 8.dp), contentAlignment = Alignment.Center) {
+    Box(Modifier.fillMaxWidth().padding(top = 8.dp), contentAlignment = Alignment.Center) {
       SimpleXLogo()
     }
 
-    Text(stringResource(R.string.next_generation_of_private_messaging), style = MaterialTheme.typography.h2, modifier = Modifier.padding(bottom = 24.dp), textAlign = TextAlign.Center)
+    Text(stringResource(R.string.next_generation_of_private_messaging), style = MaterialTheme.typography.h2, modifier = Modifier.padding(bottom = 36.dp).padding(horizontal = 48.dp), textAlign = TextAlign.Center)
 
-    InfoRow(painterResource(R.drawable.privacy), R.string.privacy_redefined, R.string.first_platform_without_user_ids)
+    InfoRow(painterResource(R.drawable.privacy), R.string.privacy_redefined, R.string.first_platform_without_user_ids, width = 80.dp)
     InfoRow(painterResource(R.drawable.shield), R.string.immune_to_spam_and_abuse, R.string.people_can_connect_only_via_links_you_share)
-    InfoRow(painterResource(R.drawable.decentralized), R.string.decentralized, R.string.opensource_protocol_and_code_anybody_can_run_servers)
+    InfoRow(painterResource(if (isInDarkTheme()) R.drawable.decentralized_light else R.drawable.decentralized), R.string.decentralized, R.string.opensource_protocol_and_code_anybody_can_run_servers)
 
     Spacer(Modifier.fillMaxHeight().weight(1f))
 
@@ -89,14 +88,14 @@ fun SimpleXLogo() {
 }
 
 @Composable
-private fun InfoRow(icon: Painter, @StringRes titleId: Int, @StringRes textId: Int) {
+private fun InfoRow(icon: Painter, @StringRes titleId: Int, @StringRes textId: Int, width: Dp = 76.dp) {
-  Row(Modifier.padding(bottom = 20.dp), verticalAlignment = Alignment.Top) {
+  Row(Modifier.padding(bottom = 27.dp), verticalAlignment = Alignment.Top) {
     Image(icon, contentDescription = null, modifier = Modifier
-      .width(60.dp)
+      .width(width)
-      .padding(top = 8.dp, end = 16.dp))
+      .padding(top = 8.dp, start = 8.dp, end = 24.dp))
     Column(horizontalAlignment = Alignment.Start) {
       Text(stringResource(titleId), fontWeight = FontWeight.Bold, style = MaterialTheme.typography.h3, lineHeight = 24.sp)
-      Text(stringResource(textId), lineHeight = 24.sp, style = MaterialTheme.typography.caption)
+      Text(stringResource(textId), lineHeight = 24.sp, style = MaterialTheme.typography.body1)
     }
   }
 }

apps/ios/Shared/Assets.xcassets/decentralized-light.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "filename" : "decentralized_light.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "decentralized_light@2x.png",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "decentralized_light@3x.png",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

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

@@ -16,64 +16,72 @@ struct SimpleXInfo: View {
 
     var body: some View {
         GeometryReader { g in
-            VStack(alignment: .leading) {
+            ScrollView {
-                Image(colorScheme == .light ? "logo" : "logo-light")
+                VStack(alignment: .leading) {
-                    .resizable()
+                    Image(colorScheme == .light ? "logo" : "logo-light")
-                    .aspectRatio(contentMode: .fit)
+                        .resizable()
-                    .frame(width: g.size.width * 0.7)
+                        .aspectRatio(contentMode: .fit)
+                        .frame(width: g.size.width * 0.67)
+                        .padding(.bottom, 8)
+                        .frame(maxWidth: .infinity, minHeight: 48, alignment: .top)
+
+                    VStack(alignment: .leading) {
+                        Text("The next generation of private messaging")
+                            .font(.title2)
+                            .padding(.bottom, 30)
+                            .padding(.horizontal, 40)
+                            .frame(maxWidth: .infinity)
+                            .multilineTextAlignment(.center)
+                        infoRow("privacy", "Privacy redefined",
+                                "The 1st platform without any user identifiers – private by design.", width: 48)
+                        infoRow("shield", "Immune to spam and abuse",
+                                "People can connect to you only via the links you share.", width: 46)
+                        infoRow(colorScheme == .light ? "decentralized" : "decentralized-light", "Decentralized",
+                                "Open-source protocol and code – anybody can run the servers.", width: 44)
+                    }
+
+                    Spacer()
+                    if onboarding {
+                        OnboardingActionButton()
+                        Spacer()
+                    }
+
+                    Button {
+                        showHowItWorks = true
+                    } label: {
+                        Label("How it works", systemImage: "info.circle")
+                            .font(.subheadline)
+                    }
                     .padding(.bottom, 8)
                     .frame(maxWidth: .infinity)
-
-                VStack(alignment: .leading) {
-                    Text("The next generation of private messaging")
-                        .font(.title)
-                        .padding(.bottom, 24)
-                        .frame(maxWidth: .infinity)
-                        .multilineTextAlignment(.center)
-                    infoRow("privacy", "Privacy redefined",
-                            "The 1st platform without any user identifiers – private by design.")
-                    infoRow("shield", "Immune to spam and abuse",
-                            "People can connect to you only via the links you share.")
-                    infoRow("decentralized", "Decentralized",
-                            "Open-source protocol and code – anybody can run the servers.")
                 }
-
+                .frame(minHeight: g.size.height)
-                Spacer()
-                if onboarding {
-                    OnboardingActionButton()
-                    Spacer()
-                }
-
-                Button {
-                    showHowItWorks = true
-                } label: {
-                    Label("How it works", systemImage: "info.circle")
-                        .font(.subheadline)
-                }
-                .padding(.bottom, 8)
-                .frame(maxWidth: .infinity)
             }
             .sheet(isPresented: $showHowItWorks) {
                 HowItWorks(onboarding: onboarding)
             }
         }
+        .frame(maxHeight: .infinity)
         .padding()
     }
 
-    private func infoRow(_ image: String, _ title: LocalizedStringKey, _ text: LocalizedStringKey) -> some View {
+    private func infoRow(_ image: String, _ title: LocalizedStringKey, _ text: LocalizedStringKey, width: CGFloat) -> some View {
         HStack(alignment: .top) {
             Image(image)
                 .resizable()
                 .scaledToFit()
-                .frame(width: 36, height: 40)
+                .frame(width: width, height: 54)
+                .frame(width: 54)
                 .padding(.top, 4)
-                .padding(.trailing, 6)
+                .padding(.leading, 4)
-            VStack(alignment: .leading) {
+                .padding(.trailing, 10)
+            VStack(alignment: .leading, spacing: 4) {
                 Text(title).font(.headline)
-                Text(text)
+                Text(text).frame(minHeight: 40, alignment: .top)
             }
         }
-        .padding(.bottom, 8)
+        .padding(.bottom, 20)
+        .padding(.trailing, 6)
     }
 }
 

scripts/android/prepare.sh

@@ -1,6 +1,7 @@
 #!/bin/sh
 
 # libsimplex.so and libsupport.so binaries should be in ~/Downloads folder
+mkdir -p ./apps/android/app/src/main/cpp/libs/arm64-v8a/
 rm ./apps/android/app/src/main/cpp/libs/arm64-v8a/*
 cp ~/Downloads/libsupport.so ./apps/android/app/src/main/cpp/libs/arm64-v8a/
 cp ~/Downloads/pkg-aarch64-android-libsimplex/libsimplex.so ./apps/android/app/src/main/cpp/libs/arm64-v8a/