android: change font (#426)

apps/android/app/src/main/java/chat/simplex/app/ui/theme/Color.kt

@@ -13,3 +13,5 @@ val SecretColor = Color(0x40808080)
 val LightGray = Color(241, 242, 246, 255)
 val DarkGray = Color(43, 44, 46, 255)
 val HighOrLowlight = Color(134, 135, 139, 255)
+val ToolbarLight = Color(220, 220, 220, 20)
+val ToolbarDark = Color(80, 80, 80, 20)

apps/android/app/src/main/java/chat/simplex/app/ui/theme/Type.kt

@@ -2,45 +2,54 @@ package chat.simplex.app.ui.theme
 
 import androidx.compose.material.Typography
 import androidx.compose.ui.text.TextStyle
-import androidx.compose.ui.text.font.FontFamily
-import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.font.*
 import androidx.compose.ui.unit.sp
+import chat.simplex.app.R
+
+// https://github.com/rsms/inter
+val Inter = FontFamily(
+  Font(R.font.inter_regular),
+  Font(R.font.inter_italic, style = FontStyle.Italic),
+  Font(R.font.inter_bold, weight = FontWeight.Bold),
+  Font(R.font.inter_semi_bold, weight = FontWeight.SemiBold),
+  Font(R.font.inter_medium, weight = FontWeight.Medium),
+)
 
 // Set of Material typography styles to start with
 val Typography = Typography(
   h1 = TextStyle(
-    fontFamily = FontFamily.Default,
-    fontWeight = FontWeight.Normal,
+    fontFamily = Inter,
+    fontWeight = FontWeight.Bold,
     fontSize = 32.sp,
   ),
   h2 = TextStyle(
-    fontFamily = FontFamily.Default,
+    fontFamily = Inter,
     fontWeight = FontWeight.Normal,
     fontSize = 24.sp
   ),
   h3 = TextStyle(
-    fontFamily = FontFamily.Default,
+    fontFamily = Inter,
     fontWeight = FontWeight.Normal,
     fontSize = 19.sp
   ),
   body1 = TextStyle(
-    fontFamily = FontFamily.Default,
-    fontWeight = FontWeight.Normal,
-    fontSize = 17.sp
-  ),
-  body2 = TextStyle(
-    fontFamily = FontFamily.Default,
+    fontFamily = Inter,
     fontWeight = FontWeight.Normal,
     fontSize = 16.sp
   ),
+  body2 = TextStyle(
+    fontFamily = Inter,
+    fontWeight = FontWeight.Normal,
+    fontSize = 14.sp
+  ),
   button = TextStyle(
-    fontFamily = FontFamily.Default,
+    fontFamily = Inter,
     fontWeight = FontWeight.Normal,
     fontSize = 16.sp,
   ),
   caption = TextStyle(
-    fontFamily = FontFamily.Default,
+    fontFamily = Inter,
     fontWeight = FontWeight.Normal,
-    fontSize = 20.sp
+    fontSize = 18.sp
   )
-)
+)

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

