refactor: move download icon from centre to top-right

Author: devvaannsh

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -2147,15 +2147,14 @@ function RemoteFunctions(config = {}) {
 
                     .phoenix-download-icon {
                         position: absolute !important;
-                        top: 50% !important;
-                        left: 50% !important;
-                        transform: translate(-50%, -50%) !important;
+                        top: 8px !important;
+                        right: 8px !important;
                         background: rgba(0,0,0,0.7) !important;
                         border: none !important;
                         color: #eee !important;
                         border-radius: 50% !important;
-                        width: 21px !important;
-                        height: 21px !important;
+                        width: 18px !important;
+                        height: 18px !important;
                         padding: 4px !important;
                         display: flex !important;
                         align-items: center !important;
@@ -2175,7 +2174,7 @@ function RemoteFunctions(config = {}) {
 
                     .phoenix-download-icon:hover {
                         background: rgba(0,0,0,0.9) !important;
-                        transform: translate(-50%, -50%) scale(1.1) !important;
+                        transform: scale(1.1) !important;
                     }
 
                     .phoenix-ribbon-thumb {
@@ -2521,6 +2520,7 @@ function RemoteFunctions(config = {}) {
                 // download icon
                 const downloadIcon = window.document.createElement('div');
                 downloadIcon.className = 'phoenix-download-icon';
+                downloadIcon.title = config.strings.imageGalleryUseImage;
                 downloadIcon.innerHTML = `<svg viewBox="0 0 640 640" fill="currentColor">
                   <path d="M352 96C352 78.3 337.7 64 320 64C302.3 64 288 78.3 288 96L288 306.7L246.6 265.3C234.1 252.8 213.8 252.8 201.3 265.3C188.8 277.8 188.8 298.1 201.3 310.6L297.3 406.6C309.8 419.1 330.1 419.1 342.6 406.6L438.6 310.6C451.1 298.1 451.1 277.8 438.6 265.3C426.1 252.8 405.8 252.8 393.3 265.3L352 306.7L352 96zM160 384C124.7 384 96 412.7 96 448L96 480C96 515.3 124.7 544 160 544L480 544C515.3 544 544 515.3 544 480L544 448C544 412.7 515.3 384 480 384L433.1 384L376.5 440.6C345.3 471.8 294.6 471.8 263.4 440.6L206.9 384L160 384zM464 440C477.3 440 488 450.7 488 464C488 477.3 477.3 488 464 488C450.7 488 440 477.3 440 464C440 450.7 450.7 440 464 440z"/>
                 </svg>`;

src/LiveDevelopment/main.js

@@ -80,7 +80,8 @@ define(function main(require, exports, module) {
             duplicate: Strings.LIVE_DEV_MORE_OPTIONS_DUPLICATE,
             delete: Strings.LIVE_DEV_MORE_OPTIONS_DELETE,
             ai: Strings.LIVE_DEV_MORE_OPTIONS_AI,
-            aiPromptPlaceholder: Strings.LIVE_DEV_AI_PROMPT_PLACEHOLDER
+            aiPromptPlaceholder: Strings.LIVE_DEV_AI_PROMPT_PLACEHOLDER,
+            imageGalleryUseImage: Strings.LIVE_DEV_IMAGE_GALLERY_USE_IMAGE
         }
     };
     // Status labels/styles are ordered: error, not connected, progress1, progress2, connected.

src/nls/root/strings.js

@@ -189,6 +189,7 @@ define({
     "LIVE_DEV_MORE_OPTIONS_DUPLICATE": "Duplicate",
     "LIVE_DEV_MORE_OPTIONS_DELETE": "Delete",
     "LIVE_DEV_MORE_OPTIONS_AI": "Edit with AI",
+    "LIVE_DEV_IMAGE_GALLERY_USE_IMAGE": "Use this image",
     "LIVE_DEV_AI_PROMPT_PLACEHOLDER": "Ask Phoenix AI to modify this element...",
     "LIVE_PREVIEW_CUSTOM_SERVER_BANNER": "Getting preview from your custom server {0}",
     "LIVE_PREVIEW_MODE_PREVIEW": "Preview Mode",