Skip to content

Commit

Permalink
Add new type of accessory button to add to table rows to clarify next…
Browse files Browse the repository at this point in the history
… actions to take
asoong committed Oct 17, 2023
1 parent 242724a commit 6aed725
Showing 2 changed files with 146 additions and 4 deletions.
18 changes: 14 additions & 4 deletions client/src/components/Swap/OnRamperIntentRow.tsx
Original file line number Diff line number Diff line change
@@ -3,6 +3,7 @@ import styled from 'styled-components/macro'
import { ChevronRight, Send } from 'react-feather';

import { SVGIconThemed } from '../SVGIcon/SVGIconThemed';
import { AccessoryButton } from '@components/common/AccessoryButton';


interface IntentRowProps {
@@ -109,8 +110,17 @@ export const IntentRow: React.FC<IntentRowProps> = ({
</IntentDetailsContainer>

<ActionsContainer>
<StyledSend onClick={handleSendClick}/>
<StyledChevronRight onClick={handleCompleteOrderClick}/>
<AccessoryButton
onClick={handleSendClick}
height={36}
title={'Send'}
icon={'send'}/>

<AccessoryButton
onClick={handleCompleteOrderClick}
height={36}
title={'Complete'}
icon={'chevronRight'}/>
</ActionsContainer>
</Container>
);
@@ -134,10 +144,10 @@ const IntentDetailsContainer = styled.div`
const ActionsContainer = styled.div`
display: flex;
flex-direction: column;
align-items: center;
align-items: flex-end;
justify-content: space-between;
padding: 2rem 1.25rem 2rem 0rem;
flex-grow: 1;
gap: 12px;
`;

const AmountLabelsContainer = styled.div`
132 changes: 132 additions & 0 deletions client/src/components/common/AccessoryButton.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,132 @@
import React from "react";
import styled, { css } from 'styled-components';
import { ChevronRight, Send } from 'react-feather';

import Spinner from "@components/common/Spinner";

interface AccessoryButtonProps {
fullWidth?: boolean;
title?: string;
height?: number;
disabled?: boolean;
loading?: boolean;
onClick?: () => void;
children?: React.ReactNode;
icon?: "send" | "chevronRight";
}

export const AccessoryButton: React.FC<AccessoryButtonProps> = ({
fullWidth = false,
title = '',
height = 48,
disabled = false,
loading = false,
onClick,
children,
icon
}) => {

/*
* Helpers
*/

const getIcon = (iconName: "send" | "chevronRight") => {
switch (iconName) {
case "send":
return <StyledSend />;
case "chevronRight":
return <StyledChevronRight />;
default:
return null;
}
};

/*
* Component
*/

return (
<Container
fullWidth={fullWidth}
height={height}
disabled={disabled || loading}
onClick={onClick}
>
<ButtonAndLabelContainer>
{loading ? <Spinner /> : (
<>
{title && <span>{title}</span>}
{icon && getIcon(icon)}
{children}
</>
)}
</ButtonAndLabelContainer>
</Container>
);
};

const Container = styled.button<AccessoryButtonProps>`
width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
height: ${({ height }) => height}px;
border-radius: 18px;
background: transparent;
border: 1px solid #6C757D;
padding: 8px 16px;
color: white;
cursor: pointer;
transition: background 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
&:hover:not([disabled]) {
background: rgba(206, 212, 218, 0.1);
color: #FFF;
}
&:active:not([disabled]) {
background: #bc3035;
box-shadow: inset 0px -8px 0px rgba(0, 0, 0, 0.16);
}
${({ disabled }) =>
disabled && css`
opacity: 0.5;
cursor: not-allowed;
&:hover, &:active {
background: #df2e2d; // Reset hover and active states for disabled buttons
box-shadow: inset 0px -6px 0px rgba(0, 0, 0, 0.16);
}
`
}
${({ loading }) =>
loading && css`
cursor: wait;
background: #dedede;
`
}
`;

const ButtonAndLabelContainer = styled.div`
display: flex;
align-items: center;
justify-content: center;
flex-grow: 1;
font-weight: 700;
font-size: 14px;
font-family: 'Graphik';
text-align: center;
color: #6C757D;
gap: 8px;
`;

const StyledSend = styled(Send)`
width: 12px;
height: 12px;
color: #6C757D;
`;

const StyledChevronRight = styled(ChevronRight)`
width: 18px;
height: 18px;
color: #6C757D;
margin-right: -4px;
`;

0 comments on commit 6aed725

Please sign in to comment.