Skip to content

Home Screen #61

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Maria1-eng wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Home Screen #61

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added composeApp/src/commonMain/composeResources/drawable/mineral_chico.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added composeApp/src/commonMain/composeResources/font/rock_salt.ttf
View file
Open in desktop
Binary file not shown.
2 changes: 1 addition & 1 deletion composeApp/src/commonMain/composeResources/values-es/strings.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@

<!--region Home -->
<string name="home_button_label_connect_with_strava">[Connect with Strava]</string>
<string name="home_button_label_launch_build_workouts">[Launch BuildWorkoutsScreen]</string>
<string name="home_button_label_launch_build_workouts">Comenzar</string>
<!--endregion Home -->

<!--region Play Workout -->
Expand Down
2 changes: 1 addition & 1 deletion composeApp/src/commonMain/composeResources/values/strings.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@

<!--region Home -->
<string name="home_button_label_connect_with_strava">Connect with Strava</string>
<string name="home_button_label_launch_build_workouts">Launch BuildWorkoutsScreen</string>
<string name="home_button_label_launch_build_workouts">Get Started</string>
<!--endregion Home -->

<!--region Play Workout -->
Expand Down
99 changes: 74 additions & 25 deletions ...seApp/src/commonMain/kotlin/com/majotyler/hiittimer/presentation/homeScreen/HomeScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,26 +3,38 @@ package com.majotyler.hiittimer.presentation.homeScreen
import androidx.compose.foundation.Image
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.widthIn
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.majotyler.hiittimer.platform.UrlOpener
import hiittimer.composeapp.generated.resources.Res
import hiittimer.composeapp.generated.resources.btn_strava_connect_with_orange
import hiittimer.composeapp.generated.resources.home_button_label_launch_build_workouts
import hiittimer.composeapp.generated.resources.mineral_chico
import hiittimer.composeapp.generated.resources.rock_salt
import org.jetbrains.compose.resources.Font
import org.jetbrains.compose.resources.painterResource
import org.jetbrains.compose.resources.stringResource

