chore(file-input): update animated loader-bar colour to match designs

Sage · Oct 23, 2023 · d838b94 · d838b94
1 parent 42ba78a
commit d838b94
Showing 1 changed file with 10 additions and 3 deletions.
diff --git a/src/components/file-input/__internal__/file-upload-status/file-upload-status.style.tsx b/src/components/file-input/__internal__/file-upload-status/file-upload-status.style.tsx
@@ -3,9 +3,12 @@ import StyledTypography from "../../../typography/typography.style";
 import StyledIcon from "../../../icon/icon.style";
 import {
   StyledProgressBar,
-  InnerBar,
+  InnerBar as ProgressTrackerInnerBar,
 } from "../../../progress-tracker/progress-tracker.style";
-import { StyledLoader } from "../../../loader-bar/loader-bar.style";
+import {
+  StyledLoader,
+  InnerBar as LoaderBarInnerBar,
+} from "../../../loader-bar/loader-bar.style";
 import { StyledLink } from "../../../link/link.style";
 
 export const StyledFileLinkContainer = styled.div`
@@ -71,12 +74,16 @@ export const StyledFileUploadStatus = styled.div<StyledFileUploadStatusProps>`
   border-radius: var(--borderRadius050);
   width: 100%;
 
-  ${StyledProgressBar}, ${InnerBar} {
+  ${StyledProgressBar}, ${ProgressTrackerInnerBar} {
     border-radius: var(--borderRadius050);
     border: none;
   }
 
   ${StyledLoader} {
     display: flex;
   }
+
+  ${LoaderBarInnerBar} {
+    background-color: var(--colorsSemanticNeutral500);
+  }
 `;