added basic design for login, signup, permission

snuhcs-course · Nov 8, 2023 · 38ad384 · 38ad384
1 parent e083b1d
commit 38ad384
Show file tree

Hide file tree

Showing 7 changed files with 175 additions and 40 deletions.
diff --git a/frontend/app/build.gradle.kts b/frontend/app/build.gradle.kts
@@ -67,6 +67,7 @@ dependencies {
 
     // Material design 3
     implementation("androidx.compose.material3:material3:1.1.2")
+    implementation("androidx.compose.material3:material3-window-size-class:1.1.2")
 
     // Extended Icons
     implementation("androidx.compose.material:material-icons-extended")

diff --git a/frontend/app/src/main/AndroidManifest.xml b/frontend/app/src/main/AndroidManifest.xml
@@ -18,7 +18,7 @@
         tools:targetApi="31">
         <meta-data
             android:name="com.google.android.geo.API_KEY"
-            android:value="${API_KEY}"/>
+            android:value="AIzaSyDV4YwwZmJp1PHNO4DSp_BdgY4qCDQzKH0"/>
         <activity
             android:name=".MainActivity"
             android:exported="true"

diff --git a/frontend/app/src/main/java/com/team13/fooriend/ui/LocationPermissionScreen.kt b/frontend/app/src/main/java/com/team13/fooriend/ui/LocationPermissionScreen.kt
@@ -10,14 +10,18 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+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.graphics.Color
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import com.team13.fooriend.ui.theme.CMidGreen
 
 @Composable
 fun LocationPermissionScreen(
@@ -60,7 +64,12 @@ fun LocationPermissionScreen(
                         Manifest.permission.ACCESS_COARSE_LOCATION,
                     )
                 )
-            }
+            },
+            colors = ButtonDefaults.buttonColors(
+                CMidGreen,
+                contentColor = MaterialTheme.colorScheme.background
+            )
+
         ) {
             Text(text = "Grant Location Permission")
         }

diff --git a/frontend/app/src/main/java/com/team13/fooriend/ui/screen/login/LogInScreen.kt b/frontend/app/src/main/java/com/team13/fooriend/ui/screen/login/LogInScreen.kt
@@ -1,21 +1,35 @@
 package com.team13.fooriend.ui.screen.login
 
+import androidx.compose.foundation.background
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.interaction.collectIsPressedAsState
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.height
 import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextField
+import androidx.compose.material3.TextFieldDefaults
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.team13.fooriend.ui.theme.CDarkGreen
+import com.team13.fooriend.ui.theme.CIvory
+import com.team13.fooriend.ui.theme.CLightGreen
+import com.team13.fooriend.ui.theme.CMidGreen
+import com.team13.fooriend.ui.theme.CRed
 
 
 @OptIn(ExperimentalMaterial3Api::class)
