@@ -30,6 +30,7 @@ import androidx.compose.ui.Alignment
3030import androidx.compose.ui.Modifier
3131import androidx.compose.ui.graphics.Color
3232import androidx.compose.ui.graphics.SolidColor
33+ import androidx.compose.ui.res.stringResource
3334import androidx.compose.ui.text.input.KeyboardCapitalization
3435import androidx.compose.ui.text.style.TextAlign
3536import androidx.compose.ui.tooling.preview.PreviewLightDark
@@ -41,6 +42,7 @@ import com.github.skydoves.colorpicker.compose.HsvColorPicker
4142import com.github.skydoves.colorpicker.compose.rememberColorPickerController
4243import kotlinx.coroutines.launch
4344import kotlinx.serialization.Serializable
45+ import net.frozendevelopment.openletters.R
4446import net.frozendevelopment.openletters.data.sqldelight.models.CategoryId
4547import net.frozendevelopment.openletters.extensions.Random
4648import net.frozendevelopment.openletters.extensions.contrastColor
@@ -106,6 +108,7 @@ fun CategoryFormView(
106108
107109 Column (
108110 verticalArrangement = Arrangement .spacedBy(16 .dp),
111+ horizontalAlignment = Alignment .CenterHorizontally ,
109112 ) {
110113 CenterAlignedTopAppBar (
111114 title = { Text (text = state.title) },
@@ -133,10 +136,9 @@ fun CategoryFormView(
133136 }
134137
135138 CategoryPill (
136- modifier =
137- Modifier
138- .padding(horizontal = 16 .dp)
139- .fillMaxWidth(),
139+ modifier = Modifier
140+ .padding(horizontal = 16 .dp)
141+ .fillMaxWidth(),
140142 color = state.color,
141143 ) {
142144 BasicTextField (
@@ -155,7 +157,7 @@ fun CategoryFormView(
155157 ) { innerTextField ->
156158 if (state.label.isBlank() && ! isFocused) {
157159 Text (
158- text = " Tap to type your label " ,
160+ text = stringResource( R .string.tap_to_type_your_label) ,
159161 color = state.color.contrastColor,
160162 style = MaterialTheme .typography.titleLarge,
161163 )
@@ -167,36 +169,41 @@ fun CategoryFormView(
167169
168170 HorizontalDivider ()
169171
172+ HsvColorPicker (
173+ modifier = Modifier
174+ .fillMaxWidth()
175+ .weight(1f )
176+ .padding(horizontal = 16 .dp),
177+ onColorChanged = { onColorChanged(it.color) },
178+ controller = controller,
179+ initialColor = state.color,
180+ )
181+
182+ BrightnessSlider (
183+ modifier = Modifier
184+ .fillMaxWidth()
185+ .height(35 .dp)
186+ .padding(horizontal = 16 .dp),
187+ controller = controller,
188+ borderRadius = 32 .dp,
189+ )
190+
170191 TextButton (
171- modifier = Modifier .fillMaxWidth(.95f ),
192+ modifier = Modifier
193+ .fillMaxWidth()
194+ .padding(16 .dp)
195+ .navigationBarsPadding(),
172196 onClick = {
173197 val color = Color .Random
174198 controller.selectByColor(color, true )
175199 onColorChanged(color)
176200 },
177201 ) {
178- Text (text = " Randomize Color" )
202+ Text (
203+ text = " Randomize Color" ,
204+ style = MaterialTheme .typography.titleLarge,
205+ )
179206 }
180-
181- BrightnessSlider (
182- modifier =
183- Modifier
184- .fillMaxWidth(.95f )
185- .height(35 .dp),
186- controller = controller,
187- borderRadius = 32 .dp,
188- )
189-
190- HsvColorPicker (
191- modifier =
192- Modifier
193- .fillMaxWidth()
194- .navigationBarsPadding()
195- .padding(horizontal = 16 .dp),
196- onColorChanged = { onColorChanged(it.color) },
197- controller = controller,
198- initialColor = state.color,
199- )
200207 }
201208}
202209
@@ -219,11 +226,11 @@ private fun CategoryFormPreview(state: CategoryFormState) {
219226@PreviewLightDark
220227private fun CategoryForm () {
221228 CategoryFormPreview (
222- state =
223- CategoryFormState (
224- mode = CategoryFormDestination . Mode . Create ,
225- label = " " ,
226- color = Color ( 0xFF0F0FF0 ) ,
227- ),
229+ state = CategoryFormState (
230+ mode = CategoryFormDestination . Mode . Create ,
231+ label = " " ,
232+ color = Color ( 0xFF0F0FF0 ) ,
233+ isBusy = false ,
234+ ),
228235 )
229236}
0 commit comments