- converted UI img SVGs to webfonts

- moved unused SVGs and PNGs into subfolders for deletion consideration

public/index.html

@@ -5,13 +5,12 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, viewport-fit=cover, initial-scale=1, maximum-scale=1.0, user-scalable=no">
     <meta name="apple-mobile-web-app-capable" content="yes">
-    <!--<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">-->
-    <!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>-->
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
     <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&amp;display=swap" rel="stylesheet">
+    <!-- fontawesome webfonts-->
     <link href="css/all.css" rel="stylesheet">
-  
+
     <link rel="apple-touch-icon" sizes="57x57" href="img/apple-icon-57x57.png" />
     <link rel="apple-touch-icon" sizes="72x72" href="img/apple-icon-72x72.png" />
     <link rel="apple-touch-icon" sizes="114x114" href="img/apple-icon-114x114.png" />
@@ -66,14 +65,14 @@
 
         <div id="ai-config-button" class="drawer" style="z-index:3002;">
             <div class="drawer-toggle drawer-header">
-                <div id="leftNavDrawerIcon" class="drawer-icon icon-sliders closedIcon" title="AI Response Configuration"></div>
+                <div id="leftNavDrawerIcon" class="drawer-icon fa-solid fa-sliders  closedIcon" title="AI Response Configuration"></div>
             </div>
             <div id="left-nav-panel" class="drawer-content fillLeft closedDrawer widthFreeExpand">
                 <div class="right_menu_button" id="lm_button_panel_pin_div" title="Locked = AI Configuration panel will stay open">
                     <input type="checkbox" id="lm_button_panel_pin">
                     <label for="lm_button_panel_pin">
-                        <img class="unchecked svg_icon" alt="" src="img/lock-open-solid.svg" />
+                        <div class="unchecked fa-solid fa-lock-open "></div>
-                        <img class="checked svg_icon" alt="" src="img/lock-solid.svg" />
+                        <div class="checked fa-solid fa-lock "></div>
                     </label>
                 </div>
                 <div class="flex-container">
@@ -657,7 +656,7 @@
                                 <div class="range-block-title openai_restorable">
                                     <span>Main prompt</span>
                                     <div id="main_prompt_restore" title="Restore default prompt" class="right_menu_button">
-                                        <img alt="" class="svg_icon" src="img/clock-rotate-left-solid.svg" />
+                                        <div alt="" class="fa-solid fa-clock-rotate-left "></div>
                                     </div>
                                 </div>
                                 <div class="range-block-counter">
@@ -671,7 +670,7 @@
                                 <div class="range-block-title openai_restorable">
                                     <span>NSFW prompt</span>
                                     <div id="nsfw_prompt_restore" title="Restore default prompt" class="right_menu_button">
-                                        <img alt="" class="svg_icon" src="img/clock-rotate-left-solid.svg" />
+                                        <div alt="" class="fa-solid fa-clock-rotate-left "></div>
                                     </div>
                                 </div>
                                 <div class="range-block-counter">
@@ -685,7 +684,7 @@
                                 <div class="range-block-title openai_restorable">
                                     <span>Jailbreak prompt</span>
                                     <div id="jailbreak_prompt_restore" title="Restore default prompt" class="right_menu_button">
-                                        <img alt="" class="svg_icon" src="img/clock-rotate-left-solid.svg" />
+                                        <div alt="" class="fa-solid fa-clock-rotate-left "></div>
                                     </div>
                                 </div>
                                 <div class="range-block-counter">
@@ -742,7 +741,7 @@
 
         <div id="sys-settings-button" class="drawer" style="z-index:3001;">
             <div class="drawer-toggle drawer-header">
-                <div id="API-status-top" class="drawer-icon icon-api closedIcon" title="API Connections"></div>
+                <div id="API-status-top" class="drawer-icon fa-solid fa-plug-circle-exclamation  closedIcon" title="API Connections"></div>
             </div>
             <div id="rm_api_block" class="drawer-content closedDrawer">
                 <div id="main-API-selector-block">
@@ -767,7 +766,7 @@
                             <h5>Example: http://127.0.0.1:5000/api </h5>
                             <input id="api_url_text" name="api_url" class="text_pole" maxlength="500" value="" autocomplete="off">
                             <input id="api_button" class="menu_button" type="submit" value="Connect">
-                            <img id="api_loading" src="img/load.svg">
+                            <div id="api_loading" class="api-load-icon fa-solid fa-hourglass fa-spin"></div>
                         </div>
                         <div id="kobold_horde_block">
 
