Adding a reusable button component for the site.
The component takes a link, text, color, corner, and glow props and renders the styled button
Im adding the first instance of the button on the homepage top section for the only link that currently exists
Details
Details
- Reviewers
bytesofman - Group Reviewers
Restricted Project - Commits
- rABCba772235dd93: [e.cash] Add button component
Run the app locally with npm i then npm run dev
See if the white button appears as it should and test the link
Try some other props
try corner="topLeft" or "topRight" or "bottomLeft or "bottomRight"
try color="accent"
The default color value is the primary blue and will happen if no color prop is passed or anything but "accent" or "white" is passed
The button should look good in the stealth theme as well
Then run a preview bot @bot preview-e.cash to test build
Diff Detail
Diff Detail
- Repository
- rABC Bitcoin ABC
- Branch
- ecash-button
- Lint
Lint Passed - Unit
No Test Coverage - Build Status
Buildable 23567 Build 46749: Build Diff Build 46748: arc lint + arc unit
Event Timeline
| web/e.cash/components/button/index.js | ||
|---|---|---|
| 4 ↗ | (On Diff #40044) | These comments should be more clear Each prop needs a summary of what the inputs can be |
| 5 ↗ | (On Diff #40044) | corner settings should be more intuitive 1 -> "top-left" |
| 36 ↗ | (On Diff #40044) | also pretty straightforward to use a styled component for this export const ButtonLink = styled(Link)`
display: inline-flex;
padding: 2px;
align-items: center;
transition: all 300ms ease-in-out;
color: ${props =>
props.color === 'accent'
? props.theme.colors.accent
: props.color === 'white'
? props.theme.colors.contrast
: props.theme.colors.primaryLight};
font-size: 15px;
line-height: 1.5;
font-weight: 400;
letter-spacing: 1px;
background-color: ${props =>
props.color === 'accent'
? props.theme.colors.accent
: props.color === 'white'
? props.theme.colors.contrast
: props.theme.colors.primaryLight};
${props =>
props.theme === stealth
? 'background-color: #fff !important; color: #fff !important; '
: null}`; |
| 39 ↗ | (On Diff #40044) | why not a styled component? |
| web/e.cash/pages/index.js | ||
| 26 ↗ | (On Diff #40044) | why not a styled component? |
| web/e.cash/styles/pages/homepage.js | ||
| 21 ↗ | (On Diff #40044) | how is this change related to this diff? |
Comment Actions
Build Bitcoin ABC Diffs / Diff Testing (preview-e.cash) passed.
Preview is available at http://54.39.19.73:41146 for the next 60 minutes.
Comment Actions
Build Bitcoin ABC Diffs / Diff Testing (preview-e.cash) passed.
Preview is available at http://54.39.19.73:41150 for the next 60 minutes.
| web/e.cash/components/button/index.js | ||
|---|---|---|
| 5–9 ↗ | (On Diff #40087) | aw yeah very nice |
| 47 ↗ | (On Diff #40087) | but like...it'd be a lot cooler as a styled component |
| web/e.cash/components/button/styles.js | ||
| 16 ↗ | (On Diff #40087) | cmon we can't just leave the one class here |
| web/e.cash/pages/index.js | ||
| 26 ↗ | (On Diff #40087) | export const ButtonContainer = styled.div` ` |
Comment Actions
For sure. It does have the current version's hover effect of a slight inner glow...I can play with some more obvious effects though. Will make in another diff though
Comment Actions
@bot preview-e.cash
| web/e.cash/components/button/index.js | ||
|---|---|---|
| 48 | One of the reasons to make this a styled component is that you can lose this in-line css rule.
Now you have a clean re-usable component. It's not really a big deal in this case as you are already returning the parent. Just something to keep in mind for future components. | |
Comment Actions
Build Bitcoin ABC Diffs / Diff Testing (preview-e.cash) passed.
Preview is available at http://51.83.220.63:41270 for the next 60 minutes.
| web/e.cash/components/button/index.js | ||
|---|---|---|
| 48 | For sure, although I actually did try moving that inline rule to the styled component when buttoninner was still a class. This actually avoids passing the same prop on each element like we're doing for color here. You could just pass color at the top and access it within the class under ButtonCtn. The corner prop wasnt working for me on either ButtonMain or ButtonInner as a styled component rule in any case...not sure what was causing it, but maybe it was the trying to use values from another object idk? Im sure can be done, but seemed not worth the trouble shooting time. | |
Comment Actions
Build Bitcoin ABC Diffs / Diff Testing (preview-e.cash) passed.
Preview is available at http://51.68.37.192:41464 for the next 60 minutes.