Skip to content

Commit 4da5962

Browse files
salonishah11salonishah11
authored
[TSPS-667] Use standard color utility functions instead of hex values (#5455)
1 parent a8b60a8 commit 4da5962

File tree

6 files changed

+36
-16
lines changed

6 files changed

+36
-16
lines changed

‎src/pages/scientificServices/pipelines/tabs/history/JobHistory.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -356,7 +356,7 @@ const DataDeletionDateCell = ({ pipelineRun }: CellProps): ReactNode => {
356356
style={
357357
isDeletionSoon
358358
? {
359-
color: '#DB3214',
359+
color: colors.danger(),
360360
fontWeight: 600,
361361
}
362362
: {}
@@ -502,7 +502,7 @@ const getRunStatusIcon = (pipelineRun: PipelineRun): ReactNode => {
502502
switch (pipelineRun.status) {
503503
case 'SUCCEEDED':
504504
return (
505-
<div style={{ display: 'flex', alignItems: 'center', color: '#74AE43', gap: '0.5rem' }}>
505+
<div style={{ display: 'flex', alignItems: 'center', color: colors.success(), gap: '0.5rem' }}>
506506
<Icon icon='success-standard' /> Done
507507
</div>
508508
);
@@ -520,7 +520,7 @@ const getRunStatusIcon = (pipelineRun: PipelineRun): ReactNode => {
520520

521521
if (hoursElapsed > PREPARING_JOB_CUTOFF_HOURS) {
522522
return (
523-
<div style={{ display: 'flex', alignItems: 'center', color: '#DB3214', gap: '0.5rem' }}>
523+
<div style={{ display: 'flex', alignItems: 'center', color: colors.danger(), gap: '0.5rem' }}>
524524
<Icon icon='warning-standard' /> Failed
525525
</div>
526526
);
@@ -538,7 +538,7 @@ const getRunStatusIcon = (pipelineRun: PipelineRun): ReactNode => {
538538
}
539539
case 'FAILED':
540540
return (
541-
<div style={{ display: 'flex', alignItems: 'center', color: '#DB3214', gap: '0.5rem' }}>
541+
<div style={{ display: 'flex', alignItems: 'center', color: colors.danger(), gap: '0.5rem' }}>
542542
<Icon icon='warning-standard' /> Failed
543543
</div>
544544
);

‎src/pages/scientificServices/pipelines/tabs/history/controls/TableFilters.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { ButtonPrimary, Icon, Select } from '@terra-ui-packages/components';
22
import React, { useEffect, useState } from 'react';
33
import { DelayedSearchInput } from 'src/components/input';
44
import { Pipeline, PipelineRunStatus } from 'src/libs/ajax/teaspoons/teaspoons-models';
5+
import colors from 'src/libs/colors';
56

67
export interface FilterValues {
78
description?: string;
@@ -134,7 +135,7 @@ const JobIdFilterControl = ({
134135
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
135136
<div style={{ fontWeight: 600, fontSize: '14px' }}>Job ID</div>
136137
{showValidationWarning && (
137-
<div style={{ color: '#DB3214', fontSize: '14px' }}>
138+
<div style={{ color: colors.danger(), fontSize: '14px' }}>
138139
<Icon icon='warning-standard' size={14} /> Enter a valid job ID
139140
</div>
140141
)}

‎src/pages/scientificServices/pipelines/tabs/run/RunJob.tsx‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import FooterWrapper from 'src/components/FooterWrapper';
66
import { getPopupRoot } from 'src/components/popup-utils';
77
import { Metrics } from 'src/libs/ajax/Metrics';
88
import { Pipeline, PipelineInput } from 'src/libs/ajax/teaspoons/teaspoons-models';
9+
import colors from 'src/libs/colors';
910
import Events from 'src/libs/events';
1011
import * as Nav from 'src/libs/nav';
1112
import { notify } from 'src/libs/notifications';
@@ -198,7 +199,7 @@ export const RunJob = () => {
198199
<div style={{ display: 'flex', justifyContent: 'space-between', margin: '1rem 2rem' }}>
199200
<div style={{ flex: 1, marginRight: '2rem' }}>
200201
<h3 style={{ marginBottom: '0.5rem' }}>
201-
Select a pipeline version <span style={{ color: '#DB3214' }}>*</span>
202+
Select a pipeline version <span style={{ color: colors.danger() }}>*</span>
202203
</h3>
203204
<div style={{ marginBottom: '2rem' }}>
204205
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
@@ -321,7 +322,11 @@ export const RunJob = () => {
321322
alignItems: 'center',
322323
}}
323324
>
324-
<Icon icon='warning-standard' size={36} style={{ color: '#DB3214', marginRight: '1rem' }} />
325+
<Icon
326+
icon='warning-standard'
327+
size={36}
328+
style={{ color: colors.danger(), marginRight: '1rem' }}
329+
/>
325330
<div>
326331
You do not have enough quota remaining to run this pipeline. Please{' '}
327332
<Link
@@ -372,7 +377,7 @@ export const RunJob = () => {
372377
alignItems: 'center',
373378
}}
374379
>
375-
<Icon icon='success-standard' size={36} style={{ color: '#74AE43', margin: '0 1rem' }} />
380+
<Icon icon='success-standard' size={36} style={{ color: colors.success(), margin: '0 1rem' }} />
376381
<div>
377382
Your job has been submitted. You can check the status of that job by going to the{' '}
378383
<Link style={{ color: '#46A3E9' }} href={Nav.getLink('pipelines-history')}>

‎src/pages/scientificServices/pipelines/tabs/run/inputs/PipelineFileInput.tsx‎

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -142,7 +142,7 @@ export const PipelineFileInput: React.FC<PipelineInputSelectorProps> = ({
142142
return (
143143
<div>
144144
<h3 style={{ marginBottom: '0.5rem' }}>
145-
Select a {displayName || name} {isRequired ? <span style={{ color: '#DB3214' }}>*</span> : null}
145+
Select a {displayName || name} {isRequired ? <span style={{ color: colors.danger() }}>*</span> : null}
146146
</h3>
147147
<div
148148
style={{
@@ -209,9 +209,17 @@ export const PipelineFileInput: React.FC<PipelineInputSelectorProps> = ({
209209
}}
210210
>
211211
{validationError ? (
212-
<Icon icon='warning-standard' size={36} style={{ color: '#DB3214', marginLeft: '1rem' }} />
212+
<Icon
213+
icon='warning-standard'
214+
size={36}
215+
style={{ color: colors.danger(), marginLeft: '1rem' }}
216+
/>
213217
) : (
214-
<Icon icon='success-standard' size={36} style={{ color: '#74AE43', marginLeft: '1rem' }} />
218+
<Icon
219+
icon='success-standard'
220+
size={36}
221+
style={{ color: colors.success(), marginLeft: '1rem' }}
222+
/>
215223
)}
216224
<div
217225
style={{
@@ -295,7 +303,11 @@ export const PipelineFileInput: React.FC<PipelineInputSelectorProps> = ({
295303
}}
296304
>
297305
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
298-
<Icon icon='warning-standard' size={24} style={{ color: '#DB3214', verticalAlign: 'middle' }} />{' '}
306+
<Icon
307+
icon='warning-standard'
308+
size={24}
309+
style={{ color: colors.danger(), verticalAlign: 'middle' }}
310+
/>{' '}
299311
<div>There was an error uploading the file.</div>
300312
</div>
301313
<ButtonPrimary type='button' onClick={handleResumeUpload}>
@@ -337,13 +349,13 @@ export const PipelineFileInput: React.FC<PipelineInputSelectorProps> = ({
337349
</>
338350
) : (
339351
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
340-
<Icon icon='success-standard' size={24} style={{ color: '#74AE43' }} />{' '}
352+
<Icon icon='success-standard' size={24} style={{ color: colors.success() }} />{' '}
341353
<span style={{ fontWeight: 'bold' }}>Upload successful.</span>
342354
</div>
343355
)}
344356
</>
345357
)}
346-
{validationError && <div style={{ color: '#DB3214', paddingTop: '0.5rem' }}>{validationError}</div>}
358+
{validationError && <div style={{ color: colors.danger(), paddingTop: '0.5rem' }}>{validationError}</div>}
347359
</div>
348360
</div>
349361
);

‎src/pages/scientificServices/pipelines/tabs/run/inputs/PipelineFloatInput.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, { ReactNode } from 'react';
22
import { ValidatedInput } from 'src/components/input';
33
import { PipelineInput } from 'src/libs/ajax/teaspoons/teaspoons-models';
4+
import colors from 'src/libs/colors';
45

56
interface PipelineFloatInputProps {
67
input: PipelineInput;
@@ -22,7 +23,7 @@ export const PipelineFloatInput: React.FC<PipelineFloatInputProps> = ({
2223
return (
2324
<>
2425
<h3 style={{ marginBottom: '0.5rem' }}>
25-
Enter {displayName || name} {isRequired ? <span style={{ color: '#DB3214' }}> *</span> : null}
26+
Enter {displayName || name} {isRequired ? <span style={{ color: colors.danger() }}> *</span> : null}
2627
</h3>
2728
<ValidatedInput
2829
width={400}

‎src/pages/scientificServices/pipelines/tabs/run/inputs/PipelineStringInput.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, { ReactNode } from 'react';
22
import { ValidatedInput } from 'src/components/input';
33
import { PipelineInput } from 'src/libs/ajax/teaspoons/teaspoons-models';
4+
import colors from 'src/libs/colors';
45

56
interface PipelineStringInputProps {
67
input: PipelineInput;
@@ -22,7 +23,7 @@ export const PipelineStringInput: React.FC<PipelineStringInputProps> = ({
2223
return (
2324
<>
2425
<h3 style={{ marginBottom: '0.5rem' }}>
25-
Enter {displayName || name} {isRequired ? <span style={{ color: '#DB3214' }}> *</span> : null}
26+
Enter {displayName || name} {isRequired ? <span style={{ color: colors.danger() }}> *</span> : null}
2627
</h3>
2728
<ValidatedInput
2829
width={400}

0 commit comments

Comments
 (0)