@@ -782,7 +781,7 @@
                             <h4 class="horde_model_title">
                                 Model
                                 <div id="horde_refresh" title="Refresh models" class="right_menu_button">
-                                    <img class="svg_icon" src="img/repeat-solid.svg" />
+                                    <div class="fa-solid fa-repeat "></div>
                                 </div>
                             </h4>
                             <select id="horde_model">
@@ -806,7 +805,7 @@
                         </h5>
                         <input id="api_key_novel" name="api_key_novel" class="text_pole" maxlength="500" size="35" value="" autocomplete="off">
                         <input id="api_button_novel" class="menu_button" type="submit" value="Connect">
-                        <img id="api_loading_novel" src="img/load.svg">
+                        <div id="api_loading_novel" class="api-load-icon fa-solid fa-hourglass fa-spin"></div>
                     </form>
                     <div id="online_status3">
                         <div id="online_status_indicator3"></div>
@@ -829,7 +828,7 @@
                         <h5>Example: http://127.0.0.1:7860/ </h5>
                         <input id="textgenerationwebui_api_url_text" name="textgenerationwebui_api_url" class="text_pole" maxlength="500" value="" autocomplete="off">
                         <input id="api_button_textgenerationwebui" class="menu_button" type="submit" value="Connect">
-                        <img id="api_loading_textgenerationwebui" src="img/load.svg">
+                        <div id="api_loading_textgenerationwebui" class="api-load-icon fa-solid fa-hourglass fa-spin"></div>
                     </form>
                     <div class="online_status4">
                         <div class="online_status_indicator4"></div>
@@ -846,7 +845,7 @@
                         </h5>
                         <input id="api_key_openai" name="api_key_openai" class="text_pole" maxlength="500" value="" autocomplete="off">
                         <input id="api_button_openai" class="menu_button" type="submit" value="Connect">
-                        <img id="api_loading_openai" src="img/load.svg">
+                        <div id="api_loading_openai" class=" api-load-icon fa-solid fa-hourglass fa-spin"></div>
                     </form>
                     <div class="online_status4">
                         <div class="online_status_indicator4"></div>
@@ -861,7 +860,7 @@
                     <div class="inline-drawer">
                         <div class="inline-drawer-toggle inline-drawer-header">
                             <b>Instructions:</b>
-                            <div class="inline-drawer-icon down"></div>
+                            <div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
                         </div>
                         <div class="inline-drawer-content">
                             <ol>
@@ -883,7 +882,7 @@
                     </div>
 
                     <input id="poe_connect" class="menu_button" type="button" value="Connect" />
-                    <img id="api_loading_poe" src="img/load.svg">
+                    <div id="api_loading_poe" class="api-load-icon fa-solid fa-hourglass fa-spin"></div>
 
                     <div class="range-block">
                         <div class="range-block-title">
@@ -908,7 +907,7 @@
         </div>
         <div id="advanced-formatting-button" class="drawer" style="z-index:3005;">
             <div class="drawer-toggle">
-                <div class="drawer-icon icon-formatting closedIcon" title="AI Reponse Formatting"></div>
+                <div class="drawer-icon fa-solid fa-font  closedIcon" title="AI Reponse Formatting"></div>
             </div>
             <div class="drawer-content">
                 <h3>Advanced Formatting
@@ -988,7 +987,7 @@
 
         <div id="WI-SP-button" class="drawer" style="z-index:3003;">
             <div class="drawer-toggle drawer-header">
-                <div class="drawer-icon icon-globe closedIcon " title="World Info & Soft Prompts"></div>
+                <div class="drawer-icon fa-solid fa-book-atlas closedIcon " title="World Info & Soft Prompts"></div>
             </div>
             <div class="drawer-content closedDrawer">
                 <div id="wi-holder">
@@ -1041,7 +1040,7 @@
 
         <div id="user-settings-button" class="drawer" style="z-index:3004;">
             <div class="drawer-toggle">
-                <div class="drawer-icon icon-user closedIcon" title="User Settings"></div>
+                <div class="drawer-icon fa-regular fa-face-smile closedIcon" title="User Settings"></div>
             </div>
             <div id="user-settings-block" class="drawer-content closedDrawer">
                 <h3>User Settings</h3>
@@ -1214,7 +1213,7 @@
         </div>
         <div id="logo_block" class="drawer" style="z-index:3001;" title="Change Background Image">
             <div id="site_logo" class="drawer-toggle drawer-header">
