UX: simplify styles for image uploader (#25970)

app/assets/javascripts/discourse/app/components/uppy-image-uploader.hbs

@@ -30,7 +30,7 @@
         @disabled={{this.loadingLightbox}}
         @action={{unless this.experimentalLightboxEnabled this.toggleLightbox}}
         data-lightbox-trigger={{if this.experimentalLightboxEnabled "true"}}
-        class="image-uploader-lightbox-btn no-text"
+        class="btn-default image-uploader-lightbox-btn no-text"
       />
     {{/if}}
 

app/assets/stylesheets/common/base/upload.scss

@@ -2,6 +2,14 @@
   background: var(--primary-medium) center;
   background-size: cover;
   position: relative;
+  max-width: 400px;
+  width: 100%;
+  height: 150px;
+  margin-bottom: 0.5em;
+
+  .meta {
+    display: none;
+  }
 
   .placeholder-overlay {
     background-size: contain;
@@ -19,28 +27,10 @@
     position: relative;
     display: flex;
     padding: 10px;
-
-    .btn {
-      margin-right: 5px;
-      padding: 7px 10px;
-    }
+    gap: 0.5em;
 
     .image-uploader-lightbox-btn {
-      background: none;
-      margin-right: 0;
       margin-left: auto;
-
-      .d-icon {
-        color: var(--primary-low);
-      }
-
-      &:hover {
-        background: none;
-
-        .d-icon {
-          color: var(--primary);
-        }
-      }
     }
   }
 }

app/assets/stylesheets/desktop/_index.scss

@@ -14,5 +14,4 @@
 @import "topic-post";
 @import "post-action-feedback";
 @import "topic";
-@import "upload";
 @import "user";

app/assets/stylesheets/desktop/upload.scss

@@ -1,6 +0,0 @@
-.uploaded-image-preview {
-  height: 270px;
-  width: 400px;
-  max-height: 150px;
-  margin-bottom: 10px;
-}

app/assets/stylesheets/mobile/_index.scss

@@ -32,5 +32,4 @@
 @import "topic-list";
 @import "topic-post";
 @import "topic";
-@import "upload";
 @import "user";

app/assets/stylesheets/mobile/upload.scss

@@ -1,3 +0,0 @@
-.uploaded-image-preview {
-  height: 150px;
-}