Worked on home sceen UI

.idea/gradle.xml

@@ -4,7 +4,6 @@
   <component name="GradleSettings">
     <option name="linkedExternalProjectsSettings">
       <GradleProjectSettings>
-        <option name="testRunner" value="CHOOSE_PER_TEST" />
         <option name="externalProjectPath" value="$PROJECT_DIR$" />
         <option name="gradleJvm" value="#GRADLE_LOCAL_JAVA_HOME" />
         <option name="modules">

app/src/main/java/com/fastest/pass/forgotpassword/presentation/ui/components/ForgotPasswordScreen.kt

@@ -134,22 +134,6 @@ fun ColumnScope.ShowHeaderFP(text: String, clickType: (ClickType) -> Unit) {
 }
 
 @Composable
-fun ColumnScope.ForgotText() {
-    Text(
-        text = stringResource(id = R.string.email_associated_account),
-        color = colorResource(id = R.color.gray_splash),
-        style = MaterialTheme.typography.displayLarge.copy(
-            fontSize = 18.sp
-        ),
-        lineHeight = 25.sp,
-        modifier = Modifier
-            .align(Alignment.Start)
-            .padding(start = 30.dp, top = 35.dp, end = 50.dp)
-
-    )
-}
-
-@Composable
 fun ColumnScope.ForgotPasswordText(
     forgotText: Int,
 ) {

app/src/main/java/com/fastest/pass/home/presentation/ui/components/HomeScreen.kt

@@ -0,0 +1,282 @@
+package com.fastest.pass.home.presentation.ui.components
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+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.width
+import androidx.compose.foundation.layout.wrapContentSize
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.DockedSearchBar
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.SearchBarDefaults
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextFieldDefaults
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.ColorFilter
+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.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.fastest.pass.R
+import com.fastest.pass.login.presentation.ui.components.ClickType
+
+@Composable
+fun HomeScreen() {
+    Box(
+        modifier = Modifier
+            .fillMaxSize(),
+        contentAlignment = Alignment.TopCenter
+    ) {
+        Column(
+            modifier = Modifier,
+        ) {
+            Row(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .height(75.dp)
+                    .background(colorResource(id = R.color.gray_splash))
+            ) { }
+
+            Spacer(modifier = Modifier.height(20.dp))
+            SearchBarRow()
+            Spacer(modifier = Modifier.height(20.dp))
+            GapLine()
+        }
+
+        Column(
+            modifier = Modifier
+                .padding(horizontal = 30.dp)
+                .padding(bottom = 50.dp)
+                .align(Alignment.BottomCenter)
+        ) {
+            SocialAppsLogo()
+            Spacer(modifier = Modifier.height(25.dp))
+            ItemText()
+            Spacer(modifier = Modifier.height(5.dp))
+            ItemText2()
+            Spacer(modifier = Modifier.height(15.dp))
+            AddItemsButton(buttonText = R.string.add_items_onebyone)
+            Spacer(modifier = Modifier.height(15.dp))
+            AddImportButton(buttonText = R.string.import_passwords)
+        }
+
+//        Column(
+//            modifier = Modifier
+//                .padding(horizontal = 30.dp, vertical = 15.dp)
+//                .align(Alignment.BottomCenter)
+//        ) {
+//            AddItemsButton(buttonText = R.string.add_items_onebyone)
+//            Spacer(modifier = Modifier.height(10.dp))
+//            AddImportButton(buttonText = R.string.import_passwords)
+//        }
+    }
+}
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun SearchBarRow() {
+    var searchText by remember { mutableStateOf("") }
+    val isActive by remember { mutableStateOf(false) }
+    val keyboardController = LocalSoftwareKeyboardController.current
+
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+    ) {
+        DockedSearchBar(
+            query = searchText,
+            onQueryChange = {
+                searchText = it
+            },
+            onSearch = {
+                keyboardController?.hide()
+            },
+            active = isActive,
+            onActiveChange = {},
+            placeholder = {
+                Text(
+                    text = stringResource(R.string.search),
+                    style = MaterialTheme.typography.displayMedium,
+                    color = colorResource(id = R.color.gray_splash)
+                )
+            },
+            leadingIcon = {
+                Icon(
+                    painter = painterResource(id = R.drawable.searchicon),
+                    contentDescription = "Search Icon",
+                    tint = colorResource(id = R.color.gray_splash),
+                    modifier = Modifier
+                        .size(21.dp)
+                )
+            },
+            colors = SearchBarDefaults.colors(
+                containerColor = colorResource(id = R.color.white),
+                dividerColor = Color.Transparent,
+                inputFieldColors = TextFieldDefaults.colors(
+                    focusedTextColor = colorResource(id = R.color.gray_splash),
+                    unfocusedTextColor = colorResource(id = R.color.gray_splash),
+                    unfocusedIndicatorColor = colorResource(id = R.color.gray_splash),
+                    focusedIndicatorColor = colorResource(id = R.color.gray_splash),
+                    disabledIndicatorColor = colorResource(id = R.color.gray_splash),
+                    cursorColor = colorResource(id = R.color.gray_splash),
+                )
+            ),
+            modifier = Modifier
+                .padding(start = 30.dp)
+                .height(50.dp)
+                .weight(1F)
+        ) {}
+
+        Spacer(Modifier.width(10.dp))
+
+        Image(
+            painter = painterResource(id = R.drawable.notification_bell),
+            contentDescription = null,
+            colorFilter = ColorFilter.tint(
+                colorResource(id = R.color.gray_splash)
+            ),
+            modifier = Modifier
+                .padding(end = 30.dp)
+                .height(30.dp)
+                .align(Alignment.CenterVertically)
+        )
+    }
+}
+
+@Composable
+fun GapLine() {
+    Surface(
+        modifier = Modifier
+            .height(1.dp)
+            .fillMaxWidth()
+            .alpha(0.8F),
+        color = colorResource(id = R.color.gray_border_textfield)
+    ) {}
+}
+
+@Composable
+fun SocialAppsLogo() {
+    Box(
+        modifier = Modifier
+            .fillMaxWidth(),
+        contentAlignment = Alignment.Center
+    ) {
+        Image(
+            painter = painterResource(id = R.drawable.socialappslogo),
+            contentDescription = null,
+            modifier = Modifier
+                .size(205.dp, 203.dp)
+        )
+    }
+}
+
+@Composable
+fun ColumnScope.ItemText() {
+    Text(
+        text = stringResource(id = R.string.start_adding_items),
+        color = colorResource(id = R.color.gray_splash),
+        style = MaterialTheme.typography.headlineLarge,
+        lineHeight = 25.sp,
+        modifier = Modifier
+            .align(Alignment.CenterHorizontally)
+    )
+}
+
+@Composable
+fun ColumnScope.ItemText2() {
+    Text(
+        text = stringResource(id = R.string.safely_store_password),
+        color = colorResource(id = R.color.gray_splash),
+        style = MaterialTheme.typography.displayMedium.copy(
+            textAlign = TextAlign.Center
+        ),
+        lineHeight = 20.sp,
+        modifier = Modifier
+            .align(Alignment.CenterHorizontally)
+    )
+}
+
+@Composable
+fun ColumnScope.AddItemsButton(buttonText: Int) {
+    Button(
+        modifier = Modifier
+            .padding(start = 0.dp, end = 0.dp,)
+            .background(colorResource(id = R.color.transparent))
+            .fillMaxWidth()
+            .height(60.dp)
+            .clickable() { },
+        onClick = {},
+        shape = RoundedCornerShape(15.dp),
+//            border = BorderStroke(25.dp, colorResource(id = R.color.black)),
+        colors = ButtonDefaults.buttonColors(
+            contentColor = colorResource(id = R.color.white),
+            containerColor = colorResource(id = R.color.red_login_button),
+        ),
+    )
+    {
+        Text(
+            text = stringResource(id = buttonText),
+            style = MaterialTheme.typography.bodyMedium.copy(
+                fontSize = 20.sp,
+                color = colorResource(id = R.color.white)
+            ),
+            textAlign = TextAlign.Center
+        )
+    }
+}
+
+@Composable
+fun ColumnScope.AddImportButton(buttonText: Int) {
+    Button(
+        modifier = Modifier
+            .padding(start = 0.dp, end = 0.dp,)
+            .background(colorResource(id = R.color.transparent))
+            .fillMaxWidth()
+            .height(60.dp)
+            .clickable() { },
+        onClick = {},
+        shape = RoundedCornerShape(15.dp),
+//            border = BorderStroke(25.dp, colorResource(id = R.color.black)),
+        colors = ButtonDefaults.buttonColors(
+            contentColor = colorResource(id = R.color.white),
+            containerColor = colorResource(id = R.color.red_login_button),
+        ),
+    )
+    {
+        Text(
+            text = stringResource(id = buttonText),
+            style = MaterialTheme.typography.bodyMedium.copy(
+                fontSize = 20.sp,
+                color = colorResource(id = R.color.white)
+            ),
+            textAlign = TextAlign.Center
+        )
+    }
+}

