From 4e553444f692608310a7e5b2d5e17e040e8363aa Mon Sep 17 00:00:00 2001 From: Chad Ostrowski Date: Thu, 6 Jun 2019 16:10:00 -0400 Subject: [PATCH] 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 | 51 +++++++++++-------- app/src/shared/assets/pencil.svg | 3 -- app/src/shared/components/EditButton.js | 23 --------- .../components/EditButton/EditButton.js | 23 +++++++++ .../EditButton}/IconPencil.js | 0 app/src/shared/components/EditButton/index.js | 1 + app/src/shared/components/MarkdownPreview.js | 11 +++- app/src/shared/index.js | 1 - 8 files changed, 64 insertions(+), 49 deletions(-) delete mode 100644 app/src/shared/assets/pencil.svg delete mode 100644 app/src/shared/components/EditButton.js create mode 100644 app/src/shared/components/EditButton/EditButton.js rename app/src/shared/{assets => components/EditButton}/IconPencil.js (100%) create mode 100644 app/src/shared/components/EditButton/index.js diff --git a/app/src/components/content/Widget.js b/app/src/components/content/Widget.js index 076ab46..d3daecf 100644 --- a/app/src/components/content/Widget.js +++ b/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 ( - - - - - - {isLoading ? ( - Loading... - ) : ( - - )} - + + + {isLoading ? ( + Loading... + ) : ( + + )} ) } @@ -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 diff --git a/app/src/shared/assets/pencil.svg b/app/src/shared/assets/pencil.svg deleted file mode 100644 index 13ddd9d..0000000 --- a/app/src/shared/assets/pencil.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/app/src/shared/components/EditButton.js b/app/src/shared/components/EditButton.js deleted file mode 100644 index 8752d52..0000000 --- a/app/src/shared/components/EditButton.js +++ /dev/null @@ -1,23 +0,0 @@ -import styled from 'styled-components' -import { Button, theme } from '@aragon/ui' - -const EditButton = styled(Button)` - position: absolute; - right: 0; - top: 0; - opacity: 0; - transition: opacity 0.25s; - color: 30px; - padding: 18px; - margin: 10px; - - > svg { - transition: fill 0.3s ease; - } - - :hover > svg { - fill: ${theme.accent}; - } -` - -export default EditButton diff --git a/app/src/shared/components/EditButton/EditButton.js b/app/src/shared/components/EditButton/EditButton.js new file mode 100644 index 0000000..10b7a4c --- /dev/null +++ b/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 }) => ( + + + +) + +const EditButton = styled(Button)` + box-sizing: content-box; + position: absolute; + color: inherit; + padding: 4px; + margin: 0; + height: 22px; + width: 22px; +` + +export default EditButton diff --git a/app/src/shared/assets/IconPencil.js b/app/src/shared/components/EditButton/IconPencil.js similarity index 100% rename from app/src/shared/assets/IconPencil.js rename to app/src/shared/components/EditButton/IconPencil.js diff --git a/app/src/shared/components/EditButton/index.js b/app/src/shared/components/EditButton/index.js new file mode 100644 index 0000000..ddb775a --- /dev/null +++ b/app/src/shared/components/EditButton/index.js @@ -0,0 +1 @@ +export { default } from './EditButton' diff --git a/app/src/shared/components/MarkdownPreview.js b/app/src/shared/components/MarkdownPreview.js index 8f4c78a..c5295d4 100644 --- a/app/src/shared/components/MarkdownPreview.js +++ b/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}; diff --git a/app/src/shared/index.js b/app/src/shared/index.js index 1814969..af8ee91 100644 --- a/app/src/shared/index.js +++ b/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'