diff --git a/apps/android/app/src/main/java/chat/simplex/app/ui/theme/Color.kt b/apps/android/app/src/main/java/chat/simplex/app/ui/theme/Color.kt index f2f2c0b486..3f4b1c6abf 100644 --- a/apps/android/app/src/main/java/chat/simplex/app/ui/theme/Color.kt +++ b/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) diff --git a/apps/android/app/src/main/java/chat/simplex/app/ui/theme/Type.kt b/apps/android/app/src/main/java/chat/simplex/app/ui/theme/Type.kt index 52b9948c13..680a6d3d89 100644 --- a/apps/android/app/src/main/java/chat/simplex/app/ui/theme/Type.kt +++ b/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 ) -) \ No newline at end of file +) diff --git a/apps/android/app/src/main/java/chat/simplex/app/views/chat/ChatInfoView.kt b/apps/android/app/src/main/java/chat/simplex/app/views/chat/ChatInfoView.kt index cc272b8fb8..ed43311f96 100644 --- a/apps/android/app/src/main/java/chat/simplex/app/views/chat/ChatInfoView.kt +++ b/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) ) diff --git a/apps/android/app/src/main/java/chat/simplex/app/views/chat/ChatView.kt b/apps/android/app/src/main/java/chat/simplex/app/views/chat/ChatView.kt index be69980eaf..02b8ab1da6 100644 --- a/apps/android/app/src/main/java/chat/simplex/app/views/chat/ChatView.kt +++ b/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 diff --git a/apps/android/app/src/main/java/chat/simplex/app/views/chat/item/ChatItemView.kt b/apps/android/app/src/main/java/chat/simplex/app/views/chat/item/ChatItemView.kt index 20db037d42..2fce0d1c66 100644 --- a/apps/android/app/src/main/java/chat/simplex/app/views/chat/item/ChatItemView.kt +++ b/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( diff --git a/apps/android/app/src/main/java/chat/simplex/app/views/chatlist/ChatListView.kt b/apps/android/app/src/main/java/chat/simplex/app/views/chatlist/ChatListView.kt index 65b216fdee..44017bc904 100644 --- a/apps/android/app/src/main/java/chat/simplex/app/views/chatlist/ChatListView.kt +++ b/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() ) { diff --git a/apps/android/app/src/main/java/chat/simplex/app/views/newchat/AddContactView.kt b/apps/android/app/src/main/java/chat/simplex/app/views/newchat/AddContactView.kt index d3a416c0d4..545bf105f4 100644 --- a/apps/android/app/src/main/java/chat/simplex/app/views/newchat/AddContactView.kt +++ b/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( diff --git a/apps/android/app/src/main/java/chat/simplex/app/views/newchat/ConnectContactView.kt b/apps/android/app/src/main/java/chat/simplex/app/views/newchat/ConnectContactView.kt index 4abcf2bc46..06f34cb0a6 100644 --- a/apps/android/app/src/main/java/chat/simplex/app/views/newchat/ConnectContactView.kt +++ b/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) ) diff --git a/apps/android/app/src/main/java/chat/simplex/app/views/usersettings/SettingsView.kt b/apps/android/app/src/main/java/chat/simplex/app/views/usersettings/SettingsView.kt index aa476561c0..e74aa7042e 100644 --- a/apps/android/app/src/main/java/chat/simplex/app/views/usersettings/SettingsView.kt +++ b/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() diff --git a/apps/android/app/src/main/res/font/inter_bold.ttf b/apps/android/app/src/main/res/font/inter_bold.ttf new file mode 100644 index 0000000000..7e1deec31e Binary files /dev/null and b/apps/android/app/src/main/res/font/inter_bold.ttf differ diff --git a/apps/android/app/src/main/res/font/inter_italic.ttf b/apps/android/app/src/main/res/font/inter_italic.ttf new file mode 100644 index 0000000000..e1afbe7edd Binary files /dev/null and b/apps/android/app/src/main/res/font/inter_italic.ttf differ diff --git a/apps/android/app/src/main/res/font/inter_medium.ttf b/apps/android/app/src/main/res/font/inter_medium.ttf new file mode 100644 index 0000000000..7e573f6498 Binary files /dev/null and b/apps/android/app/src/main/res/font/inter_medium.ttf differ diff --git a/apps/android/app/src/main/res/font/inter_regular.ttf b/apps/android/app/src/main/res/font/inter_regular.ttf new file mode 100644 index 0000000000..012d1b470d Binary files /dev/null and b/apps/android/app/src/main/res/font/inter_regular.ttf differ diff --git a/apps/android/app/src/main/res/font/inter_semi_bold.ttf b/apps/android/app/src/main/res/font/inter_semi_bold.ttf new file mode 100644 index 0000000000..4be54399d6 Binary files /dev/null and b/apps/android/app/src/main/res/font/inter_semi_bold.ttf differ diff --git a/apps/ios/Shared/Views/NewChat/ConnectContactView.swift b/apps/ios/Shared/Views/NewChat/ConnectContactView.swift index b6a118b10f..5b2faa1a64 100644 --- a/apps/ios/Shared/Views/NewChat/ConnectContactView.swift +++ b/apps/ios/Shared/Views/NewChat/ConnectContactView.swift @@ -17,7 +17,7 @@ struct ConnectContactView: View { Text("Scan QR code") .font(.title) .padding(.bottom) - Text("Your chat profile will be sent to your contact.") + Text("Your chat profile will be sent to your contact") .font(.title2) .multilineTextAlignment(.center) .padding()