Skip to content

Commit 19d1b76

Browse files
dchen150dchen150
authored
add rounded button design (#134)
* add rounded button design * react version * implemented charcuterie for buttons * remove unnecessary import
1 parent 7871229 commit 19d1b76

File tree

4 files changed

+234
-7
lines changed

4 files changed

+234
-7
lines changed

‎components/button.js‎

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,29 @@ import Icon from './Icon';
44
import { COLOR, EDIT, VIEW, NEW, CLOSE, DELETE } from '../constants';
55

66
const StyledButton = styled.button`
7-
border: none;
7+
${(props) => props.outlined ? `border: 2px solid ${props.disabled ? COLOR.INACTIVE_DARK_GRAY : props.contentColor}` : `border: none`};
88
font-family: 'HK Grotesk';
99
font-weight: bold;
1010
${(props) => props.isText && 'padding: 6px 24px; height: 40px;'}
1111
${(props) =>
1212
!props.isText && props.contentColor === COLOR.BLACK && 'padding: 10px;'}
1313
${(props) =>
14-
props.color
15-
? `color: ${props.contentColor}; background: ${props.color};`
16-
: `color: ${COLOR.WHITE}; background-color: ${COLOR.PRIMARY};`}
14+
!props.disabled ? (
15+
props.color
16+
? `color: ${props.contentColor}; background: ${props.color};`
17+
: `color: ${COLOR.WHITE}; background-color: ${COLOR.PRIMARY};`
18+
) : (
19+
`color: ${COLOR.INACTIVE_DARK_GRAY}; background: ${props.outlined ? COLOR.TRANSPARENT : COLOR.UNSELECTED_GRAY};`
20+
)}
21+
border-radius: ${(props) => props.rounded ? (props.inline ? '0 100px 100px 0' : '100px') : (props.inline ? '0 8px 8px 0' : '8px')};
1722
cursor: pointer;
1823
display: flex;
1924
align-items: center;
2025
font-size: 16px;
21-
border-radius: ${(props) => (props.inline ? '0 3px 3px 0' : '3px')};
26+
&:hover {
27+
color: ${(props) => props.hoverContentColor};
28+
background: ${(props) => props.hoverBackgroundColor};
29+
}
2230
`;
2331

2432
const StyledIcon = styled(Icon)`
@@ -37,13 +45,23 @@ const Button = ({
3745
contentColor = COLOR.BLACK,
3846
onClick,
3947
inline = false,
48+
hoverBackgroundColor,
49+
hoverContentColor,
50+
disabled = false,
51+
outlined = false,
52+
rounded = false
4053
}) => (
4154
<StyledButton
4255
isText={children && !type}
4356
onClick={onClick}
4457
color={color}
4558
contentColor={contentColor}
4659
inline={inline}
60+
hoverBackgroundColor={hoverBackgroundColor}
61+
hoverContentColor={hoverContentColor}
62+
disabled={disabled}
63+
outlined={outlined}
64+
rounded={rounded}
4765
>
4866
{type === EDIT && !color && <StyledIcon hasText={children} icon='edit' />}
4967
{type === EDIT && color && <Icon color={COLOR.BLACK} icon='edit' />}

‎constants.js‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,19 @@ export const COLOR = {
2121
UNSELECTED_GRAY: '#BDBAC3',
2222
MIDNIGHT_PURPLE: '#433860',
2323
LIGHT_GRAY: '#F0EEF2',
24-
LIGHT_PURPLE: '#E2D6FF'
24+
LIGHT_PURPLE: '#E2D6FF',
25+
NW_TEAL: '#20FFAF',
26+
TEAL: '#00A399',
27+
INACTIVE_DARK_GRAY: '#8C898F',
28+
BRIGHT_RED: '#F83D3D'
2529
};
30+
export const BUTTON_COLOR = {
31+
PRIMARY: 'linear-gradient(92.58deg, #0DEFE1 0%, #78FF96 100%)',
32+
SECONDARY: '#FFFFFF',
33+
OUTLINE: 'Transparent',
34+
DESTRUCTIVE: '#F65C5C',
35+
HOVER_PRIMARY: 'linear-gradient(90deg, #D7FFF0 0%, #7BFFCF 100%)'
36+
}
2637
export const FAQ = 'FAQ';
2738
export const FAQCategory = Object.freeze({
2839
GENERAL: 'General',

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
"next": "9.4.4",
2828
"next-optimized-images": "^2.6.2",
2929
"rc-input-number": "^6.1.1",
30-
"react": "^16.8.6",
30+
"react": "^16.14.0",
3131
"react-csv": "^2.0.3",
3232
"react-datepicker": "^3.3.0",
3333
"react-dom": "16.13.1",

‎pages/charcuterie.js‎

Lines changed: 198 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,198 @@
1+
import React from 'react';
2+
import styled from 'styled-components';
3+
import Button from '../components/button';
4+
import { COLOR, BUTTON_COLOR } from '../constants';
5+
6+
const Container = styled.div`
7+
background-color: ${COLOR.MIDNIGHT_PURPLE};
8+
`;
9+
10+
const Section = styled.div`
11+
margin: 40px;
12+
`;
13+
14+
const Row = styled.div`
15+
display: flex;
16+
margin: 10px;
17+
`;
18+
19+
const ButtonContainer = styled.div`
20+
margin: 10px;
21+
`;
22+
23+
const BUTTON_TEXT = "Button"
24+
25+
export default function Charcuterie() {
26+
return (
27+
<Container>
28+
<Section>
29+
<Row>
30+
<ButtonContainer>
31+
<Button color={BUTTON_COLOR.PRIMARY} contentColor={COLOR.MIDNIGHT_PURPLE} >
32+
{BUTTON_TEXT}
33+
</Button>
34+
</ButtonContainer>
35+
36+
<ButtonContainer>
37+
<Button color={BUTTON_COLOR.PRIMARY} contentColor={COLOR.MIDNIGHT_PURPLE} hoverContentColor={COLOR.TEAL} hoverBackgroundColor={BUTTON_COLOR.HOVER_PRIMARY} >
38+
{BUTTON_TEXT}
39+
</Button>
40+
</ButtonContainer>
41+
42+
<ButtonContainer>
43+
<Button disabled >
44+
{BUTTON_TEXT}
45+
</Button>
46+
</ButtonContainer>
47+
48+
</Row>
49+
50+
<Row>
51+
<ButtonContainer>
52+
<Button color={BUTTON_COLOR.SECONDARY} contentColor={COLOR.MIDNIGHT_PURPLE} >
53+
{BUTTON_TEXT}
54+
</Button>
55+
</ButtonContainer>
56+
57+
<ButtonContainer>
58+
<Button color={BUTTON_COLOR.SECONDARY} contentColor={COLOR.MIDNIGHT_PURPLE} hoverBackgroundColor={COLOR.LIGHT_GRAY}>
59+
{BUTTON_TEXT}
60+
</Button>
61+
</ButtonContainer>
62+
63+
<ButtonContainer>
64+
<Button disabled >
65+
{BUTTON_TEXT}
66+
</Button>
67+
</ButtonContainer>
68+
69+
</Row>
70+
71+
<Row>
72+
<ButtonContainer>
73+
<Button color={COLOR.TRANSPARENT} contentColor={COLOR.NW_TEAL} hoverContentColor={COLOR.TEAL} outlined>
74+
{BUTTON_TEXT}
75+
</Button>
76+
</ButtonContainer>
77+
78+
<ButtonContainer>
79+
<Button color={COLOR.TRANSPARENT} contentColor={COLOR.NW_TEAL} hoverContentColor={COLOR.TEAL} hoverBackgroundColor={BUTTON_COLOR.HOVER_PRIMARY} outlined>
80+
{BUTTON_TEXT}
81+
</Button>
82+
</ButtonContainer>
83+
84+
<ButtonContainer>
85+
<Button disabled outlined>
86+
{BUTTON_TEXT}
87+
</Button>
88+
</ButtonContainer>
89+
</Row>
90+
91+
<Row>
92+
<ButtonContainer>
93+
<Button color={BUTTON_COLOR.DESTRUCTIVE} contentColor={COLOR.WHITE}>
94+
{BUTTON_TEXT}
95+
</Button>
96+
</ButtonContainer>
97+
98+
<ButtonContainer>
99+
<Button color={BUTTON_COLOR.DESTRUCTIVE} contentColor={COLOR.WHITE} hoverBackgroundColor={COLOR.BRIGHT_RED} >
100+
{BUTTON_TEXT}
101+
</Button>
102+
</ButtonContainer>
103+
104+
<ButtonContainer>
105+
<Button disabled>
106+
{BUTTON_TEXT}
107+
</Button>
108+
</ButtonContainer>
109+
</Row>
110+
111+
</Section>
112+
113+
<Section>
114+
<Row>
115+
<ButtonContainer>
116+
<Button color={BUTTON_COLOR.PRIMARY} contentColor={COLOR.MIDNIGHT_PURPLE} rounded>
117+
{BUTTON_TEXT}
118+
</Button>
119+
</ButtonContainer>
120+
121+
<ButtonContainer>
122+
<Button color={BUTTON_COLOR.PRIMARY} contentColor={COLOR.MIDNIGHT_PURPLE} hoverContentColor={COLOR.TEAL} hoverBackgroundColor={BUTTON_COLOR.HOVER_PRIMARY} rounded>
123+
{BUTTON_TEXT}
124+
</Button>
125+
</ButtonContainer>
126+
127+
<ButtonContainer>
128+
<Button disabled rounded>
129+
{BUTTON_TEXT}
130+
</Button>
131+
</ButtonContainer>
132+
133+
</Row>
134+
135+
<Row>
136+
<ButtonContainer>
137+
<Button color={BUTTON_COLOR.SECONDARY} contentColor={COLOR.MIDNIGHT_PURPLE} rounded>
138+
{BUTTON_TEXT}
139+
</Button>
140+
</ButtonContainer>
141+
142+
<ButtonContainer>
143+
<Button color={BUTTON_COLOR.SECONDARY} contentColor={COLOR.MIDNIGHT_PURPLE} hoverBackgroundColor={COLOR.LIGHT_GRAY} rounded>
144+
{BUTTON_TEXT}
145+
</Button>
146+
</ButtonContainer>
147+
148+
<ButtonContainer>
149+
<Button disabled rounded>
150+
{BUTTON_TEXT}
151+
</Button>
152+
</ButtonContainer>
153+
154+
</Row>
155+
156+
<Row>
157+
<ButtonContainer>
158+
<Button color={COLOR.TRANSPARENT} contentColor={COLOR.NW_TEAL} hoverContentColor={COLOR.TEAL} outlined rounded>
159+
{BUTTON_TEXT}
160+
</Button>
161+
</ButtonContainer>
162+
163+
<ButtonContainer>
164+
<Button color={COLOR.TRANSPARENT} contentColor={COLOR.NW_TEAL} hoverContentColor={COLOR.TEAL} hoverBackgroundColor={BUTTON_COLOR.HOVER_PRIMARY} outlined rounded>
165+
{BUTTON_TEXT}
166+
</Button>
167+
</ButtonContainer>
168+
169+
<ButtonContainer>
170+
<Button disabled outlined rounded>
171+
{BUTTON_TEXT}
172+
</Button>
173+
</ButtonContainer>
174+
</Row>
175+
176+
<Row>
177+
<ButtonContainer>
178+
<Button color={BUTTON_COLOR.DESTRUCTIVE} contentColor={COLOR.WHITE} rounded>
179+
{BUTTON_TEXT}
180+
</Button>
181+
</ButtonContainer>
182+
183+
<ButtonContainer>
184+
<Button color={BUTTON_COLOR.DESTRUCTIVE} contentColor={COLOR.WHITE} hoverBackgroundColor={COLOR.BRIGHT_RED} rounded>
185+
{BUTTON_TEXT}
186+
</Button>
187+
</ButtonContainer>
188+
189+
<ButtonContainer>
190+
<Button disabled rounded>
191+
{BUTTON_TEXT}
192+
</Button>
193+
</ButtonContainer>
194+
</Row>
195+
</Section>
196+
</Container>
197+
)
198+
}

0 commit comments

Comments
 (0)