correct alignment of text to icons (#12756)

* correct alignment of text to icons

* Add documentation to padTopDescent()

---------

Co-authored-by: mrimvo <6030346+mrimvo@users.noreply.github.com>

core/src/com/unciv/ui/components/tilegroups/CityButton.kt

@@ -28,6 +28,7 @@ import com.unciv.ui.components.input.onClick
 import com.unciv.ui.components.input.onRightClick
 import com.unciv.ui.components.widgets.BorderedTable
 import com.unciv.ui.images.ImageGetter
+import com.unciv.ui.images.padTopDescent
 import com.unciv.ui.popups.Popup
 import com.unciv.ui.screens.basescreen.BaseScreen
 import com.unciv.ui.screens.cityscreen.CityReligionInfoTable
@@ -314,7 +315,7 @@ private class CityTable(city: City, forPopup: Boolean = false) : BorderedTable(
         }
 
         val cityName = city.name.toLabel(fontColor = textColor, alignment = Align.center, hideIcons = true)
-        table.add(cityName).growY().center()
+        table.add(cityName).growY().center().padTopDescent()
 
         if (!forPopup) {
             val cityReligion = city.religion.getMajorityReligion()

core/src/com/unciv/ui/images/IconTextButton.kt

@@ -10,8 +10,6 @@ import com.unciv.Constants
 import com.unciv.ui.components.fonts.Fonts
 import com.unciv.ui.components.extensions.toLabel
 import com.unciv.ui.screens.basescreen.BaseScreen
-import kotlin.math.floor
-import kotlin.math.ceil
 
 /**
  * Translate a [String] and make a [Button] widget from it, with control over font size, font colour, an optional icon, and custom formatting.
@@ -44,6 +42,15 @@ open class IconTextButton(
 
     init {
         pad(10f)
-        labelCell.padTop(10f - Fonts.getDescenderHeight(fontSize));
+        // aligned with icon
+        labelCell.padTopDescent()
     }
 }
+
+/**
+ * Intended for labels in tables that also contain icons, to ensure
+ * the label vertically aligns correctly to the icon, respecting the baseline of the text.
+ */
+fun Cell<Label>.padTopDescent(): Cell<Label> {
+    return padTop(Fonts.getDescenderHeight(Fonts.ORIGINAL_FONT_SIZE.toInt()) * actor.fontScaleY)
+}

core/src/com/unciv/ui/screens/cityscreen/CityScreenCityPickerTable.kt

@@ -8,6 +8,7 @@ import com.unciv.ui.components.widgets.UnitIconGroup
 import com.unciv.ui.components.input.onClick
 import com.unciv.ui.components.extensions.toLabel
 import com.unciv.ui.images.ImageGetter
+import com.unciv.ui.images.padTopDescent
 import com.unciv.ui.screens.basescreen.BaseScreen
 import com.unciv.ui.screens.pickerscreens.CityRenamePopup
 
@@ -66,11 +67,11 @@ class CityScreenCityPickerTable(private val cityScreen: CityScreen) : Table() {
         }
 
         currentCityLabel.setEllipsis(true)
-        cityNameTable.add(currentCityLabel).minWidth(0f).padTop(6f)
+        cityNameTable.add(currentCityLabel).minWidth(0f).padTopDescent()
         
         val currentCityPop = city.run { " (${population.population})" }
             .toLabel(fontSize = 30, fontColor = civInfo.nation.getInnerColor(), hideIcons = true)
-        cityNameTable.add(currentCityPop).padTop(6f)
+        cityNameTable.add(currentCityPop).padTopDescent()
 
         val garrison = city.getGarrison()
         if (garrison != null) {

core/src/com/unciv/ui/screens/mainmenuscreen/MainMenuScreen.kt

@@ -38,6 +38,7 @@ import com.unciv.ui.components.input.onLongPress
 import com.unciv.ui.components.tilegroups.TileGroupMap
 import com.unciv.ui.components.widgets.AutoScrollPane
 import com.unciv.ui.images.ImageGetter
+import com.unciv.ui.images.padTopDescent
 import com.unciv.ui.popups.Popup
 import com.unciv.ui.popups.ToastPopup
 import com.unciv.ui.popups.closeAllPopups
@@ -98,6 +99,7 @@ class MainMenuScreen: BaseScreen(), RecreateOnResize {
         )
         table.add(ImageGetter.getImage(icon)).size(50f).padRight(20f)
         table.add(text.toLabel(fontSize = 30, alignment = Align.left)).expand().left().minWidth(200f)
+            .padTopDescent()
 
         table.touchable = Touchable.enabled
         table.onActivation(binding = binding) {

core/src/com/unciv/ui/screens/worldscreen/status/NextTurnButton.kt

@@ -20,7 +20,7 @@ class NextTurnButton(
 ) : IconTextButton("", null, 30) {
     private var nextTurnAction = NextTurnAction.Default
     init {
-        labelCell.pad(10f)
+        pad(15f)
         onActivation { nextTurnAction.action(worldScreen) }
         onRightClick { NextTurnMenu(stage, this, this, worldScreen) }
         keyShortcuts.add(KeyboardBinding.NextTurn)

core/src/com/unciv/ui/screens/worldscreen/unit/UnitTable.kt

@@ -19,6 +19,7 @@ import com.unciv.ui.components.input.keyShortcuts
 import com.unciv.ui.components.input.onClick
 import com.unciv.ui.components.widgets.UnitIconGroup
 import com.unciv.ui.images.ImageGetter
+import com.unciv.ui.images.padTopDescent
 import com.unciv.ui.screens.basescreen.BaseScreen
 import com.unciv.ui.screens.pickerscreens.CityRenamePopup
 import com.unciv.ui.screens.pickerscreens.PromotionPickerScreen
@@ -104,7 +105,7 @@ class UnitTable(val worldScreen: WorldScreen) : Table() {
             val moveBetweenUnitsTable = Table().apply {
                 add(prevIdleUnitButton)
                 unitIconNameGroup.add(unitIconHolder)
-                unitIconNameGroup.add(unitNameLabel).apply { Fonts.font.descent }
+                unitIconNameGroup.add(unitNameLabel).padTopDescent()
                 unitIconHolder.touchable = Touchable.enabled
                 unitNameLabel.touchable = Touchable.enabled
                 add(unitIconNameGroup)

core/src/com/unciv/ui/screens/worldscreen/unit/actions/UnitActionsTable.kt

@@ -154,6 +154,7 @@ class UnitActionsTable(val worldScreen: WorldScreen) : Table() {
 
         val fontColor = if (unitAction.isCurrentAction) Color.YELLOW else Color.WHITE
         val actionButton = IconTextButton(unitAction.title, icon, fontColor = fontColor)
+        actionButton.labelCell.padTop(0f) // aligned with icon 
 
         if (unitAction.type == UnitActionType.Promote && unitAction.action != null)
             actionButton.color = Color.GREEN.brighten(0.5f)