From e3006358373e32da9b24856c3f80e6b50367ce81 Mon Sep 17 00:00:00 2001
From: Mohammad nawas <mohammednawas8@gmail.com>
Date: Mon, 19 Jun 2023 09:25:40 +0300
Subject: [PATCH 1/3] design

---
 .idea/deploymentTargetDropDown.xml            |  17 ++
 .idea/gradle.xml                              |   1 +
 .idea/misc.xml                                |   3 +-
 .idea/vcs.xml                                 |   6 +
 app/build.gradle                              |   3 +-
 .../com/loc/composeloginscreen/LoginScreen.kt | 208 ++++++++++++++++++
 .../loc/composeloginscreen/LoginTextField.kt  |  55 +++++
 .../loc/composeloginscreen/MainActivity.kt    |   2 +-
 .../composeloginscreen/SocialMediaLogIn.kt    |  88 ++++++++
 .../loc/composeloginscreen/ui/theme/Color.kt  |  17 ++
 .../loc/composeloginscreen/ui/theme/Theme.kt  |   2 +-
 .../loc/composeloginscreen/ui/theme/Type.kt   |  60 ++++-
 app/src/main/res/drawable-night/shape.xml     |  10 +
 app/src/main/res/drawable/facebook.xml        |  28 +++
 app/src/main/res/drawable/google.xml          |  18 ++
 app/src/main/res/drawable/logo.xml            |  16 ++
 app/src/main/res/drawable/shape.xml           |  10 +
 app/src/main/res/values/strings.xml           |   4 +
 18 files changed, 537 insertions(+), 11 deletions(-)
 create mode 100644 .idea/deploymentTargetDropDown.xml
 create mode 100644 .idea/vcs.xml
 create mode 100644 app/src/main/java/com/loc/composeloginscreen/LoginScreen.kt
 create mode 100644 app/src/main/java/com/loc/composeloginscreen/LoginTextField.kt
 create mode 100644 app/src/main/java/com/loc/composeloginscreen/SocialMediaLogIn.kt
 create mode 100644 app/src/main/res/drawable-night/shape.xml
 create mode 100644 app/src/main/res/drawable/facebook.xml
 create mode 100644 app/src/main/res/drawable/google.xml
 create mode 100644 app/src/main/res/drawable/logo.xml
 create mode 100644 app/src/main/res/drawable/shape.xml

diff --git a/.idea/deploymentTargetDropDown.xml b/.idea/deploymentTargetDropDown.xml
new file mode 100644
index 0000000..e554d65
--- /dev/null
+++ b/.idea/deploymentTargetDropDown.xml
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="deploymentTargetDropDown">
+    <targetSelectedWithDropDown>
+      <Target>
+        <type value="QUICK_BOOT_TARGET" />
+        <deviceKey>
+          <Key>
+            <type value="VIRTUAL_DEVICE_PATH" />
+            <value value="C:\Users\mo\.android\avd\Pixel_6_Pro_API_30_1.avd" />
+          </Key>
+        </deviceKey>
+      </Target>
+    </targetSelectedWithDropDown>
+    <timeTargetWasSelectedWithDropDown value="2023-06-19T06:21:34.918157400Z" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/gradle.xml b/.idea/gradle.xml
index 36394ad..7b46144 100644
--- a/.idea/gradle.xml
+++ b/.idea/gradle.xml
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
+  <component name="GradleMigrationSettings" migrationVersion="1" />
   <component name="GradleSettings">
     <option name="linkedExternalProjectsSettings">
       <GradleProjectSettings>
