Feature/user type selections screen

composeApp/src/commonMain/composeResources/values-ar/string.xml

@@ -24,4 +24,12 @@
     <string name="next">التالى</string>
     <string name="skip">تخطى</string>
 
+    <!-- Account Setup UserTypeSelectionScreen  -->
+    <string name="how_would_you_like_to_use_san3a">كيف ترغب في استخدام صُنع؟</string>
+    <string name="you_can_switch_roles_anytime">يمكنك تبديل الأدوار في أي وقت من ملفك الشخصي.</string>
+    <string name="customer">عميل</string>
+    <string name="i_need_help_with_a_service">أحتاج إلى مساعدة بخدمة</string>
+    <string name="craftsman">حرفي</string>
+    <string name="i_offer_services">أقدم خدمات</string>
+
 </resources>

composeApp/src/commonMain/composeResources/values/string.xml

@@ -33,4 +33,12 @@
     <string name="account_setup_craftsman_category_title">What services do you offer?</string>
     <string name="account_setup_craftsman_category_description">Choose your specialties to get relevant job requests. You can change this later.</string>
 
+    <!-- Account Setup UserTypeSelectionScreen  -->
+    <string name="how_would_you_like_to_use_san3a">How would you like to use San3a?</string>
+    <string name="you_can_switch_roles_anytime">You can switch roles anytime from your profile.</string>
+    <string name="customer">Customer</string>
+    <string name="i_need_help_with_a_service">I need help with a service</string>
+    <string name="craftsman">Craftsman</string>
+    <string name="i_offer_services">I offer services</string>
+
 </resources>

composeApp/src/commonMain/kotlin/org/example/project/presentation/designsystem/components/CraftsmanCard.kt

@@ -1,5 +1,4 @@
-package org.example.project.presentation.designsystem.components
-
+package org.example.project.designSystem.components
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
@@ -33,16 +32,16 @@ import androidx.compose.ui.unit.dp
 import crafto.composeapp.generated.resources.Res
 import crafto.composeapp.generated.resources.check_mark
 import crafto.composeapp.generated.resources.clipboard_text
+import crafto.composeapp.generated.resources.customer
 import crafto.composeapp.generated.resources.dialog
-import crafto.composeapp.generated.resources.selection_card_img
 import crafto.composeapp.generated.resources.star
 import crafto.composeapp.generated.resources.star_1
 import crafto.composeapp.generated.resources.user_rounded
 import crafto.composeapp.generated.resources.verified_check_1
+import org.example.project.presentation.designsystem.components.DefaultButton
 import org.example.project.presentation.designsystem.textstyle.AppTheme
 import org.jetbrains.compose.resources.painterResource
 import org.jetbrains.compose.ui.tooling.preview.Preview
-
 @Composable
 fun CraftsmanCard(
     modifier: Modifier = Modifier,
@@ -57,31 +56,25 @@ fun CraftsmanCard(
     onButtonClick: () -> Unit = {}
 ) {
     val craftsmanIcon = craftsmanImage ?: painterResource(Res.drawable.user_rounded)
-
     val (textStyle, textColor) =
         if (craftsmanImage != null)
             AppTheme.textStyle.body.medium to AppTheme.craftoColors.shade.primary
         else
             AppTheme.textStyle.body.smallMedium to AppTheme.craftoColors.shade.secondary
-
     val (secondaryIcon, secondaryIconTint) =
         if (showOffers)
             painterResource(Res.drawable.clipboard_text) to AppTheme.craftoColors.brand.primary
         else
             painterResource(Res.drawable.star_1) to AppTheme.craftoColors.additional.primaryYellow
-
     val (secondaryText, secondaryTextColor) =
         if (showOffers)
             "$numberOfOffers Offers" to AppTheme.craftoColors.brand.primary
         else
             "$rating Rating" to AppTheme.craftoColors.shade.secondary
-
-
     Row(
         modifier = modifier.fillMaxWidth().background(AppTheme.craftoColors.background.card),
         horizontalArrangement = Arrangement.spacedBy(12.dp)
     ) {
-
         if (craftsmanImage == null) {
             DashedCircle(
                 modifier = Modifier.clip(RoundedCornerShape(AppTheme.craftoRadius.full))
@@ -94,7 +87,7 @@ fun CraftsmanCard(
             CircleAvatar(
                 modifier = Modifier.clip(RoundedCornerShape(AppTheme.craftoRadius.full))
                     .size(40.dp),
-                image = painterResource(Res.drawable.selection_card_img)
+                image = painterResource(Res.drawable.customer)
             )
         }
 
@@ -117,17 +110,14 @@ fun CraftsmanCard(
                     modifier = Modifier.size(16.dp),
                     tint = secondaryIconTint
                 )
-
                 Text(
                     text = secondaryText,
                     color = secondaryTextColor,
                     style = AppTheme.textStyle.body.smallMedium
                 )
             }
         }
-
         Spacer(modifier = Modifier.weight(1f))
-
         DefaultButton(
             text = buttonText,
             enabled = true,
@@ -138,7 +128,6 @@ fun CraftsmanCard(
         )
     }
 }
-
 @Composable
 private fun CircleAvatar(
     image: Painter,
@@ -157,14 +146,12 @@ private fun CircleAvatar(
                 contentScale = ContentScale.Crop,
             )
         }
-
         Icon(
             painter = painterResource(Res.drawable.verified_check_1),
             contentDescription = "Verified",
             modifier = Modifier.size(16.dp).align(Alignment.BottomCenter),
             tint = AppTheme.craftoColors.additional.primarySuccess
         )
-
         Icon(
             painter = painterResource(Res.drawable.check_mark),
             contentDescription = "check mark",
@@ -173,7 +160,6 @@ private fun CircleAvatar(
         )
     }
 }
-
 @Composable
 private fun DashedCircle(
     icon: Painter,
@@ -202,8 +188,6 @@ private fun DashedCircle(
         )
     }
 }
