4 files changed, 46 insertions, 8 deletions
diff --git a/server/src/Design/Global.hs b/server/src/Design/Global.hs
index df41cfd..ebd7084 100644
--- a/server/src/Design/Global.hs
+++ b/server/src/Design/Global.hs
@@ -12,6 +12,7 @@ import qualified Design.Constants as Constants
 import qualified Design.Errors    as Errors
 import qualified Design.Form      as Form
 import qualified Design.Helper    as Helper
+import qualified Design.Loadable  as Loadable
 import qualified Design.Media     as Media
 import qualified Design.Modal     as Modal
 import qualified Design.Tooltip   as Tooltip
@@ -28,6 +29,7 @@ global = do
   ".tooltip" ? Tooltip.design
   Views.design
   Form.design
+  Loadable.design
 
   spinKeyframes
   appearKeyframe
@@ -92,14 +94,14 @@ global = do
 
   h1 ? do
     color Color.chestnutRose
-    marginBottom (em 1)
-    lineHeight (em 1.2)
+    lineHeight (em 1.3)
 
     Media.desktop $ fontSize (px 24)
     Media.tablet $ fontSize (px 22)
     Media.mobile $ fontSize (px 20)
 
   ul ? do
+    "margin-top" -: "1vh"
     "margin-bottom" -: "3vh"
     "margin-left" -: "1vh"
     li <? do
diff --git a/server/src/Design/Loadable.hs b/server/src/Design/Loadable.hs
new file mode 100644
index 0000000..6b13f2d
--- /dev/null
+++ b/server/src/Design/Loadable.hs
@@ -0,0 +1,29 @@
+module Design.Loadable
+  ( design
+  ) where
+
+import           Clay
+
+design :: Css
+design = do
+  ".g-Loadable" ? do
+    position relative
+    width (pct 100)
+    height (pct 100)
+
+  ".g-Loadable__Spinner" ? do
+    position absolute
+    top (px 0)
+    left (px 0)
+    width (pct 100)
+    height (pct 100)
+    display none
+
+  ".g-Loadable__Spinner--Loading" ? do
+    display block
+
+  ".g-Loadable__Content" ?
+    transition "opacity" (sec 0.4) ease (sec 0)
+
+  ".g-Loadable__Content--Loading" ?
+    opacity 0.5
diff --git a/server/src/Design/View/Table.hs b/server/src/Design/View/Table.hs
index c77cb7c..56bd389 100644
--- a/server/src/Design/View/Table.hs
+++ b/server/src/Design/View/Table.hs
@@ -15,6 +15,9 @@ design = do
     margin (em 2) (em 2) (em 2) (em 2)
     textAlign (alignSide sideCenter)
 
+  ".table" ? do
+    minHeight (px 540)
+
   ".lines" ? do
     Media.tabletDesktop $ display displayTable
     width (pct 100)
diff --git a/server/src/Design/Views.hs b/server/src/Design/Views.hs
index d36a728..270bb8e 100644
--- a/server/src/Design/Views.hs
+++ b/server/src/Design/Views.hs
@@ -32,15 +32,19 @@ design = do
     "margin" -: "0 2vw"
 
   ".titleButton" ? do
-    h1 ? do
-      Media.tabletDesktop $ float floatLeft
+    display flex
+    marginBottom (em 1)
+
+    Media.tabletDesktop $ do
+      justifyContent spaceBetween
+      alignItems center
+
+    Media.mobile $ do
+      flexDirection column
+      "h1" ? marginBottom (em 0.5)
 
     button ? do
       Helper.button Color.chestnutRose Color.white (px Constants.inputHeight) Constants.focusLighten
-      Media.tabletDesktop $ do
-        float floatRight
-        position relative
-        top (px (-8))
       Media.mobile $ do
         width (pct 100)
         marginBottom (px 20)