Adding welcome, register and login screens

src/.idea/deploymentTargetDropDown.xml

@@ -7,11 +7,11 @@
         <deviceKey>
           <Key>
             <type value="VIRTUAL_DEVICE_PATH" />
-            <value value="C:\Users\Siph9\.android\avd\Pixel_4_XL_API_33.avd" />
+            <value value="C:\Users\Siph9\.android\avd\pixel_5_-_api_33.avd" />
           </Key>
         </deviceKey>
       </Target>
     </targetSelectedWithDropDown>
-    <timeTargetWasSelectedWithDropDown value="2023-09-19T09:48:09.318429700Z" />
+    <timeTargetWasSelectedWithDropDown value="2023-09-26T09:14:33.560818300Z" />
   </component>
 </project>

src/app/src/main/java/fr/iut/alldev/allin/MainActivity.kt

@@ -4,7 +4,7 @@ import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
 import com.google.accompanist.systemuicontroller.rememberSystemUiController
-import fr.iut.alldev.allin.ui.navigation.drawer.AllInDrawer
+import fr.iut.alldev.allin.ui.navigation.AllInNavHost
 import fr.iut.alldev.allin.ui.theme.AllInTheme
 
 class MainActivity : ComponentActivity() {
@@ -16,11 +16,11 @@ class MainActivity : ComponentActivity() {
             AllInTheme{
 
                 systemUiController.setStatusBarColor(AllInTheme.colors.allIn_Dark)
-                systemUiController.setNavigationBarColor(AllInTheme.colors.allIn_White)
+                systemUiController.setNavigationBarColor(AllInTheme.themeColors.main_surface)
                 systemUiController.isNavigationBarVisible = false
                 systemUiController.isStatusBarVisible = false
 
-                AllInDrawer()
+                AllInNavHost()
             }
         }
     }

src/app/src/main/java/fr/iut/alldev/allin/ext/Modifier.kt

@@ -0,0 +1,94 @@
+package fr.iut.alldev.allin.ext
+
+import android.graphics.BlurMaskFilter
+import android.graphics.Shader
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.drawBehind
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.LinearGradientShader
+import androidx.compose.ui.graphics.Paint
+import androidx.compose.ui.graphics.drawscope.drawIntoCanvas
+import androidx.compose.ui.graphics.toArgb
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun Modifier.shadow(
+    color: Color = Color.Black,
+    offsetX: Dp = 0.dp,
+    offsetY: Dp = 0.dp,
+    blurRadius: Dp = 0.dp,
+    alpha: Float = 1f,
+    cornerRadius: Dp = 0.dp
+) = then(
+    drawBehind {
+        drawIntoCanvas { canvas ->
+            val paint = Paint()
+            val frameworkPaint = paint.asFrameworkPaint()
+            if (blurRadius != 0.dp) {
+                frameworkPaint.maskFilter =
+                    BlurMaskFilter(blurRadius.toPx(), BlurMaskFilter.Blur.NORMAL)
+            }
+            frameworkPaint.color = color.toArgb()
+            frameworkPaint.alpha = (255*alpha).toInt()
+            val leftPixel = offsetX.toPx()
+            val topPixel = offsetY.toPx()
+            val rightPixel = size.width + topPixel
+            val bottomPixel = size.height + leftPixel
+
+            canvas.drawRoundRect(
+                left = leftPixel,
+                top = topPixel,
+                right = rightPixel,
+                bottom = bottomPixel,
+                paint = paint,
+                radiusX = cornerRadius.toPx(),
+                radiusY = cornerRadius.toPx()
+            )
+        }
+    }
+)
+
+fun Modifier.shadow(
+    colors: List<Color> = listOf(Color.Black),
+    offsetX: Dp = 0.dp,
+    offsetY: Dp = 0.dp,
+    blurRadius: Dp = 0.dp,
+    cornerRadius: Dp = 0.dp,
+    alpha: Float = 1f
+) = then(
+    drawBehind {
+        drawIntoCanvas { canvas ->
+            val shader: Shader =
+                LinearGradientShader(
+                    Offset(0f, 0f),
+                    Offset(size.width, 0f),
+                    colors
+                )
+            val paint = Paint()
+            val frameworkPaint = paint.asFrameworkPaint()
+            if (blurRadius != 0.dp) {
+                frameworkPaint.maskFilter =
+                    BlurMaskFilter(blurRadius.toPx(), BlurMaskFilter.Blur.NORMAL)
+            }
+            frameworkPaint.shader = shader
+            frameworkPaint.alpha = (255*alpha).toInt()
+            val leftPixel = offsetX.toPx()
+            val topPixel = offsetY.toPx()
+            val rightPixel = size.width + topPixel
+            val bottomPixel = size.height + leftPixel
+
+            canvas.drawRoundRect(
+                left = leftPixel,
+                top = topPixel,
+                right = rightPixel,
+                bottom = bottomPixel,
+                paint = paint,
+                radiusX = cornerRadius.toPx(),
+                radiusY = cornerRadius.toPx()
+            )
+        }
+    }
+)

src/app/src/main/java/fr/iut/alldev/allin/ui/bet/betScreen.kt

@@ -1,7 +1,8 @@
-package fr.iut.alldev.allin.ui.home
+package fr.iut.alldev.allin.ui.bet
 
 import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.background
+import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.LazyRow
@@ -13,23 +14,45 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import fr.iut.alldev.allin.R
+import fr.iut.alldev.allin.ext.shadow
+import fr.iut.alldev.allin.ui.bet.components.BetScreenCard
+import fr.iut.alldev.allin.ui.bet.components.BetScreenPopularCard
 import fr.iut.alldev.allin.ui.core.AllInChip
-import fr.iut.alldev.allin.ui.home.components.HomeBetCard
-import fr.iut.alldev.allin.ui.home.components.HomePopularCards
 import fr.iut.alldev.allin.ui.theme.AllInTheme
 
 @OptIn(ExperimentalFoundationApi::class)
 @Composable