app/src/main/java/com/fastest/pass/home/presentation/ui/fragment/HomeFragment.kt

@@ -4,11 +4,24 @@ 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.home.presentation.ui.components.HomeScreen
 import com.fastest.pass.ui.theme.FastestPassTheme
+import com.fastest.pass.welcome.presentation.ui.component.ClickType.LOGIN_CLICK
+import com.fastest.pass.welcome.presentation.ui.component.ClickType.SIGNUP_CLICK
+import com.fastest.pass.welcome.presentation.ui.component.WelcomeTutorial
+import com.fastest.pass.welcome.utils.WelcomeNavigationRoute
 import dagger.hilt.android.AndroidEntryPoint
 import javax.inject.Inject
 
@@ -27,7 +40,18 @@ class HomeFragment : BaseFragment() {
         return ComposeView(requireActivity()).apply {
             setContent {
                 FastestPassTheme {
-                    Text("Home Fragment")
+                    Scaffold(
+                        modifier = Modifier.fillMaxSize()
+                    ) { paddingValues ->
+                        Box(
+                            modifier = Modifier
+                                .fillMaxSize()
+                                .background(colorResource(id = R.color.home_background_color))
+                                .padding(paddingValues.calculateBottomPadding())
+                        ) {
+                            HomeScreen()
+                        }
+                    }
                 }
             }
         }

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

@@ -0,0 +1,24 @@
+<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="M12.692,3.136C9.382,3.136 6.692,5.826 6.692,9.136V12.026C6.692,12.637 6.432,13.566 6.122,14.087L4.972,15.997C4.262,17.177 4.752,18.486 6.052,18.927C10.362,20.367 15.012,20.367 19.322,18.927C20.532,18.527 21.062,17.097 20.402,15.997L19.252,14.087C18.952,13.566 18.692,12.637 18.692,12.026V9.136C18.692,5.836 15.992,3.136 12.692,3.136Z"
+      android:strokeWidth="1.5"
+      android:fillColor="#00000000"
+      android:strokeColor="#404B69"
+      android:strokeLineCap="round"/>
+  <path
+      android:pathData="M14.542,3.427C14.232,3.336 13.912,3.266 13.582,3.227C12.622,3.106 11.702,3.177 10.842,3.427C11.132,2.687 11.852,2.167 12.692,2.167C13.532,2.167 14.252,2.687 14.542,3.427Z"
+      android:strokeLineJoin="round"
+      android:strokeWidth="1.5"
+      android:fillColor="#00000000"
+      android:strokeColor="#404B69"
+      android:strokeLineCap="round"/>
+  <path
+      android:pathData="M15.692,19.287C15.692,20.937 14.342,22.287 12.692,22.287C11.872,22.287 11.112,21.947 10.572,21.407C10.032,20.867 9.692,20.107 9.692,19.287"
+      android:strokeWidth="1.5"
+      android:fillColor="#00000000"
+      android:strokeColor="#404B69"/>
+</vector>

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

@@ -0,0 +1,20 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="26dp"
+    android:height="25dp"
+    android:viewportWidth="26"
+    android:viewportHeight="25">
+  <path
+      android:pathData="M12.623,21.5C17.983,21.5 22.328,17.247 22.328,12C22.328,6.753 17.983,2.5 12.623,2.5C7.264,2.5 2.919,6.753 2.919,12C2.919,17.247 7.264,21.5 12.623,21.5Z"
+      android:strokeLineJoin="round"
+      android:strokeWidth="1.5"
+      android:fillColor="#00000000"
+      android:strokeColor="#404B69"
+      android:strokeLineCap="round"/>
+  <path
+      android:pathData="M23.35,22.5L21.307,20.5"
+      android:strokeLineJoin="round"
+      android:strokeWidth="1.5"
+      android:fillColor="#00000000"
+      android:strokeColor="#404B69"
+      android:strokeLineCap="round"/>
+</vector>

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

@@ -14,5 +14,6 @@
     <color name="gray_border_textfield">#FFA7B1C6</color>
     <color name="red_login_button">#FFD83F31</color>
     <color name="sky_green">#FF1EAE98</color>
+    <color name="home_background_color">#FFCCD9E5</color>
 
 </resources>

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

@@ -33,5 +33,10 @@
     <string name="enter_new_password">Enter new password</string>
     <string name="confirm_new_password">Confirm new password</string>
     <string name="continue_text">Continue</string>
+    <string name="search">Search</string>
+    <string name="start_adding_items">Start adding items</string>
+    <string name="safely_store_password">Safely store passwords and other items in \n FastestPass.</string>
+    <string name="add_items_onebyone">Add items one-by-one</string>
+    <string name="import_passwords">Import passwords</string>
 
 </resources>