From b0d71e5091fdafddfdb5f41a4bb3860e02272d92 Mon Sep 17 00:00:00 2001
From: Larry Adames <adames.larry@gmail.com>
Date: Wed, 20 Sep 2023 13:38:42 -0400
Subject: [PATCH] PLT-7515 update layout of landing page

---
 public/images/twotone_wallet.svg |  7 ++++
 src/Component/LandingPage.purs   | 59 +++++++++++++++++++-------------
 2 files changed, 42 insertions(+), 24 deletions(-)
 create mode 100644 public/images/twotone_wallet.svg

diff --git a/public/images/twotone_wallet.svg b/public/images/twotone_wallet.svg
new file mode 100644
index 00000000..80807bc6
--- /dev/null
+++ b/public/images/twotone_wallet.svg
@@ -0,0 +1,7 @@
+<svg width="81" height="81" viewBox="0 0 81 81" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="twotone-account-balance-wallet 1">
+<path id="Vector" opacity="0.3" d="M43.875 57.375C40.1625 57.375 37.125 54.3375 37.125 50.625V30.375C37.125 26.6625 40.1625 23.625 43.875 23.625H64.125V16.875H16.875V64.125H64.125V57.375H43.875Z" fill="#4B1FED"/>
+<path id="Vector_2" d="M70.875 24.57V16.875C70.875 13.1625 67.8375 10.125 64.125 10.125H16.875C15.0848 10.125 13.3679 10.8362 12.102 12.102C10.8362 13.3679 10.125 15.0848 10.125 16.875V64.125C10.125 65.9152 10.8362 67.6321 12.102 68.898C13.3679 70.1638 15.0848 70.875 16.875 70.875H64.125C67.8375 70.875 70.875 67.8375 70.875 64.125V56.43C71.8952 55.841 72.7435 54.9953 73.3355 53.9769C73.9276 52.9586 74.2429 51.803 74.25 50.625V30.375C74.25 27.8775 72.8662 25.7175 70.875 24.57ZM67.5 30.375V50.625H43.875V30.375H67.5ZM16.875 64.125V16.875H64.125V23.625H43.875C40.1625 23.625 37.125 26.6625 37.125 30.375V50.625C37.125 54.3375 40.1625 57.375 43.875 57.375H64.125V64.125H16.875Z" fill="#071563"/>
+<path id="Vector_3" d="M54 45.5625C56.7959 45.5625 59.0625 43.2959 59.0625 40.5C59.0625 37.7041 56.7959 35.4375 54 35.4375C51.2041 35.4375 48.9375 37.7041 48.9375 40.5C48.9375 43.2959 51.2041 45.5625 54 45.5625Z" fill="black"/>
+</g>
+</svg>
diff --git a/src/Component/LandingPage.purs b/src/Component/LandingPage.purs
index 7ca85435..d4768fa7 100644
--- a/src/Component/LandingPage.purs
+++ b/src/Component/LandingPage.purs
@@ -5,6 +5,7 @@ import Prelude
 import Component.ConnectWallet (mkConnectWallet)
 import Component.ConnectWallet as ConnectWallet
 import Component.Types (ContractInfo, MkComponentMBase, WalletInfo)
+import Component.BodyLayout as BodyLayout
 import Contrib.React.Svg (SvgUrl(..), svgImg)
 import Data.Map (Map)
 import Data.Maybe (Maybe(..))
@@ -15,7 +16,7 @@ import Effect.Exception (Error)
 import JS.Unsafe.Stringify (unsafeStringify)
 import Marlowe.Runtime.Web.Types as Runtime
 import React.Basic (JSX)
