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:
2026-08-06 17:11:10 +02:00
parent c1c8e21ba3
commit 73b8e4480a
@@ -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")
}
}