Merge pull request #16 from snuhcs-course/frontend_design

applying design pattern
snuhcs-course · Nov 9, 2023 · 3451dba · 3451dba
2 parents 915b543 + 11168e1
commit 3451dba
Show file tree

Hide file tree

Showing 30 changed files with 248 additions and 248 deletions.
diff --git a/frontend/app/build.gradle.kts b/frontend/app/build.gradle.kts
@@ -21,6 +21,12 @@ android {
         vectorDrawables {
             useSupportLibrary = true
         }
+        configurations.all {
+            resolutionStrategy {
+                force("androidx.emoji2:emoji2-views-helper:1.3.0")
+                force("androidx.emoji2:emoji2:1.3.0")
+            }
+        }
     }
 
     buildTypes {
@@ -67,6 +73,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")
@@ -115,4 +122,7 @@ dependencies {
     androidTestImplementation ("androidx.compose.ui:ui-test-junit4:1.7.0")
     // coil: image upload
     implementation ("io.coil-kt:coil-compose:1.4.0")
+
+    //design system bar
+    implementation("com.google.accompanist:accompanist-systemuicontroller:0.32.0")
 }
diff --git a/frontend/app/src/main/AndroidManifest.xml b/frontend/app/src/main/AndroidManifest.xml
@@ -19,7 +19,7 @@
         android:networkSecurityConfig="@xml/network_security_config">
         <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/ic_launcher-playstore.png b/frontend/app/src/main/ic_launcher-playstore.png
diff --git a/frontend/app/src/main/java/com/team13/fooriend/MainActivity.kt b/frontend/app/src/main/java/com/team13/fooriend/MainActivity.kt
@@ -3,20 +3,26 @@ package com.team13.fooriend
 import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
+import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.DisposableEffect
+import androidx.compose.runtime.SideEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
+import com.google.accompanist.systemuicontroller.rememberSystemUiController
 import com.team13.fooriend.ui.FooriendApp
 import com.team13.fooriend.ui.LocationPermissionScreen
 import com.team13.fooriend.ui.theme.FooriendTheme
 import com.team13.fooriend.ui.util.checkForPermission
-
-
+import com.team13.fooriend.ui.util.SetStatusBarColor
+import androidx.compose.ui.graphics.Color
+import com.team13.fooriend.ui.theme.CIvory
 
 class MainActivity : ComponentActivity() {
 
@@ -25,9 +31,10 @@ class MainActivity : ComponentActivity() {
 
         setContent {
             FooriendTheme {
+                SetStatusBarColor(color = Color.Transparent)
                 Surface(
                     modifier = Modifier.fillMaxSize(),
-                    color = MaterialTheme.colorScheme.background
+                    color = Color.White
                 ) {
                     var hasLocationPermission by remember {
                         mutableStateOf(checkForPermission(this))

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,38 @@
 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.foundation.shape.RoundedCornerShape
 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.BaseGreen
+import com.team13.fooriend.ui.theme.BaseGrey
+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 +45,77 @@ 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 Color.Black//CDarkGreen
+
     Column(
-        modifier = Modifier.fillMaxSize(),
+        modifier = Modifier
+            .fillMaxSize()
+            .background(BaseGreen),//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(
+                Color.Black,
+                focusedIndicatorColor = Color.Transparent,
+                unfocusedIndicatorColor = Color.Transparent,
+//                focusedTextColor = Color.DarkGray,
+                focusedContainerColor = BaseGrey,//CLightGreen,
+                unfocusedContainerColor = BaseGrey,//CIvory,
+            ),
+            placeholder = { Text("ID", fontWeight = FontWeight.SemiBold)},
+            shape = RoundedCornerShape(15.dp),
+        )
+        Spacer(modifier = Modifier.height(15.dp))
+        TextField(
+            value = password,
+            onValueChange = passwordValue,
+            colors = TextFieldDefaults.colors(
+                Color.Black,
+                focusedIndicatorColor = Color.Transparent,
+                unfocusedIndicatorColor = Color.Transparent,
+//                focusedTextColor = Color.DarkGray,
+                focusedContainerColor = BaseGrey,//CLightGreen,
+                unfocusedContainerColor = BaseGrey,//CIvory,
+            ),
+            placeholder = { Text("PASSWORD", fontWeight = FontWeight.SemiBold)},
+            shape = RoundedCornerShape(15.dp),
+        )
+        Spacer(modifier = Modifier.height(20.dp))
+        Button(
+            onClick = { if(id.isNotEmpty() && password.isNotEmpty()){
                 onClick()
-            }
-        }) {
-            Text("Log In")
+            } },
+            interactionSource = interactionSource,
+            colors = ButtonDefaults.buttonColors(
+                BaseGreen,//CMidGreen,
+                contentColor = color )) {
+            Text(
+                "LOGIN",
+                fontSize = 30.sp,
+                fontWeight = FontWeight.Bold
+            )
         }
+        Spacer(modifier = Modifier.height(20.dp))
+        Text("Don't have a Fooriend account?")
         Button(onClick = {
             onSignUpClick()
-        }) {
-            Text("Sign Up")
+        },
+            colors = ButtonDefaults.buttonColors(
+                Color.Transparent,//CMidGreen,
+                contentColor = Color.Black//CDarkGreen
+                         )) {
+            Text(
+                "SIGN UP",
+                fontSize = 25.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,48 @@
 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.shape.RoundedCornerShape
+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.BaseGreen
+import com.team13.fooriend.ui.theme.BaseGrey
+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 +53,82 @@ 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 Color.Black//CDarkGreen
+//    val (nickname, nicknameValue) = remember { mutableStateOf("") }
+//    val (phoneNumber, phoneNumberValue) = remember { mutableStateOf("") }
 
     Column(
-        modifier = Modifier.fillMaxSize(),
+        modifier = Modifier
+            .fillMaxSize()
+            .background(BaseGreen),//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(
+                Color.Black,
+                focusedIndicatorColor = Color.Transparent,
+                unfocusedIndicatorColor = Color.Transparent,
+//                focusedTextColor = Color.DarkGray,
+                focusedContainerColor = BaseGrey,//CLightGreen,
+                unfocusedContainerColor = BaseGrey,//CIvory,
+            ),
+            placeholder = { Text("ID", fontWeight = FontWeight.SemiBold)},
+            shape = RoundedCornerShape(15.dp),
+        )
+        Spacer(modifier = Modifier.height(15.dp))
+        TextField(
+            value = password,
+            onValueChange = passwordValue,
+            colors = TextFieldDefaults.colors(
+                Color.Black,
+                focusedIndicatorColor = Color.Transparent,
+                unfocusedIndicatorColor = Color.Transparent,
+//                focusedTextColor = Color.DarkGray,
+                focusedContainerColor = BaseGrey,//CLightGreen,
+                unfocusedContainerColor = BaseGrey,//CIvory,
+            ),
+            placeholder = { Text("PASSWORD", fontWeight = FontWeight.SemiBold)},
+            shape = RoundedCornerShape(15.dp),
+        )
+        Spacer(modifier = Modifier.height(15.dp))
+        TextField(
+            value = passwordCheck,
+            onValueChange = passwordCheckValue,
+            colors = TextFieldDefaults.colors(
+                Color.Black,
+                focusedIndicatorColor = Color.Transparent,
+                unfocusedIndicatorColor = Color.Transparent,
+//                focusedTextColor = Color.DarkGray,
+                focusedContainerColor = BaseGrey,//CLightGreen,
+                unfocusedContainerColor = BaseGrey,//CIvory,
+            ),
+            placeholder = { Text("PASSWORD CONFIRM", fontWeight = FontWeight.SemiBold)},
+            shape = RoundedCornerShape(15.dp),
+        )
+//        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(
+                Color.Transparent,//CMidGreen,
+                contentColor = color )) {
+            Text(
+                "SIGN UP",
+                fontSize = 30.sp,
+                fontWeight = FontWeight.Bold
+                )
         }
     }
 }