Touch Target + Color Tweaks (#102)

Changed the color for the clock icon Playing with touch target size for actions
EmergeTools · Aug 7, 2024 · 73d1ae6 · 73d1ae6
1 parent e9ed503
commit 73d1ae6
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 17 deletions.
diff --git a/android/app/src/main/java/com/emergetools/hackernews/features/comments/CommentsScreen.kt b/android/app/src/main/java/com/emergetools/hackernews/features/comments/CommentsScreen.kt
@@ -61,7 +61,7 @@ import com.emergetools.hackernews.features.stories.MetadataTag
 import com.emergetools.hackernews.ui.theme.HackerGreen
 import com.emergetools.hackernews.ui.theme.HackerNewsTheme
 import com.emergetools.hackernews.ui.theme.HackerOrange
-import com.emergetools.hackernews.ui.theme.HackerRed
+import com.emergetools.hackernews.ui.theme.HackerPurple
 
 @Composable
 fun CommentsScreen(
@@ -276,15 +276,15 @@ fun CommentRow(
             modifier = Modifier
               .wrapContentSize()
               .clip(CircleShape)
+              .clickable { onLikeTapped(state) }
               .background(
                 color = if (state.upvoted) {
                   HackerGreen.copy(alpha = 0.2f)
                 } else {
                   MaterialTheme.colorScheme.surfaceContainerHighest
                 }
               )
-              .padding(4.dp)
-              .clickable { onLikeTapped(state) },
+              .padding(vertical = 4.dp, horizontal = 8.dp),
             contentAlignment = Alignment.Center
           ) {
             Icon(
@@ -295,7 +295,7 @@ fun CommentRow(
               } else {
                 MaterialTheme.colorScheme.onSurface
               },
-              contentDescription = "upvote"
+              contentDescription = "Upvote"
             )
           }
         }
@@ -471,7 +471,7 @@ fun ItemHeader(
               Icon(
                 modifier = Modifier.size(12.dp),
                 painter = painterResource(R.drawable.ic_time_outline),
-                tint = HackerRed,
+                tint = HackerPurple,
                 contentDescription = "Time Posted"
               )
             }
@@ -558,7 +558,7 @@ fun ItemHeader(
               modifier = Modifier
                 .size(12.dp)
                 .clip(RoundedCornerShape(4.dp))
-                .background(HackerRed.copy(alpha = skeletonAlpha))
+                .background(HackerPurple.copy(alpha = skeletonAlpha))
             )
             Box(
               modifier = Modifier
@@ -704,4 +704,4 @@ fun PostCommentBump(
       ),
     )
   }
-}
+}
diff --git a/android/app/src/main/java/com/emergetools/hackernews/features/stories/StoriesScreen.kt b/android/app/src/main/java/com/emergetools/hackernews/features/stories/StoriesScreen.kt
@@ -75,6 +75,7 @@ import com.emergetools.hackernews.ui.theme.HackerBlue
 import com.emergetools.hackernews.ui.theme.HackerGreen
 import com.emergetools.hackernews.ui.theme.HackerNewsTheme
 import com.emergetools.hackernews.ui.theme.HackerOrange
+import com.emergetools.hackernews.ui.theme.HackerPurple
 import com.emergetools.hackernews.ui.theme.HackerRed
 import com.emergetools.snapshots.annotations.EmergeAppStoreSnapshot
 
@@ -294,8 +295,8 @@ fun StoryRow(
             Icon(
               modifier = Modifier.size(12.dp),
               painter = painterResource(R.drawable.ic_time_outline),
-              tint = HackerRed,
-              contentDescription = "Likes"
+              tint = HackerPurple,
+              contentDescription = "Time Posted"
             )
           }
           Spacer(modifier = Modifier.weight(1f))
@@ -386,7 +387,7 @@ fun StoryRow(
               modifier = Modifier
                 .size(12.dp)
                 .clip(RoundedCornerShape(4.dp))
-                .background(color = HackerRed.copy(alpha = skeletonAlpha))
+                .background(color = HackerPurple.copy(alpha = skeletonAlpha))
             )
             Box(
               modifier = Modifier

diff --git a/android/app/src/main/java/com/emergetools/hackernews/ui/theme/Color.kt b/android/app/src/main/java/com/emergetools/hackernews/ui/theme/Color.kt
@@ -4,15 +4,10 @@ import androidx.compose.ui.graphics.Color
 
 val HackerOrange = Color(0xFFF59342)
 val HackerOrangeLight = Color(0xFFFCE0C9)
-
 val HackerRed = Color(0xFFEF476F)
-val HackerRedLight = Color(0xFFF8B1C1)
-
 val HackerBlue = Color(0xFF118AB2)
-val HackerBlueLight = Color(0xFFACE5F7)
-
 val HackerGreen = Color(0xFF06D6A0)
-val HackerGreenLight = Color(0xFFAEFDE8)
+val HackerPurple = Color(0xFFC448F0)
 
 val BackgroundLight = Color(0xFFF9F9FF)
 val BackgroundDark = Color(0xFF121317)

diff --git a/android/app/src/main/java/com/emergetools/hackernews/ui/theme/Theme.kt b/android/app/src/main/java/com/emergetools/hackernews/ui/theme/Theme.kt
@@ -14,6 +14,7 @@ private val LightColorScheme = lightColorScheme(
   primaryContainer = HackerOrangeLight,
   background = BackgroundLight,
   surface = SurfaceLight,
+  surfaceContainer = SurfaceLight,
   onBackground = OnBackgroundLight,
   onSurface = OnSurfaceLight
 )
@@ -23,6 +24,7 @@ private val DarkColorScheme = darkColorScheme(
   primaryContainer = HackerOrangeLight,
   background = BackgroundDark,
   surface = SurfaceDark,
+  surfaceContainer = SurfaceDark,
   onBackground = OnBackgroundDark,
   onSurface = OnSurfaceDark
 )
@@ -50,4 +52,4 @@ fun HackerNewsTheme(
     typography = Typography,
     content = content
   )
-}
+}