Skip to content
8 changes: 6 additions & 2 deletions src/app/components/ContinueReadingButton/index.styles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export default {
display: 'block',
width: `calc(100% - ${spacings.QUADRUPLE}rem)`,
padding: `${spacings.DOUBLE}rem 0`,
margin: `0 ${spacings.DOUBLE}rem -${spacings.FULL}rem ${spacings.DOUBLE}rem`,
margin: `0 ${spacings.DOUBLE}rem ${pixelsToRem(12)}rem ${spacings.DOUBLE}rem`,
backgroundColor: palette.GREY_2,
color: palette.GREY_10,
textAlign: 'start',
Expand All @@ -33,10 +33,14 @@ export default {
},

[mq.GROUP_1_MAX_WIDTH]: {
margin: `0 ${spacings.FULL}rem -${spacings.HALF}rem ${spacings.FULL}rem`,
margin: `0 ${spacings.FULL}rem ${pixelsToRem(12)}rem ${spacings.FULL}rem`,
width: `calc(100% - ${spacings.DOUBLE}rem)`,
},

[mq.GROUP_3_MIN_WIDTH]: {
margin: `0 ${spacings.DOUBLE}rem -${spacings.HALF}rem ${spacings.DOUBLE}rem`,
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
margin: `0 ${spacings.DOUBLE}rem -${spacings.HALF}rem ${spacings.DOUBLE}rem`,
margin: `0 ${spacings.DOUBLE}rem`,

Can you ask UX if this can be changed to remove the negative margin? At the moment, this makes the total spacing between the line and the top of the heading 36px with the negative margin being -4px. Removing this doesn't change much visually (to me anyways) but makes the styling a bit simpler. I feel like the negative margin probably caused a bit of confusion early on.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

But with the removal of the negative margin, would the total spacing still be 36px?

},

'&:hover, &:focus': {
textDecoration: 'underline',
},
Expand Down
Loading