Use kotlin-styled for Home component CSS

5 files changed, 44 insertions, 3 deletions

diff --git a/sw-ui-kt/build.gradle.kts b/sw-ui-kt/build.gradle.kts
index f53451bf..05f31d04 100644
--- a/sw-ui-kt/build.gradle.kts
+++ b/sw-ui-kt/build.gradle.kts
@@ -34,6 +34,10 @@ kotlin {
                 implementation("org.jetbrains:kotlin-react-router-dom:4.3.1-$kotlinWrappersVersion")
                 implementation(npm("react-router-dom", "4.3.1"))
 
+                implementation("org.jetbrains:kotlin-styled:1.0.0-$kotlinWrappersVersion")
+                implementation(npm("styled-components", "3.4.9"))
+                implementation(npm("inline-style-prefixer", "5.1.0"))
+
                 // seems to be required by "kotlin-extensions" JS lib
                 implementation(npm("core-js", "3.1.4"))
 
diff --git a/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/Home.kt b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/Home.kt
index e9af82be..abbd84a9 100644
--- a/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/Home.kt
+++ b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/Home.kt
@@ -2,11 +2,20 @@ package org.luxons.sevenwonders.ui.components.home
 
 import react.RBuilder
 import react.dom.*
+import styled.css
+import styled.styledDiv
 
-fun RBuilder.home() = div  {
-    h1 {
-        +"Seven Wonders"
+private const val LOGO = "images/logo-7-wonders.png"
+
+fun RBuilder.home() = styledDiv {
+    css {
+        +HomeStyles.fullscreen
+        +HomeStyles.center
+        +HomeStyles.homeRoot
     }
+
+    img(src = LOGO, alt = "Seven Wonders") {}
+
     p {
         +"Great app!"
     }
diff --git a/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/HomeStyles.kt b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/HomeStyles.kt
new file mode 100644
index 00000000..34699f5b
--- /dev/null
+++ b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/components/home/HomeStyles.kt
@@ -0,0 +1,28 @@
+package org.luxons.sevenwonders.ui.components.home
+
+import kotlinx.css.*
+import styled.StyleSheet
+
+object HomeStyles : StyleSheet("HomeStyles", isStatic = true) {
+
+    val homeRoot by css {
+        background = "url('images/background-zeus-temple.jpg') center no-repeat"
+        backgroundSize = "cover"
+    }
+
+    val center by css {
+        display = Display.flex
+        flexDirection = FlexDirection.column
+        alignItems = Align.center
+        justifyContent = JustifyContent.center
+    }
+
+    val fullscreen by css {
+        position = Position.fixed
+        top = LinearDimension("0")
+        left = LinearDimension("0")
+        bottom = LinearDimension("0")
+        right = LinearDimension("0")
+        overflow = Overflow.hidden
+    }
+}
diff --git a/sw-ui-kt/src/main/resources/images/background-zeus-temple.jpg b/sw-ui-kt/src/main/resources/images/background-zeus-temple.jpg
new file mode 100644
index 00000000..5a28e933
--- /dev/null
+++ b/sw-ui-kt/src/main/resources/images/background-zeus-temple.jpg
diff --git a/sw-ui-kt/src/main/resources/images/logo-7-wonders.png b/sw-ui-kt/src/main/resources/images/logo-7-wonders.png
new file mode 100644
index 00000000..96974d3e
--- /dev/null
+++ b/sw-ui-kt/src/main/resources/images/logo-7-wonders.png