From 85bb8b79d11306821c14dd1aa4955707bae0cb05 Mon Sep 17 00:00:00 2001
From: RossAscends <124905043+RossAscends@users.noreply.github.com>
Date: Fri, 14 Apr 2023 04:22:25 +0900
Subject: [PATCH] - bg delete buttons are now webfonts - all large popup panel
 close buttons are webfonts - moved cross.png to disused folder - moved swipes
 to disused folder

---
 public/img/{ => unused PNG}/cross.png       | Bin
 public/img/{ => unused PNG}/swipe_left.png  | Bin
 public/img/{ => unused PNG}/swipe_right.png | Bin
 public/index.html                           |   6 +--
 public/script.js                            |   8 ++--
 public/style.css                            |  40 +++++++++++---------
 6 files changed, 30 insertions(+), 24 deletions(-)
 rename public/img/{ => unused PNG}/cross.png (100%)
 rename public/img/{ => unused PNG}/swipe_left.png (100%)
 rename public/img/{ => unused PNG}/swipe_right.png (100%)

diff --git a/public/img/cross.png b/public/img/unused PNG/cross.png
similarity index 100%
rename from public/img/cross.png
rename to public/img/unused PNG/cross.png
diff --git a/public/img/swipe_left.png b/public/img/unused PNG/swipe_left.png
similarity index 100%
rename from public/img/swipe_left.png
rename to public/img/unused PNG/swipe_left.png
diff --git a/public/img/swipe_right.png b/public/img/unused PNG/swipe_right.png
similarity index 100%
rename from public/img/swipe_right.png
rename to public/img/unused PNG/swipe_right.png
diff --git a/public/index.html b/public/index.html
index e08dd8f45..72e0e6c31 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1493,7 +1493,7 @@
             </div>
 
         </div>
-        <img id="character_cross" src="img/cross.png" style="position: absolute; right: 15px; top: 15px; width: 20px; height: 20px; cursor: pointer; opacity: 0.6">
+        <div id="character_cross" class="fa-solid fa-circle-xmark"></div>
 
         <div id="personality_div">
             <hr>
@@ -1536,7 +1536,7 @@
     </div>
     <div id="world_popup">
         <div id="world_popup_text">
-            <img id="world_cross" src="img/cross.png">
+            <div id="world_cross" class="fa-solid fa-circle-xmark"></div>
             <div id="world_popup_header">
                 <!-- Consider changing logo to something else -->
                 <div class="world_popup_logo_block">
@@ -1660,7 +1660,7 @@
                     <input id="chat_import_avatar_url" name="avatar_url" class="text_pole" maxlength="999" size="2" value="" autocomplete="off" style="display: none;">
                     <input id="chat_import_character_name" name="character_name" class="text_pole" maxlength="999" size="2" value="" autocomplete="off" style="display: none;">
                 </form>
-                <img id="select_chat_cross" src="img/cross.png" alt="Close Past Chat Popup">
+                <div id="select_chat_cross" class="fa-solid fa-circle-xmark" alt="Close Past Chat Popup"></div>
             </div>
 
             <div id="select_chat_div">
diff --git a/public/script.js b/public/script.js
index 235f9210a..d4840153e 100644
--- a/public/script.js
+++ b/public/script.js
@@ -690,7 +690,7 @@ async function getBackgrounds() {
             const thumbPath = `/thumbnail?type=bg&file=${encodeURIComponent(bg)}`;
             $("#bg_menu_content").append(
                 `<div class="bg_example" bgfile="${bg}" class="bg_example_img" title="${bg}" style="background-image: url('${thumbPath}');">
-                <div bgfile="${bg}" class="bg_example_cross">
+                <div bgfile="${bg}" class="bg_example_cross fa-solid fa-circle-xmark"></div>
             </div>`
             );
         }
@@ -2825,7 +2825,7 @@ async function getAllCharaChats() {
                         mes +
                         "</div>" +
                         "</div >" +
-                        '<div file_name="' + data[key]["file_name"] + '" class="PastChat_cross"></div>' +
+                        '<div file_name="' + data[key]["file_name"] + '" class="PastChat_cross fa-solid fa-circle-xmark"></div>' +
                         '</div>'
 
 
@@ -3177,8 +3177,8 @@ function read_bg_load(input) {
                         "url(" + e.target.result + ")"
                     );
                     $("#form_bg_download").after(
-                        `<div class=bg_example bgfile="${html}" style="background-image: url('/thumbnail?type=bg&file=${encodeURIComponent(html)}');">
-                            <img class=bg_example_cross src="img/cross.png">
+                        `<div class="bg_example" bgfile="${html}" style="background-image: url('/thumbnail?type=bg&file=${encodeURIComponent(html)}');">
+                            <div class="bg_example_cross fa-solid fa-circle-xmark"></div>
                         </div>`
                     );
                 },
diff --git a/public/style.css b/public/style.css
index 56a5775a8..cd40f8729 100644
--- a/public/style.css
+++ b/public/style.css
@@ -614,6 +614,19 @@ select {
     margin-bottom: 0;
 }
 
+#character_cross,
+#world_cross,
+#select_chat_cross {
+    position: absolute;
+    right: 15px;
+    top: 15px;
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+    opacity: 0.6;
+    font-size: 24px;
+}
+
 #firstmessage_textarea {
     height: -webkit-fill-available;
 }
@@ -1007,16 +1020,16 @@ input[type=search]:focus::-webkit-search-cancel-button {
     position: relative;
     float: right;
     right: 10px;
-    top: 10px;
+    top: 5px;
     cursor: pointer;
-    opacity: 0.4;
-    background-color: var(--black100);
+    opacity: 0.7;
     border-radius: 50%;
-    background-repeat: no-repeat;
-    background-size: cover;
-    background-position: center;
-    box-shadow: 0 0 0 2pt black;
-    background-image: url(img/cross.png);
+    font-size: 20px;
+    color: var(--black70a);
+    text-shadow: none;
+    padding: 0;
+    margin: 0;
+    filter: drop-shadow(0px 0px 3px white);
 }
 
 .no-border {
@@ -2149,18 +2162,11 @@ h5 {
     height: 15px;
     cursor: pointer;
     opacity: 0.4;
-    background-image: url(img/cross.png);
-    background-size: contain;
-    background-color: var(--black100);
-    background-repeat: no-repeat;
-    background-position: center;
-    border-radius: 50%;
-    box-shadow: 0 0 0 2pt black;
 }
 
 .PastChat_cross:hover {
-    background-color: var(--fullred);
-    box-shadow: 0 0 0 2pt red;
+    color: red;
+    filter: drop-shadow(0 0 2px red);
 }
 
 #advanced_book_logo {