PLT-7515 fix fonts on body layout title and description

input-output-hk · Sep 25, 2023 · 70df685 · 70df685
1 parent 248778c
commit 70df685
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 17 deletions.
diff --git a/public/style.scss b/public/style.scss
@@ -195,6 +195,14 @@ $link-color: #511CF7;
   animation: pulse 1s infinite;
 }
 
+.font-size-2rem {
+  font-size: 2rem;
+}
+
+.font-size-1rem {
+  font-size: 1rem;
+}
+
 @keyframes pulse {
   0% {
     transform: scale(1);

diff --git a/src/Component/ApplyInputs.purs b/src/Component/ApplyInputs.purs
@@ -328,13 +328,12 @@ mkChoiceFormComponent = do
               ]
           ]
 
-      { title: DOM.h3 {} $ DOOM.text "Apply a Choice"
-      , description: DOM.div {}
-          [ DOM.p { className: "white-color h5 pb-3" } [ DOOM.text "Select a choice from the dropdown menu to proceed. Each choice represents a decision that a participant can make at a particular point in the contract." ]
-          , DOM.p
-              { className: "white-color h5 pb-3" }
-              [ DOOM.text "Keep in mind that the choices available are defined within the Marlowe contract and may have different consequences or lead to different outcomes. Make sure you understand the implications of each choice before making a selection." ]
+      { title: DOM.div { className: "pe-3" }
+          [ DOM.div {} $ DOOM.img { src: "/images/magnifying_glass.svg" }
+          , DOM.span {} $ DOOM.text "Advance the contract"
           ]
+
+      , description: DOM.p {} "Progress through the contract by delving into its specifics. Analyse the code, evaluate the graph and apply the required inputs. This stage is crucial for ensuring the contract advances correctly so take a moment to confirm all details."
       , content: wrappedContentWithFooter body actions
       }
 
@@ -843,15 +842,15 @@ mkComponent = do
       Machine.FetchingRequiredWalletContext { errors } -> do
         let
           body = mempty
-          -- fragment $
-          --   [ contractSection marloweContext.contract marloweContext.state
-          --   , DOOM.hr {}
-          --   ]
+        -- fragment $
+        --   [ contractSection marloweContext.contract marloweContext.state
+        --   , DOOM.hr {}
+        --   ]
         showPossibleErrorAndDismiss "Fetching wallet context" "" body onDismiss errors
 
       Machine.ChoosingInputType { allInputsChoices, requiredWalletContext } -> do
-      -- DetailedFlow { showPrevStep: true } -> do
-      --   fetchingRequiredWalletContextDetails marloweContext (Just setNextFlow) onDismiss $ Just requiredWalletContext
+        -- DetailedFlow { showPrevStep: true } -> do
+        --   fetchingRequiredWalletContextDetails marloweContext (Just setNextFlow) onDismiss $ Just requiredWalletContext
         let
           body = fragment $
             [ contractSection marloweContext.contract marloweContext.state
@@ -1004,6 +1003,7 @@ mkComponent = do
             , outputState: state
             , submittedAt
             }
+
           onSuccess' :: Effect Unit
           onSuccess' = onSuccess contractUpdated
         inputApplied onSuccess'

diff --git a/src/Component/BodyLayout.purs b/src/Component/BodyLayout.purs
@@ -20,8 +20,8 @@ component { title, description, content } =
   DOM.div { className: "container overflow-hidden" } $ do
     DOM.div { className: "row min-height-100vh d-flex flex-row align-items-stretch no-gutters" } $
       [ DOM.div { className: "pe-3 col-3 background-color-primary-light overflow-auto d-flex flex-column justify-content-center" } $
-          [ title
-          , description
+          [ DOM.div { className: "fw-bold font-size-2rem my-3" } $ title
+          , DOM.div { className: "font-size-1rem" } $ description
           ]
       , DOM.div { className: "ps-3 col-9 bg-white" } content
       ]

diff --git a/src/Component/CreateContract.purs b/src/Component/CreateContract.purs
@@ -554,9 +554,9 @@ mkComponent = do
 
 stateToTitle :: Machine.State -> JSX
 stateToTitle state = case state of
-  Machine.DefiningContract -> DOM.div { className: "pe-3 fw-bold" }
-    [ DOOM.img { src: "/images/magnifying_glass.svg" }
-    , DOM.h3 {} $ DOOM.text "Create and submit your contract"
+  Machine.DefiningContract -> DOM.div { className: "pe-3" }
+    [ DOM.div {} $ DOOM.img { src: "/images/magnifying_glass.svg" }
+    , DOM.span {} $ DOOM.text "Create and submit your contract"
     ]
   Machine.DefiningRoleTokens {} -> DOM.h3 {} $ DOOM.text "Defining role tokens"
   Machine.FetchingRequiredWalletContext {} -> DOM.h3 {} $ DOOM.text "Fetching required wallet context"