fix(styles): Fix styles for attachment and upload items

internal_packages/attachments/stylesheets/attachments.less

@@ -15,17 +15,62 @@
     border-radius: 2px;
     color: @text-color;
     background: @background-off-primary;
-    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.09);
     height: 37px;
   }
 
-  &:hover {
+  .file-info-wrap {
-    cursor: default;
+    display: flex;
-    .inner {
+    align-items: center;
-      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
+    padding-left: @spacing-half + 1;
+    width: 100%;
+    height: 100%;
+    border: solid 1px rgba(0, 0, 0, 0.09);
+    border-right: none;
+
+    .file-icon {
+      margin-right: 10px;
+      flex-shrink:0;
     }
+    .file-name {
+      font-weight: @font-weight-medium;
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      max-width: 235px;
+    }
+    .file-size {
+      @file-size-color: #b8b8b8;
+
+      margin-left: auto;
+      margin-right: @spacing-three-quarters;
+      color: @file-size-color;
+    }
+  }
+
   .file-action-icon {
-      border-left: 1px solid rgba(0, 0, 0, 0.18);
+    @file-icon-color: #c7c7c7;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    margin-left: auto;
+    padding-top: 1px;
+    height: 100%;
+    width: 37px;
+    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.09);
+
+    img {
+      background-color: @file-icon-color;
+    }
+
+    &:hover img {
+      background-color: darken(@file-icon-color, 20%);
+    }
+    &:active {
+      // box-shadow: inset 0 0 0 1px #27496d, inset 0 5px 30px #193047;
+      background-color: darken(@btn-default-bg-color, 5%);
     }
   }
 
@@ -82,47 +127,6 @@
     }
   }
 
-  .file-info-wrap {
-    display: flex;
-    align-items: center;
-    padding-left: @spacing-half + 1;
-    width: 100%;
-
-    .file-icon {
-      margin-right: 10px;
-      flex-shrink:0;
-    }
-    .file-name {
-      font-weight: @font-weight-medium;
-      flex: 1;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-    .file-size {
-      @file-size-color: #b8b8b8;
-
-      margin-left: auto;
-      margin-right: @spacing-three-quarters;
-      color: @file-size-color;
-    }
-  }
-
-  .file-action-icon {
-    @file-icon-color: #c7c7c7;
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-left: auto;
-    padding-top: 1px;
-    height: 100%;
-    width: 37px;
-    border-left: 1px solid rgba(0, 0, 0, 0.09);
-    img {
-      background-color: @file-icon-color;
-    }
-  }
 }
 
 .file-wrap.file-image-wrap {
@@ -151,9 +155,6 @@
     .file-action-icon, .file-name-container, .file-name {
       display: block;
     }
-    .file-action-icon {
-      border-left: none;
-    }
   }
 
   .file-action-icon {
@@ -163,7 +164,7 @@
     top: -8px;
     width: 26px;
     border-radius: 0 0 0 3px;
-    border-left: none;
+    box-shadow: none;
     img {
       background: none;
     }

internal_packages/composer/lib/file-upload.cjsx

@@ -9,9 +9,10 @@ class FileUpload extends React.Component
   @displayName: 'FileUpload'
 
   render: =>
-    <div className={"file-wrap file-upload"}>
+    <div className="file-wrap file-upload">
       <div className="inner">
         <Flexbox direction="row" style={alignItems: 'center'}>
+          <div className="file-info-wrap">
             <RetinaImg className="file-icon"
                       fallback="file-fallback.png"
                       mode={RetinaImg.Mode.ContentPreserve}
@@ -19,8 +20,12 @@ class FileUpload extends React.Component
             <span className="file-name">
               <span className="uploading">{@props.upload.filename}</span>
             </span>
+          </div>
           <div className="file-action-icon" onClick={@_onClickRemove}>
-            <RetinaImg name="remove-attachment.png" mode={RetinaImg.Mode.ContentDark} />
+            <RetinaImg
+              name="remove-attachment.png"
+              mode={RetinaImg.Mode.ContentIsMask}
+            />
           </div>
         </Flexbox>
       </div>

internal_packages/message-list/lib/message-item.cjsx

@@ -161,7 +161,7 @@ class MessageItem extends React.Component
     Actions.fetchAndSaveAllFiles(@props.message.files)
 
   _renderDownloadAllButton: =>
-    <div className="download-all" onClick={@_onDownloadAll}>
+    <div className="download-all">
       <div className="attachment-number">
         <RetinaImg
           name="ic-attachments-all-clippy.png"
@@ -170,7 +170,7 @@ class MessageItem extends React.Component
         <span>{@props.message.files.length} attachments</span>
       </div>
       <div className="separator">-</div>
-      <div className="download-all-action">
+      <div className="download-all-action" onClick={@_onDownloadAll}>
         <RetinaImg
           name="ic-attachments-download-all.png"
           mode={RetinaImg.Mode.ContentIsMask}