-                <div class="drawer-icon icon-panorama closedIcon"></div>
+                <div class="drawer-icon fa-solid fa-panorama  closedIcon"></div>
             </div>
             <div class="drawer-content closedDrawer">
                 <div class="flex-container">
@@ -1232,7 +1231,7 @@
 
         <div id="extensions-settings-button" class="drawer" style="z-index:3004;">
             <div class="drawer-toggle">
-                <div class="drawer-icon icon-cubes closedIcon" title="Extensions"></div>
+                <div class="drawer-icon fa-solid fa-cubes  closedIcon" title="Extensions"></div>
             </div>
             <div id="rm_extensions_block" class="drawer-content closedDrawer">
                 <div class="extensions_block">
@@ -1268,22 +1267,20 @@
 
         <div id="rightNavHolder" class="drawer" style="z-index:3001;">
             <div id="unimportantYes" class="drawer-toggle drawer-header">
-                <div id="rightNavDrawerIcon" class="drawer-icon icon-idcard closedIcon" title="Character Management">
+                <div id="rightNavDrawerIcon" class="drawer-icon fa-regular fa-id-card  closedIcon" title="Character Management">
                 </div>
             </div>
             <nav id="right-nav-panel" class="drawer-content closedDrawer fillRight">
                 <div id="right-nav-panel-tabs">
-                    <div class="right_menu_button" id="rm_button_characters" title="Select/Create Characters">
+                    <div class="right_menu_button fa-solid fa-list-ul" id="rm_button_characters" title="Select/Create Characters"></div>
-                        <img alt="" class="svg_icon" src="img/list-ul-solid.svg" />
-                    </div>
                     <div class="right_menu_button" id="rm_button_selected_ch">
                         <h2></h2>
                     </div>
                     <div class="right_menu_button" id="rm_button_panel_pin_div" title="Locked = Character Management panel will stay open">
                         <input type="checkbox" id="rm_button_panel_pin">
                         <label for="rm_button_panel_pin">
-                            <img class="unchecked svg_icon" alt="" src="img/lock-open-solid.svg" />
+                            <div class="fa-solid unchecked  fa-lock-open" alt=""></div>
-                            <img class="checked svg_icon" alt="" src="img/lock-solid.svg" />
+                            <div class="fa-solid checked  fa-lock" alt=""></div>
                         </label>
                     </div>
                 </div>
@@ -1299,33 +1296,23 @@
                                     <img id="avatar_load_preview" src="img/ai4.png" alt="avatar">
                                 </div>
                                 <div class="form_create_bottom_buttons_block">
-                                    <label for="add_avatar_button" class="menu_button" title="Click to select a new avatar for this character">
+                                    <label for="add_avatar_button" class="menu_button fa-solid fa-file-image " title="Click to select a new avatar for this character">
                                         <input type="file" id="add_avatar_button" name="avatar" accept="image/png, image/jpeg, image/jpg, image/gif, image/bmp">
-                                        <img alt="" class="svg_icon" src="img/file-image-solid.svg">
                                     </label>
-                                    <div id="rm_button_back" class="menu_button">
+                                    <div id="rm_button_back" class="menu_button fa-solid fa-left-long "></div>
-                                        <img alt="" class="svg_icon" src="img/left-long-solid.svg">
+                                    <div id="advanced_div" class="menu_button fa-solid fa-book " title="Advanced Definitions"></div>
-                                    </div>
-                                    <div id="advanced_div" class="menu_button" title="Advanced Definitions">
-                                        <img alt="" class="svg_icon" src="img/book-solid.svg">
-                                    </div>
                                     <div id="export_format_popup" class="list-group">
                                         <div class="export_format list-group-item" data-format="png">PNG</div>
                                         <div class="export_format list-group-item" data-format="json">JSON</div>
                                         <div class="export_format list-group-item" data-format="webp">WEBP</div>
                                     </div>
-                                    <div id="export_button" class="menu_button" title="Export and Download">
+                                    <div id="export_button" class="menu_button fa-solid fa-file-export " title="Export and Download"></div>
-                                        <img alt="" class="svg_icon" src="img/file-export-solid.svg">
-                                    </div>
                                     <!-- <div id="create_button" class="menu_button" type="submit" title="Create Character">✅</div> -->
                                     <label for="create_button" id="create_button_label" class="menu_button" title="Create Character">
-                                        <input type="submit" id="create_button" name="create_button">
+                                        <input type="submit" id="create_button" name="create_button" class="fa-solid fa-user-check ">
-                                        <img alt="" class="svg_icon" src="img/user-check-solid.svg">
                                     </label>
                                     <!-- <input id="create_button" class="menu_button" title="Create Character" type="submit" value="✅"> -->
