From ab924ad9c68c7ebc52a94dd989c2a45ca401e9ff Mon Sep 17 00:00:00 2001
From: gboeker <glenda.boeker@gmail.com>
Date: Mon, 4 Mar 2024 23:01:44 -0500
Subject: [PATCH] add deck icon add and position center

---
 static/css/style.css | 13 ++++++++-----
 templates/decks.html | 16 +++++++++-------
 2 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/static/css/style.css b/static/css/style.css
index ace6197..2631106 100644
--- 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%;
+}
\ No newline at end of file
diff --git a/templates/decks.html b/templates/decks.html
index d6f6873..45ac6b5 100644
--- 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,7 +69,7 @@ <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"
             })
@@ -74,6 +77,5 @@ <h3> + </h3>
 
     {% endif %}
 
-
 {% endblock %}