From 095af10d4fb4bc607a7a37e04cd3faf6dacdeeb7 Mon Sep 17 00:00:00 2001
From: Sinclair Chen <abc.sinclair@gmail.com>
Date: Wed, 13 Jul 2022 16:50:08 -0700
Subject: [PATCH] replace raw checkbox w/ Checkbox component

also run prettier
---
 web/components/checkbox.tsx |  6 ++++--
 web/components/editor.tsx   |  8 ++++++--
 web/pages/create.tsx        | 17 ++++++++---------
 3 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/web/components/checkbox.tsx b/web/components/checkbox.tsx
index 9cc7cae9..22a867b2 100644
--- a/web/components/checkbox.tsx
+++ b/web/components/checkbox.tsx
@@ -5,12 +5,13 @@ export function Checkbox(props: {
   checked: boolean
   toggle: (checked: boolean) => void
   className?: string
+  disabled?: boolean
 }) {
-  const { label, checked, toggle, className } = props
+  const { label, checked, toggle, className, disabled } = props
 
   return (
     <div className={clsx(className, 'space-y-5')}>
-      <div className="relative flex items-start">
+      <div className="relative flex items-center">
         <div className="flex h-6 items-center">
           <input
             id={label}
@@ -18,6 +19,7 @@ export function Checkbox(props: {
             className="h-5 w-5 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
             checked={checked}
             onChange={(e) => toggle(!e.target.checked)}
+            disabled={disabled}
           />
         </div>
         <div className="ml-3">
diff --git a/web/components/editor.tsx b/web/components/editor.tsx
index 41c2b80a..4b3e2cce 100644
--- a/web/components/editor.tsx
+++ b/web/components/editor.tsx
@@ -21,7 +21,7 @@ import { FileUploadButton } from './file-upload-button'
 import { linkClass } from './site-link'
 
 const proseClass = clsx(
-  'prose prose-sm prose-p:my-0 prose-li:my-0 prose-blockquote:not-italic max-w-none',
+  'prose prose-sm prose-p:my-0 prose-li:my-0 prose-blockquote:not-italic max-w-none'
 )
 
 export function useTextEditor(props: {
@@ -50,7 +50,11 @@ export function useTextEditor(props: {
       }),
       CharacterCount.configure({ limit: max }),
       Image,
-      Link.configure({ HTMLAttributes: { class: clsx('no-underline !text-indigo-700', linkClass)}}),
+      Link.configure({
+        HTMLAttributes: {
+          class: clsx('no-underline !text-indigo-700', linkClass),
+        },
+      }),
     ],
     content: defaultValue,
   })
diff --git a/web/pages/create.tsx b/web/pages/create.tsx
index 7040dff0..8d4c3662 100644
--- a/web/pages/create.tsx
+++ b/web/pages/create.tsx
@@ -27,6 +27,7 @@ import { track } from 'web/lib/service/analytics'
 import { GroupSelector } from 'web/components/groups/group-selector'
 import { User } from 'common/user'
 import { TextEditor, useTextEditor } from 'web/components/editor'
+import { Checkbox } from 'web/components/checkbox'
 
 type NewQuestionParams = {
   groupId?: string
@@ -294,15 +295,13 @@ export function NewContract(props: {
             </Row>
 
             {!(min !== undefined && min < 0) && (
-              <Row className="mt-1 ml-2 mb-2 items-center">
-                <span className="mr-2 text-sm">Log scale</span>{' '}
-                <input
-                  type="checkbox"
-                  checked={isLogScale}
-                  onChange={() => setIsLogScale(!isLogScale)}
-                  disabled={isSubmitting}
-                />
-              </Row>
+              <Checkbox
+                className="my-2 text-sm"
+                label="Log scale"
+                checked={isLogScale}
+                toggle={() => setIsLogScale(!isLogScale)}
+                disabled={isSubmitting}
+              />
             )}
 
             {min !== undefined && max !== undefined && min >= max && (