Migrate to Materials 3

Fate-Grand-Automata · Dec 10, 2022 · a84a295 · a84a295
1 parent d41afa5
commit a84a295
Show file tree

Hide file tree

Showing 54 changed files with 515 additions and 399 deletions.
diff --git a/app/build.gradle b/app/build.gradle
@@ -125,6 +125,7 @@ dependencies {
     def accompanist_version = "0.28.0"
     implementation "com.google.accompanist:accompanist-pager:$accompanist_version"
     implementation "com.google.accompanist:accompanist-pager-indicators:$accompanist_version"
+    implementation "com.google.accompanist:accompanist-flowlayout:$accompanist_version"
 }
 
 kapt {

diff --git a/app/src/main/java/com/mathewsachin/fategrandautomata/ui/DimmedIcon.kt b/app/src/main/java/com/mathewsachin/fategrandautomata/ui/DimmedIcon.kt
@@ -1,8 +1,8 @@
 package com.mathewsachin.fategrandautomata.ui
 
-import androidx.compose.material.ContentAlpha
-import androidx.compose.material.Icon
-import androidx.compose.material.LocalContentAlpha
+import androidx.compose.material3.Icon
+import androidx.compose.material3.LocalContentColor
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.ui.Modifier
@@ -13,7 +13,7 @@ fun DimmedIcon(
     modifier: Modifier = Modifier,
     contentDescription: String = "icon"
 ) {
-    CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
+    CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.onSurfaceVariant) {
         Icon(
             icon.asPainter(),
             contentDescription = contentDescription,

diff --git a/app/src/main/java/com/mathewsachin/fategrandautomata/ui/FgaDialog.kt b/app/src/main/java/com/mathewsachin/fategrandautomata/ui/FgaDialog.kt
@@ -6,9 +6,9 @@ import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.shape.CircleShape
-import androidx.compose.material.*
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Check
+import androidx.compose.material3.*
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
@@ -59,7 +59,7 @@ class FgaDialog private constructor() {
 
             Text(
                 text,
-                style = MaterialTheme.typography.h6
+                style = MaterialTheme.typography.titleLarge
             )
         }
     }
@@ -89,32 +89,32 @@ class FgaDialog private constructor() {
                 .fillMaxWidth()
                 .padding(16.dp, 5.dp)
         ) {
-                if (showCancel) {
-                    TextButton(
-                        onClick = { hide() }
-                    ) {
-                        Text(cancelLabel.uppercase())
-                    }
+            if (showCancel) {
+                TextButton(
+                    onClick = { hide() }
+                ) {
+                    Text(cancelLabel.uppercase())
                 }
+            }
 
-                if (showOk) {
-                    TextButton(
-                        onClick = {
-                            onSubmit()
-                            hide()
-                        },
-                        enabled = okEnabled
-                    ) {
-                        Text(okLabel.uppercase())
-                    }
+            if (showOk) {
+                TextButton(
+                    onClick = {
+                        onSubmit()
+                        hide()
+                    },
+                    enabled = okEnabled
+                ) {
+                    Text(okLabel.uppercase())
                 }
             }
+        }
     }
 
     @Composable
     fun build(
         shape: Shape = MaterialTheme.shapes.medium,
-        color: Color = MaterialTheme.colors.surface,
+        color: Color = MaterialTheme.colorScheme.surface,
         contentColor: Color = contentColorFor(color),
         content: @Composable FgaDialog.() -> Unit
     ) {
@@ -191,20 +191,13 @@ fun ChoiceListItem(
     onClick: () -> Unit,
     content: @Composable RowScope.() -> Unit
 ) {
-    val background =
-        if (isSelected)
-            MaterialTheme.colors.secondary
-        else MaterialTheme.colors.surface
-
-    val foreground =
-        if (isSelected)
-            MaterialTheme.colors.onSecondary
-        else MaterialTheme.colors.onSurface
-
     Card(
         shape = CircleShape,
-        backgroundColor = background,
-        contentColor = foreground,
+        colors = CardDefaults.cardColors(
+            containerColor =
+            if (isSelected) MaterialTheme.colorScheme.primaryContainer
+            else MaterialTheme.colorScheme.surfaceVariant
+        ),
         modifier = Modifier
             .padding(bottom = 7.dp)
     ) {

diff --git a/app/src/main/java/com/mathewsachin/fategrandautomata/ui/GroupSelector.kt b/app/src/main/java/com/mathewsachin/fategrandautomata/ui/GroupSelector.kt
@@ -1,9 +1,10 @@
 package com.mathewsachin.fategrandautomata.ui
 
 import androidx.compose.foundation.layout.padding
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Surface
-import androidx.compose.material.Text
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
@@ -17,7 +18,7 @@ fun GroupSelectorItem(
     enabled: Boolean = true
 ) {
     Surface(
-        color = if (isSelected) MaterialTheme.colors.primary else Color.Transparent,
+        color = if (isSelected) MaterialTheme.colorScheme.primary else Color.Transparent,
         shape = MaterialTheme.shapes.medium,
         modifier = Modifier
             .padding(end = 5.dp),
@@ -26,7 +27,7 @@ fun GroupSelectorItem(
     ) {
         Text(
             item,
-            color = if (isSelected) MaterialTheme.colors.onPrimary else Color.Unspecified,
+            color = if (isSelected) MaterialTheme.colorScheme.onPrimary else Color.Unspecified,
             modifier = Modifier.padding(5.dp, 2.dp)
         )
     }

diff --git a/app/src/main/java/com/mathewsachin/fategrandautomata/ui/Heading.kt b/app/src/main/java/com/mathewsachin/fategrandautomata/ui/Heading.kt
@@ -7,10 +7,7 @@ import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.lazy.LazyListScope
 import androidx.compose.foundation.lazy.LazyRow
 import androidx.compose.foundation.shape.CircleShape
-import androidx.compose.material.Card
-import androidx.compose.material.Icon
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Text
+import androidx.compose.material3.*
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -30,7 +27,7 @@ fun Heading(
 
         Text(
             if (landscape) text.uppercase() else text,
-            style = if (landscape) MaterialTheme.typography.subtitle2 else MaterialTheme.typography.h4,
+            style = if (landscape) MaterialTheme.typography.titleSmall else MaterialTheme.typography.headlineMedium,
             modifier = Modifier
                 .padding(start = 16.dp)
         )
@@ -57,8 +54,10 @@ fun HeadingButton(
 ) {
     Card(
         shape = CircleShape,
-        backgroundColor = if (isDanger) MaterialTheme.colors.error else MaterialTheme.colors.primary,
-        contentColor = if (isDanger) MaterialTheme.colors.onError else MaterialTheme.colors.onPrimary,
+        colors = CardDefaults.cardColors(
+            containerColor = if (isDanger) MaterialTheme.colorScheme.error else MaterialTheme.colorScheme.primary,
+            contentColor = if (isDanger) MaterialTheme.colorScheme.onError else MaterialTheme.colorScheme.onPrimary
+        ),
         modifier = modifier
             .padding(end = 5.dp)
             .animateContentSize()
@@ -81,7 +80,7 @@ fun HeadingButton(
 
             Text(
                 text.uppercase(),
-                style = MaterialTheme.typography.subtitle2
+                style = MaterialTheme.typography.titleSmall
             )
         }
     }

diff --git a/app/src/main/java/com/mathewsachin/fategrandautomata/ui/Stepper.kt b/app/src/main/java/com/mathewsachin/fategrandautomata/ui/Stepper.kt
@@ -3,9 +3,9 @@ package com.mathewsachin.fategrandautomata.ui
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.CircleShape
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Surface
-import androidx.compose.material.Text
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -29,7 +29,7 @@ private fun DeltaButton(
 
     Surface(
         color = Color.Transparent,
-        contentColor = MaterialTheme.colors.onBackground,
+        contentColor = MaterialTheme.colorScheme.onBackground,
         shape = CircleShape
     ) {
         StatusWrapper(enabled = isEnabled) {

diff --git a/app/src/main/java/com/mathewsachin/fategrandautomata/ui/Tabbed.kt b/app/src/main/java/com/mathewsachin/fategrandautomata/ui/Tabbed.kt
@@ -1,17 +1,15 @@
 package com.mathewsachin.fategrandautomata.ui
 
 import androidx.compose.foundation.layout.Column
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.ScrollableTabRow
-import androidx.compose.material.Tab
-import androidx.compose.material.TabRowDefaults
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.ScrollableTabRow
+import androidx.compose.material3.Tab
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 import com.google.accompanist.pager.HorizontalPager
-import com.google.accompanist.pager.pagerTabIndicatorOffset
 import com.google.accompanist.pager.rememberPagerState
 import kotlinx.coroutines.launch
 
@@ -30,13 +28,8 @@ fun <T> Tabbed(
     ) {
         ScrollableTabRow(
             selectedTabIndex = pagerState.currentPage,
-            indicator = { tabPositions ->
-                TabRowDefaults.Indicator(
-                    Modifier.pagerTabIndicatorOffset(pagerState, tabPositions)
-                )
-            },
             edgePadding = 0.dp,
-            backgroundColor = MaterialTheme.colors.surface
+            containerColor = MaterialTheme.colorScheme.surfaceVariant
         ) {
             // Add tabs for all of our pages
             items.forEachIndexed { index, it ->