Skip to content

Commit c810d5e

Browse files
itsmohmansitsmohmans
authored
Fix profile edit icons style (#196)
* fix: edit button styles * refactor: education and experience edit and delete buttons * fix: add new education / experience no working and refactor the add toggle
1 parent 83fe4e9 commit c810d5e

File tree

5 files changed

+72
-80
lines changed

5 files changed

+72
-80
lines changed

‎assets/css/global.css‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -146,12 +146,10 @@ ul > li {
146146
font-weight: 500;
147147
}
148148

149-
.delete-btn,
150-
.edit-btn {
151-
@apply bg-trashIcon bg-no-repeat w-5 h-5 border-none;
152-
@apply p-4 border-r-0 ml-2;
149+
.delete-btn {
150+
@apply cursor-pointer bg-trashIcon bg-no-repeat bg-contain w-4 h-4 border-none;
153151
}
154152

155153
.edit-btn {
156-
@apply bg-editIcon;
154+
@apply cursor-pointer bg-contain w-4 h-4 bg-no-repeat;
157155
}

‎components/member/Banner.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,7 @@
124124
<div
125125
v-if="memberAuth"
126126
@click="() => (showUpdateInfoForm = !showUpdateInfoForm)"
127-
class="cursor-pointer bg-contain w-4 h-4 bg-no-repeat"
127+
class="edit-btn"
128128
:class="showUpdateInfoForm ? 'bg-xIcon' : 'bg-editIcon'"
129129
></div>
130130
</div>

‎components/member/Details.vue‎

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -23,15 +23,11 @@
2323
:permissionStatus="state.settings.about"
2424
targetSettings="about"
2525
/>
26-
<div @click="() => (showUpdateAboutForm = !showUpdateAboutForm)">
27-
<img
28-
v-if="!showUpdateAboutForm"
29-
src="/icons/edit.svg"
30-
alt=""
31-
class="cursor-pointer"
32-
/>
33-
<img v-else src="/icons/x.svg" alt="" class="cursor-pointer" />
34-
</div>
26+
<div
27+
class="edit-btn"
28+
:class="showUpdateAboutForm ? 'bg-xIcon' : 'bg-editIcon'"
29+
@click="() => (showUpdateAboutForm = !showUpdateAboutForm)"
30+
></div>
3531
</div>
3632
</div>
3733
<div v-if="!showUpdateAboutForm">

‎components/member/Experience.vue‎

Lines changed: 62 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -30,21 +30,16 @@
3030
<h3 class="heading">Work Experience</h3>
3131
<div
3232
v-if="memberAuth"
33+
class="cursor-pointer bg-contain w-5 h-5 bg-no-repeat"
34+
:class="showAddWorkExperienceForm ? 'bg-xIcon' : 'bg-addIcon'"
3335
@click="
3436
() => {
35-
showAddWorkExperienceForm = true
37+
showAddWorkExperienceForm = !showAddWorkExperienceForm
3638
showUpdateWorkExperienceForm = false
3739
state.form.workExperience = { ...defaultWorkExperience }
3840
}
3941
"
4042
>
41-
<img
42-
v-if="!showAddWorkExperienceForm"
43-
src="/icons/add.svg"
44-
alt=""
45-
class="cursor-pointer"
46-
/>
47-
<img v-else src="/icons/x.svg" alt="" class="cursor-pointer" />
4843
</div>
4944
</div>
5045
<ul v-if="props.experience.length">
@@ -58,38 +53,41 @@
5853
<h4 class="title">{{ experience.company_name }}</h4>
5954
<h5 class="sub-title">{{ experience.position }}</h5>
6055
</div>
61-
<p class="date-container">
62-
{{ formatDate(experience.start_date) }} &ndash;
63-
{{
64-
experience.end_date
65-
? formatDate(experience.end_date)
66-
: 'Current'
67-
}}
68-
</p>
69-
<div class="flex justify-end mt-4 md:mt-0">
70-
<!-- Delete Work Experience Form -->
71-
<div v-if="memberAuth">
72-
<form @submit.prevent="deleteMemberWorkExperience">
56+
<div class="w-full flex flex-row justify-between">
57+
<p class="date-container">
58+
{{ formatDate(experience.start_date) }} &ndash;
59+
{{
60+
experience.end_date
61+
? formatDate(experience.end_date)
62+
: 'Current'
63+
}}
64+
</p>
65+
<div
66+
v-if="memberAuth"
67+
class="flex flex-row justify-around gap-x-2 m-2"
68+
>
69+
<!-- Delete Work Experience Form -->
70+
<form
71+
class="inline-flex w-4 h-4"
72+
@submit.prevent="deleteMemberWorkExperience">
7373
<input
7474
type="hidden"
7575
name="experienceId"
7676
:value="experience.id"
7777
/>
7878
<FormAppButton btnStyle="delete-btn"></FormAppButton>
7979
</form>
80-
</div>
81-
<!-- Update Work Experience Form Trigger -->
82-
<div
83-
v-if="memberAuth"
84-
@click="
85-
() => {
86-
showUpdateWorkExperienceForm = true
87-
showAddWorkExperienceForm = false
88-
state.form.workExperience = { ...experience }
89-
}
90-
"
91-
>
92-
<img src="/icons/edit.svg" alt="" class="cursor-pointer" />
80+
<!-- Update Work Experience Form Trigger -->
81+
<div
82+
class="edit-btn bg-editIcon"
83+
@click="
84+
() => {
85+
showUpdateWorkExperienceForm = true
86+
showAddWorkExperienceForm = false
87+
state.form.workExperience = { ...experience }
88+
}
89+
"
90+
></div>
9391
</div>
9492
</div>
9593
</div>
@@ -223,21 +221,16 @@
223221
<h3 class="heading">Education</h3>
224222
<div
225223
v-if="memberAuth"
224+
class="cursor-pointer bg-contain w-5 h-5 bg-no-repeat"
225+
:class="showAddEducationForm ? 'bg-xIcon' : 'bg-addIcon'"
226226
@click="
227227
() => {
228-
showAddEducationForm = true
228+
showAddEducationForm = !showAddEducationForm
229229
showUpdateEducationForm = false
230230
state.form.education = { ...defaultEducation }
231231
}
232232
"
233233
>
234-
<img
235-
v-if="!showAddEducationForm"
236-
src="/icons/add.svg"
237-
alt=""
238-
class="cursor-pointer"
239-
/>
240-
<img v-else src="/icons/x.svg" alt="" class="cursor-pointer" />
241234
</div>
242235
</div>
243236
<ul v-if="props.education.length">
@@ -251,37 +244,41 @@
251244
<h4 class="title">{{ education.institution_name }}</h4>
252245
<h5 class="sub-title">{{ education.degree }}</h5>
253246
</div>
254-
<p class="date-container">
255-
{{
256-
education.graduated
257-
? formatDate(education.graduated)
258-
: 'Current'
259-
}}
260-
</p>
261-
<div class="flex justify-end mt-4 md:mt-0">
262-
<!-- Delete Education Form Button -->
263-
<div v-if="memberAuth">
264-
<form @submit.prevent="deleteMemberEducation">
247+
<div class="w-full flex flex-row justify-between">
248+
<p class="date-container">
249+
{{
250+
education.graduated
251+
? formatDate(education.graduated)
252+
: 'Current'
253+
}}
254+
</p>
255+
<div
256+
v-if="memberAuth"
257+
class="flex flex-row justify-around gap-x-2 m-2"
258+
>
259+
<!-- Delete Education Form Button -->
260+
<form
261+
class="inline-flex w-4 h-4"
262+
@submit.prevent="deleteMemberEducation"
263+
>
265264
<input
266265
type="hidden"
267266
name="educationId"
268267
:value="education.id"
269268
/>
270269
<FormAppButton btnStyle="delete-btn"></FormAppButton>
271270
</form>
272-
</div>
273-
<!-- Update Education trigger -->
274-
<div
275-
v-if="memberAuth"
276-
@click="
277-
() => {
278-
showUpdateEducationForm = true
279-
showAddEducationForm = false
280-
state.form.education = { ...education }
281-
}
282-
"
283-
>
284-
<img src="/icons/edit.svg" alt="" class="cursor-pointer" />
271+
<!-- Update Education trigger -->
272+
<div
273+
@click="
274+
() => {
275+
showUpdateEducationForm = true
276+
showAddEducationForm = false
277+
state.form.education = { ...education }
278+
}
279+
"
280+
class="edit-btn bg-editIcon"
281+
></div>
285282
</div>
286283
</div>
287284
</div>

‎tailwind.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,7 @@ module.exports = {
9999
'editIconWhite': "url('/icons/edit-white.svg')",
100100
'trashIcon': "url('/icons/delete.svg')",
101101
'xIcon': "url('/icons/x.svg')",
102+
'addIcon': "url('/icons/add.svg')",
102103
}
103104
},
104105
},

0 commit comments

Comments
 (0)