Skip to content

Commit aeeeb59

Browse files
lucaspaulaleallucaspaulaleal
committed
fix: botões de lixeira e upload no lugar correto; fix: seleção de cor do personagem agora é input radio
1 parent 2fa2435 commit aeeeb59

File tree

2 files changed

+100
-43
lines changed

2 files changed

+100
-43
lines changed

‎src/app/create-character/create-character.module.css

Lines changed: 59 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@
7676
display: flex;
7777
justify-content: center;
7878
align-items: flex-start;
79-
gap: 20px;
79+
gap: 15px;
8080
}
8181

8282
.inputArea {
@@ -109,22 +109,25 @@
109109
}
110110

111111
.textAreaBibliografia {
112-
border: 2px solid #8000ff;
112+
border: 2px solid #8000ff;
113113
}
114114

115115
.colors {
116-
display: flex;
117-
justify-content: center;
118-
gap: 15px;
119-
margin-top: 10px;
116+
display: flex;
117+
justify-content: center;
118+
gap: 15px;
119+
margin-top: 10px;
120+
color: white;
121+
120122
}
121123

122124
.color {
123-
width: 30px;
124-
height: 30px;
125-
border-radius: 50%;
126-
border: 2px solid #fff;
127-
cursor: pointer;
125+
/* O input está escondido e o label é estilizado*/
126+
width: 30px;
127+
height: 30px;
128+
border-radius: 50%;
129+
border: 2px solid #fff;
130+
cursor: pointer;
128131
}
129132

130133
.color:hover {
@@ -135,12 +138,34 @@
135138
transform: scale(0.95);
136139
}
137140

