use relative sizing when scaling the QR code (#417)

* use relative sizing when scaling the QR code

* linting

* properly implement image scaling

* remove extra horizontal padding

Co-authored-by: Evgeny Poberezkin <2769109+epoberezkin@users.noreply.github.com>

apps/android/app/src/main/java/chat/simplex/app/views/newchat/AddContactView.kt

@@ -15,6 +15,7 @@ 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.sp
 import chat.simplex.app.model.ChatModel
 import chat.simplex.app.ui.theme.SimpleButton
 import chat.simplex.app.ui.theme.SimpleXTheme
@@ -34,35 +35,44 @@ fun AddContactView(chatModel: ChatModel) {
 
 @Composable
 fun AddContactLayout(connReq: String, share: () -> Unit) {
-  Column(
-    horizontalAlignment = Alignment.CenterHorizontally,
-    verticalArrangement = Arrangement.spacedBy(12.dp)
-  ) {
-    Text(
-      "Add contact",
-      style = MaterialTheme.typography.h1,
-    )
-    Text(
-      "Show QR code to your contact\nto scan from the app",
-      style = MaterialTheme.typography.h2,
-      textAlign = TextAlign.Center,
-    )
-    QRCode(connReq)
-    Text(
-      buildAnnotatedString {
-        append("If you cannot meet in person, you can ")
-        withStyle(SpanStyle(fontWeight = FontWeight.Bold)) {
-          append("scan QR code in the video call")
-        }
-        append(", or you can share the invitation link via any other channel.")
-      },
-      textAlign = TextAlign.Center,
-      style = MaterialTheme.typography.caption,
-      modifier = Modifier
-        .padding(horizontal = 16.dp)
-        .padding(bottom = 16.dp)
-    )
-    SimpleButton("Share invitation link", icon = Icons.Outlined.Share, click = share)
+  BoxWithConstraints {
+    val screenHeight = maxHeight
+    Column(
+      horizontalAlignment = Alignment.CenterHorizontally,
+      verticalArrangement = Arrangement.SpaceBetween,
+    ) {
+      Text(
+        "Add contact",
+        style = MaterialTheme.typography.h1,
+      )
+      Text(
+        "Show QR code to your contact\nto scan from the app",
+        style = MaterialTheme.typography.h2.copy(fontSize = if(screenHeight > 600.dp) 26.sp else 20.sp),
+        textAlign = TextAlign.Center,
+      )
+      QRCode(
+        connReq, Modifier
+          .weight(1f, fill = false)
+          .aspectRatio(1f)
+          .padding(vertical = 3.dp)
+      )
+      Text(
+        buildAnnotatedString {
+          append("If you cannot meet in person, you can ")
+          withStyle(SpanStyle(fontWeight = FontWeight.Bold)) {
+            append("scan QR code in the video call")
+          }
+          append(", or you can share the invitation link via any other channel.")
+        },
+        textAlign = TextAlign.Center,
+        style = MaterialTheme.typography.caption.copy(fontSize=if(screenHeight > 600.dp) 20.sp else 16.sp),
+        modifier = Modifier
+          .padding(horizontal = 16.dp)
+          .padding(bottom = if(screenHeight > 600.dp) 16.dp else 8.dp)
+      )
+      SimpleButton("Share invitation link", icon = Icons.Outlined.Share, click = share)
+      Spacer(Modifier.height(10.dp))
+    }
   }
 }
 

apps/android/app/src/main/java/chat/simplex/app/views/newchat/QRCode.kt

@@ -4,6 +4,7 @@ import android.graphics.Bitmap
 import android.graphics.Color
 import androidx.compose.foundation.Image
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.asImageBitmap
 import androidx.compose.ui.tooling.preview.Preview
 import chat.simplex.app.ui.theme.SimpleXTheme
@@ -12,10 +13,11 @@ import com.google.zxing.EncodeHintType
 import com.google.zxing.qrcode.QRCodeWriter
 
 @Composable
-fun QRCode(connReq: String) {
+fun QRCode(connReq: String, modifier: Modifier = Modifier) {
   Image(
     bitmap = qrCodeBitmap(connReq, 1024).asImageBitmap(),
-    contentDescription = "QR Code"
+    contentDescription = "QR Code",
+    modifier = modifier
   )
 }
 

apps/android/app/src/main/java/chat/simplex/app/views/usersettings/UserAddressView.kt

@@ -59,27 +59,27 @@ fun UserAddressLayout(
   ) {
     Text(
       "Your chat address",
-      Modifier.padding(bottom = 24.dp),
+      Modifier.padding(bottom = 16.dp),
       style = MaterialTheme.typography.h1,
     )
     Text(
       "You can share your address as a link or as a QR code - anybody will be able to connect to you, " +
           "and if you later delete it - you won't lose your contacts.",
-      Modifier.padding(bottom = 24.dp),
+      Modifier.padding(bottom = 12.dp),
     )
     Column(
-      Modifier
-        .fillMaxWidth()
-        .padding(top = 12.dp),
+      Modifier.fillMaxWidth(),
       horizontalAlignment = Alignment.CenterHorizontally,
-      verticalArrangement = Arrangement.spacedBy(24.dp)
+      verticalArrangement = Arrangement.SpaceEvenly
     ) {
       if (userAddress == null) {
         SimpleButton("Create address", icon = Icons.Outlined.QrCode, click = createAddress)
       } else {
-        QRCode(userAddress)
+        QRCode(userAddress, Modifier.weight(1f, fill = false).aspectRatio(1f))
         Row(
-          horizontalArrangement = Arrangement.spacedBy(12.dp)
+          horizontalArrangement = Arrangement.spacedBy(10.dp),
+          verticalAlignment = Alignment.CenterVertically,
+          modifier = Modifier.padding(vertical = 10.dp)
         ) {
           SimpleButton(
             "Share link",