Skip to content

Commit 46a4d1d

Browse files
AndrewCheung360AndrewCheung360
authored
Merge pull request #6 from cuappdev/andrew/splash-login-screen-design-system
Login Screens + Design System
2 parents 4ae17d7 + 3027800 commit 46a4d1d

23 files changed

+339
-142
lines changed

‎app/src/main/AndroidManifest.xml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,12 @@
1212
android:label="@string/app_name"
1313
android:roundIcon="@mipmap/ic_launcher_round"
1414
android:supportsRtl="true"
15-
android:theme="@style/Theme.Hustle"
15+
android:theme="@style/Theme.Hustle.Starting"
1616
tools:targetApi="31">
1717
<activity
1818
android:name=".MainActivity"
1919
android:exported="true"
20-
android:theme="@style/Theme.Hustle">
20+
android:theme="@style/Theme.Hustle.Starting">
2121
<intent-filter>
2222
<action android:name="android.intent.action.MAIN" />
2323

‎app/src/main/java/com/cornellappdev/hustle/MainActivity.kt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ class MainActivity : ComponentActivity() {
2424

2525
enableEdgeToEdge()
2626
setContent {
27-
HustleTheme {
27+
HustleTheme(dynamicColor = false) {
2828
val rootUiState = rootViewModel.collectUiStateValue()
2929
if (!rootUiState.isLoading) {
3030
HustleApp(isSignedIn = rootUiState.isSignedIn)

‎app/src/main/java/com/cornellappdev/hustle/data/remote/HustleFirebaseMessagingService.kt‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -78,11 +78,10 @@ class HustleFirebaseMessagingService : FirebaseMessagingService() {
7878
PendingIntent.FLAG_UPDATE_CURRENT or PendingIntent.FLAG_IMMUTABLE
7979
)
8080

81-
// TODO: Replace with actual app icon
8281
val notification = NotificationCompat.Builder(this, CHANNEL_ID)
8382
.setContentTitle(title)
8483
.setContentText(body)
85-
.setSmallIcon(R.drawable.ic_google)
84+
.setSmallIcon(R.drawable.ic_hustle_logo)
8685
.setAutoCancel(true)
8786
.setPriority(NotificationCompat.PRIORITY_HIGH)
8887
.setContentIntent(pendingIntent)

‎app/src/main/java/com/cornellappdev/hustle/ui/components/onboarding/GoogleSignInButton.kt‎

Lines changed: 0 additions & 70 deletions
This file was deleted.

‎app/src/main/java/com/cornellappdev/hustle/ui/components/onboarding/SignInButton.kt‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
package com.cornellappdev.hustle.ui.components.onboarding
2+
3+
import androidx.compose.animation.animateContentSize
4+
import androidx.compose.foundation.layout.Arrangement
5+
import androidx.compose.foundation.layout.PaddingValues
6+
import androidx.compose.foundation.layout.Row
7+
import androidx.compose.foundation.layout.fillMaxWidth
8+
import androidx.compose.foundation.layout.size
9+
import androidx.compose.foundation.shape.RoundedCornerShape
10+
import androidx.compose.material3.Button
11+
import androidx.compose.material3.ButtonDefaults
12+
import androidx.compose.material3.CircularProgressIndicator
13+
import androidx.compose.material3.MaterialTheme
14+
import androidx.compose.material3.Text
15+
import androidx.compose.runtime.Composable
16+
import androidx.compose.ui.Alignment
17+
import androidx.compose.ui.Modifier
18+
import androidx.compose.ui.tooling.preview.Preview
19+
import androidx.compose.ui.unit.dp
20+
import com.cornellappdev.hustle.ui.theme.HustleColors
21+
import com.cornellappdev.hustle.ui.theme.HustleSpacing
22+
import com.cornellappdev.hustle.ui.theme.HustleTheme
23+
24+
@Composable
25+
fun SignInButton(
26+
onClick: () -> Unit,
27+
modifier: Modifier = Modifier,
28+
isLoading: Boolean = false
29+
) {
30+
Button(
31+
onClick = onClick,
32+
enabled = !isLoading,
33+
modifier = modifier.fillMaxWidth(),
34+
colors = ButtonDefaults.buttonColors(
35+
containerColor = HustleColors.accentGreen,
36+
contentColor = HustleColors.hustleGreen,
37+
disabledContainerColor = HustleColors.accentGreen,
38+
disabledContentColor = HustleColors.hustleGreen
39+
),
40+
contentPadding = PaddingValues(
41+
vertical = HustleSpacing.medium
42+
),
43+
shape = RoundedCornerShape(15.dp)
44+
) {
45+
Row(
46+
verticalAlignment = Alignment.CenterVertically,
47+
horizontalArrangement = Arrangement.spacedBy(HustleSpacing.small),
48+
modifier = Modifier.animateContentSize()
49+
) {
50+
if (isLoading) {
51+
CircularProgressIndicator(
52+
color = HustleColors.hustleGreen,
53+
modifier = Modifier.size(24.dp)
54+
)
55+
}
56+
Text(
57+
text = if (isLoading) "Signing in..." else "Log in with NetID",
58+
style = MaterialTheme.typography.titleLarge
59+
)
60+
}
61+
62+
}
63+
}
64+
65+
@Preview(showBackground = true)
66+
@Composable
67+
private fun SignInButtonPreview() {
68+
HustleTheme(dynamicColor = false) {
69+
SignInButton(onClick = {}, isLoading = true)
70+
}
71+
}

‎app/src/main/java/com/cornellappdev/hustle/ui/navigation/HustleNavigation.kt‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import com.cornellappdev.hustle.ui.navigation.navgraphs.homeNavGraph
1010
import com.cornellappdev.hustle.ui.navigation.navgraphs.messagesNavGraph
1111
import com.cornellappdev.hustle.ui.navigation.navgraphs.onboardingNavGraph
1212
import com.cornellappdev.hustle.ui.navigation.navgraphs.profileNavGraph
13+
import com.cornellappdev.hustle.ui.theme.HustleColors
1314

1415
@Composable
1516
fun HustleNavigation(
@@ -23,7 +24,8 @@ fun HustleNavigation(
2324
if (isSignedIn) {
2425
BottomNavigationBar(navController = navController)
2526
}
26-
}
27+
},
28+
containerColor = if (!isSignedIn) HustleColors.hustleGreen else HustleColors.white
2729
) { innerPadding ->
2830
NavHost(
2931
navController = navController,

‎app/src/main/java/com/cornellappdev/hustle/ui/screens/onboarding/SignInScreen.kt‎

Lines changed: 93 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,38 @@
11
package com.cornellappdev.hustle.ui.screens.onboarding
22

3+
import androidx.compose.foundation.background
34
import androidx.compose.foundation.layout.Arrangement
45
import androidx.compose.foundation.layout.Box
56
import androidx.compose.foundation.layout.Column
67
import androidx.compose.foundation.layout.fillMaxSize
8+
import androidx.compose.foundation.layout.padding
9+
import androidx.compose.material3.Icon
10+
import androidx.compose.material3.MaterialTheme
11+
import androidx.compose.material3.Text
712
import androidx.compose.runtime.Composable
813
import androidx.compose.runtime.LaunchedEffect
914
import androidx.compose.ui.Alignment
1015
import androidx.compose.ui.Modifier
16+
import androidx.compose.ui.graphics.Color
17+
import androidx.compose.ui.res.painterResource
18+
import androidx.compose.ui.text.SpanStyle
19+
import androidx.compose.ui.text.buildAnnotatedString
20+
import androidx.compose.ui.text.font.FontStyle
21+
import androidx.compose.ui.text.font.FontWeight
22+
import androidx.compose.ui.text.withStyle
1123
import androidx.compose.ui.tooling.preview.Preview
1224
import androidx.compose.ui.tooling.preview.PreviewParameter
1325
import androidx.compose.ui.tooling.preview.PreviewParameterProvider
26+
import androidx.compose.ui.unit.dp
27+
import androidx.compose.ui.unit.sp
1428
import androidx.hilt.lifecycle.viewmodel.compose.hiltViewModel
29+
import com.cornellappdev.hustle.R
1530
import com.cornellappdev.hustle.ui.components.general.ErrorMessage
16-
import com.cornellappdev.hustle.ui.components.onboarding.GoogleSignInButton
31+
import com.cornellappdev.hustle.ui.components.onboarding.SignInButton
32+
import com.cornellappdev.hustle.ui.theme.HustleColors
33+
import com.cornellappdev.hustle.ui.theme.HustleSpacing
34+
import com.cornellappdev.hustle.ui.theme.HustleTheme
35+
import com.cornellappdev.hustle.ui.theme.InstrumentSans
1736
import com.cornellappdev.hustle.ui.viewmodels.ActionState
1837
import com.cornellappdev.hustle.ui.viewmodels.onboarding.SignInScreenViewModel
1938

@@ -49,13 +68,23 @@ private fun SignInScreenContent(
4968
onDismissError: () -> Unit,
5069
modifier: Modifier = Modifier,
5170
) {
52-
Box(modifier = modifier.fillMaxSize()) {
71+
Box(
72+
modifier = modifier
73+
.fillMaxSize()
74+
.background(HustleColors.hustleGreen)
75+
.padding(
76+
horizontal = HustleSpacing.leftRightMargin
77+
)
78+
) {
5379
Column(
5480
horizontalAlignment = Alignment.CenterHorizontally,
55-
verticalArrangement = Arrangement.Center,
81+
verticalArrangement = Arrangement.spacedBy(
82+
89.dp, alignment = Alignment.CenterVertically
83+
),
5684
modifier = Modifier.fillMaxSize()
5785
) {
58-
GoogleSignInButton(
86+
WelcomeHeader()
87+
SignInButton(
5988
onClick = onGoogleSignInButtonClick, isLoading = isSignInLoading
6089
)
6190
}
@@ -69,6 +98,59 @@ private fun SignInScreenContent(
6998
}
7099
}
71100

101+
@Composable
102+
private fun WelcomeHeader() {
103+
Column(
104+
horizontalAlignment = Alignment.CenterHorizontally,
105+
verticalArrangement = Arrangement.spacedBy(HustleSpacing.medium)
106+
) {
107+
Icon(
108+
painter = painterResource(id = R.drawable.ic_hustle_logo),
109+
contentDescription = "Hustle Logo",
110+
tint = Color.Unspecified
111+
)
112+
WelcomeText()
113+
}
114+
}
115+
116+
@Composable
117+
private fun WelcomeText() {
118+
Column(
119+
horizontalAlignment = Alignment.CenterHorizontally,
120+
verticalArrangement = Arrangement.spacedBy(HustleSpacing.extraSmall)
121+
) {
122+
Text(
123+
buildAnnotatedString {
124+
withStyle(
125+
style = SpanStyle(
126+
color = HustleColors.white,
127+
fontFamily = InstrumentSans,
128+
fontSize = 36.sp,
129+
)
130+
) {
131+
append("Welcome to ")
132+
}
133+
withStyle(
134+
style = SpanStyle(
135+
color = HustleColors.white,
136+
fontFamily = InstrumentSans,
137+
fontSize = 36.sp,
138+
fontWeight = FontWeight.Bold,
139+
fontStyle = FontStyle.Italic
140+
)
141+
) {
142+
append("Hustle")
143+
}
144+
}
145+
)
146+
Text(
147+
text = "Browse. Buy. Book.",
148+
color = HustleColors.white,
149+
style = MaterialTheme.typography.headlineMedium
150+
)
151+
}
152+
}
153+
72154
class SignInErrorMessageProvider : PreviewParameterProvider<String?> {
73155
override val values = sequenceOf(
74156
null,
@@ -81,9 +163,11 @@ class SignInErrorMessageProvider : PreviewParameterProvider<String?> {
81163
private fun SignInScreenPreview(
82164
@PreviewParameter(SignInErrorMessageProvider::class) errorMessage: String?
83165
) {
84-
SignInScreenContent(
85-
onGoogleSignInButtonClick = {},
86-
isSignInLoading = false,
87-
errorMessage = errorMessage,
88-
onDismissError = {})
166+
HustleTheme(dynamicColor = false) {
167+
SignInScreenContent(
168+
onGoogleSignInButtonClick = {},
169+
isSignInLoading = false,
170+
errorMessage = errorMessage,
171+
onDismissError = {})
172+
}
89173
}

‎app/src/main/java/com/cornellappdev/hustle/ui/theme/Color.kt‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,15 @@ package com.cornellappdev.hustle.ui.theme
22

33
import androidx.compose.ui.graphics.Color
44

5-
val Purple80 = Color(0xFFD0BCFF)
6-
val PurpleGrey80 = Color(0xFFCCC2DC)
7-
val Pink80 = Color(0xFFEFB8C8)
8-
9-
val Purple40 = Color(0xFF6650a4)
10-
val PurpleGrey40 = Color(0xFF625b71)
11-
val Pink40 = Color(0xFF7D5260)
5+
object HustleColors {
6+
val hustleGreen = Color(0xFF004346)
7+
val accentGreen = Color(0xFFD5EFB4)
8+
val primaryBlack = Color(0xFF000000)
9+
val tertiaryGray = Color(0xFF2D2D2D)
10+
val secondaryGray = Color(0xFF7D8288)
11+
val iconInactive = Color(0xFFBEBEBE)
12+
val stroke = Color(0xFFD6D6D6)
13+
val wash = Color(0xFFF5F5F5)
14+
val tint = Color(0xFFB2B3B6)
15+
val white = Color(0xFFFFFFFF)
16+
}

‎app/src/main/java/com/cornellappdev/hustle/ui/theme/Spacing.kt‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
package com.cornellappdev.hustle.ui.theme
2+
3+
import androidx.compose.ui.unit.dp
4+
5+
object HustleSpacing {
6+
val extraSmall = 8.dp
7+
val small = 12.dp
8+
val medium = 16.dp
9+
val large = 24.dp
10+
val extraLarge = 36.dp
11+
val huge = 64.dp
12+
13+
val topMarginBig = huge
14+
val topMarginNormal = extraLarge
15+
val leftRightMargin = large
16+
}

0 commit comments

Comments
 (0)