Buttom bar use theme

frontend/app/src/main/java/dk/scheduling/schedulingfrontend/MainActivity.kt

@@ -1,6 +1,5 @@
 package dk.scheduling.schedulingfrontend
 
-import App
 import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent

frontend/app/src/main/java/dk/scheduling/schedulingfrontend/MainLayout.kt

@@ -1,86 +1,81 @@
-import androidx.compose.foundation.layout.Arrangement
+package dk.scheduling.schedulingfrontend
+
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
-import androidx.compose.material3.Surface
+import androidx.compose.material3.NavigationBar
+import androidx.compose.material3.NavigationBarItem
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.tooling.preview.Preview
-import dk.scheduling.schedulingfrontend.HomePage
-import dk.scheduling.schedulingfrontend.Page
-import dk.scheduling.schedulingfrontend.pagesInfo
+import dk.scheduling.schedulingfrontend.ui.theme.SchedulingFrontendTheme
 
 @Composable
 fun App() {
-    var currentPage by remember { mutableStateOf(Page.HomePage) }
+    var currentPageNumber by remember { mutableStateOf(PageNumber.HomePage) }
 
     Box(modifier = Modifier.fillMaxSize()) {
         // Content of the current page
         Column(modifier = Modifier.fillMaxSize()) {
-            pagesInfo.find { it.page == currentPage }?.composable?.invoke() ?: HomePage() // Default to HomePage if not found
+            pagesInfo.find { it.pageNumber == currentPageNumber }?.composable?.invoke() ?: HomePage() // Default to HomePage if not found
             Spacer(modifier = Modifier.weight(1f))
         }
 
         // Bottom navigation bar
         BottomNavigationBar(
-            currentPage = currentPage,
-            onPageSelected = { page -> currentPage = page },
+            currentPageNumber = currentPageNumber,
+            onPageSelected = { page -> currentPageNumber = page },
             modifier = Modifier.align(Alignment.BottomCenter),
         )
     }
 }
 
 @Composable
 fun BottomNavigationBar(
-    currentPage: Page,
-    onPageSelected: (Page) -> Unit,
+    currentPageNumber: PageNumber,
+    onPageSelected: (PageNumber) -> Unit,
     modifier: Modifier = Modifier,
 ) {
-    Surface(color = Color.Gray, modifier = modifier) {
-        Row(
-            modifier = Modifier.fillMaxWidth(),
-            horizontalArrangement = Arrangement.SpaceEvenly,
-            verticalAlignment = Alignment.CenterVertically,
-        ) {
-            pagesInfo.forEach { pageInfo ->
-                BottomNavigationButton(
-                    icon = pageInfo.icon,
-                    isSelected = currentPage == pageInfo.page,
-                ) { onPageSelected(pageInfo.page) }
-            }
+    NavigationBar(modifier = modifier) {
+        pagesInfo.forEach { page ->
+            NavigationBarItem(
+                icon = { Icon(page.icon, contentDescription = page.description) },
+                label = { Text(page.description) },
+                selected = currentPageNumber == page.pageNumber,
+                onClick = { onPageSelected(page.pageNumber) },
+            )
         }
     }
 }
 
+@Preview(showBackground = true, device = "spec:id=reference_phone,shape=Normal,width=411,height=891,unit=dp,dpi=420")
 @Composable
-fun BottomNavigationButton(
-    icon: ImageVector,
-    isSelected: Boolean,
-    onClick: () -> Unit,
-) {
-    IconButton(onClick = onClick) {
-        Icon(
-            imageVector = icon,
-            contentDescription = null,
-            tint = if (isSelected) Color.White else Color.Magenta,
-        )
+fun PreviewApp() {
+    SchedulingFrontendTheme {
+        App()
     }
 }
 
 @Preview(showBackground = true, device = "spec:id=reference_phone,shape=Normal,width=411,height=891,unit=dp,dpi=420")
 @Composable
-fun PreviewApp() {
-    App()
+fun PreviewAppLightMode() {
+    SchedulingFrontendTheme(darkTheme = false, dynamicColor = false) {
+        App()
+    }
+}
+
+@Preview(showBackground = true, device = "spec:id=reference_phone,shape=Normal,width=411,height=891,unit=dp,dpi=420")
+@Composable
+fun PreviewAppDarkMode() {
+    SchedulingFrontendTheme(darkTheme = true, dynamicColor = false) {
+        App()
+    }
 }

frontend/app/src/main/java/dk/scheduling/schedulingfrontend/Pages.kt

@@ -7,21 +7,22 @@ import androidx.compose.material.icons.filled.Settings
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.graphics.vector.ImageVector
 
-enum class Page {
+enum class PageNumber {
     HomePage,
     ApiButtonPage,
     PAGE_3,
 }
 
 data class PageInfo(
-    val page: Page,
+    val pageNumber: PageNumber,
     val icon: ImageVector,
+    val description: String,
     val composable: @Composable () -> Unit,
 )
 
 val pagesInfo =
     listOf(
-        PageInfo(Page.HomePage, Icons.Default.Home) { HomePage() },
-        PageInfo(Page.ApiButtonPage, Icons.Default.Favorite) { ApiButton() },
-        PageInfo(Page.PAGE_3, Icons.Default.Settings) { Page3() },
+        PageInfo(PageNumber.HomePage, Icons.Default.Home, "Home") { HomePage() },
+        PageInfo(PageNumber.ApiButtonPage, Icons.Default.Favorite, "Favorite") { ApiButton() },
+        PageInfo(PageNumber.PAGE_3, Icons.Default.Settings, "Settings") { Page3() },
     )

frontend/app/src/main/java/dk/scheduling/schedulingfrontend/loginpage/LoginPage.kt

@@ -33,6 +33,7 @@ import androidx.compose.ui.text.input.VisualTransformation
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import dk.scheduling.schedulingfrontend.ui.theme.SchedulingFrontendTheme
 
 @Composable
 fun LoginPage(
@@ -181,6 +182,16 @@ fun login(
 
 @Preview(showBackground = true, device = "spec:id=reference_phone,shape=Normal,width=411,height=891,unit=dp,dpi=420")
 @Composable
-fun LoginPagePreview() {
-    LoginPage(navigateOnValidLogin = {}, navigateToSignUpPage = {})
+fun LoginPagePreviewLightMode() {
+    SchedulingFrontendTheme(darkTheme = false) {
+        LoginPage(navigateOnValidLogin = {}, navigateToSignUpPage = {})
+    }
+}
+
+@Preview(showBackground = true, device = "spec:id=reference_phone,shape=Normal,width=411,height=891,unit=dp,dpi=420")
+@Composable
+fun LoginPagePreviewDarkMode() {
+    SchedulingFrontendTheme(darkTheme = true) {
+        LoginPage(navigateOnValidLogin = {}, navigateToSignUpPage = {})
+    }
 }

frontend/app/src/main/java/dk/scheduling/schedulingfrontend/signuppage/SignUpPage.kt

@@ -33,6 +33,7 @@ import androidx.compose.ui.text.input.VisualTransformation
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import dk.scheduling.schedulingfrontend.ui.theme.SchedulingFrontendTheme
 
 @Composable
 fun SignUpPage(
@@ -217,6 +218,16 @@ fun signUp(
 
 @Preview(showBackground = true, device = "spec:id=reference_phone,shape=Normal,width=411,height=891,unit=dp,dpi=420")
 @Composable
-fun SignUpPagePreview() {
-    SignUpPage(navigateOnValidSignUp = {}, navigateToLoginPage = {})
+fun SignUpPagePreviewLightMode() {
+    SchedulingFrontendTheme(darkTheme = false) {
+        SignUpPage(navigateOnValidSignUp = {}, navigateToLoginPage = {})
+    }
+}
+
+@Preview(showBackground = true, device = "spec:id=reference_phone,shape=Normal,width=411,height=891,unit=dp,dpi=420")
+@Composable
+fun SignUpPagePreviewDarkMode() {
+    SchedulingFrontendTheme(darkTheme = true) {
+        SignUpPage(navigateOnValidSignUp = {}, navigateToLoginPage = {})
+    }
 }

frontend/app/src/main/java/dk/scheduling/schedulingfrontend/ui/theme/Color.kt

@@ -1,11 +1,66 @@
 package dk.scheduling.schedulingfrontend.ui.theme
-
 import androidx.compose.ui.graphics.Color
 
-val Purple80 = Color(0xFFD0BCFF)
-val PurpleGrey80 = Color(0xFFCCC2DC)
-val Pink80 = Color(0xFFEFB8C8)
+val md_theme_light_primary = Color(0xFF6750A4)
+val md_theme_light_onPrimary = Color(0xFFFFFFFF)
+val md_theme_light_primaryContainer = Color(0xFFEADDFF)
+val md_theme_light_onPrimaryContainer = Color(0xFF21005D)
+val md_theme_light_secondary = Color(0xFF625B71)
+val md_theme_light_onSecondary = Color(0xFFFFFFFF)
+val md_theme_light_secondaryContainer = Color(0xFFE8DEF8)
+val md_theme_light_onSecondaryContainer = Color(0xFF1D192B)
+val md_theme_light_tertiary = Color(0xFF7D5260)
+val md_theme_light_onTertiary = Color(0xFFFFFFFF)
+val md_theme_light_tertiaryContainer = Color(0xFFFFD8E4)
+val md_theme_light_onTertiaryContainer = Color(0xFF31111D)
+val md_theme_light_error = Color(0xFFB3261E)
+val md_theme_light_onError = Color(0xFFFFFFFF)
+val md_theme_light_errorContainer = Color(0xFFF9DEDC)
+val md_theme_light_onErrorContainer = Color(0xFF410E0B)
+val md_theme_light_outline = Color(0xFF79747E)
+val md_theme_light_background = Color(0xFFFFFBFE)
+val md_theme_light_onBackground = Color(0xFF1C1B1F)
+val md_theme_light_surface = Color(0xFFFFFBFE)
+val md_theme_light_onSurface = Color(0xFF1C1B1F)
+val md_theme_light_surfaceVariant = Color(0xFFE7E0EC)
+val md_theme_light_onSurfaceVariant = Color(0xFF49454F)
+val md_theme_light_inverseSurface = Color(0xFF313033)
+val md_theme_light_inverseOnSurface = Color(0xFFF4EFF4)
+val md_theme_light_inversePrimary = Color(0xFFD0BCFF)
+val md_theme_light_shadow = Color(0xFF000000)
+val md_theme_light_surfaceTint = Color(0xFF6750A4)
+val md_theme_light_outlineVariant = Color(0xFFCAC4D0)
+val md_theme_light_scrim = Color(0xFF000000)
+
+val md_theme_dark_primary = Color(0xFFD0BCFF)
+val md_theme_dark_onPrimary = Color(0xFF381E72)
+val md_theme_dark_primaryContainer = Color(0xFF4F378B)
+val md_theme_dark_onPrimaryContainer = Color(0xFFEADDFF)
+val md_theme_dark_secondary = Color(0xFFCCC2DC)
+val md_theme_dark_onSecondary = Color(0xFF332D41)
+val md_theme_dark_secondaryContainer = Color(0xFF4A4458)
+val md_theme_dark_onSecondaryContainer = Color(0xFFE8DEF8)
+val md_theme_dark_tertiary = Color(0xFFEFB8C8)
+val md_theme_dark_onTertiary = Color(0xFF492532)
+val md_theme_dark_tertiaryContainer = Color(0xFF633B48)
+val md_theme_dark_onTertiaryContainer = Color(0xFFFFD8E4)
+val md_theme_dark_error = Color(0xFFF2B8B5)
+val md_theme_dark_onError = Color(0xFF601410)
+val md_theme_dark_errorContainer = Color(0xFF8C1D18)
+val md_theme_dark_onErrorContainer = Color(0xFFF9DEDC)
+val md_theme_dark_outline = Color(0xFF938F99)
+val md_theme_dark_background = Color(0xFF1C1B1F)
+val md_theme_dark_onBackground = Color(0xFFE6E1E5)
+val md_theme_dark_surface = Color(0xFF1C1B1F)
+val md_theme_dark_onSurface = Color(0xFFE6E1E5)
+val md_theme_dark_surfaceVariant = Color(0xFF49454F)
+val md_theme_dark_onSurfaceVariant = Color(0xFFCAC4D0)
+val md_theme_dark_inverseSurface = Color(0xFFE6E1E5)
+val md_theme_dark_inverseOnSurface = Color(0xFF313033)
+val md_theme_dark_inversePrimary = Color(0xFF6750A4)
+val md_theme_dark_shadow = Color(0xFF000000)
+val md_theme_dark_surfaceTint = Color(0xFFD0BCFF)
+val md_theme_dark_outlineVariant = Color(0xFF49454F)
+val md_theme_dark_scrim = Color(0xFF000000)
 
-val Purple40 = Color(0xFF6650a4)
-val PurpleGrey40 = Color(0xFF625b71)
-val Pink40 = Color(0xFF7D5260)
+val seed = Color(0xFF6750A4)

frontend/app/src/main/java/dk/scheduling/schedulingfrontend/ui/theme/Theme.kt

@@ -1,3 +1,4 @@
+
 package dk.scheduling.schedulingfrontend.ui.theme
 
 import android.app.Activity
@@ -15,27 +16,70 @@ import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalView
 import androidx.core.view.WindowCompat
 
-private val DarkColorScheme =
-    darkColorScheme(
-        primary = Purple80,
-        secondary = PurpleGrey80,
-        tertiary = Pink80,
-    )
-
 private val LightColorScheme =
     lightColorScheme(
-        primary = Purple40,
-        secondary = PurpleGrey40,
-        tertiary = Pink40,
-    /* Other default colors to override
-    background = Color(0xFFFFFBFE),
-    surface = Color(0xFFFFFBFE),
-    onPrimary = Color.White,
-    onSecondary = Color.White,
-    onTertiary = Color.White,
-    onBackground = Color(0xFF1C1B1F),
-    onSurface = Color(0xFF1C1B1F),
-     */
+        primary = md_theme_light_primary,
+        onPrimary = md_theme_light_onPrimary,
+        primaryContainer = md_theme_light_primaryContainer,
+        onPrimaryContainer = md_theme_light_onPrimaryContainer,
+        secondary = md_theme_light_secondary,
+        onSecondary = md_theme_light_onSecondary,
+        secondaryContainer = md_theme_light_secondaryContainer,
+        onSecondaryContainer = md_theme_light_onSecondaryContainer,
+        tertiary = md_theme_light_tertiary,
+        onTertiary = md_theme_light_onTertiary,
+        tertiaryContainer = md_theme_light_tertiaryContainer,
+        onTertiaryContainer = md_theme_light_onTertiaryContainer,
+        error = md_theme_light_error,
+        onError = md_theme_light_onError,
+        errorContainer = md_theme_light_errorContainer,
+        onErrorContainer = md_theme_light_onErrorContainer,
+        outline = md_theme_light_outline,
+        background = md_theme_light_background,
+        onBackground = md_theme_light_onBackground,
+        surface = md_theme_light_surface,
+        onSurface = md_theme_light_onSurface,
+        surfaceVariant = md_theme_light_surfaceVariant,
+        onSurfaceVariant = md_theme_light_onSurfaceVariant,
+        inverseSurface = md_theme_light_inverseSurface,
+        inverseOnSurface = md_theme_light_inverseOnSurface,
+        inversePrimary = md_theme_light_inversePrimary,
+        surfaceTint = md_theme_light_surfaceTint,
+        outlineVariant = md_theme_light_outlineVariant,
+        scrim = md_theme_light_scrim,
+    )
+
+private val DarkColorScheme =
+    darkColorScheme(
+        primary = md_theme_dark_primary,
+        onPrimary = md_theme_dark_onPrimary,
+        primaryContainer = md_theme_dark_primaryContainer,
+        onPrimaryContainer = md_theme_dark_onPrimaryContainer,
+        secondary = md_theme_dark_secondary,
+        onSecondary = md_theme_dark_onSecondary,
+        secondaryContainer = md_theme_dark_secondaryContainer,
+        onSecondaryContainer = md_theme_dark_onSecondaryContainer,
+        tertiary = md_theme_dark_tertiary,
+        onTertiary = md_theme_dark_onTertiary,
+        tertiaryContainer = md_theme_dark_tertiaryContainer,
+        onTertiaryContainer = md_theme_dark_onTertiaryContainer,
+        error = md_theme_dark_error,
+        onError = md_theme_dark_onError,
+        errorContainer = md_theme_dark_errorContainer,
+        onErrorContainer = md_theme_dark_onErrorContainer,
+        outline = md_theme_dark_outline,
+        background = md_theme_dark_background,
+        onBackground = md_theme_dark_onBackground,
+        surface = md_theme_dark_surface,
+        onSurface = md_theme_dark_onSurface,
+        surfaceVariant = md_theme_dark_surfaceVariant,
+        onSurfaceVariant = md_theme_dark_onSurfaceVariant,
+        inverseSurface = md_theme_dark_inverseSurface,
+        inverseOnSurface = md_theme_dark_inverseOnSurface,
+        inversePrimary = md_theme_dark_inversePrimary,
+        surfaceTint = md_theme_dark_surfaceTint,
+        outlineVariant = md_theme_dark_outlineVariant,
+        scrim = md_theme_dark_scrim,
     )
 
 @Composable