Merge pull request #93 from software-students-spring2024/icon

Fix Add Deck UI
software-students-spring2024 · Mar 5, 2024 · f70e9ff · f70e9ff
2 parents aa0f7f1 + ab924ad
commit f70e9ff
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 12 deletions.
diff --git a/static/css/style.css b/static/css/style.css
@@ -140,13 +140,9 @@ p a{
   font-size: 55px; 
   border: none; 
   outline: none; 
-
+  font-weight: bold;
 }
 
-#add-deck-form p {
-  color: #fafafa;
-} 
-
 .vertical-align {
   display: flex;
   justify-content: space-between;
@@ -264,3 +260,10 @@ p a{
   font-weight: bold;
   padding: 20px;
 }
+
+
+#add-deck-form .user-input {
+  position: absolute;
+  width: 80%;
+  bottom: 7%;
+}
diff --git a/templates/decks.html b/templates/decks.html
@@ -49,12 +49,15 @@ <h3>{{ deck.title }}</h3>
 
     {% if isAuth %} 
 
-        <form action="{{ url_for('createDeck', username=username) }}" method="post" id="add-deck-form" class="personal-deck" style="display: none">
-            <div class="vertical-align">
-                <p>CANCEL</p>
-                <input type="text" name="title" placeholder="Type..." required>
-                <input class="user-input" type="submit" name="create" value="CREATE DECK" />
+        <form action="{{ url_for('createDeck', username=username) }}" class="personal-deck" method="post" id="add-deck-form" style="display: none">
+            <div id="close-icon" class="icon-top-left">
+                <span class="fa-stack fa-4x">
+                    <i class="fa-solid fa-circle fa-stack-2x " style="color:#eae1df"></i>
+                    <i class="fa-solid fa-xmark fa-stack-1x" style="color:#382c2b"></i>
+                </span>
             </div>
+            <input type="text" name="title" placeholder="Type..." required>
+            <input class="user-input" type="submit" name="create" value="CREATE DECK" />
         </form>
 
         <div class="add-deck">
@@ -66,14 +69,13 @@ <h3> + </h3>
             addDeck.addEventListener("click", function() {
                 document.querySelector("#add-deck-form").style.display="flex"
             })
-            const exitAddDeck = document.querySelector("#add-deck-form p")
+            const exitAddDeck = document.querySelector("#add-deck-form #close-icon")
             exitAddDeck.addEventListener("click", function() {
                 document.querySelector("#add-deck-form").style.display="none"
             })
         </script>
 
     {% endif %}
 
-
 {% endblock %}