Merge pull request #30 from SyncfusionExamples/EJ2-1000021-IssueFix

1000021: Fixing issues in Employee Management

Author: BalajiSGrid

Employee_Managment_App/src/components/Announcement.css

@@ -8,7 +8,11 @@
   --annc-backdrop: rgba(2,6,23,0.35);
   --annc-elev: 0 8px 20px rgba(2, 6, 23, 0.06);
   --annc-panel-width: 380px;
-}
+
+  --color-sf-icon-color: #6b7280;
+  --color-sf-secondary-border-color-hover: #d1d5db;
+  --color-sf-secondary-bg-color-hover: rgba(158, 158, 158, 0.2);
+  --color-sf-content-text-color: #111827;
 
 /* Backdrop area that starts below the top bar (top offset applied inline) */
 .annc-panel-backdrop {
@@ -157,8 +161,8 @@
   opacity: 0.75;
 }
 .annc-panel-item:hover {
-  background: #f8fffb;
-  border-color: #e8f7f1;
+    background: var(--color-sf-secondary-bg-color-hover);
+    color: var(--color-sf-content-text-color);
 }
 .annc-panel-item.is-unread:hover {
   background: #ecfdf5;

Employee_Managment_App/src/components/Policies.css

@@ -18,6 +18,7 @@
   --text-muted: #667085;
   --text-soft: #475467;
 
+
   --surface: #ffffff;
   --surface-subtle: #fafbfc;
 
@@ -27,6 +28,9 @@
   --shadow-xs: 0 1px 2px rgba(16, 24, 40, .06);
   --shadow-sm: 0 2px 8px rgba(16, 24, 40, .08);
   --shadow-md: 0 6px 18px rgba(16, 24, 40, .10);
+
+  --color-sf-primary-bg-color: #1ab394;
+  --color-sf-primary-border-color: #1ab394;
 }
 
 .policies-grid-wrapper {
@@ -147,9 +151,8 @@
 }
 
 .filter-chip:hover {
-  background: var(--primary-50);
-  border-color: var(--primary-100);
-  transform: translateY(-1px);
+  border-color: var(--text-muted);
+
 }
 
 .filter-chip.is-active {
@@ -355,12 +358,25 @@
 
 .policies-grid-wrapper .e-grid .e-pager .e-currentitem,
 .policies-grid-wrapper .e-grid .e-pager .e-currentitem:hover {
-  background: #1ab394;
-  border-color:#1ab394;
-  color: #fff;
+  background: var(--color-sf-primary-bg-color);
+  border-color: var(--color-sf-primary-border-color);
+  color: --surface;
+}
+
+.policies-grid-wrapper .e-grid .e-pager .e-numericitem:active {
+  background: var(--color-sf-primary-bg-color);
+  border-color: var(--color-sf-primary-border-color);
+
 }
 
-.policies-grid-wrapper .e-grid .e-pager .e-numericitem:hover {
+/* Keep hover color for non-active pages only */
+.policies-grid-wrapper .e-grid .e-pager .e-numericitem:not(.e-currentitem):hover {
   background: var(--primary-50);
   color: var(--primary-900);
-}
+}
+/* When hovering the active page, keep the active green */
+.policies-grid-wrapper .e-grid .e-pager .e-numericitem.e-currentitem:hover {
+  background: var(--color-sf-primary-bg-color);
+  border-color: var(--color-sf-primary-border-color);
+  color: --surface;
+}

Employee_Managment_App/src/components/TopNav.css

@@ -40,6 +40,11 @@
   --shadow-rest: 0 1px 2px rgba(0,0,0,.06);
   --shadow-focus: 0 6px 18px rgba(16, 185, 129, 0.16);
   --focus-ring: 0 0 0 4px rgba(16, 185, 129, 0.14);
+
+  --color-sf-icon-color: #6b7280;
+  --color-sf-secondary-border-color-hover: #d1d5db;
+  --color-sf-secondary-bg-color-hover:rgba(158, 158, 158, 0.2);
+  --color-sf-content-text-color: #111827;
 }
 
 /* Parallel fixed header */
@@ -237,9 +242,9 @@
 }
 
 .icon-btn:hover {
-  border-color: var(--accent-100);
-  background: var(--accent-50);
-  color: var(--accent-700);
+  border-color: var(--focus-ring);
+  background: transparent;
+  color: var(--color-sf-icon-color);
 }
 
 .icon-btn:active { transform: translateY(1px); }
@@ -307,8 +312,9 @@
 }
 
 .create-menu button:hover {
-  background: var(--accent-50);
-  color: var(--accent-700);
+  background: var(--color-sf-secondary-bg-color-hover);
+  border-color: var(--color-sf-content-text-color);
+  color: var(--color-sf-content-text-color);
 }
 
 /* Badge */
@@ -358,9 +364,9 @@
 }
 
 .topnav-avatar:hover {
-  border-color: var(--accent-100);
-  background: var(--accent-50);
-  color: var(--accent-700);
+  border-color: var(--focus-ring);
+  background: transparent;
+  color: var(--color-sf-icon-color);
 }
 
 .topnav-avatar-menu {