Add question icon to help button

app/src/main/java/org/thoughtcrime/securesms/conversation/newmessage/NewMessageFragment.kt

@@ -10,10 +10,12 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.pager.HorizontalPager
 import androidx.compose.foundation.pager.rememberPagerState
+import androidx.compose.material.LocalContentAlpha
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Text
 import androidx.compose.material.primarySurface
@@ -47,11 +49,13 @@ import org.thoughtcrime.securesms.dependencies.DatabaseComponent
 import org.thoughtcrime.securesms.showOpenUrlDialog
 import org.thoughtcrime.securesms.ui.AppTheme
 import org.thoughtcrime.securesms.ui.LoadingArcOr
+import org.thoughtcrime.securesms.ui.LocalDimensions
 import org.thoughtcrime.securesms.ui.PreviewTheme
 import org.thoughtcrime.securesms.ui.ThemeResPreviewParameterProvider
 import org.thoughtcrime.securesms.ui.baseBold
+import org.thoughtcrime.securesms.ui.classicDarkColors
 import org.thoughtcrime.securesms.ui.components.AppBar
-import org.thoughtcrime.securesms.ui.components.BorderlessButtonSecondary
+import org.thoughtcrime.securesms.ui.components.BorderlessButtonWithIcon
 import org.thoughtcrime.securesms.ui.components.MaybeScanQrCode
 import org.thoughtcrime.securesms.ui.components.OutlineButton
 import org.thoughtcrime.securesms.ui.components.SessionOutlinedTextField
