feat: Enhance DeviceConfirmScreen with animated color transitions and improved layout
This commit is contained in:
@@ -1,7 +1,9 @@
|
||||
package com.rosetta.messenger.ui.auth
|
||||
|
||||
import android.os.Build
|
||||
import androidx.compose.animation.animateColorAsState
|
||||
import androidx.compose.animation.core.FastOutSlowInEasing
|
||||
import androidx.compose.animation.core.CubicBezierEasing
|
||||
import androidx.compose.animation.core.animateFloat
|
||||
import androidx.compose.animation.core.infiniteRepeatable
|
||||
import androidx.compose.animation.core.rememberInfiniteTransition
|
||||
@@ -16,6 +18,7 @@ import androidx.compose.foundation.layout.Spacer
|
||||
import androidx.compose.foundation.layout.fillMaxSize
|
||||
import androidx.compose.foundation.layout.fillMaxWidth
|
||||
import androidx.compose.foundation.layout.height
|
||||
import androidx.compose.foundation.layout.statusBarsPadding
|
||||
import androidx.compose.foundation.layout.navigationBarsPadding
|
||||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.foundation.layout.size
|
||||
@@ -36,7 +39,6 @@ import androidx.compose.runtime.rememberUpdatedState
|
||||
import androidx.compose.ui.Alignment
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.draw.clip
|
||||
import androidx.compose.ui.graphics.Brush
|
||||
import androidx.compose.ui.graphics.Color
|
||||
import androidx.compose.ui.text.font.FontWeight
|
||||
import androidx.compose.ui.text.style.TextAlign
|
||||
@@ -62,15 +64,36 @@ fun DeviceConfirmScreen(
|
||||
isDarkTheme: Boolean,
|
||||
onExit: () -> Unit
|
||||
) {
|
||||
val backgroundTop = if (isDarkTheme) Color(0xFF17181D) else Color(0xFFF4F7FC)
|
||||
val backgroundBottom = if (isDarkTheme) Color(0xFF121316) else Color(0xFFE9EEF7)
|
||||
val cardColor = if (isDarkTheme) Color(0xFF23252B) else Color.White
|
||||
val cardBorderColor = if (isDarkTheme) Color(0xFF343844) else Color(0xFFDCE4F0)
|
||||
val textColor = if (isDarkTheme) Color(0xFFF2F3F5) else Color(0xFF1B1C1F)
|
||||
val secondaryTextColor = if (isDarkTheme) Color(0xFFB2B5BD) else Color(0xFF6F7480)
|
||||
val accentColor = if (isDarkTheme) Color(0xFF4A9FFF) else PrimaryBlue
|
||||
val deviceCardColor = if (isDarkTheme) Color(0xFF1A1C22) else Color(0xFFF5F8FD)
|
||||
val exitButtonColor = if (isDarkTheme) Color(0xFF3D2227) else Color(0xFFFFEAED)
|
||||
val themeAnimSpec =
|
||||
tween<Color>(durationMillis = 500, easing = CubicBezierEasing(0.4f, 0f, 0.2f, 1f))
|
||||
|
||||
val backgroundColor by
|
||||
animateColorAsState(
|
||||
targetValue = if (isDarkTheme) AuthBackground else AuthBackgroundLight,
|
||||
animationSpec = themeAnimSpec
|
||||
)
|
||||
val surfaceColor by
|
||||
animateColorAsState(
|
||||
targetValue = if (isDarkTheme) AuthSurface else AuthSurfaceLight,
|
||||
animationSpec = themeAnimSpec
|
||||
)
|
||||
val borderColor by
|
||||
animateColorAsState(
|
||||
targetValue = if (isDarkTheme) Color(0xFF3E3E43) else Color(0xFFE3E3E8),
|
||||
animationSpec = themeAnimSpec
|
||||
)
|
||||
val textColor by
|
||||
animateColorAsState(
|
||||
targetValue = if (isDarkTheme) Color.White else Color.Black,
|
||||
animationSpec = themeAnimSpec
|
||||
)
|
||||
val secondaryTextColor by
|
||||
animateColorAsState(
|
||||
targetValue = if (isDarkTheme) Color(0xFF8E8E93) else Color(0xFF666666),
|
||||
animationSpec = themeAnimSpec
|
||||
)
|
||||
val accentColor = PrimaryBlue
|
||||
val exitButtonColor = if (isDarkTheme) Color(0xFF3A2629) else Color(0xFFFFEAED)
|
||||
val exitButtonTextColor = Color(0xFFFF5E61)
|
||||
val onExitState by rememberUpdatedState(onExit)
|
||||
val scope = rememberCoroutineScope()
|
||||
@@ -105,147 +128,149 @@ fun DeviceConfirmScreen(
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.fillMaxSize()
|
||||
.background(
|
||||
brush =
|
||||
Brush.verticalGradient(
|
||||
colors = listOf(backgroundTop, backgroundBottom)
|
||||
)
|
||||
)
|
||||
.background(backgroundColor)
|
||||
.statusBarsPadding()
|
||||
.navigationBarsPadding()
|
||||
.padding(horizontal = 22.dp),
|
||||
contentAlignment = Alignment.Center
|
||||
) {
|
||||
Surface(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.widthIn(max = 400.dp),
|
||||
color = cardColor,
|
||||
shape = RoundedCornerShape(28.dp),
|
||||
border = BorderStroke(1.dp, cardBorderColor)
|
||||
Column(
|
||||
modifier =
|
||||
Modifier
|
||||
.fillMaxWidth()
|
||||
.widthIn(max = 420.dp),
|
||||
horizontalAlignment = Alignment.CenterHorizontally
|
||||
) {
|
||||
Column(
|
||||
modifier = Modifier.padding(horizontal = 22.dp, vertical = 24.dp),
|
||||
horizontalAlignment = Alignment.CenterHorizontally,
|
||||
verticalArrangement = Arrangement.Center
|
||||
Spacer(modifier = Modifier.weight(0.2f))
|
||||
|
||||
Box(
|
||||
modifier =
|
||||
Modifier
|
||||
.size(102.dp)
|
||||
.clip(RoundedCornerShape(24.dp))
|
||||
.background(accentColor.copy(alpha = if (isDarkTheme) 0.14f else 0.12f)),
|
||||
contentAlignment = Alignment.Center
|
||||
) {
|
||||
Box(
|
||||
modifier =
|
||||
Modifier
|
||||
.size(118.dp)
|
||||
.clip(CircleShape)
|
||||
.background(accentColor.copy(alpha = if (isDarkTheme) 0.16f else 0.1f)),
|
||||
contentAlignment = Alignment.Center
|
||||
LottieAnimation(
|
||||
composition = composition,
|
||||
progress = { progress },
|
||||
modifier = Modifier.size(82.dp)
|
||||
)
|
||||
}
|
||||
|
||||
Spacer(modifier = Modifier.height(18.dp))
|
||||
|
||||
Row(verticalAlignment = Alignment.CenterVertically) {
|
||||
Icon(
|
||||
imageVector = TablerIcons.DeviceMobile,
|
||||
contentDescription = null,
|
||||
tint = accentColor,
|
||||
modifier = Modifier.size(16.dp)
|
||||
)
|
||||
Spacer(modifier = Modifier.size(6.dp))
|
||||
Text(
|
||||
text = "NEW DEVICE REQUEST",
|
||||
color = accentColor,
|
||||
fontSize = 12.sp,
|
||||
fontWeight = FontWeight.SemiBold
|
||||
)
|
||||
}
|
||||
|
||||
Spacer(modifier = Modifier.height(12.dp))
|
||||
|
||||
Text(
|
||||
text = "Waiting for approval",
|
||||
color = textColor,
|
||||
fontSize = 30.sp,
|
||||
lineHeight = 36.sp,
|
||||
fontWeight = FontWeight.Bold,
|
||||
textAlign = TextAlign.Center
|
||||
)
|
||||
|
||||
Spacer(modifier = Modifier.height(10.dp))
|
||||
|
||||
Text(
|
||||
text = "Open Rosetta on your first device and approve this login request.",
|
||||
color = secondaryTextColor,
|
||||
fontSize = 15.sp,
|
||||
textAlign = TextAlign.Center,
|
||||
lineHeight = 22.sp
|
||||
)
|
||||
|
||||
Spacer(modifier = Modifier.height(20.dp))
|
||||
|
||||
Surface(
|
||||
modifier = Modifier.fillMaxWidth(),
|
||||
color = surfaceColor,
|
||||
shape = RoundedCornerShape(14.dp),
|
||||
border = BorderStroke(1.dp, borderColor)
|
||||
) {
|
||||
Column(
|
||||
modifier = Modifier.padding(horizontal = 14.dp, vertical = 12.dp),
|
||||
verticalArrangement = Arrangement.spacedBy(4.dp)
|
||||
) {
|
||||
LottieAnimation(
|
||||
composition = composition,
|
||||
progress = { progress },
|
||||
modifier = Modifier.size(96.dp)
|
||||
)
|
||||
}
|
||||
|
||||
Spacer(modifier = Modifier.height(16.dp))
|
||||
|
||||
Row(verticalAlignment = Alignment.CenterVertically) {
|
||||
Icon(
|
||||
imageVector = TablerIcons.DeviceMobile,
|
||||
contentDescription = null,
|
||||
tint = accentColor
|
||||
)
|
||||
Spacer(modifier = Modifier.size(6.dp))
|
||||
Text(
|
||||
text = "NEW DEVICE REQUEST",
|
||||
color = accentColor,
|
||||
text = "This device",
|
||||
color = secondaryTextColor,
|
||||
fontSize = 12.sp,
|
||||
fontWeight = FontWeight.Bold
|
||||
fontWeight = FontWeight.Medium
|
||||
)
|
||||
}
|
||||
|
||||
Spacer(modifier = Modifier.height(14.dp))
|
||||
|
||||
Text(
|
||||
text = "Waiting for approval",
|
||||
color = textColor,
|
||||
fontSize = 34.sp,
|
||||
lineHeight = 38.sp,
|
||||
fontWeight = FontWeight.Bold,
|
||||
textAlign = TextAlign.Center
|
||||
)
|
||||
|
||||
Spacer(modifier = Modifier.height(12.dp))
|
||||
|
||||
Text(
|
||||
text = "Open Rosetta on your first device and approve this login request.",
|
||||
color = secondaryTextColor,
|
||||
fontSize = 15.sp,
|
||||
textAlign = TextAlign.Center,
|
||||
lineHeight = 22.sp
|
||||
)
|
||||
|
||||
Spacer(modifier = Modifier.height(18.dp))
|
||||
|
||||
Surface(
|
||||
modifier = Modifier.fillMaxWidth(),
|
||||
color = deviceCardColor,
|
||||
shape = RoundedCornerShape(16.dp),
|
||||
border = BorderStroke(1.dp, cardBorderColor.copy(alpha = if (isDarkTheme) 0.7f else 1f))
|
||||
) {
|
||||
Column(
|
||||
modifier = Modifier.padding(horizontal = 14.dp, vertical = 12.dp),
|
||||
horizontalAlignment = Alignment.Start
|
||||
) {
|
||||
Text(
|
||||
text = "Device waiting for approval",
|
||||
color = secondaryTextColor,
|
||||
fontSize = 12.sp,
|
||||
fontWeight = FontWeight.SemiBold
|
||||
)
|
||||
Spacer(modifier = Modifier.height(4.dp))
|
||||
Text(
|
||||
text = localDeviceName,
|
||||
color = textColor,
|
||||
fontSize = 17.sp,
|
||||
fontWeight = FontWeight.SemiBold
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
Spacer(modifier = Modifier.height(16.dp))
|
||||
|
||||
Button(
|
||||
onClick = onExitState,
|
||||
modifier =
|
||||
Modifier
|
||||
.fillMaxWidth()
|
||||
.height(46.dp),
|
||||
colors = ButtonDefaults.buttonColors(
|
||||
containerColor = exitButtonColor,
|
||||
contentColor = exitButtonTextColor
|
||||
),
|
||||
border = BorderStroke(1.dp, exitButtonTextColor.copy(alpha = 0.35f)),
|
||||
shape = RoundedCornerShape(14.dp)
|
||||
) {
|
||||
Text(
|
||||
text = "Exit",
|
||||
fontSize = 16.sp,
|
||||
text = localDeviceName,
|
||||
color = textColor,
|
||||
fontSize = 17.sp,
|
||||
fontWeight = FontWeight.SemiBold
|
||||
)
|
||||
}
|
||||
|
||||
Spacer(modifier = Modifier.height(14.dp))
|
||||
|
||||
Row(
|
||||
verticalAlignment = Alignment.CenterVertically,
|
||||
horizontalArrangement = Arrangement.Center
|
||||
) {
|
||||
Text(
|
||||
text = "Waiting for confirmation",
|
||||
color = secondaryTextColor,
|
||||
fontSize = 12.sp
|
||||
)
|
||||
Spacer(modifier = Modifier.size(8.dp))
|
||||
WaitingDots(color = secondaryTextColor)
|
||||
}
|
||||
}
|
||||
|
||||
Spacer(modifier = Modifier.height(14.dp))
|
||||
|
||||
Text(
|
||||
text = "If this wasn't you, tap Exit.",
|
||||
color = secondaryTextColor,
|
||||
fontSize = 13.sp,
|
||||
textAlign = TextAlign.Center
|
||||
)
|
||||
|
||||
Spacer(modifier = Modifier.height(18.dp))
|
||||
|
||||
Button(
|
||||
onClick = onExitState,
|
||||
modifier =
|
||||
Modifier
|
||||
.fillMaxWidth()
|
||||
.height(52.dp),
|
||||
colors = ButtonDefaults.buttonColors(
|
||||
containerColor = exitButtonColor,
|
||||
contentColor = exitButtonTextColor
|
||||
),
|
||||
border = BorderStroke(1.dp, exitButtonTextColor.copy(alpha = 0.35f)),
|
||||
shape = RoundedCornerShape(14.dp)
|
||||
) {
|
||||
Text(
|
||||
text = "Exit",
|
||||
fontSize = 17.sp,
|
||||
fontWeight = FontWeight.SemiBold
|
||||
)
|
||||
}
|
||||
|
||||
Spacer(modifier = Modifier.height(14.dp))
|
||||
|
||||
Row(
|
||||
verticalAlignment = Alignment.CenterVertically,
|
||||
horizontalArrangement = Arrangement.Center
|
||||
) {
|
||||
Text(
|
||||
text = "Waiting for confirmation",
|
||||
color = secondaryTextColor,
|
||||
fontSize = 12.sp
|
||||
)
|
||||
Spacer(modifier = Modifier.size(8.dp))
|
||||
WaitingDots(color = secondaryTextColor)
|
||||
}
|
||||
|
||||
Spacer(modifier = Modifier.weight(0.24f))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user