add generic ColoredIconButton for round buttons

src/main/kotlin/org/briarproject/briar/desktop/contact/SearchTextField.kt

@@ -18,14 +18,11 @@
 
 package org.briarproject.briar.desktop.contact
 
-import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.Icon
-import androidx.compose.material.IconButton
 import androidx.compose.material.LocalTextStyle
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Text
@@ -34,15 +31,11 @@ import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.PersonAdd
 import androidx.compose.material.icons.filled.Search
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.input.pointer.PointerIconDefaults
-import androidx.compose.ui.input.pointer.pointerHoverIcon
 import androidx.compose.ui.unit.dp
+import org.briarproject.briar.desktop.ui.ColoredIconButton
 import org.briarproject.briar.desktop.utils.InternationalizationUtils.i18n
 
-@OptIn(ExperimentalComposeUiApi::class)
 @Composable
 fun SearchTextField(searchValue: String, onValueChange: (String) -> Unit, onContactAdd: () -> Unit) {
     TextField(
@@ -59,16 +52,13 @@ fun SearchTextField(searchValue: String, onValueChange: (String) -> Unit, onCont
             Icon(Icons.Filled.Search, i18n("access.contacts.search"), padding)
         },
         trailingIcon = {
-            IconButton(
+            ColoredIconButton(
                 onClick = onContactAdd,
                 modifier = Modifier.padding(end = 8.dp)
-                    .background(MaterialTheme.colors.primary, CircleShape).pointerHoverIcon(PointerIconDefaults.Default)
-                    .then(Modifier.size(32.dp))
             ) {
                 Icon(
                     Icons.Filled.PersonAdd,
                     i18n("access.contacts.add"),
-                    tint = Color.White,
                     modifier = Modifier.size(20.dp)
                 )
             }

src/main/kotlin/org/briarproject/briar/desktop/conversation/ConversationInput.kt

@@ -25,7 +25,6 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.AlertDialog
 import androidx.compose.material.ExperimentalMaterialApi
@@ -46,13 +45,13 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.ImageBitmap
 import androidx.compose.ui.input.pointer.PointerIconDefaults
 import androidx.compose.ui.input.pointer.pointerHoverIcon
 import androidx.compose.ui.res.ResourceLoader
 import androidx.compose.ui.res.loadImageBitmap
 import androidx.compose.ui.unit.dp
+import org.briarproject.briar.desktop.ui.ColoredIconButton
 import org.briarproject.briar.desktop.ui.HorizontalDivider
 import org.briarproject.briar.desktop.ui.LocalWindowScope
 import org.briarproject.briar.desktop.utils.ImagePicker.pickImageUsingDialog
@@ -112,7 +111,7 @@ fun ConversationInput(
             ),
             leadingIcon = {
                 val windowScope = LocalWindowScope.current!!
-                IconButton(
+                ColoredIconButton(
                     onClick = {
                         if (image == null) {
                             pickImageUsingDialog(windowScope.window, updateImage)
@@ -120,15 +119,12 @@ fun ConversationInput(
                             updateImage(null)
                         }
                     },
-                    Modifier.padding(4.dp)
-                        .background(MaterialTheme.colors.primary, CircleShape)
-                        .pointerHoverIcon(PointerIconDefaults.Default)
-                        .then(Modifier.size(32.dp)),
+                    Modifier.padding(4.dp),
                 ) {
                     if (image == null) {
-                        Icon(Icons.Filled.Add, i18n("access.attachment_add"), Modifier.size(24.dp), Color.White)
+                        Icon(Icons.Filled.Add, i18n("access.attachment_add"), Modifier.size(24.dp))
                     } else {
-                        Icon(Icons.Filled.Close, i18n("access.attachment_remove"), Modifier.size(24.dp), Color.White)
+                        Icon(Icons.Filled.Close, i18n("access.attachment_remove"), Modifier.size(24.dp))
                     }
                 }
             },

src/main/kotlin/org/briarproject/briar/desktop/ui/ColoredIconButton.kt

+/*
+ * Briar Desktop
+ * Copyright (C) 2021-2022 The Briar Project
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+package org.briarproject.briar.desktop.ui
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material.IconButton
+import androidx.compose.material.LocalContentAlpha
+import androidx.compose.material.LocalContentColor
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.contentColorFor
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.remember
+import androidx.compose.ui.ExperimentalComposeUiApi
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.input.pointer.PointerIconDefaults
+import androidx.compose.ui.input.pointer.pointerHoverIcon
+import androidx.compose.ui.unit.dp
+
+@OptIn(ExperimentalComposeUiApi::class)
+@Composable
+fun ColoredIconButton(
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier,
+    color: Color = MaterialTheme.colors.primary,
+    contentColor: Color = contentColorFor(color),
+    enabled: Boolean = true,
+    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
+    content: @Composable () -> Unit
+) = IconButton(
+    onClick = onClick,
+    modifier = modifier
+        .pointerHoverIcon(PointerIconDefaults.Default)
+        .background(color, CircleShape)
+        .then(Modifier.size(32.dp)),
+    enabled = enabled,
+    interactionSource = interactionSource
+) {
+    CompositionLocalProvider(
+        LocalContentColor provides contentColor,
+        LocalContentAlpha provides 1f,
+        content = content
+    )
+}