Upgrade to BlueprintJS 4 (wrapper 7)

16 files changed, 99 insertions, 86 deletions

diff --git a/sw-ui/build.gradle.kts b/sw-ui/build.gradle.kts
index 8c1936c4..d1c4e6a8 100644
--- a/sw-ui/build.gradle.kts
+++ b/sw-ui/build.gradle.kts
@@ -20,7 +20,7 @@ kotlin {
                 implementation(libs.kotlin.wrappers.react.dom)
                 implementation(libs.kotlin.wrappers.react.redux)
                 implementation(libs.kotlin.wrappers.react.router.dom)
-                implementation(libs.kotlin.wrappers.styled)
+                implementation(libs.kotlin.wrappers.styled.next)
                 implementation(libs.kotlin.wrappers.blueprintjs.core)
                 implementation(libs.kotlin.wrappers.blueprintjs.icons)
             }
diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/SevenWondersUi.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/SevenWondersUi.kt
index 152ff1d5..44faede8 100644
--- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/SevenWondersUi.kt
+++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/SevenWondersUi.kt
@@ -1,21 +1,15 @@
 package org.luxons.sevenwonders.ui
 
-import kotlinx.browser.document
 import kotlinx.browser.window
-import kotlinx.coroutines.DelicateCoroutinesApi
-import kotlinx.coroutines.GlobalScope
-import kotlinx.coroutines.launch
-import org.luxons.sevenwonders.ui.components.application
-import org.luxons.sevenwonders.ui.redux.SwState
-import org.luxons.sevenwonders.ui.redux.configureStore
-import org.luxons.sevenwonders.ui.redux.sagas.SagaManager
-import org.luxons.sevenwonders.ui.redux.sagas.rootSaga
-import org.w3c.dom.Element
+import kotlinx.coroutines.*
+import org.luxons.sevenwonders.ui.components.*
+import org.luxons.sevenwonders.ui.redux.*
+import org.luxons.sevenwonders.ui.redux.sagas.*
 import react.dom.*
