Skip to content

Commit 296bc6e

Browse files
AbhinavMVAbhinavMV
committed
chore: add changes from PR 682,647,687
1 parent 50c03e2 commit 296bc6e

File tree

11 files changed

+462
-178
lines changed

11 files changed

+462
-178
lines changed

‎packages/core/src/lib/Avatar/Avatar.styles.tsx

+51-31
Original file line numberDiff line numberDiff line change
@@ -4,48 +4,68 @@ import { fonts, resetCSS } from '@web3uikit/styles';
44
import { AvatarProps } from './types';
55

66
type TStyleProps = Pick<
7-
AvatarProps,
8-
'avatarBackground' | 'borderRadius' | 'image' | 'isRounded' | 'textColor' | 'theme' | 'size' | 'fontSize'
7+
AvatarProps,
8+
| 'avatarBackground'
9+
| 'borderRadius'
10+
| 'image'
11+
| 'isRounded'
12+
| 'textColor'
13+
| 'theme'
14+
| 'size'
15+
| 'fontSize'
916
>;
1017

1118
export const roundedEdgeValue = '50%';
1219

1320
const customBackgroundImage = css<TStyleProps>`
14-
background-image: url(${(p) => p.image});
15-
background-position: center;
16-
background-size: cover;
21+
background-image: url(${(p) => p.image});
22+
background-position: center;
23+
background-size: cover;
1724
`;
1825

1926
const DivStyled = styled.div<TStyleProps>`
20-
background: radial-gradient(106.45% 108.64% at 32.33% -4.84%, #ecf5fc 0.52%, #cee4f3 100%);
21-
color: ${(props) => props.textColor};
22-
height: ${(props) => props.size}px;
23-
overflow: hidden;
24-
position: static;
25-
text-transform: uppercase;
26-
width: ${(props) => props.size}px;
27-
word-break: break-all;
28-
display: flex;
29-
flex-direction: column;
30-
align-items: center;
31-
justify-content: center;
32-
font-size: ${(props) => props.fontSize}px;
33-
34-
span {
35-
display: none;
36-
}
37-
border-radius: ${(p) => `${p.isRounded ? roundedEdgeValue : p.borderRadius ? `${p.borderRadius}px` : `${0}px`}`};
38-
background: ${(p) => p.avatarBackground};
39-
${(p) => p.theme === 'image' && p.image && customBackgroundImage}
27+
background: radial-gradient(
28+
106.45% 108.64% at 32.33% -4.84%,
29+
#ecf5fc 0.52%,
30+
#cee4f3 100%
31+
);
32+
align-items: center;
33+
background: ${(p) => p.avatarBackground};
34+
color: ${(props) => props.textColor};
35+
display: flex;
36+
flex-direction: column;
37+
font-size: ${(props) => props.fontSize}px;
38+
justify-content: center;
39+
overflow: hidden;
40+
position: static;
41+
text-transform: uppercase;
42+
word-break: break-all;
43+
${(p) => p.theme === 'image' && p.image && customBackgroundImage};
44+
span {
45+
display: none;
46+
}
47+
&,
48+
& > svg {
49+
height: ${(props) => props.size}px;
50+
width: ${(props) => props.size}px;
51+
border-radius: ${(p) =>
52+
`${
53+
p.isRounded
54+
? roundedEdgeValue
55+
: p.borderRadius
56+
? `${p.borderRadius}px`
57+
: `${0}px`
58+
}`};
59+
}
4060
`;
4161

4262
const H4Styled = styled.h4<Pick<AvatarProps, 'textColor'>>`
43-
${fonts.h4};
44-
${fonts.openSans};
45-
${fonts.textBold700};
46-
${resetCSS};
47-
color: ${(props) => props.color};
48-
font-size: inherit;
63+
${fonts.h4};
64+
${fonts.openSans};
65+
${fonts.textBold700};
66+
${resetCSS};
67+
color: ${(props) => props.color};
68+
font-size: inherit;
4969
`;
5070