diff --git a/.idea/misc.xml b/.idea/misc.xml
index 0ad17cb..773fe0f 100644
--- a/.idea/misc.xml
+++ b/.idea/misc.xml
@@ -1,7 +1,6 @@
-<?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">
+  <component name="ProjectRootManager" version="2" languageLevel="JDK_17" project-jdk-name="jbr-17" project-jdk-type="JavaSDK">
     <output url="file://$PROJECT_DIR$/build/classes" />
   </component>
   <component name="ProjectType">
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
new file mode 100644
index 0000000..94a25f7
--- /dev/null
+++ b/.idea/vcs.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/app/build.gradle b/app/build.gradle
index 0390727..8993467 100644
--- a/app/build.gradle
+++ b/app/build.gradle
@@ -56,7 +56,7 @@ dependencies {
     implementation 'androidx.compose.ui:ui'
     implementation 'androidx.compose.ui:ui-graphics'
     implementation 'androidx.compose.ui:ui-tooling-preview'
-    implementation 'androidx.compose.material3:material3'
+    implementation "androidx.compose.material3:material3:1.1.0"
     testImplementation 'junit:junit:4.13.2'
     androidTestImplementation 'androidx.test.ext:junit:1.1.5'
     androidTestImplementation 'androidx.test.espresso:espresso-core:3.5.1'
@@ -64,4 +64,5 @@ dependencies {
     androidTestImplementation 'androidx.compose.ui:ui-test-junit4'
     debugImplementation 'androidx.compose.ui:ui-tooling'
     debugImplementation 'androidx.compose.ui:ui-test-manifest'
+
 }
\ No newline at end of file
diff --git a/app/src/main/java/com/loc/composeloginscreen/LoginScreen.kt b/app/src/main/java/com/loc/composeloginscreen/LoginScreen.kt
new file mode 100644
index 0000000..f2fa523
--- /dev/null
+++ b/app/src/main/java/com/loc/composeloginscreen/LoginScreen.kt
@@ -0,0 +1,208 @@
+package com.loc.composeloginscreen
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxHeight
+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.material3.Button
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.Icon
+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.graphics.Color
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.SpanStyle
+import androidx.compose.ui.text.buildAnnotatedString
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.withStyle
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.loc.composeloginscreen.ui.theme.Black
+import com.loc.composeloginscreen.ui.theme.BlueGray
+import com.loc.composeloginscreen.ui.theme.Roboto
+
+@Composable
+fun LoginScreen() {
+    Surface {
+        Column(modifier = Modifier.fillMaxSize()) {
+            TopSection()
+            Spacer(modifier = Modifier.height(36.dp))
+
+            Column(
+                modifier = Modifier
+                    .fillMaxSize()
+                    .padding(horizontal = 30.dp)
+            ) {
+                LoginSection()
+                Spacer(modifier = Modifier.height(30.dp))
+                SocialMediaSection()
+
+                val uiColor = if (isSystemInDarkTheme()) Color.White else Black
+                Box(modifier = Modifier
+                    .fillMaxHeight(fraction = 0.8f)
+                    .fillMaxWidth(),
+                    contentAlignment = Alignment.BottomCenter
+                ){
+
+                    Text(
+                        text = buildAnnotatedString {
+                            withStyle(
+                                style = SpanStyle(
+                                    color = Color(0xFF94A3B8),
+                                    fontSize = 14.sp,
+                                    fontFamily = Roboto,
+                                    fontWeight = FontWeight.Normal
+                                )
+                            ){
+                                append("Don't have account?")
+                            }
+                            withStyle(
+                                style = SpanStyle(
+                                    color = uiColor,
+                                    fontSize = 14.sp,
+                                    fontFamily = Roboto,
+                                    fontWeight = FontWeight.Medium
+                                )
+                            ){
+                                append(" ")
+                                append("Crete now")
+                            }
+                        }
+                    )
+
+                }
+
+            }
+        }
+
+    }
+}
+
+@Composable
+private fun SocialMediaSection() {
+    Column(horizontalAlignment = Alignment.CenterHorizontally) {
+        Text(
+            text = "Or continue with",
+            style = MaterialTheme.typography.labelMedium.copy(color = Color(0xFF64748B))
+        )
+        Spacer(modifier = Modifier.height(20.dp))
+        Row(
+            modifier = Modifier.fillMaxWidth(),
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            SocialMediaLogIn(
+                icon = R.drawable.google,
+                text = "Google",
+                modifier = Modifier.weight(1f)
+            ) {
+
+            }
+            Spacer(modifier = Modifier.width(20.dp))
+            SocialMediaLogIn(
+                icon = R.drawable.facebook,
+                text = "Facebook",
+                modifier = Modifier.weight(1f)
+            ) {
+
+            }
+        }
+    }
+}
+
+@Composable
+private fun LoginSection() {
+    LoginTextField(label = "Email", trailing = "", modifier = Modifier.fillMaxWidth())
+    Spacer(modifier = Modifier.height(15.dp))
+    LoginTextField(
+        label = "Password",
+        trailing = "Forgot?",
+        modifier = Modifier.fillMaxWidth()
+    )
+    Spacer(modifier = Modifier.height(20.dp))
+    Button(
+        modifier = Modifier
+            .fillMaxWidth()
+            .height(40.dp),
+        onClick = { /*TODO*/ },
+        colors = ButtonDefaults.buttonColors(
+            containerColor = if (isSystemInDarkTheme()) BlueGray else Black,
+            contentColor = Color.White
+        ),
+        shape = RoundedCornerShape(size = 4.dp)
+    ) {
+        Text(
+            text = "Log in",
+            style = MaterialTheme.typography.labelMedium.copy(fontWeight = FontWeight.Medium)
+        )
+    }
+}
+
+@Composable
+private fun TopSection() {
+    val uiColor = if (isSystemInDarkTheme()) Color.White else Black
+
+    Box(
+        contentAlignment = Alignment.TopCenter
+    ) {
+        Image(
+            modifier = Modifier
+                .fillMaxWidth()
+                .fillMaxHeight(fraction = 0.46f),
+            painter = painterResource(id = R.drawable.shape),
+            contentDescription = null,
+            contentScale = ContentScale.FillBounds
+        )
+
+
+        Row(
+            modifier = Modifier.padding(top = 80.dp),
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+
+            Icon(
+                modifier = Modifier.size(42.dp),
+                painter = painterResource(id = R.drawable.logo),
+                contentDescription = stringResource(id = R.string.app_logo),
+                tint = uiColor
+            )
+            Spacer(modifier = Modifier.width(15.dp))
+            Column {
+                Text(
+                    text = stringResource(id = R.string.the_tolet),
+                    style = MaterialTheme.typography.headlineMedium,
+                    color = uiColor
+                )
+                Text(
+                    text = stringResource(id = R.string.find_house),
+                    style = MaterialTheme.typography.titleMedium,
+                    color = uiColor
+                )
+            }
+        }
+
+        Text(
+            modifier = Modifier
+                .padding(bottom = 10.dp)
+                .align(alignment = Alignment.BottomCenter),
+            text = stringResource(id = R.string.login),
+            style = MaterialTheme.typography.headlineLarge,
+            color = uiColor
+        )
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/loc/composeloginscreen/LoginTextField.kt b/app/src/main/java/com/loc/composeloginscreen/LoginTextField.kt
new file mode 100644
index 0000000..9b28580
--- /dev/null
+++ b/app/src/main/java/com/loc/composeloginscreen/LoginTextField.kt
@@ -0,0 +1,55 @@
+package com.loc.composeloginscreen
+
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.foundation.layout.Box
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextButton
+import androidx.compose.material3.TextField
+import androidx.compose.material3.TextFieldDefaults
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.font.FontWeight
+import com.loc.composeloginscreen.ui.theme.Black
+import com.loc.composeloginscreen.ui.theme.focusedTextFieldText
+import com.loc.composeloginscreen.ui.theme.textFieldContainer
+import com.loc.composeloginscreen.ui.theme.unfocusedTextFieldText
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun LoginTextField(
+    modifier: Modifier = Modifier,
+    label: String,
+    trailing: String,
+) {
+
+    val uiColor = if (isSystemInDarkTheme()) Color.White else Black
+
+    TextField(
+        modifier = modifier,
+        value = "",
+        onValueChange = {},
+        label = {
+            Text(text = label, style = MaterialTheme.typography.labelMedium, color = uiColor)
+        },
+        colors = TextFieldDefaults.colors(
+            unfocusedPlaceholderColor = MaterialTheme.colorScheme.unfocusedTextFieldText,
+            focusedPlaceholderColor = MaterialTheme.colorScheme.focusedTextFieldText,
+            unfocusedContainerColor = MaterialTheme.colorScheme.textFieldContainer,
+            focusedContainerColor = MaterialTheme.colorScheme.textFieldContainer,
+        ),
+        trailingIcon = {
+            TextButton(onClick = { /*TODO*/ }) {
+                Text(
+                    text = trailing,
+                    style = MaterialTheme.typography.labelMedium.copy(fontWeight = FontWeight.Medium),
+                    color = uiColor
+                )
+            }
+        }
+
+    )
+
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/loc/composeloginscreen/MainActivity.kt b/app/src/main/java/com/loc/composeloginscreen/MainActivity.kt
index 4fbcfb6..fd6d3d0 100644
--- a/app/src/main/java/com/loc/composeloginscreen/MainActivity.kt
+++ b/app/src/main/java/com/loc/composeloginscreen/MainActivity.kt
@@ -17,7 +17,7 @@ class MainActivity : ComponentActivity() {
         super.onCreate(savedInstanceState)
         setContent {
             ComposeLoginScreenTheme {
-
+                    LoginScreen()
             }
         }
     }
diff --git a/app/src/main/java/com/loc/composeloginscreen/SocialMediaLogIn.kt b/app/src/main/java/com/loc/composeloginscreen/SocialMediaLogIn.kt
new file mode 100644
index 0000000..e3b355a
--- /dev/null
+++ b/app/src/main/java/com/loc/composeloginscreen/SocialMediaLogIn.kt
@@ -0,0 +1,88 @@
+package com.loc.composeloginscreen
+
+import androidx.annotation.DrawableRes
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.composed
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.shadow
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.unit.dp
+import com.loc.composeloginscreen.ui.theme.BlueGray
+import com.loc.composeloginscreen.ui.theme.LightBlueWhite
+
+@Composable
+fun SocialMediaLogIn(
+    modifier: Modifier = Modifier,
+    @DrawableRes icon: Int,
+    text: String,
+    onClick: () -> Unit,
+) {
+
+    Row(
+        modifier = modifier
+            .clip(RoundedCornerShape(4.dp))
+            .socialMedia()
+            .clickable { onClick() }
+            .height(40.dp),
+        horizontalArrangement = Arrangement.Center,
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+
+        Image(
+            painter = painterResource(id = icon),
+            contentDescription = null,
+            modifier = Modifier.size(16.dp)
+        )
+
+        Spacer(modifier = Modifier.width(5.dp))
+
+        Text(
+            text = text,
+            style = MaterialTheme.typography.labelMedium.copy(color = Color(0xFF64748B))
+        )
+
+    }
+
+}
+
+
+fun Modifier.socialMedia(): Modifier = composed {
+    if (isSystemInDarkTheme()) {
+        background(Color.Transparent).border(
+            width = 1.dp,
+            color = BlueGray,
+            shape = RoundedCornerShape(4.dp)
+        )
+    } else {
+        background(LightBlueWhite)
+    }
+}
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/app/src/main/java/com/loc/composeloginscreen/ui/theme/Color.kt b/app/src/main/java/com/loc/composeloginscreen/ui/theme/Color.kt
index ee0b25c..fd83a88 100644
--- a/app/src/main/java/com/loc/composeloginscreen/ui/theme/Color.kt
+++ b/app/src/main/java/com/loc/composeloginscreen/ui/theme/Color.kt
@@ -1,7 +1,24 @@
 package com.loc.composeloginscreen.ui.theme
 
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.material3.ColorScheme
+import androidx.compose.runtime.Composable
 import androidx.compose.ui.graphics.Color
 
 val Black = Color(0xFF000113)
 val LightBlueWhite = Color(0xFFF1F5F9) //Social media background
 val BlueGray = Color(0xFF334155)
+
+
+
+val ColorScheme.focusedTextFieldText
+    @Composable
+    get() = if (isSystemInDarkTheme()) Color.White else Color.Black
+
+val ColorScheme.unfocusedTextFieldText
+    @Composable
+    get() = if (isSystemInDarkTheme()) Color(0xFF94A3B8) else Color(0xFF475569)
+
+val ColorScheme.textFieldContainer
+    @Composable
+    get() = if (isSystemInDarkTheme()) BlueGray.copy(alpha = 0.6f) else LightBlueWhite
\ No newline at end of file
diff --git a/app/src/main/java/com/loc/composeloginscreen/ui/theme/Theme.kt b/app/src/main/java/com/loc/composeloginscreen/ui/theme/Theme.kt
index 7500fec..4ebf299 100644
--- a/app/src/main/java/com/loc/composeloginscreen/ui/theme/Theme.kt
+++ b/app/src/main/java/com/loc/composeloginscreen/ui/theme/Theme.kt
@@ -18,7 +18,7 @@ import androidx.core.view.WindowCompat
 
 private val DarkColorScheme = darkColorScheme(
     primary = BlueGray,
-    surface = Black
+    surface = Black,
 )
 
 private val LightColorScheme = lightColorScheme(
diff --git a/app/src/main/java/com/loc/composeloginscreen/ui/theme/Type.kt b/app/src/main/java/com/loc/composeloginscreen/ui/theme/Type.kt
index bc4ce93..ec4cd27 100644
--- a/app/src/main/java/com/loc/composeloginscreen/ui/theme/Type.kt
+++ b/app/src/main/java/com/loc/composeloginscreen/ui/theme/Type.kt
@@ -2,17 +2,65 @@ package com.loc.composeloginscreen.ui.theme
 
 import androidx.compose.material3.Typography
 import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.Font
 import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.sp
+import com.loc.composeloginscreen.R
+
+val Inter = FontFamily(
+    listOf(
+        Font(resId = R.font.inter_medium, weight = FontWeight.Medium)
+    )
+)
+
+val Rubik = FontFamily(
+    listOf(
+        Font(resId = R.font.rubik_bold, weight = FontWeight.Bold)
+    )
+)
+
+val Roboto = FontFamily(
+    listOf(
+        Font(resId = R.font.roboto_medium, weight = FontWeight.Medium),
+        Font(resId = R.font.roboto_regular, weight = FontWeight.Normal),
+        Font(resId = R.font.roboto_bold, weight = FontWeight.ExtraBold),
+    )
+)
 
 // Set of Material typography styles to start with
 val Typography = Typography(
-    bodyLarge = TextStyle(
-        fontFamily = FontFamily.Default,
+    headlineLarge = TextStyle(
+        fontFamily = Roboto,
+        fontWeight = FontWeight.ExtraBold,
+        fontSize = 32.sp
+    ),
+    headlineMedium = TextStyle(
+        fontFamily = Rubik,
+        fontWeight = FontWeight.Bold,
+        fontSize = 24.sp
+    ),
+    titleMedium = TextStyle(
+        fontFamily = Inter,
+        fontWeight = FontWeight.Medium,
+        fontSize = 14.sp
+    ),
+    labelMedium = TextStyle(
+        fontFamily = Roboto,
         fontWeight = FontWeight.Normal,
-        fontSize = 16.sp,
-        lineHeight = 24.sp,
-        letterSpacing = 0.5.sp
+        fontSize = 14.sp
     )
-)
\ No newline at end of file
+)
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/app/src/main/res/drawable-night/shape.xml b/app/src/main/res/drawable-night/shape.xml
new file mode 100644
index 0000000..53da454
--- /dev/null
+++ b/app/src/main/res/drawable-night/shape.xml
@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="375dp"
+    android:height="375dp"
+    android:viewportWidth="360"
+    android:viewportHeight="375">
+    <path
+        android:pathData="M360,-127H0V366.75C1.45,361.27 4.44,356.26 8.69,352.35L159.19,213.96C170.67,203.41 188.33,203.41 199.81,213.96L350.31,352.35C356.48,358.03 360,366.04 360,374.43V-127Z"
+        android:fillColor="#1E293B"
+        android:fillType="evenOdd"/>
+</vector>
diff --git a/app/src/main/res/drawable/facebook.xml b/app/src/main/res/drawable/facebook.xml
new file mode 100644
index 0000000..06802a5
--- /dev/null
+++ b/app/src/main/res/drawable/facebook.xml
@@ -0,0 +1,28 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:aapt="http://schemas.android.com/aapt"
+    android:width="16dp"
+    android:height="16dp"
+    android:viewportWidth="16"
+    android:viewportHeight="16">
+  <group>
+    <clip-path
+        android:pathData="M0,0h16v16h-16z"/>
+    <path
+        android:pathData="M6.667,15.911C2.889,15.244 0,11.956 0,8C0,3.6 3.6,0 8,0C12.4,0 16,3.6 16,8C16,11.956 13.111,15.244 9.333,15.911L8.889,15.556H7.111L6.667,15.911Z">
+      <aapt:attr name="android:fillColor">
+        <gradient 
+            android:startX="8"
+            android:startY="15.446"
+            android:endX="8"
+            android:endY="0"
+            android:type="linear">
+          <item android:offset="0" android:color="#FF0062E0"/>
+          <item android:offset="1" android:color="#FF19AFFF"/>
+        </gradient>
+      </aapt:attr>
+    </path>
+    <path
+        android:pathData="M11.111,10.222L11.467,8H9.333V6.444C9.333,5.822 9.556,5.333 10.533,5.333H11.556V3.289C10.978,3.2 10.356,3.111 9.778,3.111C7.956,3.111 6.667,4.222 6.667,6.222V8H4.667V10.222H6.667V15.867C7.111,15.956 7.556,16 8,16C8.444,16 8.889,15.956 9.333,15.867V10.222H11.111Z"
+        android:fillColor="#ffffff"/>
+  </group>
+</vector>
diff --git a/app/src/main/res/drawable/google.xml b/app/src/main/res/drawable/google.xml
new file mode 100644
index 0000000..2bc7628
--- /dev/null
+++ b/app/src/main/res/drawable/google.xml
@@ -0,0 +1,18 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="16dp"
+    android:height="16dp"
+    android:viewportWidth="16"
+    android:viewportHeight="16">
+  <path
+      android:pathData="M14.537,6.694H14V6.667H8V9.333H11.768C11.218,10.886 9.741,12 8,12C5.791,12 4,10.209 4,8C4,5.791 5.791,4 8,4C9.02,4 9.947,4.385 10.654,5.013L12.539,3.127C11.349,2.018 9.756,1.333 8,1.333C4.318,1.333 1.333,4.318 1.333,8C1.333,11.682 4.318,14.667 8,14.667C11.682,14.667 14.667,11.682 14.667,8C14.667,7.553 14.621,7.117 14.537,6.694Z"
+      android:fillColor="#FFC107"/>
+  <path
+      android:pathData="M2.102,4.897L4.292,6.503C4.885,5.036 6.32,4 8,4C9.02,4 9.947,4.385 10.654,5.013L12.539,3.127C11.349,2.018 9.756,1.333 8,1.333C5.439,1.333 3.219,2.779 2.102,4.897Z"
+      android:fillColor="#FF3D00"/>
+  <path
+      android:pathData="M8,14.667C9.722,14.667 11.287,14.008 12.47,12.936L10.406,11.19C9.715,11.716 8.869,12.001 8,12C6.266,12 4.794,10.894 4.239,9.351L2.065,11.026C3.168,13.185 5.409,14.667 8,14.667Z"
+      android:fillColor="#4CAF50"/>
+  <path
+      android:pathData="M14.537,6.694H14V6.667H8V9.333H11.768C11.505,10.072 11.031,10.718 10.405,11.19L10.406,11.19L12.47,12.936C12.324,13.068 14.667,11.333 14.667,8C14.667,7.553 14.621,7.117 14.537,6.694Z"
+      android:fillColor="#1976D2"/>
+</vector>
diff --git a/app/src/main/res/drawable/logo.xml b/app/src/main/res/drawable/logo.xml
new file mode 100644
index 0000000..ec2bfc7
--- /dev/null
+++ b/app/src/main/res/drawable/logo.xml
@@ -0,0 +1,16 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="42dp"
+    android:height="42dp"
+    android:viewportWidth="42"
+    android:viewportHeight="42">
+  <group>
+    <clip-path
+        android:pathData="M0,0h42v42h-42z"/>
+    <path
+        android:pathData="M40.909,18.416L23.641,1.148C22.181,-0.312 19.819,-0.312 18.359,1.148L1.091,18.416C-0.369,19.876 -0.369,22.239 1.091,23.699L18.359,40.966C19.819,42.426 22.181,42.426 23.641,40.966L40.909,23.699C42.361,22.239 42.361,19.876 40.909,18.416V18.416ZM28.547,18.194H28.317V31.795C28.317,33.116 27.243,34.191 25.922,34.191H15.479C14.159,34.191 13.084,33.116 13.084,31.795V18.194H5.365L20.819,2.994L36.274,18.194H28.547Z"
+        android:fillColor="#000113"/>
+    <path
+        android:pathData="M30.975,15.414H22.427V30.401C22.427,31.549 21.492,32.484 20.344,32.484C19.195,32.484 18.26,31.549 18.26,30.401V15.414H10.557L13.839,11.862H27.694L30.975,15.414V15.414Z"
+        android:fillColor="#000113"/>
+  </group>
+</vector>
diff --git a/app/src/main/res/drawable/shape.xml b/app/src/main/res/drawable/shape.xml
new file mode 100644
index 0000000..0e116cf
--- /dev/null
+++ b/app/src/main/res/drawable/shape.xml
@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="375dp"
+    android:height="375dp"
+    android:viewportWidth="360"
+    android:viewportHeight="375">
+  <path
+      android:pathData="M360,-127H0V366.75C1.45,361.27 4.44,356.26 8.69,352.35L159.19,213.96C170.67,203.41 188.33,203.41 199.81,213.96L350.31,352.35C356.48,358.03 360,366.04 360,374.43V-127Z"
+      android:fillColor="#BFDBFE"
+      android:fillType="evenOdd"/>
+</vector>
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
index a256ffd..f6fc210 100644
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -1,3 +1,7 @@
 <resources>
     <string name="app_name">ComposeLoginScreen</string>
+    <string name="app_logo">App Logo</string>
+    <string name="the_tolet">The Tolet</string>
+    <string name="find_house">Find Your House</string>
+    <string name="login">Login</string>
 </resources>
\ No newline at end of file

From 2ec8ca7e1fd7cd2abeb41a1f9ad29f756cecff6b Mon Sep 17 00:00:00 2001
From: Mohammad nawas <mohammednawas8@gmail.com>
Date: Mon, 19 Jun 2023 13:21:37 +0300
Subject: [PATCH 2/3] Support All Screen Sizes

---
 .idea/deploymentTargetDropDown.xml            |  10 +-
 .idea/inspectionProfiles/Project_Default.xml  |  41 ++++++
 app/build.gradle                              |   3 +
 app/src/main/AndroidManifest.xml              |   1 +
 .../com/loc/composeloginscreen/LoginScreen.kt | 135 ++++++++++--------
 .../loc/composeloginscreen/MainActivity.kt    |   4 +-
 .../composeloginscreen/SocialMediaLogIn.kt    |   3 +-
 .../composeloginscreen/ui/theme/AppUtil.kt    |  26 ++++
 .../loc/composeloginscreen/ui/theme/Dimens.kt |  71 +++++++++
 .../loc/composeloginscreen/ui/theme/Theme.kt  |  63 +++++++-
 .../loc/composeloginscreen/ui/theme/Type.kt   |  95 +++++++++++-
 11 files changed, 379 insertions(+), 73 deletions(-)
 create mode 100644 .idea/inspectionProfiles/Project_Default.xml
 create mode 100644 app/src/main/java/com/loc/composeloginscreen/ui/theme/AppUtil.kt
 create mode 100644 app/src/main/java/com/loc/composeloginscreen/ui/theme/Dimens.kt

diff --git a/.idea/deploymentTargetDropDown.xml b/.idea/deploymentTargetDropDown.xml
index e554d65..9bd29ec 100644
--- a/.idea/deploymentTargetDropDown.xml
+++ b/.idea/deploymentTargetDropDown.xml
@@ -1,17 +1,17 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="deploymentTargetDropDown">
-    <targetSelectedWithDropDown>
+    <runningDeviceTargetSelectedWithDropDown>
       <Target>
-        <type value="QUICK_BOOT_TARGET" />
+        <type value="RUNNING_DEVICE_TARGET" />
         <deviceKey>
           <Key>
             <type value="VIRTUAL_DEVICE_PATH" />
-            <value value="C:\Users\mo\.android\avd\Pixel_6_Pro_API_30_1.avd" />
+            <value value="C:\Users\mo\.android\avd\Pixel_6_API_30.avd" />
           </Key>
         </deviceKey>
       </Target>
-    </targetSelectedWithDropDown>
-    <timeTargetWasSelectedWithDropDown value="2023-06-19T06:21:34.918157400Z" />
+    </runningDeviceTargetSelectedWithDropDown>
+    <timeTargetWasSelectedWithDropDown value="2023-06-19T10:18:51.748519600Z" />
   </component>
 </project>
\ No newline at end of file
diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
new file mode 100644
index 0000000..44ca2d9
--- /dev/null
+++ b/.idea/inspectionProfiles/Project_Default.xml
@@ -0,0 +1,41 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <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="PreviewDimensionRespectsLimit" enabled="true" level="WARNING" 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="PreviewMustBeTopLevelFunction" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="PreviewNeedsComposableAnnotation" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="PreviewNotSupportedInUnitTestFiles" 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>
\ No newline at end of file
diff --git a/app/build.gradle b/app/build.gradle
index 8993467..97b6de4 100644
--- a/app/build.gradle
+++ b/app/build.gradle
@@ -65,4 +65,7 @@ dependencies {
     debugImplementation 'androidx.compose.ui:ui-tooling'
     debugImplementation 'androidx.compose.ui:ui-test-manifest'
 
+    //WindowSizeClass
+    implementation "androidx.compose.material3:material3-window-size-class:1.1.0"
+
 }
\ No newline at end of file
diff --git a/app/src/main/AndroidManifest.xml b/app/src/main/AndroidManifest.xml
index ba635db..2a904e1 100644
--- a/app/src/main/AndroidManifest.xml
+++ b/app/src/main/AndroidManifest.xml
@@ -13,6 +13,7 @@
         android:theme="@style/Theme.ComposeLoginScreen"
         tools:targetApi="31">
         <activity
+            android:screenOrientation="portrait"
             android:name=".MainActivity"
             android:exported="true"
             android:label="@string/app_name"
diff --git a/app/src/main/java/com/loc/composeloginscreen/LoginScreen.kt b/app/src/main/java/com/loc/composeloginscreen/LoginScreen.kt
index f2fa523..06d1fa0 100644
--- a/app/src/main/java/com/loc/composeloginscreen/LoginScreen.kt
+++ b/app/src/main/java/com/loc/composeloginscreen/LoginScreen.kt
@@ -1,19 +1,24 @@
 package com.loc.composeloginscreen
 
+import android.content.res.Configuration
+import android.util.Log
 import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
 import androidx.compose.foundation.isSystemInDarkTheme
 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.fillMaxHeight
 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.rememberScrollState
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.Button
 import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.Icon
@@ -25,6 +30,7 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.SpanStyle
@@ -32,66 +38,79 @@ import androidx.compose.ui.text.buildAnnotatedString
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.withStyle
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
 import com.loc.composeloginscreen.ui.theme.Black
 import com.loc.composeloginscreen.ui.theme.BlueGray
 import com.loc.composeloginscreen.ui.theme.Roboto
+import com.loc.composeloginscreen.ui.theme.ScreenOrientation
+import com.loc.composeloginscreen.ui.theme.dimens
 
 @Composable
 fun LoginScreen() {
     Surface {
-        Column(modifier = Modifier.fillMaxSize()) {
-            TopSection()
-            Spacer(modifier = Modifier.height(36.dp))
-
-            Column(
-                modifier = Modifier
-                    .fillMaxSize()
-                    .padding(horizontal = 30.dp)
-            ) {
-                LoginSection()
-                Spacer(modifier = Modifier.height(30.dp))
-                SocialMediaSection()
-
-                val uiColor = if (isSystemInDarkTheme()) Color.White else Black
-                Box(modifier = Modifier
-                    .fillMaxHeight(fraction = 0.8f)
-                    .fillMaxWidth(),
-                    contentAlignment = Alignment.BottomCenter
-                ){
+        if (ScreenOrientation == Configuration.ORIENTATION_PORTRAIT){
+            PortraitLoginScreen()
+        }else{
+            PortraitLoginScreen()
+        }
+    }
+}
 
-                    Text(
-                        text = buildAnnotatedString {
-                            withStyle(
-                                style = SpanStyle(
-                                    color = Color(0xFF94A3B8),
-                                    fontSize = 14.sp,
-                                    fontFamily = Roboto,
-                                    fontWeight = FontWeight.Normal
-                                )
-                            ){
-                                append("Don't have account?")
-                            }
-                            withStyle(
-                                style = SpanStyle(
-                                    color = uiColor,
-                                    fontSize = 14.sp,
-                                    fontFamily = Roboto,
-                                    fontWeight = FontWeight.Medium
-                                )
-                            ){
-                                append(" ")
-                                append("Crete now")
-                            }
-                        }
-                    )
+@Composable
+private fun PortraitLoginScreen() {
+    Column(
+        modifier = Modifier
+            .fillMaxSize()
+            .verticalScroll(state = rememberScrollState())
+    ) {
+        TopSection()
+        Spacer(modifier = Modifier.height(MaterialTheme.dimens.medium2))
 
-                }
+        Column(
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(horizontal = MaterialTheme.dimens.medium1)
+        ) {
+            LoginSection()
+            Spacer(modifier = Modifier.height(MaterialTheme.dimens.medium1))
+            SocialMediaSection()
+        }
+        Spacer(modifier = Modifier.weight(0.8f))
+        CreateAccountSection()
+        Spacer(modifier = Modifier.weight(0.3f))
+    }
+}
 
+@Composable
+private fun ColumnScope.CreateAccountSection() {
+    val uiColor = if (isSystemInDarkTheme()) Color.White else Black
+    Text(
+        modifier = Modifier
+            .align(alignment = Alignment.CenterHorizontally),
+        text = buildAnnotatedString {
+            withStyle(
+                style = SpanStyle(
+                    color = Color(0xFF94A3B8),
+                    fontSize = MaterialTheme.typography.labelMedium.fontSize,
+                    fontFamily = Roboto,
+                    fontWeight = FontWeight.Normal
+                )
+            ) {
+                append("Don't have account?")
+            }
+            withStyle(
+                style = SpanStyle(
+                    color = uiColor,
+                    fontSize = MaterialTheme.typography.labelMedium.fontSize,
+                    fontFamily = Roboto,
+                    fontWeight = FontWeight.Medium
+                )
+            ) {
+                append(" ")
+                append("Crete now")
             }
         }
+    )
 
-    }
 }
 
 @Composable
@@ -101,7 +120,7 @@ private fun SocialMediaSection() {
             text = "Or continue with",
             style = MaterialTheme.typography.labelMedium.copy(color = Color(0xFF64748B))
         )
-        Spacer(modifier = Modifier.height(20.dp))
+        Spacer(modifier = Modifier.height(MaterialTheme.dimens.small3))
         Row(
             modifier = Modifier.fillMaxWidth(),
             verticalAlignment = Alignment.CenterVertically
@@ -113,7 +132,7 @@ private fun SocialMediaSection() {
             ) {
 
             }
-            Spacer(modifier = Modifier.width(20.dp))
+            Spacer(modifier = Modifier.width(MaterialTheme.dimens.small3))
             SocialMediaLogIn(
                 icon = R.drawable.facebook,
                 text = "Facebook",
@@ -128,17 +147,17 @@ private fun SocialMediaSection() {
 @Composable
 private fun LoginSection() {
     LoginTextField(label = "Email", trailing = "", modifier = Modifier.fillMaxWidth())
-    Spacer(modifier = Modifier.height(15.dp))
+    Spacer(modifier = Modifier.height(MaterialTheme.dimens.small2))
     LoginTextField(
         label = "Password",
         trailing = "Forgot?",
         modifier = Modifier.fillMaxWidth()
     )
-    Spacer(modifier = Modifier.height(20.dp))
+    Spacer(modifier = Modifier.height(MaterialTheme.dimens.small3))
     Button(
         modifier = Modifier
             .fillMaxWidth()
-            .height(40.dp),
+            .height(MaterialTheme.dimens.medium3),
         onClick = { /*TODO*/ },
         colors = ButtonDefaults.buttonColors(
             containerColor = if (isSystemInDarkTheme()) BlueGray else Black,
@@ -156,14 +175,14 @@ private fun LoginSection() {
 @Composable
 private fun TopSection() {
     val uiColor = if (isSystemInDarkTheme()) Color.White else Black
-
+    val screenHeight = LocalConfiguration.current.screenHeightDp
     Box(
         contentAlignment = Alignment.TopCenter
     ) {
         Image(
             modifier = Modifier
                 .fillMaxWidth()
-                .fillMaxHeight(fraction = 0.46f),
+                .height((screenHeight / 2.12).dp),
             painter = painterResource(id = R.drawable.shape),
             contentDescription = null,
             contentScale = ContentScale.FillBounds
@@ -171,17 +190,17 @@ private fun TopSection() {
 
 
         Row(
-            modifier = Modifier.padding(top = 80.dp),
+            modifier = Modifier.padding(top = (screenHeight / 9).dp),
             verticalAlignment = Alignment.CenterVertically
         ) {
 
             Icon(
-                modifier = Modifier.size(42.dp),
+                modifier = Modifier.size(MaterialTheme.dimens.logoSize),
                 painter = painterResource(id = R.drawable.logo),
                 contentDescription = stringResource(id = R.string.app_logo),
                 tint = uiColor
             )
-            Spacer(modifier = Modifier.width(15.dp))
+            Spacer(modifier = Modifier.width(MaterialTheme.dimens.small2))
             Column {
                 Text(
                     text = stringResource(id = R.string.the_tolet),
diff --git a/app/src/main/java/com/loc/composeloginscreen/MainActivity.kt b/app/src/main/java/com/loc/composeloginscreen/MainActivity.kt
index fd6d3d0..924e4be 100644
--- a/app/src/main/java/com/loc/composeloginscreen/MainActivity.kt
+++ b/app/src/main/java/com/loc/composeloginscreen/MainActivity.kt
@@ -1,6 +1,7 @@
 package com.loc.composeloginscreen
 
 import android.os.Bundle
+import android.util.Log
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
 import androidx.compose.foundation.layout.fillMaxSize
@@ -9,6 +10,7 @@ import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.tooling.preview.Preview
 import com.loc.composeloginscreen.ui.theme.ComposeLoginScreenTheme
 
@@ -17,7 +19,7 @@ class MainActivity : ComponentActivity() {
         super.onCreate(savedInstanceState)
         setContent {
             ComposeLoginScreenTheme {
-                    LoginScreen()
+                LoginScreen()
             }
         }
     }
diff --git a/app/src/main/java/com/loc/composeloginscreen/SocialMediaLogIn.kt b/app/src/main/java/com/loc/composeloginscreen/SocialMediaLogIn.kt
index e3b355a..1ef86e7 100644
--- a/app/src/main/java/com/loc/composeloginscreen/SocialMediaLogIn.kt
+++ b/app/src/main/java/com/loc/composeloginscreen/SocialMediaLogIn.kt
@@ -26,6 +26,7 @@ import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.unit.dp
 import com.loc.composeloginscreen.ui.theme.BlueGray
 import com.loc.composeloginscreen.ui.theme.LightBlueWhite
+import com.loc.composeloginscreen.ui.theme.dimens
 
 @Composable
 fun SocialMediaLogIn(
@@ -40,7 +41,7 @@ fun SocialMediaLogIn(
             .clip(RoundedCornerShape(4.dp))
             .socialMedia()
             .clickable { onClick() }
-            .height(40.dp),
+            .height(MaterialTheme.dimens.buttonHeight),
         horizontalArrangement = Arrangement.Center,
         verticalAlignment = Alignment.CenterVertically
     ) {
diff --git a/app/src/main/java/com/loc/composeloginscreen/ui/theme/AppUtil.kt b/app/src/main/java/com/loc/composeloginscreen/ui/theme/AppUtil.kt
new file mode 100644
index 0000000..03f9ee9
--- /dev/null
+++ b/app/src/main/java/com/loc/composeloginscreen/ui/theme/AppUtil.kt
@@ -0,0 +1,26 @@
+package com.loc.composeloginscreen.ui.theme
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.compositionLocalOf
+import androidx.compose.runtime.remember
+import androidx.compose.ui.platform.LocalConfiguration
+
+@Composable
+fun ProvideAppUtils(
+    appDimens: Dimens,
+    content: @Composable () -> Unit,
+) {
+    val appDimens = remember { appDimens }
+    CompositionLocalProvider(LocalAppDimens provides appDimens) {
+        content()
+    }
+}
+
+val LocalAppDimens = compositionLocalOf {
+    CompactDimens
+}
+
+val ScreenOrientation
+    @Composable
+    get() = LocalConfiguration.current.orientation
\ No newline at end of file
diff --git a/app/src/main/java/com/loc/composeloginscreen/ui/theme/Dimens.kt b/app/src/main/java/com/loc/composeloginscreen/ui/theme/Dimens.kt
new file mode 100644
index 0000000..3e6cc4b
--- /dev/null
+++ b/app/src/main/java/com/loc/composeloginscreen/ui/theme/Dimens.kt
@@ -0,0 +1,71 @@
+package com.loc.composeloginscreen.ui.theme
+
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+
+data class Dimens(
+    val extraSmall: Dp = 0.dp,
+    val small1: Dp = 0.dp,
+    val small2: Dp = 0.dp,
+    val small3: Dp = 0.dp,
+    val medium1: Dp = 0.dp,
+    val medium2: Dp = 0.dp,
+    val medium3: Dp = 0.dp,
+    val large: Dp = 0.dp,
+    val buttonHeight: Dp = 40.dp,
+    val logoSize: Dp = 42.dp
+)
+
+val CompactSmallDimens = Dimens(
+    small1 = 6.dp,
+    small2 = 5.dp,
+    small3 = 8.dp,
+    medium1 = 15.dp,
+    medium2 = 26.dp,
+    medium3 = 30.dp,
+    large = 45.dp,
+    buttonHeight = 30.dp,
+    logoSize = 36.dp
+)
+
+val CompactMediumDimens = Dimens(
+    small1 = 8.dp,
+    small2 = 13.dp,
+    small3 = 17.dp,
+    medium1 = 25.dp,
+    medium2 = 30.dp,
+    medium3 = 35.dp,
+    large = 65.dp
+)
+
+val CompactDimens = Dimens(
+    small1 = 10.dp,
+    small2 = 15.dp,
+    small3 = 20.dp,
+    medium1 = 30.dp,
+    medium2 = 36.dp,
+    medium3 = 40.dp,
+    large = 80.dp
+)
+
+val MediumDimens = Dimens(
+    small1 = 10.dp,
+    small2 = 15.dp,
+    small3 = 20.dp,
+    medium1 = 30.dp,
+    medium2 = 36.dp,
+    medium3 = 40.dp,
+    large = 110.dp,
+    logoSize = 55.dp
+)
+
+val ExpandedDimens = Dimens(
+    small1 = 15.dp,
+    small2 = 20.dp,
+    small3 = 25.dp,
+    medium1 = 35.dp,
+    medium2 = 30.dp,
+    medium3 = 45.dp,
+    large = 130.dp,
+    logoSize = 72.dp
+)
diff --git a/app/src/main/java/com/loc/composeloginscreen/ui/theme/Theme.kt b/app/src/main/java/com/loc/composeloginscreen/ui/theme/Theme.kt
index 4ebf299..fb57774 100644
--- a/app/src/main/java/com/loc/composeloginscreen/ui/theme/Theme.kt
+++ b/app/src/main/java/com/loc/composeloginscreen/ui/theme/Theme.kt
@@ -8,13 +8,18 @@ import androidx.compose.material3.darkColorScheme
 import androidx.compose.material3.dynamicDarkColorScheme
 import androidx.compose.material3.dynamicLightColorScheme
 import androidx.compose.material3.lightColorScheme
+import androidx.compose.material3.windowsizeclass.ExperimentalMaterial3WindowSizeClassApi
+import androidx.compose.material3.windowsizeclass.WindowWidthSizeClass
+import androidx.compose.material3.windowsizeclass.calculateWindowSizeClass
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.SideEffect
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.toArgb
+import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalView
 import androidx.core.view.WindowCompat
+import com.loc.composeloginscreen.MainActivity
 
 private val DarkColorScheme = darkColorScheme(
     primary = BlueGray,
@@ -26,12 +31,14 @@ private val LightColorScheme = lightColorScheme(
     surface = Color.White
 )
 
+@OptIn(ExperimentalMaterial3WindowSizeClassApi::class)
 @Composable
 fun ComposeLoginScreenTheme(
     darkTheme: Boolean = isSystemInDarkTheme(),
     // Dynamic color is available on Android 12+
     dynamicColor: Boolean = true,
-    content: @Composable () -> Unit
+    activity: Activity = LocalContext.current as MainActivity,
+    content: @Composable () -> Unit,
 ) {
     val colorScheme = when {
         dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
@@ -51,9 +58,51 @@ fun ComposeLoginScreenTheme(
         }
     }
 
-    MaterialTheme(
-        colorScheme = colorScheme,
-        typography = Typography,
-        content = content
-    )
-}
\ No newline at end of file
+    val window = calculateWindowSizeClass(activity = activity)
+    val config = LocalConfiguration.current
+
+    var typography = CompactTypography
+    var appDimens = CompactDimens
+
+    when (window.widthSizeClass) {
+        WindowWidthSizeClass.Compact -> {
+            if (config.screenWidthDp <= 360) {
+                appDimens = CompactSmallDimens
+                typography = CompactSmallTypography
+            } else if (config.screenWidthDp < 599) {
+                appDimens = CompactMediumDimens
+                typography = CompactMediumTypography
+            } else {
+                appDimens = CompactDimens
+                typography = CompactTypography
+            }
+        }
+
+        WindowWidthSizeClass.Medium -> {
+            appDimens = MediumDimens
+            typography = CompactTypography
+        }
+
+        WindowWidthSizeClass.Expanded -> {
+            appDimens = ExpandedDimens
+            typography = ExpandedTypography
+        }
+
+        else -> {
+            appDimens = ExpandedDimens
+            typography = ExpandedTypography
+        }
+    }
+
+    ProvideAppUtils(appDimens = appDimens) {
+        MaterialTheme(
+            colorScheme = colorScheme,
+            typography = typography,
+            content = content
+        )
+    }
+}
+
+val MaterialTheme.dimens
+    @Composable
+    get() = LocalAppDimens.current
\ No newline at end of file
diff --git a/app/src/main/java/com/loc/composeloginscreen/ui/theme/Type.kt b/app/src/main/java/com/loc/composeloginscreen/ui/theme/Type.kt
index ec4cd27..13fcf53 100644
--- a/app/src/main/java/com/loc/composeloginscreen/ui/theme/Type.kt
+++ b/app/src/main/java/com/loc/composeloginscreen/ui/theme/Type.kt
@@ -29,7 +29,7 @@ val Roboto = FontFamily(
 )
 
 // Set of Material typography styles to start with
-val Typography = Typography(
+val CompactTypography = Typography(
     headlineLarge = TextStyle(
         fontFamily = Roboto,
         fontWeight = FontWeight.ExtraBold,
@@ -52,6 +52,99 @@ val Typography = Typography(
     )
 )
 
+val CompactMediumTypography = Typography(
+    headlineLarge = TextStyle(
+        fontFamily = Roboto,
+        fontWeight = FontWeight.ExtraBold,
+        fontSize = 28.sp
+    ),
+    headlineMedium = TextStyle(
+        fontFamily = Rubik,
+        fontWeight = FontWeight.Bold,
+        fontSize = 22.sp
+    ),
+    titleMedium = TextStyle(
+        fontFamily = Inter,
+        fontWeight = FontWeight.Medium,
+        fontSize = 14.sp
+    ),
+    labelMedium = TextStyle(
+        fontFamily = Roboto,
+        fontWeight = FontWeight.Normal,
+        fontSize = 14.sp
+    )
+)
+
+val CompactSmallTypography = Typography(
+    headlineLarge = TextStyle(
+        fontFamily = Roboto,
+        fontWeight = FontWeight.ExtraBold,
+        fontSize = 22.sp
+    ),
+    headlineMedium = TextStyle(
+        fontFamily = Rubik,
+        fontWeight = FontWeight.Bold,
+        fontSize = 16.sp
+    ),
+    titleMedium = TextStyle(
+        fontFamily = Inter,
+        fontWeight = FontWeight.Medium,
+        fontSize = 10.sp
+    ),
+    labelMedium = TextStyle(
+        fontFamily = Roboto,
+        fontWeight = FontWeight.Normal,
+        fontSize = 10.sp
+    )
+)
+
+val MediumTypography = Typography(
+    headlineLarge = TextStyle(
+        fontFamily = Roboto,
+        fontWeight = FontWeight.ExtraBold,
+        fontSize = 38.sp
+    ),
+    headlineMedium = TextStyle(
+        fontFamily = Rubik,
+        fontWeight = FontWeight.Bold,
+        fontSize = 30.sp
+    ),
+    titleMedium = TextStyle(
+        fontFamily = Inter,
+        fontWeight = FontWeight.Medium,
+        fontSize = 16.sp
+    ),
+    labelMedium = TextStyle(
+        fontFamily = Roboto,
+        fontWeight = FontWeight.Normal,
+        fontSize = 16.sp
+    )
+)
+
+val ExpandedTypography = Typography(
+    headlineLarge = TextStyle(
+        fontFamily = Roboto,
+        fontWeight = FontWeight.ExtraBold,
+        fontSize = 42.sp
+    ),
+    headlineMedium = TextStyle(
+        fontFamily = Rubik,
+        fontWeight = FontWeight.Bold,
+        fontSize = 34.sp
+    ),
+    titleMedium = TextStyle(
+        fontFamily = Inter,
+        fontWeight = FontWeight.Medium,
+        fontSize = 18.sp
+    ),
+    labelMedium = TextStyle(
+        fontFamily = Roboto,
+        fontWeight = FontWeight.Normal,
+        fontSize = 18.sp
+    )
+)
+
+
 
 
 

From c5c1bdf212aa9297d2f4e220548f59eab73684dc Mon Sep 17 00:00:00 2001
From: Mohammad nawas <mohammednawas8@gmail.com>
Date: Mon, 19 Jun 2023 15:16:06 +0300
Subject: [PATCH 3/3] Init

---
 .idea/deploymentTargetDropDown.xml           | 17 -----------------
 .idea/inspectionProfiles/Project_Default.xml |  9 ---------
 2 files changed, 26 deletions(-)
 delete mode 100644 .idea/deploymentTargetDropDown.xml

diff --git a/.idea/deploymentTargetDropDown.xml b/.idea/deploymentTargetDropDown.xml
deleted file mode 100644
index 9bd29ec..0000000
--- a/.idea/deploymentTargetDropDown.xml
+++ /dev/null
@@ -1,17 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="deploymentTargetDropDown">
-    <runningDeviceTargetSelectedWithDropDown>
-      <Target>
-        <type value="RUNNING_DEVICE_TARGET" />
-        <deviceKey>
-          <Key>
-            <type value="VIRTUAL_DEVICE_PATH" />
-            <value value="C:\Users\mo\.android\avd\Pixel_6_API_30.avd" />
-          </Key>
-        </deviceKey>
-      </Target>
-    </runningDeviceTargetSelectedWithDropDown>
-    <timeTargetWasSelectedWithDropDown value="2023-06-19T10:18:51.748519600Z" />
-  </component>
-</project>
\ No newline at end of file
diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
index 44ca2d9..103e00c 100644
--- a/.idea/inspectionProfiles/Project_Default.xml
+++ b/.idea/inspectionProfiles/Project_Default.xml
@@ -3,39 +3,30 @@
     <option name="myName" value="Project Default" />
     <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="PreviewDimensionRespectsLimit" enabled="true" level="WARNING" 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="PreviewMustBeTopLevelFunction" enabled="true" level="ERROR" enabled_by_default="true">
       <option name="composableFile" value="true" />
-      <option name="previewFile" value="true" />
     </inspection_tool>
     <inspection_tool class="PreviewNeedsComposableAnnotation" enabled="true" level="ERROR" enabled_by_default="true">
       <option name="composableFile" value="true" />
-      <option name="previewFile" value="true" />
     </inspection_tool>
     <inspection_tool class="PreviewNotSupportedInUnitTestFiles" 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>
\ No newline at end of file