Worked on account screen UI

app/src/main/java/com/fastest/pass/account/presentation/ui/components/AccountScreen.kt

@@ -0,0 +1,178 @@
+package com.fastest.pass.account.presentation.ui.components
+
+import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ColumnScope
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+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.layout.statusBarsPadding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.MaterialTheme
+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.draw.alpha
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.ColorFilter
+import androidx.compose.ui.platform.LocalFocusManager
+import androidx.compose.ui.platform.LocalSoftwareKeyboardController
+import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.fastest.pass.R
+import com.fastest.pass.home.presentation.ui.components.GapLine
+
+@Composable
+fun AccountScreen() {
+    val keyboardController = LocalSoftwareKeyboardController.current
+    val focusManager = LocalFocusManager.current
+
+    Box(
+        modifier = Modifier
+            .background(colorResource(id = R.color.gray_splash))
+            .fillMaxSize()
+            .statusBarsPadding()
+    ) {
+        Column(
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(top = 0.dp)
+                .statusBarsPadding()
+        ) {
+            Column(
+                modifier = Modifier
+                    .fillMaxSize()
+                    .padding(top = 75.dp)
+                    .clip(RoundedCornerShape(topStart = 0.dp, topEnd = 0.dp))
+                    .background(colorResource(id = R.color.home_background_color),)
+            ) {
+                Spacer(modifier = Modifier.height(20.dp))
+                AddRowAccount(title = stringResource(id = R.string.username), subTitle = "KP")
+                Spacer(modifier = Modifier.height(10.dp))
+                AddRowAccount(title = stringResource(id = R.string.product), subTitle = "Free Plan")
+                Spacer(modifier = Modifier.height(20.dp))
+                GapLine()
+
+                Column(
+                    modifier = Modifier
+                        .padding(horizontal = 30.dp)
+                        .padding(bottom = 20.dp)
+                ) {
+                    Spacer(modifier = Modifier.height(50.dp))
+                    AddFeaturesRowAS(icon = R.drawable.about, title = R.string.about)
+                    Spacer(modifier = Modifier.height(20.dp))
+                    AddFeaturesRowAS(icon = R.drawable.help, title = R.string.helpandsupport)
+                    Spacer(modifier = Modifier.height(20.dp))
+                    AddFeaturesRowAS(icon = R.drawable.logout, title = R.string.logout)
+                }
+            }
+        }
+    }
+}
+
+@Composable
+fun ColumnScope.AddRowAccount(title: String, subTitle: String) {
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(horizontal = 30.dp)
+            .background(Color.Transparent)
+            .height(18.dp),
+        horizontalArrangement = Arrangement.SpaceBetween,
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        Surface(
+            modifier = Modifier
+                .padding(start = 0.dp)
+                .align(Alignment.CenterVertically),
+            color = Color.Transparent
+        ) {
+            Text(text = "$title: ",
+                color = colorResource(id = R.color.gray_splash),
+                style = MaterialTheme.typography.displayMedium,
+                maxLines = 1,
+                modifier = Modifier
+                    .weight(1f)
+            )
+        }
+//        Spacer(modifier = Modifier.weight(1f))
+
+        Surface(
+            modifier = Modifier
+                .padding(start = 0.dp)
+                .align(Alignment.CenterVertically),
+            color = Color.Transparent
+        ) {
+            Text(text = subTitle,
+                color = colorResource(id = R.color.gray_splash),
+                style = MaterialTheme.typography.displayMedium,
+                maxLines = 1,
+                modifier = Modifier
+                    .weight(1f)
+                    .alpha(0.8F)
+            )
+        }
+
+    }
+}
+
+@Composable
+fun ColumnScope.AddFeaturesRowAS(icon: Int, title: Int) {
+    Row(
+        modifier = Modifier
+            .border(
+                border = BorderStroke(1.dp, colorResource(id = R.color.white)),
+                shape = RoundedCornerShape(15.dp)
+            )
+            .clip(RoundedCornerShape(15.dp))
+            .background(colorResource(id = R.color.white))
+            .padding(vertical = 15.dp)
+            .fillMaxWidth(),
+        horizontalArrangement = Arrangement.Start,
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        Surface(
+            modifier = Modifier.padding(start = 10.dp),
+            color = Color.Transparent
+        ) {
+            Image(
+                painter = painterResource(id = icon),
+                contentDescription = "Icon",
+                modifier = Modifier
+                    .padding(start = 0.dp)
+                    .size(34.dp)
+                    .weight(1f),
+                colorFilter = ColorFilter.tint(colorResource(id = R.color.gray_splash)),
+            )
+        }
+
+        Surface(
+            modifier = Modifier.padding(start = 15.dp, end = 5.dp),
+            color = Color.Transparent
+        ) {
+            Text(
+                text = stringResource(id = title),
+                style = MaterialTheme.typography.displayMedium,
+                color = colorResource(id = R.color.gray_splash),
+                maxLines = 1,
+                modifier = Modifier
+//                        .weight(1F)
+            )
+        }
+    }
+}