5171
export default { DivStyled, H4Styled };

‎packages/core/src/lib/Checkbox/Checkbox.styles.ts

+113-108
Original file line numberDiff line numberDiff line change
@@ -4,148 +4,153 @@ import { color, fonts, resetCSS } from '@web3uikit/styles';
44
import { CheckboxProps } from './types';
55

66
const inputStyles = css`
7-
${resetCSS};
8-
position: absolute;
9-
top: -30px;
7+
${resetCSS};
8+
height: 10px;
9+
left: -12px;
10+
position: absolute;
11+
top: 0;
12+
width: 10px;
1013
`;
1114

1215
const labelStyles = css`
13-
${resetCSS};
14-
${fonts.text};
15-
color: ${color.blueDark};
16-
cursor: pointer;
17-
display: block;
18-
font-size: 18px;
19-
margin-bottom: 4px;
20-
overflow: hidden;
21-
position: relative;
22-
width: fit-content;
16+
${resetCSS};
17+
${fonts.text};
18+
color: ${color.blueDark};
19+
cursor: pointer;
20+
display: block;
21+
font-size: 18px;
22+
margin-bottom: 4px;
23+
overflow: hidden;
24+
position: relative;
25+
width: fit-content;
2326
`;
2427

2528
const labelDisabled = css`
26-
opacity: 50%;
27-
pointer-events: none;
29+
opacity: 50%;
30+
pointer-events: none;
2831
`;
2932

3033
const boxStyles = css`
31-
padding-left: 28px;
34+
padding-left: 28px;
35+
36+
&:before,
37+
.after {
38+
border-radius: 5px;
39+
content: '';
40+
display: block;
41+
height: 20px;
42+
left: 0;
43+
pointer-events: none;
44+
position: absolute;
45+
top: 1px;
46+
transition: all 0.1s ease-out;
47+
width: 20px;
48+
}
3249
33-
&:before,
34-
.after {
35-
border-radius: 5px;
36-
content: '';
37-
display: block;
38-
height: 20px;
39-
left: 0;
40-
pointer-events: none;
41-
position: absolute;
42-
top: 0;
43-
transition: all 0.1s ease-out;
44-
width: 20px;
45-
}
46-
47-
&:before {
48-
background-color: ${color.blueLight};
49-
border: 1px solid ${color.blueSky};
50-
z-index: 0;
51-
}
52-
53-
.after {
54-
align-items: center;
55-
display: flex;
56-
justify-content: center;
57-
left: 1px;
58-
opacity: 0;
59-
top: 1px;
60-
z-index: 1;
61-
}
62-
63-
&:hover {
6450
&:before {
65-
filter: brightness(95%);
51+
background-color: ${color.blueLight};
52+
border: 1px solid ${color.blueSky};
53+
z-index: 0;
6654
}
67-
}
6855
69-
&:active {
70-
&:before {
71-
filter: brightness(90%);
56+
.after {
57+
align-items: center;
58+
display: flex;
59+
justify-content: center;
60+
left: 1px;
61+
opacity: 0;
62+
top: 2px;
63+
z-index: 1;
64+
}
65+
66+
&:hover {
67+
&:before {
68+
filter: brightness(95%);
69+
}
70+
}
71+
72+
&:active {
73+
&:before {
74+
filter: brightness(90%);
75+
}
7276
}
73-
}
7477
`;
7578

7679
const boxCheckedStyles = css`
77-
&:before {
78-
background-color: ${color.green};
79-
border-color: ${color.greenLight};
80-
}
81-
.after {
82-
opacity: 1;
83-
}
80+
&:before {
81+
background-color: ${color.green};
82+
border-color: ${color.greenLight};
83+
}
84+
.after {
85+
opacity: 1;
86+
}
8487
`;
8588

