From 625792fccf17896af1894df85f7bb74878eed7a6 Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Thu, 21 Apr 2022 11:26:11 +0300
Subject: [PATCH] feat: finish submit bounty modal

---
 src/Components/Button/Button.tsx              | 16 +++++++++++-
 .../SubmitBountyPlanModal.tsx                 | 25 ++++++++++++++++---
 src/index.css                                 |  5 ++--
 tailwind.config.js                            |  1 +
 4 files changed, 40 insertions(+), 7 deletions(-)

diff --git a/src/Components/Button/Button.tsx b/src/Components/Button/Button.tsx
index 1c58cc8..89fe78a 100644
--- a/src/Components/Button/Button.tsx
+++ b/src/Components/Button/Button.tsx
@@ -15,6 +15,7 @@ interface Props {
     className?: string
     isLoading?: boolean;
     disableOnLoading?: boolean;
+    disabled?: boolean;
     [rest: string]: any;
 }
 
@@ -56,7 +57,19 @@ const btnPadding: UnionToObjectKeys<Props, 'size'> = {
     lg: 'py-12 px-36 text-body4'
 }
 
-export default function Button({ color = 'white', variant = 'fill', isLoading, disableOnLoading = true, size = 'md', fullWidth, href, newTab, className, onClick, children, ...props }: Props) {
+export default function Button({ color = 'white',
+    variant = 'fill',
+    isLoading,
+    disableOnLoading = true,
+    size = 'md',
+    fullWidth,
+    disabled,
+    href,
+    newTab,
+    className,
+    onClick,
+    children,
+    ...props }: Props) {
 
     let classes = `
     inline-block font-sans rounded-lg font-regular border border-gray-300 hover:cursor-pointer
@@ -65,6 +78,7 @@ export default function Button({ color = 'white', variant = 'fill', isLoading, d
     ${variant === 'fill' ? btnStylesFill[color] : btnStylesOutline[color]}
     ${isLoading && disableOnLoading && 'bg-opacity-70 pointer-events-none'}
     ${fullWidth && 'w-full'}
+    ${disabled && 'opacity-40 pointer-events-none'}
     `;
 
 
diff --git a/src/features/Posts/pages/PostDetailsPage/Components/SubmitBountyPlanModal/SubmitBountyPlanModal.tsx b/src/features/Posts/pages/PostDetailsPage/Components/SubmitBountyPlanModal/SubmitBountyPlanModal.tsx
index 287c3fd..1fe8798 100644
--- a/src/features/Posts/pages/PostDetailsPage/Components/SubmitBountyPlanModal/SubmitBountyPlanModal.tsx
+++ b/src/features/Posts/pages/PostDetailsPage/Components/SubmitBountyPlanModal/SubmitBountyPlanModal.tsx
@@ -1,5 +1,6 @@
 import { motion } from 'framer-motion'
 import { IoClose } from 'react-icons/io5'
+import Button from 'src/Components/Button/Button'
 import DatePicker from 'src/Components/Inputs/DatePicker/DatePicker'
 import { ModalCard, modalCardVariants } from 'src/Components/Modals/ModalsContainer/ModalsContainer'
 
@@ -40,14 +41,30 @@ export default function Login_SuccessCard({ onClose, direction, ...props }: Moda
             </div>
 
             <div>
-                <div className="mt-16">
-                    <input className="appearance-none h-16 w-16 border border-gray-300 rounded-sm bg-gray-200 checked:bg-primary-600 checked:border-primary-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer" type="checkbox" value="" id="flexCheckChecked" />
-                    <label className=" inline-block text-gray-800" htmlFor="flexCheckChecked">
-                        Checked checkbox
+                <div className="mt-16 flex gap-16">
+                    <input
+                        className='input-checkbox self-center'
+                        type="checkbox" value="" />
+                    <label className="text-body4 text-gray-600" >
+                        I understand that this is an application and I should wait for approval from the funder before working
+                    </label>
+                </div>
+                <div className="mt-16 flex gap-16">
+                    <input
+                        className='input-checkbox self-center'
+                        type="checkbox" value="" />
+                    <label className="text-body4 text-gray-600" >
+                        I agree to keep the funder informed of my progress every few days
                     </label>
                 </div>
             </div>
 
+            <Button fullWidth color='black' className='mt-24' disabled>
+                Submit
+            </Button>
+            <p className="text-body6 text-gray-600 mt-4 font-medium" >
+                Please fill all the required fields in order to submit</p>
+
 
         </motion.div>
     )
diff --git a/src/index.css b/src/index.css
index 66ad76f..cdc477b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -25,8 +25,9 @@
     @apply flex-grow border-none focus:border-0 focus:!ring-0 bg-transparent min-w-0 text-primary-500;
   }
 
-  .input-field {
-    @apply flex-grow appearance-none w-full py-2 px-3 bg-transparent text-primary-500 leading-tight focus:outline-none;
+  .input-checkbox {
+    @apply rounded-4 bg-gray-200 border-transparent focus:border-transparent focus:bg-primary-200
+                        text-primary-700 focus:ring-1 focus:ring-offset-2 focus:ring-primary-500;
   }
 
   .input-icon {
diff --git a/tailwind.config.js b/tailwind.config.js
index 77ec360..7324c82 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -74,6 +74,7 @@ module.exports = {
 
       borderRadius: {
         0: "0",
+        4: "4px",
         8: "8px",
         10: "10px",
         12: "12px",