mirror of
https://github.com/bitwarden/android.git
synced 2024-12-18 07:11:51 +03:00
Add shapes to the BitwardenTheme (#4052)
This commit is contained in:
parent
cda4e47414
commit
ccb52ae6c5
18 changed files with 76 additions and 21 deletions
|
@ -58,6 +58,7 @@ fun BitwardenOverflowActionItem(
|
||||||
modifier = Modifier.testTag(tag = "HeaderBarOptionsButton"),
|
modifier = Modifier.testTag(tag = "HeaderBarOptionsButton"),
|
||||||
)
|
)
|
||||||
DropdownMenu(
|
DropdownMenu(
|
||||||
|
shape = BitwardenTheme.shapes.menu,
|
||||||
expanded = isOverflowMenuVisible,
|
expanded = isOverflowMenuVisible,
|
||||||
onDismissRequest = { isOverflowMenuVisible = false },
|
onDismissRequest = { isOverflowMenuVisible = false },
|
||||||
offset = DpOffset(x = (-12).dp, y = 0.dp),
|
offset = DpOffset(x = (-12).dp, y = 0.dp),
|
||||||
|
|
|
@ -12,7 +12,6 @@ import androidx.compose.foundation.layout.height
|
||||||
import androidx.compose.foundation.layout.offset
|
import androidx.compose.foundation.layout.offset
|
||||||
import androidx.compose.foundation.layout.padding
|
import androidx.compose.foundation.layout.padding
|
||||||
import androidx.compose.foundation.layout.width
|
import androidx.compose.foundation.layout.width
|
||||||
import androidx.compose.foundation.shape.RoundedCornerShape
|
|
||||||
import androidx.compose.material3.Card
|
import androidx.compose.material3.Card
|
||||||
import androidx.compose.material3.CardDefaults
|
import androidx.compose.material3.CardDefaults
|
||||||
import androidx.compose.material3.Text
|
import androidx.compose.material3.Text
|
||||||
|
@ -52,7 +51,7 @@ fun BitwardenActionCard(
|
||||||
) {
|
) {
|
||||||
Card(
|
Card(
|
||||||
modifier = modifier,
|
modifier = modifier,
|
||||||
shape = RoundedCornerShape(12.dp),
|
shape = BitwardenTheme.shapes.actionCard,
|
||||||
colors = bitwardenCardColors(),
|
colors = bitwardenCardColors(),
|
||||||
elevation = CardDefaults.elevatedCardElevation(),
|
elevation = CardDefaults.elevatedCardElevation(),
|
||||||
border = BorderStroke(width = 1.dp, color = BitwardenTheme.colorScheme.stroke.border),
|
border = BorderStroke(width = 1.dp, color = BitwardenTheme.colorScheme.stroke.border),
|
||||||
|
|
|
@ -11,7 +11,6 @@ import androidx.compose.foundation.layout.height
|
||||||
import androidx.compose.foundation.layout.padding
|
import androidx.compose.foundation.layout.padding
|
||||||
import androidx.compose.foundation.layout.size
|
import androidx.compose.foundation.layout.size
|
||||||
import androidx.compose.foundation.layout.width
|
import androidx.compose.foundation.layout.width
|
||||||
import androidx.compose.foundation.shape.RoundedCornerShape
|
|
||||||
import androidx.compose.material3.Card
|
import androidx.compose.material3.Card
|
||||||
import androidx.compose.material3.CardDefaults
|
import androidx.compose.material3.CardDefaults
|
||||||
import androidx.compose.material3.Icon
|
import androidx.compose.material3.Icon
|
||||||
|
@ -41,7 +40,7 @@ fun BitwardenActionCardSmall(
|
||||||
) {
|
) {
|
||||||
Card(
|
Card(
|
||||||
onClick = onCardClicked,
|
onClick = onCardClicked,
|
||||||
shape = RoundedCornerShape(size = 12.dp),
|
shape = BitwardenTheme.shapes.actionCard,
|
||||||
modifier = modifier,
|
modifier = modifier,
|
||||||
colors = bitwardenCardColors(),
|
colors = bitwardenCardColors(),
|
||||||
elevation = CardDefaults.elevatedCardElevation(),
|
elevation = CardDefaults.elevatedCardElevation(),
|
||||||
|
|
|
@ -2,7 +2,6 @@ package com.x8bit.bitwarden.ui.platform.components.card
|
||||||
|
|
||||||
import androidx.compose.foundation.background
|
import androidx.compose.foundation.background
|
||||||
import androidx.compose.foundation.layout.padding
|
import androidx.compose.foundation.layout.padding
|
||||||
import androidx.compose.foundation.shape.RoundedCornerShape
|
|
||||||
import androidx.compose.material3.Text
|
import androidx.compose.material3.Text
|
||||||
import androidx.compose.runtime.Composable
|
import androidx.compose.runtime.Composable
|
||||||
import androidx.compose.ui.Modifier
|
import androidx.compose.ui.Modifier
|
||||||
|
@ -30,7 +29,7 @@ fun BitwardenInfoCalloutCard(
|
||||||
modifier = modifier
|
modifier = modifier
|
||||||
.background(
|
.background(
|
||||||
color = BitwardenTheme.colorScheme.background.tertiary,
|
color = BitwardenTheme.colorScheme.background.tertiary,
|
||||||
shape = RoundedCornerShape(size = 8.dp),
|
shape = BitwardenTheme.shapes.infoCallout,
|
||||||
)
|
)
|
||||||
.padding(all = 16.dp),
|
.padding(all = 16.dp),
|
||||||
)
|
)
|
||||||
|
|
|
@ -59,6 +59,7 @@ fun BitwardenBasicDialog(
|
||||||
modifier = Modifier.testTag("AlertContentText"),
|
modifier = Modifier.testTag("AlertContentText"),
|
||||||
)
|
)
|
||||||
},
|
},
|
||||||
|
shape = BitwardenTheme.shapes.dialog,
|
||||||
containerColor = BitwardenTheme.colorScheme.background.primary,
|
containerColor = BitwardenTheme.colorScheme.background.primary,
|
||||||
iconContentColor = BitwardenTheme.colorScheme.icon.secondary,
|
iconContentColor = BitwardenTheme.colorScheme.icon.secondary,
|
||||||
titleContentColor = BitwardenTheme.colorScheme.text.primary,
|
titleContentColor = BitwardenTheme.colorScheme.text.primary,
|
||||||
|
|
|
@ -105,6 +105,7 @@ fun BitwardenDateSelectButton(
|
||||||
initialSelectedDateMillis = currentZonedDateTime.orNow().toInstant().toEpochMilli(),
|
initialSelectedDateMillis = currentZonedDateTime.orNow().toInstant().toEpochMilli(),
|
||||||
)
|
)
|
||||||
DatePickerDialog(
|
DatePickerDialog(
|
||||||
|
shape = BitwardenTheme.shapes.dialog,
|
||||||
colors = bitwardenDatePickerColors(),
|
colors = bitwardenDatePickerColors(),
|
||||||
onDismissRequest = { shouldShowDialog = false },
|
onDismissRequest = { shouldShowDialog = false },
|
||||||
confirmButton = {
|
confirmButton = {
|
||||||
|
|
|
@ -6,7 +6,6 @@ import androidx.compose.foundation.layout.Column
|
||||||
import androidx.compose.foundation.layout.fillMaxWidth
|
import androidx.compose.foundation.layout.fillMaxWidth
|
||||||
import androidx.compose.foundation.layout.padding
|
import androidx.compose.foundation.layout.padding
|
||||||
import androidx.compose.foundation.layout.wrapContentHeight
|
import androidx.compose.foundation.layout.wrapContentHeight
|
||||||
import androidx.compose.foundation.shape.RoundedCornerShape
|
|
||||||
import androidx.compose.material3.Card
|
import androidx.compose.material3.Card
|
||||||
import androidx.compose.material3.CardDefaults
|
import androidx.compose.material3.CardDefaults
|
||||||
import androidx.compose.material3.Text
|
import androidx.compose.material3.Text
|
||||||
|
@ -49,7 +48,7 @@ fun BitwardenLoadingDialog(
|
||||||
),
|
),
|
||||||
) {
|
) {
|
||||||
Card(
|
Card(
|
||||||
shape = RoundedCornerShape(28.dp),
|
shape = BitwardenTheme.shapes.dialog,
|
||||||
colors = CardDefaults.cardColors(
|
colors = CardDefaults.cardColors(
|
||||||
containerColor = BitwardenTheme.colorScheme.background.primary,
|
containerColor = BitwardenTheme.colorScheme.background.primary,
|
||||||
contentColor = BitwardenTheme.colorScheme.text.primary,
|
contentColor = BitwardenTheme.colorScheme.text.primary,
|
||||||
|
|
|
@ -83,6 +83,7 @@ fun BitwardenMasterPasswordDialog(
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
shape = BitwardenTheme.shapes.dialog,
|
||||||
containerColor = BitwardenTheme.colorScheme.background.primary,
|
containerColor = BitwardenTheme.colorScheme.background.primary,
|
||||||
iconContentColor = BitwardenTheme.colorScheme.icon.secondary,
|
iconContentColor = BitwardenTheme.colorScheme.icon.secondary,
|
||||||
titleContentColor = BitwardenTheme.colorScheme.text.primary,
|
titleContentColor = BitwardenTheme.colorScheme.text.primary,
|
||||||
|
|
|
@ -69,6 +69,7 @@ fun BitwardenPinDialog(
|
||||||
autoFocus = true,
|
autoFocus = true,
|
||||||
)
|
)
|
||||||
},
|
},
|
||||||
|
shape = BitwardenTheme.shapes.dialog,
|
||||||
containerColor = BitwardenTheme.colorScheme.background.primary,
|
containerColor = BitwardenTheme.colorScheme.background.primary,
|
||||||
iconContentColor = BitwardenTheme.colorScheme.icon.secondary,
|
iconContentColor = BitwardenTheme.colorScheme.icon.secondary,
|
||||||
titleContentColor = BitwardenTheme.colorScheme.text.primary,
|
titleContentColor = BitwardenTheme.colorScheme.text.primary,
|
||||||
|
|
|
@ -7,7 +7,6 @@ import androidx.compose.foundation.layout.fillMaxWidth
|
||||||
import androidx.compose.foundation.layout.padding
|
import androidx.compose.foundation.layout.padding
|
||||||
import androidx.compose.foundation.layout.requiredHeightIn
|
import androidx.compose.foundation.layout.requiredHeightIn
|
||||||
import androidx.compose.foundation.rememberScrollState
|
import androidx.compose.foundation.rememberScrollState
|
||||||
import androidx.compose.foundation.shape.RoundedCornerShape
|
|
||||||
import androidx.compose.foundation.verticalScroll
|
import androidx.compose.foundation.verticalScroll
|
||||||
import androidx.compose.material3.Text
|
import androidx.compose.material3.Text
|
||||||
import androidx.compose.runtime.Composable
|
import androidx.compose.runtime.Composable
|
||||||
|
@ -62,7 +61,7 @@ fun BitwardenSelectionDialog(
|
||||||
// This background is necessary for the dialog to not be transparent.
|
// This background is necessary for the dialog to not be transparent.
|
||||||
.background(
|
.background(
|
||||||
color = BitwardenTheme.colorScheme.background.primary,
|
color = BitwardenTheme.colorScheme.background.primary,
|
||||||
shape = RoundedCornerShape(28.dp),
|
shape = BitwardenTheme.shapes.dialog,
|
||||||
),
|
),
|
||||||
horizontalAlignment = Alignment.End,
|
horizontalAlignment = Alignment.End,
|
||||||
) {
|
) {
|
||||||
|
|
|
@ -85,6 +85,7 @@ fun BitwardenTextEntryDialog(
|
||||||
},
|
},
|
||||||
)
|
)
|
||||||
},
|
},
|
||||||
|
shape = BitwardenTheme.shapes.dialog,
|
||||||
containerColor = BitwardenTheme.colorScheme.background.primary,
|
containerColor = BitwardenTheme.colorScheme.background.primary,
|
||||||
iconContentColor = BitwardenTheme.colorScheme.icon.secondary,
|
iconContentColor = BitwardenTheme.colorScheme.icon.secondary,
|
||||||
titleContentColor = BitwardenTheme.colorScheme.text.primary,
|
titleContentColor = BitwardenTheme.colorScheme.text.primary,
|
||||||
|
|
|
@ -9,7 +9,6 @@ import androidx.compose.foundation.layout.fillMaxWidth
|
||||||
import androidx.compose.foundation.layout.height
|
import androidx.compose.foundation.layout.height
|
||||||
import androidx.compose.foundation.layout.padding
|
import androidx.compose.foundation.layout.padding
|
||||||
import androidx.compose.foundation.layout.width
|
import androidx.compose.foundation.layout.width
|
||||||
import androidx.compose.foundation.shape.RoundedCornerShape
|
|
||||||
import androidx.compose.material3.ExperimentalMaterial3Api
|
import androidx.compose.material3.ExperimentalMaterial3Api
|
||||||
import androidx.compose.material3.Surface
|
import androidx.compose.material3.Surface
|
||||||
import androidx.compose.material3.Text
|
import androidx.compose.material3.Text
|
||||||
|
@ -144,7 +143,7 @@ private fun TimePickerDialog(
|
||||||
properties = DialogProperties(usePlatformDefaultWidth = false),
|
properties = DialogProperties(usePlatformDefaultWidth = false),
|
||||||
) {
|
) {
|
||||||
Surface(
|
Surface(
|
||||||
shape = RoundedCornerShape(28.dp),
|
shape = BitwardenTheme.shapes.dialog,
|
||||||
color = BitwardenTheme.colorScheme.background.primary,
|
color = BitwardenTheme.colorScheme.background.primary,
|
||||||
contentColor = BitwardenTheme.colorScheme.text.primary,
|
contentColor = BitwardenTheme.colorScheme.text.primary,
|
||||||
modifier = Modifier
|
modifier = Modifier
|
||||||
|
|
|
@ -12,7 +12,6 @@ import androidx.compose.foundation.layout.padding
|
||||||
import androidx.compose.foundation.layout.requiredHeightIn
|
import androidx.compose.foundation.layout.requiredHeightIn
|
||||||
import androidx.compose.foundation.layout.requiredWidthIn
|
import androidx.compose.foundation.layout.requiredWidthIn
|
||||||
import androidx.compose.foundation.rememberScrollState
|
import androidx.compose.foundation.rememberScrollState
|
||||||
import androidx.compose.foundation.shape.RoundedCornerShape
|
|
||||||
import androidx.compose.foundation.verticalScroll
|
import androidx.compose.foundation.verticalScroll
|
||||||
import androidx.compose.material3.Text
|
import androidx.compose.material3.Text
|
||||||
import androidx.compose.runtime.Composable
|
import androidx.compose.runtime.Composable
|
||||||
|
@ -83,7 +82,7 @@ fun BitwardenTwoButtonDialog(
|
||||||
// This background is necessary for the dialog to not be transparent.
|
// This background is necessary for the dialog to not be transparent.
|
||||||
.background(
|
.background(
|
||||||
color = BitwardenTheme.colorScheme.background.primary,
|
color = BitwardenTheme.colorScheme.background.primary,
|
||||||
shape = RoundedCornerShape(28.dp),
|
shape = BitwardenTheme.shapes.dialog,
|
||||||
),
|
),
|
||||||
horizontalAlignment = Alignment.End,
|
horizontalAlignment = Alignment.End,
|
||||||
) {
|
) {
|
||||||
|
|
|
@ -24,6 +24,7 @@ fun BitwardenSnackbarHost(
|
||||||
) {
|
) {
|
||||||
Snackbar(
|
Snackbar(
|
||||||
snackbarData = it,
|
snackbarData = it,
|
||||||
|
shape = BitwardenTheme.shapes.snackbar,
|
||||||
containerColor = BitwardenTheme.colorScheme.background.alert,
|
containerColor = BitwardenTheme.colorScheme.background.alert,
|
||||||
contentColor = BitwardenTheme.colorScheme.text.reversed,
|
contentColor = BitwardenTheme.colorScheme.text.reversed,
|
||||||
actionColor = BitwardenTheme.colorScheme.background.alert,
|
actionColor = BitwardenTheme.colorScheme.background.alert,
|
||||||
|
|
|
@ -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.dynamicBitwardenColorScheme
|
||||||
import com.x8bit.bitwarden.ui.platform.theme.color.lightBitwardenColorScheme
|
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.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.bitwardenTypography
|
import com.x8bit.bitwarden.ui.platform.theme.type.bitwardenTypography
|
||||||
import com.x8bit.bitwarden.ui.platform.theme.type.toMaterialTypography
|
import com.x8bit.bitwarden.ui.platform.theme.type.toMaterialTypography
|
||||||
|
@ -40,6 +42,14 @@ object BitwardenTheme {
|
||||||
@ReadOnlyComposable
|
@ReadOnlyComposable
|
||||||
get() = LocalBitwardenColorScheme.current
|
get() = LocalBitwardenColorScheme.current
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Retrieves the current [BitwardenShapes].
|
||||||
|
*/
|
||||||
|
val shapes: BitwardenShapes
|
||||||
|
@Composable
|
||||||
|
@ReadOnlyComposable
|
||||||
|
get() = LocalBitwardenShapes.current
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Retrieves the current [BitwardenTypography].
|
* Retrieves the current [BitwardenTypography].
|
||||||
*/
|
*/
|
||||||
|
@ -107,6 +117,7 @@ fun BitwardenTheme(
|
||||||
|
|
||||||
CompositionLocalProvider(
|
CompositionLocalProvider(
|
||||||
LocalBitwardenColorScheme provides bitwardenColorScheme,
|
LocalBitwardenColorScheme provides bitwardenColorScheme,
|
||||||
|
LocalBitwardenShapes provides bitwardenShapes,
|
||||||
LocalBitwardenTypography provides bitwardenTypography,
|
LocalBitwardenTypography provides bitwardenTypography,
|
||||||
) {
|
) {
|
||||||
MaterialTheme(
|
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.
|
* Provides access to the Bitwarden colors throughout the app.
|
||||||
*/
|
*/
|
||||||
val LocalBitwardenColorScheme: ProvidableCompositionLocal<BitwardenColorScheme> =
|
val LocalBitwardenColorScheme: ProvidableCompositionLocal<BitwardenColorScheme> =
|
||||||
compositionLocalOf { lightBitwardenColorScheme }
|
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 }
|
||||||
|
|
|
@ -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,
|
||||||
|
)
|
|
@ -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),
|
||||||
|
)
|
|
@ -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.platform.util.toFormattedPattern
|
||||||
import com.x8bit.bitwarden.ui.vault.feature.item.VaultItemState
|
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.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.VaultCardBrand
|
||||||
import com.x8bit.bitwarden.ui.vault.model.VaultLinkedFieldType
|
import com.x8bit.bitwarden.ui.vault.model.VaultLinkedFieldType
|
||||||
import com.x8bit.bitwarden.ui.vault.model.findVaultCardBrandWithNameOrNull
|
import com.x8bit.bitwarden.ui.vault.model.findVaultCardBrandWithNameOrNull
|
||||||
|
|
Loading…
Reference in a new issue