feat: redesign LoginScreen with icon, branding, polished layout
- Sports icon in primaryContainer circle (80dp) - 'MyIce' branding (dropped 'K' tech codename) - 'Votre calendrier hockey' subtitle - Login icon on connect button - Centered vertical layout with proper spacing
This commit is contained in:
@@ -17,14 +17,22 @@
|
||||
|
||||
package ch.parano.myicek.ui.screens
|
||||
|
||||
import androidx.compose.foundation.background
|
||||
import androidx.compose.foundation.layout.Arrangement
|
||||
import androidx.compose.foundation.layout.Box
|
||||
import androidx.compose.foundation.layout.Column
|
||||
import androidx.compose.foundation.layout.Spacer
|
||||
import androidx.compose.foundation.layout.fillMaxSize
|
||||
import androidx.compose.foundation.layout.height
|
||||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.foundation.layout.size
|
||||
import androidx.compose.foundation.shape.CircleShape
|
||||
import androidx.compose.material.icons.Icons
|
||||
import androidx.compose.material.icons.automirrored.filled.Login
|
||||
import androidx.compose.material.icons.filled.SportsHockey
|
||||
import androidx.compose.material3.Button
|
||||
import androidx.compose.material3.CircularProgressIndicator
|
||||
import androidx.compose.material3.Icon
|
||||
import androidx.compose.material3.MaterialTheme
|
||||
import androidx.compose.material3.Scaffold
|
||||
import androidx.compose.material3.SnackbarHost
|
||||
@@ -37,10 +45,12 @@ import androidx.compose.runtime.getValue
|
||||
import androidx.compose.runtime.remember
|
||||
import androidx.compose.ui.Alignment
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.draw.clip
|
||||
import androidx.compose.ui.text.font.FontWeight
|
||||
import androidx.compose.ui.unit.dp
|
||||
import ch.parano.myicek.viewmodel.AuthViewModel
|
||||
import ch.parano.myicek.ui.theme.Dimens
|
||||
import ch.parano.myicek.viewmodel.AuthState
|
||||
import ch.parano.myicek.viewmodel.AuthViewModel
|
||||
|
||||
@Composable
|
||||
fun LoginScreen(
|
||||
@@ -65,22 +75,44 @@ fun LoginScreen(
|
||||
horizontalAlignment = Alignment.CenterHorizontally,
|
||||
verticalArrangement = Arrangement.Center,
|
||||
) {
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.size(80.dp)
|
||||
.clip(CircleShape)
|
||||
.background(MaterialTheme.colorScheme.primaryContainer),
|
||||
contentAlignment = Alignment.Center,
|
||||
) {
|
||||
Icon(
|
||||
imageVector = Icons.Filled.SportsHockey,
|
||||
contentDescription = null,
|
||||
modifier = Modifier.size(48.dp),
|
||||
tint = MaterialTheme.colorScheme.onPrimaryContainer,
|
||||
)
|
||||
}
|
||||
Spacer(Modifier.height(Dimens.lg))
|
||||
Text(
|
||||
text = "MyIceK",
|
||||
text = "MyIce",
|
||||
style = MaterialTheme.typography.headlineLarge,
|
||||
fontWeight = FontWeight.Bold,
|
||||
)
|
||||
Text(
|
||||
text = "Games",
|
||||
text = "Votre calendrier hockey",
|
||||
style = MaterialTheme.typography.titleMedium,
|
||||
color = MaterialTheme.colorScheme.onSurfaceVariant,
|
||||
)
|
||||
Spacer(modifier = Modifier.height(32.dp))
|
||||
Spacer(Modifier.height(Dimens.xxl))
|
||||
if (state is AuthState.Loading) {
|
||||
CircularProgressIndicator()
|
||||
} else {
|
||||
Button(
|
||||
onClick = { viewModel.login() },
|
||||
modifier = Modifier.height(48.dp),
|
||||
) {
|
||||
Icon(
|
||||
imageVector = Icons.AutoMirrored.Filled.Login,
|
||||
contentDescription = null,
|
||||
)
|
||||
Spacer(Modifier.size(Dimens.sm))
|
||||
Text("Se connecter avec Infomaniak")
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user