M3 migration (#11)

2023-05-01 17:16:56 -07:00
parent 64cb06ff8e
commit c016ce191d
41 changed files with 492 additions and 382 deletions
--- a/app/src/main/java/com/example/superheroes/HeroesScreen.kt
+++ b/app/src/main/java/com/example/superheroes/HeroesScreen.kt
@@ -1,10 +1,11 @@
 /*
- * Copyright (c) 2022 The Android Open Source Project
+ * Copyright (C) 2023 The Android Open Source Project
+ *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
- *      http://www.apache.org/licenses/LICENSE-2.0
+ *     https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
@@ -13,10 +14,6 @@
 * limitations under the License.
 */

-// This file uses Experimental APIs.
-// Caution: Experimental APIs can change in the future or may be removed entirely.
-@file:OptIn(ExperimentalAnimationApi::class)
-
 package com.example.superheroes

 import android.content.res.Configuration
@@ -42,10 +39,11 @@ import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.itemsIndexed
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.Card
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Surface
-import androidx.compose.material.Text
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
@@ -60,6 +58,7 @@ import com.example.superheroes.model.Hero
 import com.example.superheroes.model.HeroesRepository
 import com.example.superheroes.ui.theme.SuperheroesTheme

+@OptIn(ExperimentalAnimationApi::class)
@Composable
 fun HeroesList(
    heroes: List<Hero>,
@@ -78,7 +77,8 @@ fun HeroesList(
        enter = fadeIn(
            animationSpec = spring(dampingRatio = DampingRatioLowBouncy)
        ),
-        exit = fadeOut()
+        exit = fadeOut(),
+        modifier = modifier
    ) {
        LazyColumn {
            itemsIndexed(heroes) { index, hero ->
@@ -108,7 +108,7 @@ fun HeroListItem(
    modifier: Modifier = Modifier
 ) {
    Card(
-        elevation = 2.dp,
+        elevation = CardDefaults.cardElevation(defaultElevation = 2.dp),
        modifier = modifier,
    ) {
        Row(
@@ -120,11 +120,11 @@ fun HeroListItem(
            Column(modifier = Modifier.weight(1f)) {
                Text(
                    text = stringResource(hero.nameRes),
-                    style = MaterialTheme.typography.h3
+                    style = MaterialTheme.typography.displaySmall
                )
                Text(
                    text = stringResource(hero.descriptionRes),
-                    style = MaterialTheme.typography.body1
+                    style = MaterialTheme.typography.bodyLarge
                )
            }
            Spacer(Modifier.width(16.dp))
@@ -164,7 +164,7 @@ fun HeroPreview() {
 fun HeroesPreview() {
    SuperheroesTheme(darkTheme = false) {
        Surface (
-            color = MaterialTheme.colors.background
+            color = MaterialTheme.colorScheme.background
        ) {
            /* Important: It is not a good practice to access data source directly from the UI.
            In later units you will learn how to use ViewModel in such scenarios that takes the
@@ -173,4 +173,4 @@ fun HeroesPreview() {
            HeroesList(heroes = HeroesRepository.heroes)
        }
    }
-}
+}
--- a/app/src/main/java/com/example/superheroes/MainActivity.kt
+++ b/app/src/main/java/com/example/superheroes/MainActivity.kt
@@ -1,10 +1,11 @@
 /*
- * Copyright (c) 2022 The Android Open Source Project
+ * Copyright (C) 2023 The Android Open Source Project
+ *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
- *      http://www.apache.org/licenses/LICENSE-2.0
+ *     https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
@@ -18,20 +19,17 @@ package com.example.superheroes
 import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
-import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Scaffold
-import androidx.compose.material.Text
+import androidx.compose.material3.CenterAlignedTopAppBar
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Surface
+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.stringResource
 import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.dp
 import com.example.superheroes.model.HeroesRepository
 import com.example.superheroes.ui.theme.SuperheroesTheme

@@ -40,57 +38,62 @@ class MainActivity : ComponentActivity() {
        super.onCreate(savedInstanceState)
        setContent {
            SuperheroesTheme {
-                SuperheroesApp()
+                // A surface container using the 'background' color from the theme
+                Surface(
+                    modifier = Modifier.fillMaxSize(),
+                    color = MaterialTheme.colorScheme.background
+                ) {
+                    SuperheroesApp()
+                }
            }
        }
    }
-}

-/**
- * Composable that displays an app bar and a list of heroes.
- */
-@Composable
-fun SuperheroesApp() {
-    Scaffold(
-        modifier = Modifier.fillMaxSize(),
-        topBar = {
-            TopAppBar()
+    /**
+     * Composable that displays an app bar and a list of heroes.
+     */
+    @Composable
+    fun SuperheroesApp() {
+        Scaffold(
+            modifier = Modifier.fillMaxSize(),
+            topBar = {
+                TopAppBar()
+            }
+        ) {
+            /* Important: It is not a good practice to access data source directly from the UI.
+            In later units you will learn how to use ViewModel in such scenarios that takes the
+            data source as a dependency and exposes heroes.
+             */
+            val heroes = HeroesRepository.heroes
+            HeroesList(heroes = heroes, Modifier.padding(it))
+
        }
-    ) {
-        /* Important: It is not a good practice to access data source directly from the UI.
-        In later units you will learn how to use ViewModel in such scenarios that takes the
-        data source as a dependency and exposes heroes.
-         */
-        val heroes = HeroesRepository.heroes
-        HeroesList(heroes = heroes, Modifier.padding(it))
-
    }
-}

-/**
- * Composable that displays a Top Bar with an icon and text.
- *
- * @param modifier modifiers to set to this composable
- */
-@Composable
-fun TopAppBar(modifier: Modifier = Modifier) {
-    Box(
-        modifier = modifier
-            .fillMaxWidth()
-            .size(56.dp),
-        contentAlignment = Alignment.Center
-    ) {
-        Text(
-            text = stringResource(R.string.app_name),
-            style = MaterialTheme.typography.h1,
+    /**
+     * Composable that displays a Top Bar with an icon and text.
+     *
+     * @param modifier modifiers to set to this composable
+     */
+    @Composable
+    fun TopAppBar(modifier: Modifier = Modifier) {
+        CenterAlignedTopAppBar(
+            title = {
+                Text(
+                    text = stringResource(R.string.app_name),
+                    style = MaterialTheme.typography.displayLarge,
+                )
+            },
+            modifier = modifier
        )
    }
-}

-@Preview(showBackground = true)
-@Composable
-fun SuperHeroesPreview() {
-    SuperheroesTheme {
-        SuperheroesApp()
+    @Preview(showBackground = true)
+    @Composable
+    fun SuperHeroesPreview() {
+        SuperheroesTheme {
+            SuperheroesApp()
+        }
    }
 }
+
--- a/app/src/main/java/com/example/superheroes/model/Hero.kt
+++ b/app/src/main/java/com/example/superheroes/model/Hero.kt
@@ -1,10 +1,11 @@
 /*
- * Copyright (c) 2022 The Android Open Source Project
+ * Copyright (C) 2023 The Android Open Source Project
+ *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
- *      http://www.apache.org/licenses/LICENSE-2.0
+ *     https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
@@ -17,10 +18,9 @@ package com.example.superheroes.model

 import androidx.annotation.DrawableRes
 import androidx.annotation.StringRes
-import com.example.superheroes.R

 data class Hero(
    @StringRes val nameRes: Int,
    @StringRes val descriptionRes: Int,
    @DrawableRes val imageRes: Int
-)
+)
--- a/app/src/main/java/com/example/superheroes/model/HeroesDataSource.kt
+++ b/app/src/main/java/com/example/superheroes/model/HeroesDataSource.kt
@@ -1,10 +1,11 @@
 /*
- * Copyright (c) 2022 The Android Open Source Project
+ * Copyright (C) 2023 The Android Open Source Project
+ *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
- *      http://www.apache.org/licenses/LICENSE-2.0
+ *     https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
--- a/app/src/main/java/com/example/superheroes/ui/theme/Color.kt
+++ b/app/src/main/java/com/example/superheroes/ui/theme/Color.kt
@@ -1,10 +1,11 @@
 /*
- * Copyright (c) 2022 The Android Open Source Project
+ * Copyright (C) 2023 The Android Open Source Project
+ *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
- *      http://www.apache.org/licenses/LICENSE-2.0
+ *     https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
@@ -17,19 +18,62 @@ package com.example.superheroes.ui.theme

 import androidx.compose.ui.graphics.Color

-//Light Theme
-val md_theme_light_background = Color(0xFFFDFCF4)
-val md_theme_light_surface = Color(0xFFE0EACE)
-val md_theme_light_secondary = Color(0xFF596148)
-val md_theme_light_onSurface = Color(0xFF1B1C18)
 val md_theme_light_primary = Color(0xFF466800)
-val md_theme_light_onPrimary = Color(0xFF223600)
+val md_theme_light_onPrimary = Color(0xFFFFFFFF)
+val md_theme_light_primaryContainer = Color(0xFFC6F181)
+val md_theme_light_onPrimaryContainer = Color(0xFF121F00)
+val md_theme_light_secondary = Color(0xFF596248)
+val md_theme_light_onSecondary = Color(0xFFFFFFFF)
+val md_theme_light_secondaryContainer = Color(0xFFDDE6C6)
+val md_theme_light_onSecondaryContainer = Color(0xFF161E0A)
+val md_theme_light_tertiary = Color(0xFF396661)
+val md_theme_light_onTertiary = Color(0xFFFFFFFF)
+val md_theme_light_tertiaryContainer = Color(0xFFBCECE6)
+val md_theme_light_onTertiaryContainer = Color(0xFF00201D)
+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(0xFFFEFCF5)
+val md_theme_light_onBackground = Color(0xFF1B1C18)
+val md_theme_light_surface = Color(0xFFFEFCF5)
+val md_theme_light_onSurface = Color(0xFF1B1C18)
+val md_theme_light_surfaceVariant = Color(0xFFE1E4D4)
+val md_theme_light_onSurfaceVariant = Color(0xFF45483D)
+val md_theme_light_outline = Color(0xFF75786C)
+val md_theme_light_inverseOnSurface = Color(0xFFF2F1E9)
+val md_theme_light_inverseSurface = Color(0xFF30312C)
+val md_theme_light_inversePrimary = Color(0xFFABD468)
+val md_theme_light_surfaceTint = Color(0xFF466800)
+val md_theme_light_outlineVariant = Color(0xFFC5C8B9)
+val md_theme_light_scrim = Color(0xFF000000)

-
-// Dark Theme
+val md_theme_dark_primary = Color(0xFFABD468)
+val md_theme_dark_onPrimary = Color(0xFF223600)
+val md_theme_dark_primaryContainer = Color(0xFF344E00)
+val md_theme_dark_onPrimaryContainer = Color(0xFFC6F181)
+val md_theme_dark_secondary = Color(0xFFC1CAAB)
+val md_theme_dark_onSecondary = Color(0xFF2B331D)
+val md_theme_dark_secondaryContainer = Color(0xFF414A32)
+val md_theme_dark_onSecondaryContainer = Color(0xFFDDE6C6)
+val md_theme_dark_tertiary = Color(0xFFA0D0CA)
+val md_theme_dark_onTertiary = Color(0xFF013733)
+val md_theme_dark_tertiaryContainer = Color(0xFF1F4E4A)
+val md_theme_dark_onTertiaryContainer = Color(0xFFBCECE6)
+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(0xFF1B1C18)
-val md_theme_dark_surface = Color(0xFF373F29)
-val md_theme_dark_secondary = Color(0xFFDDE6C6)
+val md_theme_dark_onBackground = Color(0xFFE4E3DB)
+val md_theme_dark_surface = Color(0xFF1B1C18)
 val md_theme_dark_onSurface = Color(0xFFE4E3DB)
-val md_theme_dark_primary = Color(0xFFC1CAAB)
-val md_theme_dark_onPrimary = Color(0xFFDDE6C6)
+val md_theme_dark_surfaceVariant = Color(0xFF45483D)
+val md_theme_dark_onSurfaceVariant = Color(0xFFC5C8B9)
+val md_theme_dark_outline = Color(0xFF8F9285)
+val md_theme_dark_inverseOnSurface = Color(0xFF1B1C18)
+val md_theme_dark_inverseSurface = Color(0xFFE4E3DB)
+val md_theme_dark_inversePrimary = Color(0xFF466800)
+val md_theme_dark_surfaceTint = Color(0xFFABD468)
+val md_theme_dark_outlineVariant = Color(0xFF45483D)
+val md_theme_dark_scrim = Color(0xFF000000)
--- a/app/src/main/java/com/example/superheroes/ui/theme/Shape.kt
+++ b/app/src/main/java/com/example/superheroes/ui/theme/Shape.kt
@@ -1,10 +1,11 @@
 /*
- * Copyright (c) 2022 The Android Open Source Project
+ * Copyright (C) 2023 The Android Open Source Project
+ *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
- *      http://www.apache.org/licenses/LICENSE-2.0
+ *     https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
@@ -16,11 +17,11 @@
 package com.example.superheroes.ui.theme

 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.Shapes
+import androidx.compose.material3.Shapes
 import androidx.compose.ui.unit.dp

 val Shapes = Shapes(
    small = RoundedCornerShape(8.dp),
    medium = RoundedCornerShape(16.dp),
    large = RoundedCornerShape(16.dp)
-)
+)
--- a/app/src/main/java/com/example/superheroes/ui/theme/Theme.kt
+++ b/app/src/main/java/com/example/superheroes/ui/theme/Theme.kt
@@ -1,10 +1,11 @@
 /*
- * Copyright (c) 2022 The Android Open Source Project
+ * Copyright (C) 2023 The Android Open Source Project
+ *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
- *      http://www.apache.org/licenses/LICENSE-2.0
+ *     https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
@@ -15,42 +16,115 @@

 package com.example.superheroes.ui.theme

+import android.app.Activity
+import android.os.Build
 import androidx.compose.foundation.isSystemInDarkTheme
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.darkColors
-import androidx.compose.material.lightColors
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.darkColorScheme
+import androidx.compose.material3.dynamicDarkColorScheme
+import androidx.compose.material3.dynamicLightColorScheme
+import androidx.compose.material3.lightColorScheme
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.SideEffect
+import androidx.compose.ui.graphics.toArgb
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.platform.LocalView
+import androidx.core.view.WindowCompat

-private val DarkColorPalette = darkColors(
-    background = md_theme_dark_background,
-    surface = md_theme_dark_surface,
-    onSurface = md_theme_dark_onSurface,
-    primary = md_theme_dark_primary,
-    onPrimary = md_theme_dark_onPrimary,
-    secondary = md_theme_dark_secondary
-)
-
-private val LightColorPalette = lightColors(
-    background = md_theme_light_background,
-    surface = md_theme_light_surface,
-    onSurface = md_theme_light_onSurface,
+private val LightColors = lightColorScheme(
    primary = md_theme_light_primary,
    onPrimary = md_theme_light_onPrimary,
-    secondary = md_theme_light_secondary
+    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 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 SuperheroesTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit) {
-    val colors = if (darkTheme) {
-        DarkColorPalette
-    } else {
-        LightColorPalette
+fun SuperheroesTheme(
+    darkTheme: Boolean = isSystemInDarkTheme(),
+    // Dynamic color is available on Android 12+
+    // Dynamic color in this app is turned off for learning purposes
+    dynamicColor: Boolean = false,
+    content: @Composable () -> Unit
+) {
+    val colorScheme = when {
+        dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
+            val context = LocalContext.current
+            if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
+        }
+
+        darkTheme -> DarkColors
+        else -> LightColors
+    }
+    val view = LocalView.current
+    if (!view.isInEditMode) {
+        SideEffect {
+            val window = (view.context as Activity).window
+            window.statusBarColor = colorScheme.background.toArgb()
+            WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = !darkTheme
+        }
    }

    MaterialTheme(
-        colors = colors,
+        colorScheme = colorScheme,
        typography = Typography,
        shapes = Shapes,
        content = content
    )
-}
+}
--- a/app/src/main/java/com/example/superheroes/ui/theme/Type.kt
+++ b/app/src/main/java/com/example/superheroes/ui/theme/Type.kt
@@ -1,10 +1,11 @@
 /*
- * Copyright (c) 2022 The Android Open Source Project
+ * Copyright (C) 2023 The Android Open Source Project
+ *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
- *      http://www.apache.org/licenses/LICENSE-2.0
+ *     https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
@@ -15,7 +16,7 @@

 package com.example.superheroes.ui.theme

-import androidx.compose.material.Typography
+import androidx.compose.material3.Typography
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.Font
 import androidx.compose.ui.text.font.FontFamily
@@ -27,25 +28,30 @@ val Cabin = FontFamily(
    Font(R.font.cabin_regular, FontWeight.Normal),
    Font(R.font.cabin_bold, FontWeight.Bold)
 )
-
 // Set of Material typography styles to start with
 val Typography = Typography(
-    defaultFontFamily = Cabin,
-    h1 = TextStyle(
+
+    bodyLarge = TextStyle(
+        fontFamily = Cabin,
+        fontWeight = FontWeight.Normal,
+        fontSize = 16.sp,
+        lineHeight = 24.sp,
+        letterSpacing = 0.5.sp
+    ),
+
+    displayLarge = TextStyle(
+        fontFamily = Cabin,
        fontWeight = FontWeight.Normal,
        fontSize = 30.sp
    ),
-    h2 = TextStyle(
+    displayMedium = TextStyle(
+        fontFamily = Cabin,
        fontWeight = FontWeight.Bold,
        fontSize = 20.sp
    ),
-    h3 = TextStyle(
+    displaySmall = TextStyle(
+        fontFamily = Cabin,
        fontWeight = FontWeight.Bold,
        fontSize = 20.sp
-    ),
-
-    body1 = TextStyle(
-        fontWeight = FontWeight.Normal,
-        fontSize = 16.sp
    )
-)
+)