-                                    <div id="delete_button" class="menu_button" title="Delete Character">
+                                    <div id="delete_button" class="menu_button fa-solid fa-trash-can " title="Delete Character"></div>
-                                        <img alt="" class="svg_icon" src="img/trash-can-solid.svg">
-                                    </div>
                                 </div>
                             </div>
                             <div id="result_info"></div>
@@ -1370,7 +1357,7 @@
                 <div id="rm_group_chats_block" class="right_menu">
                     <div id="rm_group_top_bar">
                         <div id="rm_button_back_from_group" class="menu_button">
-                            <img alt="" class="svg_icon" src="img/left-long-solid.svg">
+                            <div alt="" class="fa-solid fa-left-long "></div>
                         </div>
                         <input id="rm_group_chat_name" class="text_pole" type="text" name="chat_name" placeholder="Chat Name (Optional)" />
                     </div>
@@ -1418,8 +1405,8 @@
                             </div>
                             <div class="ch_name"></div>
                             <div class="group_member_icon">
-                                <img alt="Remove" class="minus svg_icon" src="img/minus-solid.svg">
+                                <div alt="Remove" class="fa-solid fa-minus "></div>
-                                <img alt="Add" class="plus svg_icon" src="img/plus-solid.svg">
+                                <div alt="Add" class="fa-solid fa-plus "></div>
                             </div>
                         </div>
                     </div>
@@ -1430,7 +1417,7 @@
                                 <img src="">
                             </div>
                             <div class="group_icon">
-                                <img class="svg_icon" src="img/user-group-solid.svg">
+                                <div class="fa-solid fa-user-grouup "></div>
                             </div>
                             <div class="ch_name"></div>
                         </div>
@@ -1445,15 +1432,9 @@
                 </div>
                 <div id="rm_characters_block" class="right_menu">
                     <div class="form_create_bottom_buttons_block">
-                        <div id="rm_button_create" title="Create New Character" class="menu_button">
+                        <div id="rm_button_create" title="Create New Character" class="menu_button fa-solid fa-user-plus "></div>
-                            <img alt="" class="svg_icon" src="img/user-plus-solid.svg">
+                        <div id="character_import_button" title="Import Character from File" class="menu_button fa-solid fa-file-arrow-up "></div>
-                        </div>
+                        <div id="rm_button_group_chats" title="Create New Chat Group" class="menu_button fa-solid fa-users-gear "></div>
-                        <div id="character_import_button" title="Import Character from File" class="menu_button">
-                            <img alt="" class="svg_icon" src="img/file-arrow-up-solid.svg">
-                        </div>
-                        <div id="rm_button_group_chats" title="Create New Chat Group" class="menu_button">
-                            <img alt="" class="svg_icon" src="img/user-group-solidplus.svg">
-                        </div>
                     </div>
                     <form id="form_character_search_form" action="javascript:void(null);">
                         <input id="character_search_bar" class="text_pole" type="search" placeholder="Character search..." />
@@ -1668,9 +1649,7 @@
     <div id="shadow_select_chat_popup">
         <div id="select_chat_popup">
             <div id="select_chat_import"> <!-- import chat popup header -->
-                <div id="chat_import_button" class="menu_button">
+                <div id="chat_import_button" class="fa-solid fa-file-arrow-up  menu_button"></div>
-                    <img alt="" class="svg_icon" src="img/file-arrow-up-solid.svg" />
-                </div>
                 <div id="selectChatPopupHeaderText" class="TxtLrgBoldCenter">
                     <span id="ChatHistoryCharName"></span>
                     <br>
@@ -1690,7 +1669,7 @@
 
             </div>
             <div id="load_select_chat_div">
-                <img src="img/load.svg">
+                <div class="fa-solid fa-hourglass fa-spin"></div>
             </div>
         </div>
     </div>
@@ -1708,26 +1687,14 @@
                     <div title="Stop Streaming" class="mes_stop">
                         <i class="fa-xl fa-solid fa-circle-stop"></i>
                     </div>
-                    <div title="Edit" class="mes_edit"></div>
+                    <div title="Edit" class="mes_edit fa-solid fa-pencil "></div>
                     <div class="mes_edit_buttons">
