SkillDialog feedback updates

Update sheet handle
Box is now 70×70dp
Tone down text weights
Set chip bg to Blue500@24%
Adjust chip text colors
Use designed MP icon
Match “Use Skill” button style

Habitica/res/values/strings.xml

@@ -1039,6 +1039,7 @@
     <string name="mana_description">Mana points are unlocked with the class system at level 10 and allow you to **use Skills** once you begin learning them at level 11.\n\nSome **MP is restored** at day reset every day, but you can regain more by completing tasks or using a Mage class skill.</string>
     <string name="stat_allocation">Stat Allocation</string>
     <string name="stat_description">All Habitica characters have four stats that affect the gameplay aspects of Habitica.\n\n**Strength (STR)** affects critical hits and raises damage done to a Quest Boss. Warriors and Rogues gain STR from their class equipment.\n\n**Constitution (CON)** raises your HP and makes you take less damage. Healers and Warriors gain CON from their class equipment.\n\n**Intelligence (INT)** raises the amount of EXP you earn and gives you more Mana. Mages and Healers gain INT from their class equipment.\n\n**Perception (PER)** increases the gold you earn and the rate of finding dropped items. Rogues and Mages gain PER from their class equipment.\n\nAfter level 10, you earn 1 Stat Point every level you gain that you can put into any stat you’d like. You can also equip gear that has different combinations of stat boosts.</string>
+    <string name="use_skill">Use Skill</string>
 
     <string name="standard"> Standard </string>
     <string name="premium_currency">Premium Currency</string>

Habitica/src/main/java/com/habitrpg/android/habitica/ui/views/SkillDialog.kt

@@ -25,10 +25,12 @@ import androidx.compose.material3.Icon
 import androidx.compose.foundation.layout.size
 import androidx.compose.ui.res.painterResource
 import androidx.compose.foundation.background
+import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.*
-import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.painter.Painter
+import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
 import com.habitrpg.android.habitica.ui.theme.pixelArtBackground
 
@@ -44,6 +46,10 @@ fun SkillDialog(
     onUseSkill: () -> Unit,
 ) {
     val colors = HabiticaTheme.colors
+    val isDark = isSystemInDarkTheme()
+    val chipBg = colorResource(R.color.blue_500_24)
+    val chipTextColor = if (isDark) colorResource(R.color.blue_500) else colorResource(R.color.blue_10)
+
     Box(
         modifier
             .fillMaxWidth()
@@ -55,23 +61,23 @@ fun SkillDialog(
             modifier = Modifier.fillMaxWidth()
         ) {
             Box(
-                Modifier
-                    .padding(bottom = 12.dp)
-                    .size(width = 38.dp, height = 6.dp)
-                    .clip(CircleShape)
-                    .background(colors.textSecondary)
+                modifier =
+                    Modifier
+                        .padding(bottom = 16.dp)
+                        .background(colorResource(R.color.content_background_offset))
+                        .size(24.dp, 3.dp)
             )
 
             Box(
                 Modifier
-                    .size(54.dp)
+                    .size(70.dp)
                     .clip(RoundedCornerShape(12.dp))
                     .background(colors.pixelArtBackground(hasIcon = true)),
                 contentAlignment = Alignment.Center
             ) {
                 PixelArtView (
                     imageName = skillPath + skillKey,
-                    modifier = Modifier.size(48.dp)
+                    modifier = Modifier.size(62.dp)
                 )
             }
 
@@ -79,15 +85,15 @@ fun SkillDialog(
 
             Text(
                 text = title,
-                fontSize = 22.sp,
-                fontWeight = FontWeight.Bold,
+                fontSize = 16.sp,
+                fontWeight = FontWeight.Normal,
                 color = colors.textPrimary,
                 modifier = Modifier.padding(top = 2.dp)
             )
 
             Text(
                 text = description,
-                fontSize = 15.sp,
+                fontSize = 14.sp,
                 color = colors.textSecondary,
                 modifier = Modifier.padding(top = 8.dp),
                 textAlign = TextAlign.Center
@@ -99,20 +105,20 @@ fun SkillDialog(
                 verticalAlignment = Alignment.CenterVertically,
                 modifier = Modifier
                     .clip(RoundedCornerShape(20.dp))
-                    .background(Color(0xFF393F68))
+                    .background(chipBg)
                     .padding(horizontal = 20.dp, vertical = 8.dp)
             ) {
                 Icon(
                     painter = resourceIconPainter,
                     contentDescription = null,
-                    tint = Color(0xFF77C7F7),
+                    tint = Color.Unspecified,
                     modifier = Modifier.size(22.dp)
                 )
                 Spacer(Modifier.width(8.dp))
                 Text(
                     text = mpCost,
-                    color = Color.White,
-                    fontWeight = FontWeight.Bold,
+                    color = chipTextColor,
+                    fontWeight = FontWeight.Normal,
                     fontSize = 16.sp
                 )
             }
@@ -121,21 +127,22 @@ fun SkillDialog(
 
             Button(
                 onClick = onUseSkill,
+                shape = RoundedCornerShape(8.dp),
                 colors = ButtonDefaults.buttonColors(
-                    containerColor = Color(0xFFA380FC),
+                    containerColor = colorResource(R.color.brand_400),
                     contentColor = Color.White
                 ),
                 modifier = Modifier
                     .fillMaxWidth()
                     .height(48.dp)
-                    .clip(RoundedCornerShape(12.dp))
             ) {
                 Text(
-                    text = "Use Skill",
-                    fontWeight = FontWeight.Bold,
+                    text = stringResource(R.string.use_skill),
+                    fontWeight = FontWeight.Normal,
                     fontSize = 17.sp
                 )
             }
+
         }
     }
 }