app/src/main/java/com/fastest/pass/account/presentation/ui/fragment/AccountFragment.kt

@@ -4,10 +4,22 @@ import android.os.Bundle
 import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material.Scaffold
 import androidx.compose.material.Text
+import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.ComposeView
+import androidx.compose.ui.res.colorResource
 import androidx.fragment.app.viewModels
 import com.fastest.pass.BaseFragment
+import com.fastest.pass.R
+import com.fastest.pass.account.presentation.ui.components.AccountScreen
+import com.fastest.pass.home.presentation.ui.components.ClickType
+import com.fastest.pass.home.presentation.ui.components.HomeScreen
+import com.fastest.pass.home.utils.HomeRoute
 import com.fastest.pass.ui.theme.FastestPassTheme
 import dagger.hilt.android.AndroidEntryPoint
 import javax.inject.Inject
@@ -27,7 +39,18 @@ class AccountFragment : BaseFragment() {
         return ComposeView(requireActivity()).apply {
             setContent {
                 FastestPassTheme {
-                    Text("Account Fragment")
+                    Scaffold(
+                        modifier = Modifier.fillMaxSize()
+                    ) { paddingValues ->
+                        Box(
+                            modifier = Modifier
+                                .fillMaxSize()
+                                .background(colorResource(id = R.color.home_background_color))
+                                .padding(paddingValues.calculateBottomPadding())
+                        ) {
+                            AccountScreen()
+                        }
+                    }
                 }
             }
         }

app/src/main/java/com/fastest/pass/login/presentation/ui/components/LoginScreen.kt

@@ -346,7 +346,7 @@ fun ColumnScope.PasswordTextField(
 fun ColumnScope.LoginButton(buttonText: Int, clickType: (ClickType) -> Unit) {
     Button(
         modifier = Modifier
-            .padding(start = 30.dp, end = 30.dp,)
+            .padding(start = 30.dp, end = 30.dp)
             .background(colorResource(id = R.color.transparent))
             .fillMaxWidth()
             .height(60.dp)

app/src/main/res/drawable/logout.xml

@@ -0,0 +1,27 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="25dp"
+    android:height="25dp"
+    android:viewportWidth="25"
+    android:viewportHeight="25">
+  <path
+      android:pathData="M9.244,8.492C9.554,4.892 11.404,3.422 15.454,3.422H15.584C20.054,3.422 21.844,5.212 21.844,9.682V16.202C21.844,20.672 20.054,22.462 15.584,22.462H15.454C11.434,22.462 9.584,21.012 9.254,17.472"
+      android:strokeLineJoin="round"
+      android:strokeWidth="1.5"
+      android:fillColor="#00000000"
+      android:strokeColor="#404B69"
+      android:strokeLineCap="round"/>
+  <path
+      android:pathData="M15.344,12.932H3.964"
+      android:strokeLineJoin="round"
+      android:strokeWidth="1.5"
+      android:fillColor="#00000000"
+      android:strokeColor="#404B69"
+      android:strokeLineCap="round"/>
+  <path
+      android:pathData="M6.194,9.582L2.844,12.932L6.194,16.282"
+      android:strokeLineJoin="round"
+      android:strokeWidth="1.5"
+      android:fillColor="#00000000"
+      android:strokeColor="#404B69"
+      android:strokeLineCap="round"/>
+</vector>

app/src/main/res/values/strings.xml

@@ -88,5 +88,9 @@
     <string name="key_type">Key Type</string>
     <string name="protected_text">Protected</string>
     <string name="key_index">Key Index</string>
+    <string name="product">Product</string>
+    <string name="about">About FastestPass</string>
+    <string name="helpandsupport">Help &amp; Support</string>
+    <string name="logout">Logout</string>
 
 </resources>