Skip to content

Commit e249a46

Browse files
nebula-aacnebula-aac
committed
feat: move custom button to styled
Signed-off-by: Antonette Caldwell <[email protected]>
1 parent 1494da3 commit e249a46

File tree

4 files changed

+195
-17
lines changed

4 files changed

+195
-17
lines changed

‎src/base/Button/Button.tsx

-16
Original file line numberDiff line numberDiff line change
@@ -14,20 +14,4 @@ export function Button({ label, children, ...props }: ButtonProps): JSX.Element
1414
);
1515
}
1616

17-
export const ContainedButton = (props: ButtonProps): JSX.Element => (
18-
<Button variant="contained" {...props}>
19-
{props.children}
20-
</Button>
21-
);
22-
export const OutlinedButton = (props: ButtonProps): JSX.Element => (
23-
<Button variant="outlined" {...props}>
24-
{props.children}
25-
</Button>
26-
);
27-
export const TextButton = (props: ButtonProps): JSX.Element => (
28-
<Button variant="text" {...props}>
29-
{props.children}
30-
</Button>
31-
);
32-
3317
export default Button;

‎src/custom/Modal/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { DialogProps, styled } from '@mui/material';
22
import React, { useRef, useState } from 'react';
33
import { Dialog, IconButton, Paper, Typography } from '../../base';
4-
import { ContainedButton, OutlinedButton, TextButton } from '../../base/Button/Button';
54
import { iconLarge } from '../../constants/iconsSizes';
65
import { CloseIcon, InfoCircleIcon } from '../../icons';
6+
import { ContainedButton, OutlinedButton, TextButton } from '../../styled';
77
import { CustomTooltip } from '../CustomTooltip';
88

