Skip to content

Commit ad8a2cb

Browse files
leo95oliveiraleo95oliveira
committed
Finalizing image upload component
1 parent 26f7a76 commit ad8a2cb

File tree

7 files changed

+320
-199
lines changed

7 files changed

+320
-199
lines changed

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@code4rena/components-library",
3-
"version": "3.2.0",
3+
"version": "4.0.0",
44
"description": "Code4rena's official components library ",
55
"types": "./dist/lib.d.ts",
66
"exports": {
@@ -84,4 +84,4 @@
8484
"@babel/preset-react"
8585
]
8686
}
87-
}
87+
}

‎src/lib/ImageUpload/ImageUpload.scss‎

Lines changed: 135 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -1,106 +1,154 @@
11
@import "../../styles/variables";
22

3-
.c4imgupload {
4-
position: relative;
3+
.c4imgupload--wrapper {
54
display: flex;
6-
max-width: 420px;
75
flex-direction: column;
86
gap: 0.5rem;
9-
margin-bottom: 0.5rem;
10-
11-
.c4imgupload--wrapper {
12-
position: relative;
13-
background: $color__n-10;
14-
border-radius: 10px;
15-
padding: 1rem;
16-
display: flex;
17-
flex-direction: column;
18-
justify-content: center;
19-
align-items: center;
20-
21-
.c4imgupload--label {
22-
position: absolute;
23-
inset: 0;
24-
z-index: 1;
25-
margin: 0px auto;
26-
height: auto;
27-
border-radius: 10px;
28-
cursor: pointer;
7+
max-width: 275px;
8+
align-items: center;
9+
10+
.c4imgupload--preview {
11+
width: 100%;
12+
13+
.preview {
14+
position: relative;
15+
height: 155px;
16+
background: $color__n-90;
17+
18+
img {
19+
width: 100%;
20+
height: 100%;
21+
object-fit: cover;
22+
}
23+
24+
.cutout {
25+
position: absolute;
26+
display: flex;
27+
flex-direction: row;
28+
inset: 0;
29+
30+
.left, .right {
31+
height: 100%;
32+
width: calc((100% - 155px) / 2);
33+
background: black;
34+
opacity: 0.6;
35+
}
36+
37+
.center{
38+
border-radius: 0.25rem;
39+
width: 155px;
40+
height: 155px;
41+
background: white;
42+
opacity: 0.3;
43+
}
44+
}
2945
}
3046

31-
input {
32-
position: absolute;
33-
inset: 0;
34-
z-index: 1;
35-
visibility: hidden;
47+
.file-name {
48+
padding: 0.5rem 2rem;
49+
background: $color__n-90;
50+
border: 1px solid $color__n-60;
51+
border-top: 0;
52+
53+
p {
54+
margin: 0;
55+
font-size: $font-size__text;
56+
line-height: 145%;
57+
color: $color__n-20;
58+
overflow: hidden;
59+
text-overflow: ellipsis;
60+
white-space: nowrap;
61+
}
3662
}
63+
}
64+
65+
.c4imgupload {
66+
position: relative;
67+
width: 100%;
3768

38-
.c4imgupload--img {
39-
width: 100%;
40-
height: 100%;
41-
min-width: 96px;
42-
min-height: 96px;
43-
max-width: 96px;
44-
max-height: 96px;
45-
object-fit: cover;
46-
margin-bottom: 0.5rem;
69+
&:hover {
70+
.c4imgupload--container {
71+
background: $color__n-80 !important;
72+
border: 1px solid $color__n-50 !important;
73+
}
4774
}
4875

49-
svg {
50-
width: 100%;
51-
height: 100%;
52-
min-width: 96px;
53-
min-height: 96px;
54-
max-width: 96px;
55-
max-height: 96px;
56-
57-
path {
58-
fill: $color__n-20;
76+
.c4imgupload--container {
77+
position: relative;
78+
border: 1px solid $color__n-60;
79+
background: $color__n-90;
80+
height: auto;
81+
border-radius: 0.25rem;
82+
padding: 1rem;
83+
display: flex;
84+
flex-direction: column;
85+
justify-content: center;
86+
align-items: center;
87+
88+
&.active {
89+
background: $color__n-80 !important;
90+
border: 1px solid $color__n-50 !important;
5991
}
60-
}
6192

62-
.c4imgupload--caption {
63-
line-height: 150%;
64-
font-family: $font__default;
65-
font-weight: 500;
66-
text-align: center;
67-
opacity: 0.3;
68-
margin: 0;
69-
color: $color__black;
70-
}
71-
72-
.c4imgupload--maxsize {
73-
font-size: 0.875rem;
74-
line-height: 150%;
75-
font-family: $font__default;
76-
font-weight: 500;
77-
text-align: center;
78-
margin: 0;
79-
opacity: 0.3;
80-
color: $color__black;
93+
input {
94+
position: absolute;
95+
inset: 0;
96+
z-index: 1;
97+
opacity: 0 !important;
98+
color: transparent !important;
99+
cursor: pointer;
100+
}
101+
102+
svg {
103+
width: 100%;
104+
height: 100%;
105+
min-width: 48px;
106+
min-height: 48px;
107+
max-width: 48px;
108+
max-height: 48px;
109+
110+
path {
111+
fill: $color__n-20;
112+
}
113+
}
114+
115+
.c4imgupload--caption {
116+
line-height: 125%;
117+
font-family: $font__default;
118+
font-size: $font-size__text;
119+
font-weight: bold;
120+
text-align: center;
121+
margin: 0;
122+
color: $color__n-20;
123+
max-width: 150px;
124+
125+
strong {
126+
color: $color__blurple__text;
127+
}
128+
}
81129
}
82-
}
83130

84-
.c4imgupload--dragindicator {
85-
visibility: hidden;
86-
position: absolute;
87-
inset: 0.35rem;
88-
border-radius: 0.5rem;
89-
border: 3px dashed $color__blurple-50;
90-
z-index: 1;
131+
.c4imgupload--dragindicator {
132+
visibility: hidden;
133+
position: absolute;
134+
inset: 0.35rem;
135+
border-radius: 0.25rem;
136+
border: 3px dashed $color__blurple__text;
137+
z-index: 1;
91138

92-
&.active {
93-
visibility: visible;
139+
&.active {
140+
visibility: visible;
141+
}
94142
}
95143
}
96-
}
97-
98-
.c4imgupload--error {
99-
color: $color__red;
100-
margin: 0;
101-
text-align: center;
102-
width: 100%;
103-
max-width: 420px;
104-
font-size: 0.875rem;
105-
}
106144

145+
.c4imgupload--error {
146+
color: $color__red;
147+
margin: 0;
148+
text-align: center;
149+
width: 100%;
150+
max-width: 420px;
151+
font-size: 0.875rem;
152+
line-height: normal;
153+
}
154+
}

‎src/lib/ImageUpload/ImageUpload.stories.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export default meta;
1212
type Story = StoryObj<typeof ImageUpload>;
1313

1414
export const SampleComponent: Story = (args) => (
15-
<div>
15+
<div style={{ minWidth: '300px', maxWidth: '420px' }}>
1616
<ImageUpload {...args} />
1717
</div>
1818
)
@@ -25,6 +25,5 @@ SampleComponent.parameters = {
2525
SampleComponent.args = {
2626
id: "c4_img_uploader",
2727
accept: "image/png, image/jpeg",
28-
maxSize: 2,
29-
multiSelect: false,
28+
maxSize: 2
3029
}

0 commit comments

Comments
 (0)