add design elements-first pages

snuhcs-course · Nov 8, 2023 · 11168e1 · 11168e1
1 parent a8c5926
commit 11168e1
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 30 deletions.
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
@@ -8,6 +8,7 @@ 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
@@ -25,6 +26,8 @@ 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
@@ -44,12 +47,12 @@ fun LogInScreen(
 
     val interactionSource = remember { MutableInteractionSource() }
     val isPressed by interactionSource.collectIsPressedAsState()
-    val color = if (isPressed) CRed else CDarkGreen
+    val color = if (isPressed) CRed else Color.Black//CDarkGreen
 
     Column(
         modifier = Modifier
             .fillMaxSize()
-            .background(CMidGreen),
+            .background(BaseGreen),//CMidGreen),
         verticalArrangement = Arrangement.Center,
         horizontalAlignment = Alignment.CenterHorizontally,
     ){
@@ -59,22 +62,30 @@ fun LogInScreen(
             value = id,
             onValueChange = idValue,
             colors = TextFieldDefaults.colors(
-                focusedTextColor = Color.DarkGray,
-                focusedContainerColor = CLightGreen,
-                unfocusedContainerColor = CIvory,
+                Color.Black,
+                focusedIndicatorColor = Color.Transparent,
+                unfocusedIndicatorColor = Color.Transparent,
+//                focusedTextColor = Color.DarkGray,
+                focusedContainerColor = BaseGrey,//CLightGreen,
+                unfocusedContainerColor = BaseGrey,//CIvory,
             ),
-            placeholder = { Text("ID")}
+            placeholder = { Text("ID", fontWeight = FontWeight.SemiBold)},
+            shape = RoundedCornerShape(15.dp),
         )
         Spacer(modifier = Modifier.height(15.dp))
         TextField(
             value = password,
             onValueChange = passwordValue,
             colors = TextFieldDefaults.colors(
-                focusedTextColor = Color.DarkGray,
-                focusedContainerColor = CLightGreen,
-                unfocusedContainerColor = CIvory,
+                Color.Black,
+                focusedIndicatorColor = Color.Transparent,
+                unfocusedIndicatorColor = Color.Transparent,
+//                focusedTextColor = Color.DarkGray,
+                focusedContainerColor = BaseGrey,//CLightGreen,
+                unfocusedContainerColor = BaseGrey,//CIvory,
             ),
-            placeholder = { Text("PASSWORD")}
+            placeholder = { Text("PASSWORD", fontWeight = FontWeight.SemiBold)},
+            shape = RoundedCornerShape(15.dp),
         )
         Spacer(modifier = Modifier.height(20.dp))
         Button(
@@ -83,7 +94,7 @@ fun LogInScreen(
             } },
             interactionSource = interactionSource,
             colors = ButtonDefaults.buttonColors(
-                CMidGreen,
+                BaseGreen,//CMidGreen,
                 contentColor = color )) {
             Text(
                 "LOGIN",
@@ -92,15 +103,17 @@ fun LogInScreen(
             )
         }
         Spacer(modifier = Modifier.height(20.dp))
+        Text("Don't have a Fooriend account?")
         Button(onClick = {
             onSignUpClick()
         },
             colors = ButtonDefaults.buttonColors(
-                CMidGreen,
-                contentColor = CDarkGreen )) {
+                Color.Transparent,//CMidGreen,
+                contentColor = Color.Black//CDarkGreen
+                         )) {
             Text(
                 "SIGN UP",
-                fontSize = 30.sp,
+                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
@@ -10,6 +10,7 @@ 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
@@ -34,6 +35,8 @@ 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
@@ -53,14 +56,14 @@ fun SignUpScreen(
 
     val interactionSource = remember { MutableInteractionSource() }
     val isPressed by interactionSource.collectIsPressedAsState()
-    val color = if (isPressed) CRed else CDarkGreen
+    val color = if (isPressed) CRed else Color.Black//CDarkGreen
 //    val (nickname, nicknameValue) = remember { mutableStateOf("") }
 //    val (phoneNumber, phoneNumberValue) = remember { mutableStateOf("") }
 
     Column(
         modifier = Modifier
             .fillMaxSize()
-            .background(CMidGreen),
+            .background(BaseGreen),//CMidGreen),
         verticalArrangement = Arrangement.Center,
         horizontalAlignment = Alignment.CenterHorizontally,
     ){
@@ -71,33 +74,45 @@ fun SignUpScreen(
             value = id,
             onValueChange = idValue,
             colors = TextFieldDefaults.colors(
-                focusedTextColor = Color.DarkGray,
-                focusedContainerColor = CLightGreen,
-                unfocusedContainerColor = CIvory,
+                Color.Black,
+                focusedIndicatorColor = Color.Transparent,
+                unfocusedIndicatorColor = Color.Transparent,
+//                focusedTextColor = Color.DarkGray,
+                focusedContainerColor = BaseGrey,//CLightGreen,
+                unfocusedContainerColor = BaseGrey,//CIvory,
             ),
-            placeholder = { Text("ID")},
+            placeholder = { Text("ID", fontWeight = FontWeight.SemiBold)},
+            shape = RoundedCornerShape(15.dp),
         )
         Spacer(modifier = Modifier.height(15.dp))
         TextField(
             value = password,
             onValueChange = passwordValue,
             colors = TextFieldDefaults.colors(
-                focusedTextColor = Color.DarkGray,
-                focusedContainerColor = CLightGreen,
-                unfocusedContainerColor = CIvory,
+                Color.Black,
+                focusedIndicatorColor = Color.Transparent,
+                unfocusedIndicatorColor = Color.Transparent,
+//                focusedTextColor = Color.DarkGray,
+                focusedContainerColor = BaseGrey,//CLightGreen,
+                unfocusedContainerColor = BaseGrey,//CIvory,
             ),
-            placeholder = { Text("PASSWORD")}
+            placeholder = { Text("PASSWORD", fontWeight = FontWeight.SemiBold)},
+            shape = RoundedCornerShape(15.dp),
         )
         Spacer(modifier = Modifier.height(15.dp))
         TextField(
             value = passwordCheck,
             onValueChange = passwordCheckValue,
             colors = TextFieldDefaults.colors(
-                focusedTextColor = Color.DarkGray,
-                focusedContainerColor = CLightGreen,
-                unfocusedContainerColor = CIvory,
+                Color.Black,
+                focusedIndicatorColor = Color.Transparent,
+                unfocusedIndicatorColor = Color.Transparent,
+//                focusedTextColor = Color.DarkGray,
+                focusedContainerColor = BaseGrey,//CLightGreen,
+                unfocusedContainerColor = BaseGrey,//CIvory,
             ),
-            placeholder = { Text("PASSWORD CONFIRM")},
+            placeholder = { Text("PASSWORD CONFIRM", fontWeight = FontWeight.SemiBold)},
+            shape = RoundedCornerShape(15.dp),
         )
 //        TODO("keyboard hide")
         Spacer(modifier = Modifier.height(20.dp))
@@ -107,7 +122,7 @@ fun SignUpScreen(
             onClick = { onSignUpClick() },
             interactionSource = interactionSource,
             colors = ButtonDefaults.buttonColors(
-                CMidGreen,
+                Color.Transparent,//CMidGreen,
                 contentColor = color )) {
             Text(
                 "SIGN UP",

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
@@ -6,4 +6,7 @@ val CDarkGreen = Color(0xFF386641)
 val CMidGreen = Color(0xFF6a994e)
 val CLightGreen = Color(0xFFa7c957)
 val CIvory = Color(0xFFf2e8cf)
-val CRed = Color(0xFFbc4749)
+val CRed = Color(0xFFbc4749)
+
+val BaseGreen = Color(0xFF32B768)
+val BaseGrey = Color(0xFFD9D9D9)