UX: minor image caption style adjustments (#482)

assets/javascripts/discourse/connectors/editor-preview/ai-image-caption-container.gjs

@@ -39,13 +39,6 @@ export default class AiImageCaptionContainer extends Component {
   <template>
     {{#if this.imageCaptionPopup.showPopup}}
       <div class="composer-popup education-message ai-caption-popup">
-        <DButton
-          @class="btn-transparent close"
-          @title="close"
-          @action={{fn (mut this.imageCaptionPopup.showPopup) false}}
-          @icon="times"
-        />
-
         <ConditionalLoadingSpinner
           @condition={{this.imageCaptionPopup.loading}}
         >
@@ -71,7 +64,7 @@ export default class AiImageCaptionContainer extends Component {
 
           <span class="credits">
             {{icon "discourse-sparkles"}}
-            {{i18n "discourse_ai.ai_helper.image_caption.credits"}}
+            <span>{{i18n "discourse_ai.ai_helper.image_caption.credits"}}</span>
           </span>
         </div>
       </div>

assets/stylesheets/modules/ai-helper/common/ai-helper.scss

@@ -461,23 +461,27 @@
 // AI Image Caption Feature:
 .image-wrapper .button-wrapper {
   .generate-caption {
-    background: var(--tertiary-100);
-    color: var(--tertiary-900);
-    font-weight: 600;
+    background: var(--tertiary-low);
+    color: var(--tertiary);
+    box-shadow: var(--shadow-dropdown);
     position: absolute;
-    top: -3.5rem;
-    left: 1rem;
-    padding: 0.5em;
-    transition: background 0.25s ease;
+    top: -3.15rem;
+    left: 0.75rem;
+    padding: 0.5em 0.75em;
+    transition: all 0.25s ease;
 
     .d-icon {
       margin-right: 0.25rem;
     }
 
+    &:active {
+      box-shadow: none;
+    }
+
     &:hover,
     &:focus {
-      background: var(--tertiary-hover);
-      color: white;
+      background: var(--tertiary-400);
+      color: var(--tertiary-hover);
       cursor: pointer;
     }
 
@@ -487,22 +491,31 @@
       opacity: 0.8;
       &:hover,
       &:focus {
-        background: var(--tertiary-100);
-        color: var(--tertiary-900);
+        background: var(--primary-low);
+        color: var(--primary-high);
       }
     }
   }
 }
 
 .ai-caption-popup {
-  width: 400px;
+  width: auto;
   right: unset;
-  bottom: 1.5rem;
+  padding: 1em;
   top: unset;
+  bottom: 0;
 
   textarea {
-    width: 95%;
-    height: 100px;
+    width: 100%;
+    max-width: 40vw;
+    min-height: 3em;
+    height: 7em;
+    min-width: 20em;
+    @include breakpoint(tablet) {
+      width: 100%;
+      max-width: unset;
+      min-width: unset;
+    }
   }
 
   .actions {
@@ -514,6 +527,14 @@
       font-size: var(--font-down-1);
       margin-left: auto;
       color: var(--tertiary);
+      .desktop-view & {
+        // a little extra space for extra narrow desktop view
+        @media screen and (max-width: 675px) {
+          span {
+            display: none;
+          }
+        }
+      }
     }
   }