From cd6ed7dc55a1aaf19a61a0445bf68b2412f0ebb6 Mon Sep 17 00:00:00 2001
From: jahooma <jahooma@gmail.com>
Date: Mon, 13 Dec 2021 18:28:37 -0600
Subject: [PATCH] Add confirmation dialog when resolving market!

---
 web/components/layout/col.tsx       |  4 ++-
 web/components/layout/row.tsx       |  4 ++-
 web/components/resolution-panel.tsx | 50 +++++++++++++++++++++--------
 3 files changed, 42 insertions(+), 16 deletions(-)

diff --git a/web/components/layout/col.tsx b/web/components/layout/col.tsx
index da71f130..128b13f4 100644
--- a/web/components/layout/col.tsx
+++ b/web/components/layout/col.tsx
@@ -1,5 +1,7 @@
+import clsx from 'clsx'
+
 export function Col(props: { children?: any; className?: string }) {
   const { children, className } = props
 
-  return <div className={`${className} flex flex-col`}>{children}</div>
+  return <div className={clsx(className, 'flex flex-col')}>{children}</div>
 }
diff --git a/web/components/layout/row.tsx b/web/components/layout/row.tsx
index 4faaeb6c..6e4c9e91 100644
--- a/web/components/layout/row.tsx
+++ b/web/components/layout/row.tsx
@@ -1,5 +1,7 @@
+import clsx from 'clsx'
+
 export function Row(props: { children?: any; className?: string }) {
   const { children, className } = props
 
-  return <div className={`${className} flex flex-row`}>{children}</div>
+  return <div className={clsx(className, 'flex flex-row')}>{children}</div>
 }
diff --git a/web/components/resolution-panel.tsx b/web/components/resolution-panel.tsx
index 167ccdcb..2e5f59ad 100644
--- a/web/components/resolution-panel.tsx
+++ b/web/components/resolution-panel.tsx
@@ -19,7 +19,18 @@ export function ResolutionPanel(props: {
 
   const resolveDisabled = false
 
-  function resolve() {}
+  function resolve() {
+    console.log('resolved', outcome)
+  }
+
+  const submitButtonClass =
+    outcome === 'YES'
+      ? 'btn-primary'
+      : outcome === 'NO'
+      ? 'bg-red-400 hover:bg-red-500'
+      : outcome === 'CANCEL'
+      ? 'bg-yellow-400 hover:bg-yellow-500'
+      : 'btn-disabled'
 
   return (
     <Col
@@ -59,23 +70,34 @@ export function ResolutionPanel(props: {
 
       <Spacer h={3} />
 
-      <button
+      <label
+        htmlFor="resolution-modal"
         className={clsx(
-          'btn border-none self-start m-2',
-          resolveDisabled
-            ? 'btn-disabled'
-            : outcome === 'YES'
-            ? 'btn-primary'
-            : outcome === 'NO'
-            ? 'bg-red-400 hover:bg-red-500'
-            : outcome === 'CANCEL'
-            ? 'bg-yellow-400 hover:bg-yellow-500'
-            : 'btn-disabled'
+          'btn modal-button border-none self-start m-2',
+          resolveDisabled ? 'btn-disabled' : submitButtonClass
         )}
-        onClick={resolveDisabled ? undefined : resolve}
       >
         Resolve
-      </button>
+      </label>
+      <input type="checkbox" id="resolution-modal" className="modal-toggle" />
+
+      <div className="modal">
+        <div className="modal-box">
+          <p>Are you sure you want to resolve this market?</p>
+          <div className="modal-action">
+            <label htmlFor="resolution-modal" className="btn">
+              Back
+            </label>
+            <label
+              htmlFor="resolution-modal"
+              className={clsx('btn', submitButtonClass)}
+              onClick={resolve}
+            >
+              Resolve
+            </label>
+          </div>
+        </div>
+      </div>
     </Col>
   )
 }