PLT-6284 create footer with links

input-output-hk · Jun 16, 2023 · f8b15a6 · f8b15a6
1 parent 4b45d8a
commit f8b15a6
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 5 deletions.
diff --git a/public/style.scss b/public/style.scss
@@ -22,6 +22,11 @@ $link-color: #511CF7;
   box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.1);
 }
 
+.shadow-top {
+  box-shadow: 0 -4px 2px -2px rgba(0, 0, 0, 0.1);
+}
+
+
 .font-weight-bold {
   font-weight: 600 !important;
 }

diff --git a/src/Component/App.purs b/src/Component/App.purs
@@ -222,7 +222,7 @@ mkApp = do
       Nothing -> landingPage { setWalletInfo: setWalletInfo <<< Just }
       _ -> provider walletInfoCtx ((/\) <$> possibleWalletInfo <*> possibleWalletContext) $ Array.singleton $ DOM.div { className: "mt-6" } $
         [ DOM.div { className: "fixed-top" }
-            [ DOM.nav { className: "navbar mb-lg-3 navbar-expand-sm navbar-light bg-light" } $
+            [ DOM.nav { className: "navbar mb-lg-3 navbar-expand-sm navbar-light bg-light shadow-bottom" } $
                 DOM.div { className: "container-xl" }
                   [ DOM.a { href: "#", className: "navbar-brand" }
                       [ svgImg { src: marloweLogoUrl } ]

diff --git a/src/Component/Footer.purs b/src/Component/Footer.purs
@@ -1,20 +1,68 @@
 module Component.Footer where
 
 import Prelude
+
 import React.Basic (JSX)
 import React.Basic.DOM as DOM
+import Web.DOM.MutationRecord (target)
 
 footer :: JSX
 footer =
   DOM.footer
-    { className: "footer mt-auto py-3 bg-light"
+    { className: "footer mt-auto py-3 bg-light shadow-top"
     , children:
         [ DOM.div
             { className: "container"
             , children:
                 [ DOM.span
-                    { className: "text-muted"
-                    , children: [ DOM.text "Place sticky footer content here." ]
+                    { className: "text-muted d-flex justify-content-around"
+                    , children:
+                        [ DOM.a
+                            { className: "btn btn-link text-decoration-underline-hover text-decoration-none font-weight-bold"
+                            , href: "/about"
+                            , target: "_blank"
+                            , children:
+                                [ DOM.i { className: "h5 bi-info-circle-fill" }
+                                , DOM.text "  About"
+                                ]
+                            }
+                        , DOM.a
+                            { className: "btn btn-link text-decoration-underline-hover text-decoration-none font-weight-bold"
+                            , href: "http://marlowescan.com"
+                            , target: "_blank"
+                            , children:
+                                [ DOM.i { className: "h5 bi-globe2" }
+                                , DOM.text "  Marlowe Explorer"
+                                ]
+                            }
+                        , DOM.a
+                            { className: "btn btn-link text-decoration-underline-hover text-decoration-none font-weight-bold"
+                            , href: "https://docs.marlowe.iohk.io"
+                            , target: "_blank"
+                            , children:
+                                [ DOM.i { className: "h5 bi-book" }
+                                , DOM.text "  Marlowe Documentation"
+                                ]
+                            }
+                        , DOM.a
+                            { className: "btn btn-link text-decoration-underline-hover text-decoration-none font-weight-bold"
+                            , href: "https://github.com/input-output-hk/marlowe-cardano"
+                            , target: "_blank"
+                            , children:
+                                [ DOM.i { className: "h5 bi-github" }
+                                , DOM.text "  Marlowe Cardano Github"
+                                ]
+                            }
+                        , DOM.a
+                            { className: "btn btn-link text-decoration-underline-hover text-decoration-none font-weight-bold"
+                            , href: "https://play.marlowe.iohk.io"
+                            , target: "_blank"
+                            , children:
+                                [ DOM.i { className: "h5 bi-play-circle" }
+                                , DOM.text "  Marlowe Playground"
+                                ]
+                            }
+                        ]
                     }
                 ]
             }

diff --git a/src/Component/LandingPage.purs b/src/Component/LandingPage.purs
@@ -51,7 +51,7 @@ mkLandingPage = do
     possibleErrors /\ setErrors <- useState' Nothing
     pure $ DOM.div { className: "mt-6" } $
       [ DOM.div { className: "fixed-top" }
-          [ DOM.nav { className: "navbar mb-lg-3 navbar-expand-sm navbar-light bg-light" } $
+          [ DOM.nav { className: "navbar mb-lg-3 navbar-expand-sm navbar-light bg-light shadow-bottom" } $
               DOM.div { className: "container-xl" }
                 [ DOM.a { href: "#", className: "navbar-brand" }
                     [ svgImg { src: marloweLogoUrl } ]