fix styles for extensions menu

public/scripts/extensions/dice/index.js

@@ -29,7 +29,10 @@ async function doDiceRoll() {
 
 function addDiceRollButton() {
     const buttonHtml = `
-        <div id="roll_dice" class="fa-solid fa-dice list-group-item" title="Roll the dice" /></div>
+    <div id="roll_dice" class="list-group-item flex-container flexGap5">    
+        <div class="fa-solid fa-dice extensionsMenuExtensionButton" title="Roll Dice" /></div>
+        Roll Dice
+    </div>
         `;
     const dropdownHtml = `
     <div id="dice_dropdown">
@@ -55,7 +58,7 @@ function addDiceRollButton() {
     button.hide();
 
     let popper = Popper.createPopper(button.get(0), dropdown.get(0), {
-        placement: 'left-end',
+        placement: 'bottom',
     });
 
     $(document).on('click touchend', function (e) {

public/scripts/extensions/dice/style.css

@@ -1,5 +1,5 @@
 #roll_dice {
-    order: 100;
+    /* order: 100; */
     /*     width: 40px;
     height: 40px;
     margin: 0;
@@ -11,7 +11,7 @@
     opacity: 0.7;
     display: flex;
     align-items: center;
-    justify-content: center;
+    /* justify-content: center; */
 
 }
 

public/scripts/extensions/stable-diffusion/index.js

@@ -537,11 +537,14 @@ async function sendMessage(prompt, image) {
 function addSDGenButtons() {
 
     const buttonHtml = `
-        <div id="sd_gen" class="fa-solid fa-paintbrush list-group-item" title="Trigger Stable Diffusion" /></div>
+    <div id="sd_gen" class="list-group-item flex-container flexGap5">    
+        <div class="fa-solid fa-paintbrush extensionsMenuExtensionButton" title="Trigger Stable Diffusion" /></div>
+        StableDiffusion
+    </div>
         `;
 
     const waitButtonHtml = `
-        <div id="sd_gen_wait" class="fa-solid fa-hourglass-half list-group-item" /></div>
+        <div id="sd_gen_wait" class="fa-solid fa-hourglass-half" /></div>
     `
     const dropdownHtml = `
     <div id="sd_dropdown">
@@ -570,7 +573,7 @@ function addSDGenButtons() {
     messageButton.hide();
 
     let popper = Popper.createPopper(button.get(0), dropdown.get(0), {
-        placement: 'left-end',
+        placement: 'bottom',
     });
 
     $(document).on('click', '.sd_message_gen', sdMessageButton);

public/scripts/extensions/stable-diffusion/style.css

@@ -3,8 +3,8 @@
 }
 
 #sd_gen {
-    order: 100;
+    /*order: 100;
-    /*     width: 40px;
+    width: 40px;
     height: 40px;
     margin: 0;
     padding: 1px; */
@@ -15,7 +15,7 @@
     opacity: 0.7;
     display: flex;
     align-items: center;
-    justify-content: center;
+    /* justify-content: center; */
 }
 
 #sd_gen:hover {

public/scripts/extensions/tts/index.js

@@ -233,9 +233,9 @@ function updateUiAudioPlayState() {
         let img
         // Give user feedback that TTS is active by setting the stop icon if processing or playing
         if (!audioElement.paused || isTtsProcessing()) {
-            img = 'fa-solid fa-stop-circle list-group-item'
+            img = 'fa-solid fa-stop-circle extensionsMenuExtensionButton'
         } else {
-            img = 'fa-solid fa-circle-play list-group-item'
+            img = 'fa-solid fa-circle-play extensionsMenuExtensionButton'
         }
         audioControl.className = img
     } else {
@@ -256,7 +256,12 @@ function onAudioControlClicked() {
 }
 
 function addAudioControl() {
-    $('#extensionsMenu').prepend('<div id="tts_media_control" class="list-group-item" />')
+
+    $('#extensionsMenu').prepend(`
+        <div id="ttsExtensionMenuItem" class="list-group-item flex-container flexGap5">    
+            <div id="tts_media_control" class="extensionsMenuExtensionButton "/></div>
+            TTS Playback
+        </div>`)
     $('#tts_media_control').attr('title', 'TTS play/pause').on('click', onAudioControlClicked)
     audioControl = document.getElementById('tts_media_control')
     updateUiAudioPlayState()

public/scripts/extensions/tts/style.css

@@ -1,5 +1,5 @@
 #tts_media_control {
-    order: 100;
+    /* order: 100; */
     /*     width: 40px;
     height: 40px;
     margin: 0;
@@ -7,14 +7,24 @@
     outline: none;
     border: none;
     cursor: pointer;
-    transition: 0.3s;
+    /*     transition: 0.3s;
-    opacity: 0.7;
+    opacity: 0.7; */
     display: flex;
     align-items: center;
-    justify-content: center;
+    /* justify-content: center; */
 
 }
 
+#ttsExtensionMenuItem {
+    transition: 0.3s;
+    opacity: 0.7;
+}
+
+#ttsExtensionMenuItem:hover {
+    opacity: 1;
+    filter: brightness(1.2);
+}
+
 #tts_media_control:hover {
     opacity: 1;
     filter: brightness(1.2);

public/style.css

@@ -512,10 +512,14 @@ code {
 #extensionsMenu {
     z-index: 100;
     backdrop-filter: blur(var(--SmartThemeBlurStrength));
-    font-size: 30px;
     /* padding: 10px; */
     display: flex;
-    gap: 10px;
+}
+
+.extensionsMenuExtensionButton {
+    font-size: 20px;
+    height: 20px;
+    width: 20px;
 }
 
 #right-nav-panel hr,
@@ -526,7 +530,7 @@ code {
 }
 
 .options-content a,
-#extensionsMenu div {
+#extensionsMenu>div {
     color: var(--SmartThemeBodyColor);
     padding: 12px 16px;
     text-decoration: none;