1009504: updated latest concerns in employee management Application

Employee_Managment_App/src/App.css

@@ -57,7 +57,7 @@
   padding: calc(var(--header-h) + 16px) 0 0;
   min-height: 100vh;
   box-sizing: border-box;
-  background: rgb(255, 255, 255);
+  background: #f3f3f4;
   transition: margin-left 220ms ease;
   padding-top: 50px;
 }

Employee_Managment_App/src/components/Announcement.css

@@ -7,8 +7,7 @@
   --annc-muted: #64748b;
   --annc-backdrop: rgba(2,6,23,0.35);
   --annc-elev: 0 8px 20px rgba(2, 6, 23, 0.06);
-  --annc-panel-width: 380px;
-
+  --annc-panel-width: 309px;
   --color-sf-icon-color: #6b7280;
   --color-sf-secondary-border-color-hover: #d1d5db;
   --color-sf-secondary-bg-color-hover: rgba(158, 158, 158, 0.2);
@@ -59,22 +58,21 @@
   color: #fff;
 }
 .annc-panel-title {
-  font-weight: 700;
-  letter-spacing: .2px;
+  font-size: 20px;
+  font-weight: 400;
+  font-family: 'Roboto', sans-serif;
+  letter-spacing: .1px;
 }
 .annc-panel-close {
-  background: rgba(255,255,255,0.18);
-  border: 1px solid rgba(255,255,255,0.35);
-  color: #fff;
-  width: 28px;
-  height: 28px;
-  border-radius: 8px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
+  color: #fff !important;
   cursor: pointer;
+  border: none !important;
+}
+.annc-panel-close:hover 
+{ 
+  background: transparent !important; 
+  border: none !important;
 }
-.annc-panel-close:hover { background: rgba(255,255,255,0.28); }
 
 /* Tabs */
 .annc-panel-tabs {
@@ -111,17 +109,22 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 8px 12px;
+  margin-left: 7px;
   color: var(--annc-muted);
-  font-size: 13px;
+  font-size: 10px;
 }
 .annc-panel-cta {
-  background: transparent;
-  border: none;
-  color: var(--annc-theme);
-  font-weight: 600;
+  background: transparent ;
+  border: none !important;
+  color: blue !important;
+  font-size: 10px;
   cursor: pointer;
 }
+.annc-panel-cta:hover {
+  border: none !important;
+  background: transparent !important;
+  color: gray !important;
+}
 /* Disabled state for Syncfusion button */
 .annc-panel-cta.e-disabled,
 .annc-panel-cta[disabled] {
@@ -132,7 +135,6 @@
 
 /* Content */
 .annc-panel-content {
-  padding: 6px 6px 10px 6px;
   overflow: auto;
   height: 100%;
 }
@@ -153,27 +155,29 @@
   grid-template-columns: 36px 1fr 20px;
   gap: 10px;
   padding: 10px 8px;
-  border-radius: 12px;
   border: 1px solid transparent;
   transition: background 160ms ease, border-color 160ms ease, opacity 160ms ease;
   position: relative;
 }
 .annc-panel-item.is-unread {
-  margin-bottom: 5px;
+  border-bottom: 0.5px solid rgba(235, 232, 232, 0.87);
   padding: 6px;
-  background: #f0fdf9;
-  border-color: #d1fae5;
+  background: transparent;
+  border-color: transparent;
+  /* left indicator bar for unread items */
+  border-left: 6px solid #f8ac59;
+  padding-left: 10px; /* give content some space from the indicator */
 }
 .annc-panel-item.is-read {
-  margin-bottom: 5px;
   padding: 6px;
+  border-bottom: 0.5px solid rgba(235, 232, 232, 0.87);
 }
 .annc-panel-item:hover {
     background: var(--color-sf-secondary-bg-color-hover);
     color: var(--color-sf-content-text-color);
 }
 .annc-panel-item.is-unread:hover {
-  background: #ecfdf5;
+  background: #f1eded;
 }
 .unread-indicator {
   width: 8px;
@@ -184,6 +188,10 @@
   justify-self: end;
   margin-right: 4px;
 }