@@ -153,7 +157,7 @@ fun EnterAccountId(
     ) {
         SessionOutlinedTextField(
             text = state.newMessageIdOrOns,
-            modifier = Modifier.padding(horizontal = 64.dp)
+            modifier = Modifier.padding(horizontal = LocalDimensions.current.marginSmall)
                 .contentDescription("Session id input box"),
             placeholder = stringResource(R.string.accountIdOrOnsEnter),
             onChange = callbacks::onChange,
@@ -163,7 +167,12 @@ fun EnterAccountId(
         if (state.error == null) {
             BorderlessButtonWithIcon(
                 text = stringResource(R.string.messageNewDescription),
-                modifier = Modifier.contentDescription(R.string.AccessibilityId_help_desk_link)
+                iconRes = R.drawable.ic_circle_question_mark,
+                contentColor = classicDarkColors[5],
+                modifier = Modifier
+                    .contentDescription(R.string.AccessibilityId_help_desk_link)
+                    .fillMaxWidth()
+                    .padding(horizontal = LocalDimensions.current.marginMedium),
             ) { onHelp() }
         }
 

app/src/main/java/org/thoughtcrime/securesms/onboarding/LandingActivity.kt

@@ -52,7 +52,6 @@ import org.thoughtcrime.securesms.ui.LocalDimensions
 import org.thoughtcrime.securesms.ui.PreviewTheme
 import org.thoughtcrime.securesms.ui.ThemeResPreviewParameterProvider
 import org.thoughtcrime.securesms.ui.classicDarkColors
-import org.thoughtcrime.securesms.ui.components.BorderlessButton
 import org.thoughtcrime.securesms.ui.components.BorderlessHtmlButton
 import org.thoughtcrime.securesms.ui.components.FilledButton
 import org.thoughtcrime.securesms.ui.components.OutlineButton

app/src/main/java/org/thoughtcrime/securesms/preferences/SettingsActivity.kt

@@ -23,8 +23,6 @@ import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.DisposableEffect
 import androidx.compose.runtime.getValue
@@ -80,11 +78,9 @@ import org.thoughtcrime.securesms.ui.Cell
 import org.thoughtcrime.securesms.ui.Divider
 import org.thoughtcrime.securesms.ui.ItemButton
 import org.thoughtcrime.securesms.ui.ItemButtonWithDrawable
-import org.thoughtcrime.securesms.ui.baseBold
+import org.thoughtcrime.securesms.ui.LocalDimensions
 import org.thoughtcrime.securesms.ui.components.OutlineButton
 import org.thoughtcrime.securesms.ui.components.OutlineCopyButton
-import org.thoughtcrime.securesms.ui.components.OutlineTemporaryStateButton
-import org.thoughtcrime.securesms.ui.contentDescription
 import org.thoughtcrime.securesms.ui.destructiveButtonColors
 import org.thoughtcrime.securesms.util.BitmapDecodingException
 import org.thoughtcrime.securesms.util.BitmapUtil
@@ -392,9 +388,9 @@ class SettingsActivity : PassphraseRequiredActionBarActivity() {
         Column {
             Row(
                 modifier = Modifier
-                    .padding(horizontal = 24.dp)
+                    .padding(horizontal = LocalDimensions.current.marginSmall)
-                    .padding(top = 8.dp),
+                    .padding(top = LocalDimensions.current.marginTiny),
-                horizontalArrangement = Arrangement.spacedBy(16.dp),
+                horizontalArrangement = Arrangement.spacedBy(LocalDimensions.current.itemSpacingSmall),
             ) {
                 OutlineButton(
                     stringResource(R.string.share),

app/src/main/java/org/thoughtcrime/securesms/ui/components/Button.kt

@@ -1,8 +1,10 @@
 package org.thoughtcrime.securesms.ui.components
 
+import androidx.annotation.DrawableRes
 import androidx.annotation.StringRes
 import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.interaction.PressInteraction
 import androidx.compose.foundation.layout.height
@@ -11,6 +13,7 @@ import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.ButtonDefaults
 import androidx.compose.material.ContentAlpha
+import androidx.compose.material.Icon
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.OutlinedButton
 import androidx.compose.material.Text
@@ -24,7 +27,9 @@ import androidx.compose.runtime.setValue
 import androidx.compose.runtime.staticCompositionLocalOf
 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.TextStyle
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import kotlinx.coroutines.delay
@@ -229,6 +234,26 @@ fun BorderlessButton(
     ) { content() }
 }
 
+@Composable
+fun BorderlessButtonWithIcon(
+    text: String,
+    @DrawableRes iconRes: Int,
+    modifier: Modifier = Modifier,
+    style: TextStyle = MaterialTheme.typography.baseBold,
+    contentColor: Color = MaterialTheme.colors.onBackground,
+    backgroundColor: Color = Color.Transparent,
+    onClick: () -> Unit
+) {
+    BorderlessButton(
+        modifier = modifier,
+        contentColor = contentColor,
+        backgroundColor = backgroundColor,
+        onClick = onClick
+    ) {
+        AnnotatedTextWithIcon(text, iconRes, style = style)
+    }
+}
+
 @Composable
 fun BorderlessHtmlButton(
     textId: Int,

app/src/main/java/org/thoughtcrime/securesms/ui/components/Text.kt

@@ -1,5 +1,6 @@
 package org.thoughtcrime.securesms.ui.components
 
+import androidx.annotation.DrawableRes
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
@@ -16,8 +17,10 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.Placeholder
 import androidx.compose.ui.text.PlaceholderVerticalAlign
+import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.buildAnnotatedString
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.Dp
@@ -78,10 +81,7 @@ fun AnnotatedTextWithIcon(
     text: String,
     icon: ImageVector,
     modifier: Modifier = Modifier,
-    iconTint: Color = Color.Unspecified,
+    style: TextStyle = MaterialTheme.typography.base
-    iconDescription: String = "",
-    iconSize: TextUnit = 12.sp,
-    textWidth: Dp = 100.dp
 ) {
     val myId = "inlineContent"
     val annotatedText = buildAnnotatedString {
@@ -91,15 +91,59 @@ fun AnnotatedTextWithIcon(
 
     val inlineContent = mapOf(
         myId to Placeholder(
-            width = iconSize,
+            width = TextUnit.Unspecified,
-            height = iconSize,
+            height = TextUnit.Unspecified,
             placeholderVerticalAlign = PlaceholderVerticalAlign.AboveBaseline
-        ).let { InlineTextContent(it) { Icon(icon, iconDescription, tint = iconTint) } }
+        ).let { InlineTextContent(it) { Icon(icon, contentDescription = null) } }
     )
 
     Text(
         text = annotatedText,
-        modifier = modifier.width(textWidth),
+        modifier = modifier,
+        inlineContent = inlineContent,
+        style = style
+    )
+}
+
+@Composable
+fun AnnotatedTextWithIcon(
+    text: String,
+    @DrawableRes iconRes: Int,
+    modifier: Modifier = Modifier,
+    style: TextStyle = MaterialTheme.typography.base,
+    iconTint: Color = Color.Unspecified,
+    iconSize: TextUnit = 12.sp
+) {
+    val myId = "inlineContent"
+    val annotated = buildAnnotatedString {
+        append(text)
+        appendInlineContent(myId, "[icon]")
+    }
+
+    val inlineContent = mapOf(
+        Pair(
+            myId,
+            InlineTextContent(
+                Placeholder(
+                    width = iconSize,
+                    height = iconSize,
+                    placeholderVerticalAlign = PlaceholderVerticalAlign.AboveBaseline
+                )
+            ) {
+                Icon(
+                    painter = painterResource(id = iconRes),
+                    contentDescription = null,
+                    modifier = Modifier.padding(1.dp),
+                    tint = iconTint
+                )
+            }
+        )
+    )
+
+    Text(
+        text = annotated,
+        modifier = modifier.fillMaxWidth(),
+        style = style,
         inlineContent = inlineContent
     )
 }