Skip to content

Commit

Permalink
Refactor: Cleanup home section
Browse files Browse the repository at this point in the history
  • Loading branch information
chepsi committed Oct 13, 2023
1 parent 2270d38 commit 70bf82b
Show file tree
Hide file tree
Showing 8 changed files with 186 additions and 178 deletions.
2 changes: 2 additions & 0 deletions chai/src/main/java/com/droidconke/chai/atoms/Color.kt
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,8 @@ val ChaiDarkGrey = Color(0xFF5A5A5A)
val ChaiDarkerGrey = Color(0xFF191d1d)
val ChaiCoal = Color(0xFF191D1D)
val ChaiBlack = Color(0xFF000000)
val ChaiGrey90 = Color(0xFF20201E)
val ChaiTeal90 = Color(0xFF7DE1C3)

/**
* LIGHT PRIMARY
Expand Down
37 changes: 33 additions & 4 deletions chai/src/main/java/com/droidconke/chai/colors/ChaiColors.kt
Original file line number Diff line number Diff line change
Expand Up @@ -18,18 +18,47 @@ package com.droidconke.chai.colors
import androidx.compose.runtime.Immutable
import androidx.compose.runtime.staticCompositionLocalOf
import androidx.compose.ui.graphics.Color
import com.droidconke.chai.atoms.ChaiBlack
import com.droidconke.chai.atoms.ChaiBlue
import com.droidconke.chai.atoms.ChaiGrey
import com.droidconke.chai.atoms.ChaiGrey90
import com.droidconke.chai.atoms.ChaiLightGrey
import com.droidconke.chai.atoms.ChaiSmokeyGrey
import com.droidconke.chai.atoms.ChaiTeal90
import com.droidconke.chai.atoms.ChaiWhite

@Immutable
data class ChaiColors(
val textColorPrimary: Color = Color.Unspecified
val textColorPrimary: Color = Color.Unspecified,
val background: Color = Color.Unspecified,
val primaryContainer: Color = Color.Unspecified,
val subtitleTextColor: Color = Color.Unspecified,
val activeBottomNavIconColor: Color = Color.Unspecified,
val inactiveBottomNavIconColor: Color = Color.Unspecified,
val titleTextColorPrimary: Color = Color.Unspecified,
val linkTextColorPrimary: Color = Color.Unspecified,
)

val LocalChaiColorsPalette = staticCompositionLocalOf { ChaiColors() }

val ChaiLightColorPalette = ChaiColors(
textColorPrimary = Color(color = 0xFF20201E)
textColorPrimary = ChaiGrey90,
background = ChaiWhite,
primaryContainer = ChaiLightGrey,
subtitleTextColor = ChaiSmokeyGrey,
activeBottomNavIconColor = ChaiBlue,
inactiveBottomNavIconColor = ChaiGrey90,
titleTextColorPrimary = ChaiBlue,
linkTextColorPrimary = ChaiBlue
)

val ChaiDarkColorPalette = ChaiColors(
textColorPrimary = Color(color = 0xFFF5F5F5)
)
textColorPrimary = ChaiLightGrey,
background = ChaiGrey90,
primaryContainer = ChaiBlack,
subtitleTextColor = ChaiGrey,
activeBottomNavIconColor = ChaiTeal90,
inactiveBottomNavIconColor = ChaiWhite,
titleTextColorPrimary = ChaiWhite,
linkTextColorPrimary = ChaiLightGrey
)
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Card
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
Expand All @@ -41,9 +42,8 @@ import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import coil.compose.AsyncImage
import coil.request.ImageRequest
import com.droidconke.chai.atoms.ChaiBlue
import com.droidconke.chai.atoms.ChaiLightGrey
import com.droidconke.chai.atoms.MontserratBold
import com.droidconke.chai.chaiColorsPalette
import ke.droidcon.kotlin.presentation.R

@OptIn(ExperimentalLayoutApi::class)
Expand All @@ -57,7 +57,7 @@ fun SponsorsCard(
modifier = modifier
.fillMaxWidth()
.background(
color = ChaiLightGrey,
color = MaterialTheme.chaiColorsPalette.primaryContainer,
shape = RoundedCornerShape(10.dp)
)
.padding(horizontal = 30.dp, vertical = 10.dp)
Expand All @@ -68,7 +68,7 @@ fun SponsorsCard(
modifier = Modifier.fillMaxWidth(),
text = stringResource(id = R.string.sponsors_title),
style = TextStyle(
color = ChaiBlue,
color = MaterialTheme.chaiColorsPalette.titleTextColorPrimary,
fontWeight = FontWeight.Bold,
fontSize = 18.sp,
lineHeight = 25.sp,
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
package com.android254.presentation.home.components

import android.content.res.Configuration
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
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.platform.testTag
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.droidconke.chai.ChaiDCKE22Theme
import com.droidconke.chai.atoms.ChaiBlue
import com.droidconke.chai.atoms.MontserratBold
import com.droidconke.chai.atoms.MontserratMedium
import com.droidconke.chai.atoms.MontserratRegular
import com.droidconke.chai.chaiColorsPalette
import ke.droidcon.kotlin.presentation.R

@Composable
fun HomeSectionHeaderComponent(
sectionLabel: String,
sectionSize: Int,
onViewAllClicked: () -> Unit,
modifier: Modifier = Modifier
) {
Row(
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.SpaceBetween,
modifier = modifier
.padding(vertical = 16.dp)
.testTag("sectionHeader")
) {
Text(
text = sectionLabel,
textAlign = TextAlign.Start,
style = TextStyle(
color = MaterialTheme.chaiColorsPalette.titleTextColorPrimary,
fontWeight = FontWeight.Bold,
fontSize = 18.sp,
lineHeight = 25.sp,
fontFamily = MontserratBold
)
)
Spacer(modifier = Modifier.weight(1f))
Row(
verticalAlignment = Alignment.CenterVertically,
modifier = Modifier
.clickable { onViewAllClicked() }
.testTag("viewAll")
) {
Text(
text = stringResource(id = R.string.view_all_label),
textAlign = TextAlign.Start,
style = TextStyle(
color = ChaiBlue,
fontWeight = FontWeight.Normal,
fontSize = 12.sp,
lineHeight = 14.sp,
fontFamily = MontserratMedium
),
color = MaterialTheme.chaiColorsPalette.linkTextColorPrimary
)
Spacer(modifier = Modifier.width(4.dp))
Box(
modifier = Modifier
.height(22.dp)
.width(34.dp)
.background(
color = MaterialTheme.chaiColorsPalette.linkTextColorPrimary.copy(alpha = 0.11f),
shape = RoundedCornerShape(14.dp),
)
) {
Text(
text = stringResource(id = R.string.format_plus_label, sectionSize),
modifier = Modifier.align(Alignment.Center),
style = TextStyle(
color = MaterialTheme.chaiColorsPalette.linkTextColorPrimary,
fontSize = 10.sp,
fontFamily = MontserratRegular
)
)
}
}
}
}

@Preview(
name = "Light",
uiMode = Configuration.UI_MODE_NIGHT_NO,
)
@Preview(
name = "Dark",
uiMode = Configuration.UI_MODE_NIGHT_YES,
)
@Composable
private fun HomeSectionHeaderComponentPreview() {
ChaiDCKE22Theme {
HomeSectionHeaderComponent(
sectionLabel = "Sessions",
sectionSize = 20,
onViewAllClicked = {}
)
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -15,20 +15,24 @@
*/
package com.android254.presentation.home.components

