improve CreateBoardModal design

src/components/modals/CreateBoardModal.jsx

@@ -122,18 +122,25 @@ const CreateBoardModal = ({ isOpen, closeModal }) => {
               placeholder="Add a rule"
             />
           </div>
-          <fieldset>
+          <button style={{display: rules.length > 0 ? 'none' : 'block'}} id="rule-btn" className={rules.length > 0 ? "relative" : ""} onClick={handleAddRule}>
-            <legend>
+            {editIndex > -1 ? "Update Rule" : "Add Rule"}
-              <button id="rule-btn" onClick={handleAddRule}>{editIndex > -1 ? "Update Rule" : "Add Rule"}</button>
+          </button>
-            </legend>
+          {rules.length > 0 && (
-            {rules.map((rule, index) => (
+            <fieldset>
-              <div key={index} className="rule-item">
+              <legend>
-                <p>{index+1}. {rule}</p>
+                <button className={rules.length > 0 ? "relative" : ""} onClick={handleAddRule}>
-                <button onClick={() => handleEditRule(index)}>Edit</button>
+                  {editIndex > -1 ? "Update Rule" : "Add Rule"}
-                <button onClick={() => handleDeleteRule(index)}>Delete</button>
+                </button>
-              </div>
+              </legend>
-            ))}
+              {rules.map((rule, index) => (
-          </fieldset>
+                <div key={index} className="rule-item">
+                  <p>{index+1}. {rule}</p>
+                  <button onClick={() => handleEditRule(index)}>Edit</button>
+                  <button onClick={() => handleDeleteRule(index)}>Delete</button>
+                </div>
+              ))}
+            </fieldset>
+          )}
           <button id="create-board-btn">Create Board</button>
         </ul>
       </div>

src/components/styled/modals/CreateBoardModal.styled.jsx

@@ -71,10 +71,17 @@ export const StyledModal = styled(Modal)`
     font-size: 0.8em;
   }
 
+  #rule {
+    
+  }
+
+  #rule-btn {
+    margin-left: 281px;
+  }
 
   fieldset {
-    margin-left: 24px;
+    margin-left: 5px;
-    width: auto;
+    width: 90%;
   }
 
   legend {