SCP-2441: Implement new welcome screen design. (IntersectMBO#3453)

sarvex · Jun 29, 2021 · 5e93bfd · 5e93bfd
1 parent 3ebb20c
commit 5e93bfd
Show file tree

Hide file tree

Showing 19 changed files with 522 additions and 465 deletions.
diff --git a/marlowe-dashboard-client/src/Css.purs b/marlowe-dashboard-client/src/Css.purs
@@ -21,6 +21,9 @@ module Css
   , overlay
   , card
   , largeCard
+  , videoCard
+  , embeddedVideoContainer
+  , embeddedVideo
   , iconCircle
   , fixedBottomRight
   , funds
@@ -143,6 +146,16 @@ card invisible = [ "overflow-hidden", "bg-white", "flex-grow", "max-w-sm", "mx-2
 largeCard :: Boolean -> Array String
 largeCard invisible = [ "bg-grayblue", "shadow", "overflow-auto", "flex-grow", "mt-2", "md:mb-2", "mx-2", "lg:my-4", "md:mx-5pc", "rounded-t", "md:rounded-b", "transform", "transition-transform", "duration-400" ] <> applyWhen invisible [ "translate-y-20" ]
 
+videoCard :: Boolean -> Array String
+videoCard invisible = [ "relative", "bg-white", "flex-grow", "max-w-sm", "lg:max-w-md", "mx-2", "shadow", "rounded", "transform", "transition-transform", "duration-400", "self-center" ] <> applyWhen invisible [ "translate-y-20" ]
+
+-- embedded videos
+embeddedVideoContainer :: Array String
+embeddedVideoContainer = [ "relative", "pb-16:9" ]
+
+embeddedVideo :: Array String
+embeddedVideo = [ "absolute", "top-0", "left-0", "w-full", "h-full" ]
+
 --- miscellaneous
 iconCircle :: Boolean -> Array String
 iconCircle enabled = [ "inline-flex", "items-center", "justify-center", "w-8", "h-8", "rounded-full" ] <> toggleWhen enabled bgBlueGradient [ "bg-lightgray", "text-darkgray" ]

diff --git a/marlowe-dashboard-client/src/Icons.purs b/marlowe-dashboard-client/src/Icons.purs
@@ -36,6 +36,7 @@ data Icon
   | Next
   | NewContact
   | Pay
+  | Play
   | Previous
   | Refresh
   | Roles
@@ -77,6 +78,8 @@ content NewContact = "person_add_alt"
 
 content Pay = "credit_score"
 
+content Play = "play_arrow"
+
 content Previous = "chevron_left"
 
 content Refresh = "refresh"
@@ -124,6 +127,8 @@ iconClass NewContact = "new-contact"
 
 iconClass Pay = "pay"
 
+iconClass Play = "play"
+
 iconClass Previous = "previous"
 
 iconClass Refresh = "refresh"

diff --git a/marlowe-dashboard-client/src/Images.js b/marlowe-dashboard-client/src/Images.js
@@ -6,6 +6,10 @@ exports.marloweRunNavLogo_ = require("static/images/marlowe-run-nav-logo.svg");
 
 exports.marloweRunNavLogoDark_ = require("static/images/marlowe-run-nav-logo-dark.svg");
 
+exports.backgroundShape_ = require("static/images/background-shape.svg");
+
 exports.arrowBack_ = require("static/images/arrow-back.svg");
 
 exports.linkHighlight_ = require("static/images/link-highlight.svg");
+
+exports.getStartedThumbnail_ = require("static/images/get-started-thumbnail.jpg")
diff --git a/marlowe-dashboard-client/src/Images.purs b/marlowe-dashboard-client/src/Images.purs
@@ -2,8 +2,10 @@ module Images
   ( marloweRunLogo
   , marloweRunNavLogo
   , marloweRunNavLogoDark
+  , backgroundShape
   , arrowBack
   , linkHighlight
+  , getStartedThumbnail
   ) where
 
 foreign import marloweRunLogo_ :: String
@@ -12,10 +14,14 @@ foreign import marloweRunNavLogo_ :: String
 
 foreign import marloweRunNavLogoDark_ :: String
 
+foreign import backgroundShape_ :: String
+
 foreign import arrowBack_ :: String
 
 foreign import linkHighlight_ :: String
 
+foreign import getStartedThumbnail_ :: String
+
 marloweRunLogo :: String
 marloweRunLogo = marloweRunLogo_
 
@@ -25,8 +31,14 @@ marloweRunNavLogo = marloweRunNavLogo_
 marloweRunNavLogoDark :: String
 marloweRunNavLogoDark = marloweRunNavLogoDark_
 
+backgroundShape :: String
+backgroundShape = backgroundShape_
+
 arrowBack :: String
 arrowBack = arrowBack_
 
 linkHighlight :: String
 linkHighlight = linkHighlight_
+
+getStartedThumbnail :: String
+getStartedThumbnail = getStartedThumbnail_
diff --git a/marlowe-dashboard-client/src/MainFrame/Lenses.purs b/marlowe-dashboard-client/src/MainFrame/Lenses.purs
@@ -3,7 +3,7 @@ module MainFrame.Lenses
   , _currentSlot
   , _subState
   , _toast
-  , _pickupState
+  , _welcomeState
   , _playState
   ) where
 
@@ -15,25 +15,25 @@ import Data.Lens.Record (prop)
 import Data.Symbol (SProxy(..))
 import MainFrame.Types (State, WebSocketStatus)
 import Marlowe.Semantics (Slot)
-import Pickup.Types (State) as Pickup
 import Play.Types (State) as Play
 import Toast.Types (State) as Toast
+import Welcome.Types (State) as Welcome
 
 _webSocketStatus :: Lens' State WebSocketStatus
 _webSocketStatus = prop (SProxy :: SProxy "webSocketStatus")
 
 _currentSlot :: Lens' State Slot
 _currentSlot = prop (SProxy :: SProxy "currentSlot")
 
-_subState :: Lens' State (Either Pickup.State Play.State)
+_subState :: Lens' State (Either Welcome.State Play.State)
 _subState = prop (SProxy :: SProxy "subState")
 
 _toast :: Lens' State Toast.State
 _toast = prop (SProxy :: SProxy "toast")
 
 ------------------------------------------------------------
-_pickupState :: Traversal' State Pickup.State
-_pickupState = _subState <<< _Left
+_welcomeState :: Traversal' State Welcome.State
+_welcomeState = _subState <<< _Left
 
 _playState :: Traversal' State Play.State
 _playState = _subState <<< _Right
diff --git a/marlowe-dashboard-client/src/MainFrame/State.purs b/marlowe-dashboard-client/src/MainFrame/State.purs
@@ -25,13 +25,10 @@ import Halogen (Component, HalogenM, liftEffect, mkComponent, mkEval, subscribe)
 import Halogen.Extra (mapMaybeSubmodule, mapSubmodule)
 import Halogen.HTML (HTML)
 import Halogen.LocalStorage (localStorageEvents)
-import MainFrame.Lenses (_currentSlot, _pickupState, _playState, _subState, _toast, _webSocketStatus)
+import MainFrame.Lenses (_currentSlot, _playState, _subState, _toast, _webSocketStatus, _welcomeState)
 import MainFrame.Types (Action(..), ChildSlots, Msg, Query(..), State, WebSocketStatus(..))
 import MainFrame.View (render)
 import Marlowe.PAB (PlutusAppId)
-import Pickup.Lenses (_walletLibrary)
-import Pickup.State (handleAction, dummyState, mkInitialState) as Pickup
-import Pickup.Types (Action(..), Card(..), State) as Pickup
 import Play.Lenses (_allContracts, _walletDetails)
 import Play.State (dummyState, handleAction, mkInitialState) as Play
 import Play.Types (Action(..), State) as Play
@@ -41,6 +38,9 @@ import Toast.Types (Action, State) as Toast
 import Toast.Types (decodedAjaxErrorToast, decodingErrorToast)
 import WalletData.Lenses (_assets, _companionAppId, _marloweAppId, _previousCompanionAppState, _wallet, _walletInfo)
 import WebSocket.Support as WS
+import Welcome.Lenses (_walletLibrary)
+import Welcome.State (handleAction, dummyState, mkInitialState) as Welcome
+import Welcome.Types (Action(..), Card(..), State) as Welcome
 
 mkMainFrame ::
   forall m.
@@ -67,7 +67,7 @@ initialState :: State
 initialState =
   { webSocketStatus: WebSocketClosed Nothing
   , currentSlot: zero -- this will be updated as soon as the websocket connection is working
-  , subState: Left Pickup.dummyState
+  , subState: Left Welcome.dummyState
   , toast: Toast.defaultState
   }
 
@@ -177,27 +177,27 @@ handleAction ::
 -- mainframe actions
 handleAction Init = do
   walletLibrary <- getWalletLibrary
-  assign (_pickupState <<< _walletLibrary) walletLibrary
+  assign (_welcomeState <<< _walletLibrary) walletLibrary
   { dataProvider } <- ask
   when (dataProvider == LocalStorage) (void $ subscribe $ localStorageEvents $ const $ PlayAction $ Play.UpdateFromStorage)
 
-handleAction (EnterPickupState walletLibrary walletDetails followerApps) = do
+handleAction (EnterWelcomeState walletLibrary walletDetails followerApps) = do
   { dataProvider } <- ask
   let
     followerAppIds :: Array PlutusAppId
     followerAppIds = Set.toUnfoldable $ keys followerApps
   unsubscribeFromWallet dataProvider $ view (_walletInfo <<< _wallet) walletDetails
   unsubscribeFromPlutusApp dataProvider $ view _companionAppId walletDetails
   for_ followerAppIds $ unsubscribeFromPlutusApp dataProvider
-  assign _subState $ Left $ Pickup.mkInitialState walletLibrary
+  assign _subState $ Left $ Welcome.mkInitialState walletLibrary
 
 handleAction (EnterPlayState walletLibrary walletDetails) = do
   ajaxFollowerApps <- getFollowerApps walletDetails
   currentSlot <- use _currentSlot
   case ajaxFollowerApps of
     Left decodedAjaxError -> do
-      handleAction $ PickupAction $ Pickup.CloseCard Pickup.PickupWalletCard
-      handleAction $ PickupAction $ Pickup.CloseCard Pickup.PickupNewWalletCard
+      handleAction $ WelcomeAction $ Welcome.CloseCard Welcome.UseWalletCard
+      handleAction $ WelcomeAction $ Welcome.CloseCard Welcome.UseNewWalletCard
       addToast $ decodedAjaxErrorToast "Failed to load wallet contracts." decodedAjaxError
     Right followerApps -> do
       { dataProvider } <- ask
@@ -215,12 +215,12 @@ handleAction (EnterPlayState walletLibrary walletDetails) = do
       ajaxRoleContracts <- getRoleContracts walletDetails
       case ajaxRoleContracts of
         Left decodedAjaxError -> do
-          handleAction $ PickupAction $ Pickup.CloseCard Pickup.PickupWalletCard
-          handleAction $ PickupAction $ Pickup.CloseCard Pickup.PickupNewWalletCard
+          handleAction $ WelcomeAction $ Welcome.CloseCard Welcome.UseWalletCard
+          handleAction $ WelcomeAction $ Welcome.CloseCard Welcome.UseNewWalletCard
           addToast $ decodedAjaxErrorToast "Failed to load wallet contracts." decodedAjaxError
         Right companionState -> handleAction $ PlayAction $ Play.UpdateFollowerApps companionState
 
-handleAction (PickupAction pickupAction) = toPickup $ Pickup.handleAction pickupAction
+handleAction (WelcomeAction welcomeAction) = toWelcome $ Welcome.handleAction welcomeAction
 
 handleAction (PlayAction playAction) = do
   currentSlot <- use _currentSlot
@@ -235,12 +235,12 @@ handleAction (ToastAction toastAction) = toToast $ Toast.handleAction toastActio
 -- to provide a dummyState for that submodule. Halogen would use this dummyState to play
 -- with if we ever tried to call one of these handlers when the submodule state does not
 -- exist. In practice this should never happen.
-toPickup ::
+toWelcome ::
   forall m msg slots.
   Functor m =>
-  HalogenM Pickup.State Pickup.Action slots msg m Unit ->
+  HalogenM Welcome.State Welcome.Action slots msg m Unit ->
   HalogenM State Action slots msg m Unit
-toPickup = mapMaybeSubmodule _pickupState PickupAction Pickup.dummyState
+toWelcome = mapMaybeSubmodule _welcomeState WelcomeAction Welcome.dummyState
 
 toPlay ::
   forall m msg slots.

diff --git a/marlowe-dashboard-client/src/MainFrame/Types.purs b/marlowe-dashboard-client/src/MainFrame/Types.purs
@@ -17,7 +17,7 @@ import Data.Maybe (Maybe(..))
 import Halogen as H
 import Marlowe.PAB (PlutusAppId, CombinedWSStreamToServer)
 import Marlowe.Semantics (Slot)
-import Pickup.Types (Action, State) as Pickup
+import Welcome.Types (Action, State) as Welcome
 import Play.Types (Action, State) as Play
 import Plutus.PAB.Webserver.Types (CombinedWSStreamToClient)
 import Toast.Types (Action, State) as Toast
@@ -26,13 +26,13 @@ import WalletData.Types (WalletDetails, WalletLibrary)
 import Web.Socket.Event.CloseEvent (CloseEvent, reason) as WS
 import WebSocket.Support (FromSocket) as WS
 
--- The app exists in one of two main subStates: the "pickup" state for when you have
--- no wallet, and all you can do is pick one up or generate a new one; and the "play"
--- state for when you have picked up a wallet, and can do all of the things.
+-- The app exists in one of two main subStates: the "welcome" state for when you have
+-- no wallet, and all you can do is generate one or create a new one; and the "play"
+-- state for when you have selected a wallet, and can do all of the things.
 type State
   = { webSocketStatus :: WebSocketStatus
     , currentSlot :: Slot
-    , subState :: Either Pickup.State Play.State
+    , subState :: Either Welcome.State Play.State
     , toast :: Toast.State
     }
 
@@ -64,18 +64,18 @@ data Msg
 ------------------------------------------------------------
 data Action
   = Init
-  | EnterPickupState WalletLibrary WalletDetails (Map PlutusAppId Contract.State)
+  | EnterWelcomeState WalletLibrary WalletDetails (Map PlutusAppId Contract.State)
   | EnterPlayState WalletLibrary WalletDetails
-  | PickupAction Pickup.Action
+  | WelcomeAction Welcome.Action
   | PlayAction Play.Action
   | ToastAction Toast.Action
 
 -- | Here we decide which top-level queries to track as GA events, and
 -- how to classify them.
 instance actionIsEvent :: IsEvent Action where
   toEvent Init = Just $ defaultEvent "Init"
-  toEvent (EnterPickupState _ _ _) = Just $ defaultEvent "EnterPickupState"
+  toEvent (EnterWelcomeState _ _ _) = Just $ defaultEvent "EnterWelcomeState"
   toEvent (EnterPlayState _ _) = Just $ defaultEvent "EnterPlayState"
-  toEvent (PickupAction pickupAction) = toEvent pickupAction
+  toEvent (WelcomeAction welcomeAction) = toEvent welcomeAction
   toEvent (PlayAction playAction) = toEvent playAction
   toEvent (ToastAction toastAction) = toEvent toastAction
diff --git a/marlowe-dashboard-client/src/MainFrame/View.purs b/marlowe-dashboard-client/src/MainFrame/View.purs
@@ -8,11 +8,11 @@ import Effect.Aff.Class (class MonadAff)
 import Halogen (ComponentHTML)
 import Halogen.Extra (renderSubmodule)
 import Halogen.HTML (div)
-import MainFrame.Lenses (_currentSlot, _pickupState, _playState, _subState, _toast)
+import MainFrame.Lenses (_currentSlot, _playState, _subState, _toast, _welcomeState)
 import MainFrame.Types (Action(..), ChildSlots, State)
-import Pickup.View (renderPickupState)
 import Play.View (renderPlayState)
 import Toast.View (renderToast)
+import Welcome.View (renderWelcomeState)
 
 render :: forall m. MonadAff m => State -> ComponentHTML Action ChildSlots m
 render state =
@@ -21,7 +21,7 @@ render state =
   in
     div [ classNames [ "h-full" ] ]
       [ case view _subState state of
-          Left _ -> renderSubmodule _pickupState PickupAction renderPickupState state
+          Left _ -> renderSubmodule _welcomeState WelcomeAction renderWelcomeState state
           Right _ -> renderSubmodule _playState PlayAction (renderPlayState currentSlot) state
       , renderSubmodule _toast ToastAction renderToast state
       ]