-import React.Basic.DOM (text) as DOOM
+import React.Basic.DOM (text, img) as DOOM
 import React.Basic.DOM.Simplified.Generated as DOM
 import React.Basic.Hooks (component, useState')
 import React.Basic.Hooks as React
@@ -49,30 +50,40 @@ mkLandingPage = do
   connectWallet <- mkConnectWallet
   liftEffect $ component "LandingPage" \{ setWalletInfo } -> React.do
     possibleErrors /\ setErrors <- useState' Nothing
-    pure $ DOM.div {} $
-      [ DOM.nav { className: "navbar navbar-expand-sm navbar-light bg-light fix-top" } $
-          DOM.div { className: "container-fluid" }
-            [ DOM.a { href: "#", className: "navbar-brand" }
-                [ svgImg { src: marloweLogoUrl } ]
+    pure $ BodyLayout.component
+      { title: DOM.div { className: "px-3 mx-3 fw-bold" }
+          [ DOOM.img { src: "/images/twotone_wallet.svg" }
+          , DOM.h3 { className: "fw-bold" } $ DOOM.text "Choose a wallet to deploy a Marlowe smart contract"
+          ]
+      , description:
+          DOM.div { className: "px-3 mx-3" }
+            [ DOM.p {} [ DOOM.text "Selecting a wallet is your first step in deploying a smart contract, your choice should be compatible with the blockchain network you want to deploy your contract on." ]
             ]
-      , DOM.div { className: "container-fluid" }
-          $ DOM.div { className: "row justify-content-center" }
-          $ DOM.div { className: "col-xl-5 col-lg-8 col-12" }
-              [ case possibleErrors of
-                  -- FIXME: Should we present errors on the connectWallet level?
-                  Just NoWallets -> DOOM.text "NO WALLETS?"
-                  Just (ConnectionError err) -> DOOM.text $ unsafeStringify err
-                  Nothing -> connectWallet
-                    { currentlyConnected: Nothing
-                    , onWalletConnect: case _ of
-                        ConnectWallet.Connected walletInfo -> setWalletInfo walletInfo
-                        ConnectWallet.NoWallets -> setErrors $ Just NoWallets
-                        ConnectWallet.ConnectionError err -> setErrors $ Just $ ConnectionError err
-                    , onDismiss: pure unit
-                    , inModal: false
-                    }
-              ]
-      ]
+      , content: DOM.div {} $
+          [ DOM.nav { className: "navbar navbar-expand-sm navbar-light bg-light fix-top" } $
+              DOM.div { className: "container-fluid" }
+                [ DOM.a { href: "#", className: "navbar-brand" }
+                    [ svgImg { src: marloweLogoUrl } ]
+                ]
+          , DOM.div { className: "container-fluid" }
+              $ DOM.div { className: "row justify-content-center" }
+              $ DOM.div { className: "col-xl-5 col-lg-8 col-12" }
+                  [ case possibleErrors of
+                      -- FIXME: Should we present errors on the connectWallet level?
+                      Just NoWallets -> DOOM.text "NO WALLETS?"
+                      Just (ConnectionError err) -> DOOM.text $ unsafeStringify err
+                      Nothing -> connectWallet
+                        { currentlyConnected: Nothing
+                        , onWalletConnect: case _ of
+                            ConnectWallet.Connected walletInfo -> setWalletInfo walletInfo
+                            ConnectWallet.NoWallets -> setErrors $ Just NoWallets
+                            ConnectWallet.ConnectionError err -> setErrors $ Just $ ConnectionError err
+                        , onDismiss: pure unit
+                        , inModal: false
+                        }
+                  ]
+          ]
+      }
 
 marloweLogoUrl :: SvgUrl
 marloweLogoUrl = SvgUrl "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYwIiBoZWlnaHQ9IjQyIiB2aWV3Qm94PSIwIDAgMTYwIDQyIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGRhdGEtbG9nbz0idHJ1ZSI+PGcgY2xpcC1wYXRoPSJ1cmwoI2xvZ29fX2EpIj48cGF0aCBkPSJNNjkuNzEgMjIuMzUydjkuMTJoLTIuOXYtOC43MzRjMC0yLjgzNi0xLjg2OS0zLjc3Mi0zLjQ0OS0zLjc3Mi0xLjU4IDAtMy40MTcuOTM2LTMuNDE3IDMuNzcydjguNzM1aC0yLjkwMXYtOC43MzVjMC0yLjgzNi0xLjg2OS0zLjc3Mi0zLjQ4LTMuNzcyLTEuNjEgMC0zLjQxNy45MzYtMy40MTcgMy43NzJ2OC43MzVoLTIuOTAxVjE2LjY0NmgyLjkwMXYxLjc3MmMxLjA2My0xLjM4NyAyLjY3NC0yIDQuMjU0LTIgMS44NjggMCAzLjgwMy43MSA0LjggMi42MTMgMS4xMy0xLjkzNSAzLjE2LTIuNjEzIDQuOTk4LTIuNjEzIDIuNzA4IDAgNS41MSAxLjQ4NCA1LjUxIDUuOTNsLjAwMy4wMDNaTTg3LjQ2OSAxNi42NXYxNC44MjZoLTIuOTAxdi0yLjI4OWMtMS4wOTUgMS41OC0yLjgwNSAyLjU0Ny01LjA5NCAyLjU0Ny00LjE4OCAwLTcuMTg1LTMuMjU2LTcuMTg1LTcuNjcxIDAtNC40MTUgMi45OTctNy42NCA3LjE4NS03LjY0IDIuMjg5IDAgMy45OTYuOTY3IDUuMDk0IDIuNTEydi0yLjI4OGgyLjkwMXYuMDAzWm0tMi45MDEgNy40MTNjMC0yLjg2Ny0xLjg2OS00Ljg5Ny00LjcwNS00Ljg5Ny0yLjgzNSAwLTQuNzM5IDIuMDMtNC43MzkgNC44OTcgMCAyLjg2NyAxLjg3IDQuOTMyIDQuNzQgNC45MzJzNC43MDQtMi4wOTYgNC43MDQtNC45MzJaTTk4LjY1IDE2LjQyM3YyLjc0Yy0yIC4wMy01LjIyLjktNS4yMiA0LjcwNHY3LjYwNWgtMi45MDJWMTYuNjQ2aDIuOTAydjIuNzRjMS4xNi0yLjAzIDMuMTU5LTIuOTMyIDUuMjItMi45Njd2LjAwNFpNMTAwLjc0NiAzMS40NzZWMTAuNTI0aDIuOTMybC0uMDMxIDIwLjk0OWgtMi45MDF2LjAwM1pNMTA1Ljk1MyAyNC4wNjNjMC00LjQ4IDMuMTI1LTcuNzAyIDcuNjA2LTcuNzAyczcuNTQgMy4yMjQgNy41NCA3LjcwMmMwIDQuNDc3LTMuMDk0IDcuNzAyLTcuNTQgNy43MDJzLTcuNjA2LTMuMjg3LTcuNjA2LTcuNzAyWm0xMi4yOCAwYzAtMi44MzYtMS44NjktNC44OTctNC42NzQtNC44OTctMi44MDUgMC00LjcwNSAyLjA2MS00LjcwNSA0Ljg5NyAwIDIuODM2IDEuODY5IDQuOTMyIDQuNzA1IDQuOTMyIDIuODM2IDAgNC42NzQtMi4xMjcgNC42NzQtNC45MzJaTTE0NC4yODEgMTYuNjVsLTQuOTMxIDE0LjgyNmgtMi44NjdsLTMuNDgtMTAuMjQ5LTMuNTEzIDEwLjI0OWgtMi44NjdsLTQuODY2LTE0LjgyNmgzLjAyOGwzLjQ0OCAxMC43MzQgMy43MzgtMTAuNzM0aDIuMTI3bDMuNjc1IDEwLjczNCAzLjQ4LTEwLjczNGgzLjAyOFpNMTU5LjI0NSAyNC4wNjN2LjgzNmgtMTEuNjY3Yy4yODkgMi42NDMgMi4xNTggNC4zNSA0LjczOSA0LjM1IDIuMTI3IDAgMy40NzktLjk2NyA0LjE4OC0ybDIuMDMxIDEuNDVjLTEuMjkxIDEuODY4LTMuNTE0IDMuMDYzLTYuMjE5IDMuMDYzLTQuNTEyIDAtNy41NC0zLjI4Ny03LjU0LTcuNzAzIDAtNC40MTUgMi45MDEtNy42NyA3LjM0Ny03LjY3IDQuNDQ3IDAgNy4xMjQgMy4yNTUgNy4xMjQgNy42N2wtLjAwMy4wMDRaTTE0Ny41NzggMjNoOC45NThjLS4zNTQtMi40ODItMS45MzQtNC4yODktNC40MTUtNC4yODlzLTQuMTg4IDEuNzA3LTQuNTQzIDQuMjg5WiIgZmlsbD0idmFyKC0tdGV4dC1jb2xvciwjMUMxQzFDKSI+PC9wYXRoPjxwYXRoIGQ9Ik0yMS4yMTcgMS43NDggMTguMTg1IDAgMCAxMC41djIxbC42OTkuNDAzIDIuMzMzIDEuMzQ1TDE4LjE4NSA0Mmw2LjA2NC0zLjV2LTIxbC0xMi4xMjUtNy0zLjAzMiAxLjc0OCAxMi4xMjUgN3YxNy41TDE4LjE4NSAzOC41IDMuMDMyIDI5Ljc0OHYtMTcuNUwxOC4xODUgMy41bDE1LjE1NiA4Ljc0OHYyMWwzLjAzMi0xLjc0OHYtMjFMMjEuMjE3IDEuNzQ4WiIgZmlsbD0iIzUxMUNGNyI+PC9wYXRoPjxwYXRoIGQ9Im0xNS4xNTYgOC43NDggMTIuMTIxIDd2MjFMMzAuMzEgMzVWMTRMMTguMTg1IDdsLTMuMDI5IDEuNzQ4WiIgZmlsbD0iIzUxMUNGNyI+PC9wYXRoPjwvZz48ZGVmcz48Y2xpcFBhdGggaWQ9ImxvZ29fX2EiPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0wIDBoMTU5LjI0NXY0MkgweiI+PC9wYXRoPjwvY2xpcFBhdGg+PC9kZWZzPjwvc3ZnPg=="