-
-
 @Preview
 @Composable
 private fun CraftsmanCardPreview() {
@@ -217,15 +201,14 @@ private fun CraftsmanCardPreview() {
                 craftsmanName = "Hend",
                 rating = 4.5,
                 showOffers = false,
-                craftsmanImage = painterResource(Res.drawable.selection_card_img),
+                craftsmanImage = painterResource(Res.drawable.customer),
                 buttonText = "Rate",
                 buttonIcon = painterResource(Res.drawable.star),
                 buttonColors = ButtonDefaults.buttonColors(
                     containerColor = AppTheme.craftoColors.shade.quinary,
                     contentColor = AppTheme.craftoColors.button.onSecondary
                 )
             )
-
             CraftsmanCard(
                 modifier = Modifier.padding(16.dp),
                 craftsmanName = "Craftsman Not Chosen",
@@ -242,7 +225,7 @@ private fun CraftsmanCardPreview() {
                 craftsmanName = "Hend",
                 rating = 4.5,
                 showOffers = false,
-                craftsmanImage = painterResource(Res.drawable.selection_card_img),
+                craftsmanImage = painterResource(Res.drawable.customer),
                 buttonText = "Chat",
                 buttonIcon = painterResource(Res.drawable.dialog),
                 buttonColors = ButtonDefaults.buttonColors(

composeApp/src/commonMain/kotlin/org/example/project/presentation/designsystem/components/SelectionCard.kt

@@ -1,8 +1,9 @@
-package org.example.project.presentation.designsystem.components
-
+package org.example.project.designSystem.components
 import androidx.compose.animation.animateColorAsState
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Card
@@ -14,13 +15,13 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.painter.Painter
+import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import crafto.composeapp.generated.resources.Res
-import crafto.composeapp.generated.resources.selection_card_img
+import crafto.composeapp.generated.resources.customer
 import org.example.project.presentation.designsystem.textstyle.AppTheme
 import org.jetbrains.compose.resources.painterResource
 import org.jetbrains.compose.ui.tooling.preview.Preview
-
 @Composable
 fun SelectionCard(
     img: Painter,
@@ -42,40 +43,45 @@ fun SelectionCard(
 
     Card(
         onClick = onCardClick,
-        modifier.border(1.dp, strokeColor, RoundedCornerShape(AppTheme.craftoRadius.xl)),
+        modifier = modifier.border(1.dp, strokeColor, RoundedCornerShape(AppTheme.craftoRadius.xl)),
         shape = RoundedCornerShape(AppTheme.craftoRadius.xl),
         colors = CardDefaults.cardColors(
             background
         ),
     ) {
-        Image(
-            painter = img,
-            contentDescription = null,
-            modifier = Modifier.padding(12.dp)
-        )
-
-        Text(
-            text = title,
-            style = AppTheme.textStyle.body.mediumSemiBold,
-            modifier = Modifier.padding(8.dp).align(Alignment.CenterHorizontally),
-            color = titleColor
-
-        )
-        Text(
-            text = caption,
-            style = AppTheme.textStyle.body.smallMedium,
-            color = AppTheme.craftoColors.shade.secondary,
-            modifier = Modifier.padding(8.dp).align(Alignment.CenterHorizontally)
-        )
+        Column(
+            modifier = Modifier.fillMaxWidth(),
+            horizontalAlignment = Alignment.CenterHorizontally
+        ) {
+            Image(
+                painter = img,
+                contentDescription = null,
+                modifier = Modifier.padding(12.dp)
+            )
 
+            Text(
+                text = title,
+                style = AppTheme.textStyle.body.mediumSemiBold,
+                modifier = Modifier.padding(8.dp),
+                color = titleColor,
+                textAlign = TextAlign.Center
+            )
+            Text(
+                text = caption,
+                style = AppTheme.textStyle.body.smallMedium,
+                color = AppTheme.craftoColors.shade.secondary,
+                modifier = Modifier.padding(8.dp),
+                textAlign = TextAlign.Center
+            )
+        }
     }
 }
 
 @Preview
 @Composable
 private fun SelectionCardPreview() {
     SelectionCard(
-        img = painterResource(Res.drawable.selection_card_img),
+        img = painterResource(Res.drawable.customer),
         title = "Title",
         caption = "Caption",
         isSelected = true,