Page MenuHomePhabricator

[e.cash] Add button component
ClosedPublic

Authored by johnkuney on Apr 27 2023, 22:08.

Details

Reviewers
bytesofman
Group Reviewers
Restricted Project
Commits
rABCba772235dd93: [e.cash] Add button component
Summary

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

Test Plan

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

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

johnkuney edited the test plan for this revision. (Show Details)
johnkuney edited the test plan for this revision. (Show Details)
bytesofman added a subscriber: bytesofman.
bytesofman added inline comments.
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"
2 -> "top-right"
3 -> "bottom-right"
4 -> "bottom-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?

This revision now requires changes to proceed.Apr 28 2023, 02:55
johnkuney edited the test plan for this revision. (Show Details)

improve comment detail, make link a styled component

Can we have a hover effect, like increasing the glowing ? no blocker

bytesofman added inline comments.
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`
`
This revision now requires changes to proceed.Apr 28 2023, 22:55

Can we have a hover effect, like increasing the glowing ? no blocker

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

web/e.cash/components/button/index.js
47 ↗(On Diff #40087)

lol fine

web/e.cash/components/button/styles.js
16 ↗(On Diff #40087)

fineee

convery class to styled componet

@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.

  • Have ButtonInner accept a corner prop
  • Move this logic to the styled component definition

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.

This revision is now accepted and ready to land.May 1 2023, 14:50
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.
As far as I can tell, a class within a styled component can do all the styled component things with props etc. You just have to pass the prop at the parent styled component level.

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.

This revision was automatically updated to reflect the committed changes.