-import react.redux.provider
-import redux.RAction
-import redux.Store
-import redux.WrapperAction
+import react.redux.*
+import redux.*
+import web.dom.*
+import web.dom.document
 
 fun main() {
     window.onload = {
diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/errors/ErrorDialog.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/errors/ErrorDialog.kt
index 38b3617a..5ff56055 100644
--- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/errors/ErrorDialog.kt
+++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/errors/ErrorDialog.kt
@@ -1,18 +1,13 @@
 package org.luxons.sevenwonders.ui.components.errors
 
-import blueprintjs.core.Classes
-import blueprintjs.core.Intent
-import blueprintjs.core.bpButton
-import blueprintjs.core.bpDialog
-import blueprintjs.icons.IconNames
-import kotlinx.browser.window
+import blueprintjs.core.*
+import blueprintjs.icons.*
+import kotlinx.browser.*
 import org.luxons.sevenwonders.ui.redux.*
-import org.luxons.sevenwonders.ui.router.Navigate
-import org.luxons.sevenwonders.ui.router.SwRoute
+import org.luxons.sevenwonders.ui.router.*
 import react.*
 import react.dom.p
-import styled.css
-import styled.styledDiv
+import styled.*
 
 external interface ErrorDialogStateProps : PropsWithChildren {
     var errorMessage: String?
diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/GameScene.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/GameScene.kt
index e69882c4..cec41d6a 100644
--- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/GameScene.kt
+++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/GameScene.kt
@@ -20,9 +20,9 @@ import org.luxons.sevenwonders.model.cards.HandCard
 import org.luxons.sevenwonders.model.resources.ResourceTransactionOptions
 import org.luxons.sevenwonders.ui.components.GlobalStyles
 import org.luxons.sevenwonders.ui.redux.*
+import org.luxons.sevenwonders.ui.utils.*
 import react.*
 import styled.css
-import styled.getClassName
 import styled.styledDiv
 
 external interface GameSceneStateProps : PropsWithChildren {
@@ -147,7 +147,7 @@ private class GameScene(props: GameSceneProps) : RComponent<GameSceneProps, Game
     private fun RBuilder.actionInfo(message: String) {
         styledDiv {
             css {
-                classes.add("bp3-dark")
+                classes.add(Classes.DARK)
                 position = Position.fixed
                 top = 0.pct
                 left = 0.pct
@@ -156,7 +156,7 @@ private class GameScene(props: GameSceneProps) : RComponent<GameSceneProps, Game
             }
             bpCard(elevation = Elevation.TWO) {
                 attrs {
-                    this.className = GlobalStyles.getClassName { it::noPadding }
+                    this.className = GlobalStyles.getTypedClassName { it::noPadding }
                 }
                 bpCallout(intent = Intent.PRIMARY, icon = IconNames.INFO_SIGN) { +message }
             }
diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/GameStyles.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/GameStyles.kt
index 6b4388e3..86d2d101 100644
--- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/GameStyles.kt
+++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/GameStyles.kt
@@ -27,13 +27,13 @@ object GameStyles : StyleSheet("GameStyles", isStatic = true) {
         borderRadius = 0.5.rem
         padding(all = 0.5.rem)
 
-        children(".bp3-popover-content") {
+        children(".bp4-popover-content") {
             background = "none" // overrides default white background
         }
-        descendants(".bp3-popover-arrow-fill") {
+        descendants(".bp4-popover-arrow-fill") {
             put("fill", bgColor.toString()) // overrides default white arrow
         }
-        descendants(".bp3-popover-arrow::before") {
+        descendants(".bp4-popover-arrow::before") {
             // The popover arrow is implemented with a simple square rotated 45 degrees (like a rhombus).
             // Since we use a semi-transparent background, we can see the box shadow of the rest of the arrow through
             // the popover, and thus we see the square. This boxShadow(transparent) is to avoid that.
@@ -54,7 +54,7 @@ object GameStyles : StyleSheet("GameStyles", isStatic = true) {
         backgroundColor = sandBgColor
         width = 40.rem // default is 500px, we want to fit players on the side
 
-        children(".bp3-dialog-header") {
+        children(".bp4-dialog-header") {
             background = "none" // overrides default white background
         }
     }
diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/Hand.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/Hand.kt
index 0078fbd5..da17c987 100644
--- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/Hand.kt
+++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/Hand.kt
@@ -14,12 +14,12 @@ import org.luxons.sevenwonders.model.cards.CardPlayability
 import org.luxons.sevenwonders.model.cards.HandCard
 import org.luxons.sevenwonders.model.resources.ResourceTransactionOptions
 import org.luxons.sevenwonders.model.wonders.WonderBuildability
-import org.w3c.dom.HTMLButtonElement
 import react.*
 import react.dom.attrs
 import styled.StyledDOMBuilder
 import styled.css
 import styled.styledDiv
+import web.html.*
 import kotlin.math.absoluteValue
 
 private enum class HandAction(
@@ -126,7 +126,7 @@ class HandComponent(props: HandProps) : RComponent<HandProps, State>(props) {
         }
     }
 
-    private fun RElementBuilder<IButtonGroupProps>.playCardButton(card: HandCard, handAction: HandAction) {
+    private fun RElementBuilder<ButtonGroupProps>.playCardButton(card: HandCard, handAction: HandAction) {
         bpButton(
             title = "${handAction.buttonTitle} (${cardPlayabilityInfo(card.playability)})",
             large = true,
@@ -141,7 +141,7 @@ class HandComponent(props: HandProps) : RComponent<HandProps, State>(props) {
         }
     }
 
-    private fun RElementBuilder<IButtonGroupProps>.upgradeWonderButton(card: HandCard) {
+    private fun RElementBuilder<ButtonGroupProps>.upgradeWonderButton(card: HandCard) {
         val wonderBuildability = props.ownBoard.wonder.buildability
         bpButton(
             title = "UPGRADE WONDER (${wonderBuildabilityInfo(wonderBuildability)})",
@@ -164,7 +164,7 @@ class HandComponent(props: HandProps) : RComponent<HandProps, State>(props) {
         }
     }
 
-    private fun RElementBuilder<IButtonGroupProps>.discardButton(card: HandCard) {
+    private fun RElementBuilder<ButtonGroupProps>.discardButton(card: HandCard) {
         bpButton(
             title = "DISCARD (+3 coins)", // TODO remove hardcoded value
             large = true,
@@ -196,7 +196,7 @@ private fun pricePrefix(amount: Int) = when {
     else -> ""
 }
 
-private fun RElementBuilder<IButtonProps<HTMLButtonElement>>.priceInfo(amount: Int) {
+private fun RElementBuilder<ButtonProps<HTMLButtonElement>>.priceInfo(amount: Int) {
     val size = 1.rem
     goldIndicator(
         amount = amount,
diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/ScoreTable.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/ScoreTable.kt
index b89a02a8..01bf139b 100644
--- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/ScoreTable.kt
+++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/ScoreTable.kt
@@ -1,13 +1,21 @@
 package org.luxons.sevenwonders.ui.components.game
 
 import blueprintjs.core.*
+import csstype.*
 import kotlinx.css.*
+import kotlinx.css.Display
+import kotlinx.css.FlexDirection
+import kotlinx.css.TextAlign
+import kotlinx.css.VerticalAlign
+import kotlinx.css.px
+import kotlinx.css.rem
 import kotlinx.html.TD
 import kotlinx.html.TH
 import org.luxons.sevenwonders.model.api.PlayerDTO
 import org.luxons.sevenwonders.model.score.ScoreBoard
 import org.luxons.sevenwonders.model.score.ScoreCategory
 import org.luxons.sevenwonders.ui.components.GlobalStyles
+import org.luxons.sevenwonders.ui.utils.*
 import react.RBuilder
 import react.dom.*
 import styled.*
@@ -18,7 +26,7 @@ fun RBuilder.scoreTableOverlay(scoreBoard: ScoreBoard, players: List<PlayerDTO>,
             attrs {
                 val fixedCenterClass = GlobalStyles.getClassName { it::fixedCenter }
                 val scoreBoardClass = GameStyles.getClassName { it::scoreBoard }
-                className = "$fixedCenterClass $scoreBoardClass"
+                className = ClassName("$fixedCenterClass $scoreBoardClass")
             }
             styledDiv {
                 css {
@@ -77,7 +85,7 @@ private fun RBuilder.scoreTable(scoreBoard: ScoreBoard, players: List<PlayerDTO>
                     centeredTd {
                         bpTag(large = true, round = true, minimal = true) {
                             attrs {
-                                this.className = GameStyles.getClassName { it::totalScore }
+                                this.className = GameStyles.getTypedClassName { it::totalScore }
                             }
                             +"${score.totalPoints}"
                         }
@@ -132,7 +140,7 @@ private fun RBuilder.centeredTd(block: RDOMBuilder<TD>.() -> Unit) {
     }
 }
 
-private fun classNameForCategory(cat: ScoreCategory): String = GameStyles.getClassName {
+private fun classNameForCategory(cat: ScoreCategory): ClassName = GameStyles.getTypedClassName {
     when (cat) {
         ScoreCategory.CIVIL -> it::civilScore
         ScoreCategory.SCIENCE -> it::scienceScore
diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/TransactionsSelector.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/TransactionsSelector.kt
index b50f540f..66bc44d3 100644
--- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/TransactionsSelector.kt
+++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/TransactionsSelector.kt
@@ -12,6 +12,7 @@ import org.luxons.sevenwonders.model.api.PlayerDTO
 import org.luxons.sevenwonders.model.resources.*
 import org.luxons.sevenwonders.model.resources.Provider
 import org.luxons.sevenwonders.ui.components.gameBrowser.playerInfo
+import org.luxons.sevenwonders.ui.utils.*
 import react.*
 import react.dom.*
 import styled.*
@@ -31,7 +32,7 @@ fun RBuilder.transactionsSelectorDialog(
         onClose = cancelTransactionSelection,
     ) {
         attrs {
-            className = GameStyles.getClassName { it::transactionsSelector }
+            className = GameStyles.getTypedClassName { it::transactionsSelector }
         }
         div {
             attrs {
@@ -51,7 +52,7 @@ fun RBuilder.transactionsSelectorDialog(
                     neighbour(neighbours.first)
                     styledDiv {
                         css {
-                            grow(Grow.GROW)
+                            flex(Flex.GROW)
                             margin(horizontal = 0.5.rem)
                             display = Display.flex
                             flexDirection = FlexDirection.column
@@ -237,7 +238,7 @@ private fun RBuilder.resourceList(countedResources: List<CountedResource>) {
             flexDirection = FlexDirection.column
             alignItems = Align.center
             justifyContent = JustifyContent.center
-            grow(Grow.GROW)
+            flex(Flex.GROW)
             // this ensures stable dimensions, no matter how many resources (up to 2x3 matrix)
             width = imgSize * 3
             height = imgSize * 2
diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/CreateGameForm.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/CreateGameForm.kt
index 45bc3ae4..0d148744 100644
--- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/CreateGameForm.kt
+++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/CreateGameForm.kt
@@ -5,7 +5,6 @@ import blueprintjs.icons.*
 import kotlinx.css.*
 import kotlinx.html.js.*
 import org.luxons.sevenwonders.ui.redux.*
-import org.w3c.dom.*
 import react.*
 import react.dom.*
 import styled.*
@@ -43,7 +42,7 @@ private class CreateGameForm(props: CreateGameFormProps) : RComponent<CreateGame
                     large = true,
                     placeholder = "Game name",
                     onChange = { e ->
-                        val input = e.currentTarget as HTMLInputElement
+                        val input = e.currentTarget
                         state.gameName = input.value
                     },
                     rightElement = createGameButton(),
diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/GameBrowser.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/GameBrowser.kt
index 0f8cca86..579e6cb2 100644
--- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/GameBrowser.kt
+++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/GameBrowser.kt
@@ -1,17 +1,13 @@
 package org.luxons.sevenwonders.ui.components.gameBrowser
 
-import blueprintjs.core.Classes
-import blueprintjs.core.bpCard
+import blueprintjs.core.*
 import kotlinx.css.*
-import kotlinx.html.classes
+import kotlinx.html.*
 import org.luxons.sevenwonders.ui.components.GlobalStyles
-import react.RBuilder
-import react.dom.attrs
-import react.dom.h1
-import styled.css
-import styled.getClassName
-import styled.styledDiv
-import styled.styledH2
+import org.luxons.sevenwonders.ui.utils.*
+import react.*
+import react.dom.*
+import styled.*
 
 fun RBuilder.gameBrowser() = styledDiv {
     css {
@@ -36,7 +32,7 @@ fun RBuilder.gameBrowser() = styledDiv {
             currentPlayerInfo()
         }
 
-        bpCard(className = GameBrowserStyles.getClassName { it::createGameCard }) {
+        bpCard(className = GameBrowserStyles.getTypedClassName { it::createGameCard }) {
             styledH2 {
                 css { +GameBrowserStyles.cardTitle }
                 +"Create a Game"
diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/GameList.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/GameList.kt
index 466f9251..a1f47045 100644
--- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/GameList.kt
+++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/gameBrowser/GameList.kt
@@ -2,7 +2,14 @@ package org.luxons.sevenwonders.ui.components.gameBrowser
 
 import blueprintjs.core.*
 import blueprintjs.icons.IconNames
+import csstype.*
 import kotlinx.css.*
+import kotlinx.css.Display
+import kotlinx.css.FlexDirection
+import kotlinx.css.JustifyContent
+import kotlinx.css.TextAlign
+import kotlinx.css.VerticalAlign
+import kotlinx.css.rem
 import kotlinx.html.classes
 import kotlinx.html.title
 import org.luxons.sevenwonders.model.api.ConnectedPlayer
@@ -24,7 +31,7 @@ external interface GameListDispatchProps : PropsWithChildren {
     var joinGame: (Long) -> Unit
 }
 
-interface GameListProps : GameListStateProps, GameListDispatchProps
+external interface GameListProps : GameListStateProps, GameListDispatchProps
 
 class GameListPresenter(props: GameListProps) : RComponent<GameListProps, RState>(props) {
 
@@ -43,7 +50,7 @@ class GameListPresenter(props: GameListProps) : RComponent<GameListProps, RState
         ) {
             styledDiv {
                 attrs {
-                    classes += "bp3-running-text"
+                    classes += Classes.RUNNING_TEXT
                 }
                 css {
                     maxWidth = 35.rem
@@ -57,7 +64,7 @@ class GameListPresenter(props: GameListProps) : RComponent<GameListProps, RState
     private fun RBuilder.gamesTable() {
         bpHtmlTable {
             attrs {
-                className = GameBrowserStyles.getClassName { it::gameTable }
+                className = ClassName(GameBrowserStyles.getClassName { it::gameTable })
             }
             columnWidthsSpec()
             thead {
@@ -71,7 +78,7 @@ class GameListPresenter(props: GameListProps) : RComponent<GameListProps, RState
         }
     }
 
-    private fun RElementBuilder<IHTMLTableProps>.columnWidthsSpec() {
+    private fun RElementBuilder<HTMLTableProps>.columnWidthsSpec() {
         colgroup {
             styledCol {
                 css {
diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/ChooseNameForm.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/ChooseNameForm.kt
index 279e94f2..27a2057c 100644
--- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/ChooseNameForm.kt
+++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/ChooseNameForm.kt
@@ -1,18 +1,12 @@
 package org.luxons.sevenwonders.ui.components.home
 
-import blueprintjs.core.Intent
-import blueprintjs.core.bpButton
-import blueprintjs.core.bpInputGroup
-import blueprintjs.icons.IconNames
+import blueprintjs.core.*
+import blueprintjs.icons.*
 import kotlinx.css.*
-import kotlinx.html.js.onSubmitFunction
-import org.luxons.sevenwonders.ui.redux.RequestChooseName
-import org.luxons.sevenwonders.ui.redux.connectDispatch
-import org.w3c.dom.HTMLInputElement
+import kotlinx.html.js.*
+import org.luxons.sevenwonders.ui.redux.*
 import react.*
-import styled.css
-import styled.styledDiv
-import styled.styledForm
+import styled.*
 
 private external interface ChooseNameFormProps : PropsWithChildren {
     var chooseUsername: (String) -> Unit
@@ -46,7 +40,7 @@ private class ChooseNameForm(props: ChooseNameFormProps) : RComponent<ChooseName
                 rightElement = submitButton(),
                 value = state.username,
                 onChange = { e ->
-                    val input = e.currentTarget as HTMLInputElement
+                    val input = e.currentTarget
                     setState {
                         username = input.value
                     }
diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/Lobby.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/Lobby.kt
index 1cb4989c..7435ffb0 100644
--- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/Lobby.kt
+++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/Lobby.kt
@@ -1,20 +1,23 @@
 package org.luxons.sevenwonders.ui.components.lobby
 
 import blueprintjs.core.*
-import blueprintjs.icons.IconNames
+import blueprintjs.icons.*
+import csstype.*
 import kotlinx.css.*
+import kotlinx.css.Display
+import kotlinx.css.JustifyContent
 import kotlinx.css.Position
-import kotlinx.css.properties.transform
-import kotlinx.css.properties.translate
-import org.luxons.sevenwonders.model.api.LobbyDTO
-import org.luxons.sevenwonders.model.api.PlayerDTO
+import kotlinx.css.pct
+import kotlinx.css.properties.*
+import kotlinx.css.px
+import kotlinx.css.rem
+import org.luxons.sevenwonders.model.api.*
 import org.luxons.sevenwonders.model.wonders.*
 import org.luxons.sevenwonders.ui.components.GlobalStyles
 import org.luxons.sevenwonders.ui.redux.*
 import react.*
-import react.dom.h1
-import react.dom.h3
-import react.dom.h4
+import react.State
+import react.dom.*
 import styled.*
 
 private val BOT_NAMES = listOf("Wall-E", "B-Max", "Sonny", "T-800", "HAL", "GLaDOS", "R2-D2", "Bender", "AWESOM-O")
@@ -121,7 +124,7 @@ class LobbyPresenter(props: LobbyProps) : RComponent<LobbyProps, State>(props) {
             css {
                 +LobbyStyles.setupPanel
             }
-            bpCard(Elevation.TWO, className = Classes.DARK) {
+            bpCard(Elevation.TWO, className = ClassName(Classes.DARK)) {
                 styledH2 {
                     css {
                         margin(top = 0.px)
diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/RadialPlayerList.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/RadialPlayerList.kt
index 22fcd3ad..2084b7c0 100644
--- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/RadialPlayerList.kt
+++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/lobby/RadialPlayerList.kt
@@ -2,7 +2,13 @@ package org.luxons.sevenwonders.ui.components.lobby
 
 import blueprintjs.core.bpIcon
 import blueprintjs.core.bpTag
+import csstype.*
 import kotlinx.css.*
+import kotlinx.css.Color
+import kotlinx.css.Display
+import kotlinx.css.FlexDirection
+import kotlinx.css.px
+import kotlinx.css.rem
 import kotlinx.html.DIV
 import org.luxons.sevenwonders.model.api.PlayerDTO
 import org.luxons.sevenwonders.model.api.actions.Icon
@@ -112,16 +118,16 @@ private fun RBuilder.playerElement(playerItem: PlayerItem) {
                 css {
                     marginTop = 0.3.rem
 
-                    // this is to overcome ".bp3-dark .bp3-tag" on the nested bpTag
+                    // this is to overcome ".bp4-dark .bp4-tag" on the nested bpTag
                     children(".wonder-tag") {
-                        color = Color("#f5f8fa") // blueprintjs dark theme color (removed by .bp3-tag)
+                        color = Color("#f5f8fa") // blueprintjs dark theme color (removed by .bp4-tag)
                         backgroundColor = when (wonder.side) {
                             WonderSide.A -> Color.seaGreen
                             WonderSide.B -> Color.darkRed
                         }
                     }
                 }
-                bpTag(round = true, className = "wonder-tag") {
+                bpTag(round = true, className = ClassName("wonder-tag")) {
                     +"${wonder.name} ${wonder.side}"
                 }
             }
diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/utils/StyleUtils.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/utils/StyleUtils.kt
new file mode 100644
index 00000000..d438c259
--- /dev/null
+++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/utils/StyleUtils.kt
@@ -0,0 +1,10 @@
+package org.luxons.sevenwonders.ui.utils
+
+import csstype.ClassName
+import kotlinx.css.*
+import styled.*
+import kotlin.reflect.*
+
+fun <T : StyleSheet> T.getTypedClassName(getClass: (T) -> KProperty0<RuleSet>): ClassName {
+    return ClassName(getClassName(getClass))
+}
diff --git a/sw-ui/src/main/resources/index.html b/sw-ui/src/main/resources/index.html
index 304be751..b43c1428 100644
--- a/sw-ui/src/main/resources/index.html
+++ b/sw-ui/src/main/resources/index.html
@@ -9,8 +9,8 @@
     <!-- Style dependencies -->
     <link href="https://unpkg.com/normalize.css@^7.0.0" rel="stylesheet"/>
     <!-- Blueprint stylesheets -->
-    <link href="https://unpkg.com/@blueprintjs/icons@^3.4.0/lib/css/blueprint-icons.css" rel="stylesheet"/>
-    <link href="https://unpkg.com/@blueprintjs/core@^3.10.0/lib/css/blueprint.css" rel="stylesheet"/>
+    <link href="https://unpkg.com/@blueprintjs/icons@^4.13.0/lib/css/blueprint-icons.css" rel="stylesheet"/>
+    <link href="https://unpkg.com/@blueprintjs/core@^4.15.0/lib/css/blueprint.css" rel="stylesheet"/>
   </head>
   <body>
     <div id="root"></div>