+/* hide the right-side unread dot when the item is marked unread (we use left bar) */
+.annc-panel-item.is-unread .unread-indicator {
+  display: none;
+}
 .annc-item-icon {
   width: 36px;
   height: 36px;
@@ -198,32 +206,40 @@
 .annc-item-body { min-width: 0; }
 .annc-item-title {
   color: var(--annc-text);
-  font-weight: 600;
-  font-size: 14px;
+  font-weight: 500;
+  font-size: 13px;
   line-height: 1.25;
+  font-family: 'Roboto', sans-serif;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 .annc-item-title.unread {
-  font-weight: 700;
+  font-weight: 500;
   color: var(--annc-text);
 }
 .annc-item-title.read {
   font-weight: 500;
   color: #94a3b8;
 }
 .annc-item-meta {
-  margin-top: 2px;
-  font-size: 12px;
-  color: var(--annc-muted);
+  display: flex;
+  flex-direction: column;
+  /* margin-top: 2px; */
+  font-size: 11px;
+  color: rgba(0, 0, 0, 0.87);
 }
 .annc-item-meta .meta + .meta.dot::before {
-  content: '•';
   margin: 0 6px;
   color: #cbd5e1;
 }
-
+.meta.dot{
+  color: rgb(128, 128, 128);
+}
+/* Color for unread meta items (e.g., date/label) */
+.annc-panel-item.is-unread .meta.meta-unread {
+  color: #f8ac59;
+}
 @media (max-width: 480px) {
   :root { --annc-panel-width: 100%; }
 }

Employee_Managment_App/src/components/Announcement.tsx

@@ -130,37 +130,33 @@ export const AnnouncementPanel: React.FC<AnnouncementPanelProps> = ({
           <div className="annc-panel-header">
             <div className="annc-panel-title">Notification</div>
             <ButtonComponent
-              className="annc-panel-close"
+              className="annc-panel-close e-flat e-btn"
               cssClass="annc-panel-close"
               type="button"
+              iconCss='e-icons e-close'
               aria-label="Close"
               onClick={onClose}
               title="Close"
             >
-              <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true">
-                <path
-                  fill="currentColor"
-                  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"
-                />
-              </svg>
             </ButtonComponent>
           </div>
 
           <div className="annc-panel-tabs" role="tablist" aria-label="Notification categories">
-            <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">
+            <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">
             </button>
-            <button role="tab" aria-selected={tab === 'announcements'} className={tab === 'announcements' ? 'active e-icons e-audio' : 'e-icons e-audio'} onClick={() => setActiveTab('announcements')} title="Announcements">
+            <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">
             </button>
           </div>
 
           <div className="annc-panel-subhead">
             {tab === 'notifications' ? (
               <span>Notifications for the last 15 days</span>
             ) : (
-              <span>Announcements</span>
+              <span>Notifications for the last 15 days</span>
             )}
             <ButtonComponent
               cssClass="annc-panel-cta"
+              className='e-btn e-flat'
               type="button"
               disabled={!items.some((it) => !it.read)}
               onClick={handleMarkAllRead}
@@ -189,7 +185,7 @@ export const AnnouncementPanel: React.FC<AnnouncementPanelProps> = ({
                       <div className={`annc-item-title ${!it.read ? 'unread' : ''}`}>{it.title}</div>
                       {(it.subtitle || it.date) && (
                         <div className="annc-item-meta">
-                          {it.subtitle && <span className="meta">{it.subtitle}</span>}
+                          {it.subtitle && <span className="meta-unread meta">{it.subtitle}</span>}
                           {it.date && <span className="meta dot">{it.date}</span>}
                         </div>
                       )}

Employee_Managment_App/src/components/AnnouncementDetailDialog.tsx

@@ -77,11 +77,15 @@ export const AnnouncementDetailDialog: React.FC<AnnouncementDetailDialogProps> =
 
   // Details to show inside the card (Title and Reference ID removed)
   const detailsRows: { key: string; label: string; value?: React.ReactNode }[] = [
-    { key: 'subtitle', label: 'Subtitle', value: item?.subtitle || '-' },
+    {
+      key: 'subtitle',
+      label: item?.type === 'message' ? 'Category' : 'Department',
+      value: item?.subtitle || '-',
+    },
     {
       key: 'type',
       label: 'Type',
-      value: <span className={`type-badge ${item?.type || 'announcement'}`}>{label}</span>,
+      value: <span className={`${item?.type || 'announcement'}`}>{label}</span>,
     },
     { key: 'date', label: 'Date', value: item?.date || '-' },
     {

Employee_Managment_App/src/components/AnnouncementDialog.css

@@ -61,7 +61,7 @@
 .annc-dlg-title {
   color: var(--annc-text);
   font-weight: 800;
-  font-size: 18px;
+  font-size: 17px;
   line-height: 1.3;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -111,7 +111,7 @@
   row-gap: 4px;
 }
 .annc-dlg-details_label {
-  font-size: 11px;
+  font-size: 13px;
   color: var(--annc-muted);
   text-transform: uppercase;
   letter-spacing: .25px;
@@ -122,26 +122,25 @@
   text-overflow: ellipsis;
 }
 .annc-dlg-details_value {
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--annc-text);
+  font-size: 13px;
+  color: rgb(53, 53, 53);
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 .annc-dlg-section { margin-top: 6px; }
 .annc-dlg-section_title {
-  font-size: 12px;
+  font-size: 13px;
   color: var(--annc-muted);
   text-transform: uppercase;
   letter-spacing: .3px;
   font-weight: 800;
   margin-bottom: 8px;
 }
 .annc-dlg-paragraph {
-  color: var(--annc-text);
-  font-size: 15px;
+  color: rgb(53, 53, 53);
+  font-size: 13px;
   line-height: 1.7;
   margin: 0;
   white-space: pre-wrap;

Employee_Managment_App/src/components/EmployeePayStub.tsx

@@ -157,7 +157,6 @@ const EmployeePayStub = (props: { employeeData: EmployeeDetails }) => {
   };
 
   const paystubChange = (args: ChangeEventArgs): void => {
-    debugger;
     let showCols: string[] = [(args.itemData as { field: string; headerText: string }).headerText];
     setSelectedValue(`${showCols} ${currentYear}`);
     let hideCols: string[] = [];