PLT-7515 update design of create contract form

input-output-hk · Sep 19, 2023 · e166cee · e166cee
1 parent 69e1303
commit e166cee
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 17 deletions.
diff --git a/public/images/arrow_right_alt.svg b/public/images/arrow_right_alt.svg
diff --git a/public/style.scss b/public/style.scss
@@ -1,3 +1,6 @@
+@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
+
 $font-family-base: 'Outfit', sans-serif;
 $primary: #511CF7;
 $sucess: #00C48C;
@@ -329,6 +332,7 @@ $utilities: map-merge(
         8rem: 8rem,
         16rem: 16rem,
         32rem: 32rem,
+        100: 100%,
       )
     ),
     "margin-top": (

diff --git a/src/Component/CreateContract.purs b/src/Component/CreateContract.purs
@@ -61,6 +61,7 @@ import Language.Marlowe.Core.V1.Semantics.Types as V1
 import Marlowe.Runtime.Web.Client (ClientError)
 import Marlowe.Runtime.Web.Types (ContractEndpoint, PostContractsError, RoleTokenConfig(..), RolesConfig(..), Tags(..))
 import Partial.Unsafe (unsafeCrashWith)
+import Polyform.Batteries.Generic.Messages (placeholder)
 import Polyform.Validator (liftFn)
 import Polyform.Validator (liftFnEither, liftFnMMaybe) as Validator
 import React.Basic (fragment) as DOOM
@@ -130,7 +131,7 @@ mkContractFormSpec (possibleInitialContract /\ (AutoRun initialAutoRun)) = FormS
       , initial: case possibleInitialContract of
           Nothing -> ""
           Just (ContractJsonString initialContract) -> formatPossibleJSON initialContract
-      , label: Just $ DOOM.text "Contract JSON"
+      , label: mempty
       , touched: isJust possibleInitialContract
       , validator: requiredV' $ Validator.liftFnEither \jsonString -> do
           json <- lmap (const $ [ "Invalid JSON" ]) $ parseJson jsonString
@@ -142,10 +143,11 @@ mkContractFormSpec (possibleInitialContract /\ (AutoRun initialAutoRun)) = FormS
     -- -> FormSpecBuilderT builderM (StatelessBootstrapFormSpec validatorM) Query a
     tags <- labelSubform tagFieldId $ StatelessFormSpecBuilders.textInput
       { helpText: Just $ DOOM.div_
-          [ DOOM.text "Tags"
+          [ DOOM.text "Add Tags"
           ]
       , initial: ""
-      , label: Just $ DOOM.text "Tags"
+      , label: mempty
+      , placeholder: "Tags"
       , touched: false
       , validator: liftFn case _ of
           Nothing -> Tags Map.empty
@@ -157,8 +159,8 @@ mkContractFormSpec (possibleInitialContract /\ (AutoRun initialAutoRun)) = FormS
       }
 
     autoRun <- map AutoRun $ labelSubform autoRunFieldId $ booleanField
-      { label: DOOM.text "Auto run"
-      , helpText: DOOM.text "Whether to run the contract creation process automatically"
+      { label: DOOM.text ""
+      , helpText: DOOM.text "Auto-run contract"
       , initial: initialAutoRun
       , name: autoRunFieldId
       }
@@ -388,26 +390,20 @@ mkComponent = do
             ]
           formActions = fragment
             [ DOM.div { className: "row" } $
-                [ DOM.div { className: "col-6 text-start" } $
-                    [ link
-                        { label: DOOM.text "Cancel"
-                        , onClick: onDismiss
-                        , showBorders: true
-                        , extraClassNames: "me-3"
-                        }
-                    ]
-                , DOM.div { className: "col-6 text-end" } $
+                [ DOM.div { className: "col-12" } $
                     [ DOM.button
                         do
                           let
                             disabled = case result of
                               Just (V (Right _) /\ _) -> false
                               _ -> true
-                          { className: "btn btn-primary"
+                          { className: "btn btn-primary w-100"
                           , onClick: onSubmit'
                           , disabled
                           }
-                        [ R.text "Submit" ]
+                        [ R.text "Submit contract"
+                        , DOM.span {} $ DOOM.img { src: "/images/arrow_right_alt.svg" }
+                        ]
                     ]
                 ]
             ]
@@ -452,7 +448,7 @@ mkComponent = do
                   [ DOM.div { className: "row" } $
                       [ DOM.div { className: "col-12 text-end" } $
                           [ DOM.button
-                              { className: "btn btn-primary"
+                              { className: "btn btn-primary w-100"
                               , onClick: handler_ (onSuccess contractEndpoint)
                               }
                               [ R.text "Done" ]