Add shapes to the BitwardenTheme (#4052)

This commit is contained in:
David Perez 2024-10-08 13:35:59 -05:00 committed by GitHub
parent cda4e47414
commit ccb52ae6c5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
18 changed files with 76 additions and 21 deletions

View file

@ -58,6 +58,7 @@ fun BitwardenOverflowActionItem(
modifier = Modifier.testTag(tag = "HeaderBarOptionsButton"),
)
DropdownMenu(
shape = BitwardenTheme.shapes.menu,
expanded = isOverflowMenuVisible,
onDismissRequest = { isOverflowMenuVisible = false },
offset = DpOffset(x = (-12).dp, y = 0.dp),

View file

@ -12,7 +12,6 @@ import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.Text
@ -52,7 +51,7 @@ fun BitwardenActionCard(
) {
Card(
modifier = modifier,
shape = RoundedCornerShape(12.dp),
shape = BitwardenTheme.shapes.actionCard,
colors = bitwardenCardColors(),
elevation = CardDefaults.elevatedCardElevation(),
border = BorderStroke(width = 1.dp, color = BitwardenTheme.colorScheme.stroke.border),

View file

@ -11,7 +11,6 @@ import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.Icon
@ -41,7 +40,7 @@ fun BitwardenActionCardSmall(
) {
Card(
onClick = onCardClicked,
shape = RoundedCornerShape(size = 12.dp),
shape = BitwardenTheme.shapes.actionCard,
modifier = modifier,
colors = bitwardenCardColors(),
elevation = CardDefaults.elevatedCardElevation(),

View file

@ -2,7 +2,6 @@ package com.x8bit.bitwarden.ui.platform.components.card
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
@ -30,7 +29,7 @@ fun BitwardenInfoCalloutCard(
modifier = modifier
.background(
color = BitwardenTheme.colorScheme.background.tertiary,
shape = RoundedCornerShape(size = 8.dp),
shape = BitwardenTheme.shapes.infoCallout,
)
.padding(all = 16.dp),
)

View file

@ -59,6 +59,7 @@ fun BitwardenBasicDialog(
modifier = Modifier.testTag("AlertContentText"),
)
},
shape = BitwardenTheme.shapes.dialog,
containerColor = BitwardenTheme.colorScheme.background.primary,
iconContentColor = BitwardenTheme.colorScheme.icon.secondary,
titleContentColor = BitwardenTheme.colorScheme.text.primary,

View file

@ -105,6 +105,7 @@ fun BitwardenDateSelectButton(
initialSelectedDateMillis = currentZonedDateTime.orNow().toInstant().toEpochMilli(),
)
DatePickerDialog(
shape = BitwardenTheme.shapes.dialog,
colors = bitwardenDatePickerColors(),
onDismissRequest = { shouldShowDialog = false },
confirmButton = {

View file

@ -6,7 +6,6 @@ import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.Text
@ -49,7 +48,7 @@ fun BitwardenLoadingDialog(
),
) {
Card(
shape = RoundedCornerShape(28.dp),
shape = BitwardenTheme.shapes.dialog,
colors = CardDefaults.cardColors(
containerColor = BitwardenTheme.colorScheme.background.primary,
contentColor = BitwardenTheme.colorScheme.text.primary,

View file

@ -83,6 +83,7 @@ fun BitwardenMasterPasswordDialog(
)
}
},
shape = BitwardenTheme.shapes.dialog,
containerColor = BitwardenTheme.colorScheme.background.primary,
iconContentColor = BitwardenTheme.colorScheme.icon.secondary,
titleContentColor = BitwardenTheme.colorScheme.text.primary,

View file

@ -69,6 +69,7 @@ fun BitwardenPinDialog(
autoFocus = true,
)
},
shape = BitwardenTheme.shapes.dialog,
containerColor = BitwardenTheme.colorScheme.background.primary,
iconContentColor = BitwardenTheme.colorScheme.icon.secondary,
titleContentColor = BitwardenTheme.colorScheme.text.primary,

View file

@ -7,7 +7,6 @@ import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.requiredHeightIn
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
@ -62,7 +61,7 @@ fun BitwardenSelectionDialog(
// This background is necessary for the dialog to not be transparent.
.background(
color = BitwardenTheme.colorScheme.background.primary,
shape = RoundedCornerShape(28.dp),
shape = BitwardenTheme.shapes.dialog,
),
horizontalAlignment = Alignment.End,
) {

View file

@ -85,6 +85,7 @@ fun BitwardenTextEntryDialog(
},
)
},
shape = BitwardenTheme.shapes.dialog,
containerColor = BitwardenTheme.colorScheme.background.primary,
iconContentColor = BitwardenTheme.colorScheme.icon.secondary,
titleContentColor = BitwardenTheme.colorScheme.text.primary,

View file

@ -9,7 +9,6 @@ import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
@ -144,7 +143,7 @@ private fun TimePickerDialog(
properties = DialogProperties(usePlatformDefaultWidth = false),
) {
Surface(
shape = RoundedCornerShape(28.dp),
shape = BitwardenTheme.shapes.dialog,
color = BitwardenTheme.colorScheme.background.primary,
contentColor = BitwardenTheme.colorScheme.text.primary,
modifier = Modifier

View file

@ -12,7 +12,6 @@ import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.requiredHeightIn
import androidx.compose.foundation.layout.requiredWidthIn
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
@ -83,7 +82,7 @@ fun BitwardenTwoButtonDialog(
// This background is necessary for the dialog to not be transparent.
.background(
color = BitwardenTheme.colorScheme.background.primary,
shape = RoundedCornerShape(28.dp),
shape = BitwardenTheme.shapes.dialog,
),
horizontalAlignment = Alignment.End,
) {

View file

@ -24,6 +24,7 @@ fun BitwardenSnackbarHost(
) {
Snackbar(
snackbarData = it,
shape = BitwardenTheme.shapes.snackbar,
containerColor = BitwardenTheme.colorScheme.background.alert,
contentColor = BitwardenTheme.colorScheme.text.reversed,
actionColor = BitwardenTheme.colorScheme.background.alert,

View file

@ -24,6 +24,8 @@ import com.x8bit.bitwarden.ui.platform.theme.color.darkBitwardenColorScheme
import com.x8bit.bitwarden.ui.platform.theme.color.dynamicBitwardenColorScheme
import com.x8bit.bitwarden.ui.platform.theme.color.lightBitwardenColorScheme
import com.x8bit.bitwarden.ui.platform.theme.color.toMaterialColorScheme
import com.x8bit.bitwarden.ui.platform.theme.shape.BitwardenShapes
import com.x8bit.bitwarden.ui.platform.theme.shape.bitwardenShapes
import com.x8bit.bitwarden.ui.platform.theme.type.BitwardenTypography
import com.x8bit.bitwarden.ui.platform.theme.type.bitwardenTypography
import com.x8bit.bitwarden.ui.platform.theme.type.toMaterialTypography
@ -40,6 +42,14 @@ object BitwardenTheme {
@ReadOnlyComposable
get() = LocalBitwardenColorScheme.current
/**
* Retrieves the current [BitwardenShapes].
*/
val shapes: BitwardenShapes
@Composable
@ReadOnlyComposable
get() = LocalBitwardenShapes.current
/**
* Retrieves the current [BitwardenTypography].
*/
@ -107,6 +117,7 @@ fun BitwardenTheme(
CompositionLocalProvider(
LocalBitwardenColorScheme provides bitwardenColorScheme,
LocalBitwardenShapes provides bitwardenShapes,
LocalBitwardenTypography provides bitwardenTypography,
) {
MaterialTheme(
@ -119,14 +130,20 @@ fun BitwardenTheme(
}
}
/**
* Provides access to the Bitwarden typography throughout the app.
*/
val LocalBitwardenTypography: ProvidableCompositionLocal<BitwardenTypography> =
compositionLocalOf { bitwardenTypography }
/**
* Provides access to the Bitwarden colors throughout the app.
*/
val LocalBitwardenColorScheme: ProvidableCompositionLocal<BitwardenColorScheme> =
compositionLocalOf { lightBitwardenColorScheme }
/**
* Provides access to the Bitwarden shapes throughout the app.
*/
val LocalBitwardenShapes: ProvidableCompositionLocal<BitwardenShapes> =
compositionLocalOf { bitwardenShapes }
/**
* Provides access to the Bitwarden typography throughout the app.
*/
val LocalBitwardenTypography: ProvidableCompositionLocal<BitwardenTypography> =
compositionLocalOf { bitwardenTypography }

View file

@ -0,0 +1,20 @@
package com.x8bit.bitwarden.ui.platform.theme.shape
import androidx.compose.foundation.shape.CornerBasedShape
import androidx.compose.runtime.Immutable
/**
* Defines all the shapes for the app.
*/
@Immutable
data class BitwardenShapes(
val actionCard: CornerBasedShape,
val coachmark: CornerBasedShape,
val content: CornerBasedShape,
val contentBottom: CornerBasedShape,
val contentTop: CornerBasedShape,
val dialog: CornerBasedShape,
val infoCallout: CornerBasedShape,
val menu: CornerBasedShape,
val snackbar: CornerBasedShape,
)

View file

@ -0,0 +1,19 @@
package com.x8bit.bitwarden.ui.platform.theme.shape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.ui.unit.dp
/**
* The default [BitwardenShapes] for the app.
*/
val bitwardenShapes: BitwardenShapes = BitwardenShapes(
actionCard = RoundedCornerShape(size = 12.dp),
coachmark = RoundedCornerShape(size = 8.dp),
content = RoundedCornerShape(size = 8.dp),
contentBottom = RoundedCornerShape(bottomStart = 8.dp, bottomEnd = 8.dp),
contentTop = RoundedCornerShape(topStart = 8.dp, topEnd = 8.dp),
dialog = RoundedCornerShape(size = 28.dp),
infoCallout = RoundedCornerShape(size = 8.dp),
menu = RoundedCornerShape(size = 4.dp),
snackbar = RoundedCornerShape(size = 8.dp),
)

View file

@ -20,7 +20,6 @@ import com.x8bit.bitwarden.ui.platform.base.util.orZeroWidthSpace
import com.x8bit.bitwarden.ui.platform.util.toFormattedPattern
import com.x8bit.bitwarden.ui.vault.feature.item.VaultItemState
import com.x8bit.bitwarden.ui.vault.feature.item.model.TotpCodeItemData
import com.x8bit.bitwarden.ui.vault.feature.vault.VaultState
import com.x8bit.bitwarden.ui.vault.model.VaultCardBrand
import com.x8bit.bitwarden.ui.vault.model.VaultLinkedFieldType
import com.x8bit.bitwarden.ui.vault.model.findVaultCardBrandWithNameOrNull