@@ -28,26 +42,67 @@ fun LogInScreen(
     val (id, idValue) = remember { mutableStateOf("") }
     val (password, passwordValue) = remember { mutableStateOf("") }
 
+    val interactionSource = remember { MutableInteractionSource() }
+    val isPressed by interactionSource.collectIsPressedAsState()
+    val color = if (isPressed) CRed else CDarkGreen
+
     Column(
-        modifier = Modifier.fillMaxSize(),
+        modifier = Modifier
+            .fillMaxSize()
+            .background(CMidGreen),
         verticalArrangement = Arrangement.Center,
         horizontalAlignment = Alignment.CenterHorizontally,
     ){
-        Text(text = "Log In Screen")
+        //Text(text = "Log In Screen")
         Spacer(modifier = Modifier.height(20.dp))
-        TextField(value = id, onValueChange = idValue)
-        TextField(value = password, onValueChange = passwordValue)
-        Button(onClick = {
-            if(id.isNotEmpty() && password.isNotEmpty()){
+        TextField(
+            value = id,
+            onValueChange = idValue,
+            colors = TextFieldDefaults.colors(
+                focusedTextColor = Color.DarkGray,
+                focusedContainerColor = CLightGreen,
+                unfocusedContainerColor = CIvory,
+            ),
+            placeholder = { Text("ID")}
+        )
+        Spacer(modifier = Modifier.height(15.dp))
+        TextField(
+            value = password,
+            onValueChange = passwordValue,
+            colors = TextFieldDefaults.colors(
+                focusedTextColor = Color.DarkGray,
+                focusedContainerColor = CLightGreen,
+                unfocusedContainerColor = CIvory,
+            ),
+            placeholder = { Text("PASSWORD")}
+        )
+        Spacer(modifier = Modifier.height(20.dp))
+        Button(
+            onClick = { if(id.isNotEmpty() && password.isNotEmpty()){
                 onClick()
-            }
-        }) {
-            Text("Log In")
+            } },
+            interactionSource = interactionSource,
+            colors = ButtonDefaults.buttonColors(
+                CMidGreen,
+                contentColor = color )) {
+            Text(
+                "LOGIN",
+                fontSize = 30.sp,
+                fontWeight = FontWeight.Bold
+            )
         }
+        Spacer(modifier = Modifier.height(20.dp))
         Button(onClick = {
             onSignUpClick()
-        }) {
-            Text("Sign Up")
+        },
+            colors = ButtonDefaults.buttonColors(
+                CMidGreen,
+                contentColor = CDarkGreen )) {
+            Text(
+                "SIGN UP",
+                fontSize = 30.sp,
+                fontWeight = FontWeight.Bold
+            )
         }
     }
 }

diff --git a/frontend/app/src/main/java/com/team13/fooriend/ui/screen/signup/SignUpScreen.kt b/frontend/app/src/main/java/com/team13/fooriend/ui/screen/signup/SignUpScreen.kt
@@ -1,21 +1,45 @@
 package com.team13.fooriend.ui.screen.signup
 
+import androidx.compose.animation.expandVertically
+import androidx.compose.foundation.background
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.interaction.collectIsPressedAsState
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.text.KeyboardActions
+import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextField
+import androidx.compose.material3.TextFieldDefaults
+import androidx.compose.material3.contentColorFor
+import androidx.compose.material3.surfaceColorAtElevation
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalSoftwareKeyboardController
+import androidx.compose.ui.semantics.SemanticsProperties.ImeAction
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.team13.fooriend.ui.theme.CDarkGreen
+import com.team13.fooriend.ui.theme.CIvory
+import com.team13.fooriend.ui.theme.CLightGreen
+import com.team13.fooriend.ui.theme.CMidGreen
+import com.team13.fooriend.ui.theme.CRed
+import java.time.format.TextStyle
 
 
 @OptIn(ExperimentalMaterial3Api::class)