@@ -12,6 +12,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+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
@@ -61,7 +62,7 @@ fun ChatInfoLayout(chat: Chat, close: () -> Unit, deleteContact: () -> Unit) {
     ChatInfoImage(chat, size = 192.dp)
     val cInfo = chat.chatInfo
     Text(
-      cInfo.displayName, style = MaterialTheme.typography.h1,
+      cInfo.displayName, style = MaterialTheme.typography.h1.copy(fontWeight = FontWeight.Normal),
       color = MaterialTheme.colors.onBackground,
       modifier = Modifier.padding(top = 32.dp).padding(bottom = 8.dp)
     )

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

@@ -3,14 +3,13 @@ package chat.simplex.app.views.chat
 import android.content.res.Configuration
 import android.util.Log
 import androidx.activity.compose.BackHandler
-import androidx.compose.foundation.background
-import androidx.compose.foundation.clickable
+import androidx.compose.foundation.*
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.lazy.*
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material.*
 import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.outlined.ArrowBack
+import androidx.compose.material.icons.outlined.ArrowBackIos
 import androidx.compose.runtime.*
 import androidx.compose.runtime.saveable.mapSaver
 import androidx.compose.runtime.saveable.rememberSaveable
@@ -25,7 +24,7 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import chat.simplex.app.TAG
 import chat.simplex.app.model.*
-import chat.simplex.app.ui.theme.SimpleXTheme
+import chat.simplex.app.ui.theme.*
 import chat.simplex.app.views.chat.item.ChatItemView
 import chat.simplex.app.views.chatlist.openChat
 import chat.simplex.app.views.helpers.*
@@ -151,46 +150,51 @@ fun ChatLayout(
 
 @Composable
 fun ChatInfoToolbar(chat: Chat, back: () -> Unit, info: () -> Unit) {
-  Box(
-    Modifier
-      .height(60.dp)
-      .padding(horizontal = 8.dp),
-    contentAlignment = Alignment.CenterStart
-  ) {
-    IconButton(onClick = back) {
-      Icon(
-        Icons.Outlined.ArrowBack,
-        "Back",
-        tint = MaterialTheme.colors.primary,
-        modifier = Modifier.padding(10.dp)
-      )
-    }
-    Row(
+  Column {
+    Box(
       Modifier
-        .padding(horizontal = 68.dp)
         .fillMaxWidth()
-        .clickable(onClick = info),
-      horizontalArrangement = Arrangement.Center,
-      verticalAlignment = Alignment.CenterVertically
+        .height(52.dp)
+        .background(if (isSystemInDarkTheme()) ToolbarDark else ToolbarLight)
+        .padding(horizontal = 8.dp),
+      contentAlignment = Alignment.CenterStart,
     ) {
-      val cInfo = chat.chatInfo
-      ChatInfoImage(chat, size = 40.dp)
-      Column(
-        Modifier.padding(start = 8.dp),
-        horizontalAlignment = Alignment.CenterHorizontally
-      ) {
-        Text(
-          cInfo.displayName, fontWeight = FontWeight.Bold,
-          maxLines = 1, overflow = TextOverflow.Ellipsis
+      IconButton(onClick = back) {
+        Icon(
+          Icons.Outlined.ArrowBackIos,
+          "Back",
+          tint = MaterialTheme.colors.primary,
+          modifier = Modifier.padding(10.dp)
         )
-        if (cInfo.fullName != "" && cInfo.fullName != cInfo.displayName) {
+      }
+      Row(
+        Modifier
+          .padding(horizontal = 68.dp)
+          .fillMaxWidth()
+          .clickable(onClick = info),
+        horizontalArrangement = Arrangement.Center,
+        verticalAlignment = Alignment.CenterVertically
+      ) {
+        val cInfo = chat.chatInfo
+        ChatInfoImage(chat, size = 40.dp)
+        Column(
+          Modifier.padding(start = 8.dp),
+          horizontalAlignment = Alignment.CenterHorizontally
+        ) {
           Text(
-            cInfo.fullName,
+            cInfo.displayName, fontWeight = FontWeight.SemiBold,
             maxLines = 1, overflow = TextOverflow.Ellipsis
           )
+          if (cInfo.fullName != "" && cInfo.fullName != cInfo.displayName) {
+            Text(
+              cInfo.fullName,
+              maxLines = 1, overflow = TextOverflow.Ellipsis
+            )
+          }
         }
       }
     }
+    Divider()
   }
 }
 
@@ -227,6 +231,9 @@ fun ChatItemsList(
   val cxt = LocalContext.current
   LazyColumn(state = listState) {
     itemsIndexed(chatItems) { i, cItem ->
+      if (i == 0) {
+        Spacer(Modifier.size(8.dp))
+      }
       if (chat.chatInfo is ChatInfo.Group) {
         if (cItem.chatDir is CIDirection.GroupRcv) {
           val prevItem = if (i > 0) chatItems[i - 1] else null

apps/android/app/src/main/java/chat/simplex/app/views/chat/item/ChatItemView.kt

@@ -5,6 +5,7 @@ import androidx.compose.foundation.combinedClickable
 import androidx.compose.foundation.layout.*
 import androidx.compose.material.*
 import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Edit
 import androidx.compose.material.icons.outlined.*
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
@@ -91,7 +92,7 @@ fun ChatItemView(
 }
 
 @Composable
-private fun ItemAction(text: String, icon: ImageVector, onClick: () -> Unit, color: Color = HighOrLowlight) {
+private fun ItemAction(text: String, icon: ImageVector, onClick: () -> Unit, color: Color = MaterialTheme.colors.onBackground) {
   DropdownMenuItem(onClick) {
     Row {
       Text(

apps/android/app/src/main/java/chat/simplex/app/views/chatlist/ChatListView.kt

@@ -1,7 +1,6 @@
 package chat.simplex.app.views.chatlist
 
-import androidx.compose.foundation.background
-import androidx.compose.foundation.clickable
+import androidx.compose.foundation.*
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
@@ -16,6 +15,8 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import chat.simplex.app.model.ChatModel
+import chat.simplex.app.ui.theme.ToolbarDark
+import chat.simplex.app.ui.theme.ToolbarLight
 import chat.simplex.app.views.chat.ChatHelpView
 import chat.simplex.app.views.newchat.NewChatSheet
 import chat.simplex.app.views.usersettings.SettingsView
@@ -76,6 +77,7 @@ fun ChatListView(chatModel: ChatModel) {
           .background(MaterialTheme.colors.background)
       ) {
         ChatListToolbar(scaffoldCtrl)
+        Divider()
         if (chatModel.chats.isNotEmpty()) {
           ChatList(chatModel)
         } else {
@@ -100,7 +102,7 @@ fun Help(scaffoldCtrl: ScaffoldController, displayName: String?) {
   Column(
     Modifier
       .fillMaxWidth()
-      .padding(8.dp)
+      .padding(16.dp)
   ) {
     Text(
       text = if (displayName != null) "Welcome ${displayName}!" else "Welcome!",
@@ -135,8 +137,9 @@ fun ChatListToolbar(scaffoldCtrl: ScaffoldController) {
     verticalAlignment = Alignment.CenterVertically,
     modifier = Modifier
       .fillMaxWidth()
+      .height(52.dp)
+      .background(if (isSystemInDarkTheme()) ToolbarDark else ToolbarLight)
       .padding(horizontal = 8.dp)
-      .height(60.dp)
   ) {
     IconButton(onClick = { scaffoldCtrl.toggleDrawer() }) {
       Icon(
@@ -149,7 +152,7 @@ fun ChatListToolbar(scaffoldCtrl: ScaffoldController) {
     Text(
       "Your chats",
       color = MaterialTheme.colors.onBackground,
-      fontWeight = FontWeight.Bold,
+      fontWeight = FontWeight.SemiBold,
       modifier = Modifier.padding(5.dp)
     )
     IconButton(onClick = { scaffoldCtrl.toggleSheet() }) {
@@ -165,7 +168,6 @@ fun ChatListToolbar(scaffoldCtrl: ScaffoldController) {
 
 @Composable
 fun ChatList(chatModel: ChatModel) {
-  Divider(Modifier.padding(horizontal = 8.dp))
   LazyColumn(
     modifier = Modifier.fillMaxWidth()
   ) {

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

@@ -43,11 +43,11 @@ fun AddContactLayout(connReq: String, share: () -> Unit) {
     ) {
       Text(
         "Add contact",
-        style = MaterialTheme.typography.h1,
+        style = MaterialTheme.typography.h1.copy(fontWeight = FontWeight.Normal),
       )
       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),
+        style = MaterialTheme.typography.h3,
         textAlign = TextAlign.Center,
       )
       QRCode(

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

@@ -76,11 +76,11 @@ fun ConnectContactLayout(qrCodeScanner: @Composable () -> Unit, close: () -> Uni
     ) {
       Text(
         "Scan QR code",
-        style = MaterialTheme.typography.h1,
+        style = MaterialTheme.typography.h1.copy(fontWeight = FontWeight.Normal),
       )
       Text(
         "Your chat profile will be sent\nto your contact",
-        style = MaterialTheme.typography.h2,
+        style = MaterialTheme.typography.h3,
         textAlign = TextAlign.Center,
         modifier = Modifier.padding(bottom = 4.dp)
       )

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

@@ -71,7 +71,7 @@ fun SettingsLayout(
         .padding(top = 16.dp)
     ) {
       Text(
-        "Your Settings",
+        "Your settings",
         style = MaterialTheme.typography.h1,
         modifier = Modifier.padding(start = 8.dp)
       )
@@ -151,6 +151,7 @@ fun SettingsLayout(
         Spacer(Modifier.padding(horizontal = 4.dp))
         Text("SMP servers")
       }
+      Divider(Modifier.padding(horizontal = 8.dp))
       SettingsSectionView() {
         Icon(
           Icons.Outlined.Bolt,
@@ -205,7 +206,7 @@ fun SettingsLayout(
 }
 
 @Composable
-fun SettingsSectionView(click: (() -> Unit)? = null, height: Dp = 48.dp, content: (@Composable () -> Unit)) {
+fun SettingsSectionView(click: (() -> Unit)? = null, height: Dp = 46.dp, content: (@Composable () -> Unit)) {
   val modifier = Modifier
     .padding(start = 8.dp)
     .fillMaxWidth()