Fix mixed use of hex and rgba for colors

equinor · Nov 1, 2023 · f05f9e4 · f05f9e4
1 parent ad6e1cb
commit f05f9e4
Show file tree

Hide file tree

Showing 10 changed files with 24 additions and 24 deletions.
diff --git a/frontend/src/components/Pages/FrontPage/MissionOverview/MissionControlButtons.tsx b/frontend/src/components/Pages/FrontPage/MissionOverview/MissionControlButtons.tsx
@@ -45,7 +45,7 @@ export function MissionControlButtons({ mission }: MissionProps) {
                         >
                             <Icon
                                 name={Icons.PauseButton}
-                                style={{ color: tokens.colors.interactive.secondary__resting.rgba }}
+                                style={{ color: tokens.colors.interactive.secondary__resting.hex }}
                                 size={40}
                             />
                         </Button>
@@ -67,7 +67,7 @@ export function MissionControlButtons({ mission }: MissionProps) {
                         >
                             <Icon
                                 name={Icons.PlayButton}
-                                style={{ color: tokens.colors.interactive.secondary__resting.rgba }}
+                                style={{ color: tokens.colors.interactive.secondary__resting.hex }}
                                 size={40}
                             />
                         </Button>

diff --git a/frontend/src/components/Pages/FrontPage/MissionOverview/MissionProgressDisplay.tsx b/frontend/src/components/Pages/FrontPage/MissionOverview/MissionProgressDisplay.tsx
@@ -29,7 +29,7 @@ export function MissionProgressDisplay({ mission }: MissionProps) {
 
     return (
         <StyledTagCount>
-            <Typography style={{ color: tokens.colors.text.static_icons__tertiary.rgba }}>
+            <Typography style={{ color: tokens.colors.text.static_icons__tertiary.hex }}>
                 {TranslateText('Task')} {completedTasks}/{tasks.length}
             </Typography>
         </StyledTagCount>

diff --git a/frontend/src/components/Pages/FrontPage/MissionOverview/MissionRestartButton.tsx b/frontend/src/components/Pages/FrontPage/MissionOverview/MissionRestartButton.tsx
@@ -63,7 +63,7 @@ export function MissionRestartButton({ mission }: MissionProps) {
                 >
                     <Icon
                         name={Icons.Replay}
-                        style={{ color: tokens.colors.interactive.primary__resting.rgba }}
+                        style={{ color: tokens.colors.interactive.primary__resting.hex }}
                         size={24}
                     />
                 </Button>

diff --git a/frontend/src/components/Pages/FrontPage/MissionOverview/MissionStatusDisplay.tsx b/frontend/src/components/Pages/FrontPage/MissionOverview/MissionStatusDisplay.tsx
@@ -18,22 +18,22 @@ const StyledStatusDisplay = styled.div`
 export function displayIcon(status: MissionStatus) {
     switch (status) {
         case MissionStatus.Pending: {
-            return <Icon name={Icons.Pending} style={{ color: tokens.colors.text.static_icons__secondary.rgba }} />
+            return <Icon name={Icons.Pending} style={{ color: tokens.colors.text.static_icons__secondary.hex }} />
         }
         case MissionStatus.Ongoing: {
-            return <Icon name={Icons.Ongoing} style={{ color: tokens.colors.text.static_icons__secondary.rgba }} />
+            return <Icon name={Icons.Ongoing} style={{ color: tokens.colors.text.static_icons__secondary.hex }} />
         }
         case MissionStatus.Failed: {
-            return <Icon name={Icons.Failed} style={{ color: tokens.colors.interactive.danger__resting.rgba }} />
+            return <Icon name={Icons.Failed} style={{ color: tokens.colors.interactive.danger__resting.hex }} />
         }
         case MissionStatus.Successful: {
-            return <Icon name={Icons.Successful} style={{ color: tokens.colors.interactive.success__resting.rgba }} />
+            return <Icon name={Icons.Successful} style={{ color: tokens.colors.interactive.success__resting.hex }} />
         }
         case MissionStatus.PartiallySuccessful: {
-            return <Icon name={Icons.Warning} style={{ color: tokens.colors.interactive.warning__resting.rgba }} />
+            return <Icon name={Icons.Warning} style={{ color: tokens.colors.interactive.warning__resting.hex }} />
         }
     }
-    return <Icon name={Icons.Failed} style={{ color: tokens.colors.interactive.danger__resting.rgba }} />
+    return <Icon name={Icons.Failed} style={{ color: tokens.colors.interactive.danger__resting.hex }} />
 }
 
 export function MissionStatusDisplay({ status }: StatusProps) {

diff --git a/frontend/src/components/Pages/FrontPage/MissionOverview/StopMissionDialog.tsx b/frontend/src/components/Pages/FrontPage/MissionOverview/StopMissionDialog.tsx
@@ -56,7 +56,7 @@ export const StopMissionDialog = ({ mission }: MissionProps): JSX.Element => {
             <Button variant="ghost_icon" onClick={openDialog}>
                 <Icon
                     name={Icons.StopButton}
-                    style={{ color: tokens.colors.interactive.secondary__resting.rgba }}
+                    style={{ color: tokens.colors.interactive.secondary__resting.hex }}
                     size={40}
                 />
             </Button>

diff --git a/frontend/src/components/Pages/FrontPage/RobotCards/BatteryStatusView.tsx b/frontend/src/components/Pages/FrontPage/RobotCards/BatteryStatusView.tsx
@@ -60,7 +60,7 @@ const BatteryStatusView = ({
     return (
         <BatteryAlignment>
             <Icon name={battery_icon} color={icon_color} size={itemSize} />
-            <StyledTopography $fontSize={itemSize} style={{ color: tokens.colors.text.static_icons__tertiary.rgba }}>
+            <StyledTopography $fontSize={itemSize} style={{ color: tokens.colors.text.static_icons__tertiary.hex }}>
                 {battery_value}
             </StyledTopography>
         </BatteryAlignment>

diff --git a/frontend/src/components/Pages/MissionDefinitionPage/MissionDefinitionPage.tsx b/frontend/src/components/Pages/MissionDefinitionPage/MissionDefinitionPage.tsx
@@ -60,14 +60,14 @@ function KeyValuePairDisplay({ left, right }: { left: string; right: any }) {
             <Typography
                 variant="body_long_bold"
                 group="paragraph"
-                color={tokens.colors.text.static_icons__secondary.rgba}
+                color={tokens.colors.text.static_icons__secondary.hex}
             >
                 {left}
             </Typography>
             <Typography
                 variant="body_long_italic"
                 group="paragraph"
-                color={tokens.colors.text.static_icons__secondary.rgba}
+                color={tokens.colors.text.static_icons__secondary.hex}
             >
                 {right}
             </Typography>

diff --git a/frontend/src/components/Pages/MissionPage/MissionHeader/MissionHeader.tsx b/frontend/src/components/Pages/MissionPage/MissionHeader/MissionHeader.tsx
@@ -57,7 +57,7 @@ export function MissionHeader({ mission }: MissionHeaderProps) {
             <Typography
                 variant="body_long_italic"
                 group="paragraph"
-                color={tokens.colors.text.static_icons__secondary.rgba}
+                color={tokens.colors.text.static_icons__secondary.hex}
             >
                 {mission.description && `${translatedDescription}: ${mission.description}`}
             </Typography>
@@ -82,7 +82,7 @@ export function MissionHeader({ mission }: MissionHeaderProps) {
 
 function HeaderText(text: string) {
     return (
-        <Typography variant="body_short" group="paragraph" color={tokens.colors.text.static_icons__secondary.rgba}>
+        <Typography variant="body_short" group="paragraph" color={tokens.colors.text.static_icons__secondary.hex}>
             {text}
         </Typography>
     )

diff --git a/frontend/src/components/Pages/MissionPage/TaskOverview/TaskStatusDisplay.tsx b/frontend/src/components/Pages/MissionPage/TaskOverview/TaskStatusDisplay.tsx
@@ -18,22 +18,22 @@ const StyledStatusDisplay = styled.div`
 function displayIcon(status: TaskStatus) {
     switch (status) {
         case TaskStatus.NotStarted: {
-            return <Icon name={Icons.Pending} style={{ color: tokens.colors.text.static_icons__secondary.rgba }} />
+            return <Icon name={Icons.Pending} style={{ color: tokens.colors.text.static_icons__secondary.hex }} />
         }
         case TaskStatus.InProgress: {
-            return <Icon name={Icons.Ongoing} style={{ color: tokens.colors.text.static_icons__secondary.rgba }} />
+            return <Icon name={Icons.Ongoing} style={{ color: tokens.colors.text.static_icons__secondary.hex }} />
         }
         case TaskStatus.PartiallySuccessful: {
-            return <Icon name={Icons.Warning} style={{ color: tokens.colors.interactive.warning__resting.rgba }} />
+            return <Icon name={Icons.Warning} style={{ color: tokens.colors.interactive.warning__resting.hex }} />
         }
         case TaskStatus.Paused: {
-            return <Icon name={Icons.Pause} style={{ color: tokens.colors.text.static_icons__secondary.rgba }} />
+            return <Icon name={Icons.Pause} style={{ color: tokens.colors.text.static_icons__secondary.hex }} />
         }
         case TaskStatus.Successful: {
-            return <Icon name={Icons.Successful} style={{ color: tokens.colors.interactive.success__resting.rgba }} />
+            return <Icon name={Icons.Successful} style={{ color: tokens.colors.interactive.success__resting.hex }} />
         }
     }
-    return <Icon name={Icons.Failed} style={{ color: tokens.colors.interactive.danger__resting.rgba }} />
+    return <Icon name={Icons.Failed} style={{ color: tokens.colors.interactive.danger__resting.hex }} />
 }
 
 export function TaskStatusDisplay({ status }: StatusProps) {

diff --git a/frontend/src/utils/MapCompass.tsx b/frontend/src/utils/MapCompass.tsx
@@ -21,12 +21,12 @@ export const MapCompass = (): JSX.Element => {
                 </Typography>
                 <Icon
                     name={Icons.Navigation}
-                    style={{ color: tokens.colors.infographic.primary__energy_red_100.rgba }}
+                    style={{ color: tokens.colors.infographic.primary__energy_red_100.hex }}
                     size={32}
                 />
                 <Icon
                     name={Icons.Navigation}
-                    style={{ color: tokens.colors.text.static_icons__default.rgba }}
+                    style={{ color: tokens.colors.text.static_icons__default.hex }}
                     size={32}
                     rotation={180}
                 />