updates

* string; * disgner system; * adding fonts; * layout refactoring; * new composables; * navigation; important points to note * topbar layout; * difficulty in creating the back buttons; * no logic involving viewmodel; * check navigation;
NuvemConnect · Sep 13, 2024 · 05bfd44 · 05bfd44
1 parent 62f9b27
commit 05bfd44
Show file tree

Hide file tree

Showing 27 changed files with 304 additions and 215 deletions.
diff --git a/.idea/deploymentTargetSelector.xml b/.idea/deploymentTargetSelector.xml
diff --git a/app/src/main/java/com/nuvemconnect/app/nuvemconnect/ui/components/CodeNumberField.kt b/app/src/main/java/com/nuvemconnect/app/nuvemconnect/ui/components/CodeNumberField.kt
@@ -28,8 +28,8 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import com.nuvemconnect.app.nuvemconnect.ui.theme.dmSansFamily
-import com.nuvemconnect.app.nuvemconnect.ui.theme.secondary200
-import com.nuvemconnect.app.nuvemconnect.ui.theme.secondary700
+import com.nuvemconnect.app.nuvemconnect.ui.theme.primary100
+import com.nuvemconnect.app.nuvemconnect.ui.theme.white_two
 
 @Composable
 fun CodeNumberField(
@@ -66,12 +66,12 @@ fun CodeNumberField(
                             .width(41.dp)
                             .height(46.dp)
                             .background(
-                                color = secondary200,
+                                color = white_two,
                                 shape = RoundedCornerShape(8.dp)
                             )
                             .border(
                                 width = 1.dp,
-                                color = if (index == otpText.length) secondary700 else Color.Transparent,
+                                color = if (index == otpText.length) primary100 else Color.Transparent,
                                 shape = RoundedCornerShape(8.dp)
                             )
                     ) {

diff --git a/app/src/main/java/com/nuvemconnect/app/nuvemconnect/ui/components/CustomButton.kt b/app/src/main/java/com/nuvemconnect/app/nuvemconnect/ui/components/CustomButton.kt
@@ -1,5 +1,6 @@
 package com.nuvemconnect.app.nuvemconnect.ui.components
 
+import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
@@ -23,7 +24,6 @@ import com.nuvemconnect.app.nuvemconnect.ui.theme.poppinsFontFamily
 
 @Composable
 fun CustomButton(
-
     modifier: Modifier = Modifier,
     text: String,
     fontFamily: FontFamily = poppinsFontFamily,
@@ -33,6 +33,7 @@ fun CustomButton(
     contentPadding: PaddingValues = PaddingValues(16.dp),
     textColor: Color = MaterialTheme.colorScheme.surface,
     fontSize: TextUnit = 18.sp,
+    border: BorderStroke? = null,
     fontWeight: FontWeight = FontWeight.SemiBold,
     onClick: () -> Unit,
 ) {
@@ -48,7 +49,8 @@ fun CustomButton(
                 contentColor = contentColor
             )
         },
-        shape = RoundedCornerShape(20.dp),
+        border = border,
+        shape = RoundedCornerShape(100.dp),
         contentPadding = contentPadding,
     ) {
         Text(

diff --git a/app/src/main/java/com/nuvemconnect/app/nuvemconnect/ui/components/CustomTextField.kt b/app/src/main/java/com/nuvemconnect/app/nuvemconnect/ui/components/CustomTextField.kt
@@ -4,9 +4,10 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.material3.Icon
 import androidx.compose.material3.OutlinedTextField
 import androidx.compose.material3.OutlinedTextFieldDefaults
 import androidx.compose.material3.Text
@@ -16,25 +17,28 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.painter.Painter
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import com.nuvemconnect.app.nuvemconnect.R
 import com.nuvemconnect.app.nuvemconnect.model.error.EmailErrorType
 import com.nuvemconnect.app.nuvemconnect.ui.theme.dmSansFamily
-import com.nuvemconnect.app.nuvemconnect.ui.theme.error300
-import com.nuvemconnect.app.nuvemconnect.ui.theme.mediumGray
+import com.nuvemconnect.app.nuvemconnect.ui.theme.error100
+import com.nuvemconnect.app.nuvemconnect.ui.theme.neutral20
 import com.nuvemconnect.app.nuvemconnect.ui.theme.poppinsFontFamily
-import com.nuvemconnect.app.nuvemconnect.ui.theme.primary
+import com.nuvemconnect.app.nuvemconnect.ui.theme.white_two
 
 @Composable
 fun CustomTextField(
     modifier: Modifier = Modifier,
     onValueChange: (String) -> Unit,
+    leadingIcon: Painter = painterResource(id = R.drawable.ic_launcher_foreground),
     value: String,
-    titleContainer: String,
     placeholder: String,
     validate: (String) -> EmailErrorType,
     isUserInteracted: Boolean
@@ -44,19 +48,20 @@ fun CustomTextField(
     Column(
         modifier = Modifier.fillMaxWidth()
     ) {
-        Text(
-            text = titleContainer,
-            fontSize = 16.sp,
-            fontFamily = dmSansFamily,
-            fontWeight = FontWeight.Bold
-        )
         Spacer(modifier = modifier.height(5.dp))
         OutlinedTextField(
             value = value,
             onValueChange = { newValue ->
                 if (newValue.length <= 40)
                     onValueChange(newValue)
             },
+            leadingIcon = {
+                Icon(
+                    painter = leadingIcon,
+                    modifier = modifier.size(24.dp),
+                    contentDescription = "Leading Icon"
+                )
+            },
             singleLine = true,
             placeholder = {
                 Text(
@@ -71,10 +76,10 @@ fun CustomTextField(
             keyboardOptions = KeyboardOptions.Default.copy(keyboardType = KeyboardType.Text),
             shape = RoundedCornerShape(8),
             colors = OutlinedTextFieldDefaults.colors(
-                unfocusedBorderColor = mediumGray,
-                focusedBorderColor = primary,
+                unfocusedBorderColor = white_two,
+                focusedBorderColor = white_two,
                 focusedTextColor = Color.Black,
-                unfocusedContainerColor = mediumGray,
+                unfocusedContainerColor = white_two,
             ),
             textStyle = TextStyle(
                 fontFamily = poppinsFontFamily,
@@ -85,7 +90,7 @@ fun CustomTextField(
         if (error != EmailErrorType.None) {
             Text(
                 text = error.message,
-                color = error300,
+                color = error100,
                 fontSize = 12.sp,
                 fontFamily = poppinsFontFamily
             )
@@ -95,7 +100,7 @@ fun CustomTextField(
     }
 }
 
-@Preview(showSystemUi = false, showBackground = true)
+@Preview(showBackground = true, showSystemUi = true)
 @Composable
 private fun CustomTextFieldPreview() {
     val value by rememberSaveable {
@@ -104,11 +109,9 @@ private fun CustomTextFieldPreview() {
     CustomTextField(
         onValueChange = {},
         value = value,
-        titleContainer = "Titulo do container",
         placeholder = "Descrição do texto",
         validate = { EmailErrorType.None },
-        isUserInteracted = false
-
+        isUserInteracted = false,
     )
 
 }
diff --git a/app/src/main/java/com/nuvemconnect/app/nuvemconnect/ui/components/GoogleButton.kt b/app/src/main/java/com/nuvemconnect/app/nuvemconnect/ui/components/GoogleButton.kt
@@ -34,7 +34,7 @@ fun GoogleButton(
     textStyle: TextStyle = MaterialTheme.typography.titleLarge,
     contentPadding: PaddingValues = PaddingValues(16.dp),
     textColor: Color = MaterialTheme.colorScheme.surface,
-    fontSize: TextUnit = 16.sp,
+    fontSize: TextUnit = 18.sp,
     border: BorderStroke? = null,
     fontWeight: FontWeight = FontWeight.SemiBold
 ) {
@@ -49,7 +49,7 @@ fun GoogleButton(
             )
 
         },
-        shape = RoundedCornerShape(20.dp),
+        shape = RoundedCornerShape(100.dp),
         contentPadding = contentPadding,
     ) {
         Icon(

diff --git a/app/src/main/java/com/nuvemconnect/app/nuvemconnect/ui/components/PasswordTextField.kt b/app/src/main/java/com/nuvemconnect/app/nuvemconnect/ui/components/PasswordTextField.kt
@@ -18,7 +18,9 @@ import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.vectorResource
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.text.input.PasswordVisualTransformation
@@ -29,17 +31,15 @@ import androidx.compose.ui.unit.sp
 import com.nuvemconnect.app.nuvemconnect.R
 import com.nuvemconnect.app.nuvemconnect.model.error.PasswordErrorType
 import com.nuvemconnect.app.nuvemconnect.ui.theme.dmSansFamily
-import com.nuvemconnect.app.nuvemconnect.ui.theme.error300
-import com.nuvemconnect.app.nuvemconnect.ui.theme.mediumGray
+import com.nuvemconnect.app.nuvemconnect.ui.theme.error100
 import com.nuvemconnect.app.nuvemconnect.ui.theme.poppinsFontFamily
-import com.nuvemconnect.app.nuvemconnect.ui.theme.primary
+import com.nuvemconnect.app.nuvemconnect.ui.theme.white_two
 
 @Composable
 fun PasswordTextField(
     modifier: Modifier = Modifier,
     onValueChange: (String) -> Unit,
     value: String,
-    titleContainer: String,
     placeholder: String,
     validate: (String) -> PasswordErrorType,
     isUserInteracted: Boolean
@@ -49,24 +49,24 @@ fun PasswordTextField(
 
     Column(
         modifier = Modifier.fillMaxWidth()
-
     ) {
-        Text(
-            text = titleContainer,
-            fontSize = 16.sp,
-            fontFamily = dmSansFamily,
-            fontWeight = FontWeight.Bold
-        )
+
         Spacer(modifier = modifier.height(5.dp))
         OutlinedTextField(
             value = value,
             onValueChange = { newValue ->
                 if (newValue.length <= 40) onValueChange(newValue)
             },
+            leadingIcon = {
+                Icon(
+                    imageVector = ImageVector.vectorResource(id = R.drawable.baseline_lock_outline),
+                    contentDescription = "Icone de senha"
+                )
+            },
             trailingIcon = {
                 val image =
-                    if (passwordVisibility) painterResource(id = R.drawable.baseline_visibility_24) else painterResource(
-                        id = R.drawable.baseline_visibility_off_24
+                    if (passwordVisibility) painterResource(id = R.drawable.outline_visibility_24) else painterResource(
+                        id = R.drawable.outline_visibility_off_24
                     )
                 val description = if (passwordVisibility) "Hide password" else "Show password"
 
@@ -89,17 +89,17 @@ fun PasswordTextField(
             keyboardOptions = KeyboardOptions.Default.copy(keyboardType = KeyboardType.Text),
             shape = RoundedCornerShape(8),
             colors = OutlinedTextFieldDefaults.colors(
-                unfocusedBorderColor = mediumGray,
-                focusedBorderColor = primary,
+                unfocusedBorderColor = white_two,
+                focusedBorderColor = white_two,
                 focusedTextColor = Color.Black,
-                unfocusedContainerColor = mediumGray,
-                ),
+                unfocusedContainerColor = white_two,
+            ),
             isError = error != PasswordErrorType.None
-            )
-        if (error != PasswordErrorType.None)  {
+        )
+        if (error != PasswordErrorType.None) {
             Text(
                 text = error.message,
-                color = error300,
+                color = error100,
                 fontSize = 12.sp,
                 fontFamily = poppinsFontFamily
             )
@@ -117,10 +117,9 @@ private fun CustomTextFieldPreview() {
     PasswordTextField(
         onValueChange = {},
         value = value,
-        titleContainer = "Titulo do container",
         placeholder = "Descrição do texto",
-        isUserInteracted = false,
-        validate = {PasswordErrorType.rulePassword}
+        validate = { PasswordErrorType.rulePassword },
+        isUserInteracted = false
     )
 
 }
diff --git a/app/src/main/java/com/nuvemconnect/app/nuvemconnect/ui/components/Topbar.kt b/app/src/main/java/com/nuvemconnect/app/nuvemconnect/ui/components/Topbar.kt
@@ -8,7 +8,7 @@ import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.width
-import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
@@ -27,9 +27,12 @@ import androidx.compose.ui.unit.sp
 import androidx.navigation.NavController
 import com.nuvemconnect.app.nuvemconnect.R
 import com.nuvemconnect.app.nuvemconnect.ui.theme.dmSansFamily
+import com.nuvemconnect.app.nuvemconnect.ui.theme.neutral100
 import com.nuvemconnect.app.nuvemconnect.ui.theme.poppinsFontFamily
-import com.nuvemconnect.app.nuvemconnect.ui.theme.secondary100
-import com.nuvemconnect.app.nuvemconnect.ui.theme.secondary700
+import com.nuvemconnect.app.nuvemconnect.ui.theme.neutral60
+import com.nuvemconnect.app.nuvemconnect.ui.theme.neutral70
+import com.nuvemconnect.app.nuvemconnect.ui.theme.neutral700
+import com.nuvemconnect.app.nuvemconnect.ui.theme.white_two
 
 @Composable
 fun TopBar(
@@ -48,23 +51,24 @@ fun TopBar(
             .fillMaxWidth()
     ) {
         Image(
-            painter = painterResource(id = R.drawable.baseline_chevron_left_24),
+            painter = painterResource(id = R.drawable.baseline_arrow_back_24),
             contentDescription = stringResource(id = R.string.voltar),
             modifier = modifier
-                .clip(RoundedCornerShape(6.dp))
-                .width(46.dp)
-                .height(46.dp)
-                .background(secondary100)
+                .clip(CircleShape)
+                .width(36.dp)
+                .height(36.dp)
+                .background(white_two)
                 .clickable {
                     onBackClick?.invoke() ?: navController.navigateUp()
                 },
-            contentScale = ContentScale.Crop,
+           contentScale = ContentScale.Inside
         )
 
         Spacer(modifier = modifier.height(30.dp))
         Text(
             text = headingTitle,
             fontSize = headingSize,
+            color = neutral100,
             fontFamily = poppinsFontFamily,
             fontWeight = FontWeight.Bold,
             modifier = modifier.fillMaxWidth()
@@ -73,7 +77,7 @@ fun TopBar(
         Text(
             text = subtitleText,
             fontSize = subtitleSize,
-            color = secondary700,
+            color = neutral70,
             fontFamily = dmSansFamily,
             fontWeight = FontWeight.Normal,
             textAlign = TextAlign.Justify,