Fix button colors

This commit is contained in:
Andrew 2024-06-21 11:25:13 +09:30
parent 7c523a1ead
commit b7de36b694
10 changed files with 87 additions and 50 deletions

View File

@ -17,7 +17,6 @@ import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.tooling.preview.PreviewParameter
import androidx.compose.ui.unit.dp
import network.loki.messenger.R
import org.thoughtcrime.securesms.ui.LocalDimensions
import org.thoughtcrime.securesms.ui.PreviewTheme
@ -25,7 +24,7 @@ import org.thoughtcrime.securesms.ui.SessionColorsParameterProvider
import org.thoughtcrime.securesms.ui.SessionShieldIcon
import org.thoughtcrime.securesms.ui.color.Colors
import org.thoughtcrime.securesms.ui.color.LocalColors
import org.thoughtcrime.securesms.ui.components.SlimOutlineButton
import org.thoughtcrime.securesms.ui.components.SlimPrimaryOutlineButton
import org.thoughtcrime.securesms.ui.contentDescription
import org.thoughtcrime.securesms.ui.h8
import org.thoughtcrime.securesms.ui.small
@ -63,13 +62,12 @@ internal fun SeedReminder(startRecoveryPasswordActivity: () -> Unit) {
)
}
Spacer(Modifier.width(LocalDimensions.current.xxsMargin))
SlimOutlineButton(
SlimPrimaryOutlineButton(
text = stringResource(R.string.continue_2),
modifier = Modifier
.align(Alignment.CenterVertically)
.contentDescription(R.string.AccessibilityId_reveal_recovery_phrase_button),
color = LocalColors.current.buttonOutline,
onClick = { startRecoveryPasswordActivity() }
onClick = startRecoveryPasswordActivity
)
}
}

View File

@ -23,7 +23,7 @@ import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import kotlinx.coroutines.flow.Flow
import network.loki.messenger.R
import org.thoughtcrime.securesms.onboarding.ui.ContinueButton
import org.thoughtcrime.securesms.onboarding.ui.ContinuePrimaryOutlineButton
import org.thoughtcrime.securesms.ui.LocalDimensions
import org.thoughtcrime.securesms.ui.PreviewTheme
import org.thoughtcrime.securesms.ui.base
@ -115,6 +115,6 @@ private fun RecoveryPassword(state: State, onChange: (String) -> Unit = {}, onCo
Spacer(modifier = Modifier.height(LocalDimensions.current.smallItemSpacing))
Spacer(Modifier.weight(2f))
ContinueButton(modifier = Modifier.align(Alignment.CenterHorizontally), onContinue)
ContinuePrimaryOutlineButton(modifier = Modifier.align(Alignment.CenterHorizontally), onContinue)
}
}

View File

@ -20,7 +20,7 @@ import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.tooling.preview.PreviewParameter
import androidx.compose.ui.unit.dp
import network.loki.messenger.R
import org.thoughtcrime.securesms.onboarding.ui.ContinueButton
import org.thoughtcrime.securesms.onboarding.ui.ContinuePrimaryOutlineButton
import org.thoughtcrime.securesms.ui.LocalDimensions
import org.thoughtcrime.securesms.ui.PreviewTheme
import org.thoughtcrime.securesms.ui.SessionColorsParameterProvider
@ -70,7 +70,7 @@ internal fun MessageNotificationsScreen(
Spacer(Modifier.weight(1f))
ContinueButton(Modifier.align(Alignment.CenterHorizontally), onContinue)
ContinuePrimaryOutlineButton(Modifier.align(Alignment.CenterHorizontally), onContinue)
}
}

View File

@ -15,7 +15,7 @@ import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import network.loki.messenger.R
import org.thoughtcrime.securesms.onboarding.ui.ContinueButton
import org.thoughtcrime.securesms.onboarding.ui.ContinuePrimaryOutlineButton
import org.thoughtcrime.securesms.ui.LocalDimensions
import org.thoughtcrime.securesms.ui.PreviewTheme
import org.thoughtcrime.securesms.ui.base
@ -66,6 +66,6 @@ internal fun DisplayName(state: State, onChange: (String) -> Unit = {}, onContin
Spacer(modifier = Modifier.height(LocalDimensions.current.smallItemSpacing))
Spacer(Modifier.weight(2f))
ContinueButton(modifier = Modifier.align(Alignment.CenterHorizontally), onContinue)
ContinuePrimaryOutlineButton(modifier = Modifier.align(Alignment.CenterHorizontally), onContinue)
}
}

