1000021: Fixed theme level issues

Author: VaseegaranSF4468

Employee_Managment_App/src/components/Announcement.css

@@ -9,14 +9,10 @@
   --annc-elev: 0 8px 20px rgba(2, 6, 23, 0.06);
   --annc-panel-width: 380px;
 
-
-    /* Accent (emerald) */
-  --accent: #10b981;
-  --accent-600: #059669;
-  --accent-700: #047857;
-  --accent-100: #d1fae5;
-  --accent-50: #ecfdf5;
-}
+  --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 {
@@ -153,8 +149,8 @@
   transition: background 160ms ease, border-color 160ms ease;
 }
 .annc-panel-item:hover {
-    background: var(--accent-50);
-    color: var(--accent-700);
+    background: var(--color-sf-secondary-bg-color-hover);
+    color: var(--color-sf-content-text-color);
 }
 .annc-item-icon {
   width: 36px;

Employee_Managment_App/src/components/Policies.css

@@ -18,6 +18,7 @@
   --text-muted: #667085;
   --text-soft: #475467;
 
+
   --surface: #ffffff;
   --surface-subtle: #fafbfc;
 
@@ -27,12 +28,13 @@
   --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 {
   padding: 28px 24px;
-  max-width: 1160px;
-  margin: 0 auto;
   color: var(--text-strong);
 }
 
@@ -90,6 +92,7 @@
   text-decoration: underline;
 }
 
+
 /* Section headers and Reset link */
 .section-header {
   display: flex;
@@ -148,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 {
@@ -183,44 +185,18 @@
   position: relative;
   display: inline-flex;
   align-items: center;
+  text-align: center;
   gap: 8px;
-  padding-left: 22px;
 }
 
 .filter-chip .filter-chip__label::before {
-  content: '🏷️';
   position: absolute;
   left: 0;
   top: 50%;
   transform: translateY(-52%);
   font-size: 14px;
 }
 
-.filter-chip-row .filter-chip:nth-child(1) .filter-chip__label::before {
-  content: '📚';
-}
-
-.filter-chip-row .filter-chip:nth-child(2) .filter-chip__label::before {
-  content: '🔒';
-}
-
-.filter-chip-row .filter-chip:nth-child(3) .filter-chip__label::before {
-  content: '🗓️';
-}
-
-.filter-chip-row .filter-chip:nth-child(4) .filter-chip__label::before {
-  content: '🧾';
-}
-
-.filter-chip-row .filter-chip:nth-child(5) .filter-chip__label::before {
-  content: '💻';
-}
-
-.filter-chip-row .filter-chip:nth-child(6) .filter-chip__label::before {
-  content: '👔';
-}
-
-/* Employment */
 
 /* Grid styling (unchanged core look from previous refresh) */
 .policy-name-cell {
@@ -307,14 +283,7 @@
   font-size: 16px;
 }
 
-/* Category pills in the grid */
-.policies-grid-wrapper .e-grid .e-rowcell[aria-label*="Category"] {
-  position: relative;
-  padding-left: 28px;
-}
-
 .policies-grid-wrapper .e-grid .e-rowcell[aria-label*="Category"]::before {
-  content: '🏷️';
   position: absolute;
   left: 8px;
   top: 50%;
@@ -323,40 +292,6 @@
   opacity: .95;
 }
 
-.policies-grid-wrapper .e-grid .e-rowcell[aria-label*="Security"]::before {
-  content: '🔒';
-}
-
-.policies-grid-wrapper .e-grid .e-rowcell[aria-label*="HR & Leave"]::before {
-  content: '🗓️';
-}
-
-.policies-grid-wrapper .e-grid .e-rowcell[aria-label*="Compliance"]::before {
-  content: '🧾';
-}
-
-.policies-grid-wrapper .e-grid .e-rowcell[aria-label*="IT & Devices"]::before {
-  content: '💻';
-}
-
-.policies-grid-wrapper .e-grid .e-rowcell[aria-label*="Employment"]::before {
-  content: '👔';
-}
-
-.policies-grid-wrapper .e-grid .e-rowcell[aria-label*="Code of Conduct"]::before {
-  content: '📜';
-}
-
-.policies-grid-wrapper .e-grid .e-rowcell[aria-label*="Category"]>span {
-  display: inline-block;
-  padding: 4px 10px 4px 8px;
-  border-radius: 999px;
-  border: 1px solid var(--border);
-  background: #f9fafb;
-  font-weight: 700;
-  color: #1f2937;
-}
-
 /* Dialog */
 .policy-dialog .e-dlg-header-content {
   border-bottom: 1px solid var(--border);
@@ -435,12 +370,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:hover {
+.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);
+
+}
+
+/* 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;
+}