first screen

.idea/deploymentTargetSelector.xml

@@ -5,6 +5,9 @@
       <SelectionState runConfigName="app">
         <option name="selectionMode" value="DROPDOWN" />
       </SelectionState>
+      <SelectionState runConfigName="AuthTextFiled">
+        <option name="selectionMode" value="DROPDOWN" />
+      </SelectionState>
     </selectionStates>
   </component>
 </project>

.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,53 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="ComposePreviewDimensionRespectsLimit" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="ComposePreviewMustBeTopLevelFunction" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="ComposePreviewNeedsComposableAnnotation" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="ComposePreviewNotSupportedInUnitTestFiles" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="GlancePreviewDimensionRespectsLimit" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="GlancePreviewMustBeTopLevelFunction" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="GlancePreviewNeedsComposableAnnotation" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="GlancePreviewNotSupportedInUnitTestFiles" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="PreviewAnnotationInFunctionWithParameters" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="PreviewApiLevelMustBeValid" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="PreviewFontScaleMustBeGreaterThanZero" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="PreviewMultipleParameterProviders" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="PreviewPickerAnnotation" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
+    </inspection_tool>
+  </profile>
+</component>

.idea/misc.xml

@@ -1,4 +1,3 @@
-<?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="ExternalStorageConfigurationManager" enabled="true" />
   <component name="ProjectRootManager" version="2" languageLevel="JDK_17" default="true" project-jdk-name="jbr-17" project-jdk-type="JavaSDK">

Matule with Style guide ORIG (Main)/Menu/Back/Vector 175 (Stroke).svg

@@ -0,0 +1,3 @@
+<svg width="6" height="12" viewBox="0 0 6 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.46849 0.414315C5.79194 0.673072 5.84438 1.14504 5.58562 1.46849L1.96044 5.99997L5.58562 10.5314C5.84438 10.8549 5.79194 11.3269 5.46849 11.5856C5.14505 11.8444 4.67308 11.7919 4.41432 11.4685L0.414321 6.46849C0.195189 6.19457 0.195189 5.80536 0.414321 5.53145L4.41432 0.531445C4.67308 0.207999 5.14505 0.155558 5.46849 0.414315Z" fill="#2B2B2B"/>
+</svg>

app/src/main/java/com/example/appwithwin/ui/screen/signIn/SignInScreen.kt

@@ -1,41 +1,118 @@
 package com.example.appwithwin.ui.screen.signIn
 
+import android.icu.text.AlphabeticIndex.Bucket.LabelType
 import androidx.annotation.StringRes
+import androidx.compose.foundation.background
+import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
 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.width
+import androidx.compose.foundation.layout.wrapContentSize
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.text.BasicTextField
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonColors
+import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.HorizontalDivider
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
+import androidx.compose.material3.TextFieldDefaults
+import androidx.compose.material3.TopAppBar
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.input.VisualTransformation
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import com.example.appwithwin.R
 import com.example.appwithwin.ui.theme.MatuleTheme
 import org.w3c.dom.Text
 
 
 @Composable
 fun SignInScreen(){
-    SignInContent()
+    Scaffold(
+        topBar = {
+            Row(
+                modifier = Modifier
+                    .padding(top = 35.dp)
+                    .fillMaxWidth()
+                    .height(40.dp)
+            ){
+                IconButton(onClick = {}){
+                    Icon(
+                        painter = painterResource(R.drawable.back_arrow),
+                        contentDescription = null)
+                }
+            }
+        },
+        bottomBar = {
+            Row(
+                horizontalArrangement = Arrangement.Center,
+                verticalAlignment = Alignment.CenterVertically,
+                modifier = Modifier
+                    .padding(bottom = 50.dp)
+                    .fillMaxWidth()
+                    .height(40.dp)
+            ){
+                Text(
+                    text = stringResource(R.string.sign_up),
+                    style = MatuleTheme.typography.bodyRegular16.copy(color = MatuleTheme.colors.text),
+                    textAlign = TextAlign.Center
+                )
+            }
+        }
+    ){ paddingValues ->
+        SignInContent(paddingValues)
+    }
+
 }
 
 @Composable