View File

@ -8,11 +8,12 @@ import androidx.compose.ui.res.stringResource
import network.loki.messenger.R
import org.thoughtcrime.securesms.ui.LocalDimensions
import org.thoughtcrime.securesms.ui.components.OutlineButton
import org.thoughtcrime.securesms.ui.components.PrimaryOutlineButton
import org.thoughtcrime.securesms.ui.contentDescription
@Composable
fun ContinueButton(modifier: Modifier, onContinue: () -> Unit) {
OutlineButton(
fun ContinuePrimaryOutlineButton(modifier: Modifier, onContinue: () -> Unit) {
PrimaryOutlineButton(
stringResource(R.string.continue_2),
modifier = modifier
.contentDescription(R.string.AccessibilityId_continue)

View File

@ -80,6 +80,8 @@ import org.thoughtcrime.securesms.ui.LocalDimensions
import org.thoughtcrime.securesms.ui.color.destructiveButtonColors
import org.thoughtcrime.securesms.ui.components.OutlineButton
import org.thoughtcrime.securesms.ui.components.OutlineCopyButton
import org.thoughtcrime.securesms.ui.components.PrimaryOutlineButton
import org.thoughtcrime.securesms.ui.components.PrimaryOutlineCopyButton
import org.thoughtcrime.securesms.ui.contentDescription
import org.thoughtcrime.securesms.ui.setThemedContent
import org.thoughtcrime.securesms.util.BitmapDecodingException
@ -390,13 +392,13 @@ class SettingsActivity : PassphraseRequiredActionBarActivity() {
.padding(top = LocalDimensions.current.xxxsMargin),
horizontalArrangement = Arrangement.spacedBy(LocalDimensions.current.smallItemSpacing),
) {
OutlineButton(
PrimaryOutlineButton(
stringResource(R.string.share),
modifier = Modifier.weight(1f),
onClick = { sendInvitationToUseSession() }
onClick = ::sendInvitationToUseSession
)
OutlineCopyButton(
PrimaryOutlineCopyButton(
modifier = Modifier.weight(1f),
onClick = ::copyPublicKey,
)

View File

@ -32,6 +32,8 @@ import org.thoughtcrime.securesms.ui.SessionShieldIcon
import org.thoughtcrime.securesms.ui.base
import org.thoughtcrime.securesms.ui.color.Colors
import org.thoughtcrime.securesms.ui.color.LocalColors
import org.thoughtcrime.securesms.ui.components.ButtonStyle
import org.thoughtcrime.securesms.ui.components.OutlineCopyButton
import org.thoughtcrime.securesms.ui.components.QrImage
import org.thoughtcrime.securesms.ui.components.SlimOutlineButton
import org.thoughtcrime.securesms.ui.components.SlimOutlineCopyButton

View File

@ -3,32 +3,32 @@ package org.thoughtcrime.securesms.ui.color
import androidx.compose.ui.graphics.Color
val classicDark0 = Color(0xff111111)
val classicDark0 = Color.Black
val classicDark1 = Color(0xff1B1B1B)
val classicDark2 = Color(0xff2D2D2D)
val classicDark3 = Color(0xff414141)
val classicDark4 = Color(0xff767676)
val classicDark5 = Color(0xffA1A2A1)
val classicDark6 = Color(0xffFFFFFF)
val classicDark6 = Color.White
val classicLight0 = Color(0xff000000)
val classicLight0 = Color.Black
val classicLight1 = Color(0xff6D6D6D)
val classicLight2 = Color(0xffA1A2A1)
val classicLight3 = Color(0xffDFDFDF)
val classicLight4 = Color(0xffF0F0F0)
val classicLight5 = Color(0xffF9F9F9)
val classicLight6 = Color(0xffFFFFFF)
val classicLight6 = Color.White
val oceanDark0 = Color(0xff000000)
val oceanDark0 = Color.Black
val oceanDark1 = Color(0xff1A1C28)
val oceanDark2 = Color(0xff252735)
val oceanDark3 = Color(0xff2B2D40)
val oceanDark4 = Color(0xff3D4A5D)
val oceanDark5 = Color(0xffA6A9CE)
val oceanDark6 = Color(0xff5CAACC)
val oceanDark7 = Color(0xffFFFFFF)
val oceanDark7 = Color.White
val oceanLight0 = Color(0xff000000)
val oceanLight0 = Color.Black
val oceanLight1 = Color(0xff19345D)
val oceanLight2 = Color(0xff6A6E90)
val oceanLight3 = Color(0xff5CAACC)

View File

@ -38,10 +38,21 @@ interface Colors {
val backgroundBubbleReceived: Color
val textBubbleReceived: Color
val backgroundBubbleSent: Color get() = primary
// buttonFill
val buttonFill: Color get() = text
val buttonFillText: Color get() = background
// primaryButtonFill
val primaryButtonFill: Color get() = if (isLight) buttonFill else primary
val primaryButtonFillText: Color
val primaryButtonFill: Color
val buttonFill: Color
val buttonOutline: Color
// buttonOutline
val buttonOutline get() = text
// primaryButtonOutline
val primaryButtonOutline get() = primaryButtonFill
val qrCodeContent: Color
val qrCodeBackground: Color
}
@ -58,10 +69,12 @@ data class ClassicDark(override val primary: Color = primaryGreen): Colors {
override val textBubbleSent = Color.Black
override val backgroundBubbleReceived = classicDark2
override val textBubbleReceived = Color.White
override val primaryButtonFillText = Color.Black
override val primaryButtonFill = primary
override val buttonFill = text
override val buttonOutline = primary
override val buttonFillText = text
override val primaryButtonFill = primary
override val primaryButtonFillText = Color.Black
override val qrCodeContent = background
override val qrCodeBackground = text
}
@ -78,10 +91,11 @@ data class ClassicLight(override val primary: Color = primaryGreen): Colors {
override val textBubbleSent = Color.Black
override val backgroundBubbleReceived = classicLight4
override val textBubbleReceived = classicLight4
override val primaryButtonFillText = Color.White
override val primaryButtonFill = classicLight0
override val buttonFill = classicLight0
override val buttonOutline = classicLight0
override val primaryButtonFill = classicLight0
override val primaryButtonFillText = Color.White
override val qrCodeContent = text
override val qrCodeBackground = backgroundSecondary
}
@ -98,10 +112,11 @@ data class OceanDark(override val primary: Color = primaryBlue): Colors {
override val textBubbleSent = Color.Black
override val backgroundBubbleReceived = oceanDark4
override val textBubbleReceived = oceanDark4
override val primaryButtonFillText = Color.Black
override val primaryButtonFill = primary
override val buttonFill = text
override val buttonOutline = primary
override val primaryButtonFill = primary
override val primaryButtonFillText = Color.Black
override val qrCodeContent = background
override val qrCodeBackground = text
}
@ -118,10 +133,11 @@ data class OceanLight(override val primary: Color = primaryBlue): Colors {
override val textBubbleSent = oceanLight1
override val backgroundBubbleReceived = oceanLight4
override val textBubbleReceived = oceanLight1
override val primaryButtonFillText = Color.White
override val primaryButtonFill = oceanLight1
override val buttonFill = oceanLight1
override val buttonOutline = oceanLight1
override val primaryButtonFill = oceanLight1
override val primaryButtonFillText = Color.White
override val qrCodeContent = text
override val qrCodeBackground = backgroundSecondary
}

View File

@ -10,11 +10,9 @@ import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.interaction.PressInteraction
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.ExperimentalLayoutApi
import androidx.compose.foundation.layout.FlowRow
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.RowScope
import androidx.compose.foundation.layout.heightIn
import androidx.compose.foundation.layout.padding
@ -113,11 +111,11 @@ fun Button(
Button(text, onClick, ButtonType.PrimaryFill, modifier, enabled)
}
@Composable fun OutlineButton(text: String, modifier: Modifier = Modifier, color: Color = LocalColors.current.buttonOutline, enabled: Boolean = true, onClick: () -> Unit) {
@Composable fun OutlineButton(text: String, modifier: Modifier = Modifier, color: Color = LocalColors.current.text, enabled: Boolean = true, onClick: () -> Unit) {
Button(text, onClick, ButtonType.Outline(color), modifier, enabled)
}
@Composable fun OutlineButton(modifier: Modifier = Modifier, color: Color = LocalColors.current.buttonOutline, enabled: Boolean = true, onClick: () -> Unit, content: @Composable RowScope.() -> Unit) {
@Composable fun OutlineButton(modifier: Modifier = Modifier, color: Color = LocalColors.current.text, enabled: Boolean = true, onClick: () -> Unit, content: @Composable RowScope.() -> Unit) {
Button(
onClick = onClick,
type = ButtonType.Outline(color),
@ -128,7 +126,7 @@ fun Button(
}
@Composable fun PrimaryOutlineButton(text: String, modifier: Modifier = Modifier, enabled: Boolean = true, onClick: () -> Unit) {
Button(text, onClick, ButtonType.Outline(LocalColors.current.primary), modifier, enabled)
Button(text, onClick, ButtonType.Outline(LocalColors.current.primaryButtonFill), modifier, enabled)
}
@Composable fun SlimOutlineButton(onClick: () -> Unit, modifier: Modifier = Modifier, color: Color = LocalColors.current.text, enabled: Boolean = true, content: @Composable RowScope.() -> Unit) {
@ -142,6 +140,19 @@ fun Button(
Button(text, onClick, ButtonType.Outline(color), modifier, enabled, ButtonStyle.Slim)
}
@Composable fun SlimPrimaryOutlineButton(text: String, modifier: Modifier = Modifier, enabled: Boolean = true, onClick: () -> Unit) {
Button(text, onClick, ButtonType.Outline(LocalColors.current.primaryButtonOutline), modifier, enabled, ButtonStyle.Slim)
}
@Composable
fun PrimaryOutlineCopyButton(
modifier: Modifier = Modifier,
style: ButtonStyle = ButtonStyle.Large,
onClick: () -> Unit
) {
OutlineCopyButton(modifier, style, LocalColors.current.primaryButtonOutline, onClick)
}
@Composable
fun SlimOutlineCopyButton(
modifier: Modifier = Modifier,
@ -155,7 +166,7 @@ fun SlimOutlineCopyButton(
fun OutlineCopyButton(
modifier: Modifier = Modifier,
style: ButtonStyle = ButtonStyle.Large,
color: Color = LocalColors.current.buttonOutline,
color: Color = LocalColors.current.text,
onClick: () -> Unit
) {
val interactionSource = remember { MutableInteractionSource() }
@ -167,14 +178,19 @@ fun OutlineCopyButton(
type = ButtonType.Outline(color),
onClick = onClick
) {
TemporaryClickedContent(
interactionSource = interactionSource,
content = { Text(stringResource(R.string.copy)) },
temporaryContent = { Text(stringResource(R.string.copied)) }
)
CopyButtonContent(interactionSource)
}
}
@Composable
fun CopyButtonContent(interactionSource: MutableInteractionSource) {
TemporaryClickedContent(
interactionSource = interactionSource,
content = { Text(stringResource(R.string.copy)) },
temporaryContent = { Text(stringResource(R.string.copied)) }
)
}
@Composable
fun TemporaryClickedContent(
interactionSource: MutableInteractionSource,
@ -285,11 +301,13 @@ private fun VariousButtons(
PrimaryFillButton("Primary Fill Disabled", enabled = false) {}
FillButton("Fill Button") {}
FillButton("Fill Button Disabled", enabled = false) {}
PrimaryOutlineButton("Primary Outline Button") {}
PrimaryOutlineButton("Primary Outline Disabled", enabled = false) {}
OutlineButton("Outline Button") {}
OutlineButton("Outline Button Disabled", enabled = false) {}
SlimOutlineButton("Slim Outline") {}
SlimOutlineButton("Slim Outline Disabled", enabled = false) {}
SlimOutlineButton("Slim Primary", color = LocalColors.current.buttonOutline) {}
SlimOutlineButton("Slim Primary", color = LocalColors.current.primaryButtonFill) {}
SlimOutlineButton("Slim Danger", color = LocalColors.current.danger) {}
BorderlessButton("Borderless Button") {}
BorderlessButton("Borderless Secondary", color = LocalColors.current.textSecondary) {}