REI-06 - Add app theme and fix screens (#6)

* Add app theme and fiz screens

* add color to colors

support-module/src/main/java/com/saudigitus/support_module/MainActivity.kt

@@ -18,6 +18,7 @@ import androidx.navigation.compose.NavHost
 import androidx.navigation.compose.rememberNavController
 import com.saudigitus.support_module.ui.Screen
 import com.saudigitus.support_module.ui.manualScreen.ManualScreen
+import com.saudigitus.support_module.ui.theme.SupportUiTheme
 import com.saudigitus.support_module.utils.Constants
 import org.dhis2.ui.theme.Dhis2Theme
 
@@ -26,13 +27,18 @@ class MainActivity : ComponentActivity() {
         super.onCreate(savedInstanceState)
         enableEdgeToEdge()
         setContent {
-            val screen = intent.extras?.getString(Constants.SCREENS_KEY) ?: Screen.Menu.route
-            val navController = rememberNavController()
-            Surface(
-                modifier = Modifier.fillMaxSize(),
-                color = MaterialTheme.colorScheme.background
+            SupportUiTheme(
+                darkTheme = false,
+                dynamicColor = false
             ) {
-                AppNavHost(navController = navController, route = screen, activity = this)
+                val screen = intent.extras?.getString(Constants.SCREENS_KEY) ?: Screen.Menu.route
+                val navController = rememberNavController()
+                Surface(
+                    modifier = Modifier.fillMaxSize(),
+                    color = MaterialTheme.colorScheme.background
+                ) {
+                    AppNavHost(navController = navController, route = screen, activity = this)
+                }
             }
         }
     }

support-module/src/main/java/com/saudigitus/support_module/ui/SupportScreen/SupportScreen.kt

@@ -17,6 +17,7 @@ import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import androidx.navigation.NavHostController
 import com.saudigitus.support_module.R
+import com.saudigitus.support_module.ui.components.BasicApp
 import com.saudigitus.support_module.ui.components.SimpleCard
 import timber.log.Timber
 
@@ -26,47 +27,10 @@ fun SupportScreen(
     navController: NavHostController,
     onBack: () -> Unit = {} // Placeholder for back action
 ) {
-    Scaffold(
-        Modifier.background(Color(0xFF2196F3)),
-        topBar = {
-            TopAppBar(
-                title = {
-                    Text(
-                        text = stringResource(id = R.string.support_view_title),
-                        color = Color.White,
-                        fontSize = 20.sp
-                    )
-                },
-                navigationIcon = {
-                    IconButton(onClick = onBack) {
-                        Icon(
-                            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
-                            contentDescription = "Back",
-                            tint = Color.White
-                        )
-                    }
-                },
-                colors = TopAppBarDefaults.topAppBarColors(
-                    containerColor = Color(0xFF2196F3) // Blue background color
-                )
-            )
-        }
-    ) { paddingValues ->
-        Box(
-            modifier = Modifier
-                .fillMaxSize()
-                .background(Color(0xFF2196F3)) // Set your background color here
-                .padding(paddingValues) // Ensures the padding is applied to the content
-        ) {
-        // Wrapping the content with a Surface to give it rounded corners
-        Surface(
-            modifier = Modifier
-                .fillMaxSize()
-                .padding(top = 10.dp),
-            shape = RoundedCornerShape(topStart = 16.dp, topEnd = 16.dp), // Rounded top corners
-
-            shadowElevation = 4.dp // Elevation for shadow
-        ) {
+    BasicApp(
+        title = stringResource(id = R.string.support_view_title),
+        onBack = onBack,
+        content = {
             Column(
                 modifier = Modifier
                     .fillMaxSize()
@@ -75,18 +39,17 @@ fun SupportScreen(
             ) {
                 Spacer(Modifier.height(20.dp))
                 Text(
-                    text = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's",
+                    text = stringResource(id = R.string.support_view_subtitle),
                     fontSize = 16.sp,
                     color = Color.Gray
                 )
                 Spacer(Modifier.height(20.dp))
-                SimpleCard(title = "Relatar erros de sincronização", icon = Icons.Default.Close)
+                SimpleCard(title = stringResource(id = R.string.sync_errord), icon = Icons.Default.Close)
                 Spacer(Modifier.height(20.dp))
-                SimpleCard(title = "Relatar outros erros", icon = Icons.Default.Warning)
+                SimpleCard(title = stringResource(id = R.string.other_errors) , icon = Icons.Default.Warning)
             }
         }
-        }
-    }
+    )
 }
 
 @Preview(showBackground = true)

support-module/src/main/java/com/saudigitus/support_module/ui/components/BasicApp.kt

@@ -20,6 +20,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import com.saudigitus.support_module.ui.theme.app_blue_color
 
 @JvmOverloads
 @OptIn(ExperimentalMaterial3Api::class)
@@ -31,7 +32,6 @@ fun BasicApp(
     fab:  (@Composable () -> Unit)? = null
 ) {
     Scaffold(
-        Modifier.background(Color(0xFF2196F3)),
         topBar = {
             TopAppBar(
                 title = {
@@ -51,7 +51,7 @@ fun BasicApp(
                     }
                 },
                 colors = TopAppBarDefaults.topAppBarColors(
-                    containerColor = Color(0xFF2196F3) // Blue background color
+                    containerColor = app_blue_color // Blue background color
                 )
             )
         },
@@ -63,17 +63,14 @@ fun BasicApp(
     ) { paddingValues ->
         Box(
             modifier = Modifier
-                .fillMaxSize()
                 .background(Color(0xFF2196F3)) // Set your background color here
                 .padding(paddingValues) // Ensures the padding is applied to the content
         ) {
             // Wrapping the content with a Surface to give it rounded corners
             Surface(
                 modifier = Modifier
-                    .fillMaxSize()
-                    .padding(top = 10.dp),
+                    .fillMaxSize(),
                 shape = RoundedCornerShape(topStart = 16.dp, topEnd = 16.dp), // Rounded top corners
-
                 shadowElevation = 4.dp // Elevation for shadow
             ) {
                 // CONTENT

support-module/src/main/java/com/saudigitus/support_module/ui/components/ListCard.kt

@@ -42,7 +42,7 @@ fun ListCard(imageResId: Int, title: String, subtitle: String, icon: androidx.co
     Card(
         modifier = Modifier
             .fillMaxWidth()
-            .size(width = 0.dp, height = 70.dp)
+            .size(width = 0.dp, height = 80.dp)
             .shadow(2.dp, RoundedCornerShape(16.dp))
             .clip(RoundedCornerShape(16.dp)),
         colors = CardDefaults.cardColors(containerColor = Color.White),

support-module/src/main/java/com/saudigitus/support_module/ui/theme/Color.kt

@@ -2,10 +2,73 @@ package com.saudigitus.support_module.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(0xFF0062A2)
+val md_theme_light_onPrimary = Color(0xFFFFFFFF)
+val md_theme_light_primaryContainer = Color(0xFFD1E4FF)
+val md_theme_light_onPrimaryContainer = Color(0xFF001D35)
+val md_theme_light_secondary = Color(0xFF535F70)
+val md_theme_light_onSecondary = Color(0xFFFFFFFF)
+val md_theme_light_secondaryContainer = Color(0xFFD6E4F7)
+val md_theme_light_onSecondaryContainer = Color(0xFF0F1C2B)
+val md_theme_light_tertiary = Color(0xFF6A5778)
+val md_theme_light_onTertiary = Color(0xFFFFFFFF)
+val md_theme_light_tertiaryContainer = Color(0xFFF2DAFF)
+val md_theme_light_onTertiaryContainer = Color(0xFF251432)
+val md_theme_light_error = Color(0xFFBA1A1A)
+val md_theme_light_errorContainer = Color(0xFFFFDAD6)
+val md_theme_light_onError = Color(0xFFFFFFFF)
+val md_theme_light_onErrorContainer = Color(0xFF410002)
+val md_theme_light_background = Color(0xFFFDFCFF)
+val md_theme_light_onBackground = Color(0xFF1A1C1E)
+val md_theme_light_surface = Color(0xFFFDFCFF)
+val md_theme_light_onSurface = Color(0xFF1A1C1E)
+val md_theme_light_surfaceVariant = Color(0xFFDFE2EB)
+val md_theme_light_onSurfaceVariant = Color(0xFF42474E)
+val md_theme_light_outline = Color(0xFF73777F)
+val md_theme_light_inverseOnSurface = Color(0xFFF1F0F4)
+val md_theme_light_inverseSurface = Color(0xFF2F3033)
+val md_theme_light_inversePrimary = Color(0xFF9DCAFF)
+val md_theme_light_shadow = Color(0xFF000000)
+val md_theme_light_surfaceTint = Color(0xFF0062A2)
+val md_theme_light_outlineVariant = Color(0xFFC3C7CF)
+val md_theme_light_scrim = Color(0xFF000000)
 
-val Purple40 = Color(0xFF6650a4)
-val PurpleGrey40 = Color(0xFF625b71)
-val Pink40 = Color(0xFF7D5260)
+val md_theme_dark_primary = Color(0xFF9DCAFF)
+val md_theme_dark_onPrimary = Color(0xFF003257)
+val md_theme_dark_primaryContainer = Color(0xFF00497C)
+val md_theme_dark_onPrimaryContainer = Color(0xFFD1E4FF)
+val md_theme_dark_secondary = Color(0xFFBAC8DB)
+val md_theme_dark_onSecondary = Color(0xFF253140)
+val md_theme_dark_secondaryContainer = Color(0xFF3B4858)
+val md_theme_dark_onSecondaryContainer = Color(0xFFD6E4F7)
+val md_theme_dark_tertiary = Color(0xFFD6BEE5)
+val md_theme_dark_onTertiary = Color(0xFF3A2948)
+val md_theme_dark_tertiaryContainer = Color(0xFF524060)
+val md_theme_dark_onTertiaryContainer = Color(0xFFF2DAFF)
+val md_theme_dark_error = Color(0xFFFFB4AB)
+val md_theme_dark_errorContainer = Color(0xFF93000A)
+val md_theme_dark_onError = Color(0xFF690005)
+val md_theme_dark_onErrorContainer = Color(0xFFFFDAD6)
+val md_theme_dark_background = Color(0xFF1A1C1E)
+val md_theme_dark_onBackground = Color(0xFFE2E2E6)
+val md_theme_dark_surface = Color(0xFF1A1C1E)
+val md_theme_dark_onSurface = Color(0xFFE2E2E6)
+val md_theme_dark_surfaceVariant = Color(0xFF42474E)
+val md_theme_dark_onSurfaceVariant = Color(0xFFC3C7CF)
+val md_theme_dark_outline = Color(0xFF8D9199)
+val md_theme_dark_inverseOnSurface = Color(0xFF1A1C1E)
+val md_theme_dark_inverseSurface = Color(0xFFE2E2E6)
+val md_theme_dark_inversePrimary = Color(0xFF0062A2)
+val md_theme_dark_shadow = Color(0xFF000000)
+val md_theme_dark_surfaceTint = Color(0xFF9DCAFF)
+val md_theme_dark_outlineVariant = Color(0xFF42474E)
+val md_theme_dark_scrim = Color(0xFF000000)
+
+
+val seed = Color(0xFF2C98F0)
+
+val light_success = Color(0xFF81C784)
+val light_info = Color(0xFF4FC3F7)
+val light_warning = Color(0xFFFFB74D)
+val light_error = Color(0xFFE57373)
+val app_blue_color = Color(0xFF2196F3)

support-module/src/main/java/com/saudigitus/support_module/ui/theme/Theme.kt

@@ -15,30 +15,74 @@ 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 LightColors = lightColorScheme(
+    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,
+    errorContainer = md_theme_light_errorContainer,
+    onError = md_theme_light_onError,
+    onErrorContainer = md_theme_light_onErrorContainer,
+    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,
+    outline = md_theme_light_outline,
+    inverseOnSurface = md_theme_light_inverseOnSurface,
+    inverseSurface = md_theme_light_inverseSurface,
+    inversePrimary = md_theme_light_inversePrimary,
+    surfaceTint = md_theme_light_surfaceTint,
+    outlineVariant = md_theme_light_outlineVariant,
+    scrim = md_theme_light_scrim,
 )
 
-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),
-    */
+private val DarkColors = 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,
+    errorContainer = md_theme_dark_errorContainer,
+    onError = md_theme_dark_onError,
+    onErrorContainer = md_theme_dark_onErrorContainer,
+    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,
+    outline = md_theme_dark_outline,
+    inverseOnSurface = md_theme_dark_inverseOnSurface,
+    inverseSurface = md_theme_dark_inverseSurface,
+    inversePrimary = md_theme_dark_inversePrimary,
+    surfaceTint = md_theme_dark_surfaceTint,
+    outlineVariant = md_theme_dark_outlineVariant,
+    scrim = md_theme_dark_scrim,
 )
 
 @Composable
-fun ViewTestTheme(
+fun SupportUiTheme(
     darkTheme: Boolean = isSystemInDarkTheme(),
     // Dynamic color is available on Android 12+
     dynamicColor: Boolean = true,
@@ -50,21 +94,22 @@ fun ViewTestTheme(
             if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
         }
 
-        darkTheme -> DarkColorScheme
-        else -> LightColorScheme
+        darkTheme -> DarkColors
+        else -> LightColors
     }
     val view = LocalView.current
     if (!view.isInEditMode) {
         SideEffect {
             val window = (view.context as Activity).window
             window.statusBarColor = colorScheme.primary.toArgb()
+            window.navigationBarColor = colorScheme.background.toArgb()
             WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = darkTheme
         }
     }
 
     MaterialTheme(
         colorScheme = colorScheme,
-
+        typography = Typography,
         content = content
     )
 }

support-module/src/main/res/values/strings.xml

@@ -6,4 +6,7 @@
     <string name="support_menu_label">Suporte ao utilizador</string>
     <string name="title_activity_main">MainActivity</string>
     <string name="support_view_title">Suporte ao utilizador</string>
+    <string name="sync_errord">Relatar erros de sincronização</string>
+    <string name="other_errors">Relatar outros erros</string>
+    <string name="support_view_subtitle"><![CDATA[Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s]]></string>
 </resources>