Fix Widget/MarkdownPreview/EditPencil spacing

* Remove top padding from various `MarkdownPreview` elements, to avoid
  too much padding appearing at top of widget
* Tighten coupling between EditButton and IconPencil, since the height
  and width of the button need to match the height and width of the svg
  (at least with current styling approach)
* Remove IconPencil as a general-use import
* Remove unused pencil.svg file
* Make EditButton styles more generic, and override them inside the
  Widget component with behavior that's specific to Widget's use of the
  component
* Make images expand to full width of widget, rather than 95%

app/src/components/content/Widget.js

@@ -2,23 +2,19 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 
-import { Card, Text } from '@aragon/ui'
+import { Card, Text, theme } from '@aragon/ui'
 
-import { EditButton, IconPencil, MarkdownPreview } from '../../shared'
+import { EditButton, MarkdownPreview } from '../../shared'
 
 const Widget = ({ id, content, isLoading, handleClick, active, ipfsAddr }) => {
   return (
-    <StyledCard height="fit-content">
-      <CardContent>
-        <EditButton mode="text" onClick={handleClick(id)} active={active}>
-          <IconPencil />
-        </EditButton>
-        {isLoading ? (
-          <Text>Loading...</Text>
-        ) : (
-          <MarkdownPreview content={content} />
-        )}
-      </CardContent>
+    <StyledCard>
+      <EditButton onClick={handleClick(id)} active={active} />
+      {isLoading ? (
+        <Text>Loading...</Text>
+      ) : (
+        <MarkdownPreview content={content} />
+      )}
     </StyledCard>
   )
 }
@@ -31,17 +27,30 @@ Widget.propTypes = {
   ipfsAddr: PropTypes.string.isRequired,
 }
 
-const CardContent = styled.div`
-  padding: 24px;
-  :hover > ${EditButton} {
-    opacity: 1;
-  }
-`
-
-const StyledCard = styled(Card)`
+const StyledCard = styled(Card).attrs({
+  height: 'fit-content',
+})`
   width: 100%;
   margin-bottom: 30px;
   position: relative;
+  padding: 24px;
+  ${EditButton} {
+    background: rgba(255, 255, 255, 0.9);
+    position: absolute;
+    top: 24px;
+    right: 24px;
+    opacity: 0;
+    transition: opacity 0.25s;
+    svg {
+      transition: fill 0.3s ease;
+    }
+    :hover svg {
+      fill: ${theme.accent};
+    }
+  }
+  :hover ${EditButton} {
+    opacity: 1;
+  }
 `
 
 export default Widget

app/src/shared/components/EditButton/EditButton.js

@@ -0,0 +1,23 @@
+import React from 'react'
+import styled from 'styled-components'
+import { Button as AragonButton } from '@aragon/ui'
+
+import IconPencil from './IconPencil'
+
+const Button = ({ ...props }) => (
+  <AragonButton mode="text" {...props}>
+    <IconPencil />
+  </AragonButton>
+)
+
+const EditButton = styled(Button)`
+  box-sizing: content-box;
+  position: absolute;
+  color: inherit;
+  padding: 4px;
+  margin: 0;
+  height: 22px;
+  width: 22px;
+`
+
+export default EditButton

app/src/shared/components/EditButton/index.js

@@ -0,0 +1 @@
+export { default } from './EditButton'

app/src/shared/components/MarkdownPreview.js

@@ -55,6 +55,12 @@ const MarkdownWrapper = styled.div`
     line-height: 1.25;
     margin-bottom: 16px;
     margin-top: 24px;
+    &:first-child {
+      margin-top: 0;
+    }
+    &:last-child {
+      margin-bottom: 0;
+    }
   }
   h1,
   h2 {
@@ -85,6 +91,9 @@ const MarkdownWrapper = styled.div`
   table,
   pre {
     margin: 1em 0;
+    &:first-child {
+      margin-top: 0;
+    }
     &:last-child {
       margin-bottom: 0;
     }
@@ -123,7 +132,7 @@ const MarkdownWrapper = styled.div`
     padding: 0.5em 1em;
   }
   img {
-    max-width: 95%;
+    max-width: 100%;
   }
   pre {
     background-color: ${theme.mainBackground};

app/src/shared/index.js

@@ -1,4 +1,3 @@
 export { default as MarkdownEditor } from './components/MarkdownEditor'
 export { default as MarkdownPreview } from './components/MarkdownPreview'
 export { default as EditButton } from './components/EditButton'
-export { default as IconPencil } from './assets/IconPencil'