From 73cccf248f5a769476f914ec54c639b0b35fa266 Mon Sep 17 00:00:00 2001
From: Alexander Lee <alexander@open.gov.sg>
Date: Tue, 19 Sep 2023 22:13:08 +0800
Subject: [PATCH] Fix: add button styles and restrict cards to 4

---
 .../components/Homepage/TextCardsBody.tsx       | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/layouts/components/Homepage/TextCardsBody.tsx b/src/layouts/components/Homepage/TextCardsBody.tsx
index c6ec73a2fb..3ecb599801 100644
--- a/src/layouts/components/Homepage/TextCardsBody.tsx
+++ b/src/layouts/components/Homepage/TextCardsBody.tsx
@@ -7,12 +7,13 @@ import {
   Input,
 } from "@opengovsg/design-system-react"
 import _ from "lodash"
+import { BiPlus } from "react-icons/bi"
 
 import { useEditableContext } from "contexts/EditableContext"
 
 import { Editable } from "../Editable"
-import { AddSectionButton } from "../Editable/AddSectionButton"
 
+const NUM_MAX_CARDS = 4
 interface TextCardFormFields {
   title: string
   description?: string
@@ -42,7 +43,6 @@ export const TextCardsSectionBody = ({
   errors,
   cardErrors = [],
 }: TextCardsSectionProps) => {
-  console.log(cards)
   const { onChange, onDelete, onDragEnd, onCreate } = useEditableContext()
 
   return (
@@ -187,10 +187,13 @@ export const TextCardsSectionBody = ({
           </Editable.Droppable>
         </DragDropContext>
       </FormControl>
-      <AddSectionButton
-        w="100%"
+      <Button
+        id={`textcardcard-${index}-create`}
+        variant="outline"
+        w="full"
         pt="0.5rem"
-        buttonText="Add card"
+        leftIcon={<BiPlus fontSize="1.5rem" />}
+        isDisabled={cards.length >= NUM_MAX_CARDS}
         onClick={() => {
           onCreate({
             target: {
@@ -198,7 +201,9 @@ export const TextCardsSectionBody = ({
             },
           })
         }}
-      />
+      >
+        Add card
+      </Button>
       <Button
         id={`section-${index}`}
         onClick={() => onDelete(`section-${index}`, "Text Cards Section")}