Fix transparency of callout component by wrapping in card

2 files changed, 23 insertions, 22 deletions

diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/GlobalStyles.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/GlobalStyles.kt
index 9a4c15a6..97a9fbfa 100644
--- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/GlobalStyles.kt
+++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/GlobalStyles.kt
@@ -1,17 +1,8 @@
 package org.luxons.sevenwonders.ui.components
 
-import kotlinx.css.Overflow
-import kotlinx.css.Position
-import kotlinx.css.bottom
-import kotlinx.css.left
-import kotlinx.css.overflow
-import kotlinx.css.pct
-import kotlinx.css.position
+import kotlinx.css.*
 import kotlinx.css.properties.transform
 import kotlinx.css.properties.translate
-import kotlinx.css.px
-import kotlinx.css.right
-import kotlinx.css.top
 import styled.StyleSheet
 
 object GlobalStyles : StyleSheet("GlobalStyles", isStatic = true) {
@@ -42,4 +33,8 @@ object GlobalStyles : StyleSheet("GlobalStyles", isStatic = true) {
             translate((-50).pct, (-50).pct)
         }
     }
+
+    val noPadding by css {
+        padding(all = 0.px)
+    }
 }
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 06cb5b00..ce32e8b9 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
@@ -18,10 +18,7 @@ import org.luxons.sevenwonders.ui.redux.RequestUnprepareMove
 import org.luxons.sevenwonders.ui.redux.connectStateAndDispatch
 import react.*
 import react.dom.*
-import styled.StyledDOMBuilder
-import styled.css
-import styled.styledDiv
-import styled.styledImg
+import styled.*
 
 interface GameSceneStateProps : RProps {
     var playerIsReady: Boolean
@@ -60,14 +57,7 @@ private class GameScene(props: GameSceneProps) : RComponent<GameSceneProps, RSta
     private fun RBuilder.turnInfoScene(turnInfo: PlayerTurnInfo) {
         val board = turnInfo.table.boards[turnInfo.playerIndex]
         div {
-            styledDiv {
-                css {
-                    classes.add("bp3-dark")
-                    display = Display.inlineBlock // so that the cards below don't overlap, but the width is not full
-                    margin(all = 0.4.rem)
-                }
-                bpCallout(intent = Intent.PRIMARY, icon = "info-sign") { +turnInfo.message }
-            }
+            actionInfo(turnInfo.message)
             boardComponent(board = board)
             val hand = turnInfo.hand
             if (hand != null) {
@@ -90,6 +80,22 @@ private class GameScene(props: GameSceneProps) : RComponent<GameSceneProps, RSta
         }
     }
 
+    private fun RDOMBuilder<DIV>.actionInfo(message: String) {
+        styledDiv {
+            css {
+                classes.add("bp3-dark")
+                display = Display.inlineBlock // so that the cards below don't overlap, but the width is not full
+                margin(all = 0.4.rem)
+            }
+            bpCard(elevation = Elevation.TWO) {
+                attrs {
+                    this.className = GlobalStyles.getClassName { it::noPadding }
+                }
+                bpCallout(intent = Intent.PRIMARY, icon = "info-sign") { +message }
+            }
+        }
+    }
+
     private fun RBuilder.preparedMove(card: HandCard, move: PlayerMove) {
         bpOverlay(isOpen = true, onClose = props.unprepareMove) {
             styledDiv {