Skip to content

Commit c6d885b

Browse files
authored
Merge pull request #13 from SyncfusionExamples/EJ2-afterUxFix
932509: Need to change the attractive ui for employee management application
2 parents c1f16b1 + d2d7393 commit c6d885b

File tree

2 files changed

+24
-10
lines changed

2 files changed

+24
-10
lines changed

Employee_Managment_App/src/components/EmployeePayRoll.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -300,7 +300,7 @@ const EmployeePayRoll = (props: { employeeData: EmployeeDetails }) => {
300300
field="Item"
301301
headerText="Item"
302302
template={itemTemplate}
303-
width="170"
303+
width="190"
304304
></ColumnDirective>
305305
<ColumnDirective
306306
field="Total"

Employee_Managment_App/src/index.css

Lines changed: 23 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,15 @@
2222
height: 650px;
2323
}
2424

25+
.xyz-management-content .col-md-2.sidebar .title {
26+
font-size: 1.2em;
27+
text-align: center;
28+
color: #2a2a72;
29+
font-weight: bolder;
30+
margin-bottom: 30px;
31+
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
32+
}
33+
2534
.xyz-management-content .col-md-2.sidebar {
2635
width: 240px;
2736
background-color: #ffffff;
@@ -92,15 +101,14 @@ color: #3a3b3c;
92101
text-decoration: none;
93102
transition: background-color 0.3s ease, color 0.3s ease;
94103
font-weight: 500;
95-
margin-left: 10px;
104+
text-align: left;
96105
}
97106

98107
.nav > li > a:focus,
99108
.nav > li > a.active,
100109
.nav > li > a:hover {
101110
text-decoration: none;
102-
background-color: #f0f2f5;
103-
color: #007bff;
111+
background-color: #D9E9FF;
104112
}
105113
.policiespage a:focus,
106114
.policiespage a.active,
@@ -141,7 +149,6 @@ margin-left: 10px;
141149
.employeeinfopage .overview-header {
142150
padding: 20px;
143151
border-bottom: 1px solid rgb(0, 0, 0, 0.2);
144-
box-shadow: 0 6px 6px rgba(0, 0, 0, 0.07);
145152
}
146153

147154
a.employee-popover:hover {
@@ -150,6 +157,9 @@ a.employee-popover:hover {
150157
.tab-content {
151158
padding: 20px 10px 20px 10px;
152159
}
160+
.xyz-management-content .e-tab-header {
161+
box-shadow: 0 6px 6px rgba(0, 0, 0, 0.07);
162+
}
153163

154164
/* Tooltip */
155165

@@ -220,6 +230,10 @@ a.employee-popover:hover {
220230
padding: 0 0 20px 0;
221231
}
222232

233+
.employeeLeave-header span {
234+
margin: 0px 5px
235+
}
236+
223237
.leaveinfo {
224238
color: rgba(0, 0, 0, 0.87);
225239
}
@@ -261,7 +275,7 @@ a.employee-popover:hover {
261275
}
262276

263277
td.cardcell {
264-
padding: 4px 0;
278+
padding: 4px 0 10px 0;
265279
}
266280

267281
td.cardcell.separateline {
@@ -299,21 +313,21 @@ td.cardcell.separateline {
299313
color: #006400;
300314
}
301315
.statustemp.needtoapprove {
302-
background-color: #ffd7cc;
316+
background-color: #df2222;
303317
width: 120px;
304318
}
305319

306320
.statustemp.closed {
307-
background-color: #ccffcc;
321+
background-color: #00b300;
308322
width: 54px;
309323
}
310324

311325
.statustxt.closed {
312-
color: #00cc00;
326+
color: white;
313327
}
314328

315329
.statustxt.needtoapprove {
316-
color: #e60000;
330+
color: white;
317331
}
318332

319333
.statustemp {

0 commit comments

Comments
 (0)