feat: staged attachments rail stying updated

updated StyledStagedPlaceholderAttachment to be a styled functional component

stylesheets/_modules.scss

@@ -844,8 +844,8 @@
 .module-image__close-button {
   cursor: pointer;
   position: absolute;
-  top: 5px;
-  right: 5px;
+  top: 8px;
+  right: 8px;
   width: 20px;
   height: 20px;
   z-index: 2;
@@ -876,17 +876,6 @@
   @include color-svg('../images/x-16.svg', var(--button-icon-stroke-color));
 }
 
-.module-attachments__rail {
-  margin-top: 12px;
-  margin-inline-start: 16px;
-  padding-inline-end: 16px;
-  overflow-x: scroll;
-  max-height: 142px;
-  white-space: nowrap;
-  overflow-y: hidden;
-  margin-bottom: 6px;
-}
-
 // Module: Staged Generic Attachment
 
 .module-staged-generic-attachment {
@@ -1032,22 +1021,6 @@
 
 // Module: Staged Placeholder Attachment
 
-.module-staged-placeholder-attachment {
-  margin: 1px;
-  border-radius: 4px;
-  border: 1px solid var(--border-color);
-  height: 120px;
-  width: 120px;
-  display: inline-block;
-  vertical-align: middle;
-  cursor: pointer;
-  position: relative;
-
-  &:hover {
-    background-color: var(--background-secondary-color);
-  }
-}
-
 .module-staged-placeholder-attachment__plus-icon {
   position: absolute;
   left: 50%;
@@ -1058,7 +1031,7 @@
   height: 36px;
   width: 36px;
 
-  @include color-svg('../images/plus-36.svg', var(--button-icon-stroke-color));
+  @include color-svg('../images/plus-36.svg', var(--chat-buttons-icon-color));
 }
 
 // Module: Left Pane

ts/components/conversation/StagedAttachmentList.tsx

@@ -16,6 +16,7 @@ import {
   removeStagedAttachmentInConversation,
 } from '../../state/ducks/stagedAttachments';
 import { getSelectedConversationKey } from '../../state/selectors/conversations';
+import styled from 'styled-components';
 
 type Props = {
   attachments: Array<AttachmentType>;
@@ -26,6 +27,17 @@ type Props = {
 const IMAGE_WIDTH = 120;
 const IMAGE_HEIGHT = 120;
 
+const StyledRail = styled.div`
+  margin-top: 12px;
+  margin-inline-start: 16px;
+  padding-inline-end: 16px;
+  overflow-x: scroll;
+  max-height: 142px;
+  white-space: nowrap;
+  overflow-y: hidden;
+  margin-bottom: 6px;
+`;
+
 export const StagedAttachmentList = (props: Props) => {
   const { attachments, onAddAttachment, onClickAttachment } = props;
 
@@ -63,7 +75,7 @@ export const StagedAttachmentList = (props: Props) => {
           />
         </div>
       ) : null}
-      <div className="module-attachments__rail">
+      <StyledRail>
         {(attachments || []).map((attachment, index) => {
           const { contentType } = attachment;
           if (isImageTypeSupported(contentType) || isVideoTypeSupported(contentType)) {
@@ -103,7 +115,7 @@ export const StagedAttachmentList = (props: Props) => {
           );
         })}
         {allVisualAttachments ? <StagedPlaceholderAttachment onClick={onAddAttachment} /> : null}
-      </div>
+      </StyledRail>
     </div>
   );
 };

ts/components/conversation/StagedPlaceholderAttachment.tsx

@@ -1,17 +1,32 @@
 import React from 'react';
+import styled from 'styled-components';
 
 interface Props {
   onClick: () => void;
 }
 
-export class StagedPlaceholderAttachment extends React.Component<Props> {
-  public render() {
-    const { onClick } = this.props;
+const StyledStagedPlaceholderAttachment = styled.div`
+  margin: 1px var(--margins-sm);
+  border-radius: var(--border-radius-message-box);
+  border: 1px solid var(--border-color);
+  height: 120px;
+  width: 120px;
+  display: inline-block;
+  vertical-align: middle;
+  cursor: pointer;
+  position: relative;
+
+  &:hover {
+    background-color: var(--background-secondary-color);
+  }
+`;
+
+export function StagedPlaceholderAttachment(props: Props) {
+  const { onClick } = props;
 
   return (
-      <div className="module-staged-placeholder-attachment" role="button" onClick={onClick}>
+    <StyledStagedPlaceholderAttachment role="button" onClick={onClick}>
       <div className="module-staged-placeholder-attachment__plus-icon" />
-      </div>
+    </StyledStagedPlaceholderAttachment>
   );
 }
-}