Improve staged attachment designs

stylesheets/_mixins.scss

@@ -225,6 +225,17 @@
   text-align: inherit;
 }
 
+@mixin staged-attachment-close-button {
+  @include button-reset;
+
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  width: 18px;
+  height: 18px;
+  z-index: 2;
+}
+
 @mixin calling-text-shadow {
   text-shadow: 0 0 4px $color-black-alpha-40;
 }

stylesheets/_modules.scss

@@ -3811,14 +3811,7 @@ button.module-image__border-overlay:focus {
 }
 
 .module-image__close-button {
-  @include button-reset;
+  @include staged-attachment-close-button;
-
-  position: absolute;
-  top: 5px;
-  right: 5px;
-  width: 16px;
-  height: 16px;
-  z-index: 2;
 
   background-image: url('../images/x-shadow-16.svg');
 
@@ -3989,12 +3982,34 @@ button.module-image__border-overlay:focus {
   margin-bottom: 6px;
 }
 
+.module-staged-attachment {
+  margin-right: 8px;
+
+  &.module-image::before {
+    background: linear-gradient(
+      180deg,
+      $color-black-alpha-30 0%,
+      transparent 100%
+    );
+    content: '';
+    display: block;
+    height: 40px;
+    opacity: 0;
+    position: absolute;
+    transition: opacity 0.2s ease-out;
+    width: 100%;
+  }
+
+  &.module-image:hover::before {
+    opacity: 1;
+  }
+}
+
 // Module: Staged Generic Attachment
 
 .module-staged-generic-attachment {
   height: 120px;
   width: 120px;
-  margin: 1px;
   display: inline-block;
   position: relative;
   border-radius: 4px;
@@ -4013,14 +4028,7 @@ button.module-image__border-overlay:focus {
 }
 
 .module-staged-generic-attachment__close-button {
-  @include button-reset;
+  @include staged-attachment-close-button;
-
-  position: absolute;
-  top: 5px;
-  right: 5px;
-  width: 16px;
-  height: 16px;
-  z-index: 2;
 
   @include light-theme {
     @include color-svg('../images/icons/v2/x-24.svg', $color-black);

stylesheets/_variables.scss

@@ -36,6 +36,7 @@ $color-white-alpha-90: rgba($color-white, 0.9);
 
 $color-black-alpha-05: rgba($color-black, 0.05);
 $color-black-alpha-20: rgba($color-black, 0.2);
+$color-black-alpha-30: rgba($color-black, 0.3);
 $color-black-alpha-40: rgba($color-black, 0.4);
 $color-black-alpha-50: rgba($color-black, 0.5);
 $color-black-alpha-60: rgba($color-black, 0.6);

ts/components/conversation/AttachmentList.tsx

@@ -79,6 +79,7 @@ export const AttachmentList = ({
                 alt={i18n('stagedImageAttachment', [
                   attachment.fileName || url || index.toString(),
                 ])}
+                className="module-staged-attachment"
                 i18n={i18n}
                 attachment={attachment}
                 softCorners

ts/components/conversation/Image.tsx

@@ -1,4 +1,4 @@
-// Copyright 2018-2020 Signal Messenger, LLC
+// Copyright 2018-2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import React from 'react';
@@ -18,6 +18,7 @@ export type Props = {
   attachment: AttachmentType;
   url?: string;
 
+  className?: string;
   height?: number;
   width?: number;
   cropWidth?: number;
@@ -140,6 +141,7 @@ export class Image extends React.Component<Props> {
       attachment,
       blurHash,
       bottomOverlay,
+      className,
       closeButton,
       curveBottomLeft,
       curveBottomRight,
@@ -202,6 +204,7 @@ export class Image extends React.Component<Props> {
       <div
         className={classNames(
           'module-image',
+          className,
           !noBackground ? 'module-image--with-background' : null,
           curveBottomLeft ? 'module-image--curved-bottom-left' : null,
           curveBottomRight ? 'module-image--curved-bottom-right' : null,

ts/components/conversation/StagedGenericAttachment.tsx

@@ -1,4 +1,4 @@
-// Copyright 2018-2020 Signal Messenger, LLC
+// Copyright 2018-2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import React from 'react';
@@ -21,7 +21,7 @@ export const StagedGenericAttachment = ({
   const extension = getExtensionForDisplay({ contentType, fileName });
 
   return (
-    <div className="module-staged-generic-attachment">
+    <div className="module-staged-attachment module-staged-generic-attachment">
       <button
         type="button"
         className="module-staged-generic-attachment__close-button"