- Update the token sheet to use the handle style/spacing from pause damage

- Update Pause/Resume damage view title/description spacings
- Update Pasue/Resume damage header font styling

(Also added a preview for pause/resume damage compose)

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

@@ -41,10 +41,9 @@ fun ApiTokenBottomSheet(
         modifier
             .fillMaxWidth()
             .background(background, RoundedCornerShape(22.dp))
-            .padding(horizontal = 20.dp, vertical = 14.dp)
+            .padding(horizontal = 20.dp, vertical = 8.dp)
     ) {
         Column(Modifier.fillMaxWidth()) {
-            Spacer(modifier = Modifier.height(8.dp))
             Box(
                 modifier = Modifier
                     .padding(bottom = 16.dp)
@@ -65,7 +64,7 @@ fun ApiTokenBottomSheet(
                 stringResource(id = R.string.api_token_is_password),
                 color = mainTextColor,
                 fontSize = 17.sp,
-                fontWeight = FontWeight.Medium,
+                fontWeight = FontWeight.Normal,
             )
             Spacer(modifier = Modifier.height(8.dp))
             Text(
@@ -80,7 +79,7 @@ fun ApiTokenBottomSheet(
                 stringResource(id = R.string.api_token_reset_title),
                 color = mainTextColor,
                 fontSize = 17.sp,
-                fontWeight = FontWeight.Medium,
+                fontWeight = FontWeight.Normal,
             )
             Spacer(modifier = Modifier.height(8.dp))
             Text(

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

@@ -1,5 +1,6 @@
 package com.habitrpg.android.habitica.ui.views.preferences
 
+import android.content.res.Configuration
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
@@ -12,6 +13,7 @@ import androidx.compose.ui.res.colorResource
 import androidx.compose.ui.res.stringResource
 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.habitrpg.android.habitica.R
@@ -25,6 +27,8 @@ fun PauseResumeDamageView(
     onClick: () -> Unit,
     modifier: Modifier = Modifier
 ) {
+    val colors = HabiticaTheme.colors
+    val mainTextColor = colors.textPrimary
     Column(
         horizontalAlignment = Alignment.Start,
         modifier =
@@ -89,10 +93,10 @@ fun PauseResumeDamageView(
         } else {
             Text(
                 stringResource(R.string.pause_damage),
-                color = HabiticaTheme.colors.textSecondary,
+                fontSize = 21.sp,
-                fontSize = 16.sp,
+                color = mainTextColor,
+                fontWeight = FontWeight.SemiBold,
                 textAlign = TextAlign.Center,
-                fontWeight = FontWeight.Medium,
                 modifier =
                 Modifier
                     .padding(bottom = 18.dp)
@@ -102,12 +106,16 @@ fun PauseResumeDamageView(
                 stringResource(R.string.pause_damage_1_title),
                 color = HabiticaTheme.colors.textPrimary,
                 fontWeight = FontWeight.Normal,
-                fontSize = 16.sp
+                fontSize = 16.sp,
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(bottom = 8.dp)
             )
             Text(
                 stringResource(R.string.pause_damage_1_description),
                 color = HabiticaTheme.colors.textSecondary,
                 fontSize = 14.sp,
+                lineHeight = 20.sp,
                 fontWeight = FontWeight.Normal,
                 modifier = Modifier.padding(bottom = 12.dp)
             )
@@ -115,27 +123,37 @@ fun PauseResumeDamageView(
                 stringResource(R.string.pause_damage_2_title),
                 color = HabiticaTheme.colors.textPrimary,
                 fontWeight = FontWeight.Normal,
-                fontSize = 16.sp
+                fontSize = 16.sp,
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(bottom = 8.dp)
             )
             Text(
                 stringResource(R.string.pause_damage_2_description),
                 color = HabiticaTheme.colors.textSecondary,
                 fontSize = 14.sp,
+                lineHeight = 20.sp,
                 fontWeight = FontWeight.Normal,
-                modifier = Modifier.padding(bottom = 12.dp)
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(bottom = 12.dp)
             )
             Text(
                 stringResource(R.string.pause_damage_3_title),
                 color = HabiticaTheme.colors.textPrimary,
                 fontWeight = FontWeight.Normal,
-                fontSize = 16.sp
+                fontSize = 16.sp,
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(bottom = 8.dp)
             )
             Text(
                 stringResource(R.string.pause_damage_3_description),
                 color = HabiticaTheme.colors.textSecondary,
                 fontSize = 14.sp,
+                lineHeight = 20.sp,
                 fontWeight = FontWeight.Normal,
-                modifier = Modifier.padding(bottom = 18.dp)
+                modifier = Modifier.padding(bottom = 24.dp)
             )
             HabiticaButton(
                 background = colorResource(R.color.yellow_100),
@@ -150,3 +168,19 @@ fun PauseResumeDamageView(
         }
     }
 }
+
+@Preview(
+    showBackground = true,
+    widthDp = 360,
+    name = "Pause Damage (isPaused = false)",
+    uiMode = Configuration.UI_MODE_NIGHT_YES
+)
+@Composable
+private fun PauseDamagePreview() {
+    HabiticaTheme {
+        PauseResumeDamageView(
+            isPaused = false,
+            onClick = {}
+        )
+    }
+}