From fb1d3a05cebfb9630959c01237d1b2deaa915c1e Mon Sep 17 00:00:00 2001 From: Ryan Tate Date: Tue, 15 Oct 2024 16:09:39 -0400 Subject: [PATCH] wip: add UI components for credential selection Signed-off-by: Ryan Tate --- .../wallet/HandleOID4VPView.kt | 762 +++++++++++++++++- .../src/main/res/drawable-hdpi/collapse.png | Bin 0 -> 373 bytes example/src/main/res/drawable-hdpi/expand.png | Bin 0 -> 362 bytes .../src/main/res/drawable-xhdpi/collapse.png | Bin 0 -> 877 bytes .../src/main/res/drawable-xhdpi/expand.png | Bin 0 -> 813 bytes .../src/main/res/drawable-xxhdpi/collapse.png | Bin 0 -> 545 bytes .../src/main/res/drawable-xxhdpi/expand.png | Bin 0 -> 547 bytes .../main/res/drawable-xxxhdpi/collapse.png | Bin 0 -> 546 bytes .../src/main/res/drawable-xxxhdpi/expand.png | Bin 0 -> 606 bytes 9 files changed, 755 insertions(+), 7 deletions(-) create mode 100644 example/src/main/res/drawable-hdpi/collapse.png create mode 100644 example/src/main/res/drawable-hdpi/expand.png create mode 100644 example/src/main/res/drawable-xhdpi/collapse.png create mode 100644 example/src/main/res/drawable-xhdpi/expand.png create mode 100644 example/src/main/res/drawable-xxhdpi/collapse.png create mode 100644 example/src/main/res/drawable-xxhdpi/expand.png create mode 100644 example/src/main/res/drawable-xxxhdpi/collapse.png create mode 100644 example/src/main/res/drawable-xxxhdpi/expand.png diff --git a/example/src/main/java/com/spruceid/mobilesdkexample/wallet/HandleOID4VPView.kt b/example/src/main/java/com/spruceid/mobilesdkexample/wallet/HandleOID4VPView.kt index 0ba62d8..b7b425c 100644 --- a/example/src/main/java/com/spruceid/mobilesdkexample/wallet/HandleOID4VPView.kt +++ b/example/src/main/java/com/spruceid/mobilesdkexample/wallet/HandleOID4VPView.kt @@ -1,5 +1,9 @@ package com.spruceid.mobilesdkexample.wallet +import androidx.compose.foundation.BorderStroke +import androidx.compose.foundation.Image +import androidx.compose.foundation.background +import androidx.compose.foundation.border import androidx.compose.foundation.layout.* import androidx.compose.runtime.* import androidx.compose.material3.* @@ -35,7 +39,18 @@ import kotlinx.coroutines.Dispatchers import kotlinx.coroutines.launch import kotlinx.coroutines.withContext import androidx.compose.foundation.lazy.LazyColumn +import androidx.compose.foundation.shape.CircleShape +import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material3.Button +import androidx.compose.ui.draw.clip +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.layout.ContentScale +import androidx.compose.ui.res.painterResource +import androidx.compose.ui.text.TextStyle +import androidx.compose.ui.text.style.TextAlign +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.em +import com.spruceid.mobilesdkexample.R import com.spruceid.mobilesdkexample.navigation.Screen import com.spruceid.mobilesdkexample.utils.trustedDids @@ -129,13 +144,6 @@ fun CredentialSelector( .fillMaxWidth() .padding(48.dp) ) { -// Text( -// text = "SpruceiD Demo Wallet", -// style = MaterialTheme.typography.headlineSmall -// ) -// -// Spacer(modifier = Modifier.height(16.dp)) - Text( text = "Select the credential(s) to share", style = MaterialTheme.typography.bodyLarge @@ -198,4 +206,744 @@ fun CredentialSelector( } } } +} + +@OptIn(ExperimentalMaterial3Api::class, ExperimentalPermissionsApi::class) +@Composable +fun ConsentModal( + modifier: Modifier = Modifier, +) { + Box( + modifier = modifier + .requiredWidth(width = 390.dp) + .requiredHeight(height = 844.dp) + .background(color = Color(0xfffdfdfc)) + ) { + Column( + verticalArrangement = Arrangement.spacedBy(24.dp, Alignment.Top), + horizontalAlignment = Alignment.CenterHorizontally, + modifier = Modifier + .align(alignment = Alignment.TopCenter) + .offset(x = 0.dp, + y = 60.dp) + .requiredWidth(width = 330.dp) + .requiredHeight(height = 736.dp) + ) { + Column( + verticalArrangement = Arrangement.spacedBy(20.dp, Alignment.Top) + ) { + Row( + horizontalArrangement = Arrangement.SpaceBetween, + verticalAlignment = Alignment.CenterVertically, + modifier = Modifier + .requiredWidth(width = 330.dp) + ) { + Text( + text = "SpruceID Demo Wallet", + color = Color(0xff0c0a09), + lineHeight = 1.5.em, + style = TextStyle( + fontSize = 20.sp, + fontWeight = FontWeight.Medium)) + Row( + horizontalArrangement = Arrangement.spacedBy(4.dp, Alignment.Start), + verticalAlignment = Alignment.CenterVertically + ) { + Box( + modifier = Modifier + .requiredSize(size = 36.dp) + .clip(shape = RoundedCornerShape(8.dp)) + .background(color = Color(0xff0c0a09)) + ) { + Icon( + painter = painterResource(id = R.drawable.expand), + contentDescription = "Icon", + tint = Color(0xff57534e), + modifier = Modifier + .fillMaxSize() + .clip(shape = RoundedCornerShape(3.dp))) + Icon( + painter = painterResource(id = R.drawable.collapse), + contentDescription = "Vector", + modifier = Modifier + .fillMaxSize()) + } + Image( + painter = painterResource(id = R.drawable.collapse), + contentDescription = "Settings", + modifier = Modifier + .requiredSize(size = 36.dp) + .clip(shape = RoundedCornerShape(8.dp))) + } + } + } + Column( + verticalArrangement = Arrangement.SpaceBetween, + horizontalAlignment = Alignment.CenterHorizontally, + modifier = Modifier + .fillMaxSize() + ) { + Column( + verticalArrangement = Arrangement.spacedBy(12.dp, Alignment.Top), + horizontalAlignment = Alignment.CenterHorizontally, + modifier = Modifier + .fillMaxWidth() + ) { + Column( + verticalArrangement = Arrangement.spacedBy(12.dp, Alignment.Top), + horizontalAlignment = Alignment.CenterHorizontally, + modifier = Modifier + .fillMaxWidth() + ) { + Box( + modifier = Modifier + .fillMaxWidth() + .requiredHeight(height = 351.dp) + ) { + Image( + painter = painterResource(id = R.drawable.expand), + contentDescription = "IMG_5824 1", + contentScale = ContentScale.Crop, + modifier = Modifier + .requiredSize(size = 330.dp) + .clip(shape = RoundedCornerShape(9.327272415161133.dp)) + .border(border = BorderStroke(2.dp, Color(0xff2f6ae1)), + shape = RoundedCornerShape(9.327272415161133.dp))) + Row( + horizontalArrangement = Arrangement.spacedBy(10.dp, Alignment.CenterHorizontally), + verticalAlignment = Alignment.CenterVertically, + modifier = Modifier + .align(alignment = Alignment.TopCenter) + .offset(x = (-0.48261260986328125).dp, + y = 309.dp) + .requiredWidth(width = 132.dp) + .clip(shape = RoundedCornerShape(23.dp)) + .background(color = Color(0xff2f6ae1)) + .border(border = BorderStroke(1.dp, Color(0xff4389f2)), + shape = RoundedCornerShape(23.dp)) + .padding(horizontal = 20.dp, + vertical = 10.dp) + ) { + Column( + verticalArrangement = Arrangement.spacedBy(2.dp, Alignment.Top), + horizontalAlignment = Alignment.CenterHorizontally + ) { + Box( + modifier = Modifier + .requiredSize(size = 11.dp) + ) { + Box( + modifier = Modifier + .requiredSize(size = 11.dp) + .clip(shape = CircleShape) + .border(border = BorderStroke(2.dp, Color(0xff243f84)), + shape = CircleShape)) + Image( + painter = painterResource(id = R.drawable.collapse), + contentDescription = "Ellipse 163", + modifier = Modifier + .align(alignment = Alignment.TopStart) + .offset(x = 0.dp, + y = 3.01611328125.dp) + .requiredWidth(width = 11.dp) + .requiredHeight(height = 8.dp) + .border(border = BorderStroke(2.dp, Color(0xfffbf9f6)))) + } + } + Text( + text = "Detecting...", + color = Color(0xfffbf9f6), + lineHeight = 1.47.em, + style = TextStyle( + fontSize = 15.sp)) + } + } + } + Text( + text = "Present this QR code to a verifier in order to share data. You will see a consent dialogue", + color = Color(0xff78716c), + textAlign = TextAlign.Center, + lineHeight = 1.29.em, + style = TextStyle( + fontSize = 14.sp), + modifier = Modifier + .fillMaxWidth()) + } + SizemdColorBaseStateDefault() + } + } + Box( + modifier = Modifier + .requiredWidth(width = 390.dp) + .requiredHeight(height = 844.dp) + .background(color = Color(0xff0c0a09).copy(alpha = 0.5f))) + Box( + modifier = Modifier + .align(alignment = Alignment.BottomStart) + .offset(x = 0.dp, + y = 0.dp) + .requiredWidth(width = 390.dp) + .requiredHeight(height = 740.dp) + .clip(shape = RoundedCornerShape(topStart = 16.000001907348633.dp, topEnd = 16.000001907348633.dp)) + .background(color = Color(0xfffdfdfc)) + ) { + Column( + verticalArrangement = Arrangement.SpaceBetween, + horizontalAlignment = Alignment.CenterHorizontally, + modifier = Modifier + .align(alignment = Alignment.TopStart) + .offset(x = 24.dp, + y = 36.dp) + .requiredWidth(width = 342.dp) + .requiredHeight(height = 656.dp) + ) { + Column( + verticalArrangement = Arrangement.spacedBy(12.dp, Alignment.Top), + horizontalAlignment = Alignment.CenterHorizontally, + modifier = Modifier + .requiredHeight(height = 590.dp) + ) { + Text( + text = "Select the credential(s) to share", + color = Color(0xff0c0a09), + textAlign = TextAlign.Center, + style = TextStyle( + fontSize = 20.sp), + modifier = Modifier + .fillMaxWidth()) + Box( + modifier = Modifier + .fillMaxHeight() + .requiredWidth(width = 342.dp) + ) { + LazyColumn( + verticalArrangement = Arrangement.spacedBy(12.dp, Alignment.Top), + modifier = Modifier + .requiredWidth(width = 342.dp) + ) { + item { + Column( + verticalArrangement = Arrangement.spacedBy(12.dp, Alignment.Top), + modifier = Modifier + .fillMaxWidth() + .clip(shape = RoundedCornerShape(8.dp)) + .background(color = Color(0xfffdfdfc)) + .border(border = BorderStroke(1.dp, Color(0xffe6e1d6)), + shape = RoundedCornerShape(8.dp)) + .padding(all = 16.dp) + ) { + Row( + horizontalArrangement = Arrangement.spacedBy(12.dp, Alignment.Start), + verticalAlignment = Alignment.CenterVertically, + modifier = Modifier + .fillMaxWidth() + ) { + Icon( + painter = painterResource(id = R.drawable.collapse), + contentDescription = "Checkbox", + modifier = Modifier + .requiredSize(size = 20.dp) + .clip(shape = RoundedCornerShape(2.dp)) + .background(color = Color(0xff2f6ae1))) + Text( + text = "{Credential Title}", + color = Color(0xff0c0a09), + lineHeight = 6.94.em, + style = TextStyle( + fontSize = 18.sp), + modifier = Modifier + .weight(weight = 1f) + .wrapContentHeight(align = Alignment.CenterVertically)) + Icon( + painter = painterResource(id = R.drawable.collapse), + contentDescription = "Icon", + tint = Color(0xff57534e), + modifier = Modifier + .requiredSize(size = 20.dp) + .clip(shape = RoundedCornerShape(2.dp))) + } + } + } + item { + Column( + verticalArrangement = Arrangement.spacedBy(12.dp, Alignment.Top), + modifier = Modifier + .fillMaxWidth() + .clip(shape = RoundedCornerShape(8.dp)) + .background(color = Color(0xfffdfdfc)) + .border(border = BorderStroke(1.dp, Color(0xffe6e1d6)), + shape = RoundedCornerShape(8.dp)) + .padding(all = 16.dp) + ) { + Row( + horizontalArrangement = Arrangement.spacedBy(12.dp, Alignment.Start), + verticalAlignment = Alignment.CenterVertically, + modifier = Modifier + .fillMaxWidth() + ) { + Icon( + painter = painterResource(id = R.drawable.collapse), + contentDescription = "Checkbox", + modifier = Modifier + .clip(shape = RoundedCornerShape(2.dp)) + .background(color = Color(0xfffdfdfc)) + .border(border = BorderStroke(1.25.dp, Color(0xffd6d3d1)), + shape = RoundedCornerShape(2.dp))) + Text( + text = "{Credential Title}", + color = Color(0xff0c0a09), + lineHeight = 6.94.em, + style = TextStyle( + fontSize = 18.sp), + modifier = Modifier + .weight(weight = 1f) + .wrapContentHeight(align = Alignment.CenterVertically)) + Icon( + painter = painterResource(id = R.drawable.collapse), + contentDescription = "Icon", + tint = Color(0xff57534e), + modifier = Modifier + .requiredSize(size = 20.dp) + .clip(shape = RoundedCornerShape(2.dp))) + } + Column( + verticalArrangement = Arrangement.spacedBy(8.dp, Alignment.Top), + modifier = Modifier + .fillMaxWidth() + ) { + Row( + horizontalArrangement = Arrangement.spacedBy(20.dp, Alignment.Start), + modifier = Modifier + .fillMaxWidth() + ) { + Text( + text = "Data Field", + color = Color(0xff57534e), + lineHeight = 1.5.em, + style = TextStyle( + fontSize = 16.sp), + modifier = Modifier + .weight(weight = 0.5f) + .wrapContentHeight(align = Alignment.CenterVertically)) + Text( + text = "Data Field", + color = Color(0xff57534e), + lineHeight = 1.5.em, + style = TextStyle( + fontSize = 16.sp), + modifier = Modifier + .weight(weight = 0.5f) + .wrapContentHeight(align = Alignment.CenterVertically)) + } + Row( + horizontalArrangement = Arrangement.spacedBy(20.dp, Alignment.Start), + modifier = Modifier + .fillMaxWidth() + ) { + Text( + text = "Data Field", + color = Color(0xff57534e), + lineHeight = 1.5.em, + style = TextStyle( + fontSize = 16.sp), + modifier = Modifier + .weight(weight = 0.5f) + .wrapContentHeight(align = Alignment.CenterVertically)) + Text( + text = "Data Field", + color = Color(0xff57534e), + lineHeight = 1.5.em, + style = TextStyle( + fontSize = 16.sp), + modifier = Modifier + .weight(weight = 0.5f) + .wrapContentHeight(align = Alignment.CenterVertically)) + } + Row( + horizontalArrangement = Arrangement.spacedBy(20.dp, Alignment.Start), + modifier = Modifier + .fillMaxWidth() + ) { + Text( + text = "Data Field", + color = Color(0xff57534e), + lineHeight = 1.5.em, + style = TextStyle( + fontSize = 16.sp), + modifier = Modifier + .weight(weight = 0.5f) + .wrapContentHeight(align = Alignment.CenterVertically)) + Text( + text = "Data Field", + color = Color(0xff57534e), + lineHeight = 1.5.em, + style = TextStyle( + fontSize = 16.sp), + modifier = Modifier + .weight(weight = 0.5f) + .wrapContentHeight(align = Alignment.CenterVertically)) + } + Row( + horizontalArrangement = Arrangement.spacedBy(20.dp, Alignment.Start), + modifier = Modifier + .fillMaxWidth() + ) { + Text( + text = "Data Field", + color = Color(0xff57534e), + lineHeight = 1.5.em, + style = TextStyle( + fontSize = 16.sp), + modifier = Modifier + .weight(weight = 0.5f) + .wrapContentHeight(align = Alignment.CenterVertically)) + Text( + text = "Data Field", + color = Color(0xff57534e), + lineHeight = 1.5.em, + style = TextStyle( + fontSize = 16.sp), + modifier = Modifier + .weight(weight = 0.5f) + .wrapContentHeight(align = Alignment.CenterVertically)) + } + } + } + } + item { + Column( + verticalArrangement = Arrangement.spacedBy(12.dp, Alignment.Top), + modifier = Modifier + .fillMaxWidth() + .clip(shape = RoundedCornerShape(8.dp)) + .background(color = Color(0xfffdfdfc)) + .border(border = BorderStroke(1.dp, Color(0xffe6e1d6)), + shape = RoundedCornerShape(8.dp)) + .padding(all = 16.dp) + ) { + Row( + horizontalArrangement = Arrangement.spacedBy(12.dp, Alignment.Start), + verticalAlignment = Alignment.CenterVertically, + modifier = Modifier + .fillMaxWidth() + ) { + Icon( + painter = painterResource(id = R.drawable.collapse), + contentDescription = "Checkbox", + modifier = Modifier + .clip(shape = RoundedCornerShape(2.dp)) + .background(color = Color(0xfffdfdfc)) + .border(border = BorderStroke(1.25.dp, Color(0xffd6d3d1)), + shape = RoundedCornerShape(2.dp))) + Text( + text = "{Credential Title}", + color = Color(0xff0c0a09), + lineHeight = 6.94.em, + style = TextStyle( + fontSize = 18.sp), + modifier = Modifier + .weight(weight = 1f) + .wrapContentHeight(align = Alignment.CenterVertically)) + Icon( + painter = painterResource(id = R.drawable.collapse), + contentDescription = "Icon", + tint = Color(0xff57534e), + modifier = Modifier + .requiredSize(size = 20.dp) + .clip(shape = RoundedCornerShape(2.dp))) + } + } + } + item { + Column( + verticalArrangement = Arrangement.spacedBy(12.dp, Alignment.Top), + modifier = Modifier + .fillMaxWidth() + .clip(shape = RoundedCornerShape(8.dp)) + .background(color = Color(0xfffdfdfc)) + .border(border = BorderStroke(1.dp, Color(0xffe6e1d6)), + shape = RoundedCornerShape(8.dp)) + .padding(all = 16.dp) + ) { + Row( + horizontalArrangement = Arrangement.spacedBy(12.dp, Alignment.Start), + verticalAlignment = Alignment.CenterVertically, + modifier = Modifier + .fillMaxWidth() + ) { + Icon( + painter = painterResource(id = R.drawable.collapse), + contentDescription = "Checkbox", + modifier = Modifier + .requiredSize(size = 20.dp) + .clip(shape = RoundedCornerShape(2.dp)) + .background(color = Color(0xff2f6ae1))) + Text( + text = "{Credential Title}", + color = Color(0xff0c0a09), + lineHeight = 6.94.em, + style = TextStyle( + fontSize = 18.sp), + modifier = Modifier + .weight(weight = 1f) + .wrapContentHeight(align = Alignment.CenterVertically)) + Icon( + painter = painterResource(id = R.drawable.collapse), + contentDescription = "Icon", + tint = Color(0xff57534e), + modifier = Modifier + .requiredSize(size = 20.dp) + .clip(shape = RoundedCornerShape(2.dp))) + } + } + } + item { + Column( + verticalArrangement = Arrangement.spacedBy(12.dp, Alignment.Top), + modifier = Modifier + .fillMaxWidth() + .clip(shape = RoundedCornerShape(8.dp)) + .background(color = Color(0xfffdfdfc)) + .border(border = BorderStroke(1.dp, Color(0xffe6e1d6)), + shape = RoundedCornerShape(8.dp)) + .padding(all = 16.dp) + ) { + Row( + horizontalArrangement = Arrangement.spacedBy(12.dp, Alignment.Start), + verticalAlignment = Alignment.CenterVertically, + modifier = Modifier + .fillMaxWidth() + ) { + Icon( + painter = painterResource(id = R.drawable.collapse), + contentDescription = "Checkbox", + modifier = Modifier + .clip(shape = RoundedCornerShape(2.dp)) + .background(color = Color(0xfffdfdfc)) + .border(border = BorderStroke(1.25.dp, Color(0xffd6d3d1)), + shape = RoundedCornerShape(2.dp))) + Text( + text = "{Credential Title}", + color = Color(0xff0c0a09), + lineHeight = 6.94.em, + style = TextStyle( + fontSize = 18.sp), + modifier = Modifier + .weight(weight = 1f) + .wrapContentHeight(align = Alignment.CenterVertically)) + Icon( + painter = painterResource(id = R.drawable.collapse), + contentDescription = "Icon", + tint = Color(0xff57534e), + modifier = Modifier + .requiredSize(size = 20.dp) + .clip(shape = RoundedCornerShape(2.dp))) + } + } + } + item { + Column( + verticalArrangement = Arrangement.spacedBy(12.dp, Alignment.Top), + modifier = Modifier + .fillMaxWidth() + .clip(shape = RoundedCornerShape(8.dp)) + .background(color = Color(0xfffdfdfc)) + .border(border = BorderStroke(1.dp, Color(0xffe6e1d6)), + shape = RoundedCornerShape(8.dp)) + .padding(all = 16.dp) + ) { + Row( + horizontalArrangement = Arrangement.spacedBy(12.dp, Alignment.Start), + verticalAlignment = Alignment.CenterVertically, + modifier = Modifier + .fillMaxWidth() + ) { + Icon( + painter = painterResource(id = R.drawable.collapse), + contentDescription = "Checkbox", + modifier = Modifier + .requiredSize(size = 20.dp) + .clip(shape = RoundedCornerShape(2.dp)) + .background(color = Color(0xff2f6ae1))) + Text( + text = "{Credential Title}", + color = Color(0xff0c0a09), + lineHeight = 6.94.em, + style = TextStyle( + fontSize = 18.sp), + modifier = Modifier + .weight(weight = 1f) + .wrapContentHeight(align = Alignment.CenterVertically)) + Icon( + painter = painterResource(id = R.drawable.expand), + contentDescription = "Icon", + tint = Color(0xff57534e), + modifier = Modifier + .requiredSize(size = 20.dp) + .clip(shape = RoundedCornerShape(2.dp))) + } + } + } + item { + Column( + verticalArrangement = Arrangement.spacedBy(12.dp, Alignment.Top), + modifier = Modifier + .fillMaxWidth() + .clip(shape = RoundedCornerShape(8.dp)) + .background(color = Color(0xfffdfdfc)) + .border(border = BorderStroke(1.dp, Color(0xffe6e1d6)), + shape = RoundedCornerShape(8.dp)) + .padding(all = 16.dp) + ) { + Row( + horizontalArrangement = Arrangement.spacedBy(12.dp, Alignment.Start), + verticalAlignment = Alignment.CenterVertically, + modifier = Modifier + .fillMaxWidth() + ) { + Icon( + painter = painterResource(id = R.drawable.expand), + contentDescription = "Checkbox", + modifier = Modifier + .requiredSize(size = 20.dp) + .clip(shape = RoundedCornerShape(2.dp)) + .background(color = Color(0xff2f6ae1))) + Text( + text = "{Credential Title}", + color = Color(0xff0c0a09), + lineHeight = 6.94.em, + style = TextStyle( + fontSize = 18.sp), + modifier = Modifier + .weight(weight = 1f) + .wrapContentHeight(align = Alignment.CenterVertically)) + Icon( + painter = painterResource(id = R.drawable.expand), + contentDescription = "Icon", + tint = Color(0xff57534e), + modifier = Modifier + .requiredSize(size = 20.dp) + .clip(shape = RoundedCornerShape(2.dp))) + } + } + } + item { + Column( + verticalArrangement = Arrangement.spacedBy(12.dp, Alignment.Top), + modifier = Modifier + .fillMaxWidth() + .clip(shape = RoundedCornerShape(8.dp)) + .background(color = Color(0xfffdfdfc)) + .border(border = BorderStroke(1.dp, Color(0xffe6e1d6)), + shape = RoundedCornerShape(8.dp)) + .padding(all = 16.dp) + ) { + Row( + horizontalArrangement = Arrangement.spacedBy(12.dp, Alignment.Start), + verticalAlignment = Alignment.CenterVertically, + modifier = Modifier + .fillMaxWidth() + ) { + Icon( + painter = painterResource(id = R.drawable.expand), + contentDescription = "Checkbox", + modifier = Modifier + .requiredSize(size = 20.dp) + .clip(shape = RoundedCornerShape(2.dp)) + .background(color = Color(0xff2f6ae1))) + Text( + text = "{Credential Title}", + color = Color(0xff0c0a09), + lineHeight = 6.94.em, + style = TextStyle( + fontSize = 18.sp), + modifier = Modifier + .weight(weight = 1f) + .wrapContentHeight(align = Alignment.CenterVertically)) + Icon( + painter = painterResource(id = R.drawable.expand), + contentDescription = "Icon", + tint = Color(0xff57534e), + modifier = Modifier + .requiredSize(size = 20.dp) + .clip(shape = RoundedCornerShape(2.dp))) + } + } + } + } + } + } + TextField( + value = "", + onValueChange = {}, + label = { + Text( + text = "Continue", + color = Color(0xfffbf9f6), + textAlign = TextAlign.End, + lineHeight = 1.5.em, + style = TextStyle( + fontSize = 16.sp, + fontWeight = FontWeight.Medium)) + }, + supportingText = { + Text( + text = "Cancel", + color = Color(0xff0c0a09), + textAlign = TextAlign.End, + lineHeight = 1.5.em, + style = TextStyle( + fontSize = 14.sp, + fontWeight = FontWeight.Medium)) + }, + modifier = Modifier + .fillMaxWidth()) + } + } + } +} + +@OptIn(ExperimentalMaterial3Api::class, ExperimentalPermissionsApi::class) +@Composable +fun SizemdColorBaseStateDefault(modifier: Modifier = Modifier) { + Row( + horizontalArrangement = Arrangement.spacedBy(6.dp, Alignment.CenterHorizontally), + verticalAlignment = Alignment.CenterVertically, + modifier = modifier + .requiredWidth(width = 330.dp) + .clip(shape = RoundedCornerShape(6.dp)) + .background(color = Color(0xfffdfdfc)) + .border(border = BorderStroke(1.dp, Color(0xffd6d3d1)), + shape = RoundedCornerShape(6.dp)) + .padding(horizontal = 20.dp, + vertical = 10.dp) + ) { + IconsNoneColorBlack() + } +} + +@OptIn(ExperimentalMaterial3Api::class, ExperimentalPermissionsApi::class) +@Composable +fun IconsNoneColorBlack(modifier: Modifier = Modifier) { + Row( + horizontalArrangement = Arrangement.spacedBy(6.dp, Alignment.Start), + verticalAlignment = Alignment.CenterVertically, + modifier = modifier + ) { + Text( + text = "Cancel", + color = Color(0xff0c0a09), + textAlign = TextAlign.End, + lineHeight = 1.5.em, + style = TextStyle( + fontSize = 16.sp, + fontWeight = FontWeight.Medium)) + } +} + +@Preview(widthDp = 390, heightDp = 844) +@OptIn(ExperimentalMaterial3Api::class, ExperimentalPermissionsApi::class) +@Composable +private fun ConsentModalPreview() { + ConsentModal(Modifier) } \ No newline at end of file diff --git a/example/src/main/res/drawable-hdpi/collapse.png b/example/src/main/res/drawable-hdpi/collapse.png new file mode 100644 index 0000000000000000000000000000000000000000..c9a2e0bc728bb82f115641714750900326cee8e4 GIT binary patch literal 373 zcmV-*0gC>KP)# z0Z|mk&%Gl&+JuC}7QA`VMLx0#OEBKNu?$L?SO7~P(%6AVkEnZ(IX+5bbT4mH{xx;x z{QvXoH1`7_lxo*Sp;0Y&Kl#m?=ujre<3UZSaKISYLC||o4Jl&`JWEyqU@JeAYU-iq z-81iE@IgX|M9jhk02UCzzJ(vKi)2N|agJXB{ZM+>!L-0vD0;OHW-Nlz1AqOjZ~mdt zDn~7~p!y=Yc9pgJkYHZuu@7OTgEAACcS3qMAVOCMwM<~6$;{sF_RCy0MFX@fj-_NO zJ$7C98A2BxfG`B;_GY_ZD>>94GP5v}wsq}KV_`zw=?cQV$Z28%#f+>rfQa~g00!?js=$TB3L;wH)07*qo IM6N<$f*p#NasU7T literal 0 HcmV?d00001 diff --git a/example/src/main/res/drawable-xhdpi/collapse.png b/example/src/main/res/drawable-xhdpi/collapse.png new file mode 100644 index 0000000000000000000000000000000000000000..d678b3a40f23d6041ed7007e8f7bcc712e7fe8ea GIT binary patch literal 877 zcmV-z1CsoSP)@~0drDELIAGL9O(c600d`2O+f$vv5yPpy9B(N|~yvsz<^VB-s7C)xQ5- zf4q0+)+0(Bmf0!mZx{m!R+3N{_^htqg_k|&=wNTqr!QYmKTv{z7nXS(UUt3r!<*L! zZ$F((zLP*Afb)3#y;O*Ec$_F=bihS;oHXJBJWdQT`g`E4_D^X69)~|r;yrN*9@je` zThyWh{+zknfoZ&Kp4f;j@W_WTosBJS(O2QgWb)%$fAC_bprbIk+caOS)wwO+ubDd> zjYd<7oXAEb6=H5YB=#{z8c_ot5(7k1h+6QFC?JZBs0j~=1EN@n+VD^kK(sBQMm&@Z z5N(R66%RSe5DqhSN*{Lj{L&*O-k+gq#Y0&DQCq}S<-|kT0MWLHx$#g|K(r~M20WA< z5Uq=-1rMnJM6EY0itvycK(q=`8y->xh?)>J;vsc_=zm15ct|B6VniQaYsFI^5L28S zw=B!DEX%Si%d#xXvMkHG^j(Gns;Up^Un&3IE)fpt7itgbt39a%yfC=)lS(w!im39m z<~$y!6;a)Z^+kA`MnqMYb}Yl=v>~dwxTp;trwLKTm|P1 z;BmPTvt4A~2G2QqjIZ9)(mOkIA|}1f0j-1g{MDP|&nKtvZ|wE)k3MLemuR;v{1I-U zz^xRNu%v+N;_LKFj(!sE0ciU3OE zaT*Y#1E#{`awA56ZcJxq_Bs_Fhu_6}Ese_zW9k<5h$0squyp0aFx(Ka;}anpbBxEem(}?B!@okrUa7EJBpV<1Qk~;UTe) zG4qH4?@0@~0drDELIAGL9O(c600d`2O+f$vv5yPVi|K~#7F?c8B* z5S@!{6BG_e@ zW!{;m$@@vMkH8EQ_q7D9-WYi1Us#z&*;BKXCoF%0^{bE*xQ$ zfP&Xd?h?0a=Vq*kbb$MK5-TDVU>lyqh)4t2g(tBgQULbFlb8^b10IVfu^=V|9Ev9~ zASMGm6;Dcym;|sdUUUCPTsBCr5B*+B#OQ#>;7xD7PjG#F_4Jw*F)H8?Jc$)C8sI5- z5+h<1zz}#68=^X3NIZ!NQ58@FPhvq-1JuNm7!XweW8g`t5rYH9#FJ7YW-f4N52~** z@em$M{%bif=H=sTS-QXl2h4r`u9@z1i_2^D9LG-Tv84GVa_6pHI(Zq`q z5M83!7v(L>vMkH8EX%Si%d#xXvUVDe(|w>CW9;Coa{u<~MR8gGS^j!?_3VR-9LB`h zn1fSHZA}Cdua>J*wKgBC`|Hm)-`=WRiNu>%jCZ{`-X;DEm?|GfDt>v)#KBKE*@ z%^LA+J-4u_ZErhU?@H)+2R!}d+!yb*^7mtVn-l{vH6Bvm;;V(ofQO=NG7pW&f`_7= z<`4>z2@gd*(dJY{HarylRIj0kjCd$2AR2bC+ z6)`m)N(zXEA~N8i4?m0f_n{GT|W_K-7iEhKHyCQ5zy79-;$8`-rS~h!PM9 rV(st+jGTD%-G{FLwJgiBtik;Sa&Lvb3--h;00000NkvXXu0mjfVZCF~ literal 0 HcmV?d00001 diff --git a/example/src/main/res/drawable-xxhdpi/collapse.png b/example/src/main/res/drawable-xxhdpi/collapse.png new file mode 100644 index 0000000000000000000000000000000000000000..f67cc15a9d520bdc6baf88fc8c55f81432733338 GIT binary patch literal 545 zcmV++0^a?JP)KaQg1+_qTIkGTNh028(S3x z@*eX@)bvXT)6nI85_4K^m0U~5UuB3zI9pGOwM&QeJM$yc56t^AtEWzu#S{-TUOKw338a)CYKr-Uj=!zSNCty5*-oTwP(M00Tm3jjb73Bsl*}9mieWjyB zKGIGf8`6JbWPrZ>SPXOqAQW1nP7b0i`~$)m5QVTb%bxJD;C%b~w%Y@ONPuIwvUzGq zh4cna!R3)4y?}FYdEUsvz-c(f;2i%;2^}Cp3MkMl+|AuX^41?bZ`3OI!RzLwl9V#u zT(3U9_CLSCF=yaBTz*W6bOPGosFBt{7aS#$gJo$ZFI;eW_@4aaF_q0MtE_?FDce=7 zo(paoQmPrFSqmtNqH^4fT2Qd#{iuyIAQTFPLW>E%WRLb5r%-_^tgiSNZVdaasK;#t>rtu;_Eai+!( z^J81&IL@pba>3hRne~1U_iwn5Q`Z}@IxHDvy;iNj`^Vq~EOCM}r|T1^9kmOR0_P00 zMN;APN+{Uq5^{zmc|x8Vb*f+A9+yD{#>OE0`~1-b`+=xSoVNFap#oMgV4P&yA3rNxuHG*-+U zkq|-%SKxHKFT@CQ?HeI@d^kLbR4@D6oqYeEKZS_BwmKLmlx0%l`}%9ajJ8-?72G|c z7VE^U*3LyC&m|jr9w+*LDXudVJ9o@fs(1M7=lpTE-{Ay`{%dRBjj7oB`RCWS_fizp zzr)OE>sX+CN;9H8Vu2D2nrN?BpasL4XwO)n2E&qQ@7QKtF>*Q{%BqsVKTY-XWpi-n z*k)}pG!;F@G8X8Ubl247J;XW|OoJgc+9MXsgJCY(D;8XWVJzA+7TkiNAMG8x8GL%< zAt8hiLI@#*5IS(TQZswfaQ%N6+FP^i(P}E!;QoE+Eu!6m$8NfNN4o@1O&Gv4+B|qJ zw&fLV8k`#2@`yGIo*R_a4@4CMubD=h1gA^|Ew)Rfpa(A*fo>5^4PGKuwVQcN6%sSd?>!E5Yh@Zt8OOBa}zV(nb0<~J3y7iDf k@3mZ8?NWBchY&8?AODeG`eR_{rvLx|07*qoM6N<$f-LLtnE(I) literal 0 HcmV?d00001 diff --git a/example/src/main/res/drawable-xxxhdpi/expand.png b/example/src/main/res/drawable-xxxhdpi/expand.png new file mode 100644 index 0000000000000000000000000000000000000000..54f404b9d8396773bbeafc7a3e3024694007efc1 GIT binary patch literal 606 zcmV-k0-^nhP)jK~#7F?b^Rj z!ax+j@po;y^CxsOBpMlA8QscYLfrVv*bIpaj!ygwCK|)Y=*X`0qz^8Fl>WN+UTb{c z#D(a)ev%`#2LPI;X_|J_I7#C1IEkT!3<#HDZI~`_@hBM1X7d#YCJH{l#`~96(r7Vo z4%Q`#76BJvU1Dfo591b$DX@nf zZ*Q8}A$az-T&}M!`cEc=!S;eil=sZn_vOd+W&b&~a1%u4R{F3&(=<)fG)>dAe;nbN zmYrtLs?<+3*(2gtnoff#7E&I**pa;%Xq+DOwhb sD}r!8=