PLT-6236 update buttons design on template contracts

input-output-hk · Jul 13, 2023 · adae077 · adae077
1 parent fe528c0
commit adae077
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 51 deletions.
diff --git a/src/Component/ContractTemplates/ContractForDifferencesWithOracle.purs b/src/Component/ContractTemplates/ContractForDifferencesWithOracle.purs
@@ -250,23 +250,29 @@ mkComponent = do
         Nothing -> DOM.div { className: "form-group" } fields
         Just contract -> marloweYaml contract
       formActions = fragment
-        [ link
-            { label: DOOM.text "Cancel"
-            , onClick: onDismiss
-            , showBorders: true
-            , extraClassNames: "me-3"
-            }
-        , DOM.button
-            do
-              let
-                disabled = case result of
-                  Just (V (Right _) /\ _) -> false
-                  _ -> true
-              { className: "btn btn-primary"
-              , onClick: onSubmit'
-              , disabled
-              }
-            [ DOOM.text "Submit" ]
+        [ 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.button
+                    do
+                      let
+                        disabled = case result of
+                          Just (V (Right _) /\ _) -> false
+                          _ -> true
+                      { className: "btn btn-primary"
+                      , onClick: onSubmit'
+                      , disabled
+                      }
+                    [ DOOM.text "Submit" ]
+                ]
+            ]
         ]
     pure $ BodyLayout.component
       { title: "Contract For Differences With Oracle"

diff --git a/src/Component/ContractTemplates/Escrow.purs b/src/Component/ContractTemplates/Escrow.purs
@@ -252,23 +252,29 @@ mkComponent = do
         Nothing -> DOM.div { className: "form-group" } fields
         Just contract -> marloweYaml contract
       formActions = fragment
-        [ link
-            { label: DOOM.text "Cancel"
-            , onClick: onDismiss
-            , showBorders: true
-            , extraClassNames: "me-3"
-            }
-        , DOM.button
-            do
-              let
-                disabled = case result of
-                  Just (V (Right _) /\ _) -> false
-                  _ -> true
-              { className: "btn btn-primary"
-              , onClick: onSubmit'
-              , disabled
-              }
-            [ DOOM.text "Submit" ]
+        [ 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.button
+                    do
+                      let
+                        disabled = case result of
+                          Just (V (Right _) /\ _) -> false
+                          _ -> true
+                      { className: "btn btn-primary"
+                      , onClick: onSubmit'
+                      , disabled
+                      }
+                    [ DOOM.text "Submit" ]
+                ]
+            ]
         ]
     pure $ BodyLayout.component
       { title: "Escrow"

diff --git a/src/Component/ContractTemplates/Swap.purs b/src/Component/ContractTemplates/Swap.purs
@@ -177,23 +177,29 @@ mkComponent = do
         Nothing -> DOM.div { className: "form-group" } fields
         Just contract -> marloweYaml contract
       formActions = fragment
-        [ link
-            { label: DOOM.text "Cancel"
-            , onClick: onDismiss
-            , showBorders: true
-            , extraClassNames: "me-3"
-            }
-        , DOM.button
-            do
-              let
-                disabled = case result of
-                  Just (V (Right _) /\ _) -> false
-                  _ -> true
-              { className: "btn btn-primary"
-              , onClick: onSubmit'
-              , disabled
-              }
-            [ DOOM.text "Submit" ]
+        [ 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.button
+                    do
+                      let
+                        disabled = case result of
+                          Just (V (Right _) /\ _) -> false
+                          _ -> true
+                      { className: "btn btn-primary"
+                      , onClick: onSubmit'
+                      , disabled
+                      }
+                    [ DOOM.text "Submit" ]
+                ]
+            ]
         ]
     pure $ BodyLayout.component
       { title: "Swap"