138-
.black { background: #000; }
139-
.green { background: #00ff99; }
140-
.yellow { background: #ffff00; }
141-
.orange { background: #ffaa00; }
142-
.red { background: #ff3333; }
143-
.pink { background: #ff00cc; }
141+
.black { background-color: #000000; } /* Muda a cor do botão no Chrome e Firefox */
142+
.green { background-color: #00fc50; }
143+
.yellow { background-color: #ffff00; }
144+
.orange { background-color: #ffaa00; }
145+
.red { background-color: #ff3333; }
146+
.pink { background-color: #ff00cc; }
147+
148+
.buttonColors {
149+
/* label dos input radios das cores*/
150+
padding: 15px;
151+
border-radius: 100%;
152+
cursor: pointer;
153+
border: 2px solid;
154+
}
155+
156+
.buttonColors:hover {
157+
transform: scale(1.1);
158+
}
159+
160+
.buttonColors:active {
161+
transform: scale(0.98);
162+
}
163+
164+
.color:checked + .buttonColors {
165+
/* Estilo para visualizar cor selecionada*/
166+
transform: scale(1.2);
167+
}
168+
144169

145170
.previewArea {
146171
flex: 1;
@@ -170,7 +195,7 @@
170195

171196
.imagePlaceholder {
172197
background-color: #d9d9d9;
173-
height: 200px;
198+
height: 245px;
174199
border-radius: 10px;
175200
display: flex;
176201
align-items: center;
@@ -182,20 +207,7 @@
182207
max-width: 60px;
183208
}
184209

185-
.iconClickable {
186-
position: absolute;
187-
top: 10px;
188-
right: 10px;
189-
cursor: pointer;
190-
background-color: #cfcfcf;
191-
}
192210

193-
.uploadIcon {
194-
position: absolute;
195-
top: 50px;
196-
right: 10px;
197-
cursor: pointer;
198-
}
199211

200212
.buttons {
201213
display: flex;
@@ -251,15 +263,25 @@
251263
flex: 1;
252264
display: flex;
253265
flex-direction: column;
254-
gap: 12px;
255-
max-width: 40px;
266+
gap: 8px;
267+
max-width: 34px;
256268

257269
}
258270

259-
.deleteUploadButtons {
260-
background-color: #cfcfcf;
271+
272+
.iconClickable {
273+
position: relative;
274+
top: 30px;
275+
cursor: pointer;
276+
background-color: #cfcfcf;
277+
border-radius: 5px;
261278
}
262279

263-
.deleteUploadButtons:hover {
264-
background-color: #ff6600;
280+
281+
.iconClickable:hover {
282+
background-color: #b1b1b1;
265283
}
284+
285+
.iconClickable:active {
286+
background-color: #8a8888;
287+
}

‎src/app/create-character/page.tsx

Lines changed: 41 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -56,17 +56,41 @@ export default function CreateCharacter() {
5656
className={styles.textAreaBibliografia}></textarea>
5757

5858
<div className={styles.colors}>
59+
60+
<input type="radio" name="color" id ="black" value="black" className={styles.color} hidden />
61+
<label htmlFor="black" className={`${styles.buttonColors} ${styles.black} `}></label>
62+
63+
<input type="radio" name="color" id ="green" value="green" className={styles.color} hidden />
64+
<label htmlFor="green" className={`${styles.buttonColors} ${styles.green} `}></label>
65+
66+
<input type="radio" name="color" id ="yellow" value="yellow" className={styles.color} hidden />
67+
<label htmlFor="yellow" className={`${styles.buttonColors} ${styles.yellow} `}></label>
68+
69+
<input type="radio" name="color" id ="orange" value="orange" className={styles.color} hidden />
70+
<label htmlFor="orange" className={`${styles.buttonColors} ${styles.orange} `}></label>
71+
72+
<input type="radio" name="color" id ="red" value="red" className={styles.color} hidden />
73+
<label htmlFor="red" className={`${styles.buttonColors} ${styles.red} `}></label>
74+
75+
<input type="radio" name="color" id ="pink" value="pink" className={styles.color} hidden/>
76+
<label htmlFor="pink" className={`${styles.buttonColors} ${styles.pink} `}></label>
77+
78+
79+
{/*
80+
Mudei para inputs a seleção de cor do personagem com inputs
5981
<div className={`${styles.color} ${styles.black}`}></div>
6082
<div className={`${styles.color} ${styles.green}`}></div>
6183
<div className={`${styles.color} ${styles.yellow}`}></div>
6284
<div className={`${styles.color} ${styles.orange}`}></div>
6385
<div className={`${styles.color} ${styles.red}`}></div>
6486
<div className={`${styles.color} ${styles.pink}`}></div>
87+
*/}
6588
</div>
6689
</div>
6790

6891
<div className={styles.previewArea}>
6992
<label>PREVIEW DA FICHA</label>
93+
{/*
7094
<div className={styles.previewInput}>
7195
<input
7296
type='text'
@@ -75,25 +99,36 @@ export default function CreateCharacter() {
7599
placeholder='Digite a preview'
76100
/>
77101
</div>
102+
*/}
78103

79104
<div className={styles.imagePlaceholder}>
80105
<Image src='/character-sheet.svg' alt='Preview' width={50} height={50} />
81106
</div>
82107
</div>
83108

84109
<div className={styles.buttonArea}>
85-
<div className={styles.deleteUploadButton}>
110+
<button type='button' className={styles.iconClickable}>
86111
<Image
87112
src='/trash.svg'
88113
alt='Excluir'
89-
width={26}
90-
height={26}
114+
width={28}
115+
height={28}
91116
onClick={handleReset}
92-
className={styles.iconClickable}
117+
93118
/>
119+
</button>
120+
121+
<button type='button' className={styles.iconClickable}>
122+
<Image
123+
src='/upload.svg'
124+
alt='Upload'
125+
width={24}
126+
height={24}
127+
128+
/>
129+
</button>
94130

95-
<Image src='/upload.svg' alt='Upload' width={26} height={26} className={styles.uploadIcon} />
96-
</div>
131+
97132
</div>
98133
</div>
99134

0 commit comments

Comments
 (0)