Improve counter UI

Swap location of plus and minus buttons Add colors to the plus and minus buttons
robototes · Mar 18, 2024 · 122afd9 · 122afd9
1 parent ca62547
commit 122afd9
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 10 deletions.
diff --git a/app/src/main/java/com/scouting/app/components/InputComponents.kt b/app/src/main/java/com/scouting/app/components/InputComponents.kt
@@ -11,6 +11,7 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.painter.Painter
+import androidx.compose.ui.res.colorResource
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.input.KeyboardType
@@ -104,36 +105,38 @@ fun CounterBar(
         ) {
             IconButton(
                 onClick = {
-                    temporaryCount += incrementStep
+                    temporaryCount -= incrementStep
                     onValueChange.invoke(temporaryCount)
                 },
-                modifier = Modifier.padding(start = 5.dp),
+                modifier = Modifier.padding(end = 5.dp),
                 enabled = enabled,
                 colors = IconButtonDefaults.iconButtonColors(
                     disabledContentColor = MaterialTheme.colorScheme.onBackground
                 )
             ) {
                 Icon(
-                    painter = painterResource(id = R.drawable.ic_add_circle),
-                    contentDescription = stringResource(id = R.string.ic_add_circle_content_desc),
-                    modifier = Modifier.size(30.dp)
+                    painter = painterResource(id = R.drawable.ic_subtract_circle),
+                    contentDescription = stringResource(id = R.string.ic_subtract_circle_content_desc),
+                    modifier = Modifier.size(30.dp),
+                    tint = colorResource(id = R.color.minus)
                 )
             }
             IconButton(
                 onClick = {
-                    temporaryCount -= incrementStep
+                    temporaryCount += incrementStep
                     onValueChange.invoke(temporaryCount)
                 },
-                modifier = Modifier.padding(end = 5.dp),
+                modifier = Modifier.padding(start = 5.dp),
                 enabled = enabled,
                 colors = IconButtonDefaults.iconButtonColors(
                     disabledContentColor = MaterialTheme.colorScheme.onBackground
                 )
             ) {
                 Icon(
-                    painter = painterResource(id = R.drawable.ic_subtract_circle),
-                    contentDescription = stringResource(id = R.string.ic_subtract_circle_content_desc),
-                    modifier = Modifier.size(30.dp)
+                    painter = painterResource(id = R.drawable.ic_add_circle),
+                    contentDescription = stringResource(id = R.string.ic_add_circle_content_desc),
+                    modifier = Modifier.size(30.dp),
+                    tint = colorResource(id = R.color.plus)
                 )
             }
         }

diff --git a/app/src/main/res/values/colors.xml b/app/src/main/res/values/colors.xml
@@ -7,5 +7,7 @@
     <color name="teal_700">#FF018786</color>
     <color name="black">#FF000000</color>
     <color name="white">#FFFFFFFF</color>
+    <color name="plus">#20E000</color>
+    <color name="minus">#E00000</color>
     <color name="ic_launcher_background">#CBC3FF</color>
 </resources>