Include pages into table component

2 files changed, 57 insertions, 0 deletions

diff --git a/server/src/Design/View/Pages.hs b/server/src/Design/View/Pages.hs
new file mode 100644
index 0000000..1482ef4
--- /dev/null
+++ b/server/src/Design/View/Pages.hs
@@ -0,0 +1,55 @@
+module Design.View.Pages
+  ( design
+  ) where
+
+import           Clay
+
+import qualified Design.Color     as Color
+import qualified Design.Constants as Constants
+import qualified Design.Helper    as Helper
+import qualified Design.Media     as Media
+
+design :: Css
+design =
+  ".pages" ? do
+    display flex
+    justifyContent center
+
+    Media.desktop $ do
+      padding (px 40) (px 30) (px 30) (px 30)
+
+    Media.tablet $ do
+      padding (px 30) (px 30) (px 30) (px 30)
+
+    Media.mobile $ do
+      padding (px 20) (px 0) (px 20) (px 0)
+      lineHeight (px 40)
+
+    svg ? "path" ? ("fill" -: Color.toString Color.dustyGray)
+
+    ".page" ? do
+      display inlineBlock
+      fontWeight bold
+
+      Media.desktop $ do
+        Helper.button Color.white Color.dustyGray (px 50) Constants.focusDarken
+
+      Media.tabletDesktop $ do
+        border solid (px 2) Color.dustyGray
+        marginRight (px 10)
+
+      Media.tablet $ do
+        Helper.button Color.white Color.dustyGray (px 40) Constants.focusDarken
+        fontSize (px 15)
+
+      Media.mobile $ do
+        Helper.button Color.white Color.dustyGray (px 30) Constants.focusDarken
+        fontSize (px 12)
+        border solid (px 1) Color.dustyGray
+        marginRight (px 5)
+
+      ":not(.current)" & cursor pointer
+
+      ".current" & do
+        borderColor Color.chestnutRose
+        color Color.chestnutRose
diff --git a/server/src/Design/Views.hs b/server/src/Design/Views.hs
index bf39cff..73b7240 100644
--- a/server/src/Design/Views.hs
+++ b/server/src/Design/Views.hs
@@ -10,6 +10,7 @@ import qualified Design.Helper        as Helper
 import qualified Design.Media         as Media
 import qualified Design.View.Header   as Header
 import qualified Design.View.NotFound as NotFound
+import qualified Design.View.Pages    as Pages
 import qualified Design.View.Payment  as Payment
 import qualified Design.View.SignIn   as SignIn
 import qualified Design.View.Stat     as Stat
@@ -23,6 +24,7 @@ design = do
   ".stat" ? Stat.design
   ".notfound" ? NotFound.design
   Table.design
+  Pages.design
 
   ".withMargin" ? do
     "margin" -: "0 2vw"