-fun SignInContent(){
+fun SignInContent(paddingValues: PaddingValues){
-    Column{
+    Column(
+        modifier = Modifier.padding(paddingValues = paddingValues)
+    ){
         TitleWithSubtitleText(
-            title = "Привет",
+            title = stringResource(R.string.hello),
-            subTitle = "Заполните Свои данные или продолжите через социальные медиа"
+            subTitle = stringResource(R.string.sign_in_subtitle)
         )
+        val email = remember { mutableStateOf("") }
+        Spacer(modifier = Modifier.height(35.dp))
+        AuthTextFiled(
+            labelText = stringResource(R.string.email),
+            placeHolderText = stringResource(R.string.template_email),
+            value = email.value,
+            onValueChange = {
+                email.value = it
+            }
+        )
+        CommonButton(
+            modifier = Modifier.padding(top = 50.dp),
+            buttonLabel = stringResource(R.string.sign_in)
+        ){
+
+        }
     }
 }
 
-@Preview
+
 @Composable
 fun TitleWithSubtitleText(title: String, subTitle: String){
    Column (
@@ -43,16 +120,98 @@ fun TitleWithSubtitleText(title: String, subTitle: String){
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ){
-        Text(
+       Text(
-            text = title,
+           text = title,
-            style = MatuleTheme.typography.headingBold32.copy(color = MatuleTheme.colors.text),
+           style = MatuleTheme.typography.headingBold32.copy(color = MatuleTheme.colors.text),
-            textAlign = TextAlign.Center
+           textAlign = TextAlign.Center
-        )
+       )
-        Text(
+       Text(
-            text = subTitle,
+           text = subTitle,
-            maxLines = 2,
+           maxLines = 2,
-            style = MatuleTheme.typography.subTitleRegular16.copy(color = MatuleTheme.colors.subTextDark),
+           style = MatuleTheme.typography.subTitleRegular16.copy(color = MatuleTheme.colors.subTextDark),
-            textAlign = TextAlign.Center
+           textAlign = TextAlign.Center
-        )
+       )
    }
+}
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun AuthTextFiled(value: String, onValueChange: (String) -> Unit, placeHolderText: String? = null, labelText: String? = null){
+    Column (
+        modifier = Modifier
+            .padding(horizontal = 20.dp)
+            .wrapContentSize(),
+        verticalArrangement = Arrangement.spacedBy(12.dp)
+    ){
+        if (labelText != null){
+            Text(
+                text = labelText,
+                style = MatuleTheme.typography.bodyRegular16.copy(MatuleTheme.colors.text),
+                textAlign = TextAlign.Right
+            )
+        }
+        val interaction = remember { MutableInteractionSource() }
+        BasicTextField(
+            value = value,
+            onValueChange = { onValueChange(it) },
+            modifier = Modifier
+                .fillMaxWidth()
+                .clip(RoundedCornerShape(14.dp))
+                .background(MatuleTheme.colors.background)
+        ){
+                innerTextField ->
+            TextFieldDefaults.DecorationBox(
+                value = value,
+                singleLine = true,
+                innerTextField = innerTextField,
+                enabled = true,
+                visualTransformation = VisualTransformation.None,
+                interactionSource = interaction,
+                colors = TextFieldDefaults.colors(
+                    focusedContainerColor = MatuleTheme.colors.background,
+                    disabledContainerColor = MatuleTheme.colors.background,
+                    unfocusedContainerColor = MatuleTheme.colors.background,
+                    errorContainerColor = MatuleTheme.colors.background,
+                    unfocusedIndicatorColor = Color.Transparent,
+                    focusedIndicatorColor = Color.Transparent,
+                    disabledIndicatorColor = Color.Transparent,
+                    errorIndicatorColor = Color.Transparent
+                ),
+                placeholder = {
+                    if (placeHolderText != null)
+                    Text(
+                        text = placeHolderText,
+                        style = MatuleTheme.typography.bodyRegular14.copy(color = MatuleTheme.colors.hint)
+                    )
+                }
+            )
+        }
+    }
+
+}
+
+@Composable
+fun CommonButton(modifier: Modifier, buttonLabel: String, onClick: ()-> Unit){
+    Button(
+        modifier = modifier
+            .padding(horizontal = 20.dp)
+            .fillMaxWidth()
+            .height(50.dp)
+            .clip(RoundedCornerShape(14.dp))
+            .background(MatuleTheme.colors.accent)
+        ,
+        colors = ButtonColors(
+            containerColor = MatuleTheme.colors.accent,
+            disabledContentColor = Color.Transparent,
+            disabledContainerColor = MatuleTheme.colors.accent,
+            contentColor = Color.Transparent
+        ),
+        onClick = onClick
+    ){
+        Text(
+            text = buttonLabel,
+            style = MatuleTheme.typography.bodyRegular14.copy(color = MatuleTheme.colors.background),
+            textAlign = TextAlign.Center
+        )
+    }
 }

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

@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="6dp"
+    android:height="12dp"
+    android:viewportWidth="6"
+    android:viewportHeight="12">
+  <path
+      android:pathData="M5.468,0.414C5.792,0.673 5.844,1.145 5.586,1.468L1.96,6L5.586,10.531C5.844,10.855 5.792,11.327 5.468,11.586C5.145,11.844 4.673,11.792 4.414,11.469L0.414,6.468C0.195,6.195 0.195,5.805 0.414,5.531L4.414,0.531C4.673,0.208 5.145,0.156 5.468,0.414Z"
+      android:fillColor="#2B2B2B"
+      android:fillType="evenOdd"/>
+</vector>

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

@@ -1,3 +1,9 @@
 <resources>
     <string name="app_name">AppWithWin</string>
+    <string name="hello">Привет</string>
+    <string name="sign_in_subtitle">Заполните Свои данные или продолжите через социальные медиа</string>
+    <string name="template_email">xyz@gmail.com</string>
+    <string name="email">Email</string>
+    <string name="sign_in">Войти</string>
+    <string name="sign_up">Вы впервые? Создать пользователя</string>
 </resources>