99
interface ModalProps extends DialogProps {

‎src/styled/button/index.tsx

+193
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,193 @@
1+
import { styled } from '@mui/material/styles';
2+
import React from 'react';
3+
import Button, { ButtonProps } from '../../base/Button/Button';
4+
import { darkTeal } from '../../theme/colors';
5+
6+
export function ContainedButton(props: ButtonProps): React.JSX.Element {
7+
return <Button variant="contained" {...props} />;
8+
}
9+
10+
export function OutlinedButton(props: ButtonProps): React.JSX.Element {
11+
return <Button variant="outlined" {...props} />;
12+
}
13+
14+
export function TextButton(props: ButtonProps): React.JSX.Element {
15+
return <Button variant="text" {...props} />;
16+
}
17+
18+
export function SecondaryContainedButton(props: ButtonProps): React.JSX.Element {
19+
return <Button variant="contained" color="secondary" {...props} />;
20+
}
21+
22+
export function LargeContainedButton(props: ButtonProps): React.JSX.Element {
23+
return <Button variant="contained" size="large" {...props} />;
24+
}
25+
26+
/**
27+
* Renders the default style for the Button
28+
*/
29+
export const DefaultButton = styled(Button)(() => ({}));
30+
31+
/**
32+
* Renders the style for `variant="contained"`
33+
*/
34+
export const ContainedDefaultButton = styled(ContainedButton)(() => ({}));
35+
36+
/**
37+
* Renders the style for `variant="outlined"`
38+
*/
39+
export const OutlinedDefaultButton = styled(OutlinedButton)(() => ({}));
40+
41+
/**
42+
* Renders the style for `variant="text"`
43+
*/
44+
export const TextDefaultButton = styled(TextButton)(() => ({}));
45+
46+
/**
47+
* Renders the style for `variant="contained" color="secondary"`
48+
*/
49+
export const SecondaryContainedDefaultButton = styled(SecondaryContainedButton)(() => ({}));
50+
51+
/**
52+
* Exports the `StyledButton` which inherits the `DefaultButton`
53+
*/
54+
export const StyledButton = DefaultButton;
55+
56+
export const GetStartedButton = styled(ContainedDefaultButton)(() => ({}));
57+
58+
export const LoginButton = styled(SecondaryContainedButton)(() => ({}));
59+
60+
export const AddButton = styled(ContainedDefaultButton)(({ theme }) => ({
61+
margin: theme.spacing(1)
62+
}));
63+
64+
export const EditButton = styled(ContainedDefaultButton)(() => ({
65+
'@media (max-width: 768px)': {
66+
minWidth: '50px'
67+
}
68+
}));
69+
70+
export const SpanTextButton = styled('span')(() => ({
71+
marginLeft: '0.5rem',
72+
display: 'block',
73+
'@media (max-width: 853px)': {
74+
display: 'none'
75+
}
76+
}));
77+
78+
export const DeleteButton = styled(DefaultButton)(() => ({}));
79+
80+
export const DenyButton = styled(DefaultButton)(() => ({}));
81+
82+
export const ApproveButton = styled(ContainedDefaultButton)(() => ({
83+
marginRight: '.5rem'
84+
}));
85+
86+
export const CancelButton = styled(DefaultButton)(() => ({
87+
marginRight: '1rem',
88+
color: '#000',
89+
backgroundColor: '#fff'
90+
}));
91+
92+
export const SaveButton = styled(ContainedDefaultButton)(() => ({
93+
marginRight: '1rem'
94+
}));
95+
96+
export const ConnectButton = styled(ContainedDefaultButton)(() => ({
97+
marginTop: '1rem'
98+
}));
99+
100+
export const FilterButton = styled(ContainedDefaultButton)(() => ({
101+
height: '3.5rem'
102+
}));
103+
104+
export const ActionButton = styled(ContainedDefaultButton)(() => ({}));
105+
106+
export const TableCtrlButton = styled(SecondaryContainedDefaultButton)(() => ({
107+
'&:first-child': {
108+
marginRight: '1rem'
109+
}
110+
}));
111+
112+
export const RangeButton = styled(DefaultButton)(() => ({
113+
border: '1px solid rgba(0, 0, 0, 0.23)',
114+
backgroundColor: 'white'
115+
}));
116+
117+
export const ErrorCloseButton = styled(DefaultButton)(() => ({}));
118+
119+
export const TryAgainButton = styled(OutlinedButton)(() => ({}));
120+
121+
export const TransferButton = styled(DefaultButton)(() => ({
122+
margin: '5px 0',
123+
padding: '7px 0',
124+
borderRadius: '10px',
125+
boxShadow: 'none',
126+
borderColor: darkTeal.main,
127+
'&:hover': {
128+
borderColor: darkTeal.main
129+
}
130+
}));
131+
132+
export const CardStatsBox = styled(ContainedDefaultButton)(() => ({
133+
display: 'flex',
134+
alignItems: 'center',
135+
flexDirection: 'column',
136+
padding: '5px',
137+
minWidth: '175px',
138+
borderRadius: '5px',
139+
marginBottom: '10px'
140+
}));
141+
142+
export const IconButton = styled(DefaultButton)({
143+
minWidth: 'fit-content',
144+
'&.MuiButtonBase-root:hover': {
145+
bgcolor: 'transparent'
146+
}
147+
});
148+
149+
export const PopupButton = styled(DefaultButton)(({ theme }) => ({
150+
width: '100%',
151+
borderRadius: '4px',
152+
background: theme.palette.common.white,
153+
color: theme.palette.text.secondary,
154+
boxShadow: '0px 4px 4px 0px rgba(0, 0, 0, 0.25)',
155+
display: 'flex',
156+
flexDirection: 'column',
157+
marginBottom: '10px'
158+
}));
159+
160+
export const ConnectionsButton = styled(ContainedDefaultButton)(() => ({
161+
marginTop: '1rem',
162+
marginRight: '1rem',
163+
padding: '1.5rem, 1.5rem',
164+
width: 'object-fit'
165+
}));
166+
167+
/** Review later
168+
export const TOSButton = styled("a")(({ theme }) => ({
169+
display: "flex",
170+
padding: "0.5rem 2rem",
171+
color: theme.palette.common.white,
172+
backgroundColor: theme.palette.keppelGreen,
173+
borderRadius: "5px",
174+
transition: "all .3s",
175+
boxShadow: "0 1px 20px rgba(0, 0, 0, 0.2)",
176+
"&:hover": {
177+
backgroundColor: theme.palette.caribbeanGreen,
178+
},
179+
}));
180+
181+
export const PrivacyButton = styled("a")(({ theme }) => ({
182+
display: "flex",
183+
padding: "0.5rem 2rem",
184+
color: theme.palette.common.white,
185+
backgroundColor: theme.palette.keppelGreen,
186+
borderRadius: "5px",
187+
transition: "all .3s",
188+
boxShadow: "0 1px 20px rgba(0, 0, 0, 0.2)",
189+
"&:hover": {
190+
backgroundColor: theme.palette.caribbeanGreen,
191+
},
192+
}));
193+
*/

‎src/styled/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './button';

0 commit comments

Comments
 (0)