feat: improve UI of business home and user type selection screens

This commit enhances the user interface of the business home and user type selection screens:

- Improves
 the layout and spacing of elements on the business home screen.
- Adds shadows and borders to the stats cards for a more polished look.
- Adjusts the spacing and alignment of elements on the user type selection screen.
- Adds a vertical scroll to the business home screen.

app/src/main/java/com/samuelokello/kazihub/presentation/business/home/components/StatsCard.kt

@@ -5,9 +5,9 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 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.shape.RoundedCornerShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.ShoppingBag
@@ -32,44 +32,44 @@ fun StatsCard(
 
     val containerColor: Color = primaryLight
     val contentColor: Color = Color.White
-    Box(
+    Card(
         modifier = Modifier
-            .size(width = 200.dp, height = 120.dp),
-        contentAlignment = Alignment.Center
+            .width(120.dp)
+            .height(140.dp),
+        colors = CardDefaults.cardColors(
+            containerColor = containerColor,
+            contentColor = contentColor
+        ),
+        elevation = CardDefaults.elevatedCardElevation(
+            defaultElevation = 4.dp
+        ),
+        shape = RoundedCornerShape(10.dp)
     ) {
-        Card(
-            modifier = Modifier
-                .fillMaxSize(),
-            colors = CardDefaults.cardColors(
-                containerColor = containerColor,
-                contentColor = contentColor
-            ),
-            elevation = CardDefaults.elevatedCardElevation(
-                defaultElevation = 4.dp
-            ),
-            shape = RoundedCornerShape(10.dp)
+        Box(
+            Modifier.fillMaxSize(),
+            contentAlignment = Alignment.Center
         ) {
-            Column (
-                modifier = Modifier
-                    .padding(horizontal = 26.dp, vertical = 16.dp),
-                horizontalAlignment = Alignment.CenterHorizontally,
-                verticalArrangement = Arrangement.Center
+            Column(
+                modifier = Modifier.fillMaxWidth(),
+                verticalArrangement = Arrangement.spacedBy(4.dp, Alignment.CenterVertically),
+                horizontalAlignment = Alignment.CenterHorizontally
             ) {
                 statIcon()
-                Spacer(modifier = Modifier.height(8.dp))
+                Spacer(modifier = Modifier.height(4.dp))
                 Text(text = title, style = MaterialTheme.typography.bodySmall)
-                Spacer(modifier = Modifier.height(8.dp))
+                Spacer(modifier = Modifier.height(4.dp))
                 Text(text = value, style = MaterialTheme.typography.bodyLarge)
             }
         }
+
     }
 }
 
-@Preview(showBackground =  true)
+@Preview(showBackground = true)
 @Composable
 private fun StatsCardPreview() {
     StatsCard(
-        statIcon = { Icons.Default.ShoppingBag},
+        statIcon = { Icons.Default.ShoppingBag },
         title = "Total Expenditure",
         value = "Ksh 100,000",
     )

app/src/main/java/com/samuelokello/kazihub/presentation/business/home/ui/BusinessHomeScreenContent.kt

@@ -1,5 +1,6 @@
 package com.samuelokello.kazihub.presentation.business.home.ui
 
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
@@ -9,6 +10,8 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Add
 import androidx.compose.material.icons.filled.ShoppingBag
@@ -20,6 +23,7 @@ import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
@@ -29,7 +33,6 @@ import com.samuelokello.kazihub.presentation.business.home.components.JobListIte
 import com.samuelokello.kazihub.presentation.business.home.components.LineGraph
 import com.samuelokello.kazihub.presentation.business.home.components.StatsCard
 import com.samuelokello.kazihub.presentation.business.home.event.BusinessHomeUiEvents
-import com.samuelokello.kazihub.presentation.business.home.state.BusinessHomeUiState
 import com.samuelokello.kazihub.presentation.common.components.NoJobsMessage
 import com.samuelokello.kazihub.ui.theme.primaryLight
 
@@ -56,43 +59,48 @@ fun BusinessHomeScreenContent(
         },
     ) { paddingValues ->
 
+        val scrollState = rememberScrollState()
+
         Column(
             modifier =
             Modifier
                 .padding(paddingValues)
                 .padding(horizontal = 20.dp)
-                .fillMaxWidth(),
+                .fillMaxWidth()
+                .verticalScroll(rememberScrollState())
+//                .scrollable(
+//                    state = scrollState ,
+//                    enabled = true,
+//                    orientation = Orientation.Vertical
+//                ),
         ) {
-            Spacer(modifier = Modifier.height(16.dp))
 
             Column {
                 Text(text = "Hello 👋 !", style = MaterialTheme.typography.titleMedium)
             }
 
-            Spacer(modifier = Modifier.height(16.dp))
+            Spacer(modifier = Modifier.height(8.dp))
 
-            Column(
-                modifier =
+            Row(
                 Modifier
-                    .fillMaxWidth()
-                    .padding(horizontal = 16.dp),
+                    .padding(horizontal = 10.dp, vertical = 8.dp)
+                    .fillMaxWidth(),
+                horizontalArrangement = Arrangement.spacedBy(20.dp, Alignment.CenterHorizontally),
+                verticalAlignment = Alignment.CenterVertically
             ) {
-                Row {
-                    StatsCard(
-                        statIcon = { Icon(Icons.Default.ShoppingBag, contentDescription = null) },
-                        title = "Total Expenditure",
-                        value = "Ksh 0",
-                    )
-                    Spacer(modifier = Modifier.size(32.dp))
-                    StatsCard(
-                        statIcon = { Icon(Icons.Default.Work, contentDescription = null) },
-                        title = "Jobs Posted",
-                        value = " 0",
-                    )
-                }
+                StatsCard(
+                    statIcon = { Icon(Icons.Default.ShoppingBag, contentDescription = null) },
+                    title = "Total Expenditure",
+                    value = "Ksh 0",
+                )
+                StatsCard(
+                    statIcon = { Icon(Icons.Default.Work, contentDescription = null) },
+                    title = "Jobs Posted",
+                    value = " 0",
+                )
             }
 
-            Spacer(modifier = Modifier.height(16.dp))
+            Spacer(modifier = Modifier.height(8.dp))
 
             Column {
                 Text(
@@ -104,7 +112,7 @@ fun BusinessHomeScreenContent(
                 LineGraph(jobs)
             }
 
-            Spacer(modifier = Modifier.height(16.dp))
+            Spacer(modifier = Modifier.height(8.dp))
 
             Column {
                 Text(
@@ -113,7 +121,9 @@ fun BusinessHomeScreenContent(
                     modifier = Modifier.padding(bottom = 8.dp),
                 )
             }
+
             Spacer(modifier = Modifier.height(8.dp))
+
             if (jobs.isEmpty()) {
                 NoJobsMessage(R.string.click_the_button_to_create_your_first_job)
             } else {

app/src/main/java/com/samuelokello/kazihub/presentation/shared/user_type/UserTypeScreen.kt

@@ -77,12 +77,15 @@ fun UserTypeContent(
 
         Row (
             Modifier
-                .padding(horizontal = 16.dp, vertical = 8.dp)
+                .padding(horizontal = 8.dp, vertical = 8.dp)
                 .fillMaxWidth(),
             horizontalArrangement = Arrangement.Center,
             verticalAlignment = Alignment.CenterVertically
         ){
-            Column {
+            Column (
+                horizontalAlignment = Alignment.CenterHorizontally,
+                verticalArrangement = Arrangement.Center
+            ){
                 UserTypeCard(
                     image = R.drawable.undraw_software_engineer_re_tnjc,
                     title = "I am a job Provider",
@@ -94,10 +97,10 @@ fun UserTypeContent(
                 Text(
                     text = "Business",
                     style = MaterialTheme.typography.labelMedium,
-                    modifier = Modifier.padding(horizontal = 64.dp)
+                    modifier = Modifier
                 )
             }
-            Spacer(modifier = Modifier.width(16.dp))
+            Spacer(modifier = Modifier.width(8.dp))
             Column {
                 UserTypeCard(
                     image = R.drawable.worker,