Expand All @@ -33,44 +45,81 @@ fun HomeScreen(
modifier: Modifier = Modifier,
) {
val showCreateActivityButton by viewModel.showCreateActivityButton.collectAsState()
val rockSalt = FontFamily(Font(Res.font.rock_salt))

LaunchedEffect(Unit) {
viewModel.openUrl.collect { url ->
urlOpener.openUrl(url = url)
}
}

Column(
horizontalAlignment = Alignment.CenterHorizontally,
modifier = modifier
.fillMaxSize(),
verticalArrangement = Arrangement.Center,
) {
Button(
onClick = {
viewModel.onEvent(event = HomeViewEvent.ClickedLaunchBuildWorkouts)
},
) {
Text(text = stringResource(resource = Res.string.home_button_label_launch_build_workouts))
}
Box(modifier = modifier.fillMaxSize()) {
Image(
painter = painterResource(Res.drawable.btn_strava_connect_with_orange),
contentDescription = "Connect with Strava",
contentScale = ContentScale.FillHeight,
painter = painterResource(Res.drawable.mineral_chico),
contentDescription = null,
contentScale = ContentScale.Crop,
modifier = Modifier.fillMaxSize()
)

Text(
text = "Track\nImprove",

@Tyler-Lopez Tyler-Lopez May 10, 2026

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should also probably translate this :) so that means making a new String resource in those files, one for English, one for Spanish - then replacing this "hard coded String" with that.

fontFamily = rockSalt,
fontSize = 65.sp,
color = Color.Black,
lineHeight = 52.sp,

@Tyler-Lopez Tyler-Lopez May 10, 2026

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Rather than specifying the lineHeight and using a single String like "Track\nImprove" in a single Text, I might suggest that you instead put this in a Column of two Text. What do you think? This is totally fine though!

modifier = Modifier
.height(48.dp)
.widthIn(min = 48.dp)
.clip(RoundedCornerShape(6.dp))
.clickable { viewModel.onEvent(event = HomeViewEvent.ClickedConnectWithStrava) },
.align(Alignment.Center)
.padding(bottom = 180.dp),
)

if (showCreateActivityButton) {
Column(
modifier = Modifier
.align(Alignment.BottomCenter)
.padding(horizontal = 24.dp, vertical = 48.dp)
.fillMaxWidth(),
Comment on lines +72 to +79

@Maria1-eng Maria1-eng May 10, 2026

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like how this looks, but I feel the paddings look poorly implemented. How could I improve the spaces ? I thought about changing the text to inside column.

@Tyler-Lopez Tyler-Lopez May 10, 2026

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I thought about changing the text to inside column

Is this referring to "Track" and "Improve"? I agree, I think a Column is a really good idea :)

In the future, the "Connect with Strava" and "Create Strava Activity" buttons won't be here. Those were just temporary. I think it makes the most sense for those to be in the post-workout screen.

verticalArrangement = Arrangement.spacedBy(16.dp),
horizontalAlignment = Alignment.CenterHorizontally,
) {
Button(
onClick = {
viewModel.onEvent(event = HomeViewEvent.ClickedCreateStravaActivity)
}
onClick = { viewModel.onEvent(event = HomeViewEvent.ClickedLaunchBuildWorkouts) },
modifier = Modifier
.fillMaxWidth()
.height(56.dp),
Comment on lines +86 to +87

@Tyler-Lopez Tyler-Lopez May 10, 2026

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
.fillMaxWidth()
.height(56.dp),
.fillMaxWidth(),
contentPadding = PaddingValues(
horizontal = 24.dp,
vertical = 12.dp,
),

We should get rid of this. In its place, we can increase the padding :)

Why? We should do this because font-sizes are not always the same, users can increase the font size of their device. Being honest with you, most applications don't really care about this 😆 even really big applications just totally suck at big font sizes.

Here, I increase the font size of my device.

With a big font size, sometimes the button needs to be more than 56.dp in height. Using contentPadding makes sure everything is more consistent. :) You can see how in the "with height" Column the text gets cut-off from "Create Strava Activity".

With height With contentPadding
Image Image

By the way, we can also prevent text from scaling, you normally should avoid that, but we can do it for "Track" and "Improve" to avoid what you see here :)

@Tyler-Lopez Tyler-Lopez May 11, 2026

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We actually have this problem so much worse in other parts of the application 😆 the big font-sizes breaking the application, so definitely no huge deal here

shape = RoundedCornerShape(28.dp),
colors = ButtonDefaults.buttonColors(
containerColor = Color.White,
contentColor = Color.Black,
),
) {
Text(text = "Create Strava Activity")
Text(
text = stringResource(resource = Res.string.home_button_label_launch_build_workouts),
fontSize = 16.sp,
fontWeight = FontWeight.Bold,
)
}

Image(
painter = painterResource(Res.drawable.btn_strava_connect_with_orange),
contentDescription = "Connect with Strava",
contentScale = ContentScale.FillHeight,
modifier = Modifier
.padding(20.dp)
.height(48.dp)

@Tyler-Lopez Tyler-Lopez May 10, 2026

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This one is ok to have height specified, because it is an image, which does not scale with the user's settings.

.widthIn(min = 48.dp)
.clip(RoundedCornerShape(6.dp))
.clickable { viewModel.onEvent(event = HomeViewEvent.ClickedConnectWithStrava) },
)

if (showCreateActivityButton) {
Button(
onClick = { viewModel.onEvent(event = HomeViewEvent.ClickedCreateStravaActivity) },
modifier = Modifier
.fillMaxWidth()
.height(56.dp),
shape = RoundedCornerShape(28.dp),
) {
Text(text = "Create Strava Activity")
}
}
}
}
Expand Down