-                        <div class="mes_edit_done menu_button" title="Confirm">
+                        <div class="mes_edit_done menu_button  fa-solid fa-check" title="Confirm"></div>
-                            <img alt="" class="svg_icon" src="img/check-solid.svg">
+                        <div class="mes_edit_copy menu_button  fa-solid fa-copy" title="Copy this message"></div>
-                        </div>
+                        <div class="mes_edit_delete menu_button  fa-solid fa-scissors" title="Delete this message"></div>
-                        <div class="mes_edit_copy menu_button" title="Copy this message">
+                        <div class="mes_edit_up menu_button  fa-solid fa-chevron-up " title="Move message up"></div>
-                            <img alt="" class="svg_icon" src="img/copy-solid.svg">
+                        <div class="mes_edit_down menu_button  fa-solid fa-chevron-down" title="Move message down"></div>
-                        </div>
+                        <div class="mes_edit_cancel menu_button  fa-solid fa-xmark" title="Cancel"></div>
-                        <div class="mes_edit_delete menu_button" title="Delete this message">
-                            <img alt="" class="svg_icon" src="img/scissors-solid.svg">
-                        </div>
-                        <div class="mes_edit_up menu_button" title="Move message up">
-                            <img alt="" class="svg_icon" src="img/chevron-up-solid.svg">
-                        </div>
-                        <div class="mes_edit_down menu_button" title="Move message down">
-                            <img alt="" class="svg_icon" src="img/chevron-down-solid.svg">
-                        </div>
-                        <div class="mes_edit_cancel menu_button" title="Cancel">
-                            <img alt="" class="svg_icon" src="img/xmark-solid.svg">
-                        </div>
                     </div>
                 </div>
                 <div class=mes_text></div>
@@ -1779,27 +1746,28 @@
                     <div id="options">
                         <div class="options-content">
                             <a id="option_back_to_main">
-                                <img class="svg_icon" alt="" src="img/left-long-solid.svg">
+                                <div class="fa-solid fa-left-long "></div>
                                 <span>Back to main chat</span>
                             </a>
                             <a id="option_new_bookmark">
-                                <img class="svg_icon" alt="" src="img/bookmark-solid.svg">
+                                <div class="fa-solid fa-bookmark "></div>
                                 <span>Save bookmark</span>
                             </a>
                             <a id="option_start_new_chat">
-                                <img class="svg_icon" alt="" src="img/comment-dots-solid.svg">
+                                <div class="fa-solid fa-comment-dots "></div>
-                                <span>Start new chat</span></a>
+                                <span>Start new chat</span>
+                            </a>
                             <a id="option_select_chat">
-                                <img class="svg_icon" alt="" src="img/address-book-solid.svg">
+                                <div class="fa-solid fa-address-book "></div>
                                 <span>View past chats</span>
                             </a>
                             <hr>
                             <a id="option_delete_mes">
-                                <img class="svg_icon" alt="" src="img/trash-can-solid.svg">
+                                <div class="fa-solid fa-trash-can "></div>
                                 <span>Delete messages</span>
                             </a>
                             <a id="option_regenerate">
-                                <img class="svg_icon" alt="" src="img/repeat-solid.svg">
+                                <div class="fa-solid fa-repeat "></div>
                                 <span>Regenerate</span>
                             </a>
                         </div>
@@ -1808,9 +1776,9 @@
                 <textarea id="send_textarea" placeholder="Not connected to API!" name="text"></textarea>
                 <div id="send_but_sheld">
                     <div id="loading_mes">
-                        <img alt="" class="svg_icon" src="img/hourglass-half-solid.svg" />
+                        <div alt="" class="fa-solid fa-spin fa-hourglass-half "></div>
                     </div>
-                    <input id="send_but" type="button">
+                    <div id="send_but" class="fa-solid fa-feather-pointed"></div>
                 </div>
             </form>
         </div>

public/script.js

@@ -302,7 +302,7 @@ $(document).ajaxError(function myErrorHandler(_, xhr) {
     }
 });
 
