[Verify Session] Design fixes (#230)

* Design fixes.

* Make text in emoji items secondary color and the snackbar duration short again

* Try to make margins smaller on smaller displays

---------

Co-authored-by: Florian Renaud <florianr@element.io>
This commit is contained in:
Jorge Martin Espinosa 2023-03-23 15:54:44 +01:00 committed by GitHub
parent fb0acc9f51
commit 7d0d076657
44 changed files with 119 additions and 102 deletions

1
changelog.d/89.bugfix Normal file
View file

@ -0,0 +1 @@
Design fixes for the session verification flow and button components.

View file

@ -135,7 +135,7 @@ fun RoomListContent(
if (state.presentVerificationSuccessfulMessage) {
snackbarHostState.showSnackbar(
message = verificationCompleteMessage,
duration = SnackbarDuration.Short
duration = SnackbarDuration.Short,
)
state.eventSink(RoomListEvents.ClearSuccessfulVerificationMessage)
}
@ -194,8 +194,6 @@ fun RoomListContent(
SnackbarHost (snackbarHostState) { data ->
Snackbar(
snackbarData = data,
containerColor = MaterialTheme.colorScheme.surfaceVariant,
contentColor = MaterialTheme.colorScheme.primary
)
}
},

View file

@ -23,11 +23,11 @@ import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.defaultMinSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.systemBarsPadding
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.verticalScroll
@ -39,10 +39,13 @@ import androidx.compose.runtime.getValue
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.composed
import androidx.compose.ui.platform.LocalConfiguration
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.tooling.preview.PreviewParameter
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.google.accompanist.flowlayout.FlowRow
@ -82,16 +85,15 @@ fun VerifySelfSessionView(
derivedStateOf { verificationFlowStep != FlowStep.AwaitingOtherDeviceResponse && verificationFlowStep != FlowStep.Completed }
}
Surface {
Column(modifier = modifier.fillMaxWidth()) {
Column(modifier = modifier.systemBarsPadding()) {
Column(
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 20.dp)
.weight(1f)
.verticalScroll(rememberScrollState())
.padding(horizontal = 20.dp)
) {
HeaderContent(verificationFlowStep = verificationFlowStep)
Content(flowState = verificationFlowStep)
Content(modifier = Modifier.weight(1f), flowState = verificationFlowStep)
}
if (buttonsVisible) {
BottomMenu(screenState = state, goBack = ::goBackAndCancelIfNeeded)
@ -120,8 +122,9 @@ internal fun HeaderContent(verificationFlowStep: FlowStep, modifier: Modifier =
FlowStep.AwaitingOtherDeviceResponse -> StringR.string.verification_subtitle_waiting
FlowStep.Ready, is FlowStep.Verifying, FlowStep.Completed -> StringR.string.verification_subtitle_verifying
}
Column(modifier) {
Spacer(Modifier.height(68.dp))
Spacer(Modifier.height(80.dp))
Box(
modifier = Modifier
.size(width = 70.dp, height = 70.dp)
@ -164,14 +167,14 @@ internal fun HeaderContent(verificationFlowStep: FlowStep, modifier: Modifier =
@Composable
internal fun Content(flowState: FlowStep, modifier: Modifier = Modifier) {
Column(modifier) {
Spacer(Modifier.height(56.dp))
Column(modifier, verticalArrangement = Arrangement.Center) {
Spacer(Modifier.shrinkableHeight(min = 20.dp, max = 56.dp))
when (flowState) {
FlowStep.Initial, FlowStep.Ready, FlowStep.Canceled, FlowStep.Completed -> Unit
FlowStep.AwaitingOtherDeviceResponse -> ContentWaiting()
is FlowStep.Verifying -> ContentVerifying(flowState)
}
Spacer(Modifier.height(56.dp))
Spacer(Modifier.shrinkableHeight(min = 20.dp, max = 56.dp))
}
}
@ -185,19 +188,22 @@ internal fun ContentWaiting(modifier: Modifier = Modifier) {
@Composable
internal fun ContentVerifying(verificationFlowStep: FlowStep.Verifying, modifier: Modifier = Modifier) {
FlowRow(
modifier = modifier.fillMaxWidth(),
modifier = modifier
.fillMaxWidth()
.verticalScroll(rememberScrollState()),
mainAxisAlignment = MainAxisAlignment.Center,
mainAxisSpacing = 32.dp,
crossAxisSpacing = 40.dp
) {
for (entry in verificationFlowStep.emojiList) {
Column(
modifier = Modifier.defaultMinSize(minWidth = 56.dp),
horizontalAlignment = Alignment.CenterHorizontally
) {
Column(horizontalAlignment = Alignment.CenterHorizontally) {
Text(entry.code, fontSize = 34.sp)
Spacer(modifier = Modifier.height(16.dp))
Text(entry.name, style = ElementTextStyles.Regular.body)
Text(
entry.name,
style = ElementTextStyles.Regular.bodyMD,
color = MaterialTheme.colorScheme.secondary,
)
}
}
}
@ -256,14 +262,14 @@ internal fun BottomMenu(screenState: VerifySelfSessionState, goBack: () -> Unit)
modifier = Modifier.fillMaxWidth(),
onClick = { positiveButtonEvent?.let { eventSink(it) } }
) {
positiveButtonTitle?.let { Text(stringResource(it)) }
positiveButtonTitle?.let { Text(stringResource(it), style = ElementTextStyles.Button) }
}
} else {
Button(
modifier = Modifier.fillMaxWidth(),
onClick = { positiveButtonEvent?.let { eventSink(it) } }
) {
positiveButtonTitle?.let { Text(stringResource(it)) }
positiveButtonTitle?.let { Text(stringResource(it), style = ElementTextStyles.Button) }
}
}
if (negativeButtonTitle != null) {
@ -273,7 +279,7 @@ internal fun BottomMenu(screenState: VerifySelfSessionState, goBack: () -> Unit)
onClick = negativeButtonCallback,
enabled = negativeButtonEnabled,
) {
Text(stringResource(negativeButtonTitle))
Text(stringResource(negativeButtonTitle), fontSize = 16.sp)
}
}
Spacer(Modifier.height(40.dp))
@ -297,3 +303,15 @@ private fun ContentToPreview(state: VerifySelfSessionState) {
goBack = {},
)
}
private fun Modifier.shrinkableHeight(
min: Dp,
max: Dp,
minScreenHeight: Int = 720
): Modifier = composed {
if (LocalConfiguration.current.screenHeightDp >= minScreenHeight) {
then(Modifier.height(max))
} else {
then(Modifier.height(min))
}
}

View file

@ -26,7 +26,7 @@ import androidx.compose.ui.unit.sp
object ElementTextStyles {
val Button = TextStyle(
fontSize = 17.sp,
fontSize = 16.sp,
fontWeight = FontWeight.Bold,
lineHeight = 22.sp,
fontStyle = FontStyle.Normal,

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:47cc4075122ec2d0a1420e6c3c8765f6d28b521927034067a1ff1c877bf069fb
size 41214
oid sha256:2fac7314c1dee8d4570922b984b0749f24ec8984e5e602892e2e4ed925d143b6
size 41145

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:b8d776746230925c8b35bb688ae51d3b3eca0ebee6beb9e716dabcbf4ae57361
size 44563
oid sha256:dff29249aabb7818151e55dbc9a1290bc09cf0e638e3ad2842791904b14368ca
size 44381

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:c22ea865154e6c55cdc04acd4a96c3d0c87e1918c29604d72d37d1b29466ff46
size 43877
oid sha256:cb351458d7b5d70f2201f94e4466d5c7dbebb60bca164a986967d2d8006405da
size 43814

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:95a4f4ce5871c6c65dfd732bde01ea3a80c47fd97a83e306642b4b3821b23b65
size 48597
oid sha256:4363256d328a0ab2cc3966b42827c7a7319bee962710a0bac542f6494799ff71
size 48526

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:74483873056b7dab096936e09e07249b84ffebe42619f20a829e9994b3b01ced
size 43840
oid sha256:afa9ab67471727f4c396d1919fd1187ec28a40b8cb9b03c2b35400c5e32f4eda
size 43776

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:1c2700fd98861f5bb34ee48b24c7ddceea57971fbe9e9b0aa0d5b24edc90cc6a
size 43809
oid sha256:6b724d1b93a04117fc3cc405920fd22530e004cc9ba9c39f88ca1a2a2a4229c4
size 43743

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:86c3bc2523fd194a87d062bb122a8d84d412db419c0a9e2f0c6e51ccd338119a
size 37809
oid sha256:28c23058fdd9b24a7079251a2ab1ae2f85dafe0c1d4f01be3ffeca91984e0805
size 37703

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:9e0c3a87fb5fc5c3e8c31df3c071bf69b956e0dcfc35f5168452253c9e55b6fd
size 41535
oid sha256:7779d6bf28eca6e72f9f1bcbd8b27881d0df0e594041269367a1f909e941cec9
size 41368

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:f841b8076376b61a21c517e93627992a179ef1042566133367229c4926322279
size 40436
oid sha256:f51052d3ece86fe7e07cc686a539b81d23f795c64bf66bd093b9d0e8e9fc7192
size 40335

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:091e106c67c1a503c98c36a0ed58a3cb08461840643cd2fe2ffc7e1f46ab3774
size 47711
oid sha256:27d2d879493e8ed1cc17dcdbb384504126fad63eb7e53a069f530457c35b94b3
size 47609

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:9496dd89a284f77cb01295a69dcf60ccdb566224560139d13f926e38a0bd226c
size 40436
oid sha256:66e9060ad93cec0e1bf8e284ac959a713a8201a33ff931aeb61aaf29ab7d9640
size 40335

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:be6c0687f8ac84831db038a9846aefba81c4a6af08237d89b2cdba5676f31142
size 40419
oid sha256:7f7ecb805b73afe15db56853fec77d92f28fc9f8080dc7f1b2bb9f99cc262719
size 40317

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:ae82ef6285127f343f0ebee35cedc6f28132dde37c3303bbc33aa881c471c48c
size 32466
oid sha256:a302148918d0f328b778c18de007538724879fd6f02babf667504ab049c02511
size 32428

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:50627ff6140b8fb9eed181e812740a8bf8cf4cdb23cb4cf2fa9cd0b37fb880bc
size 35224
oid sha256:1f67b9a62ee3628af0308b2a01883e09d4068c3c833a79c702a204942e2d2133
size 35180

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:8f94523e18a1eb82324325f0e3f8439d4d457d6d4883cd75a7fa6169f90bbdf4
size 34229
oid sha256:5c0b9edebd50e38f07ae3663f0f760674e8d9194d41077c70f93d8af46a78f0a
size 34139

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:fe3431804d6d84b8588b0fb475bd824159abe4d0a7e35f0b7967b08477b07778
size 33523
oid sha256:3d552e8ad5f20ce2c08c3f7a4b970d552743b473acdc7a75d5414520a9db7421
size 33475

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:3d1c502239f0fd9cdd7fa286275d299b74597a2b0b5d0f081503a7db3cb39f52
size 30277
oid sha256:f548bca0c797f35eec698f28daf74d409210d076b91ef5e4db1501ed12cefb88
size 30197

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:8f94523e18a1eb82324325f0e3f8439d4d457d6d4883cd75a7fa6169f90bbdf4
size 34229
oid sha256:5c0b9edebd50e38f07ae3663f0f760674e8d9194d41077c70f93d8af46a78f0a
size 34139

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:5e3e148e980f5096934ec4742a3f8b05442f0019dbcf6435fcdc1875c326a6ae
size 31513
oid sha256:7890d36ac726a7f0764319a72d0d3aca13d2c1d382616f0f1bdb5cc19926b168
size 31455

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:21e9c4c0ecf5a348361ff30195195743192cb784c9d6d248ca83010e3646c39f
size 34212
oid sha256:978d1b6b40b4109a1dd941574b08d39093c5a1eeaf3da18c24a677080bfb378a
size 34158

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:04f73ec1830baa28808881f040f6bfc2b1ce0de1ca2d4b3e16a3b57513814a7f
size 33173
oid sha256:785ad6fe0af439444b469ae0189ea627600fc0ba71f1dff1af470ce10ce81d4e
size 33105

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:da84d9195ed0cac06efff562156ed8abc161a6dbd3272727c1cb787b83c62558
size 32253
oid sha256:ea3ff5e912f88f12bdbf65ce027a5bde87472bbafd0146ebf609f36027dda31a
size 32194

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:ea2dce0fde5ff6563f283e643edadd5c95c29a4084c8f1d3902ec3c759cccea7
size 30070
oid sha256:09ff583713751988f4ccdb465b1b53d88b788d6b275512afde08ce4e5d3e4346
size 30022

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:04f73ec1830baa28808881f040f6bfc2b1ce0de1ca2d4b3e16a3b57513814a7f
size 33173
oid sha256:785ad6fe0af439444b469ae0189ea627600fc0ba71f1dff1af470ce10ce81d4e
size 33105

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:474c799a08ccba7c8b4d9ba3d120b103d0e8bb9654bb4da576d4eee579e5d517
size 28222
oid sha256:5a06f563a1b006bd007c123a03486bb26ec93029e65c3a3c71a6ead01f747ddf
size 28139

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:c705a9c97a0bc5a2987cef4db6fd9b79de1cf1f5405035c6371615fb72fc5f36
size 27715
oid sha256:8796755d5118f24c6d3632cf1b0cee2b1d2b3743620d24e65f57ceb27bc7a48e
size 27627

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:f653439749b16d9f683b63984855e2dad576e5d567eeed792f28e9484b12b67f
size 60599
oid sha256:d51bcda4d9b04e7569aff45bcf599c779bbcad52de8c4700036abe4084128707
size 60513

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:d88db44fb66340043d83e256b1eb7655e66af5e11daa55bd1336b4ff6e57883d
size 59472
oid sha256:69f1674c3e4dc3afc194c0a7bd1064ae37722cc132ead43bf02a1183cc1e2ece
size 59392

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:07e72c29b3a928eaa86ec7c97cb680cf2eaacebf6512390eb9dda47bdc2a9c7e
size 29249
oid sha256:b964fd69198367cd702d8ff09d75a79a66bbee22798cbaa381fabde9bab5fda0
size 29646

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:76b4ac8395ac876c4ff979bd92279b9735fae581987326c6ab929e8578335c5a
size 26657
oid sha256:0162d20f04bfdd0fdd6eb6e00b18b5774f83f07a5c7a72d20d0f51988b05dc66
size 26899

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:ca4957bb6995efbf398bf211da38cafb6b2c1693167f9c940d6a31343bfcf127
size 61454
oid sha256:2f38843f426b531b5ec9febae2d2d442bfdf29c9fe8dda52bf27a53c8226a9d2
size 60873

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:7590a2604bb93de8a416e7e45b6c410c27fd83481cfb08f3f41e820d22fc5582
size 62046
oid sha256:c97fd08e6cf3df11f285c1e94d869e492b168be339dcbe2a3a841395b9549f12
size 61452

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:4861b0c969a8af115ad2638b54f5893e813633a61bebb8bccafa01cfda320ea9
size 31937
oid sha256:15b907fd9177e6e0b7b3e0371f42899099913d40b439da2addb18afb912dc69d
size 32864

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:594ebca0307e0488bb6d22df074069181091a6310bb7fdb29a9109a10997319e
size 26874
oid sha256:949bd00ccc555ef5e3218d37e418a45c303d7eab6af652f5d48d380b1a8e19ca
size 27302

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:4ee6ee256e59932e2d6aa29c393ec30499da06c6759ed33e8298838618bbfb9f
size 28465
oid sha256:97a422ee19417033b00cbc829f4755992be068b42d2889597ad0bba68dd18fe4
size 29172

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:586954a4fae4405f47a02140ec0ea9c89b2f6becc1b9b852d0a8fa28e10bf089
size 25959
oid sha256:dd0c4a8485e00b917265b6061ee901a9f131883069621d55f3f5c9a42673046c
size 26182

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:083f2c5ba49a4579015c38ffa2e0c2dd4ed04f389faa4c90cf6afa6438e08ca7
size 59174
oid sha256:079be728240bef9778a26f623ff19e28756921b5e30ce34d3fe360eade47789e
size 59359

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:ed5e914779a3dcfbed0af73cace4e9141259932a892ae57ee902aec4860bd879
size 59628
oid sha256:76aa30f5693cdc8e654dbb5927db092da91815e83222d0f540782e1d7945542f
size 59761

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:2c8534d5464f3ee2551df199d18af1589f6c1e0c66292756be1e1af9deee1b17
size 31580
oid sha256:e782e332af35ea98bc19a2154d7d8a24aeb68636f1cba768b36599010aad1722
size 32486

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:25598da9a3d84cecb4204d140609f2de5b03facd547f7ef45c53ccead333ce05
size 26343
oid sha256:06a31254e0ff962006c35a9c54ca2e6136ce51bfb267bbf61f9a941dd3720fe4
size 26828