import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.IntrinsicSize
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.*
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.testTag
import androidx.compose.ui.res.colorResource
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.TextStyle
Expand All @@ -39,11 +43,11 @@ import androidx.compose.ui.unit.sp
import coil.compose.AsyncImage
import coil.request.ImageRequest
import com.android254.presentation.models.SessionPresentationModel
import com.droidconke.chai.atoms.*
import com.droidconke.chai.atoms.ChaiBlack
import com.droidconke.chai.atoms.ChaiLightGrey
import com.droidconke.chai.atoms.ChaiSmokeyGrey
import com.droidconke.chai.atoms.MontserratBold
import com.droidconke.chai.atoms.MontserratMedium
import com.droidconke.chai.atoms.MontserratRegular
import com.droidconke.chai.chaiColorsPalette
import ke.droidcon.kotlin.presentation.R

@Composable
Expand All @@ -56,7 +60,7 @@ fun HomeSessionSection(
Column(
modifier = modifier.fillMaxWidth()
) {
HomeSectionHeader(
HomeSectionHeaderComponent(
sectionLabel = stringResource(id = R.string.sessions_label),
sectionSize = sessions.size,
onViewAllClicked = onViewAllSessionClicked
Expand All @@ -76,73 +80,6 @@ fun HomeSessionSection(
}
}

@Composable
fun HomeSectionHeader(
sectionLabel: String,
sectionSize: Int,
onViewAllClicked: () -> Unit,
modifier: Modifier = Modifier
) {
Row(
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.SpaceBetween,
modifier = modifier
.padding(vertical = 16.dp)
.testTag("sectionHeader")
) {
Text(
text = sectionLabel,
textAlign = TextAlign.Start,
style = TextStyle(
color = ChaiBlue,
fontWeight = FontWeight.Bold,
fontSize = 18.sp,
lineHeight = 25.sp,
fontFamily = MontserratBold
)
)
Spacer(modifier = Modifier.weight(1f))
Row(
verticalAlignment = Alignment.CenterVertically,
modifier = Modifier
.clickable { onViewAllClicked() }
.testTag("viewAll")
) {
Text(
text = stringResource(id = R.string.view_all_label),
textAlign = TextAlign.Start,
style = TextStyle(
color = ChaiBlue,
fontWeight = FontWeight.Normal,
fontSize = 12.sp,
lineHeight = 14.sp,
fontFamily = MontserratMedium
),
color = MaterialTheme.chaiColorsPalette.textColorPrimary
)
Spacer(modifier = Modifier.width(4.dp))
Box(
modifier = Modifier
.height(22.dp)
.width(34.dp)
.background(
color = colorResource(id = R.color.light_blue),
shape = RoundedCornerShape(14.dp)
)
) {
Text(
text = stringResource(id = R.string.format_plus_label, sectionSize),
modifier = Modifier.align(Alignment.Center),
style = TextStyle(
color = colorResource(id = R.color.blue),
fontSize = 10.sp,
fontFamily = MontserratRegular
)
)
}
}
}
}

@Composable
fun HomeSessionContent(
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
Expand All @@ -44,13 +45,13 @@ import coil.request.ImageRequest
import com.android254.presentation.common.theme.DroidconKE2023Theme
import com.android254.presentation.models.SpeakerUI
import com.droidconke.chai.atoms.MontserratMedium
import com.droidconke.chai.chaiColorsPalette
import ke.droidcon.kotlin.presentation.R

@Composable
fun HomeSpeakerComponent(speaker: SpeakerUI, onClick: () -> Unit = {}) {
ConstraintLayout(
modifier = Modifier
.height(110.dp)
.width(90.dp)
.padding(end = 16.dp)
.clickable { onClick.invoke() }
Expand Down Expand Up @@ -90,7 +91,7 @@ fun HomeSpeakerComponent(speaker: SpeakerUI, onClick: () -> Unit = {}) {
end.linkTo(parent.end)
},
style = TextStyle(
color = colorResource(id = R.color.dark),
color = MaterialTheme.chaiColorsPalette.textColorPrimary,
fontSize = 12.sp,
fontFamily = MontserratMedium
),
Expand Down
Loading

0 comments on commit 70bf82b

Please sign in to comment.