From 07db7c791d5c9ccf0c1608ef8e2a01ddb2a5e496 Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Wed, 19 Jul 2023 21:28:03 +0200
Subject: [PATCH] improve CreateBoardModal design

---
 src/components/modals/CreateBoardModal.jsx    | 31 ++++++++++++-------
 .../styled/modals/CreateBoardModal.styled.jsx | 11 +++++--
 2 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/src/components/modals/CreateBoardModal.jsx b/src/components/modals/CreateBoardModal.jsx
index 05194ce4..f2feadd7 100644
--- a/src/components/modals/CreateBoardModal.jsx
+++ b/src/components/modals/CreateBoardModal.jsx
@@ -122,18 +122,25 @@ const CreateBoardModal = ({ isOpen, closeModal }) => {
               placeholder="Add a rule"
             />
           </div>
-          <fieldset>
-            <legend>
-              <button id="rule-btn" onClick={handleAddRule}>{editIndex > -1 ? "Update Rule" : "Add Rule"}</button>
-            </legend>
-            {rules.map((rule, index) => (
-              <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 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 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">
+                  <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>
diff --git a/src/components/styled/modals/CreateBoardModal.styled.jsx b/src/components/styled/modals/CreateBoardModal.styled.jsx
index 643d101d..36082690 100644
--- a/src/components/styled/modals/CreateBoardModal.styled.jsx
+++ b/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;
-    width: auto;
+    margin-left: 5px;
+    width: 90%;
   }
 
   legend {