fix(#18495): Add Alternate color of resources in sync panel (#19250)

* add Alternate color of resources in sync panel

Co-authored-by: Xu Yan <Yan.Xu@fmr.com>
Co-authored-by: Jessie Teng <jessie.teng@fmr.com>
Signed-off-by: Xu, Yan <Yan.Xu@fmr.com>

* format code

Signed-off-by: Xu, Yan <Yan.Xu@fmr.com>

* update style based on maintainer's feedback

Signed-off-by: Jessie Teng <jessie.teng@fmr.com>

* Add these styles to prevent overflow

Signed-off-by: Xu, Yan <Yan.Xu@fmr.com>

* add style base on maintainer feedback

Signed-off-by: Xu, Yan <Yan.Xu@fmr.com>

---------

Signed-off-by: Xu, Yan <Yan.Xu@fmr.com>
Signed-off-by: Jessie Teng <jessie.teng@fmr.com>
Co-authored-by: Jessie Teng <jessie.teng@fmr.com>

ui/src/app/applications/components/application-sync-panel/application-sync-panel.scss

@@ -1,13 +1,28 @@
+@import 'node_modules/argo-ui/src/styles/config';
+
 .application-sync-panel__resource {
     margin-top: 0.5em;
     white-space: nowrap;
 
+    &:nth-of-type(odd) {
+        background: $argo-color-gray-3;
+
+        .theme-dark & {
+            background: $argo-color-gray-6;
+        }
+    }
+
+    &:nth-of-type(odd) {
+        background: #e0e0e0;
+    }
+
     .container {
-        max-width: 32em;
+        max-width: 30em;
         white-space: nowrap;
         display: inline-block;
         margin-right: 0.3em;
 
+
         label {
             cursor: pointer;
         }
@@ -32,4 +47,4 @@
             direction: rtl; // This is to help put the ellipsis in the middle instead of at the end of the resource path
         }
     }
-}
+}