@@ -26,25 +50,70 @@ fun SignUpScreen(
     val (id, idValue) = remember { mutableStateOf("") }
     val (password, passwordValue) = remember { mutableStateOf("") }
     val (passwordCheck, passwordCheckValue) = remember { mutableStateOf("") }
-    val (nickname, nicknameValue) = remember { mutableStateOf("") }
-    val (phoneNumber, phoneNumberValue) = remember { mutableStateOf("") }
+
+    val interactionSource = remember { MutableInteractionSource() }
+    val isPressed by interactionSource.collectIsPressedAsState()
+    val color = if (isPressed) CRed else CDarkGreen
+//    val (nickname, nicknameValue) = remember { mutableStateOf("") }
+//    val (phoneNumber, phoneNumberValue) = remember { mutableStateOf("") }
 
     Column(
-        modifier = Modifier.fillMaxSize(),
+        modifier = Modifier
+            .fillMaxSize()
+            .background(CMidGreen),
         verticalArrangement = Arrangement.Center,
         horizontalAlignment = Alignment.CenterHorizontally,
     ){
-        Text(text = "Sign Up Page")
+        //Text(text = "Sign Up Page")
+        Spacer(modifier = Modifier.height(20.dp))
+        //val containerColor = FilledTextFieldTokens.ContainerColor.toColor()
+        TextField(
+            value = id,
+            onValueChange = idValue,
+            colors = TextFieldDefaults.colors(
+                focusedTextColor = Color.DarkGray,
+                focusedContainerColor = CLightGreen,
+                unfocusedContainerColor = CIvory,
+            ),
+            placeholder = { Text("ID")},
+        )
+        Spacer(modifier = Modifier.height(15.dp))
+        TextField(
+            value = password,
+            onValueChange = passwordValue,
+            colors = TextFieldDefaults.colors(
+                focusedTextColor = Color.DarkGray,
+                focusedContainerColor = CLightGreen,
+                unfocusedContainerColor = CIvory,
+            ),
+            placeholder = { Text("PASSWORD")}
+        )
+        Spacer(modifier = Modifier.height(15.dp))
+        TextField(
+            value = passwordCheck,
+            onValueChange = passwordCheckValue,
+            colors = TextFieldDefaults.colors(
+                focusedTextColor = Color.DarkGray,
+                focusedContainerColor = CLightGreen,
+                unfocusedContainerColor = CIvory,
+            ),
+            placeholder = { Text("PASSWORD CONFIRM")},
+        )
+        TODO("keyboard hide")
         Spacer(modifier = Modifier.height(20.dp))
-        TextField(value = id, onValueChange = idValue)
-        TextField(value = password, onValueChange = passwordValue)
-        TextField(value = passwordCheck, onValueChange = passwordCheckValue)
-        TextField(value = nickname, onValueChange = nicknameValue)
-        TextField(value = phoneNumber, onValueChange = phoneNumberValue)
-        Button(onClick = {
-            onSignUpClick()
-        }) {
-            Text("Sign Up")
+//        TextField(value = nickname, onValueChange = nicknameValue)
+//        TextField(value = phoneNumber, onValueChange = phoneNumberValue)
+        Button(
+            onClick = { onSignUpClick() },
+            interactionSource = interactionSource,
+            colors = ButtonDefaults.buttonColors(
+                CMidGreen,
+                contentColor = color )) {
+            Text(
+                "SIGN UP",
+                fontSize = 30.sp,
+                fontWeight = FontWeight.Bold
+                )
         }
     }
 }

diff --git a/frontend/app/src/main/java/com/team13/fooriend/ui/theme/Color.kt b/frontend/app/src/main/java/com/team13/fooriend/ui/theme/Color.kt
@@ -2,10 +2,8 @@ package com.team13.fooriend.ui.theme
 
 import androidx.compose.ui.graphics.Color
 
-val Purple80 = Color(0xFFD0BCFF)
-val PurpleGrey80 = Color(0xFFCCC2DC)
-val Pink80 = Color(0xFFEFB8C8)
-
-val Purple40 = Color(0xFF6650a4)
-val PurpleGrey40 = Color(0xFF625b71)
-val Pink40 = Color(0xFF7D5260)
+val CDarkGreen = Color(0xFF386641)
+val CMidGreen = Color(0xFF6a994e)
+val CLightGreen = Color(0xFFa7c957)
+val CIvory = Color(0xFFf2e8cf)
+val CRed = Color(0xFFbc4749)
diff --git a/frontend/app/src/main/java/com/team13/fooriend/ui/theme/Theme.kt b/frontend/app/src/main/java/com/team13/fooriend/ui/theme/Theme.kt
@@ -16,16 +16,19 @@ import androidx.compose.ui.platform.LocalView
 import androidx.core.view.WindowCompat
 
 private val DarkColorScheme = darkColorScheme(
-    primary = Purple80,
-    secondary = PurpleGrey80,
-    tertiary = Pink80
+    primary = CMidGreen,
+    secondary = CDarkGreen,
+    tertiary = CLightGreen,
+    background = CIvory,
+    surface = CRed
 )
 
 private val LightColorScheme = lightColorScheme(
-    primary = Purple40,
-    secondary = PurpleGrey40,
-    tertiary = Pink40
-
+    primary = CMidGreen,
+    secondary = CDarkGreen,
+    tertiary = CLightGreen,
+    background = CIvory,
+    surface = CRed
     /* Other default colors to override
     background = Color(0xFFFFFBFE),
     surface = Color(0xFFFFFBFE),