Login Screens + Design System #6

AndrewCheung360 · 2025-10-16T17:58:28Z

Overview

Implemented splash and login screens based on designs and set up base design system

Changes Made

Splash + Login Screen Designs: https://www.figma.com/design/tRFDgfOFDXGXREx6q33p4P/Hustle?node-id=257-1658&p=f&m=dev
Design System: https://www.figma.com/design/tRFDgfOFDXGXREx6q33p4P/Hustle?node-id=42-292&m=dev

Updated splash screen (logo, background color)
Implemented login screen design
Updated sign in button based on design
Added Hustle Colors
Added custom fonts
Created Hustle spacings constants from design system
Added hustle logo
Deleted google sign in logo + replaced with hustle logo for notifications
Set up conditional container color for scaffold (for edge to edge bg color)

Test Coverage

Previews + Emulator

Next Steps

Integrate auth with backend

Screenshots

Screen.Recording.2025-10-16.at.1.37.26.PM.mov

…e design system

Copilot

Pull Request Overview

This PR implements splash and login screens with a new design system for the Hustle Android app, replacing the default Material Design styling with brand-specific components and color schemes.

Created brand-specific UI components including custom splash screen, sign-in button, and typography system
Replaced Google branding with Hustle branding throughout the application
Established a design system with custom colors, fonts, and spacing constants

Reviewed Changes

Copilot reviewed 15 out of 21 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
app/src/main/res/values/themes.xml	Added splash screen theme with Hustle branding
app/src/main/res/values/colors.xml	Replaced default colors with Hustle brand colors
app/src/main/res/drawable/ic_hustle_logo.xml	Added new Hustle logo vector drawable
app/src/main/res/drawable/ic_google.xml	Removed Google logo drawable
app/src/main/res/drawable/hustle_logo_splash.xml	Added splash screen version of Hustle logo
app/src/main/java/com/cornellappdev/hustle/ui/theme/Type.kt	Implemented custom typography with Instrument Sans and Helvetica Neue fonts
app/src/main/java/com/cornellappdev/hustle/ui/theme/Theme.kt	Updated theme to use new color scheme and typography
app/src/main/java/com/cornellappdev/hustle/ui/theme/Spacing.kt	Created spacing constants for consistent layout
app/src/main/java/com/cornellappdev/hustle/ui/theme/Color.kt	Defined Hustle brand color palette
app/src/main/java/com/cornellappdev/hustle/ui/screens/onboarding/SignInScreen.kt	Redesigned sign-in screen with new branding and layout
app/src/main/java/com/cornellappdev/hustle/ui/navigation/HustleNavigation.kt	Added conditional background color for authentication screens
app/src/main/java/com/cornellappdev/hustle/ui/components/onboarding/SignInButton.kt	Created new sign-in button component replacing Google button
app/src/main/java/com/cornellappdev/hustle/ui/components/onboarding/GoogleSignInButton.kt	Removed Google-specific sign-in button
app/src/main/java/com/cornellappdev/hustle/data/remote/HustleFirebaseMessagingService.kt	Updated notification icon to use Hustle logo
app/src/main/AndroidManifest.xml	Applied splash screen theme to application

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot · 2025-10-16T17:59:28Z

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

            horizontalAlignment = Alignment.CenterHorizontally,
