Skip to content

Commit 0d7cf16

Browse files
TamilRamGanesan-SF5080TamilRamGanesan-SF5080
committed
1009504: addressed the latest concerns in Employee management
1 parent 6f7a152 commit 0d7cf16

10 files changed

Lines changed: 143 additions & 91 deletions

File tree

‎Employee_Managment_App/src/App.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@
5757
padding: calc(var(--header-h) + 16px) 0 0;
5858
min-height: 100vh;
5959
box-sizing: border-box;
60-
background: rgb(255, 255, 255);
60+
background: #f3f3f4;
6161
transition: margin-left 220ms ease;
6262
padding-top: 50px;
6363
}

‎Employee_Managment_App/src/components/Announcement.css‎

Lines changed: 51 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,7 @@
77
--annc-muted: #64748b;
88
--annc-backdrop: rgba(2,6,23,0.35);
99
--annc-elev: 0 8px 20px rgba(2, 6, 23, 0.06);
10-
--annc-panel-width: 380px;
11-
10+
--annc-panel-width: 309px;
1211
--color-sf-icon-color: #6b7280;
1312
--color-sf-secondary-border-color-hover: #d1d5db;
1413
--color-sf-secondary-bg-color-hover: rgba(158, 158, 158, 0.2);
@@ -59,22 +58,21 @@
5958
color: #fff;
6059
}
6160
.annc-panel-title {
62-
font-weight: 700;
63-
letter-spacing: .2px;
61+
font-size: 20px;
62+
font-weight: 400;
63+
font-family: 'Roboto', sans-serif;
64+
letter-spacing: .1px;
6465
}
6566
.annc-panel-close {
66-
background: rgba(255,255,255,0.18);
67-
border: 1px solid rgba(255,255,255,0.35);
68-
color: #fff;
69-
width: 28px;
70-
height: 28px;
71-
border-radius: 8px;
72-
display: inline-flex;
73-
align-items: center;
74-
justify-content: center;
67+
color: #fff !important;
7568
cursor: pointer;
69+
border: none !important;
70+
}
71+
.annc-panel-close:hover
72+
{
73+
background: transparent !important;
74+
border: none !important;
7675
}
77-
.annc-panel-close:hover { background: rgba(255,255,255,0.28); }
7876

