feat: change material imports to material3 (#128)

* feat: add first migrations to material3

* feat: add migration of material to material3 and update code

* feat: remove material dependency

wallet_app/app/build.gradle.kts

@@ -103,8 +103,6 @@ dependencies {
 
     // Material Design 3
     implementation(libs.androidx.material3)
-    // or Material Design 2
-    implementation(libs.androidx.material)
 
     // Retrofit for network requests
     implementation(libs.retrofit)

wallet_app/app/src/main/java/com/example/walletapp/ui/account/AddTokenScreen.kt

@@ -11,12 +11,13 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.Button
-import androidx.compose.material.ButtonDefaults
-import androidx.compose.material.Surface
-import androidx.compose.material.Text
-import androidx.compose.material.TextField
-import androidx.compose.material.TextFieldDefaults
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.OutlinedTextFieldDefaults
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextField
+import androidx.compose.material3.TextFieldDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
@@ -141,8 +142,9 @@ fun AddTokenScreen(tokenViewModel:TokenViewModel,onConfirm: () -> Unit) {
                         Toast.makeText(context, "Token added!", Toast.LENGTH_LONG).show()
                     }
                 },
-                colors = ButtonDefaults.buttonColors(backgroundColor = Color("#1B1B76".toColorInt())),
-                modifier = Modifier
+                colors = ButtonDefaults.buttonColors(
+                    containerColor = Color("#1B1B76".toColorInt())
+                ), modifier = Modifier
                     .fillMaxWidth()
                     .padding(start = 30.dp, end = 30.dp)
             ) {
@@ -173,12 +175,15 @@ fun SimpleTextField(
             value = value,
             onValueChange = onValueChange,
             placeholder = { Text(text = placeholder) },
-            colors = TextFieldDefaults.outlinedTextFieldColors(
-                backgroundColor = Color("#1B1B76".toColorInt()),
-                focusedBorderColor = Color.Transparent,
+            colors = OutlinedTextFieldDefaults.colors(
+                unfocusedContainerColor = Color("#1B1B76".toColorInt()),
+                focusedContainerColor = Color("#1B1B76".toColorInt()),
                 unfocusedBorderColor = Color.Transparent,
-                textColor = Color.Black,
-                placeholderColor = Color("#A9A9A9".toColorInt())
+                focusedBorderColor = Color.Transparent,
+                unfocusedTextColor = Color.Black,
+                focusedTextColor = Color.Black,
+                unfocusedPlaceholderColor = Color("#A9A9A9".toColorInt()),
+                focusedPlaceholderColor = Color("#A9A9A9".toColorInt())
             ),
             shape = RoundedCornerShape(15.dp),
             modifier = Modifier.fillMaxWidth(),

wallet_app/app/src/main/java/com/example/walletapp/ui/account/WalletScreen.kt

@@ -21,10 +21,10 @@ import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.Button
-import androidx.compose.material.ButtonDefaults
-import androidx.compose.material.Card
-import androidx.compose.material.Surface
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.Card
+import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
@@ -39,7 +39,7 @@ import androidx.compose.ui.unit.sp
 import androidx.core.graphics.toColorInt
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.ArrowDropDown
-import androidx.compose.material.*
+import androidx.compose.material3.*
 import androidx.compose.material.icons.filled.Close
 import androidx.compose.runtime.*
 import androidx.compose.runtime.livedata.observeAsState
@@ -151,7 +151,7 @@ fun Wallet(modifier: Modifier, onNewTokenPress: () -> Unit, onReceivePress: () -
     if (errorMessage.isNotEmpty()) {
         Text(
             text = errorMessage,
-            color = MaterialTheme.colors.error,
+            color = MaterialTheme.colorScheme.error,
             modifier = Modifier.padding(16.dp)
         )
     } else {
@@ -261,7 +261,9 @@ fun Wallet(modifier: Modifier, onNewTokenPress: () -> Unit, onReceivePress: () -
         ) {
             Button(
                 onClick = onReceivePress,
-                colors = ButtonDefaults.buttonColors(backgroundColor = Color("#1B1B76".toColorInt())),
+                colors = ButtonDefaults.buttonColors(
+                    containerColor = Color("#1B1B76".toColorInt())
+                ),
                 shape = RoundedCornerShape(15.dp),
             ) {
                 Text(
@@ -272,8 +274,9 @@ fun Wallet(modifier: Modifier, onNewTokenPress: () -> Unit, onReceivePress: () -
             }
             Button(
                 onClick = onSendPress,
-
-                colors = ButtonDefaults.buttonColors(backgroundColor = Color("#1B1B76".toColorInt())),
+                colors = ButtonDefaults.buttonColors(
+                    containerColor = Color("#1B1B76".toColorInt())
+                ),
                 shape = RoundedCornerShape(15.dp),
             ) {
                 Text(
@@ -291,7 +294,9 @@ fun Wallet(modifier: Modifier, onNewTokenPress: () -> Unit, onReceivePress: () -
 @Composable
 fun WalletCard(imageUrl: String,name:String, amount: String, balance: String, type: String) {
     Card(
-        backgroundColor = Color(0xFF1E1E96),
+        colors = CardDefaults.cardColors(
+            containerColor = Color(0xFF1E1E96)
+        ),
         modifier = Modifier
             .fillMaxWidth()
             .padding(vertical = 8.dp)

wallet_app/app/src/main/java/com/example/walletapp/ui/onboarding/CreateAccountScreen.kt

@@ -16,23 +16,23 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.Button
-import androidx.compose.material.ButtonDefaults
-import androidx.compose.material.ExperimentalMaterialApi
-import androidx.compose.material.Icon
-import androidx.compose.material.LinearProgressIndicator
-import androidx.compose.material.OutlinedTextField
-import androidx.compose.material.Scaffold
-import androidx.compose.material.Text
-import androidx.compose.material.TextFieldDefaults
-import androidx.compose.material.TopAppBar
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.Icon
+import androidx.compose.material3.LinearProgressIndicator
+import androidx.compose.material3.OutlinedTextField
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextFieldDefaults
+import androidx.compose.material3.TopAppBar
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.ArrowBack
 import androidx.compose.material.icons.filled.ArrowForward
 import androidx.compose.material.icons.filled.Refresh
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.ModalBottomSheet
 import androidx.compose.material3.SheetState
+import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.material3.rememberModalBottomSheetState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
@@ -54,6 +54,7 @@ import androidx.core.graphics.toColorInt
 import com.example.walletapp.R
 import kotlinx.coroutines.CoroutineScope
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun CreateAccountScreen(
     onContinue: () -> Unit
@@ -62,63 +63,44 @@ fun CreateAccountScreen(
     Scaffold(
         topBar = {
             TopAppBar(
-                backgroundColor = Color("#0C0C4F".toColorInt()),
-                contentColor = Color.White,
-                elevation = 4.dp
-            ) {
-                Row(
-                    modifier = Modifier
-                        .fillMaxWidth()
-                        .padding(top = 32.dp, start = 16.dp, end = 16.dp),
-
-                    ) {
-                    // TODO(#100): add back navigation
+                title = { Text("Create Account", color = Color.White, fontSize = 20.sp) },
+                navigationIcon = {
                     Icon(
                         imageVector = Icons.Filled.ArrowBack,
-                        contentDescription = "Backward  Arrow",
+                        contentDescription = "Backward Arrow",
                         modifier = Modifier.padding(start = 8.dp),
                         tint = Color.White
                     )
-
-                    Box(
-                        modifier = Modifier.fillMaxWidth(),
-                        contentAlignment = Alignment.Center,
-                    ) {
-
-                        Text(
-                            text = "Create Account",
-                            color = Color.White,
-                            fontSize = 20.sp
-                        )
-
-                    }
-
-                }
-            }
+                },
+                colors = TopAppBarDefaults.topAppBarColors(
+                    containerColor = Color("#0C0C4F".toColorInt()),
+                    titleContentColor = Color.White
+                )
+            )
         }
     ) { paddingValues ->
         Column(
             modifier = Modifier
                 .fillMaxSize()
                 .padding(paddingValues)
                 .background(color = Color("#0C0C4F".toColorInt()))
-                .padding(top = 30.dp, start = 16.dp, end = 16.dp )
-
+                .padding(top = 30.dp, start = 16.dp, end = 16.dp)
         ) {
-
             Text(
                 text = if (progress < 1.0f) "1 of 2" else "2 of 2",
-                style = TextStyle(color = Color("#EC796B".toColorInt()), fontWeight = FontWeight.ExtraBold, fontSize = 16.sp, textAlign = TextAlign.Center )
-
+                style = TextStyle(
+                    color = Color("#EC796B".toColorInt()),
+                    fontWeight = FontWeight.ExtraBold,
+                    fontSize = 16.sp,
+                    textAlign = TextAlign.Center
+                )
             )
 
             Spacer(modifier = Modifier.height(5.dp))
             LinearProgressIndicator(
                 progress = progress,
                 modifier = Modifier.fillMaxWidth(),
                 color = Color("#EC796B".toColorInt())
-
-
             )
 
             if (progress < 1.0f) {
@@ -129,14 +111,17 @@ fun CreateAccountScreen(
                     }
                 )
             } else {
-                GenerateKey(modifier = Modifier.padding(top = 16.dp), onContinue)
+                GenerateKey(
+                    modifier = Modifier.padding(top = 16.dp),
+                    onContinue
+                )
             }
-
-
         }
     }
 }
 
+
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun CreateWallet(modifier: Modifier = Modifier, onNext: () -> Unit) {
     val borderColor = Color("#1B1B76".toColorInt())
@@ -185,10 +170,11 @@ fun CreateWallet(modifier: Modifier = Modifier, onNext: () -> Unit) {
                     ,
                     shape = RoundedCornerShape(8.dp),
                     colors = TextFieldDefaults.outlinedTextFieldColors(
-                        backgroundColor = Color(0xFF1B1B76),
+                        containerColor = Color(0xFF1B1B76),
                         focusedBorderColor = borderColor,
-                        textColor = Color.White,
-                        unfocusedBorderColor = borderColor
+                        unfocusedBorderColor = borderColor,
+                        focusedTextColor = Color.White,
+                        unfocusedTextColor = Color.White
                     )
                 )
             }
@@ -199,7 +185,10 @@ fun CreateWallet(modifier: Modifier = Modifier, onNext: () -> Unit) {
             onClick = { onNext()  },
             contentPadding = ButtonDefaults.ContentPadding,
             shape = RoundedCornerShape(8.dp),
-            colors = ButtonDefaults.buttonColors(backgroundColor = Color("#EC796B".toColorInt()), contentColor = Color.White),
+            colors = ButtonDefaults.buttonColors(
+                containerColor = Color("#EC796B".toColorInt()),
+                contentColor = Color.White
+            ),
             modifier = Modifier
                 .fillMaxWidth()
                 .height(49.dp)
@@ -220,7 +209,7 @@ fun CreateWallet(modifier: Modifier = Modifier, onNext: () -> Unit) {
 }
 
 
-@OptIn(ExperimentalMaterialApi::class, ExperimentalMaterial3Api::class)
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun GenerateKey(modifier: Modifier = Modifier, onContinue: () -> Unit) {
     val scope = rememberCoroutineScope()
@@ -258,7 +247,7 @@ fun GenerateKey(modifier: Modifier = Modifier, onContinue: () -> Unit) {
             contentPadding = ButtonDefaults.ContentPadding,
             shape = RoundedCornerShape(8.dp),
             colors = ButtonDefaults.buttonColors(
-                backgroundColor = Color("#EC796B".toColorInt()),
+                containerColor = Color("#EC796B".toColorInt()),
                 contentColor = Color.White
             ),
             modifier = Modifier
@@ -297,7 +286,7 @@ fun GenerateKey(modifier: Modifier = Modifier, onContinue: () -> Unit) {
 
 
 
-@OptIn(ExperimentalMaterialApi::class, ExperimentalMaterial3Api::class)
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun GeneratekeySheet(
     openBottomSheet: Boolean,
@@ -345,8 +334,10 @@ fun GeneratekeySheet(
                     onClick = onContinue,
                     contentPadding = ButtonDefaults.ContentPadding,
                     shape = RoundedCornerShape(8.dp),
-                    colors = ButtonDefaults.buttonColors(backgroundColor = Color("#EC796B".toColorInt()), contentColor = Color.White),
-                    modifier = Modifier
+                    colors = ButtonDefaults.buttonColors(
+                        containerColor = Color("#EC796B".toColorInt()),
+                        contentColor = Color.White
+                    ), modifier = Modifier
                         .fillMaxWidth()
                         .height(49.dp)
                 ) {

wallet_app/app/src/main/java/com/example/walletapp/ui/onboarding/CreatePinScreen.kt

@@ -8,7 +8,7 @@ import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.*
+import androidx.compose.material3.*
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.ArrowForward
 import androidx.compose.runtime.Composable
@@ -126,7 +126,7 @@ fun CreatePinScreen(onContinue: () -> Unit) {
                 contentPadding = ButtonDefaults.ContentPadding,
                 shape = RoundedCornerShape(8.dp),
                 colors = ButtonDefaults.buttonColors(
-                    backgroundColor = Color("#EC796B".toColorInt()),
+                    containerColor = Color("#EC796B".toColorInt()),
                     contentColor = Color.White
                 ),
                 modifier = Modifier
@@ -227,7 +227,10 @@ fun NumericKeypad(onDigitClick: (String) -> Unit, onDeleteClick: () -> Unit) {
 fun KeypadButton(text: String, onClick: () -> Unit) {
     Button(
         onClick = onClick,
-        colors = ButtonDefaults.buttonColors(backgroundColor = Color("#1B1B76".toColorInt()), contentColor = Color.White),
+        colors = ButtonDefaults.buttonColors(
+            containerColor = Color("#1B1B76".toColorInt()),
+            contentColor = Color.White
+        ),
         shape = CircleShape,
                 modifier = Modifier
             .size(50.dp)