From 8dc346a3731b421b95b79678330f531add55ced6 Mon Sep 17 00:00:00 2001
From: Haftamu Kebede <haftamu.k@gmail.com>
Date: Tue, 12 May 2026 23:20:48 +0300
Subject: [PATCH] feat:  Loop over configured colors to ensure all adjacent
 grade segments have different background colors

    This solution involves looping over hardcoded five color options to ensure all grade segments in Studio
    have a different background color when configuring grade settings for a course. This is a solution for
    option-1 in issue #507.

    A similar approach is used in Legacy Studio, implementation available in https://github.com/openedx/openedx-platform/pull/32406,
    but the implementation was dropped when migrating to authoring MFE.
---
 .../grading-scale/components/GradingScaleSegment.tsx            | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/grading-settings/grading-scale/components/GradingScaleSegment.tsx b/src/grading-settings/grading-scale/components/GradingScaleSegment.tsx
index 95d95b781a..65ec61fa0f 100644
--- a/src/grading-settings/grading-scale/components/GradingScaleSegment.tsx
+++ b/src/grading-settings/grading-scale/components/GradingScaleSegment.tsx
@@ -35,7 +35,7 @@ const GradingScaleSegment = ({
   return (
     <div
       key={value}
-      className={`grading-scale-segment segment-${idx - 1}`}
+      className={`grading-scale-segment segment-${(idx - 1)%5}`}
       data-testid="grading-scale-segment"
       {...getSegmentProps()}
     >