7977
/* Tabs */
8078
.annc-panel-tabs {
@@ -111,17 +109,22 @@
111109
display: flex;
112110
align-items: center;
113111
justify-content: space-between;
114-
padding: 8px 12px;
112+
margin-left: 7px;
115113
color: var(--annc-muted);
116-
font-size: 13px;
114+
font-size: 10px;
117115
}
118116
.annc-panel-cta {
119-
background: transparent;
120-
border: none;
121-
color: var(--annc-theme);
122-
font-weight: 600;
117+
background: transparent ;
118+
border: none !important;
119+
color: blue !important;
120+
font-size: 10px;
123121
cursor: pointer;
124122
}
123+
.annc-panel-cta:hover {
124+
border: none !important;
125+
background: transparent !important;
126+
color: gray !important;
127+
}
125128
/* Disabled state for Syncfusion button */
126129
.annc-panel-cta.e-disabled,
127130
.annc-panel-cta[disabled] {
@@ -132,7 +135,6 @@
132135

133136
/* Content */
134137
.annc-panel-content {
135-
padding: 6px 6px 10px 6px;
136138
overflow: auto;
137139
height: 100%;
138140
}
@@ -153,27 +155,29 @@
153155
grid-template-columns: 36px 1fr 20px;
154156
gap: 10px;
155157
padding: 10px 8px;
156-
border-radius: 12px;
157158
border: 1px solid transparent;
158159
transition: background 160ms ease, border-color 160ms ease, opacity 160ms ease;
159160
position: relative;
160161
}
161162
.annc-panel-item.is-unread {
162-
margin-bottom: 5px;
163+
border-bottom: 0.5px solid rgba(235, 232, 232, 0.87);
163164
padding: 6px;
164-
background: #f0fdf9;
165-
border-color: #d1fae5;
165+
background: transparent;
166+
border-color: transparent;
167+
/* left indicator bar for unread items */
168+
border-left: 6px solid #f8ac59;
169+
padding-left: 10px; /* give content some space from the indicator */
166170
}
167171
.annc-panel-item.is-read {
168-
margin-bottom: 5px;
169172
padding: 6px;
173+
border-bottom: 0.5px solid rgba(235, 232, 232, 0.87);
170174
}
171175
.annc-panel-item:hover {
172176
background: var(--color-sf-secondary-bg-color-hover);
173177
color: var(--color-sf-content-text-color);
174178
}
175179
.annc-panel-item.is-unread:hover {
176-
background: #ecfdf5;
180+
background: #f1eded;
177181
}
178182
.unread-indicator {
179183
width: 8px;
@@ -184,6 +188,10 @@
184188
justify-self: end;
185189
margin-right: 4px;
186190
}
191+
/* hide the right-side unread dot when the item is marked unread (we use left bar) */
192+
.annc-panel-item.is-unread .unread-indicator {
193+
display: none;
194+
}
187195
.annc-item-icon {
188196
width: 36px;
189197
height: 36px;
@@ -198,32 +206,40 @@
198206
.annc-item-body { min-width: 0; }
199207
.annc-item-title {
200208
color: var(--annc-text);
201-
font-weight: 600;
202-
font-size: 14px;
209+
font-weight: 500;
210+
font-size: 13px;
203211
line-height: 1.25;
212+
font-family: 'Roboto', sans-serif;
204213
overflow: hidden;
205214
text-overflow: ellipsis;
206215
white-space: nowrap;
207216
}
208217
.annc-item-title.unread {
209-
font-weight: 700;
218+
font-weight: 500;
210219
color: var(--annc-text);
211220
}
212221
.annc-item-title.read {
213222
font-weight: 500;
214223
color: #94a3b8;
215224
}
216225
.annc-item-meta {
217-
margin-top: 2px;
218-
font-size: 12px;
219-
color: var(--annc-muted);
226+
display: flex;
227+
flex-direction: column;
228+
/* margin-top: 2px; */
229+
font-size: 11px;
230+
color: rgba(0, 0, 0, 0.87);
220231
}
221232
.annc-item-meta .meta + .meta.dot::before {
222-
content: '•';
223233
margin: 0 6px;
224234
color: #cbd5e1;
225235
}
226-
236+
.meta.dot{
237+
color: rgb(128, 128, 128);
238+
}
239+
/* Color for unread meta items (e.g., date/label) */
240+
.annc-panel-item.is-unread .meta.meta-unread {
241+
color: #f8ac59;
242+
}
227243
@media (max-width: 480px) {
228244
:root { --annc-panel-width: 100%; }
229245
}

‎Employee_Managment_App/src/components/Announcement.tsx‎

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -130,37 +130,33 @@ export const AnnouncementPanel: React.FC<AnnouncementPanelProps> = ({
130130
<div className="annc-panel-header">
131131
<div className="annc-panel-title">Notification</div>
132132
<ButtonComponent
133-
className="annc-panel-close"
133+
className="annc-panel-close e-flat e-btn"
134134
cssClass="annc-panel-close"
135135
type="button"
136+
iconCss='e-icons e-close'
136137
aria-label="Close"
137138
onClick={onClose}
138139
title="Close"
139140
>
140-
<svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true">
141-
<path
142-
fill="currentColor"
143-
d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
144-
/>
145-
</svg>
146141
</ButtonComponent>
147142
</div>
148143

149144
<div className="annc-panel-tabs" role="tablist" aria-label="Notification categories">
150-
<button role="tab" aria-selected={tab === 'notifications'} className={tab === 'notifications' ? 'active e-icons e-multiple-comment' : 'e-icons e-multiple-comment'} onClick={() => setActiveTab('notifications')} title="Notifications">
145+
<button role="tab" aria-selected={tab === 'notifications'} className={tab === 'notifications' ? 'active side-icon e-icons e-multiple-comment' : 'e-icons e-multiple-comment'} onClick={() => setActiveTab('notifications')} title="Notifications">
151146
</button>
152-
<button role="tab" aria-selected={tab === 'announcements'} className={tab === 'announcements' ? 'active e-icons e-audio' : 'e-icons e-audio'} onClick={() => setActiveTab('announcements')} title="Announcements">
147+
<button role="tab" aria-selected={tab === 'announcements'} className={tab === 'announcements' ? 'active side-icon e-icons e-audio' : 'e-icons e-audio'} onClick={() => setActiveTab('announcements')} title="Announcements">
153148
</button>
154149
</div>
155150

156151
<div className="annc-panel-subhead">
157152
{tab === 'notifications' ? (
158153
<span>Notifications for the last 15 days</span>
159154
) : (
160-
<span>Announcements</span>
155+
<span>Notifications for the last 15 days</span>
161156
)}
162157
<ButtonComponent
163158
cssClass="annc-panel-cta"
159+
className='e-btn e-flat'
164160
type="button"
165161
disabled={!items.some((it) => !it.read)}
166162
onClick={handleMarkAllRead}
@@ -189,7 +185,7 @@ export const AnnouncementPanel: React.FC<AnnouncementPanelProps> = ({
189185
<div className={`annc-item-title ${!it.read ? 'unread' : ''}`}>{it.title}</div>
190186
{(it.subtitle || it.date) && (
191187
<div className="annc-item-meta">
192-
{it.subtitle && <span className="meta">{it.subtitle}</span>}
188+
{it.subtitle && <span className="meta-unread meta">{it.subtitle}</span>}
193189
{it.date && <span className="meta dot">{it.date}</span>}
194190
</div>
195191
)}

‎Employee_Managment_App/src/components/AnnouncementDetailDialog.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -77,11 +77,15 @@ export const AnnouncementDetailDialog: React.FC<AnnouncementDetailDialogProps> =
7777

7878
// Details to show inside the card (Title and Reference ID removed)
7979
const detailsRows: { key: string; label: string; value?: React.ReactNode }[] = [
80-
{ key: 'subtitle', label: 'Subtitle', value: item?.subtitle || '-' },
80+
{
81+
key: 'subtitle',
82+
label: item?.type === 'message' ? 'Category' : 'Department',
83+
value: item?.subtitle || '-',
84+
},
8185
{
8286
key: 'type',
8387
label: 'Type',
84-
value: <span className={`type-badge ${item?.type || 'announcement'}`}>{label}</span>,
88+
value: <span className={`${item?.type || 'announcement'}`}>{label}</span>,
8589
},
8690
{ key: 'date', label: 'Date', value: item?.date || '-' },
8791
{

‎Employee_Managment_App/src/components/AnnouncementDialog.css‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@
6161
.annc-dlg-title {
6262
color: var(--annc-text);
6363
font-weight: 800;
64-
font-size: 18px;
64+
font-size: 17px;
6565
line-height: 1.3;
6666
overflow: hidden;
6767
text-overflow: ellipsis;
@@ -111,7 +111,7 @@
111111
row-gap: 4px;
112112
}
113113
.annc-dlg-details_label {
114-
font-size: 11px;
114+
font-size: 13px;
115115
color: var(--annc-muted);
116116
text-transform: uppercase;
117117
letter-spacing: .25px;
@@ -122,26 +122,25 @@
122122
text-overflow: ellipsis;
123123
}
124124
.annc-dlg-details_value {
125-
font-size: 14px;
126-
font-weight: 500;
127-
color: var(--annc-text);
125+
font-size: 13px;
126+
color: rgb(53, 53, 53);
128127
min-width: 0;
129128
overflow: hidden;
130129
text-overflow: ellipsis;
131130
white-space: nowrap;
132131
}
133132
.annc-dlg-section { margin-top: 6px; }
134133
.annc-dlg-section_title {
135-
font-size: 12px;
134+
font-size: 13px;
136135
color: var(--annc-muted);
137136
text-transform: uppercase;
138137
letter-spacing: .3px;
139138
font-weight: 800;
140139
margin-bottom: 8px;
141140
}
142141
.annc-dlg-paragraph {
143-
color: var(--annc-text);
144-
font-size: 15px;
142+
color: rgb(53, 53, 53);
143+
font-size: 13px;
145144
line-height: 1.7;
146145
margin: 0;
147146
white-space: pre-wrap;

‎Employee_Managment_App/src/components/EmployeePayStub.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -157,7 +157,6 @@ const EmployeePayStub = (props: { employeeData: EmployeeDetails }) => {
157157
};
158158

159159
const paystubChange = (args: ChangeEventArgs): void => {
160-
debugger;
161160
let showCols: string[] = [(args.itemData as { field: string; headerText: string }).headerText];
162161
setSelectedValue(`${showCols} ${currentYear}`);
163162
let hideCols: string[] = [];

0 commit comments

Comments
 (0)