improve CreateBoardModal design

src/components/modals/CreateBoardModal.jsx

@@ -122,9 +122,15 @@ const CreateBoardModal = ({ isOpen, closeModal }) => {
               placeholder="Add a rule"
             />
           </div>
+          <button style={{display: rules.length > 0 ? 'none' : 'block'}} id="rule-btn" className={rules.length > 0 ? "relative" : ""} onClick={handleAddRule}>
+            {editIndex > -1 ? "Update Rule" : "Add Rule"}
+          </button>
+          {rules.length > 0 && (
             <fieldset>
               <legend>
-              <button id="rule-btn" onClick={handleAddRule}>{editIndex > -1 ? "Update Rule" : "Add Rule"}</button>
+                <button className={rules.length > 0 ? "relative" : ""} onClick={handleAddRule}>
+                  {editIndex > -1 ? "Update Rule" : "Add Rule"}
+                </button>
               </legend>
               {rules.map((rule, index) => (
                 <div key={index} className="rule-item">
@@ -134,6 +140,7 @@ const CreateBoardModal = ({ isOpen, closeModal }) => {
                 </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 {