Fix modal style

3 files changed, 21 insertions, 14 deletions

diff --git a/src/main/scala/reading/component/index/style/Header.scala b/src/main/scala/reading/component/index/style/Header.scala
index d2149a7..2260c91 100644
--- a/src/main/scala/reading/component/index/style/Header.scala
+++ b/src/main/scala/reading/component/index/style/Header.scala
@@ -28,7 +28,8 @@ object Header extends StyleSheet.Inline {
 
   val filters = style(
     display.flex,
-    marginBottom(30.px),
+    flexWrap.wrap,
+    marginBottom(15.px),
     Media.mobile(display.none)
   )
 
@@ -37,6 +38,7 @@ object Header extends StyleSheet.Inline {
     alignItems.center,
     padding(15.px),
     marginRight(20.px),
+    marginBottom(15.px),
     borderRadius(2.px),
     border(1.px, solid, C.gray.lighten(60).value),
     fontSize(18.px),
diff --git a/src/main/scala/reading/component/widget/Modal.scala b/src/main/scala/reading/component/widget/Modal.scala
index 02c42be..81d0c78 100644
--- a/src/main/scala/reading/component/widget/Modal.scala
+++ b/src/main/scala/reading/component/widget/Modal.scala
@@ -18,12 +18,12 @@ object Modal {
 
     Animate(
       id = modalId,
-      duration = 300,
+      duration = 250,
       transition = Transition.easeOut,
       animate = (progress, element) => {
       element.style.opacity = s"$progress"
       element.childNodes(2) match {
-        case e: HTMLElement => e.style.transform = s"translateY(${40 * (progress - 1)}px)"
+        case e: HTMLElement => e.style.transform = s"scale(${0.85 + 0.15 * progress})"
       }
     }
     )
diff --git a/src/main/scala/reading/component/widget/style/Modal.scala b/src/main/scala/reading/component/widget/style/Modal.scala
index ae37c4b..1872344 100644
--- a/src/main/scala/reading/component/widget/style/Modal.scala
+++ b/src/main/scala/reading/component/widget/style/Modal.scala
@@ -11,7 +11,6 @@ object Modal extends StyleSheet.Inline {
   val modal = style(
     display.flex,
     justifyContent.center,
-    alignItems.center,
     position.fixed,
     width(100.%%),
     height(100.%%),
@@ -19,24 +18,30 @@ object Modal extends StyleSheet.Inline {
     right(0.px),
     bottom(0.px),
     left(0.px),
-    overflowY.scroll,
-    opacity(0)
+    opacity(0),
+    overflowY.scroll
   )
 
   val curtain = style(
-    width(100.%%),
-    height(100.%%),
-    position.absolute,
-    top(0.px),
-    left(0.px),
-    backgroundColor(C.black.value),
-    opacity(0.7),
-    cursor.pointer
+    Media.desktop(
+      width(100.%%),
+      height(100.%%),
+      position.fixed,
+      top(0.px),
+      left(0.px),
+      backgroundColor(C.black.value),
+      opacity(0.7),
+      cursor.pointer
+    ),
+    Media.mobile(
+      display.none
+    )
   )
 
   val content = style(
     position.relative,
     backgroundColor(C.white.value),
+    margin.auto,
     Media.desktop(
       width(50.%%),
       borderRadius(5.px)