-function getTokenCount(str, padding=0) {
+function getTokenCount(str, padding = 0) {
     if (main_api == 'poe' || main_api == 'openai') {
         return gpt3.encode(str).bpe.length + padding;
     }
@@ -1150,13 +1150,13 @@ function isStreamingEnabled() {
 
 class StreamingProcessor {
     showStopButton(messageId) {
-        $(`#chat .mes[mesid="${messageId}"] .mes_stop`).css({'display': 'block'});
+        $(`#chat .mes[mesid="${messageId}"] .mes_stop`).css({ 'display': 'block' });
-        $(`#chat .mes[mesid="${messageId}"] .mes_edit`).css({'display': 'none'});
+        $(`#chat .mes[mesid="${messageId}"] .mes_edit`).css({ 'display': 'none' });
     }
 
     hideStopButton(messageId) {
-        $(`#chat .mes[mesid="${messageId}"] .mes_stop`).css({'display': 'none'});
+        $(`#chat .mes[mesid="${messageId}"] .mes_stop`).css({ 'display': 'none' });
-        $(`#chat .mes[mesid="${messageId}"] .mes_edit`).css({'display': 'block'});
+        $(`#chat .mes[mesid="${messageId}"] .mes_edit`).css({ 'display': 'block' });
     }
 
     onStartStreaming(text) {
@@ -1920,7 +1920,7 @@ async function Generate(type, automatic_trigger, force_name2) {
                         return;
                     }
                 }
-                
+
                 if (streamingProcessor.isFinished) {
                     streamingProcessor.onFinishStreaming(streamingProcessor.messageId, getMessage);
                     streamingProcessor = null;
@@ -4927,6 +4927,7 @@ $(document).ready(function () {
     $(document).on('click', '.inline-drawer-toggle', function () {
         var icon = $(this).find('.inline-drawer-icon');
         icon.toggleClass('down up');
+        icon.toggleClass('fa-circle-chevron-down fa-circle-chevron-up');
         $(this).closest('.inline-drawer').find('.inline-drawer-content').slideToggle();
     });
 

public/scripts/RossAscends-mods.js

@@ -203,7 +203,8 @@ function RA_checkOnlineStatus() {
         $("#send_textarea").attr("placeholder", "Not connected to API!"); //Input bar placeholder tells users they are not connected
         $("#send_form").addClass('no-connection'); //entire input form area is red when not connected
         $("#send_but").css("display", "none"); //send button is hidden when not connected;
-        $("#API-status-top").addClass("redOverlayGlow");
+        $("#API-status-top").removeClass("fa-plug");
+        $("#API-status-top").addClass("fa-plug-circle-exclamation redOverlayGlow");
         connection_made = false;
     } else {
         if (online_status !== undefined && online_status !== "no_connection") {
@@ -212,7 +213,8 @@ function RA_checkOnlineStatus() {
             /* console.log("RA-AC -- connected, coloring input as " + formColor); */
             $('#send_form').removeClass("no-connection");
             $("#send_form").css("background-color", formColor); //on connect, form BG changes to transprent black
-            $("#API-status-top").removeClass("redOverlayGlow");
+            $("#API-status-top").removeClass("fa-plug-circle-exclamation redOverlayGlow");
+            $("#API-status-top").addClass("fa-plug");
             connection_made = true;
             retry_delay = 100;
             RA_AC_retries = 1;

public/scripts/extensions/dice/index.js

@@ -7,13 +7,13 @@ const UPDATE_INTERVAL = 1000;
 
 function setDiceIcon() {
     const sendButton = document.getElementById('roll_dice');
-    sendButton.style.backgroundImage = `url(/img/dice-solid.svg)`;
+    /* sendButton.style.backgroundImage = `url(/img/dice-solid.svg)`; */
     sendButton.classList.remove('spin');
 }
 
 async function doDiceRoll() {
     let value = $(this).data('value');
-    
+
     if (value == 'custom') {
         value = await callPopup('Enter the dice formula:<br><i>(for example, <tt>2d6</tt>)</i>', 'input');
     }
@@ -29,7 +29,7 @@ async function doDiceRoll() {
 
 function addDiceRollButton() {
     const buttonHtml = `
-        <input id="roll_dice" type="button" />
+        <div id="roll_dice" class="fa-solid fa-dice" /></div>
         <div id="dice_dropdown">
             <ul class="list-group">
                 <li class="list-group-item" data-value="d4">d4</li>

public/scripts/extensions/dice/style.css

@@ -3,6 +3,7 @@
     width: 40px;
     height: 40px;
     margin: 0;
+    margin-right: 5px;
     padding: 1px;
     background: no-repeat;
     background-size: 26px auto;
@@ -11,10 +12,10 @@
     border: none;
     cursor: pointer;
     transition: 0.3s;
-    filter: invert(1);
+    font-size: 30px;
     opacity: 0.5;
 }
 
 #roll_dice:hover {
     opacity: 1;
-}
+}

public/scripts/extensions/expressions/index.js

@@ -237,7 +237,7 @@ function onClickExpressionImage() {
             <div class="inline-drawer">
             <div class="inline-drawer-toggle inline-drawer-header">
                 <b>View supported images</b>
-                <div class="inline-drawer-icon down"></div>
+                <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
             </div>
             <div class="inline-drawer-content">
                 <p class="offline_mode">You are in offline mode. Click on the image below to set the expression.</p>

public/scripts/extensions/floating-prompt/index.js

@@ -119,7 +119,7 @@ async function moduleWorker() {
             <div class="inline-drawer">
                 <div class="inline-drawer-toggle inline-drawer-header">
                     <b>Default note for new chats</b>
-                    <div class="inline-drawer-icon down"></div>
+                    <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
                 </div>
                 <div class="inline-drawer-content">
                     <label for="extension_floating_default">Default Author's Note</label>

public/style.css

@@ -103,6 +103,12 @@ body {
     background-clip: content-box;
 }
 
+.fa-solid::before,
+.fa-regular::before {
+    vertical-align: middle;
+    text-align: center;
+}
+
 .mes_text p {
     margin-top: 0;
     margin-bottom: 10px;
@@ -263,12 +269,8 @@ code {
     height: 40px;
     margin: 0;
     display: none;
-    padding: 1px;
-    background: url('img/send3.png') no-repeat;
-    background-size: 26px auto;
-    background-position: center center;
     outline: none;
-
+    font-size: 30px;
     border: none;
     cursor: pointer;
     transition: 0.3s;
@@ -288,14 +290,10 @@ code {
     order: 99999;
     align-items: center;
     justify-content: center;
+    font-size: 24px;
     filter: brightness(0.7);
 }
 
-#loading_mes .svg_icon {
-    width: 24px;
-    height: 24px;
-}
-
 #options_button {
     position: relative;
     display: inline;
@@ -632,6 +630,23 @@ h3 {
     margin: 10px 0;
 }
 
+.menu_button {
+    /* font-weight: bold; */
+    color: var(--white70);
+    background-color: var(--black50a);
+    border: 1px solid var(--white30a);
+    border-radius: 10px;
+    padding: 10px;
+    width: min-content;
+    cursor: pointer;
+    margin: 10px 0;
+    transition: 0.3s;
+}
+
+.menu_button:hover {
+    background-color: var(--white30a);
+}
+
 #top-bar h3 {
     margin: 0;
     padding: 10px 0;
@@ -685,6 +700,15 @@ input[type="file"] {
     filter: brightness(150%) grayscale(1);
 }
 
+#rm_button_characters,
+#rm_button_panel_pin_div,
+#lm_button_panel_pin_div {
+    font-size: 24px;
+}
+
+#lm_button_panel_pin_div {
+    text-align: start;
+}
 
 #rm_button_panel_pin,
 #lm_button_panel_pin {
@@ -806,25 +830,15 @@ select option:not(:checked) {
     text-align: center;
 }
 
-img[src*="user-slash-solid.svg"] {
+img[src*="user-slash-solid.svg"] {}
-    filter: invert(1);
+
-}
 
-.menu_button .svg_icon {
-    height: 22px;
-    vertical-align: middle;
-    margin: 5px;
-    filter: invert(1) brightness(75%);
-}
 
 .menu_button.disabled {
     filter: brightness(50%);
     cursor: not-allowed;
 }
 
-.svg_icon {
-    filter: invert(1);
-}
 
 #api_url_text,
 #textgenerationwebui_api_url_text {
@@ -843,9 +857,8 @@ img[src*="user-slash-solid.svg"] {
     background-color: green;
 }
 
-img[src="img/load.svg"] {
+.api-load-icon {
-    width: 25px;
+    font-size: 24px;
-    height: 25px;
     display: none;
 }
 
@@ -905,7 +918,6 @@ input[type=search]::-webkit-search-cancel-button {
     background-size: contain;
     opacity: 0;
     pointer-events: none;
-    filter: invert(1);
     cursor: pointer;
 }
 
@@ -1222,35 +1234,20 @@ input[type=search]:focus::-webkit-search-cancel-button {
     background-color: var(--black50a);
     border: 1px solid var(--white30a);
     border-radius: 10px;
-    padding: 3px;
+    padding: 5px;
     cursor: pointer;
     margin: 0;
     transition: 0.3s;
-
-    min-width: 40px;
     min-height: 40px;
     filter: grayscale(0.5);
     text-align: center;
+    font-size: 25px;
+    aspect-ratio: 1;
+    /* vertical-align: middle; */
 }
 
-.menu_button {
 
-    /* font-weight: bold; */
-    color: var(--white70);
-    background-color: var(--black50a);
-    border: 1px solid var(--white30a);
-    border-radius: 10px;
-    padding: 10px;
-    width: min-content;
-    cursor: pointer;
-    margin: 10px 0;
-    transition: 0.3s;
 
-}
-
-.menu_button:hover {
-    background-color: var(--white30a);
-}
 
 
 #dialogue_del_mes .menu_button {
@@ -1342,9 +1339,6 @@ input[type=search]:focus::-webkit-search-cancel-button {
     column-gap: 20px;
 }
 
-.horde_model_title .right_menu_button img.svg_icon {
-    height: 20px;
-}
 
 #softprompt {
     margin-bottom: 10px;
@@ -1839,16 +1833,11 @@ input[type="range"]::-webkit-slider-thumb {
 
 .mes_edit {
     float: right;
-    color: var(--white30a);
     cursor: pointer;
     transition: 0.3s ease-in-out;
-    background-image: url(/img/pencil-solid.svg);
-    background-repeat: no-repeat;
-    background-attachment: local;
-    background-position: center;
     height: 20px;
     width: 20px;
-    filter: invert(1) drop-shadow(0px 0px 2px black);
+    filter: drop-shadow(0px 0px 2px black);
     opacity: 0.2;
 }
 
@@ -1876,14 +1865,6 @@ input[type="range"]::-webkit-slider-thumb {
     transition: 0.3s ease-in-out;
 }
 
-.mes_edit_buttons .menu_button .svg_icon {
-    height: 18px;
-    width: 18px;
-    margin: 2px;
-    filter: invert(1);
-}
-
-
 .mes_edit_buttons .menu_button {
     opacity: 0.5;
     padding: 5px;
@@ -2869,64 +2850,20 @@ label[for="extensions_autoconnect"] {
 .drawer-icon {
     display: inline-block;
     cursor: pointer;
-    min-width: 40px;
+    /*     min-width: 40px;
-    height: 30px;
+    height: 30px; */
-    background-size: contain;
+    font-size: 1.8rem;
-    background-position: center;
-    background-repeat: no-repeat;
-}
-
-.icon-api {
-    background-image: url('img/plug-solid.svg');
-}
-
-.icon-api.redOverlayGlow {
-    background-image: url('img/plug-circle-exclamation-solid.svg');
-}
-
-.icon-sliders {
-    background-image: url('img/sliders-solid.svg');
-}
-
-.icon-globe {
-    background-image: url('img/book-atlas-solid.svg');
-}
-
-.icon-user {
-    background-image: url('img/face-smile-regular.svg');
-}
-
-.icon-idcard {
-    background-image: url('img/id-card-regular.svg');
-}
-
-.icon-panorama {
-    background-image: url('img/panorama-solid.svg');
-}
-
-.icon-cubes {
-    background-image: url('img/cubes-solid.svg');
-}
-
-.icon-formatting {
-    background-image: url('img/font-solid.svg');
 }
 
 .drawer-icon.openIcon {
-    /*  background-image: url('img/circle-chevron-up-solid.svg'); */
+
-    filter: invert(1) brightness(200%) drop-shadow(0px 0px 2px black);
+    filter: brightness(200%) drop-shadow(0px 0px 2px black);
     ;
     transition: all 0.275s;
 }
 
-.redOverlayGlow {
-    filter: invert(20%) sepia(100%) saturate(2518%) hue-rotate(353deg) brightness(93%) contrast(125%) drop-shadow(0px 0px 1px #c00) !important;
-}
-
 .drawer-icon.closedIcon {
-    /* background-image: url('img/circle-chevron-down-solid.svg'); */
+    filter: drop-shadow(0px 0px 2px black);
-    filter: invert(1) drop-shadow(0px 0px 2px black);
-    ;
     opacity: 0.3;
     transition: all 0.275s;
 }
@@ -2942,19 +2879,16 @@ label[for="extensions_autoconnect"] {
 .inline-drawer-icon {
     display: block;
     cursor: pointer;
-    width: 26px;
+    font-size: calc(var(--mainFontSize)*1.5);
-    height: 26px;
     background-size: cover;
     background-repeat: no-repeat;
-    filter: invert(1) brightness(75%);
+    filter: brightness(75%);
 }
 
-.inline-drawer-icon.up {
+.redOverlayGlow {
-    background-image: url('img/circle-chevron-up-solid.svg');
+    color: #ad0000;
-}
+    opacity: 0.8 !important;
-
+    filter: drop-shadow(0px 0px 2px red) !important;
-.inline-drawer-icon.down {
-    background-image: url('img/circle-chevron-down-solid.svg');
 }
 
 .inline-drawer-header {