-fun Home(){
+fun BetScreen(){
 
     val horizontalPadding = 23.dp
 
     LazyColumn{
         item {
-            HomePopularCards(
+            BetScreenPopularCard(
                 modifier = Modifier
+                    .fillMaxWidth()
                     .padding(horizontal = horizontalPadding)
-                    .padding(top = 23.dp),
+                    .padding(top = 23.dp, bottom = 10.dp)
+                    .let {
+                        if(isSystemInDarkTheme()){
+                            it.shadow(
+                                colors = listOf(
+                                    AllInTheme.colors.allIn_Pink,
+                                    AllInTheme.colors.allIn_Blue
+                                ),
+                                blurRadius = 10.dp,
+                                alpha = .5f,
+                                cornerRadius = 15.dp
+                            )
+                        }else{
+                            it.shadow(
+                                color = Color.Black,
+                                blurRadius = 10.dp,
+                                alpha = .3f,
+                                cornerRadius = 15.dp
+                            )
+                        }
+                    },
                 nbPlayers = 12,
                 points = 2.35f,
                 pointUnit = "k",
@@ -41,11 +64,11 @@ fun Home(){
                     modifier = Modifier
                         .background(
                             Brush.verticalGradient(
-                                0.5f to AllInTheme.colors.allIn_White,
+                                0.5f to AllInTheme.themeColors.main_surface,
                                 1f to Color.Transparent
                             )
                         )
-                        .padding(vertical = 19.dp),
+                        .padding(top = 5.dp, bottom = 19.dp),
                     horizontalArrangement = Arrangement.spacedBy(9.dp)
                 ) {
                     item {
@@ -64,7 +87,7 @@ fun Home(){
             }
         }
         items(5){
-            HomeBetCard(
+            BetScreenCard(
                 creator = "Lucas",
                 category = "Études",
                 title = "Emre va réussir son TP de CI/CD mercredi?",

src/app/src/main/java/fr/iut/alldev/allin/ui/bet/components/betScreenCard.kt

@@ -1,5 +1,6 @@
-package fr.iut.alldev.allin.ui.home.components
+package fr.iut.alldev.allin.ui.bet.components
 
+import android.content.res.Configuration
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.*
 import androidx.compose.material.ripple.LocalRippleTheme
@@ -7,6 +8,7 @@ import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Alignment.Companion.CenterEnd
 import androidx.compose.ui.Alignment.Companion.CenterHorizontally
@@ -28,7 +30,7 @@ import fr.iut.alldev.allin.ui.theme.AllInRippleTheme
 import fr.iut.alldev.allin.ui.theme.AllInTheme
 
 @Composable
-fun HomeBetCard(
+fun BetScreenCard(
     creator: String,
     category: String,
     title: String,
@@ -40,7 +42,7 @@ fun HomeBetCard(
 ) {
     AllInCard(
         modifier = modifier,
-        radius = 7
+        radius = 16.dp
     ){
         Column(Modifier.fillMaxWidth()) {
             Row(
@@ -50,22 +52,26 @@ fun HomeBetCard(
                 HighlightedText(
                     text = stringResource(id = R.string.Proposed_by_x, creator),
                     query = creator,
-                    highlightStyle = SpanStyle(fontWeight = FontWeight.Bold, color = AllInTheme.colors.allIn_Dark),
+                    highlightStyle = SpanStyle(
+                        fontWeight = FontWeight.Bold,
+                        color = AllInTheme.themeColors.on_main_surface
+                    ),
                     fontSize = 12.sp,
                     style = AllInTheme.typography.s,
-                    color = AllInTheme.colors.allIn_LightGrey300
+                    color = AllInTheme.themeColors.on_background_2
                 )
             }
             Column(Modifier.padding(horizontal = 19.dp, vertical = 11.dp)) {
                 Text(
                     text = category,
                     fontSize = 15.sp,
-                    color = AllInTheme.colors.allIn_LightGrey300,
+                    color = AllInTheme.themeColors.on_background_2,
                     style = AllInTheme.typography.m
                 )
                 Text(
                     text = title,
                     fontSize = 20.sp,
+                    color = AllInTheme.themeColors.on_main_surface,
                     style = AllInTheme.typography.h1
                 )
                 Spacer(modifier = Modifier.height(11.dp))
@@ -76,22 +82,22 @@ fun HomeBetCard(
                         text = stringResource(id = R.string.Starting),
                         fontSize = 15.sp,
                         style = AllInTheme.typography.m,
-                        color = AllInTheme.colors.allIn_LightGrey300,
+                        color = AllInTheme.themeColors.on_background_2
                     )
-                    HomeBetCardDateTimeChip(
+                    DateTimeChip(
                         text = date,
                         modifier = Modifier.padding(horizontal = 8.dp)
                     )
-                    HomeBetCardDateTimeChip(time)
+                    DateTimeChip(time)
                 }
             }
             HorizontalDivider(
                 thickness = 1.dp,
-                color = AllInTheme.colors.allIn_LightGrey100
+                color = AllInTheme.themeColors.border
             )
             Column(
                 Modifier
-                    .background(AllInTheme.colors.allIn_LightGrey50)
+                    .background(AllInTheme.themeColors.background_2)
             ) {
                 Row(
                     modifier = Modifier
@@ -99,16 +105,19 @@ fun HomeBetCard(
                         .padding(7.dp),
                     verticalAlignment = Alignment.CenterVertically
                 ){
-                    val nRepeat = if (nbPlayer > 5) 5 else nbPlayer
+                    val nRepeat = remember{
+                        if (nbPlayer > 5) 5 else nbPlayer
+                    }
+
                     Box(
-                        Modifier.width((nRepeat*15).dp)
+                        Modifier.width((nRepeat*17).dp)
                     ){
                         repeat(nRepeat) {
                             ProfilePicture(
-                                size = 30.dp,
+                                size = 35.dp,
                                 modifier = Modifier
                                     .align(CenterEnd)
-                                    .offset(x = (it * -15).dp)
+                                    .offset(x = (it * -17).dp)
                                     .zIndex(-it.toFloat())
                             )
                         }
@@ -121,7 +130,7 @@ fun HomeBetCard(
                             nbPlayer
                         ),
                         style = AllInTheme.typography.m,
-                        color = AllInTheme.colors.allIn_LightGrey300
+                        color = AllInTheme.themeColors.on_background_2
                     )
                 }
                 CompositionLocalProvider(
@@ -139,10 +148,11 @@ fun HomeBetCard(
 }
 
 @Preview
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
 @Composable
-private fun HomeBetCardPreview() {
+private fun BetScreenCardPreview() {
     AllInTheme {
-        HomeBetCard(
+        BetScreenCard(
             creator = "Lucas",
             category = "Études",
             title = "Emre va réussir son TP de CI/CD mercredi?",

src/app/src/main/java/fr/iut/alldev/allin/ui/bet/components/betScreenPopularCard.kt

@@ -0,0 +1,131 @@
+package fr.iut.alldev.allin.ui.bet.components
+
+import androidx.compose.foundation.layout.*
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.pluralStringResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.SpanStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import fr.iut.alldev.allin.R
+import fr.iut.alldev.allin.ui.core.AllInCard
+import fr.iut.alldev.allin.ui.core.HighlightedText
+import fr.iut.alldev.allin.ui.theme.AllInTheme
+import kotlin.math.ceil
+
+@Composable
+fun BetScreenPopularCard(
+    nbPlayers: Int,
+    points: Float,
+    pointUnit: String,
+    title: String,
+    modifier: Modifier = Modifier
+) {
+    AllInCard(
+        modifier = modifier,
+        backgroundColor = AllInTheme.colors.allIn_Dark,
+        borderWidth = 2.dp,
+        borderBrush = AllInTheme.colors.allIn_MainGradient
+    ) {
+        Column(modifier = Modifier.padding(13.dp)) {
+            Row(verticalAlignment = Alignment.CenterVertically) {
+                Icon(
+                    painter = painterResource(id = R.drawable.allin_fire),
+                    modifier = Modifier.size(15.dp),
+                    contentDescription = null,
+                    tint = AllInTheme.colors.allIn_Pink
+                )
+                Spacer(modifier = Modifier.width(3.dp))
+                Text(
+                    text = stringResource(id = R.string.Popular),
+                    color = AllInTheme.colors.allIn_Pink,
+                    fontSize = 17.sp,
+                    style = AllInTheme.typography.h2
+                )
+            }
+            Text(
+                text = title,
+                color = AllInTheme.colors.white,
+                fontSize = 20.sp,
+                style = AllInTheme.typography.h1,
+                modifier = Modifier.padding(vertical = 22.dp)
+            )
+            Row(modifier = Modifier.align(alignment = Alignment.CenterHorizontally)) {
+                HighlightedText(
+                    text = pluralStringResource(
+                        id = R.plurals.n_players,
+                        nbPlayers,
+                        nbPlayers
+                    ),
+                    query = nbPlayers.toString(),
+                    highlightStyle = SpanStyle(
+                        fontWeight = FontWeight.Bold,
+                        color = AllInTheme.colors.allIn_Pink
+                    ),
+                    color = AllInTheme.colors.white,
+                    style = AllInTheme.typography.r,
+                    fontSize = 15.sp
+                )
+                Text(
+                    text = " - ",
+                    color = AllInTheme.colors.white,
+                    style = AllInTheme.typography.r,
+                    fontSize = 15.sp
+                )
+                val pointsText = if (points % 1 == 0f){
+                    stringResource(id = R.string.int_and_unit, points.toInt(), pointUnit)
+                }else{
+                    stringResource(id = R.string.float_and_unit, points, pointUnit)
+                }
+                HighlightedText(
+                    text = pluralStringResource(
+                        id = R.plurals.n_points_at_stake,
+                        if(pointUnit.isEmpty()) ceil(points).toInt() else 2,
+                        pointsText
+                    ),
+                    query = pointsText,
+                    highlightStyle = SpanStyle(
+                        fontWeight = FontWeight.Bold,
+                        color = AllInTheme.colors.allIn_Pink
+                    ),
+                    color = AllInTheme.colors.white,
+                    style = AllInTheme.typography.r,
+                    fontSize = 15.sp
+                )
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun BetScreenPopularCardPreview() {
+    AllInTheme {
+        BetScreenPopularCard(
+            nbPlayers = 12,
+            points = 2.35f,
+            pointUnit = "k",
+            title = "Emre va réussir son TP de CI/CD mercredi?"
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun BetScreenPopularCardSingularPreview() {
+    AllInTheme {
+        BetScreenPopularCard(
+            nbPlayers = 1,
+            points = 1.0f,
+            pointUnit = "",
+            title = "Emre va réussir son TP de CI/CD mercredi?"
+        )
+    }
+}

src/app/src/main/java/fr/iut/alldev/allin/ui/core/AllInButton.kt

@@ -0,0 +1,49 @@
+package fr.iut.alldev.allin.ui.core
+
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import fr.iut.alldev.allin.ui.theme.AllInTheme
+
+@Composable
+fun AllInButton(
+    color: Color,
+    text: String,
+    textColor: Color,
+    modifier: Modifier = Modifier,
+    onClick: ()->Unit
+) {
+    AllInCard(onClick = onClick, modifier = modifier, radius = 50.dp, backgroundColor = color) {
+        Text(
+            text = text,
+            textAlign = TextAlign.Center,
+            style = AllInTheme.typography.h2,
+            color = textColor,
+            fontSize = 20.sp,
+            modifier = Modifier
+                .padding(vertical = 15.dp)
+                .fillMaxWidth(),
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun AllInButtonPreview() {
+    AllInTheme {
+        AllInButton(
+            color = AllInTheme.colors.allIn_LoginPurple,
+            text = "Connexion",
+            textColor = Color.White
+        ) {
+
+        }
+    }
+}

src/app/src/main/java/fr/iut/alldev/allin/ui/core/AllInCard.kt

@@ -1,50 +1,67 @@
 package fr.iut.alldev.allin.ui.core
 
 import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.shape.AbsoluteRoundedCornerShape
 import androidx.compose.material3.Card
 import androidx.compose.material3.CardDefaults
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.runtime.Composable
 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.unit.Dp
+import androidx.compose.ui.unit.dp
 import fr.iut.alldev.allin.ui.theme.AllInTheme
+import racra.compose.smooth_corner_rect_library.AbsoluteSmoothCornerShape
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun AllInCard(
     modifier: Modifier = Modifier,
     onClick: (()->Unit)? = null,
-    radius: Int = 15,
+    radius: Dp = 15.dp,
-    backgroundColor: Color = AllInTheme.colors.white,
+    backgroundColor: Color = AllInTheme.themeColors.background,
+    backgroundBrush: Brush? = null,
     borderWidth: Dp? = null,
-    borderColor: Color = AllInTheme.colors.allIn_LightGrey100,
+    borderColor: Color = AllInTheme.themeColors.border,
     borderBrush: Brush? = null,
     content: @Composable ()->Unit
 ) {
+
+    val cardShape = AbsoluteSmoothCornerShape(radius, smoothnessAsPercent = 100)
+    val cardModifier = modifier.fillMaxWidth()
+        .run {
+        backgroundBrush?.let{
+            this.clip(cardShape).background(it)
+        } ?: this
+    }
+    val cardBorders = borderWidth?.let{
+            width -> borderBrush?.let{BorderStroke(width, it)}
+        ?: BorderStroke(width, borderColor)
+    }
+    val cardColors = CardDefaults.cardColors(
+        containerColor = if(backgroundBrush!=null) Color.Transparent else backgroundColor
+    )
     onClick?.let {
         Card(
-            modifier = modifier.fillMaxWidth(),
+            modifier = cardModifier,
             onClick = it,
-            shape = AbsoluteRoundedCornerShape(radius),
+            shape = cardShape,
-            border = borderWidth?.let{ width -> borderBrush?.let{BorderStroke(width, it)} ?: BorderStroke(width, borderColor)},
+            border = cardBorders,
-            colors = CardDefaults.cardColors(containerColor = backgroundColor)
+            colors = cardColors,
         ) {
             content()
         }
     } ?: run {
         Card(
-            modifier = modifier.fillMaxWidth(),
+            modifier = cardModifier,
-            shape = AbsoluteRoundedCornerShape(radius),
+            shape = cardShape,
-            border = borderWidth?.let{ width -> borderBrush?.let{BorderStroke(width, it)} ?: BorderStroke(width, borderColor)},
+            border = cardBorders,
-            colors = CardDefaults.cardColors(containerColor = backgroundColor)
+            colors = cardColors
         ) {
             content()
         }
     }
-
 }
-

src/app/src/main/java/fr/iut/alldev/allin/ui/core/AllInChip.kt

@@ -1,8 +1,8 @@
 package fr.iut.alldev.allin.ui.core
 
+import android.content.res.Configuration
 import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.wrapContentSize
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Card
 import androidx.compose.material3.CardDefaults
@@ -24,12 +24,12 @@ fun AllInChip(
     modifier: Modifier = Modifier
 ) {
     Card(
-        modifier = modifier.wrapContentSize(),
+        modifier = modifier,
         shape = RoundedCornerShape(50),
         onClick = onClick,
-        border = if(!isSelected) BorderStroke(1.dp, AllInTheme.colors.allIn_LightGrey100) else null,
+        border = if(!isSelected) BorderStroke(1.dp, AllInTheme.themeColors.border) else null,
-        colors = CardDefaults.cardColors(containerColor = with(AllInTheme.colors){
+        colors = CardDefaults.cardColors(containerColor = with(AllInTheme){
-            if(isSelected) allIn_Purple else white
+            if(isSelected) colors.allIn_Purple else themeColors.background
         })
     ) {
         Text(
@@ -39,8 +39,8 @@ fun AllInChip(
             style = with(AllInTheme.typography) {
                 if (isSelected) h1 else r
             },
-            color = with(AllInTheme.colors){
+            color = with(AllInTheme){
-                if(isSelected) white else allIn_LightGrey300
+                if(isSelected) colors.white else themeColors.on_background_2
             }
 
         )
@@ -48,6 +48,7 @@ fun AllInChip(
 }
 
 @Preview
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
 @Composable
 private fun AllInChipPreviewUnselected() {
     AllInTheme {

src/app/src/main/java/fr/iut/alldev/allin/ui/core/AllInGradientButton.kt

@@ -0,0 +1,58 @@
+package fr.iut.alldev.allin.ui.core
+
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import fr.iut.alldev.allin.ext.shadow
+import fr.iut.alldev.allin.ui.theme.AllInTheme
+
+@Composable
+fun AllInGradientButton(
+    text: String,
+    modifier: Modifier = Modifier,
+    onClick: ()->Unit
+) {
+    AllInCard(
+        onClick = onClick,
+        modifier = modifier.shadow(
+            colors = listOf(
+                AllInTheme.colors.allIn_Pink,
+                AllInTheme.colors.allIn_Blue
+            ),
+            blurRadius = 20.dp,
+            alpha = .5f,
+            cornerRadius = 15.dp
+        ),
+        radius = 10.dp,
+        backgroundBrush = AllInTheme.colors.allIn_MainGradient
+    ) {
+        Text(
+            text = text,
+            textAlign = TextAlign.Center,
+            style = AllInTheme.typography.h2,
+            color = AllInTheme.colors.white,
+            fontSize = 20.sp,
+            modifier = Modifier
+                .padding(vertical = 15.dp)
+                .fillMaxWidth(),
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun AllInGradientButtonPreview() {
+    AllInTheme {
+        AllInGradientButton(
+            text = "Connexion"
+        ) {
+
+        }
+    }
+}

src/app/src/main/java/fr/iut/alldev/allin/ui/core/AllInTextField.kt

@@ -0,0 +1,188 @@
+package fr.iut.alldev.allin.ui.core
+
+import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.foundation.relocation.BringIntoViewRequester
+import androidx.compose.foundation.shape.AbsoluteRoundedCornerShape
+import androidx.compose.foundation.text.KeyboardActions
+import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Visibility
+import androidx.compose.material.icons.filled.VisibilityOff
+import androidx.compose.material3.*
+import androidx.compose.runtime.*
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.focus.onFocusChanged
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.text.TextRange
+import androidx.compose.ui.text.input.KeyboardType
+import androidx.compose.ui.text.input.PasswordVisualTransformation
+import androidx.compose.ui.text.input.TextFieldValue
+import androidx.compose.ui.text.input.VisualTransformation
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.sp
+import fr.iut.alldev.allin.ui.theme.AllInTheme
+import kotlinx.coroutines.launch
+
+@OptIn(ExperimentalFoundationApi::class)
+@Composable
+fun AllInTextField(
+    placeholder: String,
+    value: String,
+    maxChar: Int? = null,
+    modifier: Modifier = Modifier,
+    enabled: Boolean = true,
+    trailingIcon: ImageVector? = null,
+    trailingContent: @Composable (() -> Unit)? = null,
+    onValueChange: (String)->Unit,
+    bringIntoViewRequester: BringIntoViewRequester,
+    visualTransformation: VisualTransformation = VisualTransformation.None,
+    keyboardType: KeyboardType = KeyboardType.Text,
+    keyboardActions: KeyboardActions = KeyboardActions.Default
+) {
+    val scope = rememberCoroutineScope()
+    var hasFocus by remember { mutableStateOf(false) }
+
+    var textFieldValue by remember {
+        mutableStateOf(TextFieldValue(text = value, selection = TextRange(value.length)))
+    }
+
+    LaunchedEffect(key1 = value, block = {
+        textFieldValue = TextFieldValue(text = value, selection = TextRange(value.length))
+    })
+
+
+    OutlinedTextField(
+        modifier = modifier
+            .onFocusChanged {
+            hasFocus = it.hasFocus
+            if (it.isFocused) {
+                scope.launch {
+                    bringIntoViewRequester.bringIntoView()
+                }
+            }
+        },
+        visualTransformation = visualTransformation,
+        value = textFieldValue,
+        onValueChange = {
+            if(maxChar==null || it.text.length<=maxChar) {
+                textFieldValue = it
+                onValueChange(it.text)
+            }
+        },
+        placeholder = {
+            Text(
+                text = placeholder,
+                fontSize = 18.sp,
+                style = AllInTheme.typography.r,
+                color = AllInTheme.colors.allIn_LightGrey300
+            )
+        },
+        trailingIcon = trailingContent ?: trailingIcon?.let{
+            @Composable {
+                Icon(
+                    imageVector = it,
+                    contentDescription = null,
+                    tint = AllInTheme.colors.allIn_LightGrey300
+                )
+            }
+        },
+        textStyle = AllInTheme.typography.r,
+        singleLine = true,
+        enabled = enabled,
+        keyboardOptions = KeyboardOptions(keyboardType = keyboardType),
+        keyboardActions = keyboardActions,
+        shape = AbsoluteRoundedCornerShape(20),
+        colors =  OutlinedTextFieldDefaults.colors(
+            cursorColor = AllInTheme.colors.allIn_Dark,
+            focusedBorderColor = AllInTheme.colors.allIn_LightGrey300,
+            unfocusedBorderColor = AllInTheme.colors.allIn_LightGrey300,
+            focusedTextColor = AllInTheme.colors.allIn_Dark,
+            unfocusedTextColor = AllInTheme.colors.allIn_Dark,
+            focusedContainerColor = AllInTheme.colors.white,
+            unfocusedContainerColor = AllInTheme.colors.white
+
+        )
+    )
+}
+
+@OptIn(ExperimentalFoundationApi::class)
+@Composable
+fun AllInPasswordField(
+    placeholder: String,
+    value: String,
+    modifier: Modifier = Modifier,
+    keyboardType: KeyboardType = KeyboardType.Password,
+    keyboardActions: KeyboardActions = KeyboardActions.Default,
+    onValueChange: (String)->Unit,
+    bringIntoViewRequester: BringIntoViewRequester,
+    isHiddenByDefault: Boolean = true
+){
+    var hidden by remember{
+        mutableStateOf(isHiddenByDefault)
+    }
+        AllInTextField(
+            modifier = modifier,
+            placeholder = placeholder,
+            keyboardActions = keyboardActions,
+            visualTransformation = if (hidden) PasswordVisualTransformation() else VisualTransformation.None,
+            value = value,
+            onValueChange = onValueChange,
+            bringIntoViewRequester = bringIntoViewRequester,
+            trailingContent = {
+                IconButton(
+                    onClick = { hidden = !hidden }
+                ) {
+                    Icon(
+                        imageVector = if (hidden) Icons.Default.VisibilityOff else Icons.Default.Visibility,
+                        contentDescription = null,
+                        tint = AllInTheme.colors.allIn_LightGrey300
+                    )
+                }
+            },
+            keyboardType = keyboardType
+        )
+}
+
+@OptIn(ExperimentalFoundationApi::class)
+@Preview
+@Composable
+private fun AllInTextFieldPlaceholderPreview() {
+    AllInTheme {
+        AllInTextField(
+            placeholder = "Email",
+            value = "",
+            onValueChange = { },
+            bringIntoViewRequester = BringIntoViewRequester()
+        )
+    }
+}
+
+
+@OptIn(ExperimentalFoundationApi::class)
+@Preview
+@Composable
+private fun AllInTextFieldValuePreview() {
+    AllInTheme {
+        AllInTextField(
+            placeholder = "Email",
+            value = "JohnDoe@mail.com",
+            onValueChange = { },
+            bringIntoViewRequester = BringIntoViewRequester()
+        )
+    }
+}
+
+@OptIn(ExperimentalFoundationApi::class)
+@Preview
+@Composable
+private fun AllInTextFieldPasswordPreview() {
+    AllInTheme {
+        val (value, setValue) = mutableStateOf("")
+        AllInPasswordField(
+            placeholder = "Password",
+            value = value,
+            onValueChange = setValue,
+            bringIntoViewRequester = BringIntoViewRequester()
+        )
+    }
+}

src/app/src/main/java/fr/iut/alldev/allin/ui/core/DateTimeChip.kt

@@ -1,5 +1,6 @@
-package fr.iut.alldev.allin.ui.home.components
+package fr.iut.alldev.allin.ui.bet.components
 
+import android.content.res.Configuration
 import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.wrapContentSize
@@ -15,15 +16,15 @@ import androidx.compose.ui.unit.dp
 import fr.iut.alldev.allin.ui.theme.AllInTheme
 
 @Composable
-fun HomeBetCardDateTimeChip(
+fun DateTimeChip(
     text: String,
     modifier: Modifier = Modifier
 ) {
     Card(
         modifier = modifier.wrapContentSize(),
         shape = RoundedCornerShape(50),
-        border = BorderStroke(1.dp, AllInTheme.colors.allIn_LightGrey100),
+        border = BorderStroke(1.dp, AllInTheme.themeColors.border),
-        colors = CardDefaults.cardColors(containerColor = AllInTheme.colors.white)
+        colors = CardDefaults.cardColors(containerColor = AllInTheme.themeColors.background)
     ) {
         Text(
             text = text,
@@ -36,9 +37,10 @@ fun HomeBetCardDateTimeChip(
 }
 
 @Preview
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
 @Composable
 private fun HomeBetCardDateTimeChipPreview() {
     AllInTheme {
-        HomeBetCardDateTimeChip("11 Sept.")
+        DateTimeChip("11 Sept.")
     }
 }

src/app/src/main/java/fr/iut/alldev/allin/ui/home/components/homePopularCard.kt

@@ -1,142 +0,0 @@
-package fr.iut.alldev.allin.ui.home.components
-
-import androidx.compose.foundation.layout.*
-import androidx.compose.foundation.shape.AbsoluteRoundedCornerShape
-import androidx.compose.material3.Icon
-import androidx.compose.material3.Text
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.shadow
-import androidx.compose.ui.res.painterResource
-import androidx.compose.ui.res.pluralStringResource
-import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.text.SpanStyle
-import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
-import fr.iut.alldev.allin.R
-import fr.iut.alldev.allin.ui.core.AllInCard
-import fr.iut.alldev.allin.ui.core.HighlightedText
-import fr.iut.alldev.allin.ui.theme.AllInTheme
-import kotlin.math.ceil
-
-@Composable
-fun HomePopularCards(
-    nbPlayers: Int,
-    points: Float,
-    pointUnit: String,
-    title: String,
-    modifier: Modifier = Modifier
-) {
-    Box(modifier.padding(3.dp)) {
-        AllInCard(
-            modifier = Modifier
-                .fillMaxWidth()
-                .shadow(
-                    elevation = 2.dp,
-                    shape = AbsoluteRoundedCornerShape(15)
-                )
-                .padding(2.dp),
-            backgroundColor = AllInTheme.colors.allIn_Dark,
-            borderWidth = 2.dp,
-            borderBrush = AllInTheme.colors.allIn_MainGradient
-        ) {
-            Column(modifier = Modifier.padding(13.dp)) {
-                Row(verticalAlignment = Alignment.CenterVertically) {
-                    Icon(
-                        painter = painterResource(id = R.drawable.allin_fire),
-                        modifier = Modifier.size(20.dp),
-                        contentDescription = null,
-                        tint = AllInTheme.colors.allIn_Pink
-                    )
-                    Spacer(modifier = Modifier.width(3.dp))
-                    Text(
-                        text = stringResource(id = R.string.Popular),
-                        color = AllInTheme.colors.allIn_Pink,
-                        fontSize = 17.sp,
-                        style = AllInTheme.typography.h2
-                    )
-                }
-                Text(
-                    text = title,
-                    color = AllInTheme.colors.white,
-                    fontSize = 20.sp,
-                    style = AllInTheme.typography.h1,
-                    modifier = Modifier.padding(vertical = 22.dp)
-                )
-                Row(modifier = Modifier.align(alignment = Alignment.CenterHorizontally)) {
-                    HighlightedText(
-                        text = pluralStringResource(
-                            id = R.plurals.n_players,
-                            nbPlayers,
-                            nbPlayers
-                        ),
-                        query = nbPlayers.toString(),
-                        highlightStyle = SpanStyle(
-                            fontWeight = FontWeight.Bold,
-                            color = AllInTheme.colors.allIn_Pink
-                        ),
-                        color = AllInTheme.colors.white,
-                        style = AllInTheme.typography.r,
-                        fontSize = 15.sp
-                    )
-                    Text(
-                        text = " - ",
-                        color = AllInTheme.colors.white,
-                        style = AllInTheme.typography.r,
-                        fontSize = 15.sp
-                    )
-                    val pointsText = if (points % 1 == 0f){
-                        stringResource(id = R.string.int_and_unit, points.toInt(), pointUnit)
-                    }else{
-                        stringResource(id = R.string.float_and_unit, points, pointUnit)
-                    }
-                    HighlightedText(
-                        text = pluralStringResource(
-                            id = R.plurals.n_points_at_stake,
-                            if(pointUnit.isEmpty()) ceil(points).toInt() else 2,
-                            pointsText
-                        ),
-                        query = pointsText,
-                        highlightStyle = SpanStyle(
-                            fontWeight = FontWeight.Bold,
-                            color = AllInTheme.colors.allIn_Pink
-                        ),
-                        color = AllInTheme.colors.white,
-                        style = AllInTheme.typography.r,
-                        fontSize = 15.sp
-                    )
-                }
-            }
-
-        }
-    }
-}
-
-@Preview
-@Composable
-private fun HomePopularCardsPreview() {
-    AllInTheme {
-        HomePopularCards(
-            nbPlayers = 12,
-            points = 2.35f,
-            pointUnit = "k",
-            title = "Emre va réussir son TP de CI/CD mercredi?"
-        )
-    }
-}
-
-@Preview
-@Composable
-private fun HomePopularCardsSingularPreview() {
-    AllInTheme {
-        HomePopularCards(
-            nbPlayers = 1,
-            points = 1.0f,
-            pointUnit = "",
-            title = "Emre va réussir son TP de CI/CD mercredi?"
-        )
-    }
-}

src/app/src/main/java/fr/iut/alldev/allin/ui/login/loginScreen.kt

@@ -0,0 +1,128 @@
+package fr.iut.alldev.allin.ui.login
+
+import androidx.compose.foundation.*
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.relocation.BringIntoViewRequester
+import androidx.compose.foundation.text.ClickableText
+import androidx.compose.material3.Text
+import androidx.compose.runtime.*
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.AnnotatedString
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import fr.iut.alldev.allin.R
+import fr.iut.alldev.allin.ui.core.AllInGradientButton
+import fr.iut.alldev.allin.ui.core.AllInPasswordField
+import fr.iut.alldev.allin.ui.core.AllInTextField
+import fr.iut.alldev.allin.ui.theme.AllInTheme
+
+@OptIn(ExperimentalFoundationApi::class)
+@Composable
+fun LoginScreen(
+    onClickLogin: ()->Unit,
+    onClickRegister: ()->Unit
+) {
+
+    val bringIntoViewRequester = BringIntoViewRequester()
+
+    Box(
+        Modifier
+            .fillMaxSize()
+            .background(AllInTheme.themeColors.main_surface)
+            .padding(horizontal = 44.dp)
+            .verticalScroll(rememberScrollState())
+    ) {
+        Column(
+            Modifier.align(Alignment.Center)
+        ) {
+            Text(
+                modifier = Modifier.fillMaxWidth(),
+                text = stringResource(id = R.string.Login_title),
+                color = AllInTheme.themeColors.on_main_surface,
+                style = AllInTheme.typography.h3,
+                textAlign = TextAlign.Center,
+                fontSize = 40.sp
+            )
+            Spacer(modifier = Modifier.height(23.dp))
+            Text(
+                modifier = Modifier.fillMaxWidth(),
+                text = stringResource(id = R.string.Login_subtitle),
+                color = AllInTheme.themeColors.on_main_surface,
+                style = AllInTheme.typography.r,
+                textAlign = TextAlign.Center,
+                fontSize = 30.sp
+            )
+            Spacer(modifier = Modifier.height(83.dp))
+            Column(
+                verticalArrangement = Arrangement.spacedBy(20.dp)
+            ) {
+                AllInTextField(
+                    modifier = Modifier.fillMaxWidth(),
+                    placeholder = stringResource(id = R.string.username),
+                    value = "",
+                    onValueChange = { },
+                    bringIntoViewRequester = bringIntoViewRequester
+                )
+                AllInPasswordField(
+                    modifier = Modifier.fillMaxWidth(),
+                    placeholder = stringResource(id = R.string.password),
+                    value = "",
+                    onValueChange = { },
+                    bringIntoViewRequester = bringIntoViewRequester
+                )
+            }
+            ClickableText(
+                text = AnnotatedString(stringResource(id = R.string.forgot_password)),
+                style = AllInTheme.typography.m.copy(
+                    color = AllInTheme.themeColors.on_main_surface,
+                    fontSize = 15.sp,
+                ),
+                modifier = Modifier
+                    .align(Alignment.End)
+                    .padding(top = 15.dp)
+            ){
+                // TODO : Forgot password
+            }
+            Spacer(modifier = Modifier.height(67.dp))
+        }
+        Column(
+            Modifier
+                .align(Alignment.BottomCenter)
+                .padding(bottom = 32.dp)
+        ) {
+            AllInGradientButton(
+                text = stringResource(id = R.string.Login),
+                onClick = onClickLogin,
+                modifier = Modifier
+            )
+            Spacer(modifier = Modifier.height(30.dp))
+            Row(
+                horizontalArrangement = Arrangement.Center,
+                modifier = Modifier
+                    .fillMaxWidth()
+            ) {
+                Text(
+                    text = stringResource(id = R.string.no_account),
+                    color = AllInTheme.themeColors.on_main_surface,
+                    fontSize = 15.sp,
+                    style = AllInTheme.typography.r,
+                    modifier = Modifier.padding(end = 5.dp)
+                )
+                ClickableText(
+                    text = AnnotatedString(stringResource(id = R.string.Register)),
+                    style = AllInTheme.typography.r.copy(
+                        color = AllInTheme.colors.allIn_Purple,
+                        fontSize = 15.sp,
+                        fontWeight = FontWeight.Bold
+                    )
+                ) {
+                    onClickRegister()
+                }
+            }
+        }
+    }
+}

src/app/src/main/java/fr/iut/alldev/allin/ui/navigation/NavHost.kt

@@ -1,7 +1,8 @@
 package fr.iut.alldev.allin.ui.navigation
 
-import androidx.compose.animation.EnterTransition
+import androidx.compose.animation.*
-import androidx.compose.animation.ExitTransition
+import androidx.compose.animation.core.tween
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
@@ -9,23 +10,107 @@ import androidx.navigation.NavHostController
 import androidx.navigation.compose.NavHost
 import androidx.navigation.compose.composable
 import androidx.navigation.compose.rememberNavController
-import fr.iut.alldev.allin.ui.home.Home
+import fr.iut.alldev.allin.ui.bet.BetScreen
+import fr.iut.alldev.allin.ui.login.LoginScreen
+import fr.iut.alldev.allin.ui.navigation.drawer.AllInDrawer
 import fr.iut.alldev.allin.ui.profile.Profile
+import fr.iut.alldev.allin.ui.register.RegisterScreen
+import fr.iut.alldev.allin.ui.theme.AllInTheme
+import fr.iut.alldev.allin.ui.welcome.WelcomeScreen
 
 object Routes {
-    const val HOME = "home"
+    const val WELCOME = "WELCOME"
-    const val PROFILE = "profile"
+    const val REGISTER = "REGISTER"
+    const val LOGIN = "LOGIN"
     const val BET = "BET"
     const val BET_HISTORY = "BET_HISTORY"
     const val FRIENDS = "FRIENDS"
     const val CURRENT_BETS = "CURRENT_BETS"
+    const val DASHBOARD = "DASHBOARD"
 
 }
 
+private fun NavHostController.popUpTo(route: String, baseRoute: String){
+    this.navigate(route) {
+        launchSingleTop = true
+        popUpTo(baseRoute) {
+            saveState = true
+            inclusive = true
+        }
+        restoreState = true
+    }
+}
+
 @Composable
 fun AllInNavHost(modifier: Modifier = Modifier,
                  navController: NavHostController = rememberNavController(),
-                 startDestination: String = Routes.BET
+                 startDestination: String = Routes.WELCOME
+) {
+    NavHost(
+        navController = navController,
+        startDestination = startDestination,
+        enterTransition =
+        {
+            if(navController.currentDestination?.route != Routes.DASHBOARD)
+                slideInHorizontally(initialOffsetX = { it })
+            else
+                fadeIn(animationSpec = tween(1500))
+        },
+        exitTransition =
+        {
+            if(navController.currentDestination?.route != Routes.DASHBOARD)
+                slideOutHorizontally(targetOffsetX = { -it/2 })
+            else
+                fadeOut(
+                    animationSpec = tween(1500)
+                )
+
+        },
+        modifier = modifier.fillMaxSize().background(AllInTheme.themeColors.main_surface),
+    ) {
+
+        composable(route = Routes.WELCOME){
+            WelcomeScreen(
+                onClickJoin = {
+                    navController.popUpTo(Routes.REGISTER, Routes.WELCOME)
+                },
+                onClickLogin = {
+                    navController.popUpTo(Routes.LOGIN, Routes.WELCOME)
+                }
+            )
+        }
+        composable(route = Routes.REGISTER){
+            RegisterScreen(
+                onClickRegister = {
+                    navController.popUpTo(Routes.DASHBOARD, Routes.REGISTER)
+                },
+                onClickLogin = {
+                    navController.popUpTo(Routes.LOGIN, Routes.REGISTER)
+                }
+            )
+        }
+        composable(route = Routes.LOGIN){
+            LoginScreen(
+                onClickRegister = {
+                    navController.popUpTo(Routes.REGISTER, Routes.LOGIN)
+                },
+                onClickLogin = {
+                    navController.popUpTo(Routes.DASHBOARD, Routes.LOGIN)
+                }
+            )
+        }
+        composable(
+            route = Routes.DASHBOARD,
+        ){
+            AllInDrawer()
+        }
+    }
+}
+@Composable
+fun AllInDashboard(
+     modifier: Modifier = Modifier,
+     navController: NavHostController = rememberNavController(),
+     startDestination: String = Routes.BET
 ) {
     NavHost(
         navController = navController,
@@ -34,9 +119,7 @@ fun AllInNavHost(modifier: Modifier = Modifier,
         enterTransition = { EnterTransition.None },
         exitTransition = { ExitTransition.None }
     ) {
-        composable(route = Routes.BET){ Home() }
+        composable(route = Routes.BET) { BetScreen() }
-        composable(route = Routes.BET_HISTORY){ Profile() }
+        composable(route = Routes.BET_HISTORY) { Profile() }
     }
-}
+}
-
-

src/app/src/main/java/fr/iut/alldev/allin/ui/navigation/drawer/drawer.kt

@@ -17,7 +17,7 @@ import androidx.navigation.NavHostController
 import androidx.navigation.compose.rememberNavController
 import fr.iut.alldev.allin.R
 import fr.iut.alldev.allin.ui.core.topbar.AllInTopBar
-import fr.iut.alldev.allin.ui.navigation.AllInNavHost
+import fr.iut.alldev.allin.ui.navigation.AllInDashboard
 import fr.iut.alldev.allin.ui.navigation.Routes
 import fr.iut.alldev.allin.ui.theme.AllInTheme
 import kotlinx.coroutines.launch
@@ -145,13 +145,11 @@ fun AllInDrawer(
                 modifier = Modifier
                     .padding(it)
                     .fillMaxSize()
-                    .background(AllInTheme.colors.allIn_White),
+                    .background(AllInTheme.themeColors.main_surface),
                 horizontalAlignment = Alignment.CenterHorizontally
             ) {
-                AllInNavHost(
+                AllInDashboard(
-                    modifier = Modifier.fillMaxSize(),
+                    navController = navController
-                    navController = navController,
-                    startDestination = startDestination
                 )
             }
         }

src/app/src/main/java/fr/iut/alldev/allin/ui/register/registerScreen.kt

@@ -0,0 +1,145 @@
+package fr.iut.alldev.allin.ui.register
+
+import androidx.compose.foundation.*
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.relocation.BringIntoViewRequester
+import androidx.compose.foundation.text.ClickableText
+import androidx.compose.material3.Text
+import androidx.compose.runtime.*
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.AnnotatedString
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.input.KeyboardType
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import fr.iut.alldev.allin.R
+import fr.iut.alldev.allin.ui.core.AllInGradientButton
+import fr.iut.alldev.allin.ui.core.AllInPasswordField
+import fr.iut.alldev.allin.ui.core.AllInTextField
+import fr.iut.alldev.allin.ui.theme.AllInTheme
+
+@OptIn(ExperimentalFoundationApi::class)
+@Composable
+fun RegisterScreen(
+    onClickRegister: ()->Unit,
+    onClickLogin: ()->Unit
+) {
+    var username by remember{
+        mutableStateOf("")
+    }
+    val bringIntoViewRequester = remember { BringIntoViewRequester() }
+
+    Box(
+        Modifier
+            .fillMaxSize()
+            .background(AllInTheme.themeColors.main_surface)
+            .padding(horizontal = 44.dp)
+            .verticalScroll(rememberScrollState())
+    ) {
+        Column(
+            Modifier.align(Alignment.Center)
+        ) {
+            Text(
+                modifier = Modifier.fillMaxWidth(),
+                text = stringResource(id = R.string.Hello_x, username),
+                color = AllInTheme.themeColors.on_main_surface,
+                style = AllInTheme.typography.h3,
+                textAlign = TextAlign.Center,
+                fontSize = 40.sp,
+                overflow = TextOverflow.Ellipsis,
+                maxLines = 1
+            )
+            Text(
+                modifier = Modifier.fillMaxWidth(),
+                text = stringResource(id = R.string.Register_title),
+                color = AllInTheme.themeColors.on_main_surface,
+                style = AllInTheme.typography.h3,
+                textAlign = TextAlign.Center,
+                fontSize = 40.sp
+            )
+            Spacer(modifier = Modifier.height(23.dp))
+            Text(
+                modifier = Modifier.fillMaxWidth(),
+                text = stringResource(id = R.string.Register_subtitle),
+                color = AllInTheme.themeColors.on_main_surface,
+                style = AllInTheme.typography.r,
+                textAlign = TextAlign.Center,
+                fontSize = 30.sp
+            )
+            Spacer(modifier = Modifier.height(83.dp))
+            Column(
+                verticalArrangement = Arrangement.spacedBy(20.dp)
+            ) {
+                AllInTextField(
+                    modifier = Modifier.fillMaxWidth(),
+                    placeholder = stringResource(id = R.string.username),
+                    value = username,
+                    onValueChange = { username = it },
+                    maxChar = 20,
+                    bringIntoViewRequester = bringIntoViewRequester
+                )
+                AllInTextField(
+                    modifier = Modifier.fillMaxWidth(),
+                    placeholder = stringResource(id = R.string.email),
+                    value = "",
+                    onValueChange = { },
+                    keyboardType = KeyboardType.Email,
+                    bringIntoViewRequester = bringIntoViewRequester
+                )
+                AllInPasswordField(
+                    modifier = Modifier.fillMaxWidth(),
+                    placeholder = stringResource(id = R.string.password),
+                    value = "",
+                    onValueChange = { },
+                    bringIntoViewRequester = bringIntoViewRequester
+                )
+                AllInPasswordField(
+                    modifier = Modifier.fillMaxWidth(),
+                    placeholder = stringResource(id = R.string.confirm_password),
+                    value = "",
+                    onValueChange = { },
+                    bringIntoViewRequester = bringIntoViewRequester
+                )
+            }
+            Spacer(modifier = Modifier.height(67.dp))
+        }
+        Column(
+            Modifier
+                .align(Alignment.BottomCenter)
+                .padding(bottom = 32.dp)
+        ) {
+            AllInGradientButton(
+                text = stringResource(id = R.string.Register),
+                onClick = onClickRegister
+            )
+            Spacer(modifier = Modifier.height(30.dp))
+            Row(
+                horizontalArrangement = Arrangement.Center,
+                modifier = Modifier
+                    .fillMaxWidth()
+            ) {
+                Text(
+                    text = stringResource(id = R.string.already_have_account),
+                    color = AllInTheme.themeColors.on_main_surface,
+                    fontSize = 15.sp,
+                    style = AllInTheme.typography.r,
+                    modifier = Modifier.padding(end = 5.dp)
+                )
+                ClickableText(
+                    text = AnnotatedString(stringResource(id = R.string.Login)),
+                    style = AllInTheme.typography.r.copy(
+                        color = AllInTheme.colors.allIn_Purple,
+                        fontSize = 15.sp,
+                        fontWeight = FontWeight.Bold
+                    )
+                ) {
+                    onClickLogin()
+                }
+            }
+        }
+    }
+}

src/app/src/main/java/fr/iut/alldev/allin/ui/theme/Color.kt

@@ -9,6 +9,8 @@ import androidx.compose.ui.graphics.Color
 @Immutable
 data class AllInColors(
     val allIn_Dark: Color,
+    val allIn_DarkGrey300: Color,
+    val allIn_DarkGrey200: Color,
     val allIn_DarkGrey100: Color,
     val allIn_DarkGrey50: Color,
     val allIn_Grey: Color,
@@ -18,20 +20,26 @@ data class AllInColors(
     val allIn_LightGrey50: Color,
     val allIn_White: Color,
     val white: Color,
+    val black: Color,
     val allIn_Pink: Color,
     val allIn_Purple: Color,
+    val allIn_LoginPurple: Color,
     val allIn_Blue: Color,
+    val allIn_DarkBlue: Color,
     val allIn_BarPurple: Color,
     val allIn_BarPink: Color,
     val allIn_MainGradient: Brush,
     val allIn_Bar1stGradient: Brush,
     val allIn_Bar2ndGradient: Brush,
-    val allIn_TextGradient: Brush
+    val allIn_TextGradient: Brush,
+    val allIn_LoginGradient: Brush
 )
 
 internal val LocalColors = staticCompositionLocalOf {
     AllInColors(
         allIn_Dark = Color.Unspecified,
+        allIn_DarkGrey300 = Color.Unspecified,
+        allIn_DarkGrey200 = Color.Unspecified,
         allIn_DarkGrey100 = Color.Unspecified,
         allIn_DarkGrey50 = Color.Unspecified,
         allIn_Grey = Color.Unspecified,
@@ -41,11 +49,14 @@ internal val LocalColors = staticCompositionLocalOf {
         allIn_LightGrey50 = Color.Unspecified,
         allIn_White = Color.Unspecified,
         white = Color.Unspecified,
+        black = Color.Unspecified,
         allIn_Pink = Color.Unspecified,
         allIn_Purple = Color.Unspecified,
+        allIn_LoginPurple = Color.Unspecified,
         allIn_BarPurple = Color.Unspecified,
         allIn_BarPink = Color.Unspecified,
         allIn_Blue = Color.Unspecified,
+        allIn_DarkBlue = Color.Unspecified,
 
         allIn_MainGradient = Brush.linearGradient(
             0.0f to Color(0xFFf951a8),
@@ -65,6 +76,37 @@ internal val LocalColors = staticCompositionLocalOf {
         allIn_TextGradient = Brush.horizontalGradient(
             0.0f to Color(0xFFF876C1),
             1.0f to Color(0xFF2399F8)
+        ),
+        allIn_LoginGradient = Brush.linearGradient(
+            0.0f to Color(0xFFEC1794),
+            0.5f to Color(0xFFaa7ef3),
+            1.0f to Color(0xFF00EEEE),
+            start = Offset(0f, Float.POSITIVE_INFINITY),
+            end = Offset(Float.POSITIVE_INFINITY, 0f)
         )
     )
+}
+@Immutable
+data class AllInThemeColors(
+    val main_surface: Color,
+    val on_main_surface: Color,
+    val background: Color,
+    val on_background: Color,
+    val tint_1: Color,
+    val background_2: Color,
+    val on_background_2: Color,
+    val border: Color
+)
+
+internal val LocalThemeColors = staticCompositionLocalOf {
+    AllInThemeColors(
+        main_surface = Color.Unspecified,
+        on_main_surface = Color.Unspecified,
+        background = Color.Unspecified,
+        on_background = Color.Unspecified,
+        tint_1 = Color.Unspecified,
+        background_2 = Color.Unspecified,
+        on_background_2 = Color.Unspecified,
+        border = Color.Unspecified
+    )
 }

src/app/src/main/java/fr/iut/alldev/allin/ui/theme/Theme.kt

@@ -19,6 +19,8 @@ fun AllInTheme(
 )  {
     val customColors = AllInColors(
         allIn_Dark = Color(0xFF2A2A2A),
+        allIn_DarkGrey300 = Color(0xFF1c1c1c),
+        allIn_DarkGrey200 = Color(0xFF262626),
         allIn_DarkGrey100 = Color(0xFF393939),
         allIn_DarkGrey50 = Color(0xFF454545),
         allIn_Grey = Color(0xFF525252),
@@ -28,11 +30,14 @@ fun AllInTheme(
         allIn_LightGrey50 = Color(0XFFF7F7F7),
         allIn_White = Color(0xFFEBEBF6),
         white = Color(0xFFFFFFFF),
+        black = Color(0xFF000000),
         allIn_Pink = Color(0xFFFF2A89),
         allIn_Purple = Color(0xFF7D79FF),
+        allIn_LoginPurple = Color(0xFF7F7BFB),
         allIn_BarPurple = Color(0xFF846AC9),
         allIn_BarPink = Color(0xFFFE2B8A),
         allIn_Blue = Color(0xFF6a89fa),
+        allIn_DarkBlue = Color(0xFF323078),
 
         allIn_MainGradient = Brush.linearGradient(
             0.0f to Color(0xFFf951a8),
@@ -52,8 +57,16 @@ fun AllInTheme(
         allIn_TextGradient = Brush.horizontalGradient(
             0.0f to Color(0xFFF876C1),
             1.0f to Color(0xFF2399F8)
+        ),
+        allIn_LoginGradient = Brush.linearGradient(
+            0.0f to Color(0xFFEC1794),
+            0.5f to Color(0xFFaa7ef3),
+            1.0f to Color(0xFF00EEEE),
+            start = Offset(0f, Float.POSITIVE_INFINITY),
+            end = Offset(Float.POSITIVE_INFINITY, 0f)
         )
     )
+
     val customTypography = AllInTypography(
         h1 = TextStyle(
             fontFamily = PlusJakartaSans,
@@ -84,9 +97,36 @@ fun AllInTheme(
             fontWeight = FontWeight.ExtraLight,
         )
     )
+
+    val customTheme = if(isSystemInDarkTheme()){
+        AllInThemeColors(
+            main_surface = customColors.allIn_DarkGrey300,
+            on_main_surface = customColors.allIn_White,
+            background = customColors.allIn_DarkGrey200,
+            on_background = customColors.white,
+            tint_1 = customColors.white,
+            background_2 = customColors.allIn_Dark,
+            on_background_2 = customColors.allIn_LightGrey200,
+            border = customColors.allIn_DarkGrey100
+        )
+    }else{
+        AllInThemeColors(
+            main_surface = customColors.allIn_White,
+            on_main_surface = customColors.allIn_Dark,
+            background = customColors.white,
+            on_background = customColors.allIn_DarkBlue,
+            tint_1 = customColors.allIn_LoginPurple,
+            background_2 = customColors.allIn_LightGrey50,
+            on_background_2 = customColors.allIn_LightGrey300,
+            border = customColors.allIn_LightGrey100
+        )
+    }
+
     CompositionLocalProvider(
         LocalColors provides customColors,
-        LocalTypography provides customTypography
+        LocalTypography provides customTypography,
+        LocalThemeColors provides customTheme
+
     ){
         content()
     }
@@ -102,6 +142,11 @@ object AllInTheme {
         @Composable
         @ReadOnlyComposable
         get() = LocalTypography.current
+
+    val themeColors: AllInThemeColors
+        @Composable
+        @ReadOnlyComposable
+        get() = LocalThemeColors.current
 }
 
 

src/app/src/main/java/fr/iut/alldev/allin/ui/welcome/welcomeScreen.kt

@@ -0,0 +1,114 @@
+package fr.iut.alldev.allin.ui.welcome
+
+import android.content.res.Configuration
+import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.text.ClickableText
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.AnnotatedString
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import fr.iut.alldev.allin.R
+import fr.iut.alldev.allin.ui.core.AllInButton
+import fr.iut.alldev.allin.ui.theme.AllInTheme
+
+@OptIn(ExperimentalFoundationApi::class)
+@Composable
+fun WelcomeScreen(
+    onClickJoin: ()->Unit,
+    onClickLogin: ()->Unit
+) {
+    Box(
+        Modifier
+            .fillMaxWidth()
+            .fillMaxHeight(.5f)
+            .background(AllInTheme.colors.allIn_LoginGradient)
+    )
+    Box(
+        Modifier
+            .fillMaxSize()
+            .background(
+                Brush.verticalGradient(
+                    .2f to Color.Transparent,
+                    .5f to AllInTheme.themeColors.background
+                )
+            )
+    ){
+        Column(
+            Modifier
+                .align(Alignment.BottomCenter)
+                .fillMaxWidth()
+                .fillMaxHeight(.5f)
+                .padding(horizontal = 45.dp)
+        ){
+            Text(
+                text = stringResource(id = R.string.welcome_title),
+                color = AllInTheme.themeColors.on_background,
+                fontSize = 30.sp,
+                style = AllInTheme.typography.h1
+            )
+            Text(
+                text = stringResource(id = R.string.welcome_appname),
+                fontSize = 60.sp,
+                style = AllInTheme.typography.h1.copy(
+                    brush = AllInTheme.colors.allIn_MainGradient
+                )
+            )
+            Spacer(modifier = Modifier.height(43.dp))
+            Text(
+                text = stringResource(id = R.string.welcome_subtitle),
+                color = AllInTheme.themeColors.on_background,
+                fontSize = 15.sp,
+                style = AllInTheme.typography.r
+            )
+            Spacer(modifier = Modifier.height(78.dp))
+            AllInButton(
+                color = AllInTheme.themeColors.tint_1,
+                text = stringResource(id = R.string.join),
+                textColor = AllInTheme.themeColors.background,
+                onClick = onClickJoin,
+                modifier = Modifier.padding(bottom = 13.dp)
+            )
+            Row(
+                horizontalArrangement = Arrangement.Center,
+                modifier = Modifier.fillMaxWidth()
+            ) {
+                Text(
+                    text = stringResource(id = R.string.already_have_account),
+                    color = AllInTheme.themeColors.tint_1,
+                    fontSize = 15.sp,
+                    style = AllInTheme.typography.r,
+                    modifier = Modifier.padding(end = 5.dp)
+                )
+                ClickableText(
+                    text = AnnotatedString(stringResource(id = R.string.Login)),
+                    style = AllInTheme.typography.r.copy(
+                        color = AllInTheme.themeColors.tint_1,
+                        fontSize = 15.sp,
+                        fontWeight = FontWeight.Bold
+                    )
+                ){
+                    onClickLogin()
+                }
+            }
+        }
+    }
+}
+
+@Preview
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Composable
+private fun WelcomeScreenPreview() {
+    AllInTheme{
+        WelcomeScreen(onClickJoin = {}, onClickLogin = {})
+    }
+}

src/app/src/main/res/values-fr/strings.xml

@@ -1,5 +1,14 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
+    <string name="username">Pseudo</string>
+    <string name="email">Email</string>
+    <string name="password">Mot de passe</string>
+    <string name="confirm_password">Confirmation du mot de passe</string>
+    <string name="Login">Se connecter</string>
+    <string name="already_have_account">Tu as déjà un compte ?</string>
+    <string name="forgot_password">Mot de passe oublié ?</string>
+    <string name="no_account">Pas encore inscrit ?</string>
+    <string name="Register">S\'inscrire</string>
     <!--Drawer-->
     <string name="bets">Bets</string>
     <string name="best_win">Meilleur gain</string>
@@ -11,7 +20,18 @@
     <string name="friends_subtitle">Défiez vos porches en les ajoutant en amis.</string>
     <string name="current_bets">Bets en cours</string>
     <string name="current_bets_subtitle">Gérez vos bets et récompensez les gagnants.</string>
-    <!--Main Page-->
+    <!--Welcome Page-->
+    <string name="welcome_title">Bienvenue sur</string>
+    <string name="welcome_subtitle">Récupère tes Allcoins et viens parier avec tes amis pour prouver qui est le meilleur.</string>
+    <string name="join">Rejoindre</string>
+    <!--Register Page-->
+    <string name="Hello_x">Bonjour, %s</string>
+    <string name="Register_title">On a besoins de ça!</string>
+    <string name="Register_subtitle">Promis c\'est rapide.</string>
+    <!--Login Page-->
+    <string name="Login_title">Te revoilà !</string>
+    <string name="Login_subtitle">Bon retour parmis nous tu nous as manqué !</string>
+    <!--Bet Page-->
     <string name="Popular">Populaire</string>
     <string name="Public">Public</string>
     <string name="Invitation">Invitation</string>

src/app/src/main/res/values/strings.xml

@@ -3,6 +3,16 @@
     <string name="app_name" translatable="false">Allin</string>
     <string name="float_and_unit" translatable="false">%.2g%s</string>
     <string name="int_and_unit" translatable="false">%d%s</string>
+    <string name="username">Username</string>
+    <string name="email">Email</string>
+    <string name="password">Password</string>
+    <string name="confirm_password">Confirm password</string>
+    <string name="Login">Login</string>
+    <string name="already_have_account">Already have an account ?</string>
+    <string name="forgot_password">Forgot password ?</string>
+    <string name="no_account">Don\'t have an account ?</string>
+    <string name="Register">Register</string>
+
     <!--Drawer-->
     <string name="bets">Bets</string>
     <string name="best_win">Best win</string>
@@ -14,7 +24,19 @@
     <string name="friends_subtitle">Challenge your folks by adding them as friends.</string>
     <string name="current_bets">Current bets</string>
     <string name="current_bets_subtitle">Manage your bets and reward the winners.</string>
-    <!--Main Page-->
+    <!--Welcome Page-->
+    <string name="welcome_title">Welcome to</string>
+    <string name="welcome_appname" translatable="false">Allin.</string>
+    <string name="welcome_subtitle">Collect your Allcoins and come bet with your friend to prove who\'s best.</string>
+    <string name="join">Join</string>
+    <!--Register Page-->
+    <string name="Hello_x">Hello, %s</string>
+    <string name="Register_title">We need this!</string>
+    <string name="Register_subtitle">Don\'t worry it\'s fast.</string>
+    <!--Login Page-->
+    <string name="Login_title">Welcome back !</string>
+    <string name="Login_subtitle">We missed you.</string>
+    <!--Bet Page-->
     <string name="Popular">Popular</string>
     <string name="Public">Public</string>
     <string name="Invitation">Invitation</string>

src/build.gradle

@@ -5,7 +5,7 @@ buildscript {
     }
 }// Top-level build file where you can add configuration options common to all sub-projects/modules.
 plugins {
-    id 'com.android.application' version '7.4.1' apply false
+    id 'com.android.application' version '7.4.2' apply false
-    id 'com.android.library' version '7.4.1' apply false
+    id 'com.android.library' version '7.4.2' apply false
     id 'org.jetbrains.kotlin.android' version '1.7.0' apply false
 }

src/gradle/wrapper/gradle-wrapper.properties

@@ -1,6 +1,6 @@
-#Mon Sep 18 15:30:53 CEST 2023
+#Mon Sep 25 00:27:11 CEST 2023
 distributionBase=GRADLE_USER_HOME
-distributionUrl=https\://services.gradle.org/distributions/gradle-7.5-bin.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.3-bin.zip
 distributionPath=wrapper/dists
 zipStorePath=wrapper/dists
 zipStoreBase=GRADLE_USER_HOME