Delete README.md

* Create 20220808-simplex-chat-v3.1-chat-groups.md

* Update 20220808-simplex-chat-v3.1-chat-groups.md

.github/ISSUE_TEMPLATE/bug.yml

@@ -0,0 +1,68 @@
+name: Bug
+description: File a bug report/issue
+title: "[Bug]: "
+labels: ["type:bug", "type:triage"]
+body:
+- type: checkboxes
+  attributes:
+    label: Is there an existing issue for this?
+    description: Please search to see if an issue already exists for the bug you encountered.
+    options:
+    - label: I have searched the existing issues
+      required: true
+- type: dropdown
+  attributes:
+    label: Platform
+    description: Multiple selections are possible.
+    multiple: true
+    options:
+      - Linux
+      - Mac
+      - Windows
+      - Android
+      - iOS
+  validations:
+    required: true
+- type: input
+  attributes:
+    label: OS version
+    description: Specify the OS version
+    placeholder: ex. Android 12, Ubuntu 20.04
+  validations:
+    required: true
+- type: input
+  attributes:
+    label: App version
+    description: Specify the SimpleX version
+    placeholder: ex. 4.3.2
+  validations:
+    required: true
+- type: textarea
+  attributes:
+    label: Current Behavior
+    description: A concise description of what you're experiencing.
+    placeholder: Bug happened!
+  validations:
+    required: true
+- type: textarea
+  attributes:
+    label: Expected Behavior
+    description: A concise description of what you expected to happen.
+    placeholder: No bug should happen!
+  validations:
+    required: true
+- type: textarea
+  attributes:
+    label: Steps To Reproduce
+    description: Steps to reproduce the behavior.
+    placeholder: |
+      1. Go to ...
+      3. Click on ...
+      4. See error...
+  validations:
+    required: true
+- type: textarea
+  attributes:
+    label: Relevant log output
+    description: Please copy and paste any relevant log output. This will be automatically formatted into code, so no need for backticks.
+    render: shell

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1 @@
+blank_issues_enabled: true

.github/ISSUE_TEMPLATE/feature.yml

@@ -0,0 +1,40 @@
+name: Feature
+description: Suggest your feature
+title: "[Feature]: "
+labels: ["type:enhancement", "type:triage"]
+body:
+- type: checkboxes
+  attributes:
+    label: Is there an existing issue for this?
+    description: Please search to see if an issue already exists for the bug you encountered.
+    options:
+    - label: I have searched the existing issues
+      required: true
+- type: dropdown
+  attributes:
+    label: Platform
+    description: Multiple selections are possible. If selected input is "all", this considered to be a general feature.
+    multiple: true
+    options:
+      - Linux
+      - Mac
+      - Windows
+      - Android
+      - iOS
+      - all
+  validations:
+    required: true
+- type: input
+  attributes:
+    label: App version
+    description: Specify the SimpleX version
+    placeholder: ex. 4.3.2
+  validations:
+    required: false
+- type: textarea
+  attributes:
+    label: Feature
+    description: Describe the feature you would like to see added
+    placeholder: SimpleX Chat should make me coffee! 
+  validations:
+    required: true

.github/ISSUE_TEMPLATE/question.yml

@@ -0,0 +1,16 @@
+name: Question
+description: Ask your question
+title: "[Q]: "
+labels: ["type:question", "type:triage"]
+body:
+- type: markdown
+  attributes:
+    value: |
+      Generally, we encourage you to ask questions in our [official group](https://simplex.chat/invitation/#/?v=1&smp=smp%3A%2F%2FPQUV2eL0t7OStZOoAsPEV2QYWt4-xilbakvGUGOItUo%3D%40smp6.simplex.im%2FK1rslx-m5bpXVIdMZg9NLUZ_8JBm8xTt%23MCowBQYDK2VuAyEALDeVe-sG8mRY22LsXlPgiwTNs9dbiLrNuA7f3ZMAJ2w%3Dsimplex:/contact#/?v=1&smp=smp%3A%2F%2FPQUV2eL0t7OStZOoAsPEV2QYWt4-xilbakvGUGOItUo%3D%40smp6.simplex.im%2FK1rslx-m5bpXVIdMZg9NLUZ_8JBm8xTt%23MCowBQYDK2VuAyEALDeVe-sG8mRY22LsXlPgiwTNs9dbiLrNuA7f3ZMAJ2w%3D), but you can do it anyway :)
+- type: textarea
+  attributes:
+    label: Question
+    description: Please ask your question in plain english.
+    placeholder: Is SimpleX - chat?
+  validations:
+    required: true

README.md

@@ -48,7 +48,23 @@
 
 ## Join user groups
 
-You can join an English-speaking users group if you want to ask any questions: [#SimpleX-Group-2](https://simplex.chat/contact#/?v=1-2&smp=smp%3A%2F%2Fhpq7_4gGJiilmz5Rf-CswuU5kZGkm_zOIooSw6yALRg%3D%40smp5.simplex.im%2FQP8zaGjjmlXV-ix_Er4JgJ0lNPYGS1KX%23%2F%3Fv%3D1-2%26dh%3DMCowBQYDK2VuAyEApAgBkRZ3x12ayZ7sHrjHQWNMvqzZpWUgM_fFCUdLXwo%253D%26srv%3Djjbyvoemxysm7qxap7m5d5m35jzv5qq6gnlv7s4rsn7tdwwmuqciwpid.onion&data=%7B%22type%22%3A%22group%22%2C%22groupLinkId%22%3A%22xWpPXEZZsQp_F7vwAcAYDw%3D%3D%22%7D)
+**Please note**: The groups below are created for the users to be able to ask questions, make suggestions and ask questions about SimpleX Chat only.
+
+You also can:
+- criticize the app, and make comparisons with other messengers.
+- share new messengers you think could be interesting for privacy, as long as you don't spam.
+- share some privacy related publications, infrequently.
+- having preliminary approved with the admin in direct message, share the link to a group you created.
+
+You must:
+- be polite to other users
+- avoid spam (too frequent messages, even if they are relevant)
+- avoid any personal attacks or hostility.
+- avoid sharing any content that is not relevant to the above (that includes, but is not limited to, discussing politics or any aspects of society other than privacy, security, technology and communications, sharing any content that may be found offensive by other users, etc.).
+
+Messages not following these rules will be deleted, the right to send messages may be revoked, and the access to the new members to the group may be temporarily restricted, to prevent re-joining under a different name - our imperfect group moderation does not have a better solution at the moment.
+
+You can join an English-speaking users group if you want to ask any questions: [#SimpleX-Group-3](https://simplex.chat/contact#/?v=1-2&smp=smp%3A%2F%2FPQUV2eL0t7OStZOoAsPEV2QYWt4-xilbakvGUGOItUo%3D%40smp6.simplex.im%2Fp-j-D_PrY2UMDchFHEUtbSES0nmzCnvD%23%2F%3Fv%3D1-2%26dh%3DMCowBQYDK2VuAyEA3gBfMjB_GDEmKQwjNdqGbnX91yfuZ7nRJgQijsx5Khc%253D%26srv%3Dbylepyau3ty4czmn77q4fglvperknl4bi2eb2fdy2bh4jxtf32kf73yd.onion&data=%7B%22type%22%3A%22group%22%2C%22groupLinkId%22%3A%2262MvNZ_Ec2mmlS8V0QNtLQ%3D%3D%22%7D)
 
 There are groups in other languages, that we have the apps interface translated into. These groups are for testing, and asking questions to other SimpleX Chat users:
 
@@ -86,10 +102,11 @@ Join our translators to help SimpleX grow!
 |🇫🇷 fr|Français  |[ishi_sama](https://github.com/ishi-sama)|[![android app](https://hosted.weblate.org/widgets/simplex-chat/fr/android/svg-badge.svg)](https://hosted.weblate.org/projects/simplex-chat/android/fr/)<br>[![ios app](https://hosted.weblate.org/widgets/simplex-chat/fr/ios/svg-badge.svg)](https://hosted.weblate.org/projects/simplex-chat/ios/fr/)|[![website](https://hosted.weblate.org/widgets/simplex-chat/fr/website/svg-badge.svg)](https://hosted.weblate.org/projects/simplex-chat/website/fr/)|[✓](https://github.com/simplex-chat/simplex-chat/tree/master/docs/lang/fr)|
 |🇮🇹 it|Italiano  |[unbranched](https://github.com/unbranched)|[![android app](https://hosted.weblate.org/widgets/simplex-chat/it/android/svg-badge.svg)](https://hosted.weblate.org/projects/simplex-chat/android/it/)<br>[![ios app](https://hosted.weblate.org/widgets/simplex-chat/it/ios/svg-badge.svg)](https://hosted.weblate.org/projects/simplex-chat/ios/it/)|[![website](https://hosted.weblate.org/widgets/simplex-chat/it/website/svg-badge.svg)](https://hosted.weblate.org/projects/simplex-chat/website/it/)||
 |🇳🇱 nl|Nederlands|[mika-nl](https://github.com/mika-nl)|[![android app](https://hosted.weblate.org/widgets/simplex-chat/nl/android/svg-badge.svg)](https://hosted.weblate.org/projects/simplex-chat/android/nl/)<br>[![ios app](https://hosted.weblate.org/widgets/simplex-chat/nl/ios/svg-badge.svg)](https://hosted.weblate.org/projects/simplex-chat/ios/nl/)|[![website](https://hosted.weblate.org/widgets/simplex-chat/nl/website/svg-badge.svg)](https://hosted.weblate.org/projects/simplex-chat/website/nl/)||
+|🇵🇱 pl|Polski    |[BxOxSxS](https://github.com/BxOxSxS)|[![android app](https://hosted.weblate.org/widgets/simplex-chat/pl/android/svg-badge.svg)](https://hosted.weblate.org/projects/simplex-chat/android/ru/)<br>[![ios app](https://hosted.weblate.org/widgets/simplex-chat/ru/ios/svg-badge.svg)](https://hosted.weblate.org/projects/simplex-chat/ios/pl/)|||
 |🇷🇺 ru|Русский   ||[![android app](https://hosted.weblate.org/widgets/simplex-chat/ru/android/svg-badge.svg)](https://hosted.weblate.org/projects/simplex-chat/android/ru/)<br>[![ios app](https://hosted.weblate.org/widgets/simplex-chat/ru/ios/svg-badge.svg)](https://hosted.weblate.org/projects/simplex-chat/ios/ru/)|||
-|🇨🇳 zh-CHS|简体中文|[sith-on-mars](https://github.com/sith-on-mars)|[![android app](https://hosted.weblate.org/widgets/simplex-chat/zh_Hans/android/svg-badge.svg)](https://hosted.weblate.org/projects/simplex-chat/android/zh_Hans/)<br>[![ios app](https://hosted.weblate.org/widgets/simplex-chat/zh_Hans/ios/svg-badge.svg)](https://hosted.weblate.org/projects/simplex-chat/ios/zh_Hans/)|[![website](https://hosted.weblate.org/widgets/simplex-chat/zh_Hans/website/svg-badge.svg)](https://hosted.weblate.org/projects/simplex-chat/website/zh_Hans/)||
+|🇨🇳 zh-CHS|简体中文|[sith-on-mars](https://github.com/sith-on-mars)<br><br>[Float-hu](https://github.com/Float-hu)|[![android app](https://hosted.weblate.org/widgets/simplex-chat/zh_Hans/android/svg-badge.svg)](https://hosted.weblate.org/projects/simplex-chat/android/zh_Hans/)<br>[![ios app](https://hosted.weblate.org/widgets/simplex-chat/zh_Hans/ios/svg-badge.svg)](https://hosted.weblate.org/projects/simplex-chat/ios/zh_Hans/)<br>&nbsp;|<br><br>[![website](https://hosted.weblate.org/widgets/simplex-chat/zh_Hans/website/svg-badge.svg)](https://hosted.weblate.org/projects/simplex-chat/website/zh_Hans/)||
 
-Languages in progress: Arabic, Hindi, Japanese, Spanish and [many others](https://hosted.weblate.org/projects/simplex-chat/#languages). We will be adding more languages as some of the already added are completed – please suggest new languages, review the [translation guide](./docs/TRANSLATIONS.md) and get in touch with us!
+Languages in progress: Arabic, Japanese, Korean, Portuguese and [others](https://hosted.weblate.org/projects/simplex-chat/#languages). We will be adding more languages as some of the already added are completed – please suggest new languages, review the [translation guide](./docs/TRANSLATIONS.md) and get in touch with us!
 
 ## Contribute
 
@@ -180,6 +197,8 @@ You can use SimpleX with your own servers and still communicate with people usin
 
 Recent updates:
 
+[Apr 22, 2023. SimpleX Chat: vision and funding, v5.0 released with videos and files up to 1gb](./blog/20230422-simplex-chat-vision-funding-v5-videos-files-passcode.md).
+
 [Mar 28, 2023. v4.6 released - with Android 8+ and ARMv7a support, hidden profiles, community moderation, improved audio/video calls and reduced battery usage](./blog/20230328-simplex-chat-v4-6-hidden-profiles.md).
 
 [Mar 1, 2023. SimpleX File Transfer Protocol – send large files efficiently, privately and securely, soon to be integrated into SimpleX Chat apps.](./blog/20230301-simplex-file-transfer-protocol.md).
@@ -294,13 +313,15 @@ If you are considering developing with SimpleX platform please get in touch for
 - ✅ Improved audio & video calls.
 - ✅ Support older Android OS and 32-bit CPUs.
 - ✅ Hidden chat profiles.
-- 🏗 Sending and receiving large files via [XFTP protocol](./blog/20230301-simplex-file-transfer-protocol.md).
-- 🏗 Video messages.
+- ✅ Sending and receiving large files via [XFTP protocol](./blog/20230301-simplex-file-transfer-protocol.md).
+- ✅ Video messages.
+- ✅ App access passcode.
+- 🏗 Improved Android app UI design.
 - 🏗 SMP queue redundancy and rotation (manual is supported).
 - 🏗 Reduced battery and traffic usage in large groups.
 - Include optional message into connection request sent via contact address.
 - Ephemeral/disappearing/OTR conversations with the existing contacts.
-- Access password/pin (with optional alternative access password).
+- Optional alternative access password.
 - Local app files encryption.
 - Improved navigation and search in the conversation (expand and scroll to quoted message, scroll to search results, etc.).
 - Message delivery confirmation (with sender opt-in or opt-out per contact, TBC).

apps/android/app/build.gradle

@@ -11,8 +11,8 @@ android {
         applicationId "chat.simplex.app"
         minSdk 26
         targetSdk 32
-        versionCode 111
-        versionName "4.6.1-beta.2"
+        versionCode 117
+        versionName "5.0"
 
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
         vectorDrawables {
@@ -77,7 +77,18 @@ android {
     def isBundle = gradle.getStartParameter().taskNames.find({ it.toLowerCase().contains("bundle") }) != null
 //    if (isRelease) {
         // Comma separated list of languages that will be included in the apk
-    android.defaultConfig.resConfigs("en", "cs", "de", "es", "fr", "it", "nl", "ru", "zh-rCN")
+    android.defaultConfig.resConfigs(
+        "en",
+        "cs",
+        "de",
+        "es",
+        "fr",
+        "it",
+        "nl",
+        "pl",
+        "ru",
+        "zh-rCN"
+    )
 //    }
     if (isBundle) {
         defaultConfig.ndk.abiFilters 'arm64-v8a', 'armeabi-v7a'
@@ -108,7 +119,8 @@ dependencies {
     implementation 'androidx.fragment:fragment:1.4.1'
     implementation 'org.jetbrains.kotlinx:kotlinx-datetime:0.3.2'
     implementation 'org.jetbrains.kotlinx:kotlinx-serialization-json:1.3.2'
-    implementation "androidx.compose.material:material-icons-extended:$compose_version"
+    implementation 'com.charleskorn.kaml:kaml:0.43.0'
+    //implementation "androidx.compose.material:material-icons-extended:$compose_version"
     implementation "androidx.compose.ui:ui-util:$compose_version"
     implementation "androidx.navigation:navigation-compose:2.4.1"
     implementation "com.google.accompanist:accompanist-insets:0.23.0"

apps/android/app/src/main/java/chat/simplex/app/MainActivity.kt

@@ -12,24 +12,22 @@ import androidx.activity.viewModels
 import androidx.compose.animation.core.*
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.*
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Surface
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.outlined.Lock
+import androidx.compose.material.*
 import androidx.compose.runtime.*
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.graphicsLayer
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import androidx.fragment.app.FragmentActivity
 import androidx.lifecycle.*
-import chat.simplex.app.model.ChatModel
-import chat.simplex.app.model.NtfManager
+import chat.simplex.app.MainActivity.Companion.enteredBackground
+import chat.simplex.app.model.*
 import chat.simplex.app.model.NtfManager.Companion.getUserIdFromIntent
-import chat.simplex.app.ui.theme.SimpleButton
-import chat.simplex.app.ui.theme.SimpleXTheme
+import chat.simplex.app.ui.theme.*
 import chat.simplex.app.views.SplashView
 import chat.simplex.app.views.call.ActiveCallView
 import chat.simplex.app.views.call.IncomingCallAlertView
@@ -37,8 +35,11 @@ import chat.simplex.app.views.chat.ChatView
 import chat.simplex.app.views.chatlist.*
 import chat.simplex.app.views.database.DatabaseErrorView
 import chat.simplex.app.views.helpers.*
+import chat.simplex.app.views.helpers.DatabaseUtils.ksAppPassword
+import chat.simplex.app.views.localauth.SetAppPasscodeView
 import chat.simplex.app.views.newchat.*
 import chat.simplex.app.views.onboarding.*
+import chat.simplex.app.views.usersettings.LAMode
 import kotlinx.coroutines.*
 import kotlinx.coroutines.flow.distinctUntilChanged
 
@@ -82,20 +83,14 @@ class MainActivity: FragmentActivity() {
     }
     setContent {
       SimpleXTheme {
-        Surface(
-          Modifier
-            .background(MaterialTheme.colors.background)
-            .fillMaxSize()
-        ) {
-          MainPage(
-            m,
-            userAuthorized,
-            laFailed,
-            ::runAuthenticate,
-            ::setPerformLA,
-            showLANotice = { m.controller.showLANotice(this) }
-          )
-        }
+        MainPage(
+          m,
+          userAuthorized,
+          laFailed,
+          ::runAuthenticate,
+          ::setPerformLA,
+          showLANotice = { showLANotice(m.controller.appPrefs.laNoticeShown, this) }
+        )
       }
     }
     SimplexApp.context.schedulePeriodicServiceRestartWorker()
@@ -111,7 +106,8 @@ class MainActivity: FragmentActivity() {
   override fun onResume() {
     super.onResume()
     val enteredBackgroundVal = enteredBackground.value
-    if (enteredBackgroundVal == null || elapsedRealtime() - enteredBackgroundVal >= 30_000) {
+    val delay = vm.chatModel.controller.appPrefs.laLockDelay.get()
+    if (enteredBackgroundVal == null || elapsedRealtime() - enteredBackgroundVal >= delay * 1000) {
       runAuthenticate()
     }
   }
@@ -165,16 +161,27 @@ class MainActivity: FragmentActivity() {
         delay(50)
         withContext(Dispatchers.Main) {
           authenticate(
-            generalGetString(R.string.auth_unlock),
-            generalGetString(R.string.auth_log_in_using_credential),
+            if (m.controller.appPrefs.laMode.get() == LAMode.SYSTEM)
+              generalGetString(R.string.auth_unlock)
+            else
+              generalGetString(R.string.la_enter_app_passcode),
+            if (m.controller.appPrefs.laMode.get() == LAMode.SYSTEM)
+              generalGetString(R.string.auth_log_in_using_credential)
+            else
+              generalGetString(R.string.auth_unlock),
             this@MainActivity,
             completed = { laResult ->
               when (laResult) {
                 LAResult.Success ->
                   userAuthorized.value = true
-                is LAResult.Error, LAResult.Failed ->
+                is LAResult.Failed -> { /* Can be called multiple times on every failure */ }
+                is LAResult.Error -> {
                   laFailed.value = true
-                LAResult.Unavailable -> {
+                  if (m.controller.appPrefs.laMode.get() == LAMode.PASSCODE) {
+                    laFailedAlert()
+                  }
+                }
+                is LAResult.Unavailable -> {
                   userAuthorized.value = true
                   m.performLA.value = false
                   m.controller.appPrefs.performLA.set(false)
@@ -188,21 +195,116 @@ class MainActivity: FragmentActivity() {
     }
   }
 
-  private fun setPerformLA(on: Boolean) {
-    vm.chatModel.controller.appPrefs.laNoticeShown.set(true)
-    if (on) {
-      enableLA()
-    } else {
-      disableLA()
+  private fun showLANotice(laNoticeShown: SharedPreference<Boolean>, activity: FragmentActivity) {
+    Log.d(TAG, "showLANotice")
+    if (!laNoticeShown.get()) {
+      laNoticeShown.set(true)
+      AlertManager.shared.showAlertDialog(
+        title = generalGetString(R.string.la_notice_title_simplex_lock),
+        text = generalGetString(R.string.la_notice_to_protect_your_information_turn_on_simplex_lock_you_will_be_prompted_to_complete_authentication_before_this_feature_is_enabled),
+        confirmText = generalGetString(R.string.la_notice_turn_on),
+        onConfirm = {
+          withBGApi { // to remove this call, change ordering of onConfirm call in AlertManager
+            showChooseLAMode(laNoticeShown, activity)
+          }
+        }
+      )
     }
   }
 
-  private fun enableLA() {
+  private fun showChooseLAMode(laNoticeShown: SharedPreference<Boolean>, activity: FragmentActivity) {
+    Log.d(TAG, "showLANotice")
+    laNoticeShown.set(true)
+    AlertManager.shared.showAlertDialogStacked(
+      title = generalGetString(R.string.la_lock_mode),
+      text = null,
+      confirmText = generalGetString(R.string.la_lock_mode_passcode),
+      dismissText = generalGetString(R.string.la_lock_mode_system),
+      onConfirm = {
+        AlertManager.shared.hideAlert()
+        setPasscode()
+      },
+      onDismiss = {
+        AlertManager.shared.hideAlert()
+        initialEnableLA(activity)
+      }
+    )
+  }
+
+  private fun initialEnableLA(activity: FragmentActivity) {
     val m = vm.chatModel
+    val appPrefs = m.controller.appPrefs
+    m.controller.appPrefs.laMode.set(LAMode.SYSTEM)
     authenticate(
       generalGetString(R.string.auth_enable_simplex_lock),
       generalGetString(R.string.auth_confirm_credential),
-      this@MainActivity,
+      activity,
+      completed = { laResult ->
+        when (laResult) {
+          LAResult.Success -> {
+            m.performLA.value = true
+            appPrefs.performLA.set(true)
+            laTurnedOnAlert()
+          }
+          is LAResult.Failed -> { /* Can be called multiple times on every failure */ }
+          is LAResult.Error -> {
+            m.performLA.value = false
+            appPrefs.performLA.set(false)
+            laFailedAlert()
+          }
+          is LAResult.Unavailable -> {
+            m.performLA.value = false
+            appPrefs.performLA.set(false)
+            m.showAdvertiseLAUnavailableAlert.value = true
+          }
+        }
+      }
+    )
+  }
+
+  private fun setPasscode() {
+    val chatModel = vm.chatModel
+    val appPrefs = chatModel.controller.appPrefs
+    ModalManager.shared.showCustomModal { close ->
+      Surface(Modifier.fillMaxSize(), color = MaterialTheme.colors.background) {
+        SetAppPasscodeView(
+          submit = {
+            chatModel.performLA.value = true
+            appPrefs.performLA.set(true)
+            appPrefs.laMode.set(LAMode.PASSCODE)
+            laTurnedOnAlert()
+          },
+          cancel = {
+            chatModel.performLA.value = false
+            appPrefs.performLA.set(false)
+            laPasscodeNotSetAlert()
+          },
+          close)
+      }
+    }
+  }
+
+  private fun setPerformLA(on: Boolean, activity: FragmentActivity) {
+    vm.chatModel.controller.appPrefs.laNoticeShown.set(true)
+    if (on) {
+      enableLA(activity)
+    } else {
+      disableLA(activity)
+    }
+  }
+
+  private fun enableLA(activity: FragmentActivity) {
+    val m = vm.chatModel
+    authenticate(
+      if (m.controller.appPrefs.laMode.get() == LAMode.SYSTEM)
+        generalGetString(R.string.auth_enable_simplex_lock)
+      else
+        generalGetString(R.string.new_passcode),
+      if (m.controller.appPrefs.laMode.get() == LAMode.SYSTEM)
+        generalGetString(R.string.auth_confirm_credential)
+      else
+        "",
+      activity,
       completed = { laResult ->
         val prefPerformLA = m.controller.appPrefs.performLA
         when (laResult) {
@@ -211,11 +313,13 @@ class MainActivity: FragmentActivity() {
             prefPerformLA.set(true)
             laTurnedOnAlert()
           }
-          is LAResult.Error, LAResult.Failed -> {
+          is LAResult.Failed -> { /* Can be called multiple times on every failure */ }
+          is LAResult.Error -> {
             m.performLA.value = false
             prefPerformLA.set(false)
+            laFailedAlert()
           }
-          LAResult.Unavailable -> {
+          is LAResult.Unavailable -> {
             m.performLA.value = false
             prefPerformLA.set(false)
             laUnavailableInstructionAlert()
@@ -225,24 +329,33 @@ class MainActivity: FragmentActivity() {
     )
   }
 
-  private fun disableLA() {
+  private fun disableLA(activity: FragmentActivity) {
     val m = vm.chatModel
     authenticate(
-      generalGetString(R.string.auth_disable_simplex_lock),
-      generalGetString(R.string.auth_confirm_credential),
-      this@MainActivity,
+      if (m.controller.appPrefs.laMode.get() == LAMode.SYSTEM)
+        generalGetString(R.string.auth_disable_simplex_lock)
+      else
+        generalGetString(R.string.la_enter_app_passcode),
+      if (m.controller.appPrefs.laMode.get() == LAMode.SYSTEM)
+        generalGetString(R.string.auth_confirm_credential)
+      else
+        generalGetString(R.string.auth_disable_simplex_lock),
+      activity,
       completed = { laResult ->
         val prefPerformLA = m.controller.appPrefs.performLA
         when (laResult) {
           LAResult.Success -> {
             m.performLA.value = false
             prefPerformLA.set(false)
+            ksAppPassword.remove()
           }
-          is LAResult.Error, LAResult.Failed -> {
+          is LAResult.Failed -> { /* Can be called multiple times on every failure */ }
+          is LAResult.Error -> {
             m.performLA.value = true
             prefPerformLA.set(true)
+            laFailedAlert()
           }
-          LAResult.Unavailable -> {
+          is LAResult.Unavailable -> {
             m.performLA.value = false
             prefPerformLA.set(false)
             laUnavailableTurningOffAlert()
@@ -264,7 +377,7 @@ fun MainPage(
   userAuthorized: MutableState<Boolean?>,
   laFailed: MutableState<Boolean>,
   runAuthenticate: () -> Unit,
-  setPerformLA: (Boolean) -> Unit,
+  setPerformLA: (Boolean, FragmentActivity) -> Unit,
   showLANotice: () -> Unit
 ) {
   var showChatDatabaseError by rememberSaveable {
@@ -301,12 +414,12 @@ fun MainPage(
   @Composable
   fun authView() {
     Box(
-      Modifier.fillMaxSize(),
+      Modifier.fillMaxSize().background(MaterialTheme.colors.background),
       contentAlignment = Alignment.Center
     ) {
       SimpleButton(
         stringResource(R.string.auth_unlock),
-        icon = Icons.Outlined.Lock,
+        icon = painterResource(R.drawable.ic_lock),
         click = {
           laFailed.value = false
           runAuthenticate()
@@ -392,6 +505,14 @@ fun MainPage(
     if (invitation != null) IncomingCallAlertView(invitation, chatModel)
     AlertManager.shared.showInView()
   }
+
+  DisposableEffectOnRotate {
+    // When using lock delay = 0 and screen rotates, the app will be locked which is not useful.
+    // Let's prolong the unlocked period to 3 sec for screen rotation to take place
+    if (chatModel.controller.appPrefs.laLockDelay.get() == 0) {
+      enteredBackground.value = elapsedRealtime() + 3000
+    }
+  }
 }
 
 fun processNotificationIntent(intent: Intent?, chatModel: ChatModel) {
@@ -454,14 +575,23 @@ fun processExternalIntent(intent: Intent?, chatModel: ChatModel) {
       chatModel.chatId.value = null
       chatModel.clearOverlays.value = true
       when {
-        "text/plain" == intent.type -> intent.getStringExtra(Intent.EXTRA_TEXT)?.let {
-          chatModel.sharedContent.value = SharedContent.Text(it)
+        intent.type == "text/plain" -> {
+          val text = intent.getStringExtra(Intent.EXTRA_TEXT)
+          if (text != null) {
+            chatModel.sharedContent.value = SharedContent.Text(text)
+          }
         }
-        intent.type?.startsWith("image/") == true -> (intent.getParcelableExtra<Parcelable>(Intent.EXTRA_STREAM) as? Uri)?.let {
-          chatModel.sharedContent.value = SharedContent.Images(intent.getStringExtra(Intent.EXTRA_TEXT) ?: "", listOf(it))
-        } // All other mime types
-        else -> (intent.getParcelableExtra<Parcelable>(Intent.EXTRA_STREAM) as? Uri)?.let {
-          chatModel.sharedContent.value = SharedContent.File(intent.getStringExtra(Intent.EXTRA_TEXT) ?: "", it)
+        isMediaIntent(intent) -> {
+          val uri = intent.getParcelableExtra<Parcelable>(Intent.EXTRA_STREAM) as? Uri
+          if (uri != null) {
+            chatModel.sharedContent.value = SharedContent.Media(intent.getStringExtra(Intent.EXTRA_TEXT) ?: "", listOf(uri))
+          } // All other mime types
+        }
+        else -> {
+          val uri = intent.getParcelableExtra<Parcelable>(Intent.EXTRA_STREAM) as? Uri
+          if (uri != null) {
+            chatModel.sharedContent.value = SharedContent.File(intent.getStringExtra(Intent.EXTRA_TEXT) ?: "", uri)
+          }
         }
       }
     }
@@ -469,16 +599,23 @@ fun processExternalIntent(intent: Intent?, chatModel: ChatModel) {
       // Close active chat and show a list of chats
       chatModel.chatId.value = null
       chatModel.clearOverlays.value = true
+      Log.e(TAG, "ACTION_SEND_MULTIPLE ${intent.type}")
       when {
-        intent.type?.startsWith("image/") == true -> (intent.getParcelableArrayListExtra<Parcelable>(Intent.EXTRA_STREAM) as? List<Uri>)?.let {
-          chatModel.sharedContent.value = SharedContent.Images(intent.getStringExtra(Intent.EXTRA_TEXT) ?: "", it)
-        } // All other mime types
+        isMediaIntent(intent) -> {
+          val uris = intent.getParcelableArrayListExtra<Parcelable>(Intent.EXTRA_STREAM) as? List<Uri>
+          if (uris != null) {
+            chatModel.sharedContent.value = SharedContent.Media(intent.getStringExtra(Intent.EXTRA_TEXT) ?: "", uris)
+          } // All other mime types
+        }
         else -> {}
       }
     }
   }
 }
 
+fun isMediaIntent(intent: Intent): Boolean =
+  intent.type?.startsWith("image/") == true || intent.type?.startsWith("video/") == true
+
 fun connectIfOpenedViaUri(uri: Uri, chatModel: ChatModel) {
   Log.d(TAG, "connectIfOpenedViaUri: opened via link")
   if (chatModel.currentUser.value == null) {
@@ -490,7 +627,7 @@ fun connectIfOpenedViaUri(uri: Uri, chatModel: ChatModel) {
         ConnectionLinkType.INVITATION -> generalGetString(R.string.connect_via_invitation_link)
         ConnectionLinkType.GROUP -> generalGetString(R.string.connect_via_group_link)
       }
-      AlertManager.shared.showAlertMsg(
+      AlertManager.shared.showAlertDialog(
         title = title,
         text = if (linkType == ConnectionLinkType.GROUP)
           generalGetString(R.string.you_will_join_group)

apps/android/app/src/main/java/chat/simplex/app/SimplexApp.kt

@@ -6,6 +6,7 @@ import android.util.Log
 import androidx.lifecycle.*
 import androidx.work.*
 import chat.simplex.app.model.*
+import chat.simplex.app.ui.theme.DefaultTheme
 import chat.simplex.app.views.helpers.*
 import chat.simplex.app.views.onboarding.OnboardingStage
 import chat.simplex.app.views.usersettings.NotificationsMode
@@ -95,6 +96,7 @@ class SimplexApp: Application(), LifecycleEventObserver {
     initChatController()
     ProcessLifecycleOwner.get().lifecycle.addObserver(this)
     context.getDir("temp", MODE_PRIVATE).deleteRecursively()
+    runMigrations()
   }
 
   override fun onStateChanged(source: LifecycleOwner, event: Lifecycle.Event) {
@@ -184,6 +186,23 @@ class SimplexApp: Application(), LifecycleEventObserver {
     MessagesFetcherWorker.scheduleWork()
   }
 
+  private fun runMigrations() {
+    val lastMigration = chatModel.controller.appPrefs.lastMigratedVersionCode
+    if (lastMigration.get() < BuildConfig.VERSION_CODE) {
+      while (true) {
+        if (lastMigration.get() < 117) {
+          if (chatModel.controller.appPrefs.currentTheme.get() == DefaultTheme.DARK.name) {
+            chatModel.controller.appPrefs.currentTheme.set(DefaultTheme.SIMPLEX.name)
+          }
+          lastMigration.set(117)
+        } else {
+          lastMigration.set(BuildConfig.VERSION_CODE)
+          break
+        }
+      }
+    }
+  }
+
   companion object {
     lateinit var context: SimplexApp private set
 

apps/android/app/src/main/java/chat/simplex/app/SimplexService.kt

@@ -326,4 +326,4 @@ class SimplexService: Service() {
 
     private fun getPreferences(context: Context): SharedPreferences = context.getSharedPreferences(SHARED_PREFS_ID, Context.MODE_PRIVATE)
   }
-}
+}

apps/android/app/src/main/java/chat/simplex/app/model/ChatModel.kt

@@ -2,11 +2,10 @@ package chat.simplex.app.model
 
 import android.net.Uri
 import androidx.compose.material.MaterialTheme
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.*
 import androidx.compose.runtime.*
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.graphics.painter.Painter
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.SpanStyle
 import androidx.compose.ui.text.font.*
 import androidx.compose.ui.text.style.TextDecoration
@@ -54,10 +53,8 @@ class ChatModel(val controller: ChatController) {
 
   val terminalItems = mutableStateListOf<TerminalItem>()
   val userAddress = mutableStateOf<UserContactLinkRec?>(null)
-  val userSMPServers = mutableStateOf<(List<ServerCfg>)?>(null)
   // Allows to temporary save servers that are being edited on multiple screens
   val userSMPServersUnsaved = mutableStateOf<(List<ServerCfg>)?>(null)
-  val presetSMPServers = mutableStateOf<(List<String>)?>(null)
   val chatItemTTL = mutableStateOf<ChatItemTTL>(ChatItemTTL.None)
 
   // set when app opened from external intent
@@ -731,6 +728,7 @@ data class Contact(
     ChatFeature.TimedMessages -> mergedPreferences.timedMessages.enabled.forUser
     ChatFeature.FullDelete -> mergedPreferences.fullDelete.enabled.forUser
     ChatFeature.Voice -> mergedPreferences.voice.enabled.forUser
+    ChatFeature.Calls -> mergedPreferences.calls.enabled.forUser
   }
   override val timedMessagesTTL: Int? get() = with(mergedPreferences.timedMessages) { if (enabled.forUser) userPreference.pref.ttl else null }
   override val displayName get() = localAlias.ifEmpty { profile.displayName }
@@ -749,12 +747,14 @@ data class Contact(
     ChatFeature.TimedMessages -> mergedPreferences.timedMessages.contactPreference.allow != FeatureAllowed.NO
     ChatFeature.FullDelete -> mergedPreferences.fullDelete.contactPreference.allow != FeatureAllowed.NO
     ChatFeature.Voice -> mergedPreferences.voice.contactPreference.allow != FeatureAllowed.NO
+    ChatFeature.Calls -> mergedPreferences.calls.contactPreference.allow != FeatureAllowed.NO
   }
 
   fun userAllowsFeature(feature: ChatFeature): Boolean = when (feature) {
     ChatFeature.TimedMessages -> mergedPreferences.timedMessages.userPreference.pref.allow != FeatureAllowed.NO
     ChatFeature.FullDelete -> mergedPreferences.fullDelete.userPreference.pref.allow != FeatureAllowed.NO
     ChatFeature.Voice -> mergedPreferences.voice.userPreference.pref.allow != FeatureAllowed.NO
+    ChatFeature.Calls -> mergedPreferences.calls.userPreference.pref.allow != FeatureAllowed.NO
   }
 
   companion object {
@@ -884,6 +884,7 @@ data class GroupInfo (
     ChatFeature.TimedMessages -> fullGroupPreferences.timedMessages.on
     ChatFeature.FullDelete -> fullGroupPreferences.fullDelete.on
     ChatFeature.Voice -> fullGroupPreferences.voice.on
+    ChatFeature.Calls -> false
   }
   override val timedMessagesTTL: Int? get() = with(fullGroupPreferences.timedMessages) { if (on) ttl else null }
   override val displayName get() = groupProfile.displayName
@@ -1310,6 +1311,7 @@ data class ChatItem (
       is CIContent.SndCall -> showNtfDir
       is CIContent.RcvCall -> false // notification is shown on CallInvitation instead
       is CIContent.RcvIntegrityError -> showNtfDir
+      is CIContent.RcvDecryptionError -> showNtfDir
       is CIContent.RcvGroupInvitation -> showNtfDir
       is CIContent.SndGroupInvitation -> showNtfDir
       is CIContent.RcvGroupEventContent -> when (content.rcvGroupEvent) {
@@ -1467,10 +1469,10 @@ data class ChatItem (
         file = null
       )
 
-    fun invalidJSON(json: String): ChatItem =
+    fun invalidJSON(chatDir: CIDirection?, meta: CIMeta?, json: String): ChatItem =
       ChatItem(
-        chatDir = CIDirection.DirectSnd(),
-        meta = CIMeta.invalidJSON(),
+        chatDir = chatDir ?: CIDirection.DirectSnd(),
+        meta = meta ?: CIMeta.invalidJSON(),
         content = CIContent.InvalidJSON(json),
         quotedItem = null,
         file = null
@@ -1514,12 +1516,12 @@ data class CIMeta (
 
   val isRcvNew: Boolean get() = itemStatus is CIStatus.RcvNew
 
-  fun statusIcon(primaryColor: Color, metaColor: Color = HighOrLowlight): Pair<ImageVector, Color>? =
+  fun statusIcon(primaryColor: Color, metaColor: Color = CurrentColors.value.colors.secondary): Pair<Int, Color>? =
     when (itemStatus) {
-      is CIStatus.SndSent -> Icons.Filled.Check to metaColor
-      is CIStatus.SndErrorAuth -> Icons.Filled.Close to Color.Red
-      is CIStatus.SndError -> Icons.Filled.WarningAmber to WarningYellow
-      is CIStatus.RcvNew -> Icons.Filled.Circle to primaryColor
+      is CIStatus.SndSent -> R.drawable.ic_check_filled to metaColor
+      is CIStatus.SndErrorAuth -> R.drawable.ic_close to Color.Red
+      is CIStatus.SndError -> R.drawable.ic_warning_filled to WarningYellow
+      is CIStatus.RcvNew -> R.drawable.ic_circle_filled to primaryColor
       else -> null
     }
 
@@ -1613,6 +1615,7 @@ sealed class CIContent: ItemContent {
   @Serializable @SerialName("sndCall") class SndCall(val status: CICallStatus, val duration: Int): CIContent() { override val msgContent: MsgContent? get() = null }
   @Serializable @SerialName("rcvCall") class RcvCall(val status: CICallStatus, val duration: Int): CIContent() { override val msgContent: MsgContent? get() = null }
   @Serializable @SerialName("rcvIntegrityError") class RcvIntegrityError(val msgError: MsgErrorType): CIContent() { override val msgContent: MsgContent? get() = null }
+  @Serializable @SerialName("rcvDecryptionError") class RcvDecryptionError(val msgDecryptError: MsgDecryptError, val msgCount: UInt): CIContent() { override val msgContent: MsgContent? get() = null }
   @Serializable @SerialName("rcvGroupInvitation") class RcvGroupInvitation(val groupInvitation: CIGroupInvitation, val memberRole: GroupMemberRole): CIContent() { override val msgContent: MsgContent? get() = null }
   @Serializable @SerialName("sndGroupInvitation") class SndGroupInvitation(val groupInvitation: CIGroupInvitation, val memberRole: GroupMemberRole): CIContent() { override val msgContent: MsgContent? get() = null }
   @Serializable @SerialName("rcvGroupEvent") class RcvGroupEventContent(val rcvGroupEvent: RcvGroupEvent): CIContent() { override val msgContent: MsgContent? get() = null }
@@ -1639,6 +1642,7 @@ sealed class CIContent: ItemContent {
       is SndCall -> status.text(duration)
       is RcvCall -> status.text(duration)
       is RcvIntegrityError -> msgError.text
+      is RcvDecryptionError -> msgDecryptError.text
       is RcvGroupInvitation -> groupInvitation.text
       is SndGroupInvitation -> groupInvitation.text
       is RcvGroupEventContent -> rcvGroupEvent.text
@@ -1677,6 +1681,17 @@ sealed class CIContent: ItemContent {
   }
 }
 
+@Serializable
+enum class MsgDecryptError {
+  @SerialName("ratchetHeader") RatchetHeader,
+  @SerialName("tooManySkipped") TooManySkipped;
+
+  val text: String get() = when (this) {
+    RatchetHeader -> generalGetString(R.string.decryption_error)
+    TooManySkipped -> generalGetString(R.string.decryption_error)
+  }
+}
+
 @Serializable
 class CIQuote (
   val chatDir: CIDirection? = null,
@@ -1722,23 +1737,32 @@ class CIFile(
     is CIFileStatus.SndTransfer -> true
     is CIFileStatus.SndComplete -> true
     is CIFileStatus.SndCancelled -> true
+    is CIFileStatus.SndError -> true
     is CIFileStatus.RcvInvitation -> false
     is CIFileStatus.RcvAccepted -> false
     is CIFileStatus.RcvTransfer -> false
     is CIFileStatus.RcvCancelled -> false
     is CIFileStatus.RcvComplete -> true
+    is CIFileStatus.RcvError -> false
   }
 
-  val cancellable: Boolean = when (fileStatus) {
-    is CIFileStatus.SndStored -> fileProtocol != FileProtocol.XFTP // TODO true - enable when XFTP send supports cancel
-    is CIFileStatus.SndTransfer -> fileProtocol != FileProtocol.XFTP // TODO true
-    is CIFileStatus.SndComplete -> false
-    is CIFileStatus.SndCancelled -> false
-    is CIFileStatus.RcvInvitation -> false
-    is CIFileStatus.RcvAccepted -> true
-    is CIFileStatus.RcvTransfer -> true
-    is CIFileStatus.RcvCancelled -> false
-    is CIFileStatus.RcvComplete -> false
+  val cancelAction: CancelAction? = when (fileStatus) {
+    is CIFileStatus.SndStored -> sndCancelAction
+    is CIFileStatus.SndTransfer -> sndCancelAction
+    is CIFileStatus.SndComplete ->
+      if (fileProtocol == FileProtocol.XFTP) {
+        revokeCancelAction
+      } else {
+        null
+      }
+    is CIFileStatus.SndCancelled -> null
+    is CIFileStatus.SndError -> null
+    is CIFileStatus.RcvInvitation -> null
+    is CIFileStatus.RcvAccepted -> rcvCancelAction
+    is CIFileStatus.RcvTransfer -> rcvCancelAction
+    is CIFileStatus.RcvCancelled -> null
+    is CIFileStatus.RcvComplete -> null
+    is CIFileStatus.RcvError -> null
   }
 
   companion object {
@@ -1753,6 +1777,44 @@ class CIFile(
   }
 }
 
+@Serializable
+class CancelAction(
+  val uiActionId: Int,
+  val alert: AlertInfo
+)
+
+@Serializable
+class AlertInfo(
+  val titleId: Int,
+  val messageId: Int,
+  val confirmId: Int
+)
+
+private val sndCancelAction: CancelAction = CancelAction(
+  uiActionId = R.string.stop_file__action,
+  alert = AlertInfo(
+    titleId = R.string.stop_snd_file__title,
+    messageId = R.string.stop_snd_file__message,
+    confirmId = R.string.stop_file__confirm
+  )
+)
+private val revokeCancelAction: CancelAction = CancelAction(
+  uiActionId = R.string.revoke_file__action,
+  alert = AlertInfo(
+    titleId = R.string.revoke_file__title,
+    messageId = R.string.revoke_file__message,
+    confirmId = R.string.revoke_file__confirm
+  )
+)
+private val rcvCancelAction: CancelAction = CancelAction(
+  uiActionId = R.string.stop_file__action,
+  alert = AlertInfo(
+    titleId = R.string.stop_rcv_file__title,
+    messageId = R.string.stop_rcv_file__message,
+    confirmId = R.string.stop_file__confirm
+  )
+)
+
 @Serializable
 enum class FileProtocol {
   @SerialName("smp") SMP,
@@ -1765,11 +1827,13 @@ sealed class CIFileStatus {
   @Serializable @SerialName("sndTransfer") class SndTransfer(val sndProgress: Long, val sndTotal: Long): CIFileStatus()
   @Serializable @SerialName("sndComplete") object SndComplete: CIFileStatus()
   @Serializable @SerialName("sndCancelled") object SndCancelled: CIFileStatus()
+  @Serializable @SerialName("sndError") object SndError: CIFileStatus()
   @Serializable @SerialName("rcvInvitation") object RcvInvitation: CIFileStatus()
   @Serializable @SerialName("rcvAccepted") object RcvAccepted: CIFileStatus()
   @Serializable @SerialName("rcvTransfer") class RcvTransfer(val rcvProgress: Long, val rcvTotal: Long): CIFileStatus()
   @Serializable @SerialName("rcvComplete") object RcvComplete: CIFileStatus()
   @Serializable @SerialName("rcvCancelled") object RcvCancelled: CIFileStatus()
+  @Serializable @SerialName("rcvError") object RcvError: CIFileStatus()
 }
 
 @Suppress("SERIALIZER_TYPE_INCOMPATIBLE")
@@ -2044,7 +2108,11 @@ enum class CICallStatus {
   }
 }
 
-fun durationText(sec: Int): String = "%02d:%02d".format(sec / 60, sec % 60)
+fun durationText(sec: Int): String {
+  val s = sec % 60
+  val m = sec / 60
+  return if (m < 60) "%02d:%02d".format(m, s) else "%02d:%02d:%02d".format(m / 60, m % 60, s)
+}
 
 @Serializable
 sealed class MsgErrorType() {

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

@@ -18,7 +18,6 @@ val MessagePreviewDark = Color(179, 175, 174, 255)
 val MessagePreviewLight = Color(49, 45, 44, 255)
 val ToolbarLight = Color(220, 220, 220, 12)
 val ToolbarDark = Color(80, 80, 80, 12)
-val SettingsBackgroundLight = Color(220, 216, 215, 90)
 val SettingsSecondaryLight = Color(200, 196, 195, 90)
 val GroupDark = Color(80, 80, 80, 60)
 val IncomingCallLight = Color(239, 237, 236, 255)
@@ -27,3 +26,4 @@ val WarningOrange = Color(255, 127, 0, 255)
 val WarningYellow = Color(255, 192, 0, 255)
 val FileLight = Color(183, 190, 199, 255)
 val FileDark = Color(101, 101, 106, 255)
+val MenuTextColorDark = Color.White.copy(alpha = 0.8f)

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

@@ -8,4 +8,4 @@ val Shapes = Shapes(
   small = RoundedCornerShape(4.dp),
   medium = RoundedCornerShape(4.dp),
   large = RoundedCornerShape(0.dp)
-)
+)

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

@@ -2,56 +2,248 @@ package chat.simplex.app.ui.theme
 
 import android.app.UiModeManager
 import android.content.Context
+import androidx.compose.foundation.background
 import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.material.*
 import androidx.compose.runtime.*
-import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.*
 import androidx.compose.ui.unit.dp
+import chat.simplex.app.R
 import chat.simplex.app.SimplexApp
+import chat.simplex.app.views.helpers.*
 import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.serialization.SerialName
+import kotlinx.serialization.Serializable
 
 enum class DefaultTheme {
-  SYSTEM, DARK, LIGHT
+  SYSTEM, LIGHT, DARK, SIMPLEX;
+
+  // Call it only with base theme, not SYSTEM
+  fun hasChangedAnyColor(colors: Colors, appColors: AppColors): Boolean {
+    val palette = when (this) {
+      SYSTEM -> return false
+      LIGHT -> LightColorPalette
+      DARK -> DarkColorPalette
+      SIMPLEX -> SimplexColorPalette
+    }
+    val appPalette = when (this) {
+      SYSTEM -> return false
+      LIGHT -> LightColorPaletteApp
+      DARK -> DarkColorPaletteApp
+      SIMPLEX -> SimplexColorPaletteApp
+    }
+    return colors.primary != palette.primary ||
+        colors.primaryVariant != palette.primaryVariant ||
+        colors.secondary != palette.secondary ||
+        colors.secondaryVariant != palette.secondaryVariant ||
+        colors.background != palette.background ||
+        colors.surface != palette.surface ||
+        appColors != appPalette
+  }
 }
 
-val DEFAULT_PADDING = 16.dp
+data class AppColors(
+  val title: Color,
+  val sentMessage: Color,
+  val receivedMessage: Color
+)
+
+enum class ThemeColor {
+  PRIMARY, PRIMARY_VARIANT, SECONDARY, SECONDARY_VARIANT, BACKGROUND, SURFACE, TITLE, SENT_MESSAGE, RECEIVED_MESSAGE;
+
+  fun fromColors(colors: Colors, appColors: AppColors): Color {
+    return when (this) {
+      PRIMARY -> colors.primary
+      PRIMARY_VARIANT -> colors.primaryVariant
+      SECONDARY -> colors.secondary
+      SECONDARY_VARIANT -> colors.secondaryVariant
+      BACKGROUND -> colors.background
+      SURFACE -> colors.surface
+      TITLE -> appColors.title
+      SENT_MESSAGE -> appColors.sentMessage
+      RECEIVED_MESSAGE -> appColors.receivedMessage
+    }
+  }
+
+  val text: String
+    get() = when (this) {
+      PRIMARY -> generalGetString(R.string.color_primary)
+      PRIMARY_VARIANT -> generalGetString(R.string.color_primary_variant)
+      SECONDARY -> generalGetString(R.string.color_secondary)
+      SECONDARY_VARIANT -> generalGetString(R.string.color_secondary_variant)
+      BACKGROUND -> generalGetString(R.string.color_background)
+      SURFACE -> generalGetString(R.string.color_surface)
+      TITLE -> generalGetString(R.string.color_title)
+      SENT_MESSAGE -> generalGetString(R.string.color_sent_message)
+      RECEIVED_MESSAGE -> generalGetString(R.string.color_received_message)
+    }
+}
+
+@Serializable
+data class ThemeColors(
+  @SerialName("accent")
+  val primary: String? = null,
+  @SerialName("accentVariant")
+  val primaryVariant: String? = null,
+  val secondary: String? = null,
+  val secondaryVariant: String? = null,
+  val background: String? = null,
+  @SerialName("menus")
+  val surface: String? = null,
+  val title: String? = null,
+  val sentMessage: String? = null,
+  val receivedMessage: String? = null,
+) {
+  fun toColors(base: DefaultTheme): Colors {
+    val baseColors = when (base) {
+      DefaultTheme.LIGHT -> LightColorPalette
+      DefaultTheme.DARK -> DarkColorPalette
+      DefaultTheme.SIMPLEX -> SimplexColorPalette
+      // shouldn't be here
+      DefaultTheme.SYSTEM -> LightColorPalette
+    }
+    return baseColors.copy(
+      primary = primary?.colorFromReadableHex() ?: baseColors.primary,
+      primaryVariant = primaryVariant?.colorFromReadableHex() ?: baseColors.primaryVariant,
+      secondary = secondary?.colorFromReadableHex() ?: baseColors.secondary,
+      secondaryVariant = secondaryVariant?.colorFromReadableHex() ?: baseColors.secondaryVariant,
+      background = background?.colorFromReadableHex() ?: baseColors.background,
+      surface = surface?.colorFromReadableHex() ?: baseColors.surface,
+    )
+  }
+
+  fun toAppColors(base: DefaultTheme): AppColors {
+    val baseColors = when (base) {
+      DefaultTheme.LIGHT -> LightColorPaletteApp
+      DefaultTheme.DARK -> DarkColorPaletteApp
+      DefaultTheme.SIMPLEX -> SimplexColorPaletteApp
+      // shouldn't be here
+      DefaultTheme.SYSTEM -> LightColorPaletteApp
+    }
+    return baseColors.copy(
+      title = title?.colorFromReadableHex() ?: baseColors.title,
+      sentMessage = sentMessage?.colorFromReadableHex() ?: baseColors.sentMessage,
+      receivedMessage = receivedMessage?.colorFromReadableHex() ?: baseColors.receivedMessage,
+    )
+  }
+}
+
+private fun String.colorFromReadableHex(): Color =
+  Color(this.replace("#", "").toLongOrNull(16) ?: Color.White.toArgb().toLong())
+
+@Serializable
+data class ThemeOverrides (
+  val base: DefaultTheme,
+  val colors: ThemeColors
+) {
+  fun withUpdatedColor(name: ThemeColor, color: String): ThemeOverrides {
+    return copy(colors = when (name) {
+      ThemeColor.PRIMARY -> colors.copy(primary = color)
+      ThemeColor.PRIMARY_VARIANT -> colors.copy(primaryVariant = color)
+      ThemeColor.SECONDARY -> colors.copy(secondary = color)
+      ThemeColor.SECONDARY_VARIANT -> colors.copy(secondaryVariant = color)
+      ThemeColor.BACKGROUND -> colors.copy(background = color)
+      ThemeColor.SURFACE -> colors.copy(surface = color)
+      ThemeColor.TITLE -> colors.copy(title = color)
+      ThemeColor.SENT_MESSAGE -> colors.copy(sentMessage = color)
+      ThemeColor.RECEIVED_MESSAGE -> colors.copy(receivedMessage = color)
+    })
+  }
+}
+
+@Serializable
+data class ThemeData (val colors: ThemeColors)
+
+fun Modifier.themedBackground(baseTheme: DefaultTheme = CurrentColors.value.base, shape: Shape = RectangleShape): Modifier {
+  return if (baseTheme == DefaultTheme.SIMPLEX) {
+    this.background(brush = Brush.linearGradient(
+      listOf(
+        CurrentColors.value.colors.background.darker(0.4f),
+        CurrentColors.value.colors.background.lighter(0.4f)
+      ),
+      Offset(0f, Float.POSITIVE_INFINITY),
+      Offset(Float.POSITIVE_INFINITY, 0f)
+    ), shape = shape)
+  } else {
+    this.background(color = CurrentColors.value.colors.background, shape = shape)
+  }
+}
+
+val DEFAULT_PADDING = 20.dp
 val DEFAULT_SPACE_AFTER_ICON = 4.dp
 val DEFAULT_PADDING_HALF = DEFAULT_PADDING / 2
 val DEFAULT_BOTTOM_PADDING = 48.dp
+val DEFAULT_BOTTOM_BUTTON_PADDING = 20.dp
 
 val DarkColorPalette = darkColors(
   primary = SimplexBlue,  // If this value changes also need to update #0088ff in string resource files
-  primaryVariant = SimplexGreen,
-  secondary = DarkGray,
+  primaryVariant = SimplexBlue,
+  secondary = HighOrLowlight,
+  secondaryVariant = DarkGray,
 //  background = Color.Black,
-//  surface = Color.Black,
+  surface = Color(0xFF222222),
 //  background = Color(0xFF121212),
 //  surface = Color(0xFF121212),
-//  error = Color(0xFFCF6679),
+  error = Color.Red,
   onBackground = Color(0xFFFFFBFA),
   onSurface = Color(0xFFFFFBFA),
 //  onError: Color = Color.Black,
 )
+val DarkColorPaletteApp = AppColors(
+  title = SimplexBlue,
+  sentMessage = Color(0x1E45B8FF),
+  receivedMessage = Color(0x20B1B0B5)
+)
+
 val LightColorPalette = lightColors(
   primary = SimplexBlue,  // If this value changes also need to update #0088ff in string resource files
-  primaryVariant = SimplexGreen,
-  secondary = LightGray,
+  primaryVariant = SimplexBlue,
+  secondary = HighOrLowlight,
+  secondaryVariant = LightGray,
+  error = Color.Red,
 //  background = Color.White,
-//  surface = Color.White
+  surface = Color.White,
 //  onPrimary = Color.White,
 //  onSecondary = Color.Black,
 //  onBackground = Color.Black,
 //  onSurface = Color.Black,
 )
+val LightColorPaletteApp = AppColors(
+  title = SimplexBlue,
+  sentMessage = Color(0x1E45B8FF),
+  receivedMessage = Color(0x20B1B0B5)
+)
 
-val CurrentColors: MutableStateFlow<Pair<Colors, DefaultTheme>> = MutableStateFlow(ThemeManager.currentColors(isInNightMode()))
+val SimplexColorPalette = darkColors(
+  primary = Color(0xFF70F0F9),  // If this value changes also need to update #0088ff in string resource files
+  primaryVariant = Color(0xFF1298A5),
+  secondary = HighOrLowlight,
+  secondaryVariant = Color(0xFF2C464D),
+  background = Color(0xFF111528),
+  //  surface = Color.Black,
+  //  background = Color(0xFF121212),
+  surface = Color(0xFF121C37),
+  error = Color.Red,
+//  onBackground = Color(0xFFFFFBFA),
+//  onSurface = Color(0xFFFFFBFA),
+  //  onError: Color = Color.Black,
+)
+val SimplexColorPaletteApp = AppColors(
+  title = Color(0xFF267BE5),
+  sentMessage = Color(0x1E45B8FF),
+  receivedMessage = Color(0x20B1B0B5)
+)
+
+val CurrentColors: MutableStateFlow<ThemeManager.ActiveTheme> = MutableStateFlow(ThemeManager.currentColors(isInNightMode()))
 
 // Non-@Composable implementation
 private fun isInNightMode() =
   (SimplexApp.context.getSystemService(Context.UI_MODE_SERVICE) as UiModeManager).nightMode == UiModeManager.MODE_NIGHT_YES
 
 @Composable
-fun isInDarkTheme(): Boolean = !CurrentColors.collectAsState().value.first.isLight
+fun isInDarkTheme(): Boolean = !CurrentColors.collectAsState().value.colors.isLight
 
 @Composable
 fun SimpleXTheme(darkTheme: Boolean? = null, content: @Composable () -> Unit) {
@@ -62,16 +254,16 @@ fun SimpleXTheme(darkTheme: Boolean? = null, content: @Composable () -> Unit) {
   }
   val systemDark = isSystemInDarkTheme()
   LaunchedEffect(systemDark) {
-    if (CurrentColors.value.second == DefaultTheme.SYSTEM && CurrentColors.value.first.isLight == systemDark) {
+    if (SimplexApp.context.chatModel.controller.appPrefs.currentTheme.get() == DefaultTheme.SYSTEM.name && CurrentColors.value.colors.isLight == systemDark) {
       // Change active colors from light to dark and back based on system theme
       ThemeManager.applyTheme(DefaultTheme.SYSTEM.name, systemDark)
     }
   }
   val theme by CurrentColors.collectAsState()
   MaterialTheme(
-    colors = theme.first,
+    colors = theme.colors,
     typography = Typography,
     shapes = Shapes,
     content = content
   )
-}
+}

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

@@ -7,22 +7,56 @@ import chat.simplex.app.R
 import chat.simplex.app.SimplexApp
 import chat.simplex.app.model.AppPreferences
 import chat.simplex.app.views.helpers.generalGetString
+import okhttp3.internal.toHexString
 
 object ThemeManager {
   private val appPrefs: AppPreferences by lazy {
-    AppPreferences(SimplexApp.context)
+    SimplexApp.context.chatModel.controller.appPrefs
   }
 
-  fun currentColors(darkForSystemTheme: Boolean): Pair<Colors, DefaultTheme> {
-    val theme = appPrefs.currentTheme.get()!!
-    val systemThemeColors = if (darkForSystemTheme) DarkColorPalette else LightColorPalette
-    val res = when (theme) {
-      DefaultTheme.SYSTEM.name -> Pair(systemThemeColors, DefaultTheme.SYSTEM)
-      DefaultTheme.DARK.name -> Pair(DarkColorPalette, DefaultTheme.DARK)
-      DefaultTheme.LIGHT.name -> Pair(LightColorPalette, DefaultTheme.LIGHT)
-      else -> Pair(systemThemeColors, DefaultTheme.SYSTEM)
+  data class ActiveTheme(val name: String, val base: DefaultTheme, val colors: Colors, val appColors: AppColors)
+
+  private fun systemDarkThemeColors(): Pair<Colors, DefaultTheme> = when (appPrefs.systemDarkTheme.get()) {
+    DefaultTheme.DARK.name -> DarkColorPalette to DefaultTheme.DARK
+    DefaultTheme.SIMPLEX.name -> SimplexColorPalette to DefaultTheme.SIMPLEX
+    else -> SimplexColorPalette to DefaultTheme.SIMPLEX
+  }
+
+  fun currentColors(darkForSystemTheme: Boolean): ActiveTheme {
+    val themeName = appPrefs.currentTheme.get()!!
+    val themeOverrides = appPrefs.themeOverrides.get()
+
+    val nonSystemThemeName = if (themeName != DefaultTheme.SYSTEM.name) {
+      themeName
+    } else {
+      if (darkForSystemTheme) appPrefs.systemDarkTheme.get()!! else DefaultTheme.LIGHT.name
     }
-    return res.copy(first = res.first.copy(primary = Color(appPrefs.primaryColor.get())))
+    val theme = themeOverrides[nonSystemThemeName]
+    val baseTheme = when (nonSystemThemeName) {
+      DefaultTheme.LIGHT.name -> Triple(DefaultTheme.LIGHT, LightColorPalette, LightColorPaletteApp)
+      DefaultTheme.DARK.name -> Triple(DefaultTheme.DARK, DarkColorPalette, DarkColorPaletteApp)
+      DefaultTheme.SIMPLEX.name -> Triple(DefaultTheme.SIMPLEX, SimplexColorPalette, SimplexColorPaletteApp)
+      else -> Triple(DefaultTheme.LIGHT, LightColorPalette, LightColorPaletteApp)
+    }
+    if (theme == null) {
+      return ActiveTheme(themeName, baseTheme.first, baseTheme.second, baseTheme.third)
+    }
+    return ActiveTheme(themeName, baseTheme.first, theme.colors.toColors(theme.base), theme.colors.toAppColors(theme.base))
+  }
+
+  fun currentThemeData(darkForSystemTheme: Boolean): ThemeData {
+    val t = currentColors(darkForSystemTheme)
+    return ThemeData(colors = ThemeColors(
+      primary = t.colors.primary.toReadableHex(),
+      primaryVariant = t.colors.primaryVariant.toReadableHex(),
+      secondary = t.colors.secondary.toReadableHex(),
+      secondaryVariant = t.colors.secondaryVariant.toReadableHex(),
+      background = t.colors.background.toReadableHex(),
+      surface = t.colors.surface.toReadableHex(),
+      title = t.appColors.title.toReadableHex(),
+      sentMessage = t.appColors.sentMessage.toReadableHex(),
+      receivedMessage = t.appColors.receivedMessage.toReadableHex()
+    ))
   }
 
   // colors, default theme enum, localized name of theme
@@ -30,7 +64,7 @@ object ThemeManager {
     val allThemes = ArrayList<Triple<Colors, DefaultTheme, String>>()
     allThemes.add(
       Triple(
-        if (darkForSystemTheme) DarkColorPalette else LightColorPalette,
+        if (darkForSystemTheme) systemDarkThemeColors().first else LightColorPalette,
         DefaultTheme.SYSTEM,
         generalGetString(R.string.theme_system)
       )
@@ -49,16 +83,72 @@ object ThemeManager {
         generalGetString(R.string.theme_dark)
       )
     )
+    allThemes.add(
+      Triple(
+        SimplexColorPalette,
+        DefaultTheme.SIMPLEX,
+        generalGetString(R.string.theme_simplex)
+      )
+    )
     return allThemes
   }
 
-  fun applyTheme(name: String, darkForSystemTheme: Boolean) {
-    appPrefs.currentTheme.set(name)
+  fun applyTheme(theme: String, darkForSystemTheme: Boolean) {
+    appPrefs.currentTheme.set(theme)
     CurrentColors.value = currentColors(darkForSystemTheme)
   }
 
-  fun saveAndApplyPrimaryColor(color: Color) {
-    appPrefs.primaryColor.set(color.toArgb())
-    CurrentColors.value = currentColors(!CurrentColors.value.first.isLight)
+  fun changeDarkTheme(theme: String, darkForSystemTheme: Boolean) {
+    appPrefs.systemDarkTheme.set(theme)
+    CurrentColors.value = currentColors(darkForSystemTheme)
+  }
+
+  fun saveAndApplyThemeColor(name: ThemeColor, color: Color? = null, darkForSystemTheme: Boolean) {
+    val themeName = appPrefs.currentTheme.get()!!
+    val nonSystemThemeName = if (themeName != DefaultTheme.SYSTEM.name) {
+      themeName
+    } else {
+      if (darkForSystemTheme) appPrefs.systemDarkTheme.get()!! else DefaultTheme.LIGHT.name
+    }
+    var colorToSet = color
+    if (colorToSet == null) {
+      // Setting default color from a base theme
+      colorToSet = when(nonSystemThemeName) {
+        DefaultTheme.LIGHT.name -> name.fromColors(LightColorPalette, LightColorPaletteApp)
+        DefaultTheme.DARK.name -> name.fromColors(DarkColorPalette, DarkColorPaletteApp)
+        DefaultTheme.SIMPLEX.name -> name.fromColors(SimplexColorPalette, SimplexColorPaletteApp)
+        // Will not be here
+        else -> return
+      }
+    }
+    val overrides = appPrefs.themeOverrides.get().toMutableMap()
+    val prevValue = overrides[nonSystemThemeName] ?: ThemeOverrides(base = CurrentColors.value.base, colors = ThemeColors())
+    overrides[nonSystemThemeName] = prevValue.withUpdatedColor(name, colorToSet.toReadableHex())
+    appPrefs.themeOverrides.set(overrides)
+    CurrentColors.value = currentColors(!CurrentColors.value.colors.isLight)
+  }
+
+  fun saveAndApplyThemeData(name: String, theme: ThemeData, darkForSystemTheme: Boolean) {
+    val overrides = appPrefs.themeOverrides.get().toMutableMap()
+    val prevValue = overrides[name] ?: ThemeOverrides(base = CurrentColors.value.base, colors = ThemeColors())
+    overrides[name] = prevValue.copy(colors = theme.colors)
+    appPrefs.themeOverrides.set(overrides)
+    CurrentColors.value = currentColors(!CurrentColors.value.colors.isLight)
+  }
+
+  fun resetAllThemeColors(darkForSystemTheme: Boolean) {
+    val themeName = appPrefs.currentTheme.get()!!
+    val nonSystemThemeName = if (themeName != DefaultTheme.SYSTEM.name) {
+      themeName
+    } else {
+      if (darkForSystemTheme) appPrefs.systemDarkTheme.get()!! else DefaultTheme.LIGHT.name
+    }
+    val overrides = appPrefs.themeOverrides.get().toMutableMap()
+    val prevValue = overrides[nonSystemThemeName] ?: return
+    overrides[nonSystemThemeName] = prevValue.copy(colors = ThemeColors())
+    appPrefs.themeOverrides.set(overrides)
+    CurrentColors.value = currentColors(!CurrentColors.value.colors.isLight)
   }
 }
+
+private fun Color.toReadableHex(): String = "#" + toArgb().toHexString()

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

@@ -1,6 +1,5 @@
 package chat.simplex.app.views
 
-import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Surface
@@ -11,8 +10,8 @@ import androidx.compose.ui.Modifier
 fun SplashView() {
   Surface(
     Modifier
-      .background(MaterialTheme.colors.background)
-      .fillMaxSize()
+      .fillMaxSize(),
+    color = MaterialTheme.colors.background
   ) {
 //    Image(
 //      painter = painterResource(R.drawable.logo),

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

@@ -100,7 +100,7 @@ fun TerminalLayout(
         modifier = Modifier
           .padding(contentPadding)
           .fillMaxWidth()
-          .background(MaterialTheme.colors.background)
+          .themedBackground()
       ) {
         TerminalLog(terminalItems)
       }

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

@@ -6,19 +6,20 @@ import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.text.BasicTextField
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.material.*
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.outlined.ArrowBackIosNew
-import androidx.compose.material.icons.outlined.ArrowForwardIos
+import androidx.compose.material.MaterialTheme.colors
 import androidx.compose.runtime.*
+import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
-import androidx.compose.ui.focus.FocusRequester
-import androidx.compose.ui.focus.focusRequester
+import androidx.compose.ui.focus.*
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.SolidColor
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.input.KeyboardCapitalization
+import androidx.compose.ui.text.style.*
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import chat.simplex.app.*
@@ -26,61 +27,72 @@ import chat.simplex.app.R
 import chat.simplex.app.model.ChatModel
 import chat.simplex.app.model.Profile
 import chat.simplex.app.ui.theme.*
-import chat.simplex.app.views.helpers.AppBarTitle
-import chat.simplex.app.views.helpers.withApi
+import chat.simplex.app.views.helpers.*
 import chat.simplex.app.views.onboarding.OnboardingStage
 import chat.simplex.app.views.onboarding.ReadableText
 import com.google.accompanist.insets.navigationBarsWithImePadding
 import kotlinx.coroutines.delay
+import kotlinx.coroutines.flow.distinctUntilChanged
 
 fun isValidDisplayName(name: String) : Boolean {
-  return (name.firstOrNull { it.isWhitespace() }) == null
+  return (name.firstOrNull { it.isWhitespace() }) == null && !name.startsWith("@") && !name.startsWith("#")
 }
 
 @Composable
 fun CreateProfilePanel(chatModel: ChatModel, close: () -> Unit) {
-  val displayName = remember { mutableStateOf("") }
-  val fullName = remember { mutableStateOf("") }
+  val displayName = rememberSaveable { mutableStateOf("") }
+  val fullName = rememberSaveable { mutableStateOf("") }
   val focusRequester = remember { FocusRequester() }
 
   Surface(Modifier.background(MaterialTheme.colors.onBackground)) {
     Column(
       modifier = Modifier.fillMaxSize().verticalScroll(rememberScrollState())
     ) {
-      AppBarTitle(stringResource(R.string.create_profile), false)
-      ReadableText(R.string.your_profile_is_stored_on_your_device)
-      ReadableText(R.string.profile_is_only_shared_with_your_contacts)
-      Spacer(Modifier.height(10.dp))
-      Text(
-        stringResource(R.string.display_name),
-        style = MaterialTheme.typography.h6,
-        modifier = Modifier.padding(bottom = 3.dp)
-      )
-      ProfileNameField(displayName, focusRequester)
-      val errorText = if (!isValidDisplayName(displayName.value)) stringResource(R.string.display_name_cannot_contain_whitespace) else ""
-      Text(
-        errorText,
-        fontSize = 15.sp,
-        color = MaterialTheme.colors.error
-      )
-      Spacer(Modifier.height(3.dp))
-      Text(
-        stringResource(R.string.full_name_optional__prompt),
-        style = MaterialTheme.typography.h6,
-        modifier = Modifier.padding(bottom = 5.dp)
-      )
-      ProfileNameField(fullName)
+      /*CloseSheetBar(close = {
+        if (chatModel.users.isEmpty()) {
+          chatModel.onboardingStage.value = OnboardingStage.Step1_SimpleXInfo
+        } else {
+          close()
+        }
+      })*/
+      Column(Modifier.padding(horizontal = DEFAULT_PADDING * 1f)) {
+        AppBarTitle(stringResource(R.string.create_profile))
+        ReadableText(R.string.your_profile_is_stored_on_your_device, TextAlign.Center, padding = PaddingValues())
+        ReadableText(R.string.profile_is_only_shared_with_your_contacts, TextAlign.Center)
+        Spacer(Modifier.height(DEFAULT_PADDING * 1.5f))
+        Row(Modifier.padding(bottom = DEFAULT_PADDING_HALF).fillMaxWidth(), horizontalArrangement = Arrangement.SpaceBetween) {
+          Text(
+            stringResource(R.string.display_name),
+            fontSize = 16.sp
+          )
+          if (!isValidDisplayName(displayName.value)) {
+            Text(
+              stringResource(R.string.no_spaces),
+              fontSize = 16.sp,
+              color = Color.Red
+            )
+          }
+        }
+        ProfileNameField(displayName, "", ::isValidDisplayName, focusRequester)
+        Spacer(Modifier.height(DEFAULT_PADDING))
+        Text(
+          stringResource(R.string.full_name_optional__prompt),
+          fontSize = 16.sp,
+          modifier = Modifier.padding(bottom = DEFAULT_PADDING_HALF)
+        )
+        ProfileNameField(fullName, "", ::isValidDisplayName)
+      }
       Spacer(Modifier.fillMaxHeight().weight(1f))
       Row {
         if (chatModel.users.isEmpty()) {
-          SimpleButton(
+          SimpleButtonDecorated(
             text = stringResource(R.string.about_simplex),
-            icon = Icons.Outlined.ArrowBackIosNew
+            icon = painterResource(R.drawable.ic_arrow_back_ios_new),
+            textDecoration = TextDecoration.None,
+            fontWeight = FontWeight.Medium
           ) { chatModel.onboardingStage.value = OnboardingStage.Step1_SimpleXInfo }
         }
-
         Spacer(Modifier.fillMaxWidth().weight(1f))
-
         val enabled = displayName.value.isNotEmpty() && isValidDisplayName(displayName.value)
         val createModifier: Modifier
         val createColor: Color
@@ -89,12 +101,12 @@ fun CreateProfilePanel(chatModel: ChatModel, close: () -> Unit) {
           createColor = MaterialTheme.colors.primary
         } else {
           createModifier = Modifier.padding(8.dp)
-          createColor = HighOrLowlight
+          createColor = MaterialTheme.colors.secondary
         }
         Surface(shape = RoundedCornerShape(20.dp)) {
           Row(verticalAlignment = Alignment.CenterVertically, modifier = createModifier) {
-            Text(stringResource(R.string.create_profile_button), style = MaterialTheme.typography.caption, color = createColor)
-            Icon(Icons.Outlined.ArrowForwardIos, stringResource(R.string.create_profile_button), tint = createColor)
+            Text(stringResource(R.string.create_profile_button), style = MaterialTheme.typography.caption, color = createColor, fontWeight = FontWeight.Medium)
+            Icon(painterResource(R.drawable.ic_arrow_forward_ios), stringResource(R.string.create_profile_button), tint = createColor)
           }
         }
       }
@@ -128,24 +140,50 @@ fun createProfile(chatModel: ChatModel, displayName: String, fullName: String, c
 }
 
 @Composable
-fun ProfileNameField(name: MutableState<String>, focusRequester: FocusRequester? = null) {
+fun ProfileNameField(name: MutableState<String>, placeholder: String = "", isValid: (String) -> Boolean = { true }, focusRequester: FocusRequester? = null) {
+  var valid by rememberSaveable { mutableStateOf(true) }
+  var focused by rememberSaveable { mutableStateOf(false) }
+  val strokeColor by remember {
+    derivedStateOf {
+      if (valid) {
+        if (focused) {
+          CurrentColors.value.colors.secondary.copy(alpha = 0.6f)
+        } else {
+          CurrentColors.value.colors.secondary.copy(alpha = 0.3f)
+        }
+      } else Color.Red
+    }
+  }
   val modifier = Modifier
     .fillMaxWidth()
-    .background(MaterialTheme.colors.secondary)
-    .height(40.dp)
-    .clip(RoundedCornerShape(5.dp))
-    .padding(8.dp)
+    .padding(horizontal = DEFAULT_PADDING)
     .navigationBarsWithImePadding()
-  BasicTextField(
-    value = name.value,
-    onValueChange = { name.value = it },
-    modifier = if (focusRequester == null) modifier else modifier.focusRequester(focusRequester),
-    textStyle = MaterialTheme.typography.body1.copy(color = MaterialTheme.colors.onBackground),
-    keyboardOptions = KeyboardOptions(
-      capitalization = KeyboardCapitalization.None,
-      autoCorrect = false
-    ),
-    singleLine = true,
-    cursorBrush = SolidColor(HighOrLowlight)
-  )
-}
+    .onFocusChanged { focused = it.isFocused }
+  Box(
+    Modifier
+      .fillMaxWidth()
+      .height(52.dp)
+      .border(border = BorderStroke(1.dp, strokeColor), shape = RoundedCornerShape(50)),
+    contentAlignment = Alignment.Center
+  ) {
+    BasicTextField(
+      value = name.value,
+      onValueChange = { name.value = it },
+      modifier = if (focusRequester == null) modifier else modifier.focusRequester(focusRequester),
+      textStyle = TextStyle(fontSize = 18.sp, color = colors.onBackground),
+      keyboardOptions = KeyboardOptions(
+        capitalization = KeyboardCapitalization.None,
+        autoCorrect = false
+      ),
+      singleLine = true,
+      cursorBrush = SolidColor(MaterialTheme.colors.secondary)
+    )
+  }
+  LaunchedEffect(Unit) {
+    snapshotFlow { name.value }
+      .distinctUntilChanged()
+      .collect {
+        valid = isValid(it)
+      }
+  }
+}

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

@@ -106,4 +106,4 @@ class CallManager(val chatModel: ChatModel) {
       chatModel.controller.ntfManager.cancelCallNotification()
     }
   }
-}
+}

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

@@ -16,17 +16,15 @@ import androidx.activity.compose.BackHandler
 import androidx.annotation.StringRes
 import androidx.compose.foundation.layout.*
 import androidx.compose.material.*
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.*
-import androidx.compose.material.icons.outlined.*
 import androidx.compose.runtime.*
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalLifecycleOwner
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.tooling.preview.Preview
@@ -263,7 +261,7 @@ private fun ActiveCallOverlayLayout(
   toggleSound: () -> Unit,
   flipCamera: () -> Unit
 ) {
-  Column(Modifier.padding(16.dp)) {
+  Column(Modifier.padding(DEFAULT_PADDING)) {
     when (call.peerMedia ?: call.localMedia) {
       CallMediaType.Video -> {
         CallInfoView(call, alignment = Alignment.Start)
@@ -272,14 +270,14 @@ private fun ActiveCallOverlayLayout(
           ToggleAudioButton(call, toggleAudio)
           Spacer(Modifier.size(40.dp))
           IconButton(onClick = dismiss) {
-            Icon(Icons.Filled.CallEnd, stringResource(R.string.icon_descr_hang_up), tint = Color.Red, modifier = Modifier.size(64.dp))
+            Icon(painterResource(R.drawable.ic_call_end_filled), stringResource(R.string.icon_descr_hang_up), tint = Color.Red, modifier = Modifier.size(64.dp))
           }
           if (call.videoEnabled) {
-            ControlButton(call, Icons.Filled.FlipCameraAndroid, R.string.icon_descr_flip_camera, flipCamera)
-            ControlButton(call, Icons.Filled.Videocam, R.string.icon_descr_video_off, toggleVideo)
+            ControlButton(call, painterResource(R.drawable.ic_flip_camera_android_filled), R.string.icon_descr_flip_camera, flipCamera)
+            ControlButton(call, painterResource(R.drawable.ic_videocam_filled), R.string.icon_descr_video_off, toggleVideo)
           } else {
             Spacer(Modifier.size(48.dp))
-            ControlButton(call, Icons.Outlined.VideocamOff, R.string.icon_descr_video_on, toggleVideo)
+            ControlButton(call, painterResource(R.drawable.ic_videocam_off), R.string.icon_descr_video_on, toggleVideo)
           }
         }
       }
@@ -297,7 +295,7 @@ private fun ActiveCallOverlayLayout(
         Box(Modifier.fillMaxWidth().padding(bottom = DEFAULT_BOTTOM_PADDING), contentAlignment = Alignment.CenterStart) {
           Box(Modifier.fillMaxWidth(), contentAlignment = Alignment.Center) {
             IconButton(onClick = dismiss) {
-              Icon(Icons.Filled.CallEnd, stringResource(R.string.icon_descr_hang_up), tint = Color.Red, modifier = Modifier.size(64.dp))
+              Icon(painterResource(R.drawable.ic_call_end_filled), stringResource(R.string.icon_descr_hang_up), tint = Color.Red, modifier = Modifier.size(64.dp))
             }
           }
           Box(Modifier.padding(start = 32.dp)) {
@@ -315,10 +313,10 @@ private fun ActiveCallOverlayLayout(
 }
 
 @Composable
-private fun ControlButton(call: Call, icon: ImageVector, @StringRes iconText: Int, action: () -> Unit, enabled: Boolean = true) {
+private fun ControlButton(call: Call, icon: Painter, @StringRes iconText: Int, action: () -> Unit, enabled: Boolean = true) {
   if (call.hasMedia) {
     IconButton(onClick = action, enabled = enabled) {
-      Icon(icon, stringResource(iconText), tint = if (enabled) Color(0xFFFFFFD8) else HighOrLowlight, modifier = Modifier.size(40.dp))
+      Icon(icon, stringResource(iconText), tint = if (enabled) Color(0xFFFFFFD8) else MaterialTheme.colors.secondary, modifier = Modifier.size(40.dp))
     }
   } else {
     Spacer(Modifier.size(40.dp))
@@ -328,18 +326,18 @@ private fun ControlButton(call: Call, icon: ImageVector, @StringRes iconText: In
 @Composable
 private fun ToggleAudioButton(call: Call, toggleAudio: () -> Unit) {
   if (call.audioEnabled) {
-    ControlButton(call, Icons.Outlined.Mic, R.string.icon_descr_audio_off, toggleAudio)
+    ControlButton(call, painterResource(R.drawable.ic_mic), R.string.icon_descr_audio_off, toggleAudio)
   } else {
-    ControlButton(call, Icons.Outlined.MicOff, R.string.icon_descr_audio_on, toggleAudio)
+    ControlButton(call, painterResource(R.drawable.ic_mic_off), R.string.icon_descr_audio_on, toggleAudio)
   }
 }
 
 @Composable
 private fun ToggleSoundButton(call: Call, enabled: Boolean, toggleSound: () -> Unit) {
   if (call.soundSpeaker) {
-    ControlButton(call, Icons.Outlined.VolumeUp, R.string.icon_descr_speaker_off, toggleSound, enabled)
+    ControlButton(call, painterResource(R.drawable.ic_volume_up), R.string.icon_descr_speaker_off, toggleSound, enabled)
   } else {
-    ControlButton(call, Icons.Outlined.VolumeDown, R.string.icon_descr_speaker_on, toggleSound, enabled)
+    ControlButton(call, painterResource(R.drawable.ic_volume_down), R.string.icon_descr_speaker_on, toggleSound, enabled)
   }
 }
 
@@ -369,7 +367,7 @@ fun CallInfoView(call: Call, alignment: Alignment.Horizontal) {
 //    horizontalAlignment = Alignment.CenterHorizontally,
 //    verticalArrangement = Arrangement.spacedBy(12.dp),
 //    modifier = Modifier
-//      .background(MaterialTheme.colors.background)
+//      .themedBackground()
 //      .fillMaxSize()
 //  ) {
 //    WebRTCView(callCommand) { apiMsg ->

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

@@ -12,19 +12,19 @@ import android.view.WindowManager
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
 import androidx.activity.viewModels
+import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.*
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.*
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.scale
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
@@ -36,7 +36,6 @@ import chat.simplex.app.model.*
 import chat.simplex.app.model.NtfManager.Companion.OpenChatAction
 import chat.simplex.app.ui.theme.*
 import chat.simplex.app.views.helpers.ProfileImage
-import chat.simplex.app.views.onboarding.SimpleXLogo
 import kotlinx.datetime.Clock
 
 class IncomingCallActivity: ComponentActivity() {
@@ -98,7 +97,7 @@ fun IncomingCallActivityView(m: ChatModel) {
   SimpleXTheme {
     Surface(
       Modifier
-        .background(MaterialTheme.colors.background)
+        .themedBackground()
         .fillMaxSize()) {
       if (showCallView) {
         Box {
@@ -170,24 +169,35 @@ fun IncomingCallLockScreenAlertLayout(
       Text(invitation.contact.chatViewName, style = MaterialTheme.typography.h2)
       Spacer(Modifier.fillMaxHeight().weight(1f))
       Row {
-        LockScreenCallButton(stringResource(R.string.reject), Icons.Filled.CallEnd, Color.Red, rejectCall)
+        LockScreenCallButton(stringResource(R.string.reject), painterResource(R.drawable.ic_call_end_filled), Color.Red, rejectCall)
         Spacer(Modifier.size(48.dp))
-        LockScreenCallButton(stringResource(R.string.ignore), Icons.Filled.Close, MaterialTheme.colors.primary, ignoreCall)
+        LockScreenCallButton(stringResource(R.string.ignore), painterResource(R.drawable.ic_close), MaterialTheme.colors.primary, ignoreCall)
         Spacer(Modifier.size(48.dp))
-        LockScreenCallButton(stringResource(R.string.accept), Icons.Filled.Check, SimplexGreen, acceptCall)
+        LockScreenCallButton(stringResource(R.string.accept), painterResource(R.drawable.ic_check_filled), SimplexGreen, acceptCall)
       }
     } else if (callOnLockScreen == CallOnLockScreen.SHOW) {
       SimpleXLogo()
       Text(stringResource(R.string.open_simplex_chat_to_accept_call), textAlign = TextAlign.Center, lineHeight = 22.sp)
       Text(stringResource(R.string.allow_accepting_calls_from_lock_screen), textAlign = TextAlign.Center, style = MaterialTheme.typography.body2, lineHeight = 22.sp)
       Spacer(Modifier.fillMaxHeight().weight(1f))
-      SimpleButton(text = stringResource(R.string.open_verb), icon = Icons.Filled.Check, click = openApp)
+      SimpleButton(text = stringResource(R.string.open_verb), icon = painterResource(R.drawable.ic_check_filled), click = openApp)
     }
   }
 }
 
 @Composable
-private fun LockScreenCallButton(text: String, icon: ImageVector, color: Color, action: () -> Unit) {
+private fun SimpleXLogo() {
+  Image(
+    painter = painterResource(if (isInDarkTheme()) R.drawable.logo_light else R.drawable.logo),
+    contentDescription = stringResource(R.string.image_descr_simplex_logo),
+    modifier = Modifier
+      .padding(vertical = DEFAULT_PADDING)
+      .fillMaxWidth(0.80f)
+  )
+}
+
+@Composable
+private fun LockScreenCallButton(text: String, icon: Painter, color: Color, action: () -> Unit) {
   Surface(
     shape = RoundedCornerShape(10.dp),
     color = Color.Transparent
@@ -201,8 +211,8 @@ private fun LockScreenCallButton(text: String, icon: ImageVector, color: Color,
       IconButton(action) {
         Icon(icon, text, tint = color, modifier = Modifier.scale(1.75f))
       }
-      Spacer(Modifier.height(16.dp))
-      Text(text, style = MaterialTheme.typography.body2, color = HighOrLowlight)
+      Spacer(Modifier.height(DEFAULT_PADDING))
+      Text(text, style = MaterialTheme.typography.body2, color = MaterialTheme.colors.secondary)
     }
   }
 }
@@ -216,7 +226,7 @@ fun PreviewIncomingCallLockScreenAlert() {
   SimpleXTheme(true) {
     Surface(
       Modifier
-        .background(MaterialTheme.colors.background)
+        .themedBackground()
         .fillMaxSize()) {
       IncomingCallLockScreenAlertLayout(
         invitation = RcvCallInvitation(

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

@@ -4,15 +4,14 @@ import androidx.compose.foundation.*
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.*
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.*
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.scale
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
@@ -52,7 +51,7 @@ fun IncomingCallAlertLayout(
   acceptCall: () -> Unit
 ) {
   val color = if (isInDarkTheme()) IncomingCallDark else IncomingCallLight
-  Column(Modifier.fillMaxWidth().background(color).padding(top = 16.dp, bottom = 16.dp, start = 16.dp, end = 8.dp)) {
+  Column(Modifier.fillMaxWidth().background(color).padding(top = DEFAULT_PADDING, bottom = DEFAULT_PADDING, start = DEFAULT_PADDING, end = 8.dp)) {
     IncomingCallInfo(invitation, chatModel)
     Spacer(Modifier.height(8.dp))
     Row(Modifier.fillMaxWidth(), verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.SpaceBetween) {
@@ -60,9 +59,9 @@ fun IncomingCallAlertLayout(
         ProfilePreview(profileOf = invitation.contact, size = 64.dp, color = Color.White)
       }
       Row(verticalAlignment = Alignment.CenterVertically) {
-        CallButton(stringResource(R.string.reject), Icons.Filled.CallEnd, Color.Red, rejectCall)
-        CallButton(stringResource(R.string.ignore), Icons.Filled.Close, MaterialTheme.colors.primary, ignoreCall)
-        CallButton(stringResource(R.string.accept), Icons.Filled.Check, SimplexGreen, acceptCall)
+        CallButton(stringResource(R.string.reject), painterResource(R.drawable.ic_call_end_filled), Color.Red, rejectCall)
+        CallButton(stringResource(R.string.ignore), painterResource(R.drawable.ic_close), MaterialTheme.colors.primary, ignoreCall)
+        CallButton(stringResource(R.string.accept), painterResource(R.drawable.ic_check_filled), SimplexGreen, acceptCall)
       }
     }
   }
@@ -70,21 +69,21 @@ fun IncomingCallAlertLayout(
 
 @Composable
 fun IncomingCallInfo(invitation: RcvCallInvitation, chatModel: ChatModel) {
-  @Composable fun CallIcon(icon: ImageVector, descr: String) = Icon(icon, descr, tint = SimplexGreen)
+  @Composable fun CallIcon(icon: Painter, descr: String) = Icon(icon, descr, tint = SimplexGreen)
   Row(verticalAlignment = Alignment.CenterVertically) {
     if (chatModel.users.size > 1) {
-      ProfileImage(size = 32.dp, image = invitation.user.profile.image, color = MaterialTheme.colors.secondary)
+      ProfileImage(size = 32.dp, image = invitation.user.profile.image, color = MaterialTheme.colors.secondaryVariant)
       Spacer(Modifier.width(4.dp))
     }
-    if (invitation.callType.media == CallMediaType.Video) CallIcon(Icons.Filled.Videocam, stringResource(R.string.icon_descr_video_call))
-    else CallIcon(Icons.Filled.Phone, stringResource(R.string.icon_descr_audio_call))
+    if (invitation.callType.media == CallMediaType.Video) CallIcon(painterResource(R.drawable.ic_videocam_filled), stringResource(R.string.icon_descr_video_call))
+    else CallIcon(painterResource(R.drawable.ic_call_filled), stringResource(R.string.icon_descr_audio_call))
     Spacer(Modifier.width(4.dp))
     Text(invitation.callTypeText)
   }
 }
 
 @Composable
-private fun CallButton(text: String, icon: ImageVector, color: Color, action: () -> Unit) {
+private fun CallButton(text: String, icon: Painter, color: Color, action: () -> Unit) {
   Surface(
     shape = RoundedCornerShape(10.dp),
     color = Color.Transparent
@@ -97,7 +96,7 @@ private fun CallButton(text: String, icon: ImageVector, color: Color, action: ()
       horizontalAlignment = Alignment.CenterHorizontally
     ) {
       Icon(icon, text, tint = color, modifier = Modifier.scale(1.2f))
-      Text(text, style = MaterialTheme.typography.body2, color = HighOrLowlight)
+      Text(text, style = MaterialTheme.typography.body2, color = MaterialTheme.colors.secondary)
     }
   }
 }

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

@@ -48,4 +48,4 @@ class SoundPlayer {
   companion object {
     val shared = SoundPlayer()
   }
-}
+}

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

@@ -2,7 +2,8 @@ package chat.simplex.app.views.chat
 
 import InfoRow
 import InfoRowEllipsis
-import SectionDivider
+import SectionBottomSpacer
+import SectionDividerSpaced
 import SectionItemView
 import SectionSpacer
 import SectionView
@@ -12,9 +13,6 @@ import androidx.compose.foundation.*
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.material.*
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.*
-import androidx.compose.material.icons.outlined.*
 import androidx.compose.runtime.*
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.ui.Alignment
@@ -22,6 +20,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.ClipboardManager
 import androidx.compose.ui.platform.LocalClipboardManager
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.AnnotatedString
 import androidx.compose.ui.text.TextStyle
@@ -112,7 +111,7 @@ fun ChatInfoView(
 }
 
 fun deleteContactDialog(chatInfo: ChatInfo, chatModel: ChatModel, close: (() -> Unit)? = null) {
-  AlertManager.shared.showAlertMsg(
+  AlertManager.shared.showAlertDialog(
     title = generalGetString(R.string.delete_contact_question),
     text = generalGetString(R.string.delete_contact_all_messages_deleted_cannot_undo_warning),
     confirmText = generalGetString(R.string.delete_verb),
@@ -126,12 +125,13 @@ fun deleteContactDialog(chatInfo: ChatInfo, chatModel: ChatModel, close: (() ->
           close?.invoke()
         }
       }
-    }
+    },
+    destructive = true,
   )
 }
 
 fun clearChatDialog(chatInfo: ChatInfo, chatModel: ChatModel, close: (() -> Unit)? = null) {
-  AlertManager.shared.showAlertMsg(
+  AlertManager.shared.showAlertDialog(
     title = generalGetString(R.string.clear_chat_question),
     text = generalGetString(R.string.clear_chat_warning),
     confirmText = generalGetString(R.string.clear_verb),
@@ -144,7 +144,8 @@ fun clearChatDialog(chatInfo: ChatInfo, chatModel: ChatModel, close: (() -> Unit
           close?.invoke()
         }
       }
-    }
+    },
+    destructive = true,
   )
 }
 
@@ -168,8 +169,7 @@ fun ChatInfoLayout(
   Column(
     Modifier
       .fillMaxWidth()
-      .verticalScroll(rememberScrollState()),
-    horizontalAlignment = Alignment.Start
+      .verticalScroll(rememberScrollState())
   ) {
     Row(
       Modifier.fillMaxWidth(),
@@ -179,28 +179,25 @@ fun ChatInfoLayout(
     }
 
     LocalAliasEditor(localAlias, updateValue = onLocalAliasChanged)
-
+    SectionSpacer()
     if (customUserProfile != null) {
-      SectionSpacer()
       SectionView(generalGetString(R.string.incognito).uppercase()) {
         InfoRow(generalGetString(R.string.incognito_random_profile), customUserProfile.chatViewName)
       }
+      SectionDividerSpaced()
     }
 
-    SectionSpacer()
     SectionView {
       if (connectionCode != null) {
         VerifyCodeButton(contact.verified, verifyClicked)
-        SectionDivider()
       }
       ContactPreferencesButton(openPreferences)
     }
 
-    SectionSpacer()
+    SectionDividerSpaced()
 
     SectionView(title = stringResource(R.string.conn_stats_section_title_servers)) {
       SwitchAddressButton(switchContactAddress)
-      SectionDivider()
       if (connStats != null) {
         SectionItemView({
           AlertManager.shared.showAlertMsg(
@@ -211,32 +208,28 @@ fun ChatInfoLayout(
         }
         val rcvServers = connStats.rcvServers
         if (rcvServers != null && rcvServers.isNotEmpty()) {
-          SectionDivider()
           SimplexServers(stringResource(R.string.receiving_via), rcvServers)
         }
         val sndServers = connStats.sndServers
         if (sndServers != null && sndServers.isNotEmpty()) {
-          SectionDivider()
           SimplexServers(stringResource(R.string.sending_via), sndServers)
         }
       }
     }
-    SectionSpacer()
+    SectionDividerSpaced()
     SectionView {
       ClearChatButton(clearChat)
-      SectionDivider()
       DeleteContactButton(deleteContact)
     }
-    SectionSpacer()
 
     if (developerTools) {
+      SectionDividerSpaced()
       SectionView(title = stringResource(R.string.section_title_for_console)) {
         InfoRow(stringResource(R.string.info_row_local_name), chat.chatInfo.localDisplayName)
-        SectionDivider()
         InfoRow(stringResource(R.string.info_row_database_id), chat.chatInfo.apiId.toString())
       }
-      SectionSpacer()
     }
+    SectionBottomSpacer()
   }
 }
 
@@ -249,7 +242,7 @@ fun ChatInfoHeader(cInfo: ChatInfo, contact: Contact) {
     ChatInfoImage(cInfo, size = 192.dp, iconColor = if (isInDarkTheme()) GroupDark else SettingsSecondaryLight)
     Row(Modifier.padding(bottom = 8.dp), verticalAlignment = Alignment.CenterVertically) {
       if (contact.verified) {
-        Icon(Icons.Outlined.VerifiedUser, null, Modifier.padding(end = 6.dp, top = 4.dp).size(24.dp), tint = HighOrLowlight)
+        Icon(painterResource(R.drawable.ic_verified_user), null, Modifier.padding(end = 6.dp, top = 4.dp).size(24.dp), tint = MaterialTheme.colors.secondary)
       }
       Text(
         contact.profile.displayName, style = MaterialTheme.typography.h1.copy(fontWeight = FontWeight.Normal),
@@ -290,13 +283,13 @@ fun LocalAliasEditor(
         Text(
           generalGetString(R.string.text_field_set_contact_placeholder),
           textAlign = if (center) TextAlign.Center else TextAlign.Start,
-          color = HighOrLowlight
+          color = MaterialTheme.colors.secondary
         )
       },
       leadingIcon = if (leadingIcon) {
-        { Icon(Icons.Default.Edit, null, Modifier.padding(start = 7.dp)) }
+        { Icon(painterResource(R.drawable.ic_edit_filled), null, Modifier.padding(start = 7.dp)) }
       } else null,
-      color = HighOrLowlight,
+      color = MaterialTheme.colors.secondary,
       focus = focus,
       textStyle = TextStyle.Default.copy(textAlign = if (value.isEmpty() || !center) TextAlign.Start else TextAlign.Center),
       keyboardActions = KeyboardActions(onDone = { updateValue(value) })
@@ -331,7 +324,7 @@ private fun NetworkStatusRow(networkStatus: NetworkStatus) {
     ) {
       Text(stringResource(R.string.network_status))
       Icon(
-        Icons.Outlined.Info,
+        painterResource(R.drawable.ic_info),
         stringResource(R.string.network_status),
         tint = MaterialTheme.colors.primary
       )
@@ -343,7 +336,7 @@ private fun NetworkStatusRow(networkStatus: NetworkStatus) {
     ) {
       Text(
         networkStatus.statusString,
-        color = HighOrLowlight
+        color = MaterialTheme.colors.secondary
       )
       ServerImage(networkStatus)
     }
@@ -355,12 +348,12 @@ private fun ServerImage(networkStatus: NetworkStatus) {
   Box(Modifier.size(18.dp)) {
     when (networkStatus) {
       is NetworkStatus.Connected ->
-        Icon(Icons.Filled.Circle, stringResource(R.string.icon_descr_server_status_connected), tint = MaterialTheme.colors.primaryVariant)
+        Icon(painterResource(R.drawable.ic_circle_filled), stringResource(R.string.icon_descr_server_status_connected), tint = MaterialTheme.colors.primaryVariant)
       is NetworkStatus.Disconnected ->
-        Icon(Icons.Filled.Pending, stringResource(R.string.icon_descr_server_status_disconnected), tint = HighOrLowlight)
+        Icon(painterResource(R.drawable.ic_pending_filled), stringResource(R.string.icon_descr_server_status_disconnected), tint = MaterialTheme.colors.secondary)
       is NetworkStatus.Error ->
-        Icon(Icons.Filled.Error, stringResource(R.string.icon_descr_server_status_error), tint = HighOrLowlight)
-      else -> Icon(Icons.Outlined.Circle, stringResource(R.string.icon_descr_server_status_pending), tint = HighOrLowlight)
+        Icon(painterResource(R.drawable.ic_error_filled), stringResource(R.string.icon_descr_server_status_error), tint = MaterialTheme.colors.secondary)
+      else -> Icon(painterResource(R.drawable.ic_circle), stringResource(R.string.icon_descr_server_status_pending), tint = MaterialTheme.colors.secondary)
     }
   }
 }
@@ -385,17 +378,17 @@ fun SwitchAddressButton(onClick: () -> Unit) {
 @Composable
 fun VerifyCodeButton(contactVerified: Boolean, onClick: () -> Unit) {
   SettingsActionItem(
-    if (contactVerified) Icons.Outlined.VerifiedUser else Icons.Outlined.Shield,
+    if (contactVerified) painterResource(R.drawable.ic_verified_user) else painterResource(R.drawable.ic_shield),
     stringResource(if (contactVerified) R.string.view_security_code else R.string.verify_security_code),
     click = onClick,
-    iconColor = HighOrLowlight,
+    iconColor = MaterialTheme.colors.secondary,
   )
 }
 
 @Composable
 private fun ContactPreferencesButton(onClick: () -> Unit) {
   SettingsActionItem(
-    Icons.Outlined.ToggleOn,
+    painterResource(R.drawable.ic_toggle_on),
     stringResource(R.string.contact_preferences),
     click = onClick
   )
@@ -404,7 +397,7 @@ private fun ContactPreferencesButton(onClick: () -> Unit) {
 @Composable
 fun ClearChatButton(onClick: () -> Unit) {
   SettingsActionItem(
-    Icons.Outlined.Restore,
+    painterResource(R.drawable.ic_settings_backup_restore),
     stringResource(R.string.clear_chat_button),
     click = onClick,
     textColor = WarningOrange,
@@ -415,7 +408,7 @@ fun ClearChatButton(onClick: () -> Unit) {
 @Composable
 private fun DeleteContactButton(onClick: () -> Unit) {
   SettingsActionItem(
-    Icons.Outlined.Delete,
+    painterResource(R.drawable.ic_delete),
     stringResource(R.string.button_delete_contact),
     click = onClick,
     textColor = Color.Red,
@@ -430,13 +423,14 @@ private fun setContactAlias(contactApiId: Long, localAlias: String, chatModel: C
 }
 
 private fun showSwitchContactAddressAlert(m: ChatModel, contactId: Long) {
-  AlertManager.shared.showAlertMsg(
+  AlertManager.shared.showAlertDialog(
     title = generalGetString(R.string.switch_receiving_address_question),
     text = generalGetString(R.string.switch_receiving_address_desc),
     confirmText = generalGetString(R.string.switch_verb),
     onConfirm = {
       switchContactAddress(m, contactId)
-    }
+    },
+    destructive = true,
   )
 }
 

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

@@ -1,6 +1,5 @@
 package chat.simplex.app.views.chat
 
-import android.app.Activity
 import android.content.res.Configuration
 import android.graphics.Bitmap
 import android.net.Uri
@@ -13,9 +12,6 @@ import androidx.compose.foundation.lazy.*
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.*
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.*
-import androidx.compose.material.icons.outlined.*
 import androidx.compose.runtime.*
 import androidx.compose.runtime.saveable.mapSaver
 import androidx.compose.runtime.saveable.rememberSaveable
@@ -24,6 +20,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.*
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.capitalize
 import androidx.compose.ui.text.font.FontWeight
@@ -134,7 +131,6 @@ fun ChatView(chatId: String, chatModel: ChatModel, onComposed: () -> Unit) {
       searchText,
       useLinkPreviews = useLinkPreviews,
       linkMode = chatModel.simplexLinkMode.value,
-      allowVideoAttachment = chatModel.controller.appPrefs.xftpSendEnabled.get(),
       chatModelIncognito = chatModel.incognito.value,
       back = {
         hideKeyboard(view)
@@ -308,7 +304,6 @@ fun ChatLayout(
   searchValue: State<String>,
   useLinkPreviews: Boolean,
   linkMode: SimplexLinkMode,
-  allowVideoAttachment: Boolean,
   chatModelIncognito: Boolean,
   back: () -> Unit,
   info: () -> Unit,
@@ -331,7 +326,7 @@ fun ChatLayout(
   Box(
     Modifier
       .fillMaxWidth()
-      .background(MaterialTheme.colors.background)
+      .themedBackground()
   ) {
     ProvideWindowInsets(windowInsetsAnimationsEnabled = true) {
       ModalBottomSheetLayout(
@@ -340,7 +335,6 @@ fun ChatLayout(
         sheetContent = {
           ChooseAttachmentView(
             attachmentOption,
-            allowVideoAttachment,
             hide = { scope.launch { attachmentBottomSheetState.hide() } }
           )
         },
@@ -382,7 +376,7 @@ fun ChatInfoToolbar(
   onSearchValueChanged: (String) -> Unit,
 ) {
   val scope = rememberCoroutineScope()
-  var showMenu by rememberSaveable { mutableStateOf(false) }
+  val showMenu = rememberSaveable { mutableStateOf(false) }
   var showSearch by rememberSaveable { mutableStateOf(false) }
   val onBackClicked = {
     if (!showSearch) {
@@ -396,34 +390,34 @@ fun ChatInfoToolbar(
   val barButtons = arrayListOf<@Composable RowScope.() -> Unit>()
   val menuItems = arrayListOf<@Composable () -> Unit>()
   menuItems.add {
-    ItemAction(stringResource(android.R.string.search_go).capitalize(Locale.current), Icons.Outlined.Search, onClick = {
-      showMenu = false
+    ItemAction(stringResource(android.R.string.search_go).capitalize(Locale.current), painterResource(R.drawable.ic_search), onClick = {
+      showMenu.value = false
       showSearch = true
     })
   }
 
-  if (chat.chatInfo is ChatInfo.Direct) {
+  if (chat.chatInfo is ChatInfo.Direct && chat.chatInfo.contact.allowsFeature(ChatFeature.Calls)) {
     barButtons.add {
       IconButton({
-        showMenu = false
+        showMenu.value = false
         startCall(CallMediaType.Audio)
       }) {
-        Icon(Icons.Outlined.Phone, stringResource(R.string.icon_descr_more_button), tint = MaterialTheme.colors.primary)
+        Icon(painterResource(R.drawable.ic_call_500), stringResource(R.string.icon_descr_more_button), tint = MaterialTheme.colors.primary)
       }
     }
     menuItems.add {
-      ItemAction(stringResource(R.string.icon_descr_video_call).capitalize(Locale.current), Icons.Outlined.Videocam, onClick = {
-        showMenu = false
+      ItemAction(stringResource(R.string.icon_descr_video_call).capitalize(Locale.current), painterResource(R.drawable.ic_videocam), onClick = {
+        showMenu.value = false
         startCall(CallMediaType.Video)
       })
     }
   } else if (chat.chatInfo is ChatInfo.Group && chat.chatInfo.groupInfo.canAddMembers && !chat.chatInfo.incognito) {
     barButtons.add {
       IconButton({
-        showMenu = false
+        showMenu.value = false
         addMembers(chat.chatInfo.groupInfo)
       }) {
-        Icon(Icons.Outlined.PersonAdd, stringResource(R.string.icon_descr_add_members), tint = MaterialTheme.colors.primary)
+        Icon(painterResource(R.drawable.ic_person_add_500), stringResource(R.string.icon_descr_add_members), tint = MaterialTheme.colors.primary)
       }
     }
   }
@@ -431,9 +425,9 @@ fun ChatInfoToolbar(
   menuItems.add {
     ItemAction(
       if (ntfsEnabled.value) stringResource(R.string.mute_chat) else stringResource(R.string.unmute_chat),
-      if (ntfsEnabled.value) Icons.Outlined.NotificationsOff else Icons.Outlined.Notifications,
+      if (ntfsEnabled.value) painterResource(R.drawable.ic_notifications_off) else painterResource(R.drawable.ic_notifications),
       onClick = {
-        showMenu = false
+        showMenu.value = false
         // Just to make a delay before changing state of ntfsEnabled, otherwise it will redraw menu item with new value before closing the menu
         scope.launch {
           delay(200)
@@ -444,8 +438,8 @@ fun ChatInfoToolbar(
   }
 
   barButtons.add {
-    IconButton({ showMenu = true }) {
-      Icon(Icons.Default.MoreVert, stringResource(R.string.icon_descr_more_button), tint = MaterialTheme.colors.primary)
+    IconButton({ showMenu.value = true }) {
+      Icon(MoreVertFilled, stringResource(R.string.icon_descr_more_button), tint = MaterialTheme.colors.primary)
     }
   }
 
@@ -461,18 +455,14 @@ fun ChatInfoToolbar(
   Divider(Modifier.padding(top = AppBarHeight))
 
   Box(Modifier.fillMaxWidth().wrapContentSize(Alignment.TopEnd).offset(y = AppBarHeight)) {
-    DropdownMenu(
-      expanded = showMenu,
-      onDismissRequest = { showMenu = false },
-      Modifier.widthIn(min = 220.dp)
-    ) {
+    DefaultDropdownMenu(showMenu) {
       menuItems.forEach { it() }
     }
   }
 }
 
 @Composable
-fun ChatInfoToolbarTitle(cInfo: ChatInfo, imageSize: Dp = 40.dp, iconColor: Color = MaterialTheme.colors.secondary) {
+fun ChatInfoToolbarTitle(cInfo: ChatInfo, imageSize: Dp = 40.dp, iconColor: Color = MaterialTheme.colors.secondaryVariant) {
   Row(
     horizontalArrangement = Arrangement.Center,
     verticalAlignment = Alignment.CenterVertically
@@ -506,7 +496,7 @@ fun ChatInfoToolbarTitle(cInfo: ChatInfo, imageSize: Dp = 40.dp, iconColor: Colo
 
 @Composable
 private fun ContactVerifiedShield() {
-  Icon(Icons.Outlined.VerifiedUser, null, Modifier.size(18.dp).padding(end = 3.dp, top = 1.dp), tint = HighOrLowlight)
+  Icon(painterResource(R.drawable.ic_verified_user), null, Modifier.size(18.dp).padding(end = 3.dp, top = 1.dp), tint = MaterialTheme.colors.secondary)
 }
 
 data class CIListState(val scrolled: Boolean, val itemCount: Int, val keyboardState: KeyboardState)
@@ -792,36 +782,27 @@ fun BoxWithConstraintsScope.FloatingButtons(
   }
   val showButtonWithCounter = topUnreadCount > 0
   val height = with(LocalDensity.current) { maxHeight.toPx() }
-  var showDropDown by remember { mutableStateOf(false) }
+  val showDropDown = remember { mutableStateOf(false) }
 
   TopEndFloatingButton(
-    Modifier.padding(end = 16.dp, top = 24.dp).align(Alignment.TopEnd),
+    Modifier.padding(end = DEFAULT_PADDING, top = 24.dp).align(Alignment.TopEnd),
     topUnreadCount,
     showButtonWithCounter,
     onClick = { scope.launch { listState.animateScrollBy(height) } },
-    onLongClick = { showDropDown = true }
+    onLongClick = { showDropDown.value = true }
   )
 
-  DropdownMenu(
-    expanded = showDropDown,
-    onDismissRequest = { showDropDown = false },
-    Modifier.width(220.dp),
-    offset = DpOffset(maxWidth - 16.dp, 24.dp + fabSize)
-  ) {
-    DropdownMenuItem(
+  DefaultDropdownMenu(showDropDown, offset = DpOffset(maxWidth - DEFAULT_PADDING, 24.dp + fabSize)) {
+    ItemAction(
+      generalGetString(R.string.mark_read),
+      painterResource(R.drawable.ic_check),
       onClick = {
         markRead(
           CC.ItemRange(minUnreadItemId, chatItems[chatItems.size - listState.layoutInfo.visibleItemsInfo.lastIndex - 1].id - 1),
           bottomUnreadCount
         )
-        showDropDown = false
-      }
-    ) {
-      Text(
-        generalGetString(R.string.mark_read),
-        maxLines = 1,
-      )
-    }
+        showDropDown.value = false
+      })
   }
 }
 
@@ -918,7 +899,7 @@ private fun bottomEndFloatingButton(
         modifier = Modifier.size(48.dp)
       ) {
         Icon(
-          imageVector = Icons.Default.KeyboardArrowDown,
+          painter = painterResource(R.drawable.ic_keyboard_arrow_down),
           contentDescription = null,
           tint = MaterialTheme.colors.primary
         )
@@ -1083,7 +1064,6 @@ fun PreviewChatLayout() {
       searchValue,
       useLinkPreviews = true,
       linkMode = SimplexLinkMode.DESCRIPTION,
-      allowVideoAttachment = true,
       chatModelIncognito = false,
       back = {},
       info = {},
@@ -1144,7 +1124,6 @@ fun PreviewGroupChatLayout() {
       searchValue,
       useLinkPreviews = true,
       linkMode = SimplexLinkMode.DESCRIPTION,
-      allowVideoAttachment = true,
       chatModelIncognito = false,
       back = {},
       info = {},

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

@@ -1,31 +1,30 @@
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.*
 import androidx.compose.material.*
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.InsertDriveFile
-import androidx.compose.material.icons.outlined.Close
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.collectAsState
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import chat.simplex.app.R
 import chat.simplex.app.ui.theme.*
-import chat.simplex.app.views.chat.item.SentColorLight
 
 @Composable
 fun ComposeFileView(fileName: String, cancelFile: () -> Unit, cancelEnabled: Boolean) {
+  val sentColor = CurrentColors.collectAsState().value.appColors.sentMessage
   Row(
     Modifier
       .height(60.dp)
       .fillMaxWidth()
       .padding(top = 8.dp)
-      .background(SentColorLight),
+      .background(sentColor),
     verticalAlignment = Alignment.CenterVertically
   ) {
     Icon(
-      Icons.Filled.InsertDriveFile,
+      painterResource(R.drawable.ic_draft_filled),
       stringResource(R.string.icon_descr_file),
       Modifier
         .padding(start = 4.dp, end = 2.dp)
@@ -37,7 +36,7 @@ fun ComposeFileView(fileName: String, cancelFile: () -> Unit, cancelEnabled: Boo
     if (cancelEnabled) {
       IconButton(onClick = cancelFile, modifier = Modifier.padding(0.dp)) {
         Icon(
-          Icons.Outlined.Close,
+          painterResource(R.drawable.ic_close),
           contentDescription = stringResource(R.string.icon_descr_cancel_file_preview),
           tint = MaterialTheme.colors.primary,
           modifier = Modifier.padding(10.dp)

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

@@ -4,26 +4,28 @@ import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.lazy.LazyRow
+import androidx.compose.foundation.lazy.itemsIndexed
 import androidx.compose.material.*
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.outlined.Close
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.asImageBitmap
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import chat.simplex.app.R
-import chat.simplex.app.ui.theme.DEFAULT_PADDING_HALF
-import chat.simplex.app.views.chat.item.SentColorLight
+import chat.simplex.app.ui.theme.*
+import chat.simplex.app.views.helpers.UploadContent
 import chat.simplex.app.views.helpers.base64ToBitmap
 
 @Composable
-fun ComposeImageView(images: List<String>, cancelImages: () -> Unit, cancelEnabled: Boolean) {
+fun ComposeImageView(media: ComposePreview.MediaPreview, cancelImages: () -> Unit, cancelEnabled: Boolean) {
+  val sentColor = CurrentColors.collectAsState().value.appColors.sentMessage
   Row(
     Modifier
       .padding(top = 8.dp)
-      .background(SentColorLight),
+      .background(sentColor),
     verticalAlignment = Alignment.CenterVertically,
   ) {
     LazyRow(
@@ -31,19 +33,38 @@ fun ComposeImageView(images: List<String>, cancelImages: () -> Unit, cancelEnabl
       verticalAlignment = Alignment.CenterVertically,
       horizontalArrangement = Arrangement.spacedBy(DEFAULT_PADDING_HALF),
     ) {
-      items(images.size) { index ->
-        val imageBitmap = base64ToBitmap(images[index]).asImageBitmap()
-        Image(
-          imageBitmap,
-          "preview image",
-          modifier = Modifier.widthIn(max = 80.dp).height(60.dp)
-        )
+      itemsIndexed(media.images) { index, item ->
+        val content = media.content[index]
+        if (content is UploadContent.Video) {
+          Box(contentAlignment = Alignment.Center) {
+            val imageBitmap = base64ToBitmap(item).asImageBitmap()
+            Image(
+              imageBitmap,
+              "preview video",
+              modifier = Modifier.widthIn(max = 80.dp).height(60.dp)
+            )
+            Icon(
+              painterResource(R.drawable.ic_videocam_filled),
+              "preview video",
+              Modifier
+                .size(20.dp),
+              tint = Color.White
+            )
+          }
+        } else {
+          val imageBitmap = base64ToBitmap(item).asImageBitmap()
+          Image(
+            imageBitmap,
+            "preview image",
+            modifier = Modifier.widthIn(max = 80.dp).height(60.dp)
+          )
+        }
       }
     }
     if (cancelEnabled) {
       IconButton(onClick = cancelImages) {
         Icon(
-          Icons.Outlined.Close,
+          painterResource(R.drawable.ic_close),
           contentDescription = stringResource(R.string.icon_descr_cancel_image_preview),
           tint = MaterialTheme.colors.primary,
         )

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

@@ -9,20 +9,16 @@ import android.content.*
 import android.content.pm.PackageManager
 import android.graphics.*
 import android.graphics.drawable.AnimatedImageDrawable
-import android.media.MediaMetadataRetriever
 import android.net.Uri
 import android.os.Build
 import android.provider.MediaStore
+import android.webkit.MimeTypeMap
 import android.widget.Toast
 import androidx.activity.compose.rememberLauncherForActivityResult
 import androidx.activity.result.contract.ActivityResultContract
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material.*
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.AttachFile
-import androidx.compose.material.icons.filled.Edit
-import androidx.compose.material.icons.outlined.Reply
 import androidx.compose.runtime.*
 import androidx.compose.runtime.saveable.Saver
 import androidx.compose.runtime.saveable.rememberSaveable
@@ -30,13 +26,13 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import androidx.core.content.ContextCompat
 import chat.simplex.app.*
 import chat.simplex.app.R
 import chat.simplex.app.model.*
-import chat.simplex.app.ui.theme.HighOrLowlight
 import chat.simplex.app.views.chat.item.*
 import chat.simplex.app.views.helpers.*
 import kotlinx.coroutines.*
@@ -49,8 +45,7 @@ import java.nio.file.Files
 sealed class ComposePreview {
   @Serializable object NoPreview: ComposePreview()
   @Serializable class CLinkPreview(val linkPreview: LinkPreview?): ComposePreview()
-  @Serializable class ImagePreview(val images: List<String>, val content: List<UploadContent>): ComposePreview()
-  @Serializable class VideoPreview(val images: List<String>, val content: List<UploadContent>): ComposePreview()
+  @Serializable class MediaPreview(val images: List<String>, val content: List<UploadContent>): ComposePreview()
   @Serializable data class VoicePreview(val voice: String, val durationMs: Int, val finished: Boolean): ComposePreview()
   @Serializable class FilePreview(val fileName: String, val uri: Uri): ComposePreview()
 }
@@ -96,8 +91,7 @@ data class ComposeState(
   val sendEnabled: () -> Boolean
     get() = {
       val hasContent = when (preview) {
-        is ComposePreview.ImagePreview -> true
-        is ComposePreview.VideoPreview -> true
+        is ComposePreview.MediaPreview -> true
         is ComposePreview.VoicePreview -> true
         is ComposePreview.FilePreview -> true
         else -> message.isNotEmpty() || liveMessage != null
@@ -110,8 +104,7 @@ data class ComposeState(
   val linkPreviewAllowed: Boolean
     get() =
       when (preview) {
-        is ComposePreview.ImagePreview -> false
-        is ComposePreview.VideoPreview -> false
+        is ComposePreview.MediaPreview -> false
         is ComposePreview.VoicePreview -> false
         is ComposePreview.FilePreview -> false
         else -> useLinkPreviews
@@ -161,8 +154,8 @@ fun chatItemPreview(chatItem: ChatItem): ComposePreview {
     is MsgContent.MCText -> ComposePreview.NoPreview
     is MsgContent.MCLink -> ComposePreview.CLinkPreview(linkPreview = mc.preview)
     // TODO: include correct type
-    is MsgContent.MCImage -> ComposePreview.ImagePreview(images = listOf(mc.image), listOf(UploadContent.SimpleImage(getAppFileUri(fileName))))
-    is MsgContent.MCVideo -> ComposePreview.VideoPreview(images = listOf(mc.image), listOf(UploadContent.SimpleImage(getAppFileUri(fileName))))
+    is MsgContent.MCImage -> ComposePreview.MediaPreview(images = listOf(mc.image), listOf(UploadContent.SimpleImage(getAppFileUri(fileName))))
+    is MsgContent.MCVideo -> ComposePreview.MediaPreview(images = listOf(mc.image), listOf(UploadContent.SimpleImage(getAppFileUri(fileName))))
     is MsgContent.MCVoice -> ComposePreview.VoicePreview(voice = fileName, mc.duration / 1000, true)
     is MsgContent.MCFile -> ComposePreview.FilePreview(fileName, getAppFileUri(fileName))
     is MsgContent.MCUnknown, null -> ComposePreview.NoPreview
@@ -183,8 +176,7 @@ fun ComposeView(
   val pendingLinkUrl = rememberSaveable { mutableStateOf<String?>(null) }
   val cancelledLinks = rememberSaveable { mutableSetOf<String>() }
   val useLinkPreviews = chatModel.controller.appPrefs.privacyLinkPreviews.get()
-  val xftpSendEnabled = chatModel.controller.appPrefs.xftpSendEnabled.get()
-  val maxFileSize = getMaxFileSize(fileProtocol = if (xftpSendEnabled) FileProtocol.XFTP else FileProtocol.SMP)
+  val maxFileSize = getMaxFileSize(FileProtocol.XFTP)
   val smallFont = MaterialTheme.typography.body1.copy(color = MaterialTheme.colors.onBackground)
   val textStyle = remember { mutableStateOf(smallFont) }
   val cameraLauncher = rememberCameraLauncher { uri: Uri? ->
@@ -192,7 +184,7 @@ fun ComposeView(
       val bitmap: Bitmap? = getBitmapFromUri(uri)
       if (bitmap != null) {
         val imagePreview = resizeImageToStrSize(bitmap, maxDataSize = 14000)
-        composeState.value = composeState.value.copy(preview = ComposePreview.ImagePreview(listOf(imagePreview), listOf(UploadContent.SimpleImage(uri))))
+        composeState.value = composeState.value.copy(preview = ComposePreview.MediaPreview(listOf(imagePreview), listOf(UploadContent.SimpleImage(uri))))
       }
     }
   }
@@ -203,52 +195,50 @@ fun ComposeView(
       Toast.makeText(context, generalGetString(R.string.toast_permission_denied), Toast.LENGTH_SHORT).show()
     }
   }
-  val processPickedImage = { uris: List<Uri>, text: String? ->
+  val processPickedMedia = { uris: List<Uri>, text: String? ->
     val content = ArrayList<UploadContent>()
     val imagesPreview = ArrayList<String>()
     uris.forEach { uri ->
-      val drawable = getDrawableFromUri(uri)
-      var bitmap: Bitmap? = if (drawable != null) getBitmapFromUri(uri) else null
-      val isAnimNewApi = Build.VERSION.SDK_INT >= 28 && drawable is AnimatedImageDrawable
-      val isAnimOldApi = Build.VERSION.SDK_INT < 28 &&
-          (getFileName(SimplexApp.context, uri)?.endsWith(".gif") == true || getFileName(SimplexApp.context, uri)?.endsWith(".webp") == true)
-      if (isAnimNewApi || isAnimOldApi) {
-        // It's a gif or webp
-        val fileSize = getFileSize(context, uri)
-        if (fileSize != null && fileSize <= maxFileSize) {
-          content.add(UploadContent.AnimatedImage(uri))
-        } else {
-          bitmap = null
-          AlertManager.shared.showAlertMsg(
-            generalGetString(R.string.large_file),
-            String.format(generalGetString(R.string.maximum_supported_file_size), formatBytes(maxFileSize))
-          )
+      var bitmap: Bitmap? = null
+      val isImage = MimeTypeMap.getSingleton().getMimeTypeFromExtension(getFileName(SimplexApp.context, uri)?.split(".")?.last())?.contains("image/") == true
+      when {
+        isImage -> {
+          // Image
+          val drawable = getDrawableFromUri(uri)
+          bitmap = if (drawable != null) getBitmapFromUri(uri) else null
+          val isAnimNewApi = Build.VERSION.SDK_INT >= 28 && drawable is AnimatedImageDrawable
+          val isAnimOldApi = Build.VERSION.SDK_INT < 28 &&
+              (getFileName(SimplexApp.context, uri)?.endsWith(".gif") == true || getFileName(SimplexApp.context, uri)?.endsWith(".webp") == true)
+          if (isAnimNewApi || isAnimOldApi) {
+            // It's a gif or webp
+            val fileSize = getFileSize(context, uri)
+            if (fileSize != null && fileSize <= maxFileSize) {
+              content.add(UploadContent.AnimatedImage(uri))
+            } else {
+              bitmap = null
+              AlertManager.shared.showAlertMsg(
+                generalGetString(R.string.large_file),
+                String.format(generalGetString(R.string.maximum_supported_file_size), formatBytes(maxFileSize))
+              )
+            }
+          } else {
+            content.add(UploadContent.SimpleImage(uri))
+          }
+        }
+        else -> {
+          // Video
+          val res = getBitmapFromVideo(uri)
+          bitmap = res.preview
+          val durationMs = res.duration
+          content.add(UploadContent.Video(uri, durationMs?.div(1000)?.toInt() ?: 0))
         }
-      } else {
-        content.add(UploadContent.SimpleImage(uri))
       }
       if (bitmap != null) {
         imagesPreview.add(resizeImageToStrSize(bitmap, maxDataSize = 14000))
       }
     }
-
     if (imagesPreview.isNotEmpty()) {
-      composeState.value = composeState.value.copy(message = text ?: composeState.value.message, preview = ComposePreview.ImagePreview(imagesPreview, content))
-    }
-  }
-  val processPickedVideo = { uris: List<Uri>, text: String? ->
-    val content = ArrayList<UploadContent>()
-    val imagesPreview = ArrayList<String>()
-    uris.forEach { uri ->
-      val (bitmap: Bitmap?, durationMs: Long?) = getBitmapFromVideo(uri)
-      content.add(UploadContent.Video(uri, durationMs?.div(1000)?.toInt() ?: 0))
-      if (bitmap != null) {
-        imagesPreview.add(resizeImageToStrSize(bitmap, maxDataSize = 14000))
-      }
-    }
-
-    if (imagesPreview.isNotEmpty()) {
-      composeState.value = composeState.value.copy(message = text ?: composeState.value.message, preview = ComposePreview.VideoPreview(imagesPreview, content))
+      composeState.value = composeState.value.copy(message = text ?: composeState.value.message, preview = ComposePreview.MediaPreview(imagesPreview, content))
     }
   }
   val processPickedFile = { uri: Uri?, text: String? ->
@@ -267,16 +257,17 @@ fun ComposeView(
       }
     }
   }
-  val galleryImageLauncher = rememberLauncherForActivityResult(contract = PickMultipleImagesFromGallery()) { processPickedImage(it, null) }
-  val galleryImageLauncherFallback = rememberGetMultipleContentsLauncher { processPickedImage(it, null) }
-  val galleryVideoLauncher = rememberLauncherForActivityResult(contract = PickMultipleVideosFromGallery()) { processPickedVideo(it, null) }
-  val galleryVideoLauncherFallback = rememberGetMultipleContentsLauncher { processPickedVideo(it, null) }
+  val galleryImageLauncher = rememberLauncherForActivityResult(contract = PickMultipleImagesFromGallery()) { processPickedMedia(it, null) }
+  val galleryImageLauncherFallback = rememberGetMultipleContentsLauncher { processPickedMedia(it, null) }
+  val galleryVideoLauncher = rememberLauncherForActivityResult(contract = PickMultipleVideosFromGallery()) { processPickedMedia(it, null) }
+  val galleryVideoLauncherFallback = rememberGetMultipleContentsLauncher { processPickedMedia(it, null) }
+
   val filesLauncher = rememberGetContentLauncher { processPickedFile(it, null) }
   val recState: MutableState<RecordingState> = remember { mutableStateOf(RecordingState.NotStarted) }
 
   LaunchedEffect(attachmentOption.value) {
     when (attachmentOption.value) {
-      AttachmentOption.TakePhoto -> {
+      AttachmentOption.CameraPhoto -> {
         when (PackageManager.PERMISSION_GRANTED) {
           ContextCompat.checkSelfPermission(context, Manifest.permission.CAMERA) -> {
             cameraLauncher.launchWithFallback()
@@ -287,7 +278,7 @@ fun ComposeView(
         }
         attachmentOption.value = null
       }
-      AttachmentOption.PickImage -> {
+      AttachmentOption.GalleryImage -> {
         try {
           galleryImageLauncher.launch(0)
         } catch (e: ActivityNotFoundException) {
@@ -295,7 +286,7 @@ fun ComposeView(
         }
         attachmentOption.value = null
       }
-      AttachmentOption.PickVideo -> {
+      AttachmentOption.GalleryVideo -> {
         try {
           galleryVideoLauncher.launch(0)
         } catch (e: ActivityNotFoundException) {
@@ -303,7 +294,7 @@ fun ComposeView(
         }
         attachmentOption.value = null
       }
-      AttachmentOption.PickFile -> {
+      AttachmentOption.File -> {
         filesLauncher.launch("*/*")
         attachmentOption.value = null
       }
@@ -460,28 +451,20 @@ fun ComposeView(
       when (val preview = cs.preview) {
         ComposePreview.NoPreview -> msgs.add(MsgContent.MCText(msgText))
         is ComposePreview.CLinkPreview -> msgs.add(checkLinkPreview())
-        is ComposePreview.ImagePreview -> {
+        is ComposePreview.MediaPreview -> {
           preview.content.forEachIndexed { index, it ->
             val file = when (it) {
               is UploadContent.SimpleImage -> saveImage(context, it.uri)
               is UploadContent.AnimatedImage -> saveAnimImage(context, it.uri)
-              else -> return@forEachIndexed
-            }
-            if (file != null) {
-              files.add(file)
-              msgs.add(MsgContent.MCImage(if (preview.content.lastIndex == index) msgText else "", preview.images[index]))
-            }
-          }
-        }
-        is ComposePreview.VideoPreview -> {
-          preview.content.forEachIndexed { index, it ->
-            val file = when (it) {
               is UploadContent.Video -> saveFileFromUri(context, it.uri)
-              else -> return@forEachIndexed
             }
             if (file != null) {
               files.add(file)
-              msgs.add(MsgContent.MCVideo(if (preview.content.lastIndex == index) msgText else "", preview.images[index], it.duration))
+              if (it is UploadContent.Video) {
+                msgs.add(MsgContent.MCVideo(if (preview.content.lastIndex == index) msgText else "", preview.images[index], it.duration))
+              } else {
+                msgs.add(MsgContent.MCImage(if (preview.content.lastIndex == index) msgText else "", preview.images[index]))
+              }
             }
           }
         }
@@ -516,8 +499,7 @@ fun ComposeView(
         )
       }
       if (sent == null &&
-        (cs.preview is ComposePreview.ImagePreview ||
-            cs.preview is ComposePreview.VideoPreview ||
+        (cs.preview is ComposePreview.MediaPreview ||
             cs.preview is ComposePreview.FilePreview ||
             cs.preview is ComposePreview.VoicePreview)
         ) {
@@ -642,13 +624,8 @@ fun ComposeView(
     when (val preview = composeState.value.preview) {
       ComposePreview.NoPreview -> {}
       is ComposePreview.CLinkPreview -> ComposeLinkView(preview.linkPreview, ::cancelLinkPreview)
-      is ComposePreview.ImagePreview -> ComposeImageView(
-        preview.images,
-        ::cancelImages,
-        cancelEnabled = !composeState.value.editing
-      )
-      is ComposePreview.VideoPreview -> ComposeImageView(
-        preview.images,
+      is ComposePreview.MediaPreview -> ComposeImageView(
+        preview,
         ::cancelImages,
         cancelEnabled = !composeState.value.editing
       )
@@ -671,10 +648,10 @@ fun ComposeView(
   fun contextItemView() {
     when (val contextItem = composeState.value.contextItem) {
       ComposeContextItem.NoContextItem -> {}
-      is ComposeContextItem.QuotedItem -> ContextItemView(contextItem.chatItem, Icons.Outlined.Reply) {
+      is ComposeContextItem.QuotedItem -> ContextItemView(contextItem.chatItem, painterResource(R.drawable.ic_reply)) {
         composeState.value = composeState.value.copy(contextItem = ComposeContextItem.NoContextItem)
       }
-      is ComposeContextItem.EditingItem -> ContextItemView(contextItem.chatItem, Icons.Filled.Edit) {
+      is ComposeContextItem.EditingItem -> ContextItemView(contextItem.chatItem, painterResource(R.drawable.ic_edit_filled)) {
         clearState()
       }
     }
@@ -686,7 +663,7 @@ fun ComposeView(
 
     when (val shared = chatModel.sharedContent.value) {
       is SharedContent.Text -> onMessageChange(shared.text)
-      is SharedContent.Images -> processPickedImage(shared.uris, shared.text)
+      is SharedContent.Media -> processPickedMedia(shared.uris, shared.text)
       is SharedContent.File -> processPickedFile(shared.uri, shared.text)
       null -> {}
     }
@@ -709,9 +686,9 @@ fun ComposeView(
     ) {
       IconButton(showChooseAttachment, enabled = !composeState.value.attachmentDisabled && rememberUpdatedState(chat.userCanSend).value) {
         Icon(
-          Icons.Filled.AttachFile,
+          painterResource(R.drawable.ic_attach_file_filled_500),
           contentDescription = stringResource(R.string.attach),
-          tint = if (!composeState.value.attachmentDisabled && userCanSend.value) MaterialTheme.colors.primary else HighOrLowlight,
+          tint = if (!composeState.value.attachmentDisabled && userCanSend.value) MaterialTheme.colors.primary else MaterialTheme.colors.secondary,
           modifier = Modifier
             .size(28.dp)
             .clip(CircleShape)

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

@@ -2,13 +2,11 @@ import androidx.compose.animation.core.Animatable
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.*
 import androidx.compose.material.*
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.*
-import androidx.compose.material.icons.outlined.Close
 import androidx.compose.runtime.*
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
@@ -16,7 +14,6 @@ import androidx.compose.ui.unit.sp
 import chat.simplex.app.R
 import chat.simplex.app.model.durationText
 import chat.simplex.app.ui.theme.*
-import chat.simplex.app.views.chat.item.SentColorLight
 import chat.simplex.app.views.helpers.*
 import kotlinx.coroutines.flow.distinctUntilChanged
 
@@ -59,12 +56,13 @@ fun ComposeVoiceView(
         .height(3.dp)
         .background(MaterialTheme.colors.primary)
     )
+    val sentColor = CurrentColors.collectAsState().value.appColors.sentMessage
     Row(
       Modifier
         .height(60.dp)
         .fillMaxWidth()
         .padding(top = 8.dp)
-        .background(SentColorLight),
+        .background(sentColor),
       verticalAlignment = Alignment.CenterVertically
     ) {
       IconButton(
@@ -77,12 +75,12 @@ fun ComposeVoiceView(
         },
         enabled = finishedRecording) {
         Icon(
-          if (audioPlaying.value) Icons.Filled.Pause else Icons.Filled.PlayArrow,
+          if (audioPlaying.value) painterResource(R.drawable.ic_pause_filled) else painterResource(R.drawable.ic_play_arrow_filled),
           stringResource(R.string.icon_descr_file),
           Modifier
             .padding(start = 4.dp, end = 2.dp)
             .size(36.dp),
-          tint = if (finishedRecording) MaterialTheme.colors.primary else HighOrLowlight
+          tint = if (finishedRecording) MaterialTheme.colors.primary else MaterialTheme.colors.secondary
         )
       }
       val numberInText = remember(recordedDurationMs, progress.value) {
@@ -97,7 +95,7 @@ fun ComposeVoiceView(
       Text(
         durationText(numberInText.value),
         fontSize = 18.sp,
-        color = HighOrLowlight,
+        color = MaterialTheme.colors.secondary,
       )
       Spacer(Modifier.weight(1f))
       if (cancelEnabled) {
@@ -109,7 +107,7 @@ fun ComposeVoiceView(
           modifier = Modifier.padding(0.dp)
         ) {
           Icon(
-            Icons.Outlined.Close,
+            painterResource(R.drawable.ic_close),
             contentDescription = stringResource(R.string.icon_descr_cancel_file_preview),
             tint = MaterialTheme.colors.primary,
             modifier = Modifier.padding(10.dp)

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

@@ -1,9 +1,9 @@
 package chat.simplex.app.views.chat
 
 import InfoRow
-import SectionDivider
+import SectionBottomSpacer
+import SectionDividerSpaced
 import SectionItemView
-import SectionSpacer
 import SectionTextFooter
 import SectionView
 import androidx.compose.foundation.*
@@ -12,7 +12,6 @@ import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Text
 import androidx.compose.runtime.*
 import androidx.compose.runtime.saveable.rememberSaveable
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.stringResource
@@ -50,7 +49,6 @@ fun ContactPreferencesView(
       if (featuresAllowed == currentFeaturesAllowed) close()
       else showUnsavedChangesAlert({ savePrefs(close) }, close)
     },
-    background = if (isInDarkTheme()) MaterialTheme.colors.background else SettingsBackgroundLight
   ) {
     ContactPreferencesLayout(
       featuresAllowed,
@@ -81,34 +79,38 @@ private fun ContactPreferencesLayout(
   Column(
     Modifier
       .fillMaxWidth()
-      .verticalScroll(rememberScrollState())
-      .padding(bottom = DEFAULT_PADDING),
-    horizontalAlignment = Alignment.Start,
+      .verticalScroll(rememberScrollState()),
   ) {
     AppBarTitle(stringResource(R.string.contact_preferences))
     val timedMessages: MutableState<Boolean> = remember(featuresAllowed) { mutableStateOf(featuresAllowed.timedMessagesAllowed) }
     val onTTLUpdated = { ttl: Int? ->
-      applyPrefs(featuresAllowed.copy(timedMessagesTTL = ttl ?: 86400))
+      applyPrefs(featuresAllowed.copy(timedMessagesTTL = ttl))
     }
     TimedMessagesFeatureSection(featuresAllowed, contact.mergedPreferences.timedMessages, timedMessages, onTTLUpdated) { allowed, ttl ->
       applyPrefs(featuresAllowed.copy(timedMessagesAllowed = allowed, timedMessagesTTL = ttl ?: currentFeaturesAllowed.timedMessagesTTL))
     }
-    SectionSpacer()
+    SectionDividerSpaced(true, maxBottomPadding = false)
     val allowFullDeletion: MutableState<ContactFeatureAllowed> = remember(featuresAllowed) { mutableStateOf(featuresAllowed.fullDelete) }
     FeatureSection(ChatFeature.FullDelete, user.fullPreferences.fullDelete.allow, contact.mergedPreferences.fullDelete, allowFullDeletion) {
       applyPrefs(featuresAllowed.copy(fullDelete = it))
     }
-    SectionSpacer()
+    SectionDividerSpaced(true, maxBottomPadding = false)
     val allowVoice: MutableState<ContactFeatureAllowed> = remember(featuresAllowed) { mutableStateOf(featuresAllowed.voice) }
     FeatureSection(ChatFeature.Voice, user.fullPreferences.voice.allow, contact.mergedPreferences.voice, allowVoice) {
       applyPrefs(featuresAllowed.copy(voice = it))
     }
-    SectionSpacer()
+    SectionDividerSpaced(true, maxBottomPadding = false)
+    val allowCalls: MutableState<ContactFeatureAllowed> = remember(featuresAllowed) { mutableStateOf(featuresAllowed.calls) }
+    FeatureSection(ChatFeature.Calls, user.fullPreferences.calls.allow, contact.mergedPreferences.calls, allowCalls) {
+      applyPrefs(featuresAllowed.copy(calls = it))
+    }
+    SectionDividerSpaced(maxTopPadding = true, maxBottomPadding = false)
     ResetSaveButtons(
       reset = reset,
       save = savePrefs,
       disabled = featuresAllowed == currentFeaturesAllowed
     )
+    SectionBottomSpacer()
   }
 }
 
@@ -128,26 +130,24 @@ private fun FeatureSection(
 
   SectionView(
     feature.text.uppercase(),
-    icon = feature.iconFilled,
+    icon = feature.iconFilled(),
     iconTint = if (enabled.forUser) SimplexGreen else if (enabled.forContact) WarningYellow else Color.Red,
     leadingIcon = true,
   ) {
-    SectionItemView {
-      ExposedDropDownSettingRow(
-        generalGetString(R.string.chat_preferences_you_allow),
-        ContactFeatureAllowed.values(userDefault).map { it to it.text },
-        allowFeature,
-        icon = null,
-        onSelected = onSelected
-      )
-    }
-    SectionDivider()
+    ExposedDropDownSettingRow(
+      generalGetString(R.string.chat_preferences_you_allow),
+      ContactFeatureAllowed.values(userDefault).map { it to it.text },
+      allowFeature,
+      icon = null,
+      enabled = remember { mutableStateOf(feature != ChatFeature.Calls) },
+      onSelected = onSelected
+    )
     InfoRow(
       generalGetString(R.string.chat_preferences_contact_allows),
       pref.contactPreference.allow.text
     )
   }
-  SectionTextFooter(feature.enabledDescription(enabled))
+  SectionTextFooter(feature.enabledDescription(enabled) + (if (feature == ChatFeature.Calls) generalGetString(R.string.available_in_v51) else ""))
 }
 
 @Composable
@@ -166,24 +166,20 @@ private fun TimedMessagesFeatureSection(
 
   SectionView(
     ChatFeature.TimedMessages.text.uppercase(),
-    icon = ChatFeature.TimedMessages.iconFilled,
+    icon = ChatFeature.TimedMessages.iconFilled(),
     iconTint = if (enabled.forUser) SimplexGreen else if (enabled.forContact) WarningYellow else Color.Red,
     leadingIcon = true,
   ) {
-    SectionItemView {
-      PreferenceToggle(
-        generalGetString(R.string.chat_preferences_you_allow),
-        checked = allowFeature.value,
-      ) { allow ->
-        onSelected(allow, if (allow) featuresAllowed.timedMessagesTTL ?: 86400 else null)
-      }
+    PreferenceToggle(
+      generalGetString(R.string.chat_preferences_you_allow),
+      checked = allowFeature.value,
+    ) { allow ->
+      onSelected(allow, if (allow) featuresAllowed.timedMessagesTTL ?: 86400 else null)
     }
-    SectionDivider()
     InfoRow(
       generalGetString(R.string.chat_preferences_contact_allows),
       pref.contactPreference.allow.text
     )
-    SectionDivider()
     if (featuresAllowed.timedMessagesAllowed) {
       val ttl = rememberSaveable(featuresAllowed.timedMessagesTTL) { mutableStateOf(featuresAllowed.timedMessagesTTL) }
       TimedMessagesTTLPicker(ttl, onTTLUpdated)
@@ -198,11 +194,10 @@ private fun TimedMessagesFeatureSection(
 private fun ResetSaveButtons(reset: () -> Unit, save: () -> Unit, disabled: Boolean) {
   SectionView {
     SectionItemView(reset, disabled = disabled) {
-      Text(stringResource(R.string.reset_verb), color = if (disabled) HighOrLowlight else MaterialTheme.colors.primary)
+      Text(stringResource(R.string.reset_verb), color = if (disabled) MaterialTheme.colors.secondary else MaterialTheme.colors.primary)
     }
-    SectionDivider()
     SectionItemView(save, disabled = disabled) {
-      Text(stringResource(R.string.save_and_notify_contact), color = if (disabled) HighOrLowlight else MaterialTheme.colors.primary)
+      Text(stringResource(R.string.save_and_notify_contact), color = if (disabled) MaterialTheme.colors.secondary else MaterialTheme.colors.primary)
     }
   }
 }
@@ -211,14 +206,12 @@ private fun ResetSaveButtons(reset: () -> Unit, save: () -> Unit, disabled: Bool
 fun TimedMessagesTTLPicker(selection: MutableState<Int?>, onSelected: (Int?) -> Unit) {
   val ttlValues = TimedMessagesPreference.ttlValues
   val values = ttlValues + if (ttlValues.contains(selection.value)) listOf() else listOf(selection.value)
-  SectionItemView {
-    ExposedDropDownSettingRow(
-      generalGetString(R.string.delete_after),
-      values.map { it to TimedMessagesPreference.ttlText(it) },
-      selection,
-      onSelected = onSelected
-    )
-  }
+  ExposedDropDownSettingRow(
+    generalGetString(R.string.delete_after),
+    values.map { it to TimedMessagesPreference.ttlText(it) },
+    selection,
+    onSelected = onSelected
+  )
 }
 
 private fun showUnsavedChangesAlert(save: () -> Unit, revert: () -> Unit) {

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

@@ -3,34 +3,34 @@ package chat.simplex.app.views.chat
 import androidx.compose.foundation.background
 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.Close
+import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.collectAsState
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import chat.simplex.app.R
 import chat.simplex.app.model.*
-import chat.simplex.app.ui.theme.HighOrLowlight
-import chat.simplex.app.ui.theme.SimpleXTheme
+import chat.simplex.app.ui.theme.*
 import chat.simplex.app.views.chat.item.*
 import kotlinx.datetime.Clock
 
 @Composable
 fun ContextItemView(
   contextItem: ChatItem,
-  contextIcon: ImageVector,
+  contextIcon: Painter,
   cancelContextItem: () -> Unit
 ) {
   val sent = contextItem.chatDir.sent
+  val sentColor = CurrentColors.collectAsState().value.appColors.sentMessage
+  val receivedColor = CurrentColors.collectAsState().value.appColors.receivedMessage
   Row(
     Modifier
       .padding(top = 8.dp)
-      .background(if (sent) SentColorLight else ReceivedColorLight),
+      .background(if (sent) sentColor else receivedColor),
     verticalAlignment = Alignment.CenterVertically
   ) {
     Row(
@@ -47,7 +47,7 @@ fun ContextItemView(
           .height(20.dp)
           .width(20.dp),
         contentDescription = stringResource(R.string.icon_descr_context),
-        tint = HighOrLowlight,
+        tint = MaterialTheme.colors.secondary,
       )
       MarkdownText(
         contextItem.text, contextItem.formattedText,
@@ -58,7 +58,7 @@ fun ContextItemView(
     }
     IconButton(onClick = cancelContextItem) {
       Icon(
-        Icons.Outlined.Close,
+        painterResource(R.drawable.ic_close),
         contentDescription = stringResource(R.string.cancel_verb),
         tint = MaterialTheme.colors.primary,
         modifier = Modifier.padding(10.dp)
@@ -73,8 +73,7 @@ fun PreviewContextItemView() {
   SimpleXTheme {
     ContextItemView(
       contextItem = ChatItem.getSampleData(1, CIDirection.DirectRcv(), Clock.System.now(), "hello"),
-      contextIcon = Icons.Filled.Edit,
-      cancelContextItem = {}
-    )
+      contextIcon = painterResource(R.drawable.ic_edit_filled)
+    ) {}
   }
 }

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

@@ -20,9 +20,6 @@ import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material.*
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.*
-import androidx.compose.material.icons.outlined.*
 import androidx.compose.material.ripple.rememberRipple
 import androidx.compose.runtime.*
 import androidx.compose.runtime.saveable.rememberSaveable
@@ -30,8 +27,9 @@ import androidx.compose.ui.*
 import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.*
-import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.platform.*
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.semantics.Role
 import androidx.compose.ui.text.TextStyle
@@ -46,7 +44,7 @@ import androidx.core.widget.*
 import chat.simplex.app.R
 import chat.simplex.app.SimplexApp
 import chat.simplex.app.model.*
-import chat.simplex.app.ui.theme.HighOrLowlight
+import chat.simplex.app.ui.theme.CurrentColors
 import chat.simplex.app.ui.theme.SimpleXTheme
 import chat.simplex.app.views.chat.item.ItemAction
 import chat.simplex.app.views.helpers.*
@@ -75,7 +73,7 @@ fun SendMsgView(
 ) {
   Box(Modifier.padding(vertical = 8.dp)) {
     val cs = composeState.value
-    val showProgress = cs.inProgress && (cs.preview is ComposePreview.ImagePreview || cs.preview is ComposePreview.VideoPreview || cs.preview is ComposePreview.FilePreview)
+    val showProgress = cs.inProgress && (cs.preview is ComposePreview.MediaPreview || cs.preview is ComposePreview.FilePreview)
     val showVoiceButton = cs.message.isEmpty() && showVoiceRecordIcon && !composeState.value.editing &&
         cs.liveMessage == null && (cs.preview is ComposePreview.NoPreview || recState.value is RecordingState.Started)
     val showDeleteTextButton = rememberSaveable { mutableStateOf(false) }
@@ -146,7 +144,7 @@ fun SendMsgView(
         }
         else -> {
           val cs = composeState.value
-          val icon = if (cs.editing || cs.liveMessage != null) Icons.Filled.Check else Icons.Outlined.ArrowUpward
+          val icon = if (cs.editing || cs.liveMessage != null) painterResource(R.drawable.ic_check_filled) else painterResource(R.drawable.ic_arrow_upward)
           val disabled = !cs.sendEnabled() ||
                         (!allowedVoiceByPrefs && cs.preview is ComposePreview.VoicePreview) ||
                         cs.endLiveDisabled
@@ -155,20 +153,18 @@ fun SendMsgView(
             cs.contextItem is ComposeContextItem.NoContextItem &&
             sendLiveMessage != null && updateLiveMessage != null
           ) {
-            var showDropdown by rememberSaveable { mutableStateOf(false) }
-            SendMsgButton(icon, sendButtonSize, sendButtonAlpha, !disabled, sendMessage) { showDropdown = true }
+            val showDropdown = rememberSaveable { mutableStateOf(false) }
+            SendMsgButton(icon, sendButtonSize, sendButtonAlpha, !disabled, sendMessage) { showDropdown.value = true }
 
-            DropdownMenu(
-              expanded = showDropdown,
-              onDismissRequest = { showDropdown = false },
-              Modifier.width(220.dp),
+            DefaultDropdownMenu(
+              showDropdown,
             ) {
               ItemAction(
                 generalGetString(R.string.send_live_message),
-                Icons.Filled.Bolt,
+                BoltFilled,
                 onClick = {
                   startLiveMessage(scope, sendLiveMessage, updateLiveMessage, sendButtonSize, sendButtonAlpha, composeState, liveMessageAlertShown)
-                  showDropdown = false
+                  showDropdown.value = false
                 }
               )
             }
@@ -191,7 +187,7 @@ private fun NativeKeyboard(
 ) {
   val cs = composeState.value
   val textColor = MaterialTheme.colors.onBackground
-  val tintColor = MaterialTheme.colors.secondary
+  val tintColor = MaterialTheme.colors.secondaryVariant
   val padding = PaddingValues(12.dp, 7.dp, 45.dp, 0.dp)
   val paddingStart = with(LocalDensity.current) { 12.dp.roundToPx() }
   val paddingTop = with(LocalDensity.current) { 7.dp.roundToPx() }
@@ -227,7 +223,7 @@ private fun NativeKeyboard(
           } catch (e: Exception) {
             return@OnCommitContentListener false
           }
-          SimplexApp.context.chatModel.sharedContent.value = SharedContent.Images("", listOf(inputContentInfo.contentUri))
+          SimplexApp.context.chatModel.sharedContent.value = SharedContent.Media("", listOf(inputContentInfo.contentUri))
           true
         }
         return InputConnectionCompat.createWrapper(connection, editorInfo, onCommit)
@@ -244,7 +240,7 @@ private fun NativeKeyboard(
     editText.setPadding(paddingStart, paddingTop, paddingEnd, paddingBottom)
     editText.setText(cs.message)
     if (Build.VERSION.SDK_INT >= 29) {
-      editText.textCursorDrawable?.let { DrawableCompat.setTint(it, HighOrLowlight.toArgb()) }
+      editText.textCursorDrawable?.let { DrawableCompat.setTint(it, CurrentColors.value.colors.secondary.toArgb()) }
     } else {
       try {
         val f: Field = TextView::class.java.getDeclaredField("mCursorDrawableRes")
@@ -288,7 +284,7 @@ private fun ComposeOverlay(textId: Int, textStyle: MutableState<TextStyle>, padd
   Text(
     generalGetString(textId),
     Modifier.padding(padding),
-    color = HighOrLowlight,
+    color = MaterialTheme.colors.secondary,
     style = textStyle.value.copy(fontStyle = FontStyle.Italic)
   )
 }
@@ -299,7 +295,7 @@ private fun BoxScope.DeleteTextButton(composeState: MutableState<ComposeState>)
     { composeState.value = composeState.value.copy(message = "") },
     Modifier.align(Alignment.TopEnd).size(36.dp)
   ) {
-    Icon(Icons.Filled.Close, null, Modifier.padding(7.dp).size(36.dp), tint = HighOrLowlight)
+    Icon(painterResource(R.drawable.ic_close), null, Modifier.padding(7.dp).size(36.dp), tint = MaterialTheme.colors.secondary)
   }
 }
 
@@ -356,9 +352,9 @@ private fun RecordVoiceView(recState: MutableState<RecordingState>, stopRecOnNex
 private fun DisallowedVoiceButton(enabled: Boolean, onClick: () -> Unit) {
   IconButton(onClick, Modifier.size(36.dp), enabled = enabled) {
     Icon(
-      Icons.Outlined.KeyboardVoice,
+      painterResource(R.drawable.ic_keyboard_voice),
       stringResource(R.string.icon_descr_record_voice_message),
-      tint = HighOrLowlight,
+      tint = MaterialTheme.colors.secondary,
       modifier = Modifier
         .size(36.dp)
         .padding(4.dp)
@@ -370,7 +366,7 @@ private fun DisallowedVoiceButton(enabled: Boolean, onClick: () -> Unit) {
 private fun VoiceButtonWithoutPermission(onClick: () -> Unit) {
   IconButton(onClick, Modifier.size(36.dp)) {
     Icon(
-      Icons.Filled.KeyboardVoice,
+      painterResource(R.drawable.ic_keyboard_voice_filled),
       stringResource(R.string.icon_descr_record_voice_message),
       tint = MaterialTheme.colors.primary,
       modifier = Modifier
@@ -402,7 +398,7 @@ private fun LockToCurrentOrientationUntilDispose() {
 private fun StopRecordButton(onClick: () -> Unit) {
   IconButton(onClick, Modifier.size(36.dp)) {
     Icon(
-      Icons.Filled.Stop,
+      painterResource(R.drawable.ic_stop_filled),
       stringResource(R.string.icon_descr_record_voice_message),
       tint = MaterialTheme.colors.primary,
       modifier = Modifier
@@ -416,7 +412,7 @@ private fun StopRecordButton(onClick: () -> Unit) {
 private fun RecordVoiceButton(interactionSource: MutableInteractionSource) {
   IconButton({}, Modifier.size(36.dp), interactionSource = interactionSource) {
     Icon(
-      Icons.Filled.KeyboardVoice,
+      painterResource(R.drawable.ic_keyboard_voice_filled),
       stringResource(R.string.icon_descr_record_voice_message),
       tint = MaterialTheme.colors.primary,
       modifier = Modifier
@@ -428,7 +424,7 @@ private fun RecordVoiceButton(interactionSource: MutableInteractionSource) {
 
 @Composable
 private fun ProgressIndicator() {
-  CircularProgressIndicator(Modifier.size(36.dp).padding(4.dp), color = HighOrLowlight, strokeWidth = 3.dp)
+  CircularProgressIndicator(Modifier.size(36.dp).padding(4.dp), color = MaterialTheme.colors.secondary, strokeWidth = 3.dp)
 }
 
 @Composable
@@ -437,7 +433,7 @@ private fun CancelLiveMessageButton(
 ) {
   IconButton(onClick, Modifier.size(36.dp)) {
     Icon(
-      Icons.Filled.Close,
+      painterResource(R.drawable.ic_close),
       stringResource(R.string.icon_descr_cancel_live_message),
       tint = MaterialTheme.colors.primary,
       modifier = Modifier
@@ -449,7 +445,7 @@ private fun CancelLiveMessageButton(
 
 @Composable
 private fun SendMsgButton(
-  icon: ImageVector,
+  icon: Painter,
   sizeDp: Animatable<Float, AnimationVector1D>,
   alpha: Animatable<Float, AnimationVector1D>,
   enabled: Boolean,
@@ -478,7 +474,7 @@ private fun SendMsgButton(
         .padding(4.dp)
         .alpha(alpha.value)
         .clip(CircleShape)
-        .background(if (enabled) MaterialTheme.colors.primary else HighOrLowlight)
+        .background(if (enabled) MaterialTheme.colors.primary else MaterialTheme.colors.secondary)
         .padding(3.dp)
     )
   }
@@ -499,9 +495,9 @@ private fun StartLiveMessageButton(enabled: Boolean, onClick: () -> Unit) {
     contentAlignment = Alignment.Center
   ) {
     Icon(
-      Icons.Filled.Bolt,
+      BoltFilled,
       stringResource(R.string.icon_descr_send_message),
-      tint = if (enabled) MaterialTheme.colors.primary else HighOrLowlight,
+      tint = if (enabled) MaterialTheme.colors.primary else MaterialTheme.colors.secondary,
       modifier = Modifier
         .size(36.dp)
         .padding(4.dp)

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

@@ -1,18 +1,17 @@
 package chat.simplex.app.views.chat
 
+import SectionBottomSpacer
 import SectionView
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.text.selection.SelectionContainer
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.*
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.Share
-import androidx.compose.material.icons.outlined.*
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.unit.dp
@@ -66,7 +65,7 @@ private fun VerifyCodeLayout(
     val splitCode = splitToParts(connectionCode, 24)
     Row(Modifier.fillMaxWidth().padding(bottom = DEFAULT_PADDING_HALF), horizontalArrangement = Arrangement.Center) {
       if (connectionVerified) {
-        Icon(Icons.Outlined.VerifiedUser, null, Modifier.padding(end = 4.dp).size(22.dp), tint = HighOrLowlight)
+        Icon(painterResource(R.drawable.ic_verified_user), null, Modifier.padding(end = 4.dp).size(22.dp), tint = MaterialTheme.colors.secondary)
         Text(String.format(stringResource(R.string.is_verified), displayName))
       } else {
         Text(String.format(stringResource(R.string.is_not_verified), displayName))
@@ -90,7 +89,7 @@ private fun VerifyCodeLayout(
       val context = LocalContext.current
       Box(Modifier.weight(1f)) {
         IconButton({ shareText(context, connectionCode) }, Modifier.size(20.dp).align(Alignment.CenterStart)) {
-          Icon(Icons.Filled.Share, null, tint = MaterialTheme.colors.primary)
+          Icon(painterResource(R.drawable.ic_share_filled), null, tint = MaterialTheme.colors.primary)
         }
       }
       Spacer(Modifier.weight(1f))
@@ -106,16 +105,16 @@ private fun VerifyCodeLayout(
       horizontalArrangement = Arrangement.spacedBy(10.dp)
     ) {
       if (connectionVerified) {
-        SimpleButton(generalGetString(R.string.clear_verification), Icons.Outlined.Shield) {
+        SimpleButton(generalGetString(R.string.clear_verification), painterResource(R.drawable.ic_shield)) {
           verifyCode(null) {}
         }
       } else {
-        SimpleButton(generalGetString(R.string.scan_code), Icons.Outlined.QrCode) {
+        SimpleButton(generalGetString(R.string.scan_code), painterResource(R.drawable.ic_qr_code)) {
           ModalManager.shared.showModal {
             ScanCodeView(verifyCode) { }
           }
         }
-        SimpleButton(generalGetString(R.string.mark_code_verified), Icons.Outlined.VerifiedUser) {
+        SimpleButton(generalGetString(R.string.mark_code_verified), painterResource(R.drawable.ic_verified_user)) {
           verifyCode(connectionCode) { verified ->
             if (!verified) {
               AlertManager.shared.showAlertMsg(
@@ -126,6 +125,7 @@ private fun VerifyCodeLayout(
         }
       }
     }
+    SectionBottomSpacer()
   }
 }
 
@@ -134,4 +134,4 @@ private fun splitToParts(s: String, length: Int): String {
   return (0..(s.length - 1) / length)
     .map { s.drop(it * length).take(length) }
     .joinToString(separator = "\n")
-}
+}

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

@@ -1,7 +1,8 @@
 package chat.simplex.app.views.chat.group
 
+import SectionBottomSpacer
 import SectionCustomFooter
-import SectionDivider
+import SectionDividerSpaced
 import SectionItemView
 import SectionSpacer
 import SectionView
@@ -9,15 +10,12 @@ import androidx.activity.compose.BackHandler
 import androidx.compose.foundation.*
 import androidx.compose.foundation.layout.*
 import androidx.compose.material.*
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.CheckCircle
-import androidx.compose.material.icons.filled.TheaterComedy
-import androidx.compose.material.icons.outlined.*
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.graphics.painter.Painter
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
@@ -28,6 +26,7 @@ import chat.simplex.app.model.*
 import chat.simplex.app.ui.theme.*
 import chat.simplex.app.views.chat.ChatInfoToolbarTitle
 import chat.simplex.app.views.helpers.*
+import chat.simplex.app.views.newchat.InfoAboutIncognito
 import chat.simplex.app.views.usersettings.SettingsActionItem
 
 @Composable
@@ -37,6 +36,7 @@ fun AddGroupMembersView(groupInfo: GroupInfo, creatingGroup: Boolean = false, ch
   var allowModifyMembers by remember { mutableStateOf(true) }
   BackHandler(onBack = close)
   AddGroupMembersLayout(
+    chatModel.incognito.value,
     groupInfo = groupInfo,
     creatingGroup = creatingGroup,
     contactsToAdd = getContactsToAdd(chatModel),
@@ -85,6 +85,7 @@ fun getContactsToAdd(chatModel: ChatModel): List<Contact> {
 
 @Composable
 fun AddGroupMembersLayout(
+  chatModelIncognito: Boolean,
   groupInfo: GroupInfo,
   creatingGroup: Boolean,
   contactsToAdd: List<Contact>,
@@ -102,9 +103,16 @@ fun AddGroupMembersLayout(
     Modifier
       .fillMaxWidth()
       .verticalScroll(rememberScrollState()),
-    horizontalAlignment = Alignment.Start,
   ) {
     AppBarTitle(stringResource(R.string.button_add_members))
+    InfoAboutIncognito(
+      chatModelIncognito,
+      false,
+      generalGetString(R.string.group_unsupported_incognito_main_profile_sent),
+      generalGetString(R.string.group_main_profile_sent),
+      true
+    )
+    Spacer(Modifier.size(DEFAULT_PADDING))
     Row(
       Modifier.fillMaxWidth(),
       horizontalArrangement = Arrangement.Center
@@ -125,7 +133,7 @@ fun AddGroupMembersLayout(
         Text(
           stringResource(R.string.no_contacts_to_add),
           Modifier.padding(),
-          color = HighOrLowlight
+          color = MaterialTheme.colors.secondary
         )
       }
     } else {
@@ -134,12 +142,8 @@ fun AddGroupMembersLayout(
           SectionItemView(openPreferences) {
             Text(stringResource(R.string.set_group_preferences))
           }
-          SectionDivider()
         }
-        SectionItemView {
-          RoleSelectionRow(groupInfo, selectedRole, allowModifyMembers)
-        }
-        SectionDivider()
+        RoleSelectionRow(groupInfo, selectedRole, allowModifyMembers)
         if (creatingGroup && selectedContacts.isEmpty()) {
           SkipInvitingButton(close)
         } else {
@@ -149,13 +153,13 @@ fun AddGroupMembersLayout(
       SectionCustomFooter {
         InviteSectionFooter(selectedContactsCount = selectedContacts.size, allowModifyMembers, clearSelection)
       }
-      SectionSpacer()
+      SectionDividerSpaced(maxTopPadding = true)
 
       SectionView(stringResource(R.string.select_contacts)) {
         ContactList(contacts = contactsToAdd, selectedContacts, groupInfo, allowModifyMembers, addContact, removeContact)
       }
-      SectionSpacer()
     }
+    SectionBottomSpacer()
   }
 }
 
@@ -172,16 +176,15 @@ private fun RoleSelectionRow(groupInfo: GroupInfo, selectedRole: MutableState<Gr
       values,
       selectedRole,
       icon = null,
-      enabled = rememberUpdatedState(enabled),
-      onSelected = { selectedRole.value = it }
-    )
+      enabled = rememberUpdatedState(enabled)
+    ) { selectedRole.value = it }
   }
 }
 
 @Composable
 fun InviteMembersButton(onClick: () -> Unit, disabled: Boolean) {
   SettingsActionItem(
-    Icons.Outlined.Check,
+    painterResource(R.drawable.ic_check),
     stringResource(R.string.invite_to_group_button),
     click = onClick,
     textColor = MaterialTheme.colors.primary,
@@ -193,7 +196,7 @@ fun InviteMembersButton(onClick: () -> Unit, disabled: Boolean) {
 @Composable
 fun SkipInvitingButton(onClick: () -> Unit) {
   SettingsActionItem(
-    Icons.Outlined.Check,
+    painterResource(R.drawable.ic_check),
     stringResource(R.string.skip_inviting_button),
     click = onClick,
     textColor = MaterialTheme.colors.primary,
@@ -211,7 +214,7 @@ fun InviteSectionFooter(selectedContactsCount: Int, enabled: Boolean, clearSelec
     if (selectedContactsCount >= 1) {
       Text(
         String.format(generalGetString(R.string.num_contacts_selected), selectedContactsCount),
-        color = HighOrLowlight,
+        color = MaterialTheme.colors.secondary,
         fontSize = 12.sp
       )
       Box(
@@ -219,14 +222,14 @@ fun InviteSectionFooter(selectedContactsCount: Int, enabled: Boolean, clearSelec
       ) {
         Text(
           stringResource(R.string.clear_contacts_selection_button),
-          color = if (enabled) MaterialTheme.colors.primary else HighOrLowlight,
+          color = if (enabled) MaterialTheme.colors.primary else MaterialTheme.colors.secondary,
           fontSize = 12.sp
         )
       }
     } else {
       Text(
         stringResource(R.string.no_contacts_selected),
-        color = HighOrLowlight,
+        color = MaterialTheme.colors.secondary,
         fontSize = 12.sp
       )
     }
@@ -249,9 +252,6 @@ fun ContactList(
         checked = selectedContacts.contains(contact.apiId),
         enabled = enabled,
       )
-      if (index < contacts.lastIndex) {
-        SectionDivider()
-      }
     }
   }
 }
@@ -266,17 +266,17 @@ fun ContactCheckRow(
   enabled: Boolean,
 ) {
   val prohibitedToInviteIncognito = !groupInfo.membership.memberIncognito && contact.contactConnIncognito
-  val icon: ImageVector
+  val icon: Painter
   val iconColor: Color
   if (prohibitedToInviteIncognito) {
-    icon = Icons.Filled.TheaterComedy
-    iconColor = HighOrLowlight
+    icon = painterResource(R.drawable.ic_theater_comedy_filled)
+    iconColor = MaterialTheme.colors.secondary
   } else if (checked) {
-    icon = Icons.Filled.CheckCircle
-    iconColor = if (enabled) MaterialTheme.colors.primary else HighOrLowlight
+    icon = painterResource(R.drawable.ic_check_circle_filled)
+    iconColor = if (enabled) MaterialTheme.colors.primary else MaterialTheme.colors.secondary
   } else {
-    icon = Icons.Outlined.Circle
-    iconColor = HighOrLowlight
+    icon = painterResource(R.drawable.ic_circle)
+    iconColor = MaterialTheme.colors.secondary
   }
   SectionItemView(
     click = if (enabled) {
@@ -294,7 +294,7 @@ fun ContactCheckRow(
     Spacer(Modifier.width(DEFAULT_SPACE_AFTER_ICON))
     Text(
       contact.chatViewName, maxLines = 1, overflow = TextOverflow.Ellipsis,
-      color = if (prohibitedToInviteIncognito) HighOrLowlight else Color.Unspecified
+      color = if (prohibitedToInviteIncognito) MaterialTheme.colors.secondary else Color.Unspecified
     )
     Spacer(Modifier.fillMaxWidth().weight(1f))
     Icon(
@@ -318,6 +318,7 @@ fun showProhibitedToInviteIncognitoAlertDialog() {
 fun PreviewAddGroupMembersLayout() {
   SimpleXTheme {
     AddGroupMembersLayout(
+      chatModelIncognito = false,
       groupInfo = GroupInfo.sampleData,
       creatingGroup = false,
       contactsToAdd = listOf(Contact.sampleData, Contact.sampleData, Contact.sampleData),

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

@@ -1,7 +1,8 @@
 package chat.simplex.app.views.chat.group
 
 import InfoRow
-import SectionDivider
+import SectionBottomSpacer
+import SectionDividerSpaced
 import SectionItemView
 import SectionSpacer
 import SectionTextFooter
@@ -11,12 +12,11 @@ import androidx.activity.compose.BackHandler
 import androidx.compose.foundation.*
 import androidx.compose.foundation.layout.*
 import androidx.compose.material.*
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.outlined.*
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextOverflow
@@ -108,7 +108,7 @@ fun deleteGroupDialog(chatInfo: ChatInfo, groupInfo: GroupInfo, chatModel: ChatM
   val alertTextKey =
     if (groupInfo.membership.memberCurrent) R.string.delete_group_for_all_members_cannot_undo_warning
     else R.string.delete_group_for_self_cannot_undo_warning
-  AlertManager.shared.showAlertMsg(
+  AlertManager.shared.showAlertDialog(
     title = generalGetString(R.string.delete_group_question),
     text = generalGetString(alertTextKey),
     confirmText = generalGetString(R.string.delete_verb),
@@ -122,12 +122,13 @@ fun deleteGroupDialog(chatInfo: ChatInfo, groupInfo: GroupInfo, chatModel: ChatM
           close?.invoke()
         }
       }
-    }
+    },
+    destructive = true,
   )
 }
 
 fun leaveGroupDialog(groupInfo: GroupInfo, chatModel: ChatModel, close: (() -> Unit)? = null) {
-  AlertManager.shared.showAlertMsg(
+  AlertManager.shared.showAlertDialog(
     title = generalGetString(R.string.leave_group_question),
     text = generalGetString(R.string.you_will_stop_receiving_messages_from_this_group_chat_history_will_be_preserved),
     confirmText = generalGetString(R.string.leave_group_button),
@@ -136,7 +137,8 @@ fun leaveGroupDialog(groupInfo: GroupInfo, chatModel: ChatModel, close: (() -> U
         chatModel.controller.leaveGroup(groupInfo.groupId)
         close?.invoke()
       }
-    }
+    },
+    destructive = true,
   )
 }
 
@@ -160,8 +162,7 @@ fun GroupChatInfoLayout(
   Column(
     Modifier
       .fillMaxWidth()
-      .verticalScroll(rememberScrollState()),
-    horizontalAlignment = Alignment.Start
+      .verticalScroll(rememberScrollState())
   ) {
     Row(
       Modifier.fillMaxWidth(),
@@ -173,63 +174,50 @@ fun GroupChatInfoLayout(
 
     SectionView {
       if (groupInfo.canEdit) {
-        SectionItemView(editGroupProfile) { EditGroupProfileButton() }
-        SectionDivider()
-        SectionItemView(addOrEditWelcomeMessage) { AddOrEditWelcomeMessage(groupInfo.groupProfile.description) }
-        SectionDivider()
+        EditGroupProfileButton(editGroupProfile)
+        AddOrEditWelcomeMessage(groupInfo.groupProfile.description, addOrEditWelcomeMessage)
       }
       GroupPreferencesButton(openPreferences)
     }
     SectionTextFooter(stringResource(R.string.only_group_owners_can_change_prefs))
-    SectionSpacer()
+    SectionDividerSpaced(maxTopPadding = true)
 
     SectionView(title = String.format(generalGetString(R.string.group_info_section_title_num_members), members.count() + 1)) {
       if (groupInfo.canAddMembers) {
-        SectionItemView(manageGroupLink) {
-          if (groupLink == null) {
-            CreateGroupLinkButton()
-          } else {
-            GroupLinkButton()
-          }
+        if (groupLink == null) {
+          CreateGroupLinkButton(manageGroupLink)
+        } else {
+          GroupLinkButton(manageGroupLink)
         }
-        SectionDivider()
+
         val onAddMembersClick = if (chat.chatInfo.incognito) ::cantInviteIncognitoAlert else addMembers
-        SectionItemView(onAddMembersClick) {
-          val tint = if (chat.chatInfo.incognito) HighOrLowlight else MaterialTheme.colors.primary
-          AddMembersButton(tint)
-        }
-        SectionDivider()
+        val tint = if (chat.chatInfo.incognito) MaterialTheme.colors.secondary else MaterialTheme.colors.primary
+        AddMembersButton(tint, onAddMembersClick)
       }
-      SectionItemView(minHeight = 50.dp) {
+      SectionItemView(minHeight = 54.dp) {
         MemberRow(groupInfo.membership, user = true)
       }
-      if (members.isNotEmpty()) {
-        SectionDivider()
-      }
       MembersList(members, showMemberInfo)
     }
-    SectionSpacer()
+    SectionDividerSpaced(maxTopPadding = true, maxBottomPadding = false)
     SectionView {
       ClearChatButton(clearChat)
       if (groupInfo.canDelete) {
-        SectionDivider()
-        SectionItemView(deleteGroup) { DeleteGroupButton() }
+        DeleteGroupButton(deleteGroup)
       }
       if (groupInfo.membership.memberCurrent) {
-        SectionDivider()
-        SectionItemView(leaveGroup) { LeaveGroupButton() }
+        LeaveGroupButton(leaveGroup)
       }
     }
-    SectionSpacer()
 
     if (developerTools) {
+      SectionDividerSpaced()
       SectionView(title = stringResource(R.string.section_title_for_console)) {
         InfoRow(stringResource(R.string.info_row_local_name), groupInfo.localDisplayName)
-        SectionDivider()
         InfoRow(stringResource(R.string.info_row_database_id), groupInfo.apiId.toString())
       }
-      SectionSpacer()
     }
+    SectionBottomSpacer()
   }
 }
 
@@ -260,38 +248,31 @@ private fun GroupChatInfoHeader(cInfo: ChatInfo) {
 @Composable
 private fun GroupPreferencesButton(onClick: () -> Unit) {
   SettingsActionItem(
-    Icons.Outlined.ToggleOn,
+    painterResource(R.drawable.ic_toggle_on),
     stringResource(R.string.group_preferences),
     click = onClick
   )
 }
 
 @Composable
-private fun AddMembersButton(tint: Color = MaterialTheme.colors.primary) {
-  Row(
-    Modifier.fillMaxSize(),
-    verticalAlignment = Alignment.CenterVertically
-  ) {
-    Icon(
-      Icons.Outlined.Add,
-      stringResource(R.string.button_add_members),
-      tint = tint
-    )
-    Spacer(Modifier.size(8.dp))
-    Text(stringResource(R.string.button_add_members), color = tint)
-  }
+private fun AddMembersButton(tint: Color = MaterialTheme.colors.primary, onClick: () -> Unit) {
+  SettingsActionItem(
+    painterResource(R.drawable.ic_add),
+    stringResource(R.string.button_add_members),
+    onClick,
+    iconColor = tint,
+    textColor = tint
+  )
 }
 
 @Composable
 private fun MembersList(members: List<GroupMember>, showMemberInfo: (GroupMember) -> Unit) {
   Column {
     members.forEachIndexed { index, member ->
-      SectionItemView({ showMemberInfo(member) }, minHeight = 50.dp) {
+      Divider()
+      SectionItemView({ showMemberInfo(member) }, minHeight = 54.dp) {
         MemberRow(member)
       }
-      if (index < members.lastIndex) {
-        SectionDivider()
-      }
     }
   }
 }
@@ -309,6 +290,7 @@ private fun MemberRow(member: GroupMember, user: Boolean = false) {
       horizontalArrangement = Arrangement.spacedBy(4.dp)
     ) {
       ProfileImage(size = 46.dp, member.image)
+      Spacer(Modifier.width(DEFAULT_PADDING_HALF))
       Column {
         Row(verticalAlignment = Alignment.CenterVertically) {
           if (member.verified) {
@@ -323,7 +305,7 @@ private fun MemberRow(member: GroupMember, user: Boolean = false) {
         val statusDescr = if (user) String.format(generalGetString(R.string.group_info_member_you), s) else s
         Text(
           statusDescr,
-          color = HighOrLowlight,
+          color = MaterialTheme.colors.secondary,
           fontSize = 12.sp,
           maxLines = 1,
           overflow = TextOverflow.Ellipsis
@@ -332,119 +314,81 @@ private fun MemberRow(member: GroupMember, user: Boolean = false) {
     }
     val role = member.memberRole
     if (role == GroupMemberRole.Owner || role == GroupMemberRole.Admin) {
-      Text(role.text, color = HighOrLowlight)
+      Text(role.text, color = MaterialTheme.colors.secondary)
     }
   }
 }
 
 @Composable
 private fun MemberVerifiedShield() {
-  Icon(Icons.Outlined.VerifiedUser, null, Modifier.padding(end = 3.dp).size(16.dp), tint = HighOrLowlight)
+  Icon(painterResource(R.drawable.ic_verified_user), null, Modifier.padding(end = 3.dp).size(16.dp), tint = MaterialTheme.colors.secondary)
 }
 
 @Composable
-private fun GroupLinkButton() {
-  Row(
-    Modifier
-      .fillMaxSize(),
-    verticalAlignment = Alignment.CenterVertically
-  ) {
-    Icon(
-      Icons.Outlined.Link,
-      stringResource(R.string.group_link),
-      tint = HighOrLowlight
-    )
-    Spacer(Modifier.size(8.dp))
-    Text(stringResource(R.string.group_link))
-  }
+private fun GroupLinkButton(onClick: () -> Unit) {
+  SettingsActionItem(
+    painterResource(R.drawable.ic_link),
+    stringResource(R.string.group_link),
+    onClick,
+    iconColor = MaterialTheme.colors.secondary
+  )
 }
 
 @Composable
-private fun CreateGroupLinkButton() {
-  Row(
-    Modifier
-      .fillMaxSize(),
-    verticalAlignment = Alignment.CenterVertically
-  ) {
-    Icon(
-      Icons.Outlined.AddLink,
-      stringResource(R.string.create_group_link),
-      tint = HighOrLowlight
-    )
-    Spacer(Modifier.size(8.dp))
-    Text(stringResource(R.string.create_group_link))
-  }
+private fun CreateGroupLinkButton(onClick: () -> Unit) {
+  SettingsActionItem(
+    painterResource(R.drawable.ic_add_link),
+    stringResource(R.string.create_group_link),
+    onClick,
+    iconColor = MaterialTheme.colors.secondary
+  )
 }
 
 @Composable
-fun EditGroupProfileButton() {
-  Row(
-    Modifier
-      .fillMaxSize(),
-    verticalAlignment = Alignment.CenterVertically
-  ) {
-    Icon(
-      Icons.Outlined.Edit,
-      stringResource(R.string.button_edit_group_profile),
-      tint = HighOrLowlight
-    )
-    Spacer(Modifier.size(8.dp))
-    Text(stringResource(R.string.button_edit_group_profile))
-  }
+fun EditGroupProfileButton(onClick: () -> Unit) {
+  SettingsActionItem(
+    painterResource(R.drawable.ic_edit),
+    stringResource(R.string.button_edit_group_profile),
+    onClick,
+    iconColor = MaterialTheme.colors.secondary
+  )
 }
 
 @Composable
-private fun AddOrEditWelcomeMessage(welcomeMessage: String?) {
+private fun AddOrEditWelcomeMessage(welcomeMessage: String?, onClick: () -> Unit) {
   val text = if (welcomeMessage == null) {
     stringResource(R.string.button_add_welcome_message)
   } else {
     stringResource(R.string.button_welcome_message)
   }
-  Row(
-    Modifier
-      .fillMaxSize(),
-    verticalAlignment = Alignment.CenterVertically
-  ) {
-    Icon(
-      Icons.Outlined.MapsUgc,
-      text,
-      tint = HighOrLowlight
-    )
-    Spacer(Modifier.size(8.dp))
-    Text(text)
-  }
+  SettingsActionItem(
+    painterResource(R.drawable.ic_maps_ugc),
+    text,
+    onClick,
+    iconColor = MaterialTheme.colors.secondary
+  )
 }
 
 @Composable
-private fun LeaveGroupButton() {
-  Row(
-    Modifier.fillMaxSize(),
-    verticalAlignment = Alignment.CenterVertically
-  ) {
-    Icon(
-      Icons.Outlined.Logout,
-      stringResource(R.string.button_leave_group),
-      tint = Color.Red
-    )
-    Spacer(Modifier.size(8.dp))
-    Text(stringResource(R.string.button_leave_group), color = Color.Red)
-  }
+private fun LeaveGroupButton(onClick: () -> Unit) {
+  SettingsActionItem(
+    painterResource(R.drawable.ic_logout),
+    stringResource(R.string.button_leave_group),
+    onClick,
+    iconColor = Color.Red,
+    textColor = Color.Red
+  )
 }
 
 @Composable
-private fun DeleteGroupButton() {
-  Row(
-    Modifier.fillMaxSize(),
-    verticalAlignment = Alignment.CenterVertically
-  ) {
-    Icon(
-      Icons.Outlined.Delete,
-      stringResource(R.string.button_delete_group),
-      tint = Color.Red
-    )
-    Spacer(Modifier.size(8.dp))
-    Text(stringResource(R.string.button_delete_group), color = Color.Red)
-  }
+private fun DeleteGroupButton(onClick: () -> Unit) {
+  SettingsActionItem(
+    painterResource(R.drawable.ic_delete),
+    stringResource(R.string.button_delete_group),
+    onClick,
+    iconColor = Color.Red,
+    textColor = Color.Red
+  )
 }
 
 @Preview

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

@@ -1,19 +1,17 @@
 package chat.simplex.app.views.chat.group
 
-import SectionItemView
+import SectionBottomSpacer
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
-import androidx.compose.material.CircularProgressIndicator
-import androidx.compose.material.Text
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.outlined.*
+import androidx.compose.material.*
 import androidx.compose.runtime.*
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
@@ -67,7 +65,7 @@ fun GroupLinkView(chatModel: ChatModel, groupInfo: GroupInfo, connReqContact: St
       }
     },
     deleteLink = {
-      AlertManager.shared.showAlertMsg(
+      AlertManager.shared.showAlertDialog(
         title = generalGetString(R.string.delete_link_question),
         text = generalGetString(R.string.all_group_members_will_remain_connected),
         confirmText = generalGetString(R.string.delete_verb),
@@ -79,7 +77,8 @@ fun GroupLinkView(chatModel: ChatModel, groupInfo: GroupInfo, connReqContact: St
               onGroupLinkUpdated(null to null)
             }
           }
-        }
+        },
+        destructive = true,
       )
     }
   )
@@ -101,15 +100,12 @@ fun GroupLinkLayout(
 ) {
   Column(
     Modifier
-      .verticalScroll(rememberScrollState())
-      .padding(start = DEFAULT_PADDING, bottom = DEFAULT_BOTTOM_PADDING, end = DEFAULT_PADDING),
-    horizontalAlignment = Alignment.Start,
-    verticalArrangement = Arrangement.Top
+      .verticalScroll(rememberScrollState()),
   ) {
-    AppBarTitle(stringResource(R.string.group_link), false)
+    AppBarTitle(stringResource(R.string.group_link))
     Text(
       stringResource(R.string.you_can_share_group_link_anybody_will_be_able_to_connect),
-      Modifier.padding(bottom = 12.dp),
+      Modifier.padding(start = DEFAULT_PADDING, end = DEFAULT_PADDING, bottom = 12.dp),
       lineHeight = 22.sp
     )
     Column(
@@ -118,11 +114,9 @@ fun GroupLinkLayout(
       verticalArrangement = Arrangement.SpaceEvenly
     ) {
       if (groupLink == null) {
-        SimpleButton(stringResource(R.string.button_create_group_link), icon = Icons.Outlined.AddLink, disabled = creatingLink, click = createLink)
+        SimpleButton(stringResource(R.string.button_create_group_link), icon = painterResource(R.drawable.ic_add_link), disabled = creatingLink, click = createLink)
       } else {
-        SectionItemView(padding = PaddingValues(bottom = DEFAULT_PADDING)) {
-          RoleSelectionRow(groupInfo, groupLinkMemberRole)
-        }
+        RoleSelectionRow(groupInfo, groupLinkMemberRole)
         var initialLaunch by remember { mutableStateOf(true) }
         LaunchedEffect(groupLinkMemberRole.value) {
           if (!initialLaunch) {
@@ -130,26 +124,27 @@ fun GroupLinkLayout(
           }
           initialLaunch = false
         }
-        QRCode(groupLink, Modifier.aspectRatio(1f))
+        QRCode(groupLink, Modifier.aspectRatio(1f).padding(horizontal = DEFAULT_PADDING))
         Row(
           horizontalArrangement = Arrangement.spacedBy(10.dp),
           verticalAlignment = Alignment.CenterVertically,
-          modifier = Modifier.padding(vertical = 10.dp)
+          modifier = Modifier.padding(horizontal = DEFAULT_PADDING, vertical = 10.dp)
         ) {
           SimpleButton(
             stringResource(R.string.share_link),
-            icon = Icons.Outlined.Share,
+            icon = painterResource(R.drawable.ic_share),
             click = share
           )
           SimpleButton(
             stringResource(R.string.delete_link),
-            icon = Icons.Outlined.Delete,
+            icon = painterResource(R.drawable.ic_delete),
             color = Color.Red,
             click = deleteLink
           )
         }
       }
     }
+    SectionBottomSpacer()
   }
 }
 
@@ -166,9 +161,8 @@ private fun RoleSelectionRow(groupInfo: GroupInfo, selectedRole: MutableState<Gr
       values,
       selectedRole,
       icon = null,
-      enabled = rememberUpdatedState(enabled),
-      onSelected = { selectedRole.value = it }
-    )
+      enabled = rememberUpdatedState(enabled)
+    ) { selectedRole.value = it }
   }
 }
 
@@ -182,7 +176,7 @@ fun ProgressIndicator() {
       Modifier
         .padding(horizontal = 2.dp)
         .size(30.dp),
-      color = HighOrLowlight,
+      color = MaterialTheme.colors.secondary,
       strokeWidth = 2.5.dp
     )
   }

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

@@ -1,20 +1,19 @@
 package chat.simplex.app.views.chat.group
 
 import InfoRow
-import SectionDivider
-import SectionItemView
+import SectionBottomSpacer
+import SectionDividerSpaced
 import SectionSpacer
 import SectionView
 import androidx.activity.compose.BackHandler
 import androidx.compose.foundation.*
 import androidx.compose.foundation.layout.*
 import androidx.compose.material.*
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.outlined.*
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextOverflow
@@ -117,7 +116,7 @@ fun GroupMemberInfoView(
 }
 
 fun removeMemberDialog(groupInfo: GroupInfo, member: GroupMember, chatModel: ChatModel, close: (() -> Unit)? = null) {
-  AlertManager.shared.showAlertMsg(
+  AlertManager.shared.showAlertDialog(
     title = generalGetString(R.string.button_remove_member),
     text = generalGetString(R.string.member_will_be_removed_from_group_cannot_be_undone),
     confirmText = generalGetString(R.string.remove_member_confirmation),
@@ -129,7 +128,8 @@ fun removeMemberDialog(groupInfo: GroupInfo, member: GroupMember, chatModel: Cha
         }
         close?.invoke()
       }
-    }
+    },
+    destructive = true,
   )
 }
 
@@ -152,7 +152,6 @@ fun GroupMemberInfoLayout(
     Modifier
       .fillMaxWidth()
       .verticalScroll(rememberScrollState()),
-    horizontalAlignment = Alignment.Start
   ) {
     Row(
       Modifier.fillMaxWidth(),
@@ -169,9 +168,6 @@ fun GroupMemberInfoLayout(
           val chat = getContactChat(contactId)
           if ((chat != null && chat.chatInfo is ChatInfo.Direct && chat.chatInfo.contact.directOrUsed) || groupInfo.fullGroupPreferences.directMessages.on) {
             OpenChatButton(onClick = { openDirectChat(contactId) })
-            if (connectionCode != null) {
-              SectionDivider()
-            }
           }
           if (connectionCode != null) {
             VerifyCodeButton(member.verified, verifyClicked)
@@ -183,36 +179,30 @@ fun GroupMemberInfoLayout(
 
     SectionView(title = stringResource(R.string.member_info_section_title_member)) {
       InfoRow(stringResource(R.string.info_row_group), groupInfo.displayName)
-      SectionDivider()
       val roles = remember { member.canChangeRoleTo(groupInfo) }
       if (roles != null) {
-        SectionItemView {
-          RoleSelectionRow(roles, newRole, onRoleSelected)
-        }
+        RoleSelectionRow(roles, newRole, onRoleSelected)
       } else {
         InfoRow(stringResource(R.string.role_in_group), member.memberRole.text)
       }
       val conn = member.activeConn
       if (conn != null) {
-        SectionDivider()
         val connLevelDesc =
           if (conn.connLevel == 0) stringResource(R.string.conn_level_desc_direct)
           else String.format(generalGetString(R.string.conn_level_desc_indirect), conn.connLevel)
         InfoRow(stringResource(R.string.info_row_connection), connLevelDesc)
       }
     }
-    SectionSpacer()
     if (connStats != null) {
+      SectionDividerSpaced()
       SectionView(title = stringResource(R.string.conn_stats_section_title_servers)) {
       SwitchAddressButton(switchMemberAddress)
-      SectionDivider()
         val rcvServers = connStats.rcvServers
         val sndServers = connStats.sndServers
         if ((rcvServers != null && rcvServers.isNotEmpty()) || (sndServers != null && sndServers.isNotEmpty())) {
           if (rcvServers != null && rcvServers.isNotEmpty()) {
             SimplexServers(stringResource(R.string.receiving_via), rcvServers)
             if (sndServers != null && sndServers.isNotEmpty()) {
-              SectionDivider()
               SimplexServers(stringResource(R.string.sending_via), sndServers)
             }
           } else if (sndServers != null && sndServers.isNotEmpty()) {
@@ -220,24 +210,23 @@ fun GroupMemberInfoLayout(
           }
         }
       }
-      SectionSpacer()
     }
 
     if (member.canBeRemoved(groupInfo)) {
+      SectionDividerSpaced(maxBottomPadding = false)
       SectionView {
         RemoveMemberButton(removeMember)
       }
-      SectionSpacer()
     }
 
     if (developerTools) {
+      SectionDividerSpaced()
       SectionView(title = stringResource(R.string.section_title_for_console)) {
         InfoRow(stringResource(R.string.info_row_local_name), member.localDisplayName)
-        SectionDivider()
         InfoRow(stringResource(R.string.info_row_database_id), member.groupMemberId.toString())
       }
-      SectionSpacer()
     }
+    SectionBottomSpacer()
   }
 }
 
@@ -250,7 +239,7 @@ fun GroupMemberInfoHeader(member: GroupMember) {
     ProfileImage(size = 192.dp, member.image, color = if (isInDarkTheme()) GroupDark else SettingsSecondaryLight)
     Row(verticalAlignment = Alignment.CenterVertically) {
       if (member.verified) {
-        Icon(Icons.Outlined.VerifiedUser, null, Modifier.padding(end = 6.dp, top = 4.dp).size(24.dp), tint = HighOrLowlight)
+        Icon(painterResource(R.drawable.ic_verified_user), null, Modifier.padding(end = 6.dp, top = 4.dp).size(24.dp), tint = MaterialTheme.colors.secondary)
       }
       Text(
         member.displayName, style = MaterialTheme.typography.h1.copy(fontWeight = FontWeight.Normal),
@@ -273,7 +262,7 @@ fun GroupMemberInfoHeader(member: GroupMember) {
 @Composable
 fun RemoveMemberButton(onClick: () -> Unit) {
   SettingsActionItem(
-    Icons.Outlined.Delete,
+    painterResource(R.drawable.ic_delete),
     stringResource(R.string.button_remove_member),
     click = onClick,
     textColor = Color.Red,
@@ -284,7 +273,7 @@ fun RemoveMemberButton(onClick: () -> Unit) {
 @Composable
 fun OpenChatButton(onClick: () -> Unit) {
   SettingsActionItem(
-    Icons.Outlined.Message,
+    painterResource(R.drawable.ic_chat),
     stringResource(R.string.button_send_direct_message),
     click = onClick,
     textColor = MaterialTheme.colors.primary,

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

@@ -1,9 +1,9 @@
 package chat.simplex.app.views.chat.group
 
 import InfoRow
-import SectionDivider
+import SectionBottomSpacer
+import SectionDividerSpaced
 import SectionItemView
-import SectionSpacer
 import SectionTextFooter
 import SectionView
 import androidx.compose.foundation.*
@@ -12,7 +12,6 @@ import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Text
 import androidx.compose.runtime.*
 import androidx.compose.runtime.saveable.rememberSaveable
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
 import chat.simplex.app.R
@@ -45,7 +44,6 @@ fun GroupPreferencesView(m: ChatModel, chatId: String, close: () -> Unit,) {
       if (preferences == currentPreferences) close()
       else showUnsavedChangesAlert({ savePrefs(close) }, close)
     },
-    background = if (isInDarkTheme()) MaterialTheme.colors.background else SettingsBackgroundLight
   ) {
     GroupPreferencesLayout(
       preferences,
@@ -73,7 +71,6 @@ private fun GroupPreferencesLayout(
 ) {
   Column(
     Modifier.fillMaxWidth().verticalScroll(rememberScrollState()),
-    horizontalAlignment = Alignment.Start,
   ) {
     AppBarTitle(stringResource(R.string.group_preferences))
     val timedMessages = remember(preferences) { mutableStateOf(preferences.timedMessages.enable) }
@@ -87,29 +84,30 @@ private fun GroupPreferencesLayout(
         applyPrefs(preferences.copy(timedMessages = TimedMessagesGroupPreference(enable = enable, ttl = currentPreferences.timedMessages.ttl)))
       }
     }
-    SectionSpacer()
+    SectionDividerSpaced(true, maxBottomPadding = false)
     val allowDirectMessages = remember(preferences) { mutableStateOf(preferences.directMessages.enable) }
     FeatureSection(GroupFeature.DirectMessages, allowDirectMessages, groupInfo, preferences, onTTLUpdated) {
       applyPrefs(preferences.copy(directMessages = GroupPreference(enable = it)))
     }
-    SectionSpacer()
+    SectionDividerSpaced(true, maxBottomPadding = false)
     val allowFullDeletion = remember(preferences) { mutableStateOf(preferences.fullDelete.enable) }
     FeatureSection(GroupFeature.FullDelete, allowFullDeletion, groupInfo, preferences, onTTLUpdated) {
       applyPrefs(preferences.copy(fullDelete = GroupPreference(enable = it)))
     }
-    SectionSpacer()
+    SectionDividerSpaced(true, maxBottomPadding = false)
     val allowVoice = remember(preferences) { mutableStateOf(preferences.voice.enable) }
     FeatureSection(GroupFeature.Voice, allowVoice, groupInfo, preferences, onTTLUpdated) {
       applyPrefs(preferences.copy(voice = GroupPreference(enable = it)))
     }
     if (groupInfo.canEdit) {
-      SectionSpacer()
+      SectionDividerSpaced(maxTopPadding = true, maxBottomPadding = false)
       ResetSaveButtons(
         reset = reset,
         save = savePrefs,
         disabled = preferences == currentPreferences
       )
     }
+    SectionBottomSpacer()
   }
 }
 
@@ -124,22 +122,19 @@ private fun FeatureSection(
 ) {
   SectionView {
     val on = enableFeature.value == GroupFeatureEnabled.ON
-    val icon = if (on) feature.iconFilled else feature.icon
-    val iconTint = if (on) SimplexGreen else HighOrLowlight
+    val icon = if (on) feature.iconFilled() else feature.icon
+    val iconTint = if (on) SimplexGreen else MaterialTheme.colors.secondary
     val timedOn = feature == GroupFeature.TimedMessages && enableFeature.value == GroupFeatureEnabled.ON
     if (groupInfo.canEdit) {
-      SectionItemView {
-        PreferenceToggleWithIcon(
-          feature.text,
-          icon,
-          iconTint,
-          enableFeature.value == GroupFeatureEnabled.ON,
-        ) { checked ->
-          onSelected(if (checked) GroupFeatureEnabled.ON else GroupFeatureEnabled.OFF)
-        }
+      PreferenceToggleWithIcon(
+        feature.text,
+        icon,
+        iconTint,
+        enableFeature.value == GroupFeatureEnabled.ON,
+      ) { checked ->
+        onSelected(if (checked) GroupFeatureEnabled.ON else GroupFeatureEnabled.OFF)
       }
       if (timedOn) {
-        SectionDivider()
         val ttl = rememberSaveable(preferences.timedMessages) { mutableStateOf(preferences.timedMessages.ttl) }
         TimedMessagesTTLPicker(ttl, onTTLUpdated)
       }
@@ -151,7 +146,6 @@ private fun FeatureSection(
         iconTint = iconTint,
       )
       if (timedOn) {
-        SectionDivider()
         InfoRow(generalGetString(R.string.delete_after), TimedMessagesPreference.ttlText(preferences.timedMessages.ttl))
       }
     }
@@ -163,11 +157,10 @@ private fun FeatureSection(
 private fun ResetSaveButtons(reset: () -> Unit, save: () -> Unit, disabled: Boolean) {
   SectionView {
     SectionItemView(reset, disabled = disabled) {
-      Text(stringResource(R.string.reset_verb), color = if (disabled) HighOrLowlight else MaterialTheme.colors.primary)
+      Text(stringResource(R.string.reset_verb), color = if (disabled) MaterialTheme.colors.secondary else MaterialTheme.colors.primary)
     }
-    SectionDivider()
     SectionItemView(save, disabled = disabled) {
-      Text(stringResource(R.string.save_and_notify_group_members), color = if (disabled) HighOrLowlight else MaterialTheme.colors.primary)
+      Text(stringResource(R.string.save_and_notify_group_members), color = if (disabled) MaterialTheme.colors.secondary else MaterialTheme.colors.primary)
     }
   }
 }

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

@@ -1,7 +1,7 @@
 package chat.simplex.app.views.chat.group
 
+import SectionBottomSpacer
 import android.content.res.Configuration
-import android.graphics.Bitmap
 import android.net.Uri
 import androidx.compose.foundation.*
 import androidx.compose.foundation.layout.*
@@ -14,6 +14,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.FocusRequester
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.stringResource
+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
@@ -23,6 +24,7 @@ import chat.simplex.app.ui.theme.*
 import chat.simplex.app.views.ProfileNameField
 import chat.simplex.app.views.helpers.*
 import chat.simplex.app.views.isValidDisplayName
+import chat.simplex.app.views.onboarding.ReadableText
 import chat.simplex.app.views.usersettings.*
 import com.google.accompanist.insets.ProvideWindowInsets
 import com.google.accompanist.insets.navigationBarsWithImePadding
@@ -53,14 +55,32 @@ fun GroupProfileLayout(
   saveProfile: (GroupProfile) -> Unit,
 ) {
   val bottomSheetModalState = rememberModalBottomSheetState(initialValue = ModalBottomSheetValue.Hidden)
-  val displayName = remember { mutableStateOf(groupProfile.displayName) }
-  val fullName = remember { mutableStateOf(groupProfile.fullName) }
+  val displayName = rememberSaveable { mutableStateOf(groupProfile.displayName) }
+  val fullName = rememberSaveable { mutableStateOf(groupProfile.fullName) }
   val chosenImage = rememberSaveable { mutableStateOf<Uri?>(null) }
   val profileImage = rememberSaveable { mutableStateOf(groupProfile.image) }
   val scope = rememberCoroutineScope()
   val scrollState = rememberScrollState()
   val focusRequester = remember { FocusRequester() }
-
+  val dataUnchanged =
+    displayName.value == groupProfile.displayName &&
+        fullName.value == groupProfile.fullName &&
+        groupProfile.image == profileImage.value
+  val closeWithAlert = {
+    if (dataUnchanged || !(displayName.value.isNotEmpty() && isValidDisplayName(displayName.value))) {
+      close()
+    } else {
+      showUnsavedChangesAlert({
+        saveProfile(
+          groupProfile.copy(
+            displayName = displayName.value,
+            fullName = fullName.value,
+            image = profileImage.value
+          )
+        )
+      }, close)
+    }
+  }
   ProvideWindowInsets(windowInsetsAnimationsEnabled = true) {
     ModalBottomSheetLayout(
       scrimColor = Color.Black.copy(alpha = 0.12F),
@@ -76,23 +96,16 @@ fun GroupProfileLayout(
       sheetState = bottomSheetModalState,
       sheetShape = RoundedCornerShape(topStart = 18.dp, topEnd = 18.dp)
     ) {
-      ModalView(close = close) {
+      ModalView(close = closeWithAlert) {
         Column(
           Modifier
             .verticalScroll(scrollState)
-            .padding(horizontal = DEFAULT_PADDING),
-          horizontalAlignment = Alignment.Start
         ) {
-          Text(
-            stringResource(R.string.group_profile_is_stored_on_members_devices),
-            Modifier.padding(bottom = 24.dp),
-            color = MaterialTheme.colors.onBackground,
-            lineHeight = 22.sp
-          )
           Column(
-            Modifier.fillMaxWidth(),
-            horizontalAlignment = Alignment.Start
+            Modifier.fillMaxWidth()
+              .padding(horizontal = DEFAULT_PADDING)
           ) {
+            ReadableText(R.string.group_profile_is_stored_on_members_devices, TextAlign.Center)
             Box(
               Modifier
                 .fillMaxWidth()
@@ -101,7 +114,7 @@ fun GroupProfileLayout(
             ) {
               Box(contentAlignment = Alignment.TopEnd) {
                 Box(contentAlignment = Alignment.Center) {
-                  ProfileImage(192.dp, profileImage.value)
+                  ProfileImage(108.dp, profileImage.value, color = MaterialTheme.colors.secondary.copy(alpha = 0.1f))
                   EditImageButton { scope.launch { bottomSheetModalState.show() } }
                 }
                 if (profileImage.value != null) {
@@ -109,51 +122,54 @@ fun GroupProfileLayout(
                 }
               }
             }
-            Text(
-              stringResource(R.string.group_display_name_field),
-              Modifier.padding(bottom = 3.dp)
-            )
-            ProfileNameField(displayName, focusRequester)
-            val errorText = if (!isValidDisplayName(displayName.value)) stringResource(R.string.display_name_cannot_contain_whitespace) else ""
-            Text(
-              errorText,
-              fontSize = 15.sp,
-              color = MaterialTheme.colors.error
-            )
-            Spacer(Modifier.height(3.dp))
-            Text(
-              stringResource(R.string.group_full_name_field),
-              Modifier.padding(bottom = 5.dp)
-            )
-            ProfileNameField(fullName)
-            Spacer(Modifier.height(16.dp))
-            Row {
-              TextButton(stringResource(R.string.cancel_verb)) {
-                close.invoke()
-              }
-              Spacer(Modifier.padding(horizontal = 8.dp))
-              val enabled = displayName.value.isNotEmpty() && isValidDisplayName(displayName.value)
-              if (enabled) {
+            Row(Modifier.padding(bottom = DEFAULT_PADDING_HALF).fillMaxWidth(), horizontalArrangement = Arrangement.SpaceBetween) {
+              Text(
+                stringResource(R.string.group_display_name_field),
+                fontSize = 16.sp
+              )
+              if (!isValidDisplayName(displayName.value)) {
+                Spacer(Modifier.size(DEFAULT_PADDING_HALF))
                 Text(
-                  stringResource(R.string.save_group_profile),
-                  modifier = Modifier.clickable {
-                    saveProfile(groupProfile.copy(
-                      displayName = displayName.value,
-                      fullName = fullName.value,
-                      image = profileImage.value
-                    ))
-                  },
-                  color = MaterialTheme.colors.primary
-                )
-              } else {
-                Text(
-                  stringResource(R.string.save_group_profile),
-                  color = HighOrLowlight
+                  stringResource(R.string.no_spaces),
+                  fontSize = 16.sp,
+                  color = Color.Red
                 )
               }
             }
+            ProfileNameField(displayName, "", ::isValidDisplayName, focusRequester)
+            Spacer(Modifier.height(DEFAULT_PADDING))
+            Text(
+              stringResource(R.string.group_full_name_field),
+              fontSize = 16.sp,
+              modifier = Modifier.padding(bottom = DEFAULT_PADDING_HALF)
+            )
+            ProfileNameField(fullName)
+            Spacer(Modifier.height(DEFAULT_PADDING))
+            val enabled = !dataUnchanged && displayName.value.isNotEmpty() && isValidDisplayName(displayName.value)
+            if (enabled) {
+              Text(
+                stringResource(R.string.save_group_profile),
+                modifier = Modifier.clickable {
+                  saveProfile(
+                    groupProfile.copy(
+                      displayName = displayName.value,
+                      fullName = fullName.value,
+                      image = profileImage.value
+                    )
+                  )
+                },
+                color = MaterialTheme.colors.primary
+              )
+            } else {
+              Text(
+                stringResource(R.string.save_group_profile),
+                color = MaterialTheme.colors.secondary
+              )
+            }
           }
 
+          SectionBottomSpacer()
+
           LaunchedEffect(Unit) {
             delay(300)
             focusRequester.requestFocus()
@@ -164,6 +180,16 @@ fun GroupProfileLayout(
   }
 }
 
+private fun showUnsavedChangesAlert(save: () -> Unit, revert: () -> Unit) {
+  AlertManager.shared.showAlertDialogStacked(
+    title = generalGetString(R.string.save_preferences_question),
+    confirmText = generalGetString(R.string.save_and_notify_group_members),
+    dismissText = generalGetString(R.string.exit_without_saving),
+    onConfirm = save,
+    onDismiss = revert,
+  )
+}
+
 @Preview(showBackground = true)
 @Preview(
   uiMode = Configuration.UI_MODE_NIGHT_YES,

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

@@ -1,5 +1,6 @@
 package chat.simplex.app.views.chat.group
 
+import SectionBottomSpacer
 import SectionItemView
 import SectionSpacer
 import SectionView
@@ -44,7 +45,6 @@ fun GroupWelcomeView(m: ChatModel, groupInfo: GroupInfo, close: () -> Unit) {
       if (welcomeText.value == groupInfo.groupProfile.description || (welcomeText.value == "" && groupInfo.groupProfile.description == null)) close()
       else showUnsavedChangesAlert({ save(close) }, close)
     },
-    background = if (isInDarkTheme()) MaterialTheme.colors.background else SettingsBackgroundLight
   ) {
     GroupWelcomeLayout(
       welcomeText,
@@ -71,6 +71,7 @@ private fun GroupWelcomeLayout(
       save = save,
       disabled = welcomeText.value == groupInfo.groupProfile.description || (welcomeText.value == "" && groupInfo.groupProfile.description == null)
     )
+    SectionBottomSpacer()
   }
 }
 
@@ -78,7 +79,7 @@ private fun GroupWelcomeLayout(
 private fun SaveButton(save: () -> Unit, disabled: Boolean) {
   SectionView {
     SectionItemView(save, disabled = disabled) {
-      Text(stringResource(R.string.save_and_update_group_profile), color = if (disabled) HighOrLowlight else MaterialTheme.colors.primary)
+      Text(stringResource(R.string.save_and_update_group_profile), color = if (disabled) MaterialTheme.colors.secondary else MaterialTheme.colors.primary)
     }
   }
 }

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

@@ -1,15 +1,12 @@
 package chat.simplex.app.views.chat.item
 
 import androidx.compose.foundation.layout.*
-import androidx.compose.material.Icon
-import androidx.compose.material.Text
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.PhoneInTalk
-import androidx.compose.material.icons.outlined.*
+import androidx.compose.material.*
 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.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
@@ -24,28 +21,28 @@ fun CICallItemView(cInfo: ChatInfo, cItem: ChatItem, status: CICallStatus, durat
     Modifier
       .padding(horizontal = 4.dp)
       .padding(bottom = 8.dp), horizontalAlignment = Alignment.CenterHorizontally) {
-    @Composable fun ConnectingCallIcon() = Icon(Icons.Outlined.SettingsPhone, stringResource(R.string.icon_descr_call_connecting), tint = SimplexGreen)
+    @Composable fun ConnectingCallIcon() = Icon(painterResource(R.drawable.ic_settings_phone), stringResource(R.string.icon_descr_call_connecting), tint = SimplexGreen)
     when (status) {
       CICallStatus.Pending -> if (sent) {
-        Icon(Icons.Outlined.Call, stringResource(R.string.icon_descr_call_pending_sent))
+        Icon(painterResource(R.drawable.ic_call), stringResource(R.string.icon_descr_call_pending_sent))
       } else {
         AcceptCallButton(cInfo, acceptCall)
       }
-      CICallStatus.Missed -> Icon(Icons.Outlined.Call, stringResource(R.string.icon_descr_call_missed), tint = Color.Red)
-      CICallStatus.Rejected -> Icon(Icons.Outlined.CallEnd, stringResource(R.string.icon_descr_call_rejected), tint = Color.Red)
+      CICallStatus.Missed -> Icon(painterResource(R.drawable.ic_call), stringResource(R.string.icon_descr_call_missed), tint = Color.Red)
+      CICallStatus.Rejected -> Icon(painterResource(R.drawable.ic_call_end), stringResource(R.string.icon_descr_call_rejected), tint = Color.Red)
       CICallStatus.Accepted -> ConnectingCallIcon()
       CICallStatus.Negotiated -> ConnectingCallIcon()
-      CICallStatus.Progress -> Icon(Icons.Filled.PhoneInTalk, stringResource(R.string.icon_descr_call_progress), tint = SimplexGreen)
+      CICallStatus.Progress -> Icon(painterResource(R.drawable.ic_phone_in_talk_filled), stringResource(R.string.icon_descr_call_progress), tint = SimplexGreen)
       CICallStatus.Ended -> Row {
-        Icon(Icons.Outlined.CallEnd, stringResource(R.string.icon_descr_call_ended), tint = HighOrLowlight, modifier = Modifier.padding(end = 4.dp))
-        Text(durationText(duration), color = HighOrLowlight)
+        Icon(painterResource(R.drawable.ic_call_end), stringResource(R.string.icon_descr_call_ended), tint = MaterialTheme.colors.secondary, modifier = Modifier.padding(end = 4.dp))
+        Text(durationText(duration), color = MaterialTheme.colors.secondary)
       }
       CICallStatus.Error -> {}
     }
 
     Text(
       cItem.timestampText,
-      color = HighOrLowlight,
+      color = MaterialTheme.colors.secondary,
       fontSize = 14.sp,
       modifier = Modifier.padding(start = 3.dp)
     )
@@ -55,9 +52,9 @@ fun CICallItemView(cInfo: ChatInfo, cItem: ChatItem, status: CICallStatus, durat
 @Composable
 fun AcceptCallButton(cInfo: ChatInfo, acceptCall: (Contact) -> Unit) {
   if (cInfo is ChatInfo.Direct) {
-    SimpleButton(stringResource(R.string.answer_call), Icons.Outlined.RingVolume) { acceptCall(cInfo.contact) }
+    SimpleButton(stringResource(R.string.answer_call), painterResource(R.drawable.ic_ring_volume)) { acceptCall(cInfo.contact) }
   } else {
-    Icon(Icons.Outlined.RingVolume, stringResource(R.string.answer_call), tint = HighOrLowlight)
+    Icon(painterResource(R.drawable.ic_ring_volume), stringResource(R.string.answer_call), tint = MaterialTheme.colors.secondary)
   }
 //    if case let .direct(contact) = chatInfo {
 //      Button {
@@ -154,4 +151,4 @@ fun AcceptCallButton(cInfo: ChatInfo, acceptCall: (Contact) -> Unit) {
 //      Image(systemName: "phone.arrow.down.left").foregroundColor(.secondary)
 //    }
 //  }
-//}
+//}

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

@@ -6,7 +6,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.graphics.vector.ImageVector
+import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import chat.simplex.app.model.*
@@ -16,14 +16,14 @@ fun CIChatFeatureView(
   chatItem: ChatItem,
   feature: Feature,
   iconColor: Color,
-  icon: ImageVector? = null
+  icon: Painter? = null
 ) {
   Row(
     Modifier.padding(horizontal = 6.dp, vertical = 6.dp),
     verticalAlignment = Alignment.CenterVertically,
     horizontalArrangement = Arrangement.spacedBy(4.dp)
   ) {
-    Icon(icon ?: feature.iconFilled, feature.text, Modifier.size(18.dp), tint = iconColor)
+    Icon(icon ?: feature.iconFilled(), feature.text, Modifier.size(18.dp), tint = iconColor)
     Text(
       chatEventText(chatItem),
       Modifier,

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

@@ -13,8 +13,7 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import chat.simplex.app.model.ChatItem
-import chat.simplex.app.ui.theme.HighOrLowlight
-import chat.simplex.app.ui.theme.SimpleXTheme
+import chat.simplex.app.ui.theme.*
 
 @Composable
 fun CIEventView(ci: ChatItem) {
@@ -22,28 +21,25 @@ fun CIEventView(ci: ChatItem) {
   fun chatEventTextView(text: AnnotatedString) {
     Text(text, style = MaterialTheme.typography.body1.copy(lineHeight = 22.sp))
   }
-
-  Surface {
-    Row(
-      Modifier.padding(horizontal = 6.dp, vertical = 6.dp),
-      verticalAlignment = Alignment.CenterVertically
-    ) {
-      val memberDisplayName = ci.memberDisplayName
-      if (memberDisplayName != null) {
-        chatEventTextView(
-          buildAnnotatedString {
-            withStyle(chatEventStyle) { append(memberDisplayName) }
-            append(" ")
-          }.plus(chatEventText(ci))
-        )
-      } else {
-        chatEventTextView(chatEventText(ci))
-      }
+  Row(
+    Modifier.padding(horizontal = 6.dp, vertical = 6.dp),
+    verticalAlignment = Alignment.CenterVertically
+  ) {
+    val memberDisplayName = ci.memberDisplayName
+    if (memberDisplayName != null) {
+      chatEventTextView(
+        buildAnnotatedString {
+          withStyle(chatEventStyle) { append(memberDisplayName) }
+          append(" ")
+        }.plus(chatEventText(ci))
+      )
+    } else {
+      chatEventTextView(chatEventText(ci))
     }
   }
 }
 
-val chatEventStyle = SpanStyle(fontSize = 12.sp, fontWeight = FontWeight.Light, color = HighOrLowlight)
+val chatEventStyle = SpanStyle(fontSize = 12.sp, fontWeight = FontWeight.Light, color = CurrentColors.value.colors.secondary)
 
 fun chatEventText(ci: ChatItem): AnnotatedString =
   buildAnnotatedString {

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

@@ -11,7 +11,6 @@ import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import chat.simplex.app.R
 import chat.simplex.app.model.*
-import chat.simplex.app.ui.theme.HighOrLowlight
 import chat.simplex.app.views.helpers.generalGetString
 
 @Composable
@@ -27,7 +26,7 @@ fun CIFeaturePreferenceView(
     verticalAlignment = Alignment.CenterVertically,
     horizontalArrangement = Arrangement.spacedBy(4.dp)
   ) {
-    Icon(feature.icon, feature.text, Modifier.size(18.dp), tint = HighOrLowlight)
+    Icon(feature.icon, feature.text, Modifier.size(18.dp), tint = MaterialTheme.colors.secondary)
     if (contact != null && allowed != FeatureAllowed.NO && contact.allowsFeature(feature) && !contact.userAllowsFeature(feature)) {
       val acceptStyle = SpanStyle(color = MaterialTheme.colors.primary, fontSize = 12.sp)
       val setParam = feature == ChatFeature.TimedMessages && contact.mergedPreferences.timedMessages.userPreference.pref.ttl == null
@@ -48,7 +47,7 @@ fun CIFeaturePreferenceView(
       )
     } else {
       Text(chatItem.content.text + "  " + chatItem.timestampText,
-        fontSize = 12.sp, fontWeight = FontWeight.Light, color = HighOrLowlight)
+        fontSize = 12.sp, fontWeight = FontWeight.Light, color = MaterialTheme.colors.secondary)
     }
   }
 }

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

@@ -6,18 +6,15 @@ import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.shape.CornerSize
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.*
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.Check
-import androidx.compose.material.icons.filled.InsertDriveFile
-import androidx.compose.material.icons.outlined.*
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.*
 import androidx.compose.ui.unit.dp
@@ -39,14 +36,14 @@ fun CIFileView(
 
   @Composable
   fun fileIcon(
-    innerIcon: ImageVector? = null,
+    innerIcon: Painter? = null,
     color: Color = if (isInDarkTheme()) FileDark else FileLight
   ) {
     Box(
       contentAlignment = Alignment.Center
     ) {
       Icon(
-        Icons.Filled.InsertDriveFile,
+        painterResource(R.drawable.ic_draft_filled),
         stringResource(R.string.icon_descr_file),
         Modifier.fillMaxSize(),
         tint = color
@@ -154,14 +151,15 @@ fun CIFileView(
               FileProtocol.XFTP -> progressCircle(file.fileStatus.sndProgress, file.fileStatus.sndTotal)
               FileProtocol.SMP -> progressIndicator()
             }
-          is CIFileStatus.SndComplete -> fileIcon(innerIcon = Icons.Filled.Check)
-          is CIFileStatus.SndCancelled -> fileIcon(innerIcon = Icons.Outlined.Close)
+          is CIFileStatus.SndComplete -> fileIcon(innerIcon = painterResource(R.drawable.ic_check_filled))
+          is CIFileStatus.SndCancelled -> fileIcon(innerIcon = painterResource(R.drawable.ic_close))
+          is CIFileStatus.SndError -> fileIcon(innerIcon = painterResource(R.drawable.ic_close))
           is CIFileStatus.RcvInvitation ->
             if (fileSizeValid())
-              fileIcon(innerIcon = Icons.Outlined.ArrowDownward, color = MaterialTheme.colors.primary)
+              fileIcon(innerIcon = painterResource(R.drawable.ic_arrow_downward), color = MaterialTheme.colors.primary)
             else
-              fileIcon(innerIcon = Icons.Outlined.PriorityHigh, color = WarningOrange)
-          is CIFileStatus.RcvAccepted -> fileIcon(innerIcon = Icons.Outlined.MoreHoriz)
+              fileIcon(innerIcon = painterResource(R.drawable.ic_priority_high), color = WarningOrange)
+          is CIFileStatus.RcvAccepted -> fileIcon(innerIcon = painterResource(R.drawable.ic_more_horiz))
           is CIFileStatus.RcvTransfer ->
             if (file.fileProtocol == FileProtocol.XFTP && file.fileStatus.rcvProgress < file.fileStatus.rcvTotal) {
               progressCircle(file.fileStatus.rcvProgress, file.fileStatus.rcvTotal)
@@ -169,7 +167,8 @@ fun CIFileView(
               progressIndicator()
             }
           is CIFileStatus.RcvComplete -> fileIcon()
-          is CIFileStatus.RcvCancelled -> fileIcon(innerIcon = Icons.Outlined.Close)
+          is CIFileStatus.RcvCancelled -> fileIcon(innerIcon = painterResource(R.drawable.ic_close))
+          is CIFileStatus.RcvError -> fileIcon(innerIcon = painterResource(R.drawable.ic_close))
         }
       } else {
         fileIcon()
@@ -188,16 +187,14 @@ fun CIFileView(
     else
       "                 "
     if (file != null) {
-      Column(
-        horizontalAlignment = Alignment.Start
-      ) {
+      Column {
         Text(
           file.fileName,
           maxLines = 1
         )
         Text(
           formatBytes(file.fileSize) + metaReserve,
-          color = HighOrLowlight,
+          color = MaterialTheme.colors.secondary,
           fontSize = 14.sp,
           maxLines = 1
         )

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

@@ -1,13 +1,10 @@
 package chat.simplex.app.views.chat.item
 
 import android.content.res.Configuration
-import android.util.Log
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.*
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.SupervisedUserCircle
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -46,7 +43,7 @@ fun CIGroupInvitationView(
         .padding(vertical = 4.dp)
         .padding(end = 2.dp)
     ) {
-      ProfileImage(size = 60.dp, image = groupInvitation.groupProfile.image, icon = Icons.Filled.SupervisedUserCircle, color = iconColor)
+      ProfileImage(size = 60.dp, image = groupInvitation.groupProfile.image, icon = R.drawable.ic_supervised_user_circle_filled, color = iconColor)
       Spacer(Modifier.padding(horizontal = 3.dp))
       Column(
         Modifier.defaultMinSize(minHeight = 60.dp),
@@ -71,12 +68,14 @@ fun CIGroupInvitationView(
     }
   }
 
+  val sentColor = CurrentColors.collectAsState().value.appColors.sentMessage
+  val receivedColor = CurrentColors.collectAsState().value.appColors.receivedMessage
   Surface(
     modifier = if (action) Modifier.clickable(onClick = {
       joinGroup(groupInvitation.groupId)
     }) else Modifier,
     shape = RoundedCornerShape(18.dp),
-    color = if (sent) SentColorLight else ReceivedColorLight,
+    color = if (sent) sentColor else receivedColor,
   ) {
     Box(
       Modifier
@@ -89,7 +88,6 @@ fun CIGroupInvitationView(
         Modifier
           .defaultMinSize(minWidth = 220.dp)
           .padding(bottom = 4.dp),
-        horizontalAlignment = Alignment.Start
       ) {
         groupInfoView()
         Column(Modifier.padding(top = 2.dp, start = 5.dp)) {
@@ -108,7 +106,7 @@ fun CIGroupInvitationView(
       }
       Text(
         ci.timestampText,
-        color = HighOrLowlight,
+        color = MaterialTheme.colors.secondary,
         fontSize = 14.sp,
         modifier = Modifier.padding(start = 3.dp)
       )

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

@@ -8,9 +8,6 @@ import androidx.compose.foundation.combinedClickable
 import androidx.compose.foundation.layout.*
 import androidx.compose.material.CircularProgressIndicator
 import androidx.compose.material.Icon
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.Check
-import androidx.compose.material.icons.outlined.*
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -18,10 +15,10 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.asImageBitmap
 import androidx.compose.ui.graphics.painter.BitmapPainter
 import androidx.compose.ui.graphics.painter.Painter
-import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.layout.layoutId
 import androidx.compose.ui.platform.*
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
@@ -55,7 +52,7 @@ fun CIImageView(
   }
 
   @Composable
-  fun fileIcon(icon: ImageVector, @StringRes stringId: Int) {
+  fun fileIcon(icon: Painter, @StringRes stringId: Int) {
     Icon(
       icon,
       stringResource(stringId),
@@ -80,12 +77,14 @@ fun CIImageView(
               FileProtocol.SMP -> {}
             }
           is CIFileStatus.SndTransfer -> progressIndicator()
-          is CIFileStatus.SndComplete -> fileIcon(Icons.Filled.Check, R.string.icon_descr_image_snd_complete)
-          is CIFileStatus.SndCancelled -> fileIcon(Icons.Outlined.Close, R.string.icon_descr_file)
-          is CIFileStatus.RcvInvitation -> fileIcon(Icons.Outlined.ArrowDownward, R.string.icon_descr_asked_to_receive)
-          is CIFileStatus.RcvAccepted -> fileIcon(Icons.Outlined.MoreHoriz, R.string.icon_descr_waiting_for_image)
+          is CIFileStatus.SndComplete -> fileIcon(painterResource(R.drawable.ic_check_filled), R.string.icon_descr_image_snd_complete)
+          is CIFileStatus.SndCancelled -> fileIcon(painterResource(R.drawable.ic_close), R.string.icon_descr_file)
+          is CIFileStatus.SndError -> fileIcon(painterResource(R.drawable.ic_close), R.string.icon_descr_file)
+          is CIFileStatus.RcvInvitation -> fileIcon(painterResource(R.drawable.ic_arrow_downward), R.string.icon_descr_asked_to_receive)
+          is CIFileStatus.RcvAccepted -> fileIcon(painterResource(R.drawable.ic_more_horiz), R.string.icon_descr_waiting_for_image)
           is CIFileStatus.RcvTransfer -> progressIndicator()
-          is CIFileStatus.RcvCancelled -> fileIcon(Icons.Outlined.Close, R.string.icon_descr_file)
+          is CIFileStatus.RcvCancelled -> fileIcon(painterResource(R.drawable.ic_close), R.string.icon_descr_file)
+          is CIFileStatus.RcvError -> fileIcon(painterResource(R.drawable.ic_close), R.string.icon_descr_file)
           else -> {}
         }
       }

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

@@ -5,12 +5,11 @@ import SectionView
 import androidx.compose.foundation.*
 import androidx.compose.foundation.layout.*
 import androidx.compose.material.*
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.outlined.Share
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontStyle
 import androidx.compose.ui.unit.dp
@@ -35,7 +34,7 @@ fun InvalidJSONView(json: String) {
     Spacer(Modifier.height(DEFAULT_PADDING))
     SectionView {
       val context = LocalContext.current
-      SettingsActionItem(Icons.Outlined.Share, generalGetString(R.string.share_verb), click = {
+      SettingsActionItem(painterResource(R.drawable.ic_share), generalGetString(R.string.share_verb), click = {
         shareText(context, json)
       })
     }

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

@@ -2,25 +2,23 @@ package chat.simplex.app.views.chat.item
 
 import androidx.compose.foundation.layout.*
 import androidx.compose.material.*
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.Circle
-import androidx.compose.material.icons.outlined.Edit
-import androidx.compose.material.icons.outlined.Timer
+import androidx.compose.ui.graphics.painter.Painter
+import androidx.compose.ui.res.painterResource
+import chat.simplex.app.R
 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.graphics.vector.ImageVector
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import chat.simplex.app.model.*
-import chat.simplex.app.ui.theme.HighOrLowlight
+import chat.simplex.app.ui.theme.CurrentColors
 import kotlinx.datetime.Clock
 
 @Composable
-fun CIMetaView(chatItem: ChatItem, timedMessagesTTL: Int?, metaColor: Color = HighOrLowlight) {
+fun CIMetaView(chatItem: ChatItem, timedMessagesTTL: Int?, metaColor: Color = MaterialTheme.colors.secondary) {
   Row(Modifier.padding(start = 3.dp), verticalAlignment = Alignment.CenterVertically) {
     if (chatItem.isDeletedContent) {
       Text(
@@ -39,11 +37,11 @@ fun CIMetaView(chatItem: ChatItem, timedMessagesTTL: Int?, metaColor: Color = Hi
 // changing this function requires updating reserveSpaceForMeta
 private fun CIMetaText(meta: CIMeta, chatTTL: Int?, color: Color) {
   if (meta.itemEdited) {
-    StatusIconText(Icons.Outlined.Edit, color)
+    StatusIconText(painterResource(R.drawable.ic_edit), color)
     Spacer(Modifier.width(3.dp))
   }
   if (meta.disappearing) {
-    StatusIconText(Icons.Outlined.Timer, color)
+    StatusIconText(painterResource(R.drawable.ic_timer), color)
     val ttl = meta.itemTimed?.ttl
     if (ttl != chatTTL) {
       Text(TimedMessagesPreference.shortTtlText(ttl), color = color, fontSize = 13.sp)
@@ -53,10 +51,10 @@ private fun CIMetaText(meta: CIMeta, chatTTL: Int?, color: Color) {
   val statusIcon = meta.statusIcon(MaterialTheme.colors.primary, color)
   if (statusIcon != null) {
     val (icon, statusColor) = statusIcon
-    StatusIconText(icon, statusColor)
+    StatusIconText(painterResource(icon), statusColor)
     Spacer(Modifier.width(4.dp))
   } else if (!meta.disappearing) {
-    StatusIconText(Icons.Filled.Circle, Color.Transparent)
+    StatusIconText(painterResource(R.drawable.ic_circle_filled), Color.Transparent)
     Spacer(Modifier.width(4.dp))
   }
   Text(meta.timestampText, color = color, fontSize = 13.sp, maxLines = 1, overflow = TextOverflow.Ellipsis)
@@ -74,14 +72,14 @@ fun reserveSpaceForMeta(meta: CIMeta, chatTTL: Int?): String {
       res += TimedMessagesPreference.shortTtlText(ttl)
     }
   }
-  if (meta.statusIcon(HighOrLowlight) != null || !meta.disappearing) {
+  if (meta.statusIcon(CurrentColors.value.colors.secondary) != null || !meta.disappearing) {
     res += iconSpace
   }
   return res + meta.timestampText
 }
 
 @Composable
-private fun StatusIconText(icon: ImageVector, color: Color) {
+private fun StatusIconText(icon: Painter, color: Color) {
   Icon(icon, null, Modifier.height(12.dp), tint = color)
 }
 

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

@@ -0,0 +1,24 @@
+package chat.simplex.app.views.chat.item
+
+import androidx.compose.runtime.Composable
+import chat.simplex.app.R
+import chat.simplex.app.model.*
+import chat.simplex.app.views.helpers.AlertManager
+import chat.simplex.app.views.helpers.generalGetString
+
+@Composable
+fun CIRcvDecryptionError(msgDecryptError: MsgDecryptError, msgCount: UInt, ci: ChatItem, timedMessagesTTL: Int?, showMember: Boolean) {
+  CIMsgError(ci, timedMessagesTTL, showMember) {
+    AlertManager.shared.showAlertMsg(
+      title = generalGetString(R.string.decryption_error),
+      text = when (msgDecryptError) {
+        MsgDecryptError.RatchetHeader -> String.format(generalGetString(R.string.alert_text_decryption_error_header), msgCount.toLong()) + "\n" +
+            generalGetString(R.string.alert_text_fragment_encryption_out_of_sync_old_database) + "\n" +
+            generalGetString(R.string.alert_text_fragment_permanent_error_reconnect)
+        MsgDecryptError.TooManySkipped -> String.format(generalGetString(R.string.alert_text_decryption_error_too_many_skipped), msgCount.toLong()) + "\n" +
+            generalGetString(R.string.alert_text_fragment_encryption_out_of_sync_old_database) + "\n" +
+            generalGetString(R.string.alert_text_fragment_permanent_error_reconnect)
+      }
+    )
+  }
+}

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

@@ -9,17 +9,15 @@ import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.shape.CornerSize
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.*
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.*
-import androidx.compose.material.icons.outlined.*
 import androidx.compose.runtime.*
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.ui.*
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.asImageBitmap
-import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.layout.*
 import androidx.compose.ui.platform.*
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.*
 import androidx.compose.ui.viewinterop.AndroidView
@@ -163,9 +161,8 @@ private fun BoxScope.PlayButton(error: Boolean = false, onLongClick: () -> Unit,
       contentAlignment = Alignment.Center
     ) {
       Icon(
-        imageVector = Icons.Filled.PlayArrow,
+        painterResource(R.drawable.ic_play_arrow_filled),
         contentDescription = null,
-        Modifier.size(25.dp),
         tint = if (error) WarningOrange else Color.White
       )
     }
@@ -192,7 +189,7 @@ private fun DurationProgress(file: CIFile, playing: MutableState<Boolean>, durat
           color = Color.White
         )
         /*if (!soundEnabled.value) {
-        Icon(Icons.Outlined.VolumeOff, null,
+        Icon(painterResource(R.drawable.ic_volume_off_filled), null,
           Modifier.padding(start = 5.dp).size(10.dp),
           tint = Color.White
         )
@@ -255,7 +252,7 @@ private fun progressIndicator() {
 }
 
 @Composable
-private fun fileIcon(icon: ImageVector, @StringRes stringId: Int) {
+private fun fileIcon(icon: Painter, @StringRes stringId: Int) {
   Icon(
     icon,
     stringResource(stringId),
@@ -298,17 +295,19 @@ private fun loadingIndicator(file: CIFile?) {
             FileProtocol.XFTP -> progressCircle(file.fileStatus.sndProgress, file.fileStatus.sndTotal)
             FileProtocol.SMP -> progressIndicator()
           }
-        is CIFileStatus.SndComplete -> fileIcon(Icons.Filled.Check, R.string.icon_descr_video_snd_complete)
-        is CIFileStatus.SndCancelled -> fileIcon(Icons.Outlined.Close, R.string.icon_descr_file)
-        is CIFileStatus.RcvInvitation -> fileIcon(Icons.Outlined.ArrowDownward, R.string.icon_descr_video_asked_to_receive)
-        is CIFileStatus.RcvAccepted -> fileIcon(Icons.Outlined.MoreHoriz, R.string.icon_descr_waiting_for_video)
+        is CIFileStatus.SndComplete -> fileIcon(painterResource(R.drawable.ic_check_filled), R.string.icon_descr_video_snd_complete)
+        is CIFileStatus.SndCancelled -> fileIcon(painterResource(R.drawable.ic_close), R.string.icon_descr_file)
+        is CIFileStatus.SndError -> fileIcon(painterResource(R.drawable.ic_close), R.string.icon_descr_file)
+        is CIFileStatus.RcvInvitation -> fileIcon(painterResource(R.drawable.ic_arrow_downward), R.string.icon_descr_video_asked_to_receive)
+        is CIFileStatus.RcvAccepted -> fileIcon(painterResource(R.drawable.ic_more_horiz), R.string.icon_descr_waiting_for_video)
         is CIFileStatus.RcvTransfer ->
           if (file.fileProtocol == FileProtocol.XFTP && file.fileStatus.rcvProgress < file.fileStatus.rcvTotal) {
             progressCircle(file.fileStatus.rcvProgress, file.fileStatus.rcvTotal)
           } else {
             progressIndicator()
           }
-        is CIFileStatus.RcvCancelled -> fileIcon(Icons.Outlined.Close, R.string.icon_descr_file)
+        is CIFileStatus.RcvCancelled -> fileIcon(painterResource(R.drawable.ic_close), R.string.icon_descr_file)
+        is CIFileStatus.RcvError -> fileIcon(painterResource(R.drawable.ic_close), R.string.icon_descr_file)
         else -> {}
       }
     }

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

@@ -5,8 +5,6 @@ import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.shape.CornerSize
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.*
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.*
 import androidx.compose.runtime.*
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.ui.Alignment
@@ -19,7 +17,9 @@ import androidx.compose.ui.graphics.*
 import androidx.compose.ui.graphics.drawscope.Stroke
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.unit.*
+import chat.simplex.app.R
 import chat.simplex.app.model.*
 import chat.simplex.app.ui.theme.*
 import chat.simplex.app.views.helpers.*
@@ -137,7 +137,7 @@ private fun DurationText(text: State<String>, padding: PaddingValues) {
     Modifier
       .padding(padding)
       .widthIn(min = minWidth),
-    color = HighOrLowlight,
+    color = MaterialTheme.colors.secondary,
     fontSize = 16.sp,
     maxLines = 1
   )
@@ -156,9 +156,11 @@ private fun PlayPauseButton(
   pause: () -> Unit,
   longClick: () -> Unit
 ) {
+  val sentColor = CurrentColors.collectAsState().value.appColors.sentMessage
+  val receivedColor = CurrentColors.collectAsState().value.appColors.receivedMessage
   Surface(
     Modifier.drawRingModifier(angle, strokeColor, strokeWidth),
-    color = if (sent) SentColorLight else ReceivedColorLight,
+    color = if (sent) sentColor else receivedColor,
     shape = MaterialTheme.shapes.small.copy(CornerSize(percent = 50))
   ) {
     Box(
@@ -171,10 +173,10 @@ private fun PlayPauseButton(
       contentAlignment = Alignment.Center
     ) {
       Icon(
-        imageVector = if (audioPlaying) Icons.Filled.Pause else Icons.Filled.PlayArrow,
+        if (audioPlaying) painterResource(R.drawable.ic_pause_filled) else painterResource(R.drawable.ic_play_arrow_filled),
         contentDescription = null,
         Modifier.size(36.dp),
-        tint = if (error) WarningOrange else if (!enabled) HighOrLowlight else MaterialTheme.colors.primary
+        tint = if (error) WarningOrange else if (!enabled) MaterialTheme.colors.secondary else MaterialTheme.colors.primary
       )
     }
   }
@@ -200,7 +202,7 @@ private fun VoiceMsgIndicator(
     if (hasText) {
       IconButton({ if (!audioPlaying) play() else pause() }, Modifier.size(56.dp).drawRingModifier(angle, strokeColor, strokeWidth)) {
         Icon(
-          imageVector = if (audioPlaying) Icons.Filled.Pause else Icons.Filled.PlayArrow,
+          if (audioPlaying) painterResource(R.drawable.ic_pause_filled) else painterResource(R.drawable.ic_play_arrow_filled),
           contentDescription = null,
           Modifier.size(36.dp),
           tint = MaterialTheme.colors.primary

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

@@ -6,24 +6,22 @@ import androidx.compose.foundation.combinedClickable
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.shape.RoundedCornerShape
 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
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.platform.*
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import chat.simplex.app.*
 import chat.simplex.app.R
 import chat.simplex.app.model.*
-import chat.simplex.app.ui.theme.HighOrLowlight
-import chat.simplex.app.ui.theme.SimpleXTheme
+import chat.simplex.app.ui.theme.*
 import chat.simplex.app.views.chat.ComposeContextItem
 import chat.simplex.app.views.chat.ComposeState
 import chat.simplex.app.views.helpers.*
@@ -105,13 +103,9 @@ fun ChatItemView(
 
       @Composable
       fun MsgContentItemDropdownMenu() {
-        DropdownMenu(
-          expanded = showMenu.value,
-          onDismissRequest = { showMenu.value = false },
-          Modifier.width(220.dp)
-        ) {
+        DefaultDropdownMenu(showMenu) {
           if (cItem.meta.itemDeleted == null && !live) {
-            ItemAction(stringResource(R.string.reply_verb), Icons.Outlined.Reply, onClick = {
+            ItemAction(stringResource(R.string.reply_verb), painterResource(R.drawable.ic_reply), onClick = {
               if (composeState.value.editing) {
                 composeState.value = ComposeState(contextItem = ComposeContextItem.QuotedItem(cItem), useLinkPreviews = useLinkPreviews)
               } else {
@@ -120,7 +114,7 @@ fun ChatItemView(
               showMenu.value = false
             })
           }
-          ItemAction(stringResource(R.string.share_verb), Icons.Outlined.Share, onClick = {
+          ItemAction(stringResource(R.string.share_verb), painterResource(R.drawable.ic_share), onClick = {
             val filePath = getLoadedFilePath(SimplexApp.context, cItem.file)
             when {
               filePath != null -> shareFile(context, cItem.text, filePath)
@@ -128,7 +122,7 @@ fun ChatItemView(
             }
             showMenu.value = false
           })
-          ItemAction(stringResource(R.string.copy_verb), Icons.Outlined.ContentCopy, onClick = {
+          ItemAction(stringResource(R.string.copy_verb), painterResource(R.drawable.ic_content_copy), onClick = {
             copyText(context, cItem.content.text)
             showMenu.value = false
           })
@@ -136,7 +130,7 @@ fun ChatItemView(
             val filePath = getLoadedFilePath(context, cItem.file)
             if (filePath != null) {
               val writePermissionState = rememberPermissionState(permission = Manifest.permission.WRITE_EXTERNAL_STORAGE)
-              ItemAction(stringResource(R.string.save_verb), Icons.Outlined.SaveAlt, onClick = {
+              ItemAction(stringResource(R.string.save_verb), painterResource(R.drawable.ic_download), onClick = {
                 when (cItem.content.msgContent) {
                   is MsgContent.MCImage -> {
                     if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R || writePermissionState.hasPermission) {
@@ -153,7 +147,7 @@ fun ChatItemView(
             }
           }
           if (cItem.meta.editable && cItem.content.msgContent !is MsgContent.MCVoice && !live) {
-            ItemAction(stringResource(R.string.edit_verb), Icons.Filled.Edit, onClick = {
+            ItemAction(stringResource(R.string.edit_verb), painterResource(R.drawable.ic_edit_filled), onClick = {
               composeState.value = ComposeState(editingItem = cItem, useLinkPreviews = useLinkPreviews)
               showMenu.value = false
             })
@@ -161,15 +155,15 @@ fun ChatItemView(
           if (cItem.meta.itemDeleted != null && revealed.value) {
             ItemAction(
               stringResource(R.string.hide_verb),
-              Icons.Outlined.VisibilityOff,
+              painterResource(R.drawable.ic_visibility_off),
               onClick = {
                 revealed.value = false
                 showMenu.value = false
               }
             )
           }
-          if (cItem.meta.itemDeleted == null && cItem.file != null && cItem.file.cancellable) {
-            CancelFileItemAction(cItem.file.fileId, showMenu, cancelFile = cancelFile)
+          if (cItem.meta.itemDeleted == null && cItem.file != null && cItem.file.cancelAction != null) {
+            CancelFileItemAction(cItem.file.fileId, showMenu, cancelFile = cancelFile, cancelAction = cItem.file.cancelAction)
           }
           if (!(live && cItem.meta.isLive)) {
             DeleteItemAction(cItem, showMenu, questionText = deleteMessageQuestionText(), deleteMessage)
@@ -183,15 +177,11 @@ fun ChatItemView(
 
       @Composable
       fun MarkedDeletedItemDropdownMenu() {
-        DropdownMenu(
-          expanded = showMenu.value,
-          onDismissRequest = { showMenu.value = false },
-          Modifier.width(220.dp)
-        ) {
+        DefaultDropdownMenu(showMenu) {
           if (!cItem.isDeletedContent) {
             ItemAction(
               stringResource(R.string.reveal_verb),
-              Icons.Outlined.Visibility,
+              painterResource(R.drawable.ic_visibility),
               onClick = {
                 revealed.value = true
                 showMenu.value = false
@@ -227,11 +217,7 @@ fun ChatItemView(
 
       @Composable fun DeletedItem() {
         DeletedItemView(cItem, cInfo.timedMessagesTTL, showMember = showMember)
-        DropdownMenu(
-          expanded = showMenu.value,
-          onDismissRequest = { showMenu.value = false },
-          Modifier.width(220.dp)
-        ) {
+        DefaultDropdownMenu(showMenu) {
           DeleteItemAction(cItem, showMenu, questionText = deleteMessageQuestionText(), deleteMessage)
         }
       }
@@ -247,7 +233,8 @@ fun ChatItemView(
         is CIContent.RcvDeleted -> DeletedItem()
         is CIContent.SndCall -> CallItem(c.status, c.duration)
         is CIContent.RcvCall -> CallItem(c.status, c.duration)
-        is CIContent.RcvIntegrityError -> IntegrityErrorItemView(cItem, cInfo.timedMessagesTTL, showMember = showMember)
+        is CIContent.RcvIntegrityError -> IntegrityErrorItemView(c.msgError, cItem, cInfo.timedMessagesTTL, showMember = showMember)
+        is CIContent.RcvDecryptionError -> CIRcvDecryptionError(c.msgDecryptError, c.msgCount, cItem, cInfo.timedMessagesTTL, showMember = showMember)
         is CIContent.RcvGroupInvitation -> CIGroupInvitationView(cItem, c.groupInvitation, c.memberRole, joinGroup = joinGroup, chatIncognito = cInfo.incognito)
         is CIContent.SndGroupInvitation -> CIGroupInvitationView(cItem, c.groupInvitation, c.memberRole, joinGroup = joinGroup, chatIncognito = cInfo.incognito)
         is CIContent.RcvGroupEventContent -> CIEventView(cItem)
@@ -260,7 +247,7 @@ fun ChatItemView(
           val ct = if (cInfo is ChatInfo.Direct) cInfo.contact else null
           CIFeaturePreferenceView(cItem, ct, c.feature, c.allowed, acceptFeature)
         }
-        is CIContent.SndChatPreference -> CIChatFeatureView(cItem, c.feature, HighOrLowlight, icon = c.feature.icon,)
+        is CIContent.SndChatPreference -> CIChatFeatureView(cItem, c.feature, MaterialTheme.colors.secondary, icon = c.feature.icon,)
         is CIContent.RcvGroupFeature -> CIChatFeatureView(cItem, c.groupFeature, c.preference.enable.iconColor)
         is CIContent.SndGroupFeature -> CIChatFeatureView(cItem, c.groupFeature, c.preference.enable.iconColor)
         is CIContent.RcvChatFeatureRejected -> CIChatFeatureView(cItem, c.feature, Color.Red)
@@ -277,14 +264,15 @@ fun ChatItemView(
 fun CancelFileItemAction(
   fileId: Long,
   showMenu: MutableState<Boolean>,
-  cancelFile: (Long) -> Unit
+  cancelFile: (Long) -> Unit,
+  cancelAction: CancelAction
 ) {
   ItemAction(
-    stringResource(R.string.cancel_verb),
-    Icons.Outlined.Close,
+    stringResource(cancelAction.uiActionId),
+    painterResource(R.drawable.ic_close),
     onClick = {
       showMenu.value = false
-      cancelFileAlertDialog(fileId, cancelFile = cancelFile)
+      cancelFileAlertDialog(fileId, cancelFile = cancelFile, cancelAction = cancelAction)
     },
     color = Color.Red
   )
@@ -299,7 +287,7 @@ fun DeleteItemAction(
 ) {
   ItemAction(
     stringResource(R.string.delete_verb),
-    Icons.Outlined.Delete,
+    painterResource(R.drawable.ic_delete),
     onClick = {
       showMenu.value = false
       deleteMessageAlertDialog(cItem, questionText, deleteMessage = deleteMessage)
@@ -317,7 +305,7 @@ fun ModerateItemAction(
 ) {
   ItemAction(
     stringResource(R.string.moderate_verb),
-    Icons.Outlined.Flag,
+    painterResource(R.drawable.ic_flag),
     onClick = {
       showMenu.value = false
       moderateMessageAlertDialog(cItem, questionText, deleteMessage = deleteMessage)
@@ -327,27 +315,50 @@ fun ModerateItemAction(
 }
 
 @Composable
-fun ItemAction(text: String, icon: ImageVector, onClick: () -> Unit, color: Color = MaterialTheme.colors.onBackground) {
-  DropdownMenuItem(onClick) {
-    Row {
+fun ItemAction(text: String, icon: Painter, onClick: () -> Unit, color: Color = Color.Unspecified) {
+  val finalColor = if (color == Color.Unspecified) {
+    if (isInDarkTheme()) MenuTextColorDark else Color.Black
+  } else color
+  DropdownMenuItem(onClick, contentPadding = PaddingValues(horizontal = DEFAULT_PADDING * 1.5f)) {
+    Row(verticalAlignment = Alignment.CenterVertically) {
       Text(
         text,
         modifier = Modifier
           .fillMaxWidth()
           .weight(1F)
           .padding(end = 15.dp),
-        color = color
+        color = finalColor
       )
-      Icon(icon, text, tint = color)
+      Icon(icon, text, tint = finalColor)
     }
   }
 }
 
-fun cancelFileAlertDialog(fileId: Long, cancelFile: (Long) -> Unit) {
+@Composable
+fun ItemAction(text: String, icon: ImageVector, onClick: () -> Unit, color: Color = Color.Unspecified) {
+  val finalColor = if (color == Color.Unspecified) {
+    if (isInDarkTheme()) MenuTextColorDark else Color.Black
+  } else color
+  DropdownMenuItem(onClick, contentPadding = PaddingValues(horizontal = DEFAULT_PADDING * 1.5f)) {
+    Row(verticalAlignment = Alignment.CenterVertically) {
+      Text(
+        text,
+        modifier = Modifier
+          .fillMaxWidth()
+          .weight(1F)
+          .padding(end = 15.dp),
+        color = finalColor
+      )
+      Icon(icon, text, tint = finalColor)
+    }
+  }
+}
+
+fun cancelFileAlertDialog(fileId: Long, cancelFile: (Long) -> Unit, cancelAction: CancelAction) {
   AlertManager.shared.showAlertDialog(
-    title = generalGetString(R.string.cancel_file__question),
-    text = generalGetString(R.string.file_transfer_will_be_cancelled_warning),
-    confirmText = generalGetString(R.string.confirm_verb),
+    title = generalGetString(cancelAction.alert.titleId),
+    text = generalGetString(cancelAction.alert.messageId),
+    confirmText = generalGetString(cancelAction.alert.confirmId),
     destructive = true,
     onConfirm = {
       cancelFile(fileId)
@@ -364,18 +375,18 @@ fun deleteMessageAlertDialog(chatItem: ChatItem, questionText: String, deleteMes
         Modifier
           .fillMaxWidth()
           .padding(horizontal = 8.dp, vertical = 2.dp),
-        horizontalArrangement = Arrangement.End,
+        horizontalArrangement = Arrangement.Center,
       ) {
         TextButton(onClick = {
           deleteMessage(chatItem.id, CIDeleteMode.cidmInternal)
           AlertManager.shared.hideAlert()
-        }) { Text(stringResource(R.string.for_me_only)) }
+        }) { Text(stringResource(R.string.for_me_only), color = MaterialTheme.colors.error) }
         if (chatItem.meta.editable) {
           Spacer(Modifier.padding(horizontal = 4.dp))
           TextButton(onClick = {
             deleteMessage(chatItem.id, CIDeleteMode.cidmBroadcast)
             AlertManager.shared.hideAlert()
-          }) { Text(stringResource(R.string.for_everybody)) }
+          }) { Text(stringResource(R.string.for_everybody), color = MaterialTheme.colors.error) }
         }
       }
     }

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

@@ -5,6 +5,7 @@ import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.*
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.collectAsState
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.text.*
@@ -13,15 +14,16 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import chat.simplex.app.model.ChatItem
-import chat.simplex.app.ui.theme.HighOrLowlight
-import chat.simplex.app.ui.theme.SimpleXTheme
+import chat.simplex.app.ui.theme.*
 
 @Composable
 fun DeletedItemView(ci: ChatItem, timedMessagesTTL: Int?, showMember: Boolean = false) {
   val sent = ci.chatDir.sent
+  val sentColor = CurrentColors.collectAsState().value.appColors.sentMessage
+  val receivedColor = CurrentColors.collectAsState().value.appColors.receivedMessage
   Surface(
     shape = RoundedCornerShape(18.dp),
-    color = if (sent) SentColorLight else ReceivedColorLight,
+    color = if (sent) sentColor else receivedColor,
   ) {
     Row(
       Modifier.padding(horizontal = 12.dp, vertical = 6.dp),
@@ -30,7 +32,7 @@ fun DeletedItemView(ci: ChatItem, timedMessagesTTL: Int?, showMember: Boolean =
       Text(
         buildAnnotatedString {
           appendSender(this, if (showMember) ci.memberDisplayName else null, true)
-          withStyle(SpanStyle(fontStyle = FontStyle.Italic, color = HighOrLowlight)) { append(ci.content.text) }
+          withStyle(SpanStyle(fontStyle = FontStyle.Italic, color = MaterialTheme.colors.secondary)) { append(ci.content.text) }
         },
         style = MaterialTheme.typography.body1.copy(lineHeight = 22.sp),
         modifier = Modifier.padding(end = 8.dp)

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

@@ -4,10 +4,6 @@ import androidx.compose.foundation.*
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.*
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.*
-import androidx.compose.material.icons.outlined.Delete
-import androidx.compose.material.icons.outlined.Flag
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -15,9 +11,10 @@ import androidx.compose.ui.draw.clip
 import androidx.compose.ui.draw.clipToBounds
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.asImageBitmap
-import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.layout.*
 import androidx.compose.ui.platform.UriHandler
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.*
 import androidx.compose.ui.text.font.FontStyle
@@ -32,11 +29,6 @@ import chat.simplex.app.views.helpers.*
 import kotlinx.datetime.Clock
 import kotlin.math.min
 
-val SentColorLight = Color(0x1E45B8FF)
-val ReceivedColorLight = Color(0x20B1B0B5)
-val SentQuoteColorLight = Color(0x2545B8FF)
-val ReceivedQuoteColorLight = Color(0x25B1B0B5)
-
 @Composable
 fun FramedItemView(
   chatInfo: ChatInfo,
@@ -57,6 +49,9 @@ fun FramedItemView(
     return if (chatInfo is ChatInfo.Group) chatInfo.groupInfo.membership else null
   }
 
+  @Composable
+  fun Color.toQuote(): Color = if (isInDarkTheme()) lighter(0.12f) else darker(0.12f)
+
   @Composable
   fun ciQuotedMsgView(qi: CIQuote) {
     Box(
@@ -72,10 +67,12 @@ fun FramedItemView(
   }
 
   @Composable
-  fun FramedItemHeader(caption: String, italic: Boolean, icon: ImageVector? = null) {
+  fun FramedItemHeader(caption: String, italic: Boolean, icon: Painter? = null) {
+    val sentColor = CurrentColors.collectAsState().value.appColors.sentMessage
+    val receivedColor = CurrentColors.collectAsState().value.appColors.receivedMessage
     Row(
       Modifier
-        .background(if (sent) SentQuoteColorLight else ReceivedQuoteColorLight)
+        .background(if (sent) sentColor.toQuote() else receivedColor.toQuote())
         .fillMaxWidth()
         .padding(start = 8.dp, top = 6.dp, end = 12.dp, bottom = if (ci.quotedItem == null) 6.dp else 0.dp),
       horizontalArrangement = Arrangement.spacedBy(4.dp),
@@ -90,7 +87,7 @@ fun FramedItemView(
       }
       Text(
         buildAnnotatedString {
-          withStyle(SpanStyle(fontSize = 12.sp, fontStyle = if (italic) FontStyle.Italic else FontStyle.Normal, color = HighOrLowlight)) {
+          withStyle(SpanStyle(fontSize = 12.sp, fontStyle = if (italic) FontStyle.Italic else FontStyle.Normal, color = MaterialTheme.colors.secondary)) {
             append(caption)
           }
         },
@@ -103,9 +100,11 @@ fun FramedItemView(
 
   @Composable
   fun ciQuoteView(qi: CIQuote) {
+    val sentColor = CurrentColors.collectAsState().value.appColors.sentMessage
+    val receivedColor = CurrentColors.collectAsState().value.appColors.receivedMessage
     Row(
       Modifier
-        .background(if (sent) SentQuoteColorLight else ReceivedQuoteColorLight)
+        .background(if (sent) sentColor.toQuote() else receivedColor.toQuote())
         .fillMaxWidth()
         .combinedClickable(
           onLongClick = { showMenu.value = true },
@@ -142,7 +141,7 @@ fun FramedItemView(
             ciQuotedMsgView(qi)
           }
           Icon(
-            if (qi.content is MsgContent.MCFile) Icons.Filled.InsertDriveFile else Icons.Filled.Mic,
+            if (qi.content is MsgContent.MCFile) painterResource(R.drawable.ic_draft_filled) else painterResource(R.drawable.ic_mic_filled),
             if (qi.content is MsgContent.MCFile) stringResource(R.string.icon_descr_file) else stringResource(R.string.voice_message),
             Modifier
               .padding(top = 6.dp, end = 4.dp)
@@ -166,24 +165,26 @@ fun FramedItemView(
   val transparentBackground = (ci.content.msgContent is MsgContent.MCImage || ci.content.msgContent is MsgContent.MCVideo) &&
       !ci.meta.isLive && ci.content.text.isEmpty() && ci.quotedItem == null
 
+  val sentColor = CurrentColors.collectAsState().value.appColors.sentMessage
+  val receivedColor = CurrentColors.collectAsState().value.appColors.receivedMessage
   Box(Modifier
     .clip(RoundedCornerShape(18.dp))
     .background(
       when {
         transparentBackground -> Color.Transparent
-        sent -> SentColorLight
-        else -> ReceivedColorLight
+        sent -> sentColor
+        else -> receivedColor
       }
     )) {
-    var metaColor = HighOrLowlight
+    var metaColor = MaterialTheme.colors.secondary
     Box(contentAlignment = Alignment.BottomEnd) {
       Column(Modifier.width(IntrinsicSize.Max)) {
         PriorityLayout(Modifier, CHAT_IMAGE_LAYOUT_ID) {
           if (ci.meta.itemDeleted != null) {
             if (ci.meta.itemDeleted is CIDeleted.Moderated) {
-              FramedItemHeader(String.format(stringResource(R.string.moderated_item_description), ci.meta.itemDeleted.byGroupMember.chatViewName), true, Icons.Outlined.Flag)
+              FramedItemHeader(String.format(stringResource(R.string.moderated_item_description), ci.meta.itemDeleted.byGroupMember.chatViewName), true, painterResource(R.drawable.ic_flag))
             } else {
-              FramedItemHeader(stringResource(R.string.marked_deleted_description), true, Icons.Outlined.Delete)
+              FramedItemHeader(stringResource(R.string.marked_deleted_description), true, painterResource(R.drawable.ic_delete))
             }
           } else if (ci.meta.isLive) {
             FramedItemHeader(stringResource(R.string.live), false)

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

@@ -7,6 +7,7 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.*
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.collectAsState
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
@@ -17,21 +18,45 @@ import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import chat.simplex.app.R
 import chat.simplex.app.model.ChatItem
+import chat.simplex.app.model.MsgErrorType
+import chat.simplex.app.ui.theme.CurrentColors
 import chat.simplex.app.ui.theme.SimpleXTheme
 import chat.simplex.app.views.helpers.AlertManager
 import chat.simplex.app.views.helpers.generalGetString
 
 @Composable
-fun IntegrityErrorItemView(ci: ChatItem, timedMessagesTTL: Int?, showMember: Boolean = false) {
+fun IntegrityErrorItemView(msgError: MsgErrorType, ci: ChatItem, timedMessagesTTL: Int?, showMember: Boolean = false) {
+  CIMsgError(ci, timedMessagesTTL, showMember) {
+    when (msgError) {
+      is MsgErrorType.MsgSkipped ->
+        AlertManager.shared.showAlertMsg(
+          title = generalGetString(R.string.alert_title_skipped_messages),
+          text = generalGetString(R.string.alert_text_skipped_messages_it_can_happen_when)
+        )
+      is MsgErrorType.MsgBadHash ->
+        AlertManager.shared.showAlertMsg(
+          title = generalGetString(R.string.alert_title_msg_bad_hash),
+          text = generalGetString(R.string.alert_text_msg_bad_hash) + "\n" +
+              generalGetString(R.string.alert_text_fragment_encryption_out_of_sync_old_database) + "\n" +
+              generalGetString(R.string.alert_text_fragment_please_report_to_developers)
+        )
+      is MsgErrorType.MsgBadId, is MsgErrorType.MsgDuplicate ->
+        AlertManager.shared.showAlertMsg(
+          title = generalGetString(R.string.alert_title_msg_bad_id),
+          text = generalGetString(R.string.alert_text_msg_bad_id) + "\n" +
+              generalGetString(R.string.alert_text_fragment_please_report_to_developers)
+        )
+    }
+  }
+}
+
+@Composable
+fun CIMsgError(ci: ChatItem, timedMessagesTTL: Int?, showMember: Boolean = false, onClick: () -> Unit) {
+  val receivedColor = CurrentColors.collectAsState().value.appColors.receivedMessage
   Surface(
-    Modifier.clickable(onClick = {
-      AlertManager.shared.showAlertMsg(
-        title = generalGetString(R.string.alert_title_skipped_messages),
-        text = generalGetString(R.string.alert_text_skipped_messages_it_can_happen_when)
-      )
-    }),
+    Modifier.clickable(onClick = onClick),
     shape = RoundedCornerShape(18.dp),
-    color = ReceivedColorLight,
+    color = receivedColor,
   ) {
     Row(
       Modifier.padding(horizontal = 12.dp, vertical = 6.dp),
@@ -59,6 +84,7 @@ fun IntegrityErrorItemView(ci: ChatItem, timedMessagesTTL: Int?, showMember: Boo
 fun IntegrityErrorItemViewPreview() {
   SimpleXTheme {
     IntegrityErrorItemView(
+      MsgErrorType.MsgBadHash(),
       ChatItem.getDeletedContentSampleData(),
       null
     )

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

@@ -5,6 +5,7 @@ import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.*
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.collectAsState
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.text.*
@@ -16,15 +17,16 @@ import androidx.compose.ui.unit.sp
 import chat.simplex.app.R
 import chat.simplex.app.model.CIDeleted
 import chat.simplex.app.model.ChatItem
-import chat.simplex.app.ui.theme.HighOrLowlight
-import chat.simplex.app.ui.theme.SimpleXTheme
+import chat.simplex.app.ui.theme.*
 import chat.simplex.app.views.helpers.generalGetString
 
 @Composable
 fun MarkedDeletedItemView(ci: ChatItem, timedMessagesTTL: Int?, showMember: Boolean = false) {
+  val sentColor = CurrentColors.collectAsState().value.appColors.sentMessage
+  val receivedColor = CurrentColors.collectAsState().value.appColors.receivedMessage
   Surface(
     shape = RoundedCornerShape(18.dp),
-    color = if (ci.chatDir.sent) SentColorLight else ReceivedColorLight,
+    color = if (ci.chatDir.sent) sentColor else receivedColor,
   ) {
     Row(
       Modifier.padding(horizontal = 12.dp, vertical = 6.dp),
@@ -47,7 +49,7 @@ private fun MarkedDeletedText(text: String) {
   Text(
     buildAnnotatedString {
       // appendSender(this, if (showMember) ci.memberDisplayName else null, true) // TODO font size
-      withStyle(SpanStyle(fontSize = 12.sp, fontStyle = FontStyle.Italic, color = HighOrLowlight)) { append(text) }
+      withStyle(SpanStyle(fontSize = 12.sp, fontStyle = FontStyle.Italic, color = MaterialTheme.colors.secondary)) { append(text) }
     },
     style = MaterialTheme.typography.body1.copy(lineHeight = 22.sp),
     modifier = Modifier.padding(end = 8.dp),

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

@@ -22,7 +22,7 @@ import androidx.compose.ui.unit.*
 import androidx.core.text.BidiFormatter
 import chat.simplex.app.TAG
 import chat.simplex.app.model.*
-import chat.simplex.app.ui.theme.HighOrLowlight
+import chat.simplex.app.ui.theme.CurrentColors
 import chat.simplex.app.views.helpers.detectGesture
 import kotlinx.coroutines.*
 
@@ -57,7 +57,7 @@ private val typingIndicators: List<AnnotatedString> = listOf(
 
 
 private fun typingIndicator(recent: Boolean, @IntRange (from = 0, to = 4) typingIdx: Int): AnnotatedString = buildAnnotatedString {
-  pushStyle(SpanStyle(color = HighOrLowlight, fontFamily = FontFamily.Monospace, letterSpacing = (-1).sp))
+  pushStyle(SpanStyle(color = CurrentColors.value.colors.secondary, fontFamily = FontFamily.Monospace, letterSpacing = (-1).sp))
   append(if (recent) typingIndicators[typingIdx] else noTyping)
 }
 
@@ -228,7 +228,7 @@ fun ClickableText(
         }
       }
     }, shouldConsumeEvent = { pos ->
-      var consume = false
+        var consume = false
         layoutResult.value?.let { layoutResult ->
           consume = shouldConsumeEvent(layoutResult.getOffsetForPosition(pos))
         }

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

@@ -4,8 +4,7 @@ import android.content.res.Configuration
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.*
 import androidx.compose.material.*
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.outlined.PersonAdd
+import androidx.compose.ui.res.painterResource
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -28,7 +27,6 @@ val bold = SpanStyle(fontWeight = FontWeight.Bold)
 @Composable
 fun ChatHelpView(addContact: (() -> Unit)? = null) {
   Column(
-    horizontalAlignment = Alignment.Start,
     verticalArrangement = Arrangement.spacedBy(10.dp)
   ) {
     val uriHandler = LocalUriHandler.current
@@ -44,7 +42,6 @@ fun ChatHelpView(addContact: (() -> Unit)? = null) {
 
     Column(
       Modifier.padding(top = 24.dp),
-      horizontalAlignment = Alignment.Start,
       verticalArrangement = Arrangement.spacedBy(10.dp)
     ) {
       Text(
@@ -58,7 +55,7 @@ fun ChatHelpView(addContact: (() -> Unit)? = null) {
       ) {
         Text(stringResource(R.string.chat_help_tap_button))
         Icon(
-          Icons.Outlined.PersonAdd,
+          painterResource(R.drawable.ic_person_add),
           stringResource(R.string.add_contact),
           modifier = if (addContact != null) Modifier.clickable(onClick = addContact) else Modifier,
         )
@@ -70,7 +67,6 @@ fun ChatHelpView(addContact: (() -> Unit)? = null) {
 
     Column(
       Modifier.padding(top = 24.dp),
-      horizontalAlignment = Alignment.Start,
       verticalArrangement = Arrangement.spacedBy(10.dp)
     ) {
       Text(stringResource(R.string.to_connect_via_link_title), style = MaterialTheme.typography.h2)
@@ -81,7 +77,6 @@ fun ChatHelpView(addContact: (() -> Unit)? = null) {
 
     Column(
       Modifier.padding(vertical = 24.dp),
-      horizontalAlignment = Alignment.Start,
       verticalArrangement = Arrangement.spacedBy(10.dp)
     ) {
       Text(stringResource(R.string.markdown_in_messages), style = MaterialTheme.typography.h2)

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

@@ -4,14 +4,12 @@ import android.content.res.Configuration
 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.*
-import androidx.compose.material.icons.outlined.*
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextOverflow
@@ -183,7 +181,7 @@ fun GroupMenuItems(chat: Chat, groupInfo: GroupInfo, chatModel: ChatModel, showM
 fun MarkReadChatAction(chat: Chat, chatModel: ChatModel, showMenu: MutableState<Boolean>) {
   ItemAction(
     stringResource(R.string.mark_read),
-    Icons.Outlined.Check,
+    painterResource(R.drawable.ic_check),
     onClick = {
       markChatRead(chat, chatModel)
       chatModel.controller.ntfManager.cancelNotificationsForChat(chat.id)
@@ -194,33 +192,21 @@ fun MarkReadChatAction(chat: Chat, chatModel: ChatModel, showMenu: MutableState<
 
 @Composable
 fun MarkUnreadChatAction(chat: Chat, chatModel: ChatModel, showMenu: MutableState<Boolean>) {
-  DropdownMenuItem({
-    markChatUnread(chat, chatModel)
-    showMenu.value = false
-  }) {
-    Row {
-      Text(
-        stringResource(R.string.mark_unread),
-        modifier = Modifier
-          .fillMaxWidth()
-          .weight(1F)
-          .padding(end = 15.dp),
-        color = MaterialTheme.colors.onBackground
-      )
-      Icon(
-        Icons.Outlined.MarkChatUnread,
-        stringResource(R.string.mark_unread),
-        tint = MaterialTheme.colors.onBackground
-      )
+  ItemAction(
+    stringResource(R.string.mark_unread),
+    painterResource(R.drawable.ic_mark_chat_unread),
+    onClick = {
+      markChatUnread(chat, chatModel)
+      showMenu.value = false
     }
-  }
+  )
 }
 
 @Composable
 fun ToggleNotificationsChatAction(chat: Chat, chatModel: ChatModel, ntfsEnabled: Boolean, showMenu: MutableState<Boolean>) {
   ItemAction(
     if (ntfsEnabled) stringResource(R.string.mute_chat) else stringResource(R.string.unmute_chat),
-    if (ntfsEnabled) Icons.Outlined.NotificationsOff else Icons.Outlined.Notifications,
+    if (ntfsEnabled) painterResource(R.drawable.ic_notifications_off) else painterResource(R.drawable.ic_notifications),
     onClick = {
       changeNtfsStatePerChat(!ntfsEnabled, mutableStateOf(ntfsEnabled), chat, chatModel)
       showMenu.value = false
@@ -232,7 +218,7 @@ fun ToggleNotificationsChatAction(chat: Chat, chatModel: ChatModel, ntfsEnabled:
 fun ClearChatAction(chat: Chat, chatModel: ChatModel, showMenu: MutableState<Boolean>) {
   ItemAction(
     stringResource(R.string.clear_chat_menu_action),
-    Icons.Outlined.Restore,
+    painterResource(R.drawable.ic_settings_backup_restore),
     onClick = {
       clearChatDialog(chat.chatInfo, chatModel)
       showMenu.value = false
@@ -245,7 +231,7 @@ fun ClearChatAction(chat: Chat, chatModel: ChatModel, showMenu: MutableState<Boo
 fun DeleteContactAction(chat: Chat, chatModel: ChatModel, showMenu: MutableState<Boolean>) {
   ItemAction(
     stringResource(R.string.delete_contact_menu_action),
-    Icons.Outlined.Delete,
+    painterResource(R.drawable.ic_delete),
     onClick = {
       deleteContactDialog(chat.chatInfo, chatModel)
       showMenu.value = false
@@ -258,7 +244,7 @@ fun DeleteContactAction(chat: Chat, chatModel: ChatModel, showMenu: MutableState
 fun DeleteGroupAction(chat: Chat, groupInfo: GroupInfo, chatModel: ChatModel, showMenu: MutableState<Boolean>) {
   ItemAction(
     stringResource(R.string.delete_group_menu_action),
-    Icons.Outlined.Delete,
+    painterResource(R.drawable.ic_delete),
     onClick = {
       deleteGroupDialog(chat.chatInfo, groupInfo, chatModel)
       showMenu.value = false
@@ -272,7 +258,7 @@ fun JoinGroupAction(chat: Chat, groupInfo: GroupInfo, chatModel: ChatModel, show
   val joinGroup: () -> Unit = { withApi { chatModel.controller.apiJoinGroup(groupInfo.groupId) } }
   ItemAction(
     if (chat.chatInfo.incognito) stringResource(R.string.join_group_incognito_button) else stringResource(R.string.join_group_button),
-    if (chat.chatInfo.incognito) Icons.Filled.TheaterComedy else Icons.Outlined.Login,
+    if (chat.chatInfo.incognito) painterResource(R.drawable.ic_theater_comedy_filled) else painterResource(R.drawable.ic_login),
     color = if (chat.chatInfo.incognito) Indigo else MaterialTheme.colors.onBackground,
     onClick = {
       joinGroup()
@@ -285,7 +271,7 @@ fun JoinGroupAction(chat: Chat, groupInfo: GroupInfo, chatModel: ChatModel, show
 fun LeaveGroupAction(groupInfo: GroupInfo, chatModel: ChatModel, showMenu: MutableState<Boolean>) {
   ItemAction(
     stringResource(R.string.leave_group_button),
-    Icons.Outlined.Logout,
+    painterResource(R.drawable.ic_logout),
     onClick = {
       leaveGroupDialog(groupInfo, chatModel)
       showMenu.value = false
@@ -298,7 +284,7 @@ fun LeaveGroupAction(groupInfo: GroupInfo, chatModel: ChatModel, showMenu: Mutab
 fun ContactRequestMenuItems(chatInfo: ChatInfo.ContactRequest, chatModel: ChatModel, showMenu: MutableState<Boolean>) {
   ItemAction(
     if (chatModel.incognito.value) stringResource(R.string.accept_contact_incognito_button) else stringResource(R.string.accept_contact_button),
-    if (chatModel.incognito.value) Icons.Filled.TheaterComedy else Icons.Outlined.Check,
+    if (chatModel.incognito.value) painterResource(R.drawable.ic_theater_comedy_filled) else painterResource(R.drawable.ic_check),
     color = if (chatModel.incognito.value) Indigo else MaterialTheme.colors.onBackground,
     onClick = {
       acceptContactRequest(chatInfo.apiId, chatInfo, true, chatModel)
@@ -307,7 +293,7 @@ fun ContactRequestMenuItems(chatInfo: ChatInfo.ContactRequest, chatModel: ChatMo
   )
   ItemAction(
     stringResource(R.string.reject_contact_button),
-    Icons.Outlined.Close,
+    painterResource(R.drawable.ic_close),
     onClick = {
       rejectContactRequest(chatInfo, chatModel)
       showMenu.value = false
@@ -320,7 +306,7 @@ fun ContactRequestMenuItems(chatInfo: ChatInfo.ContactRequest, chatModel: ChatMo
 fun ContactConnectionMenuItems(chatInfo: ChatInfo.ContactConnection, chatModel: ChatModel, showMenu: MutableState<Boolean>) {
   ItemAction(
     stringResource(R.string.set_contact_name),
-    Icons.Outlined.Edit,
+    painterResource(R.drawable.ic_edit),
     onClick = {
       ModalManager.shared.showModalCloseable(true) { close ->
         ContactConnectionInfoView(chatModel, chatInfo.contactConnection.connReqInv, chatInfo.contactConnection, true, close)
@@ -330,7 +316,7 @@ fun ContactConnectionMenuItems(chatInfo: ChatInfo.ContactConnection, chatModel:
   )
   ItemAction(
     stringResource(R.string.delete_verb),
-    Icons.Outlined.Delete,
+    painterResource(R.drawable.ic_delete),
     onClick = {
       deleteContactConnectionAlert(chatInfo.contactConnection, chatModel) {}
       showMenu.value = false
@@ -342,7 +328,7 @@ fun ContactConnectionMenuItems(chatInfo: ChatInfo.ContactConnection, chatModel:
 @Composable
 private fun InvalidDataView() {
   Row {
-    ProfileImage(72.dp, null, Icons.Filled.AccountCircle, HighOrLowlight)
+    ProfileImage(72.dp, null, R.drawable.ic_account_circle_filled, MaterialTheme.colors.secondary)
     Column(
       modifier = Modifier
         .padding(horizontal = 8.dp)
@@ -447,7 +433,7 @@ fun contactConnectionAlertDialog(connection: PendingContactConnection, chatModel
         Modifier
           .fillMaxWidth()
           .padding(horizontal = 8.dp, vertical = 2.dp),
-        horizontalArrangement = Arrangement.End,
+        horizontalArrangement = Arrangement.Center,
       ) {
         TextButton(onClick = {
           AlertManager.shared.hideAlert()
@@ -480,7 +466,8 @@ fun deleteContactConnectionAlert(connection: PendingContactConnection, chatModel
           onSuccess()
         }
       }
-    }
+    },
+    destructive = true,
   )
 }
 
@@ -498,6 +485,7 @@ fun pendingContactAlertDialog(chatInfo: ChatInfo, chatModel: ChatModel) {
         }
       }
     },
+    destructive = true,
     dismissText = generalGetString(R.string.cancel_verb),
   )
 }
@@ -589,15 +577,7 @@ fun ChatListNavLinkLayout(
       chatLinkPreview()
     }
     if (dropdownMenuItems != null) {
-      Box(Modifier.padding(horizontal = 16.dp)) {
-        DropdownMenu(
-          expanded = showMenu.value,
-          onDismissRequest = { showMenu.value = false },
-          Modifier.width(220.dp)
-        ) {
-          dropdownMenuItems()
-        }
-      }
+      DefaultDropdownMenu(showMenu, dropdownMenuItems = dropdownMenuItems)
     }
   }
   Divider(Modifier.padding(horizontal = 8.dp))

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

@@ -7,20 +7,19 @@ import androidx.compose.foundation.lazy.*
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.*
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.*
-import androidx.compose.material.icons.outlined.*
 import androidx.compose.runtime.*
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.*
 import androidx.compose.ui.platform.LocalUriHandler
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.capitalize
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.intl.Locale
 import androidx.compose.ui.unit.*
+import androidx.fragment.app.FragmentActivity
 import chat.simplex.app.*
 import chat.simplex.app.R
 import chat.simplex.app.model.*
@@ -36,7 +35,7 @@ import kotlinx.coroutines.flow.MutableStateFlow
 import kotlinx.coroutines.launch
 
 @Composable
-fun ChatListView(chatModel: ChatModel, setPerformLA: (Boolean) -> Unit, stopped: Boolean) {
+fun ChatListView(chatModel: ChatModel, setPerformLA: (Boolean, FragmentActivity) -> Unit, stopped: Boolean) {
   val newChatSheetState by rememberSaveable(stateSaver = AnimatedViewState.saver()) { mutableStateOf(MutableStateFlow(AnimatedViewState.GONE)) }
   val userPickerState by rememberSaveable(stateSaver = AnimatedViewState.saver()) { mutableStateOf(MutableStateFlow(AnimatedViewState.GONE)) }
   val showNewChatSheet = {
@@ -66,10 +65,10 @@ fun ChatListView(chatModel: ChatModel, setPerformLA: (Boolean) -> Unit, stopped:
   val scaffoldState = rememberScaffoldState()
   val scope = rememberCoroutineScope()
   val switchingUsers = rememberSaveable { mutableStateOf(false) }
-  Scaffold(
-    topBar = { ChatListToolbar(chatModel, scaffoldState.drawerState, userPickerState, stopped) { searchInList = it.trim() } },
+  Scaffold(topBar = { ChatListToolbar(chatModel, scaffoldState.drawerState, userPickerState, stopped) { searchInList = it.trim() } },
     scaffoldState = scaffoldState,
     drawerContent = { SettingsView(chatModel, setPerformLA) },
+    drawerScrimColor = MaterialTheme.colors.onSurface.copy(alpha = if (isInDarkTheme()) 0.16f else 0.32f),
     floatingActionButton = {
       if (searchInList.isEmpty()) {
         FloatingActionButton(
@@ -78,16 +77,17 @@ fun ChatListView(chatModel: ChatModel, setPerformLA: (Boolean) -> Unit, stopped:
               if (newChatSheetState.value.isVisible()) hideNewChatSheet(true) else showNewChatSheet()
             }
           },
+          Modifier.padding(end = DEFAULT_PADDING - 16.dp, bottom = DEFAULT_PADDING - 16.dp),
           elevation = FloatingActionButtonDefaults.elevation(
             defaultElevation = 0.dp,
             pressedElevation = 0.dp,
             hoveredElevation = 0.dp,
             focusedElevation = 0.dp,
           ),
-          backgroundColor = if (!stopped) MaterialTheme.colors.primary else HighOrLowlight,
+          backgroundColor = if (!stopped) MaterialTheme.colors.primary else MaterialTheme.colors.secondary,
           contentColor = Color.White
         ) {
-          Icon(if (!newChatSheetState.collectAsState().value.isVisible()) Icons.Default.Edit else Icons.Default.Close, stringResource(R.string.add_contact_or_create_group))
+          Icon(if (!newChatSheetState.collectAsState().value.isVisible()) painterResource(R.drawable.ic_edit_filled) else painterResource(R.drawable.ic_close), stringResource(R.string.add_contact_or_create_group))
         }
       }
     }
@@ -96,7 +96,6 @@ fun ChatListView(chatModel: ChatModel, setPerformLA: (Boolean) -> Unit, stopped:
       Column(
         modifier = Modifier
           .fillMaxSize()
-          .background(MaterialTheme.colors.background)
       ) {
         if (chatModel.chats.isNotEmpty()) {
           ChatList(chatModel, search = searchInList)
@@ -105,7 +104,7 @@ fun ChatListView(chatModel: ChatModel, setPerformLA: (Boolean) -> Unit, stopped:
             if (!stopped && !newChatSheetState.collectAsState().value.isVisible()) {
               OnboardingButtons(showNewChatSheet)
             }
-            Text(stringResource(R.string.you_have_no_chats), Modifier.align(Alignment.Center), color = HighOrLowlight)
+            Text(stringResource(R.string.you_have_no_chats), Modifier.align(Alignment.Center), color = MaterialTheme.colors.secondary)
           }
         }
       }
@@ -136,7 +135,7 @@ private fun OnboardingButtons(openNewChatSheet: () -> Unit) {
     }
     Spacer(Modifier.height(DEFAULT_PADDING))
     ConnectButton(generalGetString(R.string.tap_to_start_new_chat), openNewChatSheet)
-    val color = MaterialTheme.colors.primary
+    val color = MaterialTheme.colors.primaryVariant
     Canvas(modifier = Modifier.width(40.dp).height(10.dp), onDraw = {
       val trianglePath = Path().apply {
         moveTo(0.dp.toPx(), 0f)
@@ -159,7 +158,7 @@ private fun ConnectButton(text: String, onClick: () -> Unit) {
     onClick,
     shape = RoundedCornerShape(21.dp),
     colors = ButtonDefaults.textButtonColors(
-      backgroundColor = MaterialTheme.colors.primary
+      backgroundColor = MaterialTheme.colors.primaryVariant
     ),
     elevation = null,
     contentPadding = PaddingValues(horizontal = DEFAULT_PADDING, vertical = DEFAULT_PADDING_HALF),
@@ -180,7 +179,7 @@ private fun ChatListToolbar(chatModel: ChatModel, drawerState: DrawerState, user
   if (chatModel.chats.size >= 8) {
     barButtons.add {
       IconButton({ showSearch = true }) {
-        Icon(Icons.Outlined.Search, stringResource(android.R.string.search_go).capitalize(Locale.current), tint = MaterialTheme.colors.primary)
+        Icon(painterResource(R.drawable.ic_search_500), stringResource(android.R.string.search_go).capitalize(Locale.current), tint = MaterialTheme.colors.primary)
       }
     }
   }
@@ -193,7 +192,7 @@ private fun ChatListToolbar(chatModel: ChatModel, drawerState: DrawerState, user
         )
       }) {
         Icon(
-          Icons.Filled.Report,
+          painterResource(R.drawable.ic_report_filled),
           generalGetString(R.string.chat_is_stopped_indication),
           tint = Color.Red,
         )
@@ -230,7 +229,7 @@ private fun ChatListToolbar(chatModel: ChatModel, drawerState: DrawerState, user
         )
         if (chatModel.incognito.value) {
           Icon(
-            Icons.Filled.TheaterComedy,
+            painterResource(R.drawable.ic_theater_comedy_filled),
             stringResource(R.string.incognito),
             tint = Indigo,
             modifier = Modifier.padding(10.dp).size(26.dp)
@@ -282,7 +281,7 @@ private fun ProgressIndicator() {
     Modifier
       .padding(horizontal = 2.dp)
       .size(30.dp),
-    color = HighOrLowlight,
+    color = MaterialTheme.colors.secondary,
     strokeWidth = 2.5.dp
   )
 }

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

@@ -7,15 +7,12 @@ import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.text.InlineTextContent
 import androidx.compose.foundation.text.appendInlineContent
 import androidx.compose.material.*
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.*
-import androidx.compose.material.icons.outlined.*
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.*
 import androidx.compose.ui.text.font.FontWeight
@@ -46,10 +43,10 @@ fun ChatPreviewView(
   @Composable
   fun groupInactiveIcon() {
     Icon(
-      Icons.Filled.Cancel,
+      painterResource(R.drawable.ic_cancel_filled),
       stringResource(R.string.icon_descr_group_inactive),
       Modifier.size(18.dp).background(MaterialTheme.colors.background, CircleShape),
-      tint = HighOrLowlight
+      tint = MaterialTheme.colors.secondary
     )
   }
 
@@ -79,15 +76,15 @@ fun ChatPreviewView(
 
   @Composable
   fun VerifiedIcon() {
-    Icon(Icons.Outlined.VerifiedUser, null, Modifier.size(19.dp).padding(end = 3.dp, top = 1.dp), tint = HighOrLowlight)
+    Icon(painterResource(R.drawable.ic_verified_user), null, Modifier.size(19.dp).padding(end = 3.dp, top = 1.dp), tint = MaterialTheme.colors.secondary)
   }
 
   fun messageDraft(draft: ComposeState): Pair<AnnotatedString, Map<String, InlineTextContent>> {
-    fun attachment(): Pair<ImageVector, String?>? =
+    fun attachment(): Pair<Int, String?>? =
       when (draft.preview) {
-        is ComposePreview.FilePreview -> Icons.Filled.InsertDriveFile to draft.preview.fileName
-        is ComposePreview.ImagePreview -> Icons.Outlined.Image to null
-        is ComposePreview.VoicePreview -> Icons.Filled.PlayArrow to durationText(draft.preview.durationMs / 1000)
+        is ComposePreview.FilePreview -> R.drawable.ic_draft_filled to draft.preview.fileName
+        is ComposePreview.MediaPreview -> R.drawable.ic_image to null
+        is ComposePreview.VoicePreview -> R.drawable.ic_play_arrow_filled to durationText(draft.preview.durationMs / 1000)
         else -> null
       }
 
@@ -108,12 +105,12 @@ fun ChatPreviewView(
       "editIcon" to InlineTextContent(
         Placeholder(20.sp, 20.sp, PlaceholderVerticalAlign.TextCenter)
       ) {
-        Icon(Icons.Outlined.EditNote, null, tint = MaterialTheme.colors.primary)
+        Icon(painterResource(R.drawable.ic_edit_note), null, tint = MaterialTheme.colors.primary)
       },
       "attachmentIcon" to InlineTextContent(
         Placeholder(20.sp, 20.sp, PlaceholderVerticalAlign.TextCenter)
       ) {
-        Icon(attachment?.first ?: Icons.Outlined.EditNote, null, tint = HighOrLowlight)
+        Icon(if (attachment?.first != null) painterResource(attachment.first) else painterResource(R.drawable.ic_edit_note), null, tint = MaterialTheme.colors.secondary)
       }
     )
     return text to inlineContent
@@ -127,12 +124,12 @@ fun ChatPreviewView(
           if (cInfo.contact.verified) {
             VerifiedIcon()
           }
-          chatPreviewTitleText(if (cInfo.ready) Color.Unspecified else HighOrLowlight)
+          chatPreviewTitleText(if (cInfo.ready) Color.Unspecified else MaterialTheme.colors.secondary)
         }
       is ChatInfo.Group ->
         when (cInfo.groupInfo.membership.memberStatus) {
           GroupMemberStatus.MemInvited -> chatPreviewTitleText(if (chat.chatInfo.incognito) Indigo else MaterialTheme.colors.primary)
-          GroupMemberStatus.MemAccepted -> chatPreviewTitleText(HighOrLowlight)
+          GroupMemberStatus.MemAccepted -> chatPreviewTitleText(MaterialTheme.colors.secondary)
           else -> chatPreviewTitleText()
         }
       else -> chatPreviewTitleText()
@@ -173,12 +170,12 @@ fun ChatPreviewView(
       when (cInfo) {
         is ChatInfo.Direct ->
           if (!cInfo.ready) {
-            Text(stringResource(R.string.contact_connection_pending), color = HighOrLowlight)
+            Text(stringResource(R.string.contact_connection_pending), color = MaterialTheme.colors.secondary)
           }
         is ChatInfo.Group ->
           when (cInfo.groupInfo.membership.memberStatus) {
             GroupMemberStatus.MemInvited -> Text(groupInvitationPreviewText(chatModelIncognito, currentUserProfileDisplayName, cInfo.groupInfo))
-            GroupMemberStatus.MemAccepted -> Text(stringResource(R.string.group_connection_pending), color = HighOrLowlight)
+            GroupMemberStatus.MemAccepted -> Text(stringResource(R.string.group_connection_pending), color = MaterialTheme.colors.secondary)
             else -> {}
           }
         else -> {}
@@ -211,7 +208,7 @@ fun ChatPreviewView(
     ) {
       Text(
         ts,
-        color = HighOrLowlight,
+        color = MaterialTheme.colors.secondary,
         style = MaterialTheme.typography.body2,
         modifier = Modifier.padding(bottom = 5.dp)
       )
@@ -224,10 +221,10 @@ fun ChatPreviewView(
         ) {
           Text(
             if (n > 0) unreadCountStr(n) else "",
-            color = MaterialTheme.colors.onPrimary,
+            color = Color.White,
             fontSize = 11.sp,
             modifier = Modifier
-              .background(if (stopped || showNtfsIcon) HighOrLowlight else MaterialTheme.colors.primary, shape = CircleShape)
+              .background(if (stopped || showNtfsIcon) MaterialTheme.colors.secondary else MaterialTheme.colors.primaryVariant, shape = CircleShape)
               .badgeLayout()
               .padding(horizontal = 3.dp)
               .padding(vertical = 1.dp)
@@ -239,9 +236,9 @@ fun ChatPreviewView(
           contentAlignment = Alignment.Center
         ) {
           Icon(
-            Icons.Filled.NotificationsOff,
+            painterResource(R.drawable.ic_notifications_off_filled),
             contentDescription = generalGetString(R.string.notifications),
-            tint = HighOrLowlight,
+            tint = MaterialTheme.colors.secondary,
             modifier = Modifier
               .padding(horizontal = 3.dp)
               .padding(vertical = 1.dp)
@@ -281,9 +278,9 @@ fun ChatStatusImage(s: NetworkStatus?) {
   val descr = s?.statusString
   if (s is NetworkStatus.Error) {
     Icon(
-      Icons.Outlined.ErrorOutline,
+      painterResource(R.drawable.ic_error),
       contentDescription = descr,
-      tint = HighOrLowlight,
+      tint = MaterialTheme.colors.secondary,
       modifier = Modifier
         .size(19.dp)
     )
@@ -292,7 +289,7 @@ fun ChatStatusImage(s: NetworkStatus?) {
       Modifier
         .padding(horizontal = 2.dp)
         .size(15.dp),
-      color = HighOrLowlight,
+      color = MaterialTheme.colors.secondary,
       strokeWidth = 1.5.dp
     )
   }

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

@@ -3,16 +3,16 @@ package chat.simplex.app.views.chatlist
 import androidx.compose.foundation.layout.*
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Text
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.outlined.*
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import chat.simplex.app.R
 import chat.simplex.app.model.*
 import chat.simplex.app.ui.theme.*
 import chat.simplex.app.views.helpers.ProfileImage
@@ -21,7 +21,7 @@ import chat.simplex.app.views.helpers.ProfileImage
 fun ContactConnectionView(contactConnection: PendingContactConnection) {
   Row {
     Box(Modifier.size(72.dp), contentAlignment = Alignment.Center) {
-      ProfileImage(size = 54.dp, null, if (contactConnection.initiated) Icons.Outlined.AddLink else Icons.Outlined.Link)
+      ProfileImage(size = 54.dp, null, if (contactConnection.initiated) R.drawable.ic_add_link else R.drawable.ic_link)
     }
     Column(
       modifier = Modifier
@@ -34,7 +34,7 @@ fun ContactConnectionView(contactConnection: PendingContactConnection) {
         overflow = TextOverflow.Ellipsis,
         style = MaterialTheme.typography.h3,
         fontWeight = FontWeight.Bold,
-        color = HighOrLowlight
+        color = MaterialTheme.colors.secondary
       )
       val height = with(LocalDensity.current) { 46.sp.toDp() }
       Text(contactConnection.description, Modifier.heightIn(min = height), maxLines = 2, color = if (isInDarkTheme()) MessagePreviewDark else MessagePreviewLight)
@@ -42,11 +42,10 @@ fun ContactConnectionView(contactConnection: PendingContactConnection) {
     val ts = getTimestampText(contactConnection.updatedAt)
     Column(
       Modifier.fillMaxHeight(),
-      verticalArrangement = Arrangement.Top
     ) {
       Text(
         ts,
-        color = HighOrLowlight,
+        color = MaterialTheme.colors.secondary,
         style = MaterialTheme.typography.body2,
         modifier = Modifier.padding(bottom = 5.dp)
       )

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

@@ -39,11 +39,10 @@ fun ContactRequestView(chatModelIncognito: Boolean, contactRequest: ChatInfo.Con
     val ts = getTimestampText(contactRequest.contactRequest.updatedAt)
     Column(
       Modifier.fillMaxHeight(),
-      verticalArrangement = Arrangement.Top
     ) {
       Text(
         ts,
-        color = HighOrLowlight,
+        color = MaterialTheme.colors.secondary,
         style = MaterialTheme.typography.body2,
         modifier = Modifier.padding(bottom = 5.dp)
       )

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

@@ -6,14 +6,12 @@ import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.material.*
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.*
-import androidx.compose.material.icons.outlined.*
 import androidx.compose.runtime.*
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.capitalize
 import androidx.compose.ui.text.font.FontWeight
@@ -21,8 +19,7 @@ import androidx.compose.ui.text.intl.Locale
 import androidx.compose.ui.unit.dp
 import chat.simplex.app.R
 import chat.simplex.app.model.*
-import chat.simplex.app.ui.theme.HighOrLowlight
-import chat.simplex.app.ui.theme.Indigo
+import chat.simplex.app.ui.theme.*
 import chat.simplex.app.views.helpers.*
 import kotlinx.coroutines.flow.MutableStateFlow
 
@@ -38,7 +35,7 @@ fun ShareListView(chatModel: ChatModel, stopped: Boolean) {
       Column(
         modifier = Modifier
           .fillMaxSize()
-          .background(MaterialTheme.colors.background)
+          .themedBackground()
       ) {
         if (chatModel.chats.isNotEmpty()) {
           ShareList(chatModel, search = searchInList)
@@ -56,7 +53,7 @@ fun ShareListView(chatModel: ChatModel, stopped: Boolean) {
 @Composable
 private fun EmptyList() {
   Box(Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
-    Text(stringResource(R.string.you_have_no_chats), color = HighOrLowlight)
+    Text(stringResource(R.string.you_have_no_chats), color = MaterialTheme.colors.secondary)
   }
 }
 
@@ -86,7 +83,7 @@ private fun ShareListToolbar(chatModel: ChatModel, userPickerState: MutableState
   if (chatModel.chats.size >= 8) {
     barButtons.add {
       IconButton({ showSearch = true }) {
-        Icon(Icons.Outlined.Search, stringResource(android.R.string.search_go).capitalize(Locale.current), tint = MaterialTheme.colors.primary)
+        Icon(painterResource(R.drawable.ic_search_500), stringResource(android.R.string.search_go).capitalize(Locale.current), tint = MaterialTheme.colors.primary)
       }
     }
   }
@@ -99,7 +96,7 @@ private fun ShareListToolbar(chatModel: ChatModel, userPickerState: MutableState
         )
       }) {
         Icon(
-          Icons.Filled.Report,
+          painterResource(R.drawable.ic_report_filled),
           generalGetString(R.string.chat_is_stopped_indication),
           tint = Color.Red,
         )
@@ -114,7 +111,7 @@ private fun ShareListToolbar(chatModel: ChatModel, userPickerState: MutableState
         Text(
           when (chatModel.sharedContent.value) {
             is SharedContent.Text -> stringResource(R.string.share_message)
-            is SharedContent.Images -> stringResource(R.string.share_image)
+            is SharedContent.Media -> stringResource(R.string.share_image)
             is SharedContent.File -> stringResource(R.string.share_file)
             else -> stringResource(R.string.share_message)
           },
@@ -123,7 +120,7 @@ private fun ShareListToolbar(chatModel: ChatModel, userPickerState: MutableState
         )
         if (chatModel.incognito.value) {
           Icon(
-            Icons.Filled.TheaterComedy,
+            painterResource(R.drawable.ic_theater_comedy_filled),
             stringResource(R.string.incognito),
             tint = Indigo,
             modifier = Modifier.padding(10.dp).size(26.dp)

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

@@ -1,23 +1,21 @@
 package chat.simplex.app.views.chatlist
 
-import SectionItemViewSpaceBetween
+import SectionItemView
 import android.util.Log
 import androidx.compose.animation.core.*
 import androidx.compose.foundation.*
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.*
-import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.*
 import androidx.compose.material.*
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.*
-import androidx.compose.material.icons.outlined.*
 import androidx.compose.runtime.*
 import androidx.compose.ui.*
-import androidx.compose.ui.draw.shadow
+import androidx.compose.ui.draw.*
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.capitalize
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.intl.Locale
@@ -105,15 +103,16 @@ fun UserPicker(
   ) {
     Column(
       Modifier
-        .widthIn(min = 220.dp)
+        .widthIn(min = 260.dp)
         .width(IntrinsicSize.Min)
         .height(IntrinsicSize.Min)
-        .shadow(8.dp, MaterialTheme.shapes.medium, clip = false)
-        .background(if (isInDarkTheme()) MaterialTheme.colors.background.darker(-0.7f) else MaterialTheme.colors.background, MaterialTheme.shapes.medium)
+        .shadow(8.dp, RoundedCornerShape(corner = CornerSize(25.dp)), clip = true)
+        .background(MaterialTheme.colors.surface, RoundedCornerShape(corner = CornerSize(25.dp)))
+        .clip(RoundedCornerShape(corner = CornerSize(25.dp)))
     ) {
       Column(Modifier.weight(1f).verticalScroll(rememberScrollState())) {
         users.forEach { u ->
-          UserProfilePickerItem(u.user, u.unreadCount, openSettings = {
+          UserProfilePickerItem(u.user, u.unreadCount, PaddingValues(start = DEFAULT_PADDING_HALF, end = DEFAULT_PADDING), openSettings = {
             settingsClicked()
             userPickerState.value = AnimatedViewState.GONE
           }) {
@@ -151,7 +150,7 @@ fun UserPicker(
 }
 
 @Composable
-fun UserProfilePickerItem(u: User, unreadCount: Int = 0, onLongClick: () -> Unit = {}, openSettings: () -> Unit = {}, onClick: () -> Unit) {
+fun UserProfilePickerItem(u: User, unreadCount: Int = 0, padding: PaddingValues = PaddingValues(start = DEFAULT_PADDING_HALF, end = DEFAULT_PADDING), onLongClick: () -> Unit = {}, openSettings: () -> Unit = {}, onClick: () -> Unit) {
   Row(
     Modifier
       .fillMaxWidth()
@@ -162,33 +161,31 @@ fun UserProfilePickerItem(u: User, unreadCount: Int = 0, onLongClick: () -> Unit
         interactionSource = remember { MutableInteractionSource() },
         indication = if (!u.activeUser) LocalIndication.current else null
       )
-      .padding(PaddingValues(start = 8.dp, end = DEFAULT_PADDING)),
+      .padding(padding),
     horizontalArrangement = Arrangement.SpaceBetween,
     verticalAlignment = Alignment.CenterVertically
   ) {
     UserProfileRow(u)
     if (u.activeUser) {
-        Icon(Icons.Filled.Done, null, Modifier.size(20.dp), tint = MaterialTheme.colors.onBackground)
+        Icon(painterResource(R.drawable.ic_done_filled), null, Modifier.size(20.dp), tint = MaterialTheme.colors.onBackground)
     } else if (u.hidden) {
-        Icon(Icons.Outlined.Lock, null, Modifier.size(20.dp), tint = HighOrLowlight)
+        Icon(painterResource(R.drawable.ic_lock), null, Modifier.size(20.dp), tint = MaterialTheme.colors.secondary)
     } else if (unreadCount > 0) {
-      Row {
+      Box(
+        contentAlignment = Alignment.Center
+      ) {
         Text(
           unreadCountStr(unreadCount),
           color = Color.White,
           fontSize = 11.sp,
           modifier = Modifier
-            .background(if (u.showNtfs) MaterialTheme.colors.primary else HighOrLowlight, shape = CircleShape)
-            .sizeIn(minWidth = 20.dp, minHeight = 20.dp)
-            .padding(horizontal = 3.dp)
-            .padding(vertical = 1.dp),
-          textAlign = TextAlign.Center,
-          maxLines = 1
+            .background(MaterialTheme.colors.primaryVariant, shape = CircleShape)
+            .padding(2.dp)
+            .badgeLayout()
         )
-        Spacer(Modifier.width(2.dp))
       }
     } else if (!u.showNtfs) {
-      Icon(Icons.Outlined.NotificationsOff, null, Modifier.size(20.dp), tint = HighOrLowlight)
+      Icon(painterResource(R.drawable.ic_notifications_off), null, Modifier.size(20.dp), tint = MaterialTheme.colors.secondary)
     }  else {
       Box(Modifier.size(20.dp))
     }
@@ -210,7 +207,8 @@ fun UserProfileRow(u: User) {
     Text(
       u.displayName,
       modifier = Modifier
-        .padding(start = 8.dp, end = 8.dp),
+        .padding(start = 10.dp, end = 8.dp),
+      color = if (isInDarkTheme()) MenuTextColorDark else Color.Black,
       fontWeight = if (u.activeUser) FontWeight.Medium else FontWeight.Normal
     )
   }
@@ -218,24 +216,26 @@ fun UserProfileRow(u: User) {
 
 @Composable
 private fun SettingsPickerItem(onClick: () -> Unit) {
-  SectionItemViewSpaceBetween(onClick, minHeight = 68.dp) {
+  SectionItemView(onClick, padding = PaddingValues(start = DEFAULT_PADDING + 7.dp, end = DEFAULT_PADDING), minHeight = 68.dp) {
     val text = generalGetString(R.string.settings_section_title_settings).lowercase().capitalize(Locale.current)
+    Icon(painterResource(R.drawable.ic_settings), text, Modifier.size(20.dp), tint = MaterialTheme.colors.onBackground)
+    Spacer(Modifier.width(DEFAULT_PADDING + 6.dp))
     Text(
       text,
-      color = MaterialTheme.colors.onBackground,
+      color = if (isInDarkTheme()) MenuTextColorDark else Color.Black,
     )
-    Icon(Icons.Outlined.Settings, text, Modifier.size(20.dp), tint = MaterialTheme.colors.onBackground)
   }
 }
 
 @Composable
 private fun CancelPickerItem(onClick: () -> Unit) {
-  SectionItemViewSpaceBetween(onClick, minHeight = 68.dp) {
+  SectionItemView(onClick, padding = PaddingValues(start = DEFAULT_PADDING + 7.dp, end = DEFAULT_PADDING), minHeight = 68.dp) {
     val text = generalGetString(R.string.cancel_verb)
+    Icon(painterResource(R.drawable.ic_close), text, Modifier.size(20.dp), tint = MaterialTheme.colors.onBackground)
+    Spacer(Modifier.width(DEFAULT_PADDING + 6.dp))
     Text(
       text,
-      color = MaterialTheme.colors.onBackground,
+      color = if (isInDarkTheme()) MenuTextColorDark else Color.Black,
     )
-    Icon(Icons.Outlined.Close, text, Modifier.size(20.dp), tint = MaterialTheme.colors.onBackground)
   }
 }

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

@@ -1,6 +1,6 @@
 package chat.simplex.app.views.database
 
-import SectionDivider
+import SectionBottomSpacer
 import SectionTextFooter
 import SectionView
 import android.content.Context
@@ -13,16 +13,14 @@ import androidx.activity.compose.rememberLauncherForActivityResult
 import androidx.activity.result.contract.ActivityResultContracts
 import androidx.compose.foundation.layout.*
 import androidx.compose.material.*
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.outlined.*
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.dp
 import chat.simplex.app.R
 import chat.simplex.app.TAG
 import chat.simplex.app.model.ChatModel
@@ -57,20 +55,18 @@ fun ChatArchiveLayout(
 ) {
   Column(
     Modifier.fillMaxWidth(),
-    horizontalAlignment = Alignment.Start,
   ) {
     AppBarTitle(title)
     SectionView(stringResource(R.string.chat_archive_section)) {
       SettingsActionItem(
-        Icons.Outlined.IosShare,
+        painterResource(R.drawable.ic_ios_share),
         stringResource(R.string.save_archive),
         saveArchive,
         textColor = MaterialTheme.colors.primary,
         iconColor = MaterialTheme.colors.primary,
       )
-      SectionDivider()
       SettingsActionItem(
-        Icons.Outlined.Delete,
+        painterResource(R.drawable.ic_delete),
         stringResource(R.string.delete_archive),
         deleteArchiveAlert,
         textColor = Color.Red,
@@ -81,6 +77,7 @@ fun ChatArchiveLayout(
     SectionTextFooter(
       String.format(generalGetString(R.string.archive_created_on_ts), archiveTs)
     )
+    SectionBottomSpacer()
   }
 }
 
@@ -119,7 +116,8 @@ private fun deleteArchiveAlert(m: ChatModel, archivePath: String) {
       } else {
         Log.e(TAG, "deleteArchiveAlert delete() error")
       }
-    }
+    },
+    destructive = true,
   )
 }
 

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

@@ -1,6 +1,6 @@
 package chat.simplex.app.views.database
 
-import SectionDivider
+import SectionBottomSpacer
 import SectionItemView
 import SectionItemViewSpaceBetween
 import SectionTextFooter
@@ -12,15 +12,13 @@ import androidx.compose.foundation.shape.ZeroCornerSize
 import androidx.compose.foundation.text.*
 import androidx.compose.material.*
 import androidx.compose.material.TextFieldDefaults.indicatorLine
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.*
-import androidx.compose.material.icons.outlined.*
 import androidx.compose.runtime.*
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.ui.*
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.SolidColor
 import androidx.compose.ui.platform.LocalSoftwareKeyboardController
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.*
 import androidx.compose.ui.text.font.FontWeight
@@ -42,9 +40,9 @@ fun DatabaseEncryptionView(m: ChatModel) {
   val prefs = m.controller.appPrefs
   val useKeychain = remember { mutableStateOf(prefs.storeDBPassphrase.get()) }
   val initialRandomDBPassphrase = remember { mutableStateOf(prefs.initialRandomDBPassphrase.get()) }
-  val storedKey = remember { val key = DatabaseUtils.getDatabaseKey(); mutableStateOf(key != null && key != "") }
+  val storedKey = remember { val key = DatabaseUtils.ksDatabasePassword.get(); mutableStateOf(key != null && key != "") }
   // Do not do rememberSaveable on current key to prevent saving it on disk in clear text
-  val currentKey = remember { mutableStateOf(if (initialRandomDBPassphrase.value) DatabaseUtils.getDatabaseKey() ?: "" else "") }
+  val currentKey = remember { mutableStateOf(if (initialRandomDBPassphrase.value) DatabaseUtils.ksDatabasePassword.get() ?: "" else "") }
   val newKey = rememberSaveable { mutableStateOf("") }
   val confirmNewKey = rememberSaveable { mutableStateOf("") }
 
@@ -89,7 +87,7 @@ fun DatabaseEncryptionView(m: ChatModel) {
                 prefs.initialRandomDBPassphrase.set(false)
                 initialRandomDBPassphrase.value = false
                 if (useKeychain.value) {
-                  DatabaseUtils.setDatabaseKey(newKey.value)
+                  DatabaseUtils.ksDatabasePassword.set(newKey.value)
                 }
                 resetFormAfterEncryption(m, initialRandomDBPassphrase, currentKey, newKey, confirmNewKey, storedKey, useKeychain.value)
                 operationEnded(m, progressIndicator) {
@@ -114,7 +112,7 @@ fun DatabaseEncryptionView(m: ChatModel) {
           Modifier
             .padding(horizontal = 2.dp)
             .size(30.dp),
-          color = HighOrLowlight,
+          color = MaterialTheme.colors.secondary,
           strokeWidth = 2.5.dp
         )
       }
@@ -137,7 +135,6 @@ fun DatabaseEncryptionLayout(
 ) {
   Column(
     Modifier.fillMaxWidth().verticalScroll(rememberScrollState()),
-    horizontalAlignment = Alignment.Start,
   ) {
     AppBarTitle(stringResource(R.string.database_passphrase))
     SectionView(null) {
@@ -150,7 +147,7 @@ fun DatabaseEncryptionLayout(
             text = generalGetString(R.string.notifications_will_be_hidden) + "\n" + storeSecurelyDanger(),
             confirmText = generalGetString(R.string.remove_passphrase),
             onConfirm = {
-              DatabaseUtils.removeDatabaseKey()
+              DatabaseUtils.ksDatabasePassword.remove()
               setUseKeychain(false, useKeychain, prefs)
               storedKey.value = false
             },
@@ -162,8 +159,6 @@ fun DatabaseEncryptionLayout(
       }
 
       if (!initialRandomDBPassphrase.value && chatDbEncrypted == true) {
-        SectionDivider()
-
         PassphraseField(
           currentKey,
           generalGetString(R.string.current_passphrase),
@@ -173,8 +168,6 @@ fun DatabaseEncryptionLayout(
         )
       }
 
-      SectionDivider()
-
       PassphraseField(
         newKey,
         generalGetString(R.string.new_passphrase),
@@ -206,8 +199,6 @@ fun DatabaseEncryptionLayout(
           !validKey(newKey.value) ||
           progressIndicator.value
 
-      SectionDivider()
-
       PassphraseField(
         confirmNewKey,
         generalGetString(R.string.confirm_new_passphrase),
@@ -219,10 +210,8 @@ fun DatabaseEncryptionLayout(
         }),
       )
 
-      SectionDivider()
-
       SectionItemViewSpaceBetween(onClickUpdate, disabled = disabled, minHeight = TextFieldDefaults.MinHeight) {
-        Text(generalGetString(R.string.update_database_passphrase), color = if (disabled) HighOrLowlight else MaterialTheme.colors.primary)
+        Text(generalGetString(R.string.update_database_passphrase), color = if (disabled) MaterialTheme.colors.secondary else MaterialTheme.colors.primary)
       }
     }
 
@@ -245,6 +234,7 @@ fun DatabaseEncryptionLayout(
         SectionTextFooter(generalGetString(R.string.impossible_to_recover_passphrase))
       }
     }
+    SectionBottomSpacer()
   }
 }
 
@@ -254,7 +244,7 @@ fun encryptDatabaseSavedAlert(onConfirm: () -> Unit) {
     text = generalGetString(R.string.database_will_be_encrypted_and_passphrase_stored) + "\n" + storeSecurelySaved(),
     confirmText = generalGetString(R.string.encrypt_database),
     onConfirm = onConfirm,
-    destructive = false,
+    destructive = true,
   )
 }
 
@@ -300,9 +290,9 @@ fun SavePassphraseSetting(
   SectionItemView(minHeight = minHeight) {
     Row(verticalAlignment = Alignment.CenterVertically) {
       Icon(
-        if (storedKey) Icons.Filled.VpnKey else Icons.Filled.VpnKeyOff,
+        if (storedKey) painterResource(R.drawable.ic_vpn_key_filled) else painterResource(R.drawable.ic_vpn_key_off_filled),
         stringResource(R.string.save_passphrase_in_keychain),
-        tint = if (storedKey) SimplexGreen else HighOrLowlight
+        tint = if (storedKey) SimplexGreen else MaterialTheme.colors.secondary
       )
       Spacer(Modifier.padding(horizontal = 4.dp))
       Text(
@@ -311,13 +301,9 @@ fun SavePassphraseSetting(
         color = Color.Unspecified
       )
       Spacer(Modifier.fillMaxWidth().weight(1f))
-      Switch(
+      DefaultSwitch(
         checked = useKeychain,
         onCheckedChange = onCheckedChange,
-        colors = SwitchDefaults.colors(
-          checkedThumbColor = MaterialTheme.colors.primary,
-          uncheckedThumbColor = HighOrLowlight
-        ),
         enabled = !initialRandomDBPassphrase && !progressIndicator
       )
     }
@@ -366,15 +352,15 @@ fun PassphraseField(
   showStrength: Boolean = false,
   isValid: (String) -> Boolean,
   keyboardActions: KeyboardActions = KeyboardActions(),
-  dependsOn: MutableState<String>? = null,
+  dependsOn: State<Any?>? = null,
 ) {
   var valid by remember { mutableStateOf(validKey(key.value)) }
   var showKey by remember { mutableStateOf(false) }
   val icon = if (valid) {
-    if (showKey) Icons.Filled.VisibilityOff else Icons.Filled.Visibility
-  } else Icons.Outlined.Error
+    if (showKey) painterResource(R.drawable.ic_visibility_off_filled) else painterResource(R.drawable.ic_visibility_filled)
+  } else painterResource(R.drawable.ic_error)
   val iconColor = if (valid) {
-    if (showStrength && key.value.isNotEmpty()) PassphraseStrength.check(key.value).color else HighOrLowlight
+    if (showStrength && key.value.isNotEmpty()) PassphraseStrength.check(key.value).color else MaterialTheme.colors.secondary
   } else Color.Red
   val keyboard = LocalSoftwareKeyboardController.current
   val keyboardOptions = KeyboardOptions(
@@ -431,7 +417,7 @@ fun PassphraseField(
       TextFieldDefaults.TextFieldDecorationBox(
         value = state.value.text,
         innerTextField = innerTextField,
-        placeholder = { Text(placeholder, color = HighOrLowlight) },
+        placeholder = { Text(placeholder, color = MaterialTheme.colors.secondary) },
         singleLine = true,
         enabled = enabled,
         isError = !valid,
@@ -479,7 +465,7 @@ private fun passphraseEntropy(s: String): Double {
   return s.length * log2(poolSize.toDouble())
 }
 
-private enum class PassphraseStrength(val color: Color) {
+enum class PassphraseStrength(val color: Color) {
   VERY_WEAK(Color.Red), WEAK(WarningOrange), REASONABLE(WarningYellow), STRONG(SimplexGreen);
 
   companion object {
@@ -522,4 +508,4 @@ fun PreviewDatabaseEncryptionLayout() {
       onConfirmEncrypt = {},
     )
   }
-}
+}

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

@@ -1,5 +1,6 @@
 package chat.simplex.app.views.database
 
+import SectionBottomSpacer
 import SectionSpacer
 import SectionView
 import android.content.Context
@@ -38,7 +39,7 @@ fun DatabaseErrorView(
 ) {
   val progressIndicator = remember { mutableStateOf(false) }
   val dbKey = remember { mutableStateOf("") }
-  var storedDBKey by remember { mutableStateOf(DatabaseUtils.getDatabaseKey()) }
+  var storedDBKey by remember { mutableStateOf(DatabaseUtils.ksDatabasePassword.get()) }
   var useKeychain by remember { mutableStateOf(appPreferences.storeDBPassphrase.get()) }
   val context = LocalContext.current
   val restoreDbFromBackup = remember { mutableStateOf(shouldShowRestoreDbButton(appPreferences, context)) }
@@ -49,7 +50,7 @@ fun DatabaseErrorView(
   }
 
   fun saveAndRunChatOnClick() {
-    DatabaseUtils.setDatabaseKey(dbKey.value)
+    DatabaseUtils.ksDatabasePassword.set(dbKey.value)
     storedDBKey = dbKey.value
     appPreferences.storeDBPassphrase.set(true)
     useKeychain = true
@@ -61,7 +62,7 @@ fun DatabaseErrorView(
   fun DatabaseErrorDetails(@StringRes title: Int, content: @Composable ColumnScope.() -> Unit) {
     Text(
       generalGetString(title),
-      Modifier.padding(start = 16.dp, top = 16.dp, bottom = 16.dp),
+      Modifier.padding(start = DEFAULT_PADDING, top = DEFAULT_PADDING, bottom = DEFAULT_PADDING),
       style = MaterialTheme.typography.h1
     )
     SectionView(null, padding = PaddingValues(horizontal = DEFAULT_PADDING, vertical = DEFAULT_PADDING_HALF), content)
@@ -79,7 +80,6 @@ fun DatabaseErrorView(
 
   Column(
     Modifier.fillMaxSize().verticalScroll(rememberScrollState()),
-    horizontalAlignment = Alignment.Start,
     verticalArrangement = Arrangement.Center,
   ) {
     val buttonEnabled = validKey(dbKey.value) && !progressIndicator.value
@@ -158,7 +158,7 @@ fun DatabaseErrorView(
     if (restoreDbFromBackup.value) {
       SectionSpacer()
       Text(generalGetString(R.string.database_backup_can_be_restored))
-      Spacer(Modifier.size(16.dp))
+      Spacer(Modifier.size(DEFAULT_PADDING))
       RestoreDbButton {
         AlertManager.shared.showAlertDialog(
           title = generalGetString(R.string.restore_database_alert_title),
@@ -169,6 +169,7 @@ fun DatabaseErrorView(
         )
       }
     }
+    SectionBottomSpacer()
   }
   if (progressIndicator.value) {
     Box(
@@ -179,7 +180,7 @@ fun DatabaseErrorView(
         Modifier
           .padding(horizontal = 2.dp)
           .size(30.dp),
-        color = HighOrLowlight,
+        color = MaterialTheme.colors.secondary,
         strokeWidth = 2.5.dp
       )
     }

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

@@ -1,9 +1,9 @@
 package chat.simplex.app.views.database
 
-import SectionDivider
+import SectionBottomSpacer
+import SectionDividerSpaced
 import SectionTextFooter
 import SectionItemView
-import SectionSpacer
 import SectionView
 import android.content.Context
 import android.content.res.Configuration
@@ -17,14 +17,12 @@ import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.*
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.*
-import androidx.compose.material.icons.outlined.*
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.*
 import androidx.compose.ui.text.font.FontWeight
@@ -52,7 +50,7 @@ fun DatabaseView(
 ) {
   val context = LocalContext.current
   val progressIndicator = remember { mutableStateOf(false) }
-  val runChat = remember { mutableStateOf(m.chatRunning.value ?: true) }
+  val runChat = remember { m.chatRunning }
   val prefs = m.controller.appPrefs
   val useKeychain = remember { mutableStateOf(prefs.storeDBPassphrase.get()) }
   val chatArchiveName = remember { mutableStateOf(prefs.chatArchiveName.get()) }
@@ -76,7 +74,7 @@ fun DatabaseView(
   ) {
     DatabaseLayout(
       progressIndicator.value,
-      runChat.value,
+      runChat.value != false,
       m.chatDbChanged.value,
       useKeychain.value,
       m.chatDbEncrypted.value,
@@ -116,7 +114,7 @@ fun DatabaseView(
           Modifier
             .padding(horizontal = 2.dp)
             .size(30.dp),
-          color = HighOrLowlight,
+          color = MaterialTheme.colors.secondary,
           strokeWidth = 2.5.dp
         )
       }
@@ -154,13 +152,12 @@ fun DatabaseLayout(
   val operationsDisabled = !stopped || progressIndicator
 
   Column(
-    Modifier.fillMaxWidth().verticalScroll(rememberScrollState()).padding(bottom = DEFAULT_BOTTOM_PADDING),
-    horizontalAlignment = Alignment.Start,
+    Modifier.fillMaxWidth().verticalScroll(rememberScrollState()),
   ) {
     AppBarTitle(stringResource(R.string.your_chat_database))
 
     SectionView(stringResource(R.string.messages_section_title).uppercase()) {
-      SectionItemView { TtlOptions(chatItemTTL, enabled = rememberUpdatedState(!progressIndicator && !chatDbChanged), onChatItemTTLSelected) }
+      TtlOptions(chatItemTTL, enabled = rememberUpdatedState(!stopped && !progressIndicator), onChatItemTTLSelected)
     }
     SectionTextFooter(
       remember(currentUser?.displayName) {
@@ -173,27 +170,28 @@ fun DatabaseLayout(
         }
       }
     )
-    SectionSpacer()
+    SectionDividerSpaced(maxTopPadding = true)
 
     SectionView(stringResource(R.string.run_chat_section)) {
       RunChatSetting(runChat, stopped, chatDbDeleted, startChat, stopChatAlert)
     }
-    SectionSpacer()
+    SectionDividerSpaced()
 
     SectionView(stringResource(R.string.chat_database_section)) {
       val unencrypted = chatDbEncrypted == false
       SettingsActionItem(
-        if (unencrypted) Icons.Outlined.LockOpen else if (useKeyChain) Icons.Filled.VpnKey else Icons.Outlined.Lock,
+        if (unencrypted) painterResource(R.drawable.ic_lock_open) else if (useKeyChain) painterResource(R.drawable.ic_vpn_key_filled)
+        else painterResource(R
+          .drawable.ic_lock),
         stringResource(R.string.database_passphrase),
         click = showSettingsModal() { DatabaseEncryptionView(it) },
-        iconColor = if (unencrypted) WarningOrange else HighOrLowlight,
+        iconColor = if (unencrypted) WarningOrange else MaterialTheme.colors.secondary,
         disabled = operationsDisabled
       )
-      SectionDivider()
       AppDataBackupPreference(privacyFullBackup, initialRandomDBPassphrase)
-      SectionDivider()
+      SectionDividerSpaced(maxBottomPadding = false)
       SettingsActionItem(
-        Icons.Outlined.IosShare,
+        painterResource(R.drawable.ic_ios_share),
         stringResource(R.string.export_database),
         click = {
           if (initialRandomDBPassphrase.get()) {
@@ -206,31 +204,28 @@ fun DatabaseLayout(
         iconColor = MaterialTheme.colors.primary,
         disabled = operationsDisabled
       )
-      SectionDivider()
       SettingsActionItem(
-        Icons.Outlined.FileDownload,
+        painterResource(R.drawable.ic_download),
         stringResource(R.string.import_database),
         { importArchiveLauncher.launch("application/zip") },
         textColor = Color.Red,
         iconColor = Color.Red,
         disabled = operationsDisabled
       )
-      SectionDivider()
       val chatArchiveNameVal = chatArchiveName.value
       val chatArchiveTimeVal = chatArchiveTime.value
       val chatLastStartVal = chatLastStart.value
       if (chatArchiveNameVal != null && chatArchiveTimeVal != null && chatLastStartVal != null) {
         val title = chatArchiveTitle(chatArchiveTimeVal, chatLastStartVal)
         SettingsActionItem(
-          Icons.Outlined.Inventory2,
+          painterResource(R.drawable.ic_inventory_2),
           title,
           click = showSettingsModal { ChatArchiveView(it, title, chatArchiveNameVal, chatArchiveTimeVal) },
           disabled = operationsDisabled
         )
-        SectionDivider()
       }
       SettingsActionItem(
-        Icons.Outlined.DeleteForever,
+        painterResource(R.drawable.ic_delete_forever),
         stringResource(R.string.delete_database),
         deleteChatAlert,
         textColor = Color.Red,
@@ -245,7 +240,7 @@ fun DatabaseLayout(
         stringResource(R.string.stop_chat_to_enable_database_actions)
       }
     )
-    SectionSpacer()
+    SectionDividerSpaced(maxTopPadding = true)
 
     SectionView(stringResource(R.string.files_and_media_section).uppercase()) {
       val deleteFilesDisabled = operationsDisabled || appFilesCountAndSize.value.first == 0
@@ -255,7 +250,7 @@ fun DatabaseLayout(
       ) {
         Text(
           stringResource(if (users.size > 1) R.string.delete_files_and_media_for_all_users else R.string.delete_files_and_media_all),
-          color = if (deleteFilesDisabled) HighOrLowlight else Color.Red
+          color = if (deleteFilesDisabled) MaterialTheme.colors.secondary else Color.Red
         )
       }
     }
@@ -267,35 +262,23 @@ fun DatabaseLayout(
         String.format(stringResource(R.string.total_files_count_and_size), count, formatBytes(size))
       }
     )
+    SectionBottomSpacer()
   }
 }
 
 @Composable
 private fun AppDataBackupPreference(privacyFullBackup: SharedPreference<Boolean>, initialRandomDBPassphrase: SharedPreference<Boolean>) {
-  SectionItemView {
-    Row(verticalAlignment = Alignment.CenterVertically) {
-      Icon(Icons.Outlined.Backup, stringResource(R.string.full_backup), tint = HighOrLowlight)
-      Spacer(Modifier.padding(horizontal = 4.dp))
-      val prefState = remember { mutableStateOf(privacyFullBackup.get()) }
-      Row(Modifier.fillMaxWidth(), verticalAlignment = Alignment.CenterVertically) {
-        Text(stringResource(R.string.full_backup), Modifier.padding(end = 24.dp))
-        Spacer(Modifier.fillMaxWidth().weight(1f))
-        Switch(
-          checked = prefState.value,
-          onCheckedChange = {
-            if (initialRandomDBPassphrase.get()) {
-              exportProhibitedAlert()
-            } else {
-              privacyFullBackup.set(it)
-              prefState.value = it
-            }
-          },
-          colors = SwitchDefaults.colors(
-            checkedThumbColor = MaterialTheme.colors.primary,
-            uncheckedThumbColor = HighOrLowlight
-          )
-        )
-      }
+  SettingsPreferenceItem(
+    painterResource(R.drawable.ic_backup),
+    iconColor = MaterialTheme.colors.secondary,
+    pref = privacyFullBackup,
+    text = stringResource(R.string.full_backup)
+  ) {
+    if (initialRandomDBPassphrase.get()) {
+      exportProhibitedAlert()
+      privacyFullBackup.set(false)
+    } else {
+      privacyFullBackup.set(it)
     }
   }
 }
@@ -311,7 +294,8 @@ private fun setChatItemTTLAlert(
     text = generalGetString(R.string.enable_automatic_deletion_message),
     confirmText = generalGetString(R.string.delete_messages),
     onConfirm = { setCiTTL(m, selectedChatItemTTL, progressIndicator, appFilesCountAndSize, context) },
-    onDismiss = { selectedChatItemTTL.value = m.chatItemTTL.value }
+    onDismiss = { selectedChatItemTTL.value = m.chatItemTTL.value },
+    destructive = true,
   )
 }
 
@@ -350,36 +334,23 @@ fun RunChatSetting(
   startChat: () -> Unit,
   stopChatAlert: () -> Unit
 ) {
-  SectionItemView() {
-    Row(verticalAlignment = Alignment.CenterVertically) {
-      val chatRunningText = if (stopped) stringResource(R.string.chat_is_stopped) else stringResource(R.string.chat_is_running)
-      Icon(
-        if (stopped) Icons.Filled.Report else Icons.Filled.PlayArrow,
-        chatRunningText,
-        tint = if (stopped) Color.Red else MaterialTheme.colors.primary
-      )
-      Spacer(Modifier.padding(horizontal = 4.dp))
-      Text(
-        chatRunningText,
-        Modifier.padding(end = 24.dp)
-      )
-      Spacer(Modifier.fillMaxWidth().weight(1f))
-      Switch(
-        enabled = !chatDbDeleted,
-        checked = runChat,
-        onCheckedChange = { runChatSwitch ->
-          if (runChatSwitch) {
-            startChat()
-          } else {
-            stopChatAlert()
-          }
-        },
-        colors = SwitchDefaults.colors(
-          checkedThumbColor = MaterialTheme.colors.primary,
-          uncheckedThumbColor = HighOrLowlight
-        ),
-      )
-    }
+  val chatRunningText = if (stopped) stringResource(R.string.chat_is_stopped) else stringResource(R.string.chat_is_running)
+  SettingsActionItemWithContent(
+    icon = if (stopped) painterResource(R.drawable.ic_report_filled) else painterResource(R.drawable.ic_play_arrow_filled),
+    text = chatRunningText,
+    iconColor = if (stopped) Color.Red else MaterialTheme.colors.primary,
+  ) {
+    DefaultSwitch(
+      enabled = !chatDbDeleted,
+      checked = runChat,
+      onCheckedChange = { runChatSwitch ->
+        if (runChatSwitch) {
+          startChat()
+        } else {
+          stopChatAlert()
+        }
+      },
+    )
   }
 }
 
@@ -388,7 +359,7 @@ fun chatArchiveTitle(chatArchiveTime: Instant, chatLastStart: Instant): String {
   return stringResource(if (chatArchiveTime < chatLastStart) R.string.old_database_archive else R.string.new_database_archive)
 }
 
-private fun startChat(m: ChatModel, runChat: MutableState<Boolean>, chatLastStart: MutableState<Instant?>, chatDbChanged: MutableState<Boolean>) {
+private fun startChat(m: ChatModel, runChat: MutableState<Boolean?>, chatLastStart: MutableState<Instant?>, chatDbChanged: MutableState<Boolean>) {
   withApi {
     try {
       if (chatDbChanged.value) {
@@ -417,7 +388,7 @@ private fun startChat(m: ChatModel, runChat: MutableState<Boolean>, chatLastStar
   }
 }
 
-private fun stopChatAlert(m: ChatModel, runChat: MutableState<Boolean>, context: Context) {
+private fun stopChatAlert(m: ChatModel, runChat: MutableState<Boolean?>, context: Context) {
   AlertManager.shared.showAlertDialog(
     title = generalGetString(R.string.stop_chat_question),
     text = generalGetString(R.string.stop_chat_to_export_import_or_delete_chat_database),
@@ -434,7 +405,7 @@ private fun exportProhibitedAlert() {
   )
 }
 
-private fun authStopChat(m: ChatModel, runChat: MutableState<Boolean>, context: Context) {
+private fun authStopChat(m: ChatModel, runChat: MutableState<Boolean?>, context: Context) {
   if (m.controller.appPrefs.performLA.get()) {
     authenticate(
       generalGetString(R.string.auth_stop_chat),
@@ -442,12 +413,13 @@ private fun authStopChat(m: ChatModel, runChat: MutableState<Boolean>, context:
       context as FragmentActivity,
       completed = { laResult ->
         when (laResult) {
-          LAResult.Success, LAResult.Unavailable -> {
+          LAResult.Success, is LAResult.Unavailable -> {
             stopChat(m, runChat, context)
           }
           is LAResult.Error -> {
+            runChat.value = true
           }
-          LAResult.Failed -> {
+          is LAResult.Failed -> {
             runChat.value = true
           }
         }
@@ -458,7 +430,7 @@ private fun authStopChat(m: ChatModel, runChat: MutableState<Boolean>, context:
   }
 }
 
-private fun stopChat(m: ChatModel, runChat: MutableState<Boolean>, context: Context) {
+private fun stopChat(m: ChatModel, runChat: MutableState<Boolean?>, context: Context) {
   withApi {
     try {
       m.controller.apiStopChat()
@@ -572,7 +544,8 @@ private fun importArchiveAlert(
     title = generalGetString(R.string.import_database_question),
     text = generalGetString(R.string.your_current_chat_database_will_be_deleted_and_replaced_with_the_imported_one),
     confirmText = generalGetString(R.string.import_database_confirmation),
-    onConfirm = { importArchive(m, context, importedArchiveUri, appFilesCountAndSize, progressIndicator) }
+    onConfirm = { importArchive(m, context, importedArchiveUri, appFilesCountAndSize, progressIndicator) },
+    destructive = true,
   )
 }
 
@@ -592,7 +565,7 @@ private fun importArchive(
         try {
           val config = ArchiveConfig(archivePath, parentTempDirectory = context.cacheDir.toString())
           m.controller.apiImportArchive(config)
-          DatabaseUtils.removeDatabaseKey()
+          DatabaseUtils.ksDatabasePassword.remove()
           appFilesCountAndSize.value = directoryFileCountAndSize(getAppFilesDirectory(context))
           operationEnded(m, progressIndicator) {
             AlertManager.shared.showAlertMsg(generalGetString(R.string.chat_database_imported), generalGetString(R.string.restart_the_app_to_use_imported_chat_database))
@@ -637,7 +610,8 @@ private fun deleteChatAlert(m: ChatModel, progressIndicator: MutableState<Boolea
     title = generalGetString(R.string.delete_chat_profile_question),
     text = generalGetString(R.string.delete_chat_profile_action_cannot_be_undone_warning),
     confirmText = generalGetString(R.string.delete_verb),
-    onConfirm = { deleteChat(m, progressIndicator) }
+    onConfirm = { deleteChat(m, progressIndicator) },
+    destructive = true,
   )
 }
 
@@ -647,7 +621,7 @@ private fun deleteChat(m: ChatModel, progressIndicator: MutableState<Boolean>) {
     try {
       m.controller.apiDeleteStorage()
       m.chatDbDeleted.value = true
-      DatabaseUtils.removeDatabaseKey()
+      DatabaseUtils.ksDatabasePassword.remove()
       m.controller.appPrefs.storeDBPassphrase.set(true)
       operationEnded(m, progressIndicator) {
         AlertManager.shared.showAlertMsg(generalGetString(R.string.chat_database_deleted), generalGetString(R.string.restart_the_app_to_create_a_new_chat_profile))

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

@@ -3,13 +3,15 @@ package chat.simplex.app.views.helpers
 import android.util.Log
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.CornerSize
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.*
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.AnnotatedString
-import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.*
 import androidx.compose.ui.window.Dialog
 import chat.simplex.app.R
@@ -33,13 +35,13 @@ class AlertManager {
     text: String? = null,
     buttons: @Composable () -> Unit,
   ) {
-    val alertText: (@Composable () -> Unit)? = if (text == null) null else { -> Text(text) }
     showAlert {
       AlertDialog(
         onDismissRequest = this::hideAlert,
-        title = { Text(title) },
-        text = alertText,
-        buttons = buttons
+        title = alertTitle(title),
+        text = alertText(text),
+        buttons = buttons,
+        shape = RoundedCornerShape(corner = CornerSize(25.dp))
       )
     }
   }
@@ -51,22 +53,21 @@ class AlertManager {
   ) {
     showAlert {
       Dialog(onDismissRequest = this::hideAlert) {
-        Column(Modifier.background(MaterialTheme.colors.background, MaterialTheme.shapes.medium)) {
-          Text(title,
-            Modifier.padding(start = DEFAULT_PADDING, end = DEFAULT_PADDING, top = DEFAULT_PADDING, bottom = if (text == null) DEFAULT_PADDING else DEFAULT_PADDING_HALF),
-            fontSize = 15.sp,
-            fontWeight = FontWeight.SemiBold
+        Column(
+          Modifier
+            .background(MaterialTheme.colors.surface, RoundedCornerShape(corner = CornerSize(25.dp)))
+            .padding(bottom = DEFAULT_PADDING)
+        ) {
+          Text(
+            title,
+            Modifier.fillMaxWidth().padding(vertical = DEFAULT_PADDING),
+            textAlign = TextAlign.Center,
+            fontSize = 20.sp
           )
-          if (text != null) {
-            CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.high) {
-              Text(
-                text,
-                Modifier.padding(start = DEFAULT_PADDING, end = DEFAULT_PADDING, bottom = DEFAULT_PADDING),
-                fontSize = 14.sp,
-              )
-            }
-          }
           CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.high) {
+            if (text != null) {
+              Text(text, Modifier.fillMaxWidth().padding(start = DEFAULT_PADDING, end = DEFAULT_PADDING, bottom = DEFAULT_PADDING * 1.5f), fontSize = 16.sp, textAlign = TextAlign.Center, color = MaterialTheme.colors.secondary)
+            }
             buttons()
           }
         }
@@ -84,24 +85,27 @@ class AlertManager {
     onDismissRequest: (() -> Unit)? = null,
     destructive: Boolean = false
   ) {
-    val alertText: (@Composable () -> Unit)? = if (text == null) null else { -> Text(text) }
     showAlert {
       AlertDialog(
         onDismissRequest = { onDismissRequest?.invoke(); hideAlert() },
-        title = { Text(title) },
-        text = alertText,
-        confirmButton = {
-          TextButton(onClick = {
-            onConfirm?.invoke()
-            hideAlert()
-          }) { Text(confirmText, color = if (destructive) MaterialTheme.colors.error else Color.Unspecified) }
+        title = alertTitle(title),
+        text = alertText(text),
+        buttons = {
+          Row (
+            Modifier.fillMaxWidth().padding(horizontal = DEFAULT_PADDING).padding(bottom = DEFAULT_PADDING_HALF),
+            horizontalArrangement = Arrangement.SpaceBetween
+          ) {
+            TextButton(onClick = {
+              onDismiss?.invoke()
+              hideAlert()
+            }) { Text(dismissText) }
+            TextButton(onClick = {
+              onConfirm?.invoke()
+              hideAlert()
+            }) { Text(confirmText, color = if (destructive) MaterialTheme.colors.error else Color.Unspecified) }
+          }
         },
-        dismissButton = {
-          TextButton(onClick = {
-            onDismiss?.invoke()
-            hideAlert()
-          }) { Text(dismissText) }
-        }
+        shape = RoundedCornerShape(corner = CornerSize(25.dp))
       )
     }
   }
@@ -116,16 +120,15 @@ class AlertManager {
     onDismissRequest: (() -> Unit)? = null,
     destructive: Boolean = false
   ) {
-    val alertText: (@Composable () -> Unit)? = if (text == null) null else { -> Text(text) }
     showAlert {
       AlertDialog(
         onDismissRequest = { onDismissRequest?.invoke(); hideAlert() },
-        title = { Text(title) },
-        text = alertText,
+        title = alertTitle(title),
+        text = alertText(text),
         buttons = {
           Column(
-            Modifier.fillMaxWidth().padding(horizontal = 8.dp).padding(top = 16.dp, bottom = 2.dp),
-            horizontalAlignment = Alignment.End
+            Modifier.fillMaxWidth().padding(horizontal = DEFAULT_PADDING_HALF).padding(top = DEFAULT_PADDING, bottom = 2.dp),
+            horizontalAlignment = Alignment.CenterHorizontally
           ) {
             TextButton(onClick = {
               onDismiss?.invoke()
@@ -134,39 +137,42 @@ class AlertManager {
             TextButton(onClick = {
               onConfirm?.invoke()
               hideAlert()
-            }) { Text(confirmText, color = if (destructive) MaterialTheme.colors.error else Color.Unspecified) }
+            }) { Text(confirmText, color = if (destructive) Color.Red else Color.Unspecified, textAlign = TextAlign.End) }
           }
         },
+        shape = RoundedCornerShape(corner = CornerSize(25.dp))
       )
     }
   }
 
   fun showAlertMsg(
     title: String, text: String? = null,
-    confirmText: String = generalGetString(R.string.ok), onConfirm: (() -> Unit)? = null
+    confirmText: String = generalGetString(R.string.ok)
   ) {
-    val alertText: (@Composable () -> Unit)? = if (text == null) null else { -> Text(text) }
     showAlert {
       AlertDialog(
         onDismissRequest = this::hideAlert,
-        title = { Text(title) },
-        text = alertText,
-        confirmButton = {
-          TextButton(onClick = {
-            onConfirm?.invoke()
-            hideAlert()
-          }) { Text(confirmText) }
-        }
+        title = alertTitle(title),
+        text = alertText(text),
+        buttons = {
+          Row(
+            Modifier.fillMaxWidth().padding(horizontal = DEFAULT_PADDING).padding(bottom = DEFAULT_PADDING_HALF),
+            horizontalArrangement = Arrangement.Center
+          ) {
+            TextButton(onClick = {
+              hideAlert()
+            }) { Text(confirmText, color = Color.Unspecified) }
+          }
+        },
+        shape = RoundedCornerShape(corner = CornerSize(25.dp))
       )
     }
   }
-
   fun showAlertMsg(
     title: Int,
     text: Int? = null,
     confirmText: Int = R.string.ok,
-    onConfirm: (() -> Unit)? = null
-  ) = showAlertMsg(generalGetString(title), if (text != null) generalGetString(text) else null, generalGetString(confirmText), onConfirm)
+  ) = showAlertMsg(generalGetString(title), if (text != null) generalGetString(text) else null, generalGetString(confirmText))
 
   @Composable
   fun showInView() {
@@ -177,3 +183,30 @@ class AlertManager {
     val shared = AlertManager()
   }
 }
+
+private fun alertTitle(title: String): (@Composable () -> Unit)? {
+  return {
+    Text(
+      title,
+      Modifier.fillMaxWidth(),
+      textAlign = TextAlign.Center,
+      fontSize = 20.sp
+    )
+  }
+}
+
+private fun alertText(text: String?): (@Composable () -> Unit)? {
+  return if (text == null) {
+    null
+  } else {
+    ({
+      Text(
+        text,
+        Modifier.fillMaxWidth(),
+        textAlign = TextAlign.Center,
+        fontSize = 16.sp,
+        color = MaterialTheme.colors.secondary
+      )
+    })
+  }
+}

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

@@ -5,15 +5,12 @@ import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material.Icon
 import androidx.compose.material.MaterialTheme
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.*
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.asImageBitmap
-import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.graphics.*
 import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
@@ -23,18 +20,18 @@ import chat.simplex.app.model.ChatInfo
 import chat.simplex.app.ui.theme.SimpleXTheme
 
 @Composable
-fun ChatInfoImage(chatInfo: ChatInfo, size: Dp, iconColor: Color = MaterialTheme.colors.secondary) {
+fun ChatInfoImage(chatInfo: ChatInfo, size: Dp, iconColor: Color = MaterialTheme.colors.secondaryVariant) {
   val icon =
-    if (chatInfo is ChatInfo.Group) Icons.Filled.SupervisedUserCircle
-                                    else Icons.Filled.AccountCircle
+    if (chatInfo is ChatInfo.Group) R.drawable.ic_supervised_user_circle_filled
+                                    else R.drawable.ic_account_circle_filled
   ProfileImage(size, chatInfo.image, icon, iconColor)
 }
 
 @Composable
-fun IncognitoImage(size: Dp, iconColor: Color = MaterialTheme.colors.secondary) {
+fun IncognitoImage(size: Dp, iconColor: Color = MaterialTheme.colors.secondaryVariant) {
   Box(Modifier.size(size)) {
     Icon(
-      Icons.Filled.TheaterComedy, stringResource(R.string.incognito),
+      painterResource(R.drawable.ic_theater_comedy_filled), stringResource(R.string.incognito),
       modifier = Modifier.size(size).padding(size / 12),
       iconColor
     )
@@ -45,17 +42,31 @@ fun IncognitoImage(size: Dp, iconColor: Color = MaterialTheme.colors.secondary)
 fun ProfileImage(
   size: Dp,
   image: String? = null,
-  icon: ImageVector = Icons.Filled.AccountCircle,
-  color: Color = MaterialTheme.colors.secondary
+  icon: Int = R.drawable.ic_account_circle_filled,
+  color: Color = MaterialTheme.colors.secondaryVariant
 ) {
   Box(Modifier.size(size)) {
     if (image == null) {
-      Icon(
-        icon,
-        contentDescription = stringResource(R.string.icon_descr_profile_image_placeholder),
-        tint = color,
-        modifier = Modifier.fillMaxSize()
-      )
+      val iconToReplace = when (icon) {
+        R.drawable.ic_account_circle_filled -> AccountCircleFilled
+        R.drawable.ic_supervised_user_circle_filled -> SupervisedUserCircleFilled
+        else -> null
+      }
+      if (iconToReplace != null) {
+        Icon(
+          iconToReplace,
+          contentDescription = stringResource(R.string.icon_descr_profile_image_placeholder),
+          tint = color,
+          modifier = Modifier.fillMaxSize()
+        )
+      } else {
+        Icon(
+          painterResource(icon),
+          contentDescription = stringResource(R.string.icon_descr_profile_image_placeholder),
+          tint = color,
+          modifier = Modifier.fillMaxSize()
+        )
+      }
     } else {
       val imageBitmap = base64ToBitmap(image).asImageBitmap()
       Image(
@@ -68,6 +79,7 @@ fun ProfileImage(
   }
 }
 
+
 @Preview
 @Composable
 fun PreviewChatInfoImage() {

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

@@ -1,28 +1,29 @@
 package chat.simplex.app.views.helpers
 
 import androidx.compose.foundation.layout.*
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.outlined.*
+import androidx.compose.material.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.MutableState
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.onFocusChanged
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import chat.simplex.app.R
 import chat.simplex.app.views.newchat.ActionButton
 
 sealed class AttachmentOption {
-  object TakePhoto: AttachmentOption()
-  object PickImage: AttachmentOption()
-  object PickVideo: AttachmentOption()
-  object PickFile: AttachmentOption()
+  object CameraPhoto: AttachmentOption()
+  object GalleryImage: AttachmentOption()
+  object GalleryVideo: AttachmentOption()
+  object File: AttachmentOption()
 }
 
 @Composable
 fun ChooseAttachmentView(
   attachmentOption: MutableState<AttachmentOption?>,
-  allowVideoAttachment: Boolean,
   hide: () -> Unit
 ) {
   Box(
@@ -39,22 +40,20 @@ fun ChooseAttachmentView(
         .padding(horizontal = 8.dp, vertical = 30.dp),
       horizontalArrangement = Arrangement.SpaceEvenly
     ) {
-      ActionButton(null, stringResource(R.string.use_camera_button), icon = Icons.Outlined.PhotoCamera) {
-        attachmentOption.value = AttachmentOption.TakePhoto
+      ActionButton(Modifier.fillMaxWidth(0.25f), null, stringResource(R.string.use_camera_button), icon = painterResource(R.drawable.ic_camera_enhance)) {
+        attachmentOption.value = AttachmentOption.CameraPhoto
         hide()
       }
-      ActionButton(null, stringResource(R.string.from_gallery_button), icon = Icons.Outlined.Collections) {
-        attachmentOption.value = AttachmentOption.PickImage
+      ActionButton(Modifier.fillMaxWidth(0.33f), null, stringResource(R.string.gallery_image_button), icon = painterResource(R.drawable.ic_add_photo)) {
+        attachmentOption.value = AttachmentOption.GalleryImage
         hide()
       }
-      if (allowVideoAttachment) {
-        ActionButton(null, stringResource(R.string.from_gallery_button), icon = Icons.Outlined.Videocam) {
-          attachmentOption.value = AttachmentOption.PickVideo
-          hide()
-        }
+      ActionButton(Modifier.fillMaxWidth(0.50f), null, stringResource(R.string.gallery_video_button), icon = painterResource(R.drawable.ic_smart_display)) {
+        attachmentOption.value = AttachmentOption.GalleryVideo
+        hide()
       }
-      ActionButton(null, stringResource(R.string.choose_file), icon = Icons.Outlined.InsertDriveFile) {
-        attachmentOption.value = AttachmentOption.PickFile
+      ActionButton(Modifier.fillMaxWidth(1f), null, stringResource(R.string.choose_file), icon = painterResource(R.drawable.ic_note_add)) {
+        attachmentOption.value = AttachmentOption.File
         hide()
       }
     }

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

@@ -3,16 +3,20 @@ package chat.simplex.app.views.helpers
 import android.content.res.Configuration
 import androidx.compose.foundation.layout.*
 import androidx.compose.material.*
-import androidx.compose.runtime.Composable
+import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import chat.simplex.app.ui.theme.*
 
 @Composable
-fun CloseSheetBar(close: () -> Unit, endButtons: @Composable RowScope.() -> Unit = {}) {
+fun CloseSheetBar(close: (() -> Unit)?, endButtons: @Composable RowScope.() -> Unit = {}) {
   Column(
     Modifier
       .fillMaxWidth()
@@ -28,7 +32,7 @@ fun CloseSheetBar(close: () -> Unit, endButtons: @Composable RowScope.() -> Unit
           horizontalArrangement = Arrangement.SpaceBetween,
           verticalAlignment = Alignment.CenterVertically
         ) {
-          NavigationButtonBack(close)
+          NavigationButtonBack(onButtonClicked = close)
           Row {
             endButtons()
           }
@@ -40,17 +44,21 @@ fun CloseSheetBar(close: () -> Unit, endButtons: @Composable RowScope.() -> Unit
 
 @Composable
 fun AppBarTitle(title: String, withPadding: Boolean = true) {
-  val padding = if (withPadding)
-    PaddingValues(start = DEFAULT_PADDING, end = DEFAULT_PADDING, bottom = DEFAULT_PADDING)
-  else
-    PaddingValues(bottom = DEFAULT_PADDING)
+  val theme = CurrentColors.collectAsState()
+  val titleColor = CurrentColors.collectAsState().value.appColors.title
+  val brush = if (theme.value.base == DefaultTheme.SIMPLEX)
+    Brush.linearGradient(listOf(titleColor.darker(0.2f), titleColor.lighter(0.35f)), Offset(0f, Float.POSITIVE_INFINITY), Offset(Float.POSITIVE_INFINITY, 0f))
+  else // color is not updated when changing themes if I pass null here
+    Brush.linearGradient(listOf(titleColor, titleColor), Offset(0f, Float.POSITIVE_INFINITY), Offset(Float.POSITIVE_INFINITY, 0f))
   Text(
     title,
     Modifier
       .fillMaxWidth()
-      .padding(padding),
+      .padding(bottom = DEFAULT_PADDING * 1.5f, start = if (withPadding) DEFAULT_PADDING else 0.dp, end = if (withPadding) DEFAULT_PADDING else 0.dp,),
     overflow = TextOverflow.Ellipsis,
-    style = MaterialTheme.typography.h1
+    style = MaterialTheme.typography.h1.copy(brush = brush),
+    color = MaterialTheme.colors.primaryVariant,
+    textAlign = TextAlign.Center
   )
 }
 

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

@@ -0,0 +1,143 @@
+package chat.simplex.app.views.helpers
+
+import androidx.compose.material.icons.materialIcon
+import androidx.compose.material.icons.materialPath
+import androidx.compose.ui.graphics.vector.*
+
+val AccountCircleFilled: ImageVector
+  get() {
+    if (_accountCircleFilled != null) {
+      return _accountCircleFilled!!
+    }
+    _accountCircleFilled = materialIcon(name = "Filled.AccountCircle") {
+      materialPath {
+        moveTo(12.0f, 2.0f)
+        curveTo(6.48f, 2.0f, 2.0f, 6.48f, 2.0f, 12.0f)
+        reflectiveCurveToRelative(4.48f, 10.0f, 10.0f, 10.0f)
+        reflectiveCurveToRelative(10.0f, -4.48f, 10.0f, -10.0f)
+        reflectiveCurveTo(17.52f, 2.0f, 12.0f, 2.0f)
+        close()
+        moveTo(12.0f, 5.0f)
+        curveToRelative(1.66f, 0.0f, 3.0f, 1.34f, 3.0f, 3.0f)
+        reflectiveCurveToRelative(-1.34f, 3.0f, -3.0f, 3.0f)
+        reflectiveCurveToRelative(-3.0f, -1.34f, -3.0f, -3.0f)
+        reflectiveCurveToRelative(1.34f, -3.0f, 3.0f, -3.0f)
+        close()
+        moveTo(12.0f, 19.2f)
+        curveToRelative(-2.5f, 0.0f, -4.71f, -1.28f, -6.0f, -3.22f)
+        curveToRelative(0.03f, -1.99f, 4.0f, -3.08f, 6.0f, -3.08f)
+        curveToRelative(1.99f, 0.0f, 5.97f, 1.09f, 6.0f, 3.08f)
+        curveToRelative(-1.29f, 1.94f, -3.5f, 3.22f, -6.0f, 3.22f)
+        close()
+      }
+    }
+    return _accountCircleFilled!!
+  }
+
+private var _accountCircleFilled: ImageVector? = null
+
+val SupervisedUserCircleFilled: ImageVector
+  get() {
+    if (_supervisedUserCircleFilled != null) {
+      return _supervisedUserCircleFilled!!
+    }
+    _supervisedUserCircleFilled = materialIcon(name = "Filled.SupervisedUserCircle") {
+      materialPath {
+        moveTo(11.99f, 2.0f)
+        curveToRelative(-5.52f, 0.0f, -10.0f, 4.48f, -10.0f, 10.0f)
+        reflectiveCurveToRelative(4.48f, 10.0f, 10.0f, 10.0f)
+        reflectiveCurveToRelative(10.0f, -4.48f, 10.0f, -10.0f)
+        reflectiveCurveToRelative(-4.48f, -10.0f, -10.0f, -10.0f)
+        close()
+        moveTo(15.6f, 8.34f)
+        curveToRelative(1.07f, 0.0f, 1.93f, 0.86f, 1.93f, 1.93f)
+        curveToRelative(0.0f, 1.07f, -0.86f, 1.93f, -1.93f, 1.93f)
+        curveToRelative(-1.07f, 0.0f, -1.93f, -0.86f, -1.93f, -1.93f)
+        curveToRelative(-0.01f, -1.07f, 0.86f, -1.93f, 1.93f, -1.93f)
+        close()
+        moveTo(9.6f, 6.76f)
+        curveToRelative(1.3f, 0.0f, 2.36f, 1.06f, 2.36f, 2.36f)
+        curveToRelative(0.0f, 1.3f, -1.06f, 2.36f, -2.36f, 2.36f)
+        reflectiveCurveToRelative(-2.36f, -1.06f, -2.36f, -2.36f)
+        curveToRelative(0.0f, -1.31f, 1.05f, -2.36f, 2.36f, -2.36f)
+        close()
+        moveTo(9.6f, 15.89f)
+        verticalLineToRelative(3.75f)
+        curveToRelative(-2.4f, -0.75f, -4.3f, -2.6f, -5.14f, -4.96f)
+        curveToRelative(1.05f, -1.12f, 3.67f, -1.69f, 5.14f, -1.69f)
+        curveToRelative(0.53f, 0.0f, 1.2f, 0.08f, 1.9f, 0.22f)
+        curveToRelative(-1.64f, 0.87f, -1.9f, 2.02f, -1.9f, 2.68f)
+        close()
+        moveTo(11.99f, 20.0f)
+        curveToRelative(-0.27f, 0.0f, -0.53f, -0.01f, -0.79f, -0.04f)
+        verticalLineToRelative(-4.07f)
+        curveToRelative(0.0f, -1.42f, 2.94f, -2.13f, 4.4f, -2.13f)
+        curveToRelative(1.07f, 0.0f, 2.92f, 0.39f, 3.84f, 1.15f)
+        curveToRelative(-1.17f, 2.97f, -4.06f, 5.09f, -7.45f, 5.09f)
+        close()
+      }
+    }
+    return _supervisedUserCircleFilled!!
+  }
+
+private var _supervisedUserCircleFilled: ImageVector? = null
+
+val BoltFilled: ImageVector
+  get() {
+    if (_boltFilled != null) {
+      return _boltFilled!!
+    }
+    _boltFilled = materialIcon(name = "Filled.Bolt") {
+      materialPath {
+        moveTo(11.0f, 21.0f)
+        horizontalLineToRelative(-1.0f)
+        lineToRelative(1.0f, -7.0f)
+        horizontalLineTo(7.5f)
+        curveToRelative(-0.58f, 0.0f, -0.57f, -0.32f, -0.38f, -0.66f)
+        curveToRelative(0.19f, -0.34f, 0.05f, -0.08f, 0.07f, -0.12f)
+        curveTo(8.48f, 10.94f, 10.42f, 7.54f, 13.0f, 3.0f)
+        horizontalLineToRelative(1.0f)
+        lineToRelative(-1.0f, 7.0f)
+        horizontalLineToRelative(3.5f)
+        curveToRelative(0.49f, 0.0f, 0.56f, 0.33f, 0.47f, 0.51f)
+        lineToRelative(-0.07f, 0.15f)
+        curveTo(12.96f, 17.55f, 11.0f, 21.0f, 11.0f, 21.0f)
+        close()
+      }
+    }
+    return _boltFilled!!
+  }
+
+private var _boltFilled: ImageVector? = null
+
+val MoreVertFilled: ImageVector
+  get() {
+    if (_moreVertFilled != null) {
+      return _moreVertFilled!!
+    }
+    _moreVertFilled = materialIcon(name = "Filled.MoreVert") {
+      materialPath {
+        moveTo(12.0f, 8.0f)
+        curveToRelative(1.1f, 0.0f, 2.0f, -0.9f, 2.0f, -2.0f)
+        reflectiveCurveToRelative(-0.9f, -2.0f, -2.0f, -2.0f)
+        reflectiveCurveToRelative(-2.0f, 0.9f, -2.0f, 2.0f)
+        reflectiveCurveToRelative(0.9f, 2.0f, 2.0f, 2.0f)
+        close()
+        moveTo(12.0f, 10.0f)
+        curveToRelative(-1.1f, 0.0f, -2.0f, 0.9f, -2.0f, 2.0f)
+        reflectiveCurveToRelative(0.9f, 2.0f, 2.0f, 2.0f)
+        reflectiveCurveToRelative(2.0f, -0.9f, 2.0f, -2.0f)
+        reflectiveCurveToRelative(-0.9f, -2.0f, -2.0f, -2.0f)
+        close()
+        moveTo(12.0f, 16.0f)
+        curveToRelative(-1.1f, 0.0f, -2.0f, 0.9f, -2.0f, 2.0f)
+        reflectiveCurveToRelative(0.9f, 2.0f, 2.0f, 2.0f)
+        reflectiveCurveToRelative(2.0f, -0.9f, 2.0f, -2.0f)
+        reflectiveCurveToRelative(-0.9f, -2.0f, -2.0f, -2.0f)
+        close()
+      }
+    }
+    return _moreVertFilled!!
+  }
+
+private var _moreVertFilled: ImageVector? = null

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

@@ -3,6 +3,7 @@ package chat.simplex.app.views.helpers
 import android.util.Log
 import chat.simplex.app.*
 import chat.simplex.app.model.AppPreferences
+import chat.simplex.app.model.SharedPreference
 import chat.simplex.app.views.usersettings.Cryptor
 import kotlinx.serialization.*
 import java.io.File
@@ -16,30 +17,36 @@ object DatabaseUtils {
   }
 
   private const val DATABASE_PASSWORD_ALIAS: String = "databasePassword"
+  private const val APP_PASSWORD_ALIAS: String = "appPassword"
+
+  val ksDatabasePassword = KeyStoreItem(DATABASE_PASSWORD_ALIAS, appPreferences.encryptedDBPassphrase, appPreferences.initializationVectorDBPassphrase)
+  val ksAppPassword = KeyStoreItem(APP_PASSWORD_ALIAS, appPreferences.encryptedAppPassphrase, appPreferences.initializationVectorAppPassphrase)
+
+  class KeyStoreItem(private val alias: String, val passphrase: SharedPreference<String?>, val initVector: SharedPreference<String?>) {
+    fun get(): String? {
+      return cryptor.decryptData(
+        passphrase.get()?.toByteArrayFromBase64() ?: return null,
+        initVector.get()?.toByteArrayFromBase64() ?: return null,
+        alias,
+      )
+    }
+
+    fun set(key: String) {
+      val data = cryptor.encryptText(key, alias)
+      passphrase.set(data.first.toBase64String())
+      initVector.set(data.second.toBase64String())
+    }
+
+    fun remove() {
+      cryptor.deleteKey(alias)
+      passphrase.set(null)
+      initVector.set(null)
+    }
+  }
 
   private fun hasDatabase(rootDir: String): Boolean =
     File(rootDir + File.separator + "files_chat.db").exists() && File(rootDir + File.separator + "files_agent.db").exists()
 
-  fun getDatabaseKey(): String? {
-    return cryptor.decryptData(
-      appPreferences.encryptedDBPassphrase.get()?.toByteArrayFromBase64() ?: return null,
-      appPreferences.initializationVectorDBPassphrase.get()?.toByteArrayFromBase64() ?: return null,
-      DATABASE_PASSWORD_ALIAS,
-    )
-  }
-
-  fun setDatabaseKey(key: String) {
-    val data = cryptor.encryptText(key, DATABASE_PASSWORD_ALIAS)
-    appPreferences.encryptedDBPassphrase.set(data.first.toBase64String())
-    appPreferences.initializationVectorDBPassphrase.set(data.second.toBase64String())
-  }
-
-  fun removeDatabaseKey() {
-    cryptor.deleteKey(DATABASE_PASSWORD_ALIAS)
-    appPreferences.encryptedDBPassphrase.set(null)
-    appPreferences.initializationVectorDBPassphrase.set(null)
-  }
-
   fun useDatabaseKey(): String {
     Log.d(TAG, "useDatabaseKey ${appPreferences.storeDBPassphrase.get()}")
     var dbKey = ""
@@ -47,10 +54,10 @@ object DatabaseUtils {
     if (useKeychain) {
       if (!hasDatabase(SimplexApp.context.dataDir.absolutePath)) {
         dbKey = randomDatabasePassword()
-        setDatabaseKey(dbKey)
+        ksDatabasePassword.set(dbKey)
         appPreferences.initialRandomDBPassphrase.set(true)
       } else {
-        dbKey = getDatabaseKey() ?: ""
+        dbKey = ksDatabasePassword.get() ?: ""
       }
     }
     return dbKey
@@ -101,4 +108,4 @@ data class UpMigration(
 sealed class MTRError {
   @Serializable @SerialName("noDown") class NoDown(val dbMigrations: List<String>): MTRError()
   @Serializable @SerialName("different") class Different(val appMigration: String, val dbMigration: String): MTRError()
-}
+}

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

@@ -3,6 +3,7 @@ package chat.simplex.app.views.helpers
 import androidx.compose.foundation.background
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.defaultMinSize
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.shape.ZeroCornerSize
 import androidx.compose.foundation.text.*
 import androidx.compose.material.*
@@ -14,13 +15,19 @@ import androidx.compose.ui.focus.*
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.SolidColor
 import androidx.compose.ui.platform.LocalSoftwareKeyboardController
-import androidx.compose.ui.text.TextRange
-import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.*
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.input.*
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import chat.simplex.app.R
+import chat.simplex.app.views.database.PassphraseStrength
+import chat.simplex.app.views.database.validKey
 import kotlinx.coroutines.delay
+import kotlinx.coroutines.flow.collect
+import kotlinx.coroutines.flow.distinctUntilChanged
+import kotlinx.coroutines.launch
 
 @OptIn(ExperimentalComposeUiApi::class)
 @Composable
@@ -110,3 +117,109 @@ fun DefaultBasicTextField(
     }
   )
 }
+
+@OptIn(ExperimentalComposeUiApi::class)
+@Composable
+fun DefaultConfigurableTextField(
+  state: MutableState<TextFieldValue>,
+  placeholder: String,
+  modifier: Modifier = Modifier,
+  showPasswordStrength: Boolean = false,
+  isValid: (String) -> Boolean,
+  keyboardActions: KeyboardActions = KeyboardActions(),
+  keyboardType: KeyboardType = KeyboardType.Text,
+  dependsOn: State<Any?>? = null,
+) {
+  var valid by remember { mutableStateOf(validKey(state.value.text)) }
+  var showKey by remember { mutableStateOf(false) }
+  val icon = if (valid) {
+    if (showKey) painterResource(R.drawable.ic_visibility_off_filled) else painterResource(R.drawable.ic_visibility_filled)
+  } else painterResource(R.drawable.ic_error)
+  val iconColor = if (valid) {
+    if (showPasswordStrength && state.value.text.isNotEmpty()) PassphraseStrength.check(state.value.text).color else MaterialTheme.colors.secondary
+  } else Color.Red
+  val keyboard = LocalSoftwareKeyboardController.current
+  val keyboardOptions = KeyboardOptions(
+    imeAction = if (keyboardActions.onNext != null) ImeAction.Next else ImeAction.Done,
+    autoCorrect = keyboardType != KeyboardType.Password,
+    keyboardType = keyboardType
+  )
+  val enabled = true
+  val colors = TextFieldDefaults.textFieldColors(
+    backgroundColor = Color.Unspecified,
+    textColor = MaterialTheme.colors.onBackground,
+    focusedIndicatorColor = Color.Unspecified,
+    unfocusedIndicatorColor = Color.Unspecified,
+  )
+  val color = MaterialTheme.colors.onBackground
+  val shape = MaterialTheme.shapes.small.copy(bottomEnd = ZeroCornerSize, bottomStart = ZeroCornerSize)
+  val interactionSource = remember { MutableInteractionSource() }
+  BasicTextField(
+    value = state.value,
+    modifier = modifier
+      .fillMaxWidth()
+      .background(colors.backgroundColor(enabled).value, shape)
+      .indicatorLine(enabled, false, interactionSource, colors)
+      .defaultMinSize(
+        minWidth = TextFieldDefaults.MinWidth,
+        minHeight = TextFieldDefaults.MinHeight
+      ),
+    onValueChange = {
+      state.value = it
+    },
+    cursorBrush = SolidColor(colors.cursorColor(false).value),
+    visualTransformation = if (showKey || keyboardType != KeyboardType.Password)
+      VisualTransformation.None
+    else
+      VisualTransformation { TransformedText(AnnotatedString(it.text.map { "*" }.joinToString(separator = "")), OffsetMapping.Identity) },
+    keyboardOptions = keyboardOptions,
+    keyboardActions = KeyboardActions(onDone = {
+      keyboard?.hide()
+      keyboardActions.onDone?.invoke(this)
+    }),
+    singleLine = true,
+    textStyle = TextStyle.Default.copy(
+      color = color,
+      fontWeight = FontWeight.Normal,
+      fontSize = 16.sp
+    ),
+    interactionSource = interactionSource,
+    decorationBox = @Composable { innerTextField ->
+      TextFieldDefaults.TextFieldDecorationBox(
+        value = state.value.text,
+        innerTextField = innerTextField,
+        placeholder = { Text(placeholder, color = MaterialTheme.colors.secondary) },
+        singleLine = true,
+        enabled = enabled,
+        isError = !valid,
+        trailingIcon = {
+          if (keyboardType == KeyboardType.Password || !valid) {
+            IconButton({ showKey = !showKey }) {
+              Icon(icon, null, tint = iconColor)
+            }
+          }
+        },
+        interactionSource = interactionSource,
+        contentPadding = TextFieldDefaults.textFieldWithLabelPadding(start = 0.dp, end = 0.dp),
+        visualTransformation = VisualTransformation.None,
+        colors = colors
+      )
+    }
+  )
+  LaunchedEffect(Unit) {
+    launch {
+      snapshotFlow { state.value }
+        .distinctUntilChanged()
+        .collect {
+          valid = isValid(it.text)
+        }
+    }
+    launch {
+      snapshotFlow { dependsOn?.value }
+        .distinctUntilChanged()
+        .collect {
+          valid = isValid(state.value.text)
+        }
+    }
+  }
+}

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

@@ -0,0 +1,61 @@
+package chat.simplex.app.views.helpers
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.CornerSize
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.*
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.MutableState
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.DpOffset
+import androidx.compose.ui.unit.dp
+import chat.simplex.app.ui.theme.*
+
+@Composable
+fun DefaultDropdownMenu(
+  showMenu: MutableState<Boolean>,
+  offset: DpOffset = DpOffset(0.dp, 0.dp),
+  dropdownMenuItems: (@Composable () -> Unit)?
+) {
+  MaterialTheme(
+    shapes = MaterialTheme.shapes.copy(medium = RoundedCornerShape(corner = CornerSize(25.dp)))
+  ) {
+    DropdownMenu(
+      expanded = showMenu.value,
+      onDismissRequest = { showMenu.value = false },
+      Modifier
+        .widthIn(min = 250.dp)
+        .background(MaterialTheme.colors.surface)
+        .padding(vertical = 4.dp),
+      offset = offset,
+    ) {
+      dropdownMenuItems?.invoke()
+    }
+  }
+}
+
+@Composable
+fun ExposedDropdownMenuBoxScope.DefaultExposedDropdownMenu(
+  expanded: MutableState<Boolean>,
+  modifier: Modifier = Modifier,
+  dropdownMenuItems: (@Composable () -> Unit)?
+) {
+  MaterialTheme(
+    shapes = MaterialTheme.shapes.copy(medium = RoundedCornerShape(corner = CornerSize(25.dp)))
+  ) {
+    ExposedDropdownMenu(
+      modifier = Modifier
+        .widthIn(min = 200.dp)
+        .background(MaterialTheme.colors.surface)
+        .then(modifier),
+      expanded = expanded.value,
+      onDismissRequest = {
+        expanded.value = false
+      }
+    ) {
+      dropdownMenuItems?.invoke()
+    }
+  }
+}

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

@@ -0,0 +1,39 @@
+package chat.simplex.app.views.helpers
+
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.material.*
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.drawBehind
+import androidx.compose.ui.geometry.*
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun DefaultSwitch(
+  checked: Boolean,
+  onCheckedChange: ((Boolean) -> Unit)?,
+  modifier: Modifier = Modifier,
+  enabled: Boolean = true,
+  interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
+  colors: SwitchColors = SwitchDefaults.colors(
+    checkedThumbColor = MaterialTheme.colors.primary,
+    uncheckedThumbColor = MaterialTheme.colors.secondary,
+    checkedTrackAlpha = 0.0f,
+    uncheckedTrackAlpha = 0.0f,
+  )
+) {
+  val color = if (checked) MaterialTheme.colors.primary.copy(alpha = 0.3f) else MaterialTheme.colors.secondary.copy(alpha = 0.3f)
+  val size = with(LocalDensity.current) { Size(46.dp.toPx(), 28.dp.toPx()) }
+  val offset = with(LocalDensity.current) { Offset(1.dp.toPx(), 10.dp.toPx()) }
+  val radius = with(LocalDensity.current) { 28.dp.toPx() }
+  Switch(
+    checked = checked,
+    onCheckedChange = onCheckedChange,
+    modifier.drawBehind { drawRoundRect(color, size = size, topLeft = offset, cornerRadius = CornerRadius(radius, radius)) },
+    colors = colors,
+    enabled = enabled,
+    interactionSource = interactionSource,
+  )
+}

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

@@ -4,12 +4,11 @@ import chat.simplex.app.R
 import androidx.compose.foundation.*
 import androidx.compose.foundation.layout.*
 import androidx.compose.material.*
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.outlined.*
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.*
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import chat.simplex.app.ui.theme.*
@@ -45,10 +44,10 @@ fun DefaultTopAppBar(
 }
 
 @Composable
-fun NavigationButtonBack(onButtonClicked: () -> Unit) {
-  IconButton(onButtonClicked) {
+fun NavigationButtonBack(onButtonClicked: (() -> Unit)?) {
+  IconButton(onButtonClicked ?: {}, enabled = onButtonClicked != null) {
     Icon(
-      Icons.Outlined.ArrowBackIos, stringResource(R.string.back), tint = MaterialTheme.colors.primary
+      painterResource(R.drawable.ic_arrow_back_ios_new), stringResource(R.string.back), tint = if (onButtonClicked != null) MaterialTheme.colors.primary else MaterialTheme.colors.secondary
     )
   }
 }
@@ -57,7 +56,7 @@ fun NavigationButtonBack(onButtonClicked: () -> Unit) {
 fun ShareButton(onButtonClicked: () -> Unit) {
   IconButton(onButtonClicked) {
     Icon(
-      Icons.Outlined.Share, stringResource(R.string.share_verb), tint = MaterialTheme.colors.primary
+      painterResource(R.drawable.ic_share), stringResource(R.string.share_verb), tint = MaterialTheme.colors.primary
     )
   }
 }
@@ -66,7 +65,7 @@ fun ShareButton(onButtonClicked: () -> Unit) {
 fun NavigationButtonMenu(onButtonClicked: () -> Unit) {
   IconButton(onClick = onButtonClicked) {
     Icon(
-      Icons.Outlined.Menu,
+      painterResource(R.drawable.ic_menu),
       stringResource(R.string.icon_descr_settings),
       tint = MaterialTheme.colors.primary,
     )

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

@@ -11,7 +11,7 @@ import kotlinx.serialization.encoding.Encoder
 
 sealed class SharedContent {
   data class Text(val text: String): SharedContent()
-  data class Images(val text: String, val uris: List<Uri>): SharedContent()
+  data class Media(val text: String, val uris: List<Uri>): SharedContent()
   data class File(val text: String, val uri: Uri): SharedContent()
 }
 

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

@@ -2,21 +2,19 @@ package chat.simplex.app.views.helpers
 
 import androidx.compose.foundation.layout.*
 import androidx.compose.material.*
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.outlined.ExpandLess
-import androidx.compose.material.icons.outlined.ExpandMore
+import androidx.compose.ui.res.painterResource
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import chat.simplex.app.R
-import chat.simplex.app.ui.theme.DEFAULT_PADDING
-import chat.simplex.app.ui.theme.HighOrLowlight
+import chat.simplex.app.ui.theme.*
+import chat.simplex.app.views.usersettings.SettingsActionItemWithContent
 
 @Composable
 fun <T> ExposedDropDownSettingRow(
@@ -24,31 +22,17 @@ fun <T> ExposedDropDownSettingRow(
   values: List<Pair<T, String>>,
   selection: State<T>,
   label: String? = null,
-  icon: ImageVector? = null,
-  iconTint: Color = HighOrLowlight,
+  icon: Painter? = null,
+  iconTint: Color = MaterialTheme.colors.secondary,
   enabled: State<Boolean> = mutableStateOf(true),
   onSelected: (T) -> Unit
 ) {
-  Row(
-    Modifier.fillMaxWidth().padding(vertical = 10.dp),
-    verticalAlignment = Alignment.CenterVertically,
-  ) {
-    var expanded by remember { mutableStateOf(false) }
-
-    if (icon != null) {
-      Icon(
-        icon,
-        "",
-        Modifier.padding(end = 8.dp),
-        tint = iconTint
-      )
-    }
-    Text(title, Modifier.weight(1f), color = if (enabled.value) Color.Unspecified else HighOrLowlight)
-
+  SettingsActionItemWithContent(icon, title, iconColor = iconTint, disabled = !enabled.value) {
+    val expanded = remember { mutableStateOf(false) }
     ExposedDropdownMenuBox(
-      expanded = expanded,
+      expanded = expanded.value,
       onExpandedChange = {
-        expanded = !expanded && enabled.value
+        expanded.value = !expanded.value && enabled.value
       }
     ) {
       Row(
@@ -56,39 +40,38 @@ fun <T> ExposedDropDownSettingRow(
         verticalAlignment = Alignment.CenterVertically,
         horizontalArrangement = Arrangement.End
       ) {
-        val maxWidth = with(LocalDensity.current){ 180.sp.toDp() }
+        val maxWidth = with(LocalDensity.current) { 180.sp.toDp() }
         Text(
           values.first { it.first == selection.value }.second + (if (label != null) " $label" else ""),
           Modifier.widthIn(max = maxWidth),
           maxLines = 1,
           overflow = TextOverflow.Ellipsis,
-          color = HighOrLowlight
+          color = MaterialTheme.colors.secondary
         )
         Spacer(Modifier.size(12.dp))
         Icon(
-          if (!expanded) Icons.Outlined.ExpandMore else Icons.Outlined.ExpandLess,
+          if (!expanded.value) painterResource(R.drawable.ic_expand_more) else painterResource(R.drawable.ic_expand_less),
           generalGetString(R.string.icon_descr_more_button),
-          tint = HighOrLowlight
+          tint = MaterialTheme.colors.secondary
         )
       }
-      ExposedDropdownMenu(
+      DefaultExposedDropdownMenu(
         modifier = Modifier.widthIn(min = 200.dp),
         expanded = expanded,
-        onDismissRequest = {
-          expanded = false
-        }
       ) {
         values.forEach { selectionOption ->
           DropdownMenuItem(
             onClick = {
               onSelected(selectionOption.first)
-              expanded = false
-            }
+              expanded.value = false
+            },
+            contentPadding = PaddingValues(horizontal = DEFAULT_PADDING * 1.5f)
           ) {
             Text(
               selectionOption.second + (if (label != null) " $label" else ""),
               maxLines = 1,
               overflow = TextOverflow.Ellipsis,
+              color = if (isInDarkTheme()) MenuTextColorDark else Color.Black,
             )
           }
         }

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

@@ -80,10 +80,16 @@ suspend fun PointerInputScope.detectGesture(
           pressScope.release()
         }
       } catch (_: PointerEventTimeoutCancellationException) {
-        onLongPress?.invoke(down.position)
-        if (shouldConsume)
-          consumeUntilUp()
-        pressScope.release()
+        if (onLongPress != null) {
+          onLongPress(down.position)
+          if (shouldConsume)
+            consumeUntilUp()
+          pressScope.cancel()
+        } else {
+          if (shouldConsume)
+            consumeUntilUp()
+          pressScope.release()
+        }
       }
     }
   }

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

@@ -17,15 +17,13 @@ import androidx.activity.result.contract.ActivityResultContract
 import androidx.activity.result.contract.ActivityResultContracts
 import androidx.annotation.CallSuper
 import androidx.compose.foundation.layout.*
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.outlined.Collections
-import androidx.compose.material.icons.outlined.PhotoCamera
 import androidx.compose.runtime.*
 import androidx.compose.runtime.saveable.Saver
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.onFocusChanged
 import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import androidx.core.content.ContextCompat
@@ -174,7 +172,18 @@ fun rememberGetContentLauncher(cb: (Uri?) -> Unit): ManagedActivityResultLaunche
 
 @Composable
 fun rememberGetMultipleContentsLauncher(cb: (List<Uri>) -> Unit): ManagedActivityResultLauncher<String, List<Uri>> =
-  rememberLauncherForActivityResult(contract = ActivityResultContracts.GetMultipleContents(), cb)
+  rememberLauncherForActivityResult(contract = GetMultipleContentsAndMimeTypes(), cb)
+
+class GetMultipleContentsAndMimeTypes: ActivityResultContracts.GetMultipleContents() {
+  override fun createIntent(context: Context, input: String): Intent {
+    val mimeTypes = input.split(";")
+    return super.createIntent(context, mimeTypes[0]).apply {
+      if (mimeTypes.isNotEmpty()) {
+        putExtra(Intent.EXTRA_MIME_TYPES, mimeTypes.toTypedArray())
+      }
+    }
+  }
+}
 
 fun ManagedActivityResultLauncher<Void?, Uri?>.launchWithFallback() {
   try {
@@ -237,7 +246,7 @@ fun GetImageBottomSheet(
         .padding(horizontal = 8.dp, vertical = 30.dp),
       horizontalArrangement = Arrangement.SpaceEvenly
     ) {
-      ActionButton(null, stringResource(R.string.use_camera_button), icon = Icons.Outlined.PhotoCamera) {
+      ActionButton(null, stringResource(R.string.use_camera_button), icon = painterResource(R.drawable.ic_photo_camera)) {
         when (PackageManager.PERMISSION_GRANTED) {
           ContextCompat.checkSelfPermission(context, Manifest.permission.CAMERA) -> {
             cameraLauncher.launchWithFallback()
@@ -248,7 +257,7 @@ fun GetImageBottomSheet(
           }
         }
       }
-      ActionButton(null, stringResource(R.string.from_gallery_button), icon = Icons.Outlined.Collections) {
+      ActionButton(null, stringResource(R.string.from_gallery_button), icon = painterResource(R.drawable.ic_image)) {
         try {
           galleryLauncher.launch(0)
         } catch (e: ActivityNotFoundException) {

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

@@ -6,13 +6,13 @@ import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.*
 import androidx.compose.material.*
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.outlined.Close
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.collectAsState
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.asImageBitmap
 import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
@@ -20,9 +20,7 @@ import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import chat.simplex.app.R
 import chat.simplex.app.model.LinkPreview
-import chat.simplex.app.ui.theme.HighOrLowlight
-import chat.simplex.app.ui.theme.SimpleXTheme
-import chat.simplex.app.views.chat.item.SentColorLight
+import chat.simplex.app.ui.theme.*
 import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.withContext
 import org.jsoup.Jsoup
@@ -80,8 +78,9 @@ suspend fun getLinkPreview(url: String): LinkPreview? {
 
 @Composable
 fun ComposeLinkView(linkPreview: LinkPreview?, cancelPreview: () -> Unit) {
+  val sentColor = CurrentColors.collectAsState().value.appColors.sentMessage
   Row(
-    Modifier.fillMaxWidth().padding(top = 8.dp).background(SentColorLight),
+    Modifier.fillMaxWidth().padding(top = 8.dp).background(sentColor),
     verticalAlignment = Alignment.CenterVertically
   ) {
     if (linkPreview == null) {
@@ -91,7 +90,7 @@ fun ComposeLinkView(linkPreview: LinkPreview?, cancelPreview: () -> Unit) {
       ) {
         CircularProgressIndicator(
           Modifier.size(16.dp),
-          color = HighOrLowlight,
+          color = MaterialTheme.colors.secondary,
           strokeWidth = 2.dp
         )
       }
@@ -112,7 +111,7 @@ fun ComposeLinkView(linkPreview: LinkPreview?, cancelPreview: () -> Unit) {
     }
     IconButton(onClick = cancelPreview, modifier = Modifier.padding(0.dp)) {
       Icon(
-        Icons.Outlined.Close,
+        painterResource(R.drawable.ic_close),
         contentDescription = stringResource(R.string.icon_descr_cancel_link_preview),
         tint = MaterialTheme.colors.primary,
         modifier = Modifier.padding(10.dp)
@@ -135,7 +134,7 @@ fun ChatItemLinkView(linkPreview: LinkPreview) {
       if (linkPreview.description != "") {
         Text(linkPreview.description, maxLines = 12, overflow = TextOverflow.Ellipsis, fontSize = 14.sp, lineHeight = 20.sp)
       }
-      Text(linkPreview.uri, maxLines = 1, overflow = TextOverflow.Ellipsis, fontSize = 12.sp, color = HighOrLowlight)
+      Text(linkPreview.uri, maxLines = 1, overflow = TextOverflow.Ellipsis, fontSize = 12.sp, color = MaterialTheme.colors.secondary)
     }
   }
 }

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

@@ -1,36 +1,71 @@
 package chat.simplex.app.views.helpers
 
-import android.content.Context
 import android.os.Build.VERSION.SDK_INT
-import android.widget.Toast
+import androidx.activity.compose.BackHandler
 import androidx.biometric.BiometricManager
 import androidx.biometric.BiometricManager.Authenticators.*
 import androidx.biometric.BiometricPrompt
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Surface
+import androidx.compose.ui.Modifier
 import androidx.core.content.ContextCompat
 import androidx.fragment.app.FragmentActivity
 import chat.simplex.app.R
+import chat.simplex.app.SimplexApp
+import chat.simplex.app.views.helpers.DatabaseUtils.ksAppPassword
+import chat.simplex.app.views.localauth.LocalAuthView
+import chat.simplex.app.views.usersettings.LAMode
 
 sealed class LAResult {
   object Success: LAResult()
   class Error(val errString: CharSequence): LAResult()
-  object Failed: LAResult()
-  object Unavailable: LAResult()
+  class Failed(val errString: CharSequence? = null): LAResult()
+  class Unavailable(val errString: CharSequence? = null): LAResult()
+}
+
+data class LocalAuthRequest (
+  val title: String?,
+  val reason: String,
+  val password: String,
+  val completed: (LAResult) -> Unit
+) {
+  companion object {
+    val sample = LocalAuthRequest(generalGetString(R.string.la_enter_app_passcode), generalGetString(R.string.la_authenticate), "") { }
+  }
 }
 
 fun authenticate(
   promptTitle: String,
   promptSubtitle: String,
   activity: FragmentActivity,
+  usingLAMode: LAMode = SimplexApp.context.chatModel.controller.appPrefs.laMode.get(),
   completed: (LAResult) -> Unit
 ) {
-  when {
-    SDK_INT in 28..29 ->
-      // KeyguardManager.isDeviceSecure()? https://developer.android.com/training/sign-in/biometric-auth#declare-supported-authentication-types
-      authenticateWithBiometricManager(promptTitle, promptSubtitle, activity, completed, BIOMETRIC_WEAK or DEVICE_CREDENTIAL)
-    SDK_INT > 29 ->
-      authenticateWithBiometricManager(promptTitle, promptSubtitle, activity, completed, BIOMETRIC_STRONG or DEVICE_CREDENTIAL)
-    else ->
-      completed(LAResult.Unavailable)
+  when (usingLAMode) {
+    LAMode.SYSTEM -> when {
+      SDK_INT in 28..29 ->
+        // KeyguardManager.isDeviceSecure()? https://developer.android.com/training/sign-in/biometric-auth#declare-supported-authentication-types
+        authenticateWithBiometricManager(promptTitle, promptSubtitle, activity, completed, BIOMETRIC_WEAK or DEVICE_CREDENTIAL)
+      SDK_INT > 29 ->
+        authenticateWithBiometricManager(promptTitle, promptSubtitle, activity, completed, BIOMETRIC_STRONG or DEVICE_CREDENTIAL)
+      else -> completed(LAResult.Unavailable())
+    }
+    LAMode.PASSCODE -> {
+      val password = ksAppPassword.get() ?: return completed(LAResult.Unavailable(generalGetString(R.string.la_no_app_password)))
+      ModalManager.shared.showCustomModal(animated = false) { close ->
+        BackHandler {
+          close()
+          completed(LAResult.Error(generalGetString(R.string.authentication_cancelled)))
+        }
+        Surface(Modifier.fillMaxSize(), color = MaterialTheme.colors.background) {
+          LocalAuthView(SimplexApp.context.chatModel, LocalAuthRequest(promptTitle, promptSubtitle, password) {
+            close()
+            completed(it)
+          })
+        }
+      }
+    }
   }
 }
 
@@ -66,7 +101,7 @@ private fun authenticateWithBiometricManager(
 
           override fun onAuthenticationFailed() {
             super.onAuthenticationFailed()
-            completed(LAResult.Failed)
+            completed(LAResult.Failed())
           }
         }
       )
@@ -78,9 +113,7 @@ private fun authenticateWithBiometricManager(
         .build()
       biometricPrompt.authenticate(promptInfo)
     }
-    else -> {
-      completed(LAResult.Unavailable)
-    }
+    else -> completed(LAResult.Unavailable())
   }
 }
 
@@ -89,6 +122,18 @@ fun laTurnedOnAlert() = AlertManager.shared.showAlertMsg(
   generalGetString(R.string.auth_you_will_be_required_to_authenticate_when_you_start_or_resume)
 )
 
+fun laPasscodeNotSetAlert() = AlertManager.shared.showAlertMsg(
+  generalGetString(R.string.lock_not_enabled),
+  generalGetString(R.string.you_can_turn_on_lock)
+)
+
+fun laFailedAlert() {
+  AlertManager.shared.showAlertMsg(
+    title = generalGetString(R.string.la_auth_failed),
+    text = generalGetString(R.string.la_could_not_be_verified)
+  )
+}
+
 fun laUnavailableInstructionAlert() = AlertManager.shared.showAlertMsg(
   generalGetString(R.string.auth_unavailable),
   generalGetString(R.string.auth_device_authentication_is_not_enabled_you_can_turn_on_in_settings_once_enabled)

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

@@ -11,8 +11,8 @@ import androidx.compose.runtime.*
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import chat.simplex.app.TAG
-import chat.simplex.app.ui.theme.SettingsBackgroundLight
 import chat.simplex.app.ui.theme.isInDarkTheme
+import chat.simplex.app.ui.theme.themedBackground
 import java.util.concurrent.atomic.AtomicBoolean
 
 @Composable
@@ -25,7 +25,7 @@ fun ModalView(
 ) {
   BackHandler(onBack = close)
   Surface(Modifier.fillMaxSize()) {
-    Column(Modifier.background(background)) {
+    Column(if (background != MaterialTheme.colors.background) Modifier.background(background) else Modifier.themedBackground()) {
       CloseSheetBar(close, endButtons)
       Box(modifier) { content() }
     }
@@ -40,13 +40,13 @@ class ModalManager {
 
   fun showModal(settings: Boolean = false, endButtons: @Composable RowScope.() -> Unit = {}, content: @Composable () -> Unit) {
     showCustomModal { close ->
-      ModalView(close, if (!settings || isInDarkTheme()) MaterialTheme.colors.background else SettingsBackgroundLight, endButtons = endButtons, content = content)
+      ModalView(close, endButtons = endButtons, content = content)
     }
   }
 
   fun showModalCloseable(settings: Boolean = false, content: @Composable (close: () -> Unit) -> Unit) {
     showCustomModal { close ->
-      ModalView(close, if (!settings || isInDarkTheme()) MaterialTheme.colors.background else SettingsBackgroundLight, content = { content(close) })
+      ModalView(close, content = { content(close) })
     }
   }
 

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

@@ -8,8 +8,6 @@ import androidx.compose.foundation.text.*
 import androidx.compose.material.*
 import androidx.compose.material.TextFieldDefaults.indicatorLine
 import androidx.compose.material.TextFieldDefaults.textFieldWithLabelPadding
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.Close
 import androidx.compose.runtime.*
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.ui.ExperimentalComposeUiApi
@@ -19,6 +17,7 @@ import androidx.compose.ui.focus.focusRequester
 import androidx.compose.ui.graphics.*
 import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.platform.LocalSoftwareKeyboardController
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontWeight
@@ -99,7 +98,7 @@ fun SearchTextField(modifier: Modifier, placeholder: String, alwaysVisible: Bool
             searchText = TextFieldValue("");
             onValueChange("")
           }) {
-            Icon(Icons.Default.Close, stringResource(R.string.icon_descr_close_button), tint = MaterialTheme.colors.primary,)
+            Icon(painterResource(R.drawable.ic_close), stringResource(R.string.icon_descr_close_button), tint = MaterialTheme.colors.primary,)
           }
         }} else null,
         singleLine = true,

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

@@ -3,42 +3,41 @@ import androidx.compose.foundation.combinedClickable
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.material.*
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.outlined.Check
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.AnnotatedString
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.*
+import chat.simplex.app.R
 import chat.simplex.app.ui.theme.*
 import chat.simplex.app.views.helpers.ValueTitleDesc
 import chat.simplex.app.views.helpers.ValueTitle
+import chat.simplex.app.views.usersettings.SettingsActionItemWithContent
 
 @Composable
 fun SectionView(title: String? = null, padding: PaddingValues = PaddingValues(), content: (@Composable ColumnScope.() -> Unit)) {
   Column {
     if (title != null) {
       Text(
-        title, color = HighOrLowlight, style = MaterialTheme.typography.body2,
+        title, color = MaterialTheme.colors.secondary, style = MaterialTheme.typography.body2,
         modifier = Modifier.padding(start = DEFAULT_PADDING, bottom = 5.dp), fontSize = 12.sp
       )
     }
-    Surface(color = if (isInDarkTheme()) GroupDark else MaterialTheme.colors.background) {
-      Column(Modifier.padding(padding).fillMaxWidth()) { content() }
-    }
+    Column(Modifier.padding(padding).fillMaxWidth()) { content() }
   }
 }
 
 @Composable
 fun SectionView(
   title: String,
-  icon: ImageVector,
-  iconTint: Color = HighOrLowlight,
+  icon: Painter,
+  iconTint: Color = MaterialTheme.colors.secondary,
   leadingIcon: Boolean = false,
   padding: PaddingValues = PaddingValues(),
   content: (@Composable ColumnScope.() -> Unit)
@@ -46,13 +45,11 @@ fun SectionView(
   Column {
     val iconSize = with(LocalDensity.current) { 21.sp.toDp() }
     Row(Modifier.padding(start = DEFAULT_PADDING, bottom = 5.dp), verticalAlignment = Alignment.CenterVertically) {
-      if (leadingIcon) Icon(icon, null, Modifier.padding(end = 4.dp).size(iconSize), tint = iconTint)
-      Text(title, color = HighOrLowlight, style = MaterialTheme.typography.body2, fontSize = 12.sp)
-      if (!leadingIcon) Icon(icon, null, Modifier.padding(start = 4.dp).size(iconSize), tint = iconTint)
-    }
-    Surface(color = if (isInDarkTheme()) GroupDark else MaterialTheme.colors.background) {
-      Column(Modifier.padding(padding).fillMaxWidth()) { content() }
+      if (leadingIcon) Icon(icon, null, Modifier.padding(end = DEFAULT_PADDING_HALF).size(iconSize), tint = iconTint)
+      Text(title, color = MaterialTheme.colors.secondary, style = MaterialTheme.typography.body2, fontSize = 12.sp)
+      if (!leadingIcon) Icon(icon, null, Modifier.padding(start = DEFAULT_PADDING_HALF).size(iconSize), tint = iconTint)
     }
+    Column(Modifier.padding(padding).fillMaxWidth()) { content() }
   }
 }
 
@@ -70,7 +67,7 @@ fun <T> SectionViewSelectable(
         SectionItemViewSpaceBetween({ onSelected(item.value) }) {
           Text(item.title)
           if (currentValue.value == item.value) {
-            Icon(Icons.Outlined.Check, item.title, tint = MaterialTheme.colors.primary)
+            Icon(painterResource(R.drawable.ic_check), item.title, tint = MaterialTheme.colors.primary)
           }
         }
         Spacer(Modifier.padding(horizontal = 4.dp))
@@ -85,7 +82,30 @@ fun SectionItemView(
   click: (() -> Unit)? = null,
   minHeight: Dp = 46.dp,
   disabled: Boolean = false,
-  padding: PaddingValues = PaddingValues(horizontal = DEFAULT_PADDING),
+  extraPadding: Boolean = false,
+  padding: PaddingValues = if (extraPadding)
+    PaddingValues(start = DEFAULT_PADDING * 1.7f, end = DEFAULT_PADDING)
+  else
+    PaddingValues(horizontal = DEFAULT_PADDING),
+  content: (@Composable RowScope.() -> Unit)
+) {
+  val modifier = Modifier
+    .fillMaxWidth()
+    .sizeIn(minHeight = minHeight)
+  Row(
+    if (click == null || disabled) modifier.padding(padding) else modifier.clickable(onClick = click).padding(padding),
+    verticalAlignment = Alignment.CenterVertically
+  ) {
+    content()
+  }
+}
+
+@Composable
+fun SectionItemViewWithIcon(
+  click: (() -> Unit)? = null,
+  minHeight: Dp = 46.dp,
+  disabled: Boolean = false,
+  padding: PaddingValues = PaddingValues(start = DEFAULT_PADDING * 1.7f, end = DEFAULT_PADDING),
   content: (@Composable RowScope.() -> Unit)
 ) {
   val modifier = Modifier
@@ -126,24 +146,12 @@ fun <T> SectionItemWithValue(
   currentValue: State<T>,
   values: List<ValueTitle<T>>,
   label: String? = null,
-  icon: ImageVector? = null,
-  iconTint: Color = HighOrLowlight,
+  icon: Painter? = null,
+  iconTint: Color = MaterialTheme.colors.secondary,
   enabled: State<Boolean> = mutableStateOf(true),
   onSelected: () -> Unit
 ) {
-  SectionItemView(click = if (enabled.value) onSelected else null) {
-    if (icon != null) {
-      Icon(
-        icon,
-        title,
-        Modifier.padding(end = 8.dp),
-        tint = iconTint
-      )
-    }
-    Text(title, color = if (enabled.value) Color.Unspecified else HighOrLowlight)
-
-    Spacer(Modifier.fillMaxWidth().weight(1f))
-
+  SettingsActionItemWithContent(icon = icon, text = title, iconColor = iconTint, click = if (enabled.value) onSelected else null, disabled = !enabled.value) {
     Row(
       Modifier.padding(start = 10.dp),
       verticalAlignment = Alignment.CenterVertically,
@@ -153,7 +161,7 @@ fun <T> SectionItemWithValue(
         values.first { it.value == currentValue.value }.title + (if (label != null) " $label" else ""),
         maxLines = 1,
         overflow = TextOverflow.Ellipsis,
-        color = HighOrLowlight
+        color = MaterialTheme.colors.secondary
       )
     }
   }
@@ -169,7 +177,7 @@ fun SectionTextFooter(text: AnnotatedString) {
   Text(
     text,
     Modifier.padding(start = DEFAULT_PADDING, end = DEFAULT_PADDING, top = DEFAULT_PADDING_HALF).fillMaxWidth(0.9F),
-    color = HighOrLowlight,
+    color = MaterialTheme.colors.secondary,
     lineHeight = 18.sp,
     fontSize = 14.sp
   )
@@ -189,20 +197,41 @@ fun SectionDivider() {
   Divider(Modifier.padding(horizontal = 8.dp))
 }
 
+@Composable
+fun SectionDividerSpaced(maxTopPadding: Boolean = false, maxBottomPadding: Boolean = true) {
+  Divider(
+    Modifier.padding(
+      start = DEFAULT_PADDING_HALF,
+      top = if (maxTopPadding) 40.dp else 30.dp,
+      end = DEFAULT_PADDING_HALF,
+      bottom = if (maxBottomPadding) 40.dp else 30.dp)
+  )
+}
+
 @Composable
 fun SectionSpacer() {
   Spacer(Modifier.height(30.dp))
 }
 
 @Composable
-fun InfoRow(title: String, value: String, icon: ImageVector? = null, iconTint: Color? = null) {
+fun SectionBottomSpacer() {
+  Spacer(Modifier.height(DEFAULT_BOTTOM_PADDING))
+}
+
+@Composable
+fun TextIconSpaced(extraPadding: Boolean = false) {
+  Spacer(Modifier.padding(horizontal = if (extraPadding) 17.dp else DEFAULT_PADDING_HALF))
+}
+
+@Composable
+fun InfoRow(title: String, value: String, icon: Painter? = null, iconTint: Color? = null) {
   SectionItemViewSpaceBetween {
     Row {
       val iconSize = with(LocalDensity.current) { 21.sp.toDp() }
-      if (icon != null) Icon(icon, title, Modifier.padding(end = 8.dp).size(iconSize), tint = iconTint ?: HighOrLowlight)
+      if (icon != null) Icon(icon, title, Modifier.padding(end = 8.dp).size(iconSize), tint = iconTint ?: MaterialTheme.colors.secondary)
       Text(title)
     }
-    Text(value, color = HighOrLowlight)
+    Text(value, color = MaterialTheme.colors.secondary)
   }
 }
 
@@ -218,7 +247,7 @@ fun InfoRowEllipsis(title: String, value: String, onClick: () -> Unit) {
         .widthIn(max = (configuration.screenWidthDp / 2).dp),
       maxLines = 1,
       overflow = TextOverflow.Ellipsis,
-      color = HighOrLowlight
+      color = MaterialTheme.colors.secondary
     )
   }
 }

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

@@ -1,22 +1,25 @@
 package chat.simplex.app.ui.theme
 
+import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.*
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.outlined.Share
+import androidx.compose.ui.res.painterResource
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.graphics.painter.Painter
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextDecoration
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import chat.simplex.app.R
 
 @Composable
-fun SimpleButton(text: String, icon: ImageVector,
+fun SimpleButton(text: String, icon: Painter,
                  color: Color = MaterialTheme.colors.primary,
                  click: () -> Unit) {
   SimpleButtonFrame(click) {
@@ -28,26 +31,41 @@ fun SimpleButton(text: String, icon: ImageVector,
   }
 }
 
+@Composable
+fun SimpleButtonDecorated(text: String, icon: Painter,
+  color: Color = MaterialTheme.colors.primary,
+  textDecoration: TextDecoration = TextDecoration.Underline,
+  fontWeight: FontWeight = FontWeight.Normal,
+  click: () -> Unit) {
+  SimpleButtonFrame(click) {
+    Icon(
+      icon, text, tint = color,
+      modifier = Modifier.padding(end = 8.dp)
+    )
+    Text(text, style = MaterialTheme.typography.caption, fontWeight = fontWeight, color = color, textDecoration = textDecoration)
+  }
+}
+
 @Composable
 fun SimpleButton(
-  text: String, icon: ImageVector,
+  text: String, icon: Painter,
   color: Color = MaterialTheme.colors.primary,
   disabled: Boolean,
   click: () -> Unit
 ) {
   SimpleButtonFrame(click, disabled = disabled) {
     Icon(
-      icon, text, tint = if (disabled) HighOrLowlight else color,
+      icon, text, tint = if (disabled) MaterialTheme.colors.secondary else color,
       modifier = Modifier.padding(end = 8.dp)
     )
-    Text(text, style = MaterialTheme.typography.caption, color = if (disabled) HighOrLowlight else color)
+    Text(text, style = MaterialTheme.typography.caption, color = if (disabled) MaterialTheme.colors.secondary else color)
   }
 }
 
 @Composable
 fun SimpleButtonIconEnded(
   text: String,
-  icon: ImageVector,
+  icon: Painter,
   color: Color = MaterialTheme.colors.primary,
   click: () -> Unit
 ) {
@@ -61,9 +79,9 @@ fun SimpleButtonIconEnded(
 }
 
 @Composable
-fun SimpleButtonFrame(click: () -> Unit, disabled: Boolean = false, content: @Composable () -> Unit) {
-  Surface(shape = RoundedCornerShape(20.dp)) {
-    val modifier = if (disabled) Modifier else Modifier.clickable { click() }
+fun SimpleButtonFrame(click: () -> Unit, modifier: Modifier = Modifier, disabled: Boolean = false, content: @Composable () -> Unit) {
+  Box(Modifier.clip(RoundedCornerShape(20.dp))) {
+    val modifier = if (disabled) modifier else modifier.clickable { click() }
     Row(
       verticalAlignment = Alignment.CenterVertically,
       modifier = modifier.padding(8.dp)
@@ -75,6 +93,6 @@ fun SimpleButtonFrame(click: () -> Unit, disabled: Boolean = false, content: @Co
 @Composable
 fun PreviewCloseSheetBar() {
   SimpleXTheme {
-    SimpleButton(text = "Share", icon = Icons.Outlined.Share, click = {})
+    SimpleButton(text = "Share", icon = painterResource(R.drawable.ic_share), click = {})
   }
 }

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

@@ -18,7 +18,6 @@ import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.text.input.KeyboardCapitalization
 import androidx.compose.ui.unit.*
 import chat.simplex.app.ui.theme.DEFAULT_PADDING
-import chat.simplex.app.ui.theme.HighOrLowlight
 
 @Composable
 fun TextEditor(
@@ -41,11 +40,11 @@ fun TextEditor(
       autoCorrect = false
     ),
     modifier = modifier,
-    cursorBrush = SolidColor(HighOrLowlight),
+    cursorBrush = SolidColor(MaterialTheme.colors.secondary),
     decorationBox = { innerTextField ->
       Surface(
         shape = if (border) RoundedCornerShape(10.dp) else RectangleShape,
-        border = if (border) BorderStroke(1.dp, MaterialTheme.colors.secondary) else null
+        border = if (border) BorderStroke(1.dp, MaterialTheme.colors.secondaryVariant) else null
       ) {
         Row(
           Modifier.background(background),

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

@@ -37,6 +37,9 @@ import androidx.core.text.HtmlCompat
 import chat.simplex.app.*
 import chat.simplex.app.R
 import chat.simplex.app.model.*
+import chat.simplex.app.ui.theme.ThemeData
+import chat.simplex.app.ui.theme.ThemeOverrides
+import com.charleskorn.kaml.decodeFromStream
 import kotlinx.coroutines.*
 import kotlinx.serialization.decodeFromString
 import kotlinx.serialization.encodeToString
@@ -388,6 +391,22 @@ fun getDrawableFromUri(uri: Uri, withAlertOnException: Boolean = true): Drawable
   }
 }
 
+fun getThemeFromUri(uri: Uri, withAlertOnException: Boolean = true): ThemeData? {
+  SimplexApp.context.contentResolver.openInputStream(uri).use {
+    runCatching {
+      return yaml.decodeFromStream<ThemeData>(it!!)
+    }.onFailure {
+      if (withAlertOnException) {
+        AlertManager.shared.showAlertMsg(
+          title = generalGetString(R.string.import_theme_error),
+          text = generalGetString(R.string.import_theme_error_desc),
+        )
+      }
+    }
+  }
+  return null
+}
+
 fun saveImage(context: Context, uri: Uri): String? {
   val bitmap = getBitmapFromUri(uri) ?: return null
   return saveImage(context, bitmap)
@@ -557,7 +576,7 @@ fun getBitmapFromVideo(uri: Uri, timestamp: Long? = null, random: Boolean = true
   val image = when {
     timestamp != null -> mmr.getFrameAtTime(timestamp * 1000, MediaMetadataRetriever.OPTION_CLOSEST)
     random -> mmr.frameAtTime
-    else -> mmr.getFrameAtIndex(0)
+    else -> mmr.getFrameAtTime(0)
   }
   mmr.release()
   return VideoPlayer.PreviewAndDuration(image, durationMs, timestamp ?: 0)
@@ -566,6 +585,9 @@ fun getBitmapFromVideo(uri: Uri, timestamp: Long? = null, random: Boolean = true
 fun Color.darker(factor: Float = 0.1f): Color =
   Color(max(red * (1 - factor), 0f), max(green * (1 - factor), 0f), max(blue * (1 - factor), 0f), alpha)
 
+fun Color.lighter(factor: Float = 0.1f): Color =
+  Color(min(red * (1 + factor), 1f), min(green * (1 + factor), 1f), min(blue * (1 + factor), 1f), alpha)
+
 fun ByteArray.toBase64String() = Base64.encodeToString(this, Base64.DEFAULT)
 
 fun String.toByteArrayFromBase64() = Base64.decode(this, Base64.DEFAULT)
@@ -640,4 +662,20 @@ fun DisposableEffectOnGone(always: () -> Unit = {}, whenDispose: () -> Unit = {}
       }
     }
   }
-}
+}
+
+@Composable
+fun DisposableEffectOnRotate(always: () -> Unit = {}, whenDispose: () -> Unit = {}, whenRotate: () -> Unit) {
+  val context = LocalContext.current
+  DisposableEffect(Unit) {
+    always()
+    val activity = context as? Activity ?: return@DisposableEffect onDispose {}
+    val orientation = activity.resources.configuration.orientation
+    onDispose {
+      whenDispose()
+      if (orientation != activity.resources.configuration.orientation) {
+        whenRotate()
+      }
+    }
+  }
+}

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

@@ -86,7 +86,7 @@ class VideoPlayer private constructor(
     .build()
     .apply {
     // Repeat the same track endlessly
-    repeatMode = 1
+    repeatMode = Player.REPEAT_MODE_ONE
     currentVolume = volume
     if (!soundEnabled) {
       volume = 0f

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

@@ -0,0 +1,22 @@
+package chat.simplex.app.views.localauth
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.ui.res.stringResource
+import chat.simplex.app.R
+import chat.simplex.app.model.ChatModel
+import chat.simplex.app.views.helpers.*
+
+@Composable
+fun LocalAuthView(m: ChatModel, authRequest: LocalAuthRequest) {
+  val passcode = rememberSaveable { mutableStateOf("") }
+  PasscodeView(passcode, authRequest.title ?: stringResource(R.string.la_enter_app_passcode), authRequest.reason, stringResource(R.string.submit_passcode),
+    submit = {
+      val r: LAResult = if (passcode.value == authRequest.password) LAResult.Success else LAResult.Error(generalGetString(R.string.incorrect_passcode))
+      authRequest.completed(r)
+    },
+    cancel = {
+      authRequest.completed(LAResult.Error(generalGetString(R.string.authentication_cancelled)))
+    })
+}

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

@@ -0,0 +1,98 @@
+package chat.simplex.app.views.localauth
+
+import android.content.res.Configuration
+import androidx.compose.foundation.layout.*
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Text
+import androidx.compose.runtime.*
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.unit.dp
+import chat.simplex.app.R
+import chat.simplex.app.ui.theme.DEFAULT_PADDING
+import chat.simplex.app.ui.theme.SimpleButton
+import chat.simplex.app.views.helpers.*
+
+@Composable
+fun PasscodeView(
+  passcode: MutableState<String>,
+  title: String,
+  reason: String? = null,
+  submitLabel: String,
+  submitEnabled: ((String) -> Boolean)? = null,
+  submit: () -> Unit,
+  cancel: () -> Unit,
+) {
+  @Composable
+  fun VerticalLayout() {
+    Column(
+      horizontalAlignment = Alignment.CenterHorizontally,
+      verticalArrangement = Arrangement.SpaceEvenly
+    ) {
+      Column(horizontalAlignment = Alignment.CenterHorizontally) {
+        Text(title, style = MaterialTheme.typography.h1)
+        if (reason != null) {
+          Text(reason, Modifier.padding(top = 5.dp), style = MaterialTheme.typography.subtitle1)
+        }
+      }
+      PasscodeEntry(passcode, true)
+      Row {
+        SimpleButton(generalGetString(R.string.cancel_verb), icon = painterResource(R.drawable.ic_close), click = cancel)
+        Spacer(Modifier.size(20.dp))
+        SimpleButton(submitLabel, icon = painterResource(R.drawable.ic_done_filled), disabled = submitEnabled?.invoke(passcode.value) == false || passcode.value.length < 4, click = submit)
+      }
+    }
+  }
+
+  @Composable
+  fun HorizontalLayout() {
+    Row(Modifier.padding(horizontal = DEFAULT_PADDING), horizontalArrangement = Arrangement.Center) {
+      Column(
+        Modifier.padding(start = DEFAULT_PADDING, end = DEFAULT_PADDING, top = DEFAULT_PADDING * 4),
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.SpaceBetween
+      ) {
+        Column(horizontalAlignment = Alignment.CenterHorizontally) {
+          Text(title, style = MaterialTheme.typography.h1)
+          if (reason != null) {
+            Text(reason, Modifier.padding(top = 5.dp), style = MaterialTheme.typography.subtitle1)
+          }
+        }
+        PasscodeEntry(passcode, false)
+      }
+
+      Column(
+        Modifier.padding(start = DEFAULT_PADDING, end = DEFAULT_PADDING, top = DEFAULT_PADDING * 4),
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.SpaceBetween
+      ) {
+        // Just to fill space to correctly calculate the height
+        Column {
+          Text("", style = MaterialTheme.typography.h1)
+          if (reason != null) {
+            Text("", Modifier.padding(top = 5.dp), style = MaterialTheme.typography.subtitle1)
+          }
+          PasscodeView(remember { mutableStateOf("") })
+        }
+        BoxWithConstraints {
+          val s = minOf(maxWidth, maxHeight) / 3.5f
+          Column(
+            Modifier.padding(start = 30.dp).height(s * 3),
+            verticalArrangement = Arrangement.SpaceEvenly
+          ) {
+            SimpleButton(generalGetString(R.string.cancel_verb), icon = painterResource(R.drawable.ic_close), click = cancel)
+            SimpleButton(submitLabel, icon = painterResource(R.drawable.ic_done_filled), disabled = submitEnabled?.invoke(passcode.value) == false || passcode.value.length < 4, click = submit)
+          }
+        }
+      }
+    }
+  }
+
+  if (LocalContext.current.resources.configuration.orientation == Configuration.ORIENTATION_PORTRAIT) {
+    VerticalLayout()
+  } else {
+    HorizontalLayout()
+  }
+}

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

@@ -0,0 +1,180 @@
+package chat.simplex.app.views.localauth
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.*
+import androidx.compose.ui.graphics.painter.Painter
+import androidx.compose.ui.res.painterResource
+import chat.simplex.app.R
+import androidx.compose.runtime.*
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.*
+
+@Composable
+fun PasscodeEntry(
+  password: MutableState<String>,
+  vertical: Boolean,
+) {
+  Column(horizontalAlignment = Alignment.CenterHorizontally) {
+    PasscodeView(password)
+    BoxWithConstraints {
+      if (vertical) {
+        VerticalPasswordGrid(password)
+      } else {
+        HorizontalPasswordGrid(password)
+      }
+    }
+  }
+}
+
+@Composable
+fun PasscodeView(password: MutableState<String>) {
+  var showPasscode by rememberSaveable { mutableStateOf(false) }
+  Text(
+    if (password.value.isEmpty()) " " else remember(password.value, showPasscode) { splitPassword(showPasscode, password.value) },
+    Modifier.padding(vertical = 10.dp).clickable { showPasscode = !showPasscode },
+    style = MaterialTheme.typography.body1
+  )
+}
+
+@Composable
+private fun BoxWithConstraintsScope.VerticalPasswordGrid(password: MutableState<String>) {
+  val s = minOf(maxWidth, maxHeight) / 4 - 1.dp
+  Column(Modifier.width(IntrinsicSize.Min)) {
+    DigitsRow(s, 1, 2, 3, password)
+    Divider()
+    DigitsRow(s, 4, 5, 6, password)
+    Divider()
+    DigitsRow(s, 7, 8, 9, password)
+    Divider()
+    Row(Modifier.requiredHeight(s)) {
+      PasswordEdit(s, painterResource(R.drawable.ic_close)) {
+        password.value = ""
+      }
+      VerticalDivider()
+      PasswordDigit(s, 0, password)
+      VerticalDivider()
+      PasswordEdit(s, painterResource(R.drawable.ic_backspace)) {
+        password.value = password.value.dropLast(1)
+      }
+    }
+  }
+}
+
+@Composable
+private fun BoxWithConstraintsScope.HorizontalPasswordGrid(password: MutableState<String>) {
+  val s = minOf(maxWidth, maxHeight) / 3.5f - 1.dp
+  Column(Modifier.width(IntrinsicSize.Min)) {
+    Row(Modifier.height(IntrinsicSize.Min)) {
+      DigitsRow(s, 1, 2, 3, password);
+      VerticalDivider()
+      PasswordEdit(s, painterResource(R.drawable.ic_close)) {
+        password.value = ""
+      }
+    }
+    Divider()
+    Row(Modifier.height(IntrinsicSize.Min)) {
+      DigitsRow(s, 4, 5, 6, password)
+      VerticalDivider()
+      PasswordDigit(s, 0, password)
+    }
+    Divider()
+    Row(Modifier.height(IntrinsicSize.Min)) {
+      DigitsRow(s, 7, 8, 9, password)
+      VerticalDivider()
+      PasswordEdit(s, painterResource(R.drawable.ic_backspace)) {
+        password.value = password.value.dropLast(1)
+      }
+    }
+  }
+}
+
+private fun splitPassword(showPassword: Boolean, password: String): String {
+  val n = if (password.length < 8) 8 else 4
+  return password.mapIndexed { index, c -> (if (showPassword) c.toString() else "●") + (if ((index + 1) % n == 0) " " else "") }.joinToString("")
+}
+
+@Composable
+private fun DigitsRow(size: Dp, d1: Int, d2: Int, d3: Int, password: MutableState<String>) {
+  Row(Modifier.height(size)) {
+    PasswordDigit(size, d1, password)
+    VerticalDivider()
+    PasswordDigit(size, d2, password)
+    VerticalDivider()
+    PasswordDigit(size, d3, password)
+  }
+}
+
+@Composable
+private fun PasswordDigit(size: Dp, d: Int, password: MutableState<String>) {
+  val s = d.toString()
+  return PasswordButton(size, action = {
+    if (password.value.length < 16) {
+      password.value += s
+    }
+  }) {
+    Text(
+      s,
+      style = TextStyle(
+        fontWeight = FontWeight.Normal,
+        fontSize = 30.sp,
+        letterSpacing = (-0.5).sp
+      ),
+      color = MaterialTheme.colors.secondary
+    )
+  }
+}
+
+@Composable
+private fun PasswordEdit(size: Dp, image: Painter, action: () -> Unit) {
+  PasswordButton(size, action) {
+    Icon(image, null, tint = MaterialTheme.colors.secondary)
+  }
+}
+
+@Composable
+private fun PasswordButton(size: Dp, action: () -> Unit, content: @Composable BoxScope.() -> Unit) {
+  return Box(
+    Modifier.size(size)
+      .background(MaterialTheme.colors.background, RoundedCornerShape(50))
+      .clickable { action() },
+    contentAlignment = Alignment.Center
+  ) {
+    content()
+  }
+}
+
+@Composable
+fun VerticalDivider(
+  modifier: Modifier = Modifier,
+  color: Color = MaterialTheme.colors.onSurface.copy(alpha = DividerAlpha),
+  thickness: Dp = 1.dp,
+  startIndent: Dp = 0.dp
+) {
+  val indentMod = if (startIndent.value != 0f) {
+    Modifier.padding(top = startIndent)
+  } else {
+    Modifier
+  }
+  val targetThickness = if (thickness == Dp.Hairline) {
+    (1f / LocalDensity.current.density).dp
+  } else {
+    thickness
+  }
+  Box(
+    modifier.then(indentMod)
+      .fillMaxHeight()
+      .width(targetThickness)
+      .background(color = color)
+  )
+}
+
+private const val DividerAlpha = 0.12f

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

@@ -0,0 +1,53 @@
+package chat.simplex.app.views.localauth
+
+import androidx.activity.compose.BackHandler
+import androidx.compose.runtime.*
+import androidx.compose.runtime.saveable.rememberSaveable
+import chat.simplex.app.R
+import chat.simplex.app.views.helpers.DatabaseUtils.ksAppPassword
+import chat.simplex.app.views.helpers.generalGetString
+
+@Composable
+fun SetAppPasscodeView(
+  submit: () -> Unit,
+  cancel: () -> Unit,
+  close: () -> Unit
+) {
+  val passcode = rememberSaveable { mutableStateOf("") }
+  var enteredPassword by rememberSaveable { mutableStateOf("") }
+  var confirming by rememberSaveable { mutableStateOf(false) }
+
+  @Composable
+  fun SetPasswordView(title: String, submitLabel: String, submitEnabled: (((String) -> Boolean))? = null, submit: () -> Unit) {
+    BackHandler {
+      close()
+      cancel()
+    }
+    PasscodeView(passcode, title = title, submitLabel = submitLabel, submitEnabled = submitEnabled, submit = submit) {
+      close()
+      cancel()
+    }
+  }
+
+  if (confirming) {
+    SetPasswordView(
+      generalGetString(R.string.confirm_passcode),
+      generalGetString(R.string.confirm_verb),
+      submitEnabled = { pwd -> pwd == enteredPassword }
+    ) {
+      if (passcode.value == enteredPassword) {
+        ksAppPassword.set(passcode.value)
+        enteredPassword = ""
+        passcode.value = ""
+        close()
+        submit()
+      }
+    }
+  } else {
+    SetPasswordView(generalGetString(R.string.new_passcode), generalGetString(R.string.save_verb)) {
+      enteredPassword = passcode.value
+      passcode.value = ""
+      confirming = true
+    }
+  }
+}

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

@@ -1,14 +1,12 @@
 package chat.simplex.app.views.newchat
 
+import SectionBottomSpacer
 import android.content.res.Configuration
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.*
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.TheaterComedy
-import androidx.compose.material.icons.outlined.Info
-import androidx.compose.material.icons.outlined.Share
+import androidx.compose.ui.res.painterResource
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -19,7 +17,6 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import chat.simplex.app.R
-import chat.simplex.app.model.ChatModel
 import chat.simplex.app.ui.theme.*
 import chat.simplex.app.views.helpers.*
 
@@ -39,8 +36,7 @@ fun AddContactLayout(connReq: String, connIncognito: Boolean, share: () -> Unit)
     val screenHeight = maxHeight
     Column(
       Modifier
-        .verticalScroll(rememberScrollState())
-        .padding(bottom = 16.dp),
+        .verticalScroll(rememberScrollState()),
       verticalArrangement = Arrangement.SpaceBetween,
     ) {
       AppBarTitle(stringResource(R.string.add_contact), false)
@@ -67,7 +63,7 @@ fun AddContactLayout(connReq: String, connIncognito: Boolean, share: () -> Unit)
               .size(36.dp)
               .padding(4.dp)
               .align(Alignment.CenterHorizontally),
-            color = HighOrLowlight,
+            color = MaterialTheme.colors.secondary,
             strokeWidth = 3.dp
           )
       }
@@ -75,49 +71,52 @@ fun AddContactLayout(connReq: String, connIncognito: Boolean, share: () -> Unit)
         annotatedStringResource(R.string.if_you_cannot_meet_in_person_show_QR_in_video_call_or_via_another_channel),
         lineHeight = 22.sp,
         modifier = Modifier
-          .padding(top = 16.dp, bottom = if (screenHeight > 600.dp) 16.dp else 0.dp)
+          .padding(top = DEFAULT_PADDING, bottom = if (screenHeight > 600.dp) DEFAULT_PADDING else 0.dp)
       )
       Row(
         Modifier.fillMaxWidth(),
         horizontalArrangement = Arrangement.Center
       ) {
-        SimpleButton(stringResource(R.string.share_invitation_link), icon = Icons.Outlined.Share, click = share)
+        SimpleButton(stringResource(R.string.share_invitation_link), icon = painterResource(R.drawable.ic_share), click = share)
       }
+      SectionBottomSpacer()
     }
   }
 }
 
 @Composable
-fun InfoAboutIncognito(chatModelIncognito: Boolean, supportedIncognito: Boolean = true, onText: String, offText: String) {
+fun InfoAboutIncognito(chatModelIncognito: Boolean, supportedIncognito: Boolean = true, onText: String, offText: String, centered: Boolean = false) {
   if (chatModelIncognito) {
     Row(
       Modifier
         .fillMaxWidth()
         .padding(vertical = 4.dp),
-      verticalAlignment = Alignment.CenterVertically
+      verticalAlignment = Alignment.CenterVertically,
+      horizontalArrangement = if (centered) Arrangement.Center else Arrangement.Start
     ) {
       Icon(
-        if (supportedIncognito) Icons.Filled.TheaterComedy else Icons.Outlined.Info,
+        if (supportedIncognito) painterResource(R.drawable.ic_theater_comedy_filled) else painterResource(R.drawable.ic_info),
         stringResource(R.string.incognito),
         tint = if (supportedIncognito) Indigo else WarningOrange,
         modifier = Modifier.padding(end = 10.dp).size(20.dp)
       )
-      Text(onText, textAlign = TextAlign.Left, style = MaterialTheme.typography.body2)
+      Text(onText, textAlign = if (centered) TextAlign.Center else TextAlign.Left, style = MaterialTheme.typography.body2)
     }
   } else {
     Row(
       Modifier
         .fillMaxWidth()
         .padding(vertical = 4.dp),
-      verticalAlignment = Alignment.CenterVertically
+      verticalAlignment = Alignment.CenterVertically,
+      horizontalArrangement = if (centered) Arrangement.Center else Arrangement.Start
     ) {
       Icon(
-        Icons.Outlined.Info,
+        painterResource(R.drawable.ic_info),
         stringResource(R.string.incognito),
-        tint = HighOrLowlight,
+        tint = MaterialTheme.colors.secondary,
         modifier = Modifier.padding(end = 10.dp).size(20.dp)
       )
-      Text(offText, textAlign = TextAlign.Left, style = MaterialTheme.typography.body2)
+      Text(offText, textAlign = if (centered) TextAlign.Center else TextAlign.Left, style = MaterialTheme.typography.body2)
     }
   }
 }

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

@@ -1,20 +1,20 @@
 package chat.simplex.app.views.newchat
 
-import android.graphics.Bitmap
 import android.net.Uri
 import androidx.compose.foundation.*
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.*
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.outlined.ArrowForwardIos
 import androidx.compose.runtime.*
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.FocusRequester
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
 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.sp
@@ -26,6 +26,7 @@ import chat.simplex.app.views.chat.group.AddGroupMembersView
 import chat.simplex.app.views.chatlist.setGroupMembers
 import chat.simplex.app.views.helpers.*
 import chat.simplex.app.views.isValidDisplayName
+import chat.simplex.app.views.onboarding.ReadableText
 import chat.simplex.app.views.usersettings.DeleteImageButton
 import chat.simplex.app.views.usersettings.EditImageButton
 import com.google.accompanist.insets.ProvideWindowInsets
@@ -36,7 +37,6 @@ import kotlinx.coroutines.launch
 @Composable
 fun AddGroupView(chatModel: ChatModel, close: () -> Unit) {
   AddGroupLayout(
-    chatModel.incognito.value,
     createGroup = { groupProfile ->
       withApi {
         val groupInfo = chatModel.controller.apiNewGroup(groupProfile)
@@ -57,11 +57,11 @@ fun AddGroupView(chatModel: ChatModel, close: () -> Unit) {
 }
 
 @Composable
-fun AddGroupLayout(chatModelIncognito: Boolean, createGroup: (GroupProfile) -> Unit, close: () -> Unit) {
+fun AddGroupLayout(createGroup: (GroupProfile) -> Unit, close: () -> Unit) {
   val bottomSheetModalState = rememberModalBottomSheetState(initialValue = ModalBottomSheetValue.Hidden)
   val scope = rememberCoroutineScope()
-  val displayName = remember { mutableStateOf("") }
-  val fullName = remember { mutableStateOf("") }
+  val displayName = rememberSaveable { mutableStateOf("") }
+  val fullName = rememberSaveable { mutableStateOf("") }
   val chosenImage = rememberSaveable { mutableStateOf<Uri?>(null) }
   val profileImage = rememberSaveable { mutableStateOf<String?>(null) }
   val focusRequester = remember { FocusRequester() }
@@ -88,14 +88,8 @@ fun AddGroupLayout(chatModelIncognito: Boolean, createGroup: (GroupProfile) -> U
             .verticalScroll(rememberScrollState())
             .padding(horizontal = DEFAULT_PADDING)
         ) {
-          AppBarTitle(stringResource(R.string.create_secret_group_title), false)
-          Text(stringResource(R.string.group_is_decentralized))
-          InfoAboutIncognito(
-            chatModelIncognito,
-            false,
-            generalGetString(R.string.group_unsupported_incognito_main_profile_sent),
-            generalGetString(R.string.group_main_profile_sent)
-          )
+          AppBarTitle(stringResource(R.string.create_secret_group_title))
+          ReadableText(R.string.group_is_decentralized, TextAlign.Center)
           Box(
             Modifier
               .fillMaxWidth()
@@ -104,7 +98,7 @@ fun AddGroupLayout(chatModelIncognito: Boolean, createGroup: (GroupProfile) -> U
           ) {
             Box(contentAlignment = Alignment.TopEnd) {
               Box(contentAlignment = Alignment.Center) {
-                ProfileImage(size = 192.dp, image = profileImage.value)
+                ProfileImage(108.dp, image = profileImage.value)
                 EditImageButton { scope.launch { bottomSheetModalState.show() } }
               }
               if (profileImage.value != null) {
@@ -112,24 +106,28 @@ fun AddGroupLayout(chatModelIncognito: Boolean, createGroup: (GroupProfile) -> U
               }
             }
           }
-          Text(
-            stringResource(R.string.group_display_name_field),
-            Modifier.padding(bottom = 3.dp)
-          )
-          ProfileNameField(displayName, focusRequester)
-          val errorText = if (!isValidDisplayName(displayName.value)) stringResource(R.string.display_name_cannot_contain_whitespace) else ""
-          Text(
-            errorText,
-            fontSize = 15.sp,
-            color = MaterialTheme.colors.error
-          )
-          Spacer(Modifier.height(3.dp))
+          Row(Modifier.padding(bottom = DEFAULT_PADDING_HALF).fillMaxWidth(), horizontalArrangement = Arrangement.SpaceBetween) {
+            Text(
+              stringResource(R.string.group_display_name_field),
+              fontSize = 16.sp
+            )
+            if (!isValidDisplayName(displayName.value)) {
+              Spacer(Modifier.size(DEFAULT_PADDING_HALF))
+              Text(
+                stringResource(R.string.no_spaces),
+                fontSize = 16.sp,
+                color = Color.Red
+              )
+            }
+          }
+          ProfileNameField(displayName, "", ::isValidDisplayName, focusRequester)
+          Spacer(Modifier.height(DEFAULT_PADDING))
           Text(
             stringResource(R.string.group_full_name_field),
-            Modifier.padding(bottom = 5.dp)
+            fontSize = 16.sp,
+            modifier = Modifier.padding(bottom = DEFAULT_PADDING_HALF)
           )
-          ProfileNameField(fullName)
-
+          ProfileNameField(fullName, "")
           Spacer(Modifier.height(8.dp))
           val enabled = displayName.value.isNotEmpty() && isValidDisplayName(displayName.value)
           if (enabled) {
@@ -143,7 +141,7 @@ fun AddGroupLayout(chatModelIncognito: Boolean, createGroup: (GroupProfile) -> U
               }
               .padding(8.dp))
           } else {
-            CreateGroupButton(HighOrLowlight, Modifier.padding(8.dp))
+            CreateGroupButton(MaterialTheme.colors.secondary, Modifier.padding(8.dp))
           }
           LaunchedEffect(Unit) {
             delay(300)
@@ -163,8 +161,8 @@ fun CreateGroupButton(color: Color, modifier: Modifier) {
   ) {
     Surface(shape = RoundedCornerShape(20.dp)) {
       Row(modifier, verticalAlignment = Alignment.CenterVertically) {
-        Text(stringResource(R.string.create_profile_button), style = MaterialTheme.typography.caption, color = color)
-        Icon(Icons.Outlined.ArrowForwardIos, stringResource(R.string.create_profile_button), tint = color)
+        Text(stringResource(R.string.create_profile_button), style = MaterialTheme.typography.caption, color = color, fontWeight = FontWeight.Bold)
+        Icon(painterResource(R.drawable.ic_arrow_forward_ios), stringResource(R.string.create_profile_button), tint = color)
       }
     }
   }
@@ -175,7 +173,6 @@ fun CreateGroupButton(color: Color, modifier: Modifier) {
 fun PreviewAddGroupLayout() {
   SimpleXTheme {
     AddGroupLayout(
-      chatModelIncognito = false,
       createGroup = {},
       close = {}
     )

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

@@ -2,15 +2,14 @@ package chat.simplex.app.views.newchat
 
 import androidx.compose.foundation.layout.*
 import androidx.compose.material.*
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.outlined.*
 import androidx.compose.runtime.*
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.sp
 import chat.simplex.app.R
 import chat.simplex.app.model.ChatModel
-import chat.simplex.app.ui.theme.HighOrLowlight
 
 enum class ConnectViaLinkTab {
   SCAN, PASTE
@@ -45,7 +44,7 @@ fun ConnectViaLinkView(m: ChatModel, close: () -> Unit) {
     }
     TabRow(
       selectedTabIndex = selection.value.ordinal,
-      backgroundColor = MaterialTheme.colors.background,
+      backgroundColor = Color.Transparent,
       contentColor = MaterialTheme.colors.primary,
     ) {
       tabTitles.forEachIndexed { index, it ->
@@ -58,12 +57,12 @@ fun ConnectViaLinkView(m: ChatModel, close: () -> Unit) {
           text = { Text(it, fontSize = 13.sp) },
           icon = {
             Icon(
-              if (ConnectViaLinkTab.SCAN.ordinal == index) Icons.Outlined.QrCode else Icons.Outlined.Article,
+              if (ConnectViaLinkTab.SCAN.ordinal == index) painterResource(R.drawable.ic_qr_code) else painterResource(R.drawable.ic_article),
               it
             )
           },
           selectedContentColor = MaterialTheme.colors.primary,
-          unselectedContentColor = HighOrLowlight,
+          unselectedContentColor = MaterialTheme.colors.secondary,
         )
       }
     }