-            verticalArrangement = Arrangement.Center,
+            verticalArrangement = Arrangement.spacedBy(
+                89.dp, alignment = Alignment.CenterVertically


The hardcoded spacing value of 89.dp should use a constant from HustleSpacing for consistency with the design system.

Suggested change

89.dp, alignment = Alignment.CenterVertically

HustleSpacing.signInScreenVerticalSpacing, alignment = Alignment.CenterVertically

Copilot · 2025-10-16T17:59:28Z

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

+        Text(
+            buildAnnotatedString {
+                withStyle(
+                    style = SpanStyle(
+                        color = HustleColors.white,
+                        fontFamily = InstrumentSans,
+                        fontSize = 36.sp,
+                    )
+                ) {
+                    append("Welcome to ")
+                }
+                withStyle(
+                    style = SpanStyle(
+                        color = HustleColors.white,
+                        fontFamily = InstrumentSans,
+                        fontSize = 36.sp,
+                        fontWeight = FontWeight.Bold,
+                        fontStyle = FontStyle.Italic
+                    )
+                ) {
+                    append("Hustle")
+                }
+            }
+        )
+        Text(
+            text = "Browse. Buy. Book.",
+            color = HustleColors.white,
+            fontFamily = InstrumentSans,
+            fontSize = 24.sp,
+            fontWeight = FontWeight.Medium
+        )


The hardcoded font sizes (36.sp, 24.sp) should use typography styles from HustleTypography for consistency with the design system.

zachseidner1

Have a few comments, mainly on the way we're accessing the colors, but overall looks great!

zachseidner1 · 2025-10-16T18:50:44Z

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

-val Purple40 = Color(0xFF6650a4)
-val PurpleGrey40 = Color(0xFF625b71)
-val Pink40 = Color(0xFF7D5260)
+object HustleColors {


I feel like we should be getting these based on the theme instead, so this way it's easier to support dark theme in the future

Will look into

I believe the new commit should have this now. I did need to add the dynamicColor = false to the HustleTheme parameters for the colors to apply properly.

zachseidner1 · 2025-10-16T18:59:34Z

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

+        Text(
+            text = "Browse. Buy. Book.",
+            color = HustleColors.white,
+            fontFamily = InstrumentSans,
+            fontSize = 24.sp,
+            fontWeight = FontWeight.Medium
+        )


could be worth double checking with the designers to see if they could use a text style from the design system

Will check with them. I can maybe use the closest one in the meantime (H2 with 22px)

Double checked with them and the design system has been updated

zachseidner1 · 2025-10-16T19:02:00Z

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

+        Icon(
+            painter = painterResource(id = R.drawable.ic_hustle_logo),
+            contentDescription = "Hustle Logo",
+            tint = Color.Unspecified


Is unspecified intentional? Why is it needed?

I think Compose tints the icon another color without it, so this makes sure it keeps the original color

zachseidner1 · 2025-10-16T19:02:34Z

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

+            if (isLoading) {
+                CircularProgressIndicator(
+                    color = HustleColors.hustleGreen,
+                    modifier = Modifier.size(24.dp)
+                )
+            }


Nit: could we wrap this in animateContentSize to make the whole experience a bit cleaner

Will look into

Added to the row modifier

… typographies, adjusted color schemes, added dynamicColor to false for theme to apply properly, used predefined typography for some text

zachseidner1

Will preemptively approve, one comment I'd like to make though is regarding the themes. I think as a developer on Hustle it would get kind of annyoying to have to cross reference all the material color names like primary, onPrimary surface, etc.. with their corresponding HustleColors. It would be more intuitive if the developer could write out the name of the color from the design system that they want to use and then have it work. I guess the design system right now is not using semantic color names though (by this I mean their names are the actual colors green rather than their meaning primary, as one example). So I am now realizing that perhaps asking for the dynamic colors was not the right call. Sure, it could help us a bit later IF we need a dark theme, but until then it would be slowing down developers on the app as they'd have to cross reference every color they add with the material color scheme.

So overall I think it would be better to maybe just leave out the whole dark mode and light mode color scheme, or ask designers about using semantic color names for their design system (which would probably be more effort on their behalf). This is my bad for asking you to over-engineer here, but hopefully shouldn't be too much effort to change back! Lmk what your thoughts are.

AndrewCheung360 · 2025-10-17T03:56:04Z

I think I see what you mean in that using primary for example rather than explicitly using the color can be potentially confusing and time-consuming for devs to figure out even if there is the added benefit of more easily supporting dark and light mode in the future. However, I do also see how using the color scheme's specific naming conventions (eg. primary, onPrimary) can be useful in having an organized design system within the codebase that you can change easily especially when it is in a large codebase. For instance, if we decide to switch the color that we are using for our primary color or secondaryContainer, it is only a matter of changing two lines of code (1 for light and dark). However, if we used colors directly, we would have to cmd-shift-f for all instances of that color and change only the relevant ones, as those same colors may be used for other things besides primary like onSecondary, which we might not want to change necessarily.

Overall, I think there's pros and cons to both approaches, but for our case, I think since the codebase is on the smaller side and we will probably value dev velocity + ease of onboarding a little more than long-term scalability, which I suspect might not affect us for quite a while, I would be okay with using a color object with the color's direct name for now. I'll probably still keep the light/dark mode color schemes in the code in case we do end up wanting to make that refactor in the future.

zachseidner1 · 2025-10-17T16:42:12Z

yeah that sounds great, ty! I think this is key, we do probably value dev velocity and ease of onboarding over long term scalability, as that is just how our project team is structured at the moment. Apps like these are ventures that we try out, and if they work we keep them, and otherwise we shelve them.

AndrewCheung360 added 2 commits October 16, 2025 13:41

Implemented splash screen + login screen design. Set up tentative bas…

e84b41c

…e design system

organized sign in screen into components

010c21a

AndrewCheung360 requested a review from Copilot October 16, 2025 17:58

AndrewCheung360 self-assigned this Oct 16, 2025

AndrewCheung360 added the enhancement New feature or request label Oct 16, 2025

AndrewCheung360 requested a review from zachseidner1 October 16, 2025 17:59

Copilot AI reviewed Oct 16, 2025

View reviewed changes

zachseidner1 reviewed Oct 16, 2025

View reviewed changes

Changed color usage to themes, added helvetica bold font and adjusted…

7d0ba95

… typographies, adjusted color schemes, added dynamicColor to false for theme to apply properly, used predefined typography for some text

AndrewCheung360 requested a review from zachseidner1 October 16, 2025 23:46

zachseidner1 approved these changes Oct 17, 2025

View reviewed changes

reverted to use semantic colors

3027800

AndrewCheung360 merged commit 46a4d1d into main Oct 17, 2025
3 checks passed

	89.dp, alignment = Alignment.CenterVertically
	HustleSpacing.signInScreenVerticalSpacing, alignment = Alignment.CenterVertically

Login Screens + Design System #6

Login Screens + Design System #6

Uh oh!

Conversation

AndrewCheung360 commented Oct 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Overview

Changes Made

Test Coverage

Next Steps

Screenshots

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Oct 16, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 16, 2025

Choose a reason for hiding this comment

Uh oh!

zachseidner1 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

zachseidner1 left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

AndrewCheung360 commented Oct 17, 2025

Uh oh!

zachseidner1 commented Oct 17, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

AndrewCheung360 commented Oct 16, 2025 •

edited

Loading

zachseidner1 left a comment •

edited

Loading