feat(ui): convert Attachments to a styled component

packages/ui/src/molecules/Attachments.js

 import React from 'react'
+import styled from 'styled-components'
+
 import Files from './Files'
 import Attachment from '../atoms/Attachment'
-import classes from './Attachments.local.scss'
 import Icon from '../atoms/Icon'
 
 // TODO: show upload progress
 
+const Root = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 2em;
+  margin-top: 2em;
+`
+
+const Paperclip = styled.span`
+  color: gray;
+  margin-right: 10px;
+`
+
+const Filename = styled.span`
+  color: gray;
+`
+
+const UploadingFile = ({ file, progress, error }) => (
+  <Root>
+    <Paperclip>
+      <Icon color="var(--color-local, black)">paperclip</Icon>
+    </Paperclip>
+    <Filename>{error || 'Uploading…'}</Filename>
+  </Root>
+)
+
 const Attachments = props => (
   <Files
     {...props}
     buttonText="Attach file"
     uploadedFile={value => <Attachment key={value.url} value={value} />}
-    uploadingFile={({ file, progress, error }) => (
-      <div className={classes.uploading}>
-        <span className={classes.icon}>
-          <Icon color="var(--color-local, black)">paperclip</Icon>
-        </span>
-        <span className={classes.filename}>{error || 'Uploading…'}</span>
-      </div>
-    )}
+    uploadingFile={UploadingFile}
   />
 )
 

packages/ui/src/molecules/Attachments.local.scss

-.uploading {
-  display: flex;
-  flex-direction: column;
-  margin-bottom: 2em;
-  margin-top: 2em;
-}
-
-.icon {
-  color: gray;
-  margin-right: 10px;
-}
-
-.filename {
-  color: gray;
-}