8689
const switchStyles = css`
87-
padding-left: 48px;
90+
padding-left: 48px;
8891
89-
&:before {
90-
background-color: ${color.greyLight};
91-
border-radius: 7px;
92-
content: '';
93-
display: block;
94-
height: 14px;
95-
left: 3px;
96-
opacity: 0.4;
97-
position: absolute;
98-
top: calc(50% - 7px);
99-
transition: all 0.1s ease-out;
100-
width: 34px;
101-
}
102-
103-
&:after {
104-
background-color: ${color.blueLight};
105-
border-radius: 50%;
106-
border: 1px solid ${color.blue};
107-
content: '';
108-
display: block;
109-
height: 20px;
110-
left: 0;
111-
position: absolute;
112-
top: calc(50% - 11px);
113-
transition: all 0.1s ease-out;
114-
width: 20px;
115-
}
92+
&:before {
93+
background-color: ${color.greyLight};
94+
border-radius: 7px;
95+
content: '';
96+
display: block;
97+
height: 14px;
98+
left: 3px;
99+
opacity: 0.4;
100+
position: absolute;
101+
top: calc(50% - 7px);
102+
transition: all 0.1s ease-out;
103+
width: 34px;
104+
}
116105
117-
&:hover {
118106
&:after {
119-
filter: brightness(95%);
107+
background-color: ${color.blueLight};
108+
border-radius: 50%;
109+
border: 1px solid ${color.blue};
110+
content: '';
111+
display: block;
112+
height: 20px;
113+
left: 0;
114+
position: absolute;
115+
top: calc(50% - 11px);
116+
transition: all 0.1s ease-out;
117+
width: 20px;
120118
}
121-
}
122119
123-
&:active {
124-
&:after {
125-
filter: brightness(90%);
120+
&:hover {
121+
&:after {
122+
filter: brightness(95%);
123+
}
124+
}
125+
126+
&:active {
127+
&:after {
128+
filter: brightness(90%);
129+
}
126130
}
127-
}
128131
`;
129132

130133
const switchOnStyles = css`
131-
&:before {
132-
background-color: ${color.green};
133-
}
134-
135-
&:after {
136-
background-color: ${color.green};
137-
border: 1px solid ${color.green};
138-
left: 18px;
139-
}
134+
&:before {
135+
background-color: ${color.green};
136+
}
137+
138+
&:after {
139+
background-color: ${color.green};
140+
border: 1px solid ${color.green};
141+
left: 18px;
142+
}
140143
`;
141144

142145
const StyledInput = styled.input<Pick<CheckboxProps, 'layout'>>`
143-
${inputStyles}
146+
${inputStyles}
144147
`;
145148

146-
const StyledLabel = styled.label<Pick<CheckboxProps, 'layout' | 'checked' | 'disabled'>>`
147-
${labelStyles}
148-
${(p) => p.disabled && labelDisabled}
149+
const StyledLabel = styled.label<
150+
Pick<CheckboxProps, 'layout' | 'checked' | 'disabled'>
151+
>`
152+
${labelStyles}
153+
${(p) => p.disabled && labelDisabled}
149154
${(p) => p.layout === 'box' && boxStyles}
150155
${(p) => p.layout === 'box' && p.checked && boxCheckedStyles}
151156
${(p) => p.layout === 'switch' && switchStyles}

‎packages/core/src/lib/Upload/Upload.stories.tsx

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import React from 'react';
2+
import { ComponentStory, ComponentMeta } from '@storybook/react';
3+
import Upload from './Upload';
4+
5+
export default {
6+
title: '4.UI/Upload',
7+
component: Upload,
8+
argTypes: {
9+
onChange: { action: 'file uploaded' },
10+
},
11+
} as ComponentMeta<typeof Upload>;
12+
13+
const Template: ComponentStory<typeof Upload> = (args) => <Upload {...args} />;
14+
15+
export const TextOnly = Template.bind({});
16+
TextOnly.args = {
17+
theme: 'textOnly',
18+
};
19+
20+
export const WithIcon = Template.bind({});
21+
WithIcon.args = {
22+
theme: 'withIcon',
23+
};

0 commit comments

Comments
 (0)