From fb070b9448983286d3115558aae162fcf012c437 Mon Sep 17 00:00:00 2001 From: Simon Larsen Date: Fri, 19 Apr 2024 11:53:28 +0100 Subject: [PATCH] Update BrandColors imports to use Green instead of Green500 --- .../src/Pages/Settings/Email/Index.tsx | 10 +++---- .../src/Pages/Settings/Probes/Index.tsx | 6 ++--- .../AddDowntimeMonitorStatusToStatusPage.ts | 4 +-- Common/Types/BrandColors.ts | 17 +++++++++--- CommonServer/Services/ProjectService.ts | 26 +++++++++---------- CommonServer/Services/StatusPageService.ts | 4 +-- .../ScheduledMaintenanceStateServiceHelper.ts | 4 +-- .../Components/Checkbox/CheckboxViewer.tsx | 6 ++--- .../Components/ColorCircle/ColorCircle.tsx | 25 ++++++++++++++++++ .../src/Components/Graphs/DayUptimeGraph.tsx | 6 ++--- .../Components/ModelTable/BaseModelTable.tsx | 4 +-- .../Components/MonitorGraphs/UptimeUtil.ts | 4 +-- .../src/Components/Workflow/Component.tsx | 4 +-- .../Components/Workflow/WorkflowStatus.tsx | 16 ++++++------ .../ExecutionLogs/ExecutionLogsTable.tsx | 12 ++++----- .../ExecutionLogsTimelineTable.tsx | 16 ++++++------ .../src/Components/Probe/ProbeStatus.tsx | 6 ++--- Dashboard/src/Pages/Monitor/View/Index.tsx | 6 ++--- .../src/Pages/MonitorGroup/View/Index.tsx | 8 +++--- Dashboard/src/Pages/Settings/CallLog.tsx | 6 ++--- Dashboard/src/Pages/Settings/EmailLog.tsx | 6 ++--- Dashboard/src/Pages/Settings/Invoices.tsx | 6 ++--- Dashboard/src/Pages/Settings/Probes.tsx | 6 ++--- Dashboard/src/Pages/Settings/SmsLog.tsx | 6 ++--- Dashboard/src/Pages/Settings/TeamView.tsx | 6 ++--- .../StatusPages/View/EmailSubscribers.tsx | 6 ++--- .../Pages/StatusPages/View/PrivateUser.tsx | 6 ++--- .../Pages/StatusPages/View/SMSSubscribers.tsx | 6 ++--- .../Telemetry/Services/View/Traces/Index.tsx | 8 +++--- .../src/Pages/UserSettings/OnCallLogs.tsx | 12 ++++----- .../Pages/UserSettings/OnCallLogsTimeline.tsx | 12 ++++----- .../Components/Monitor/MonitorOverview.tsx | 6 ++--- StatusPage/src/Pages/Incidents/Detail.tsx | 8 +++--- StatusPage/src/Pages/Overview/Overview.tsx | 14 +++++----- .../src/Pages/ScheduledEvent/Detail.tsx | 8 +++--- 35 files changed, 171 insertions(+), 135 deletions(-) create mode 100644 CommonUI/src/Components/ColorCircle/ColorCircle.tsx diff --git a/AdminDashboard/src/Pages/Settings/Email/Index.tsx b/AdminDashboard/src/Pages/Settings/Email/Index.tsx index b3aeeeddbb..9e14481c72 100644 --- a/AdminDashboard/src/Pages/Settings/Email/Index.tsx +++ b/AdminDashboard/src/Pages/Settings/Email/Index.tsx @@ -15,7 +15,7 @@ import ErrorMessage from 'CommonUI/src/Components/ErrorMessage/ErrorMessage'; import { JSONObject } from 'Common/Types/JSON'; import DropdownUtil from 'CommonUI/src/Utils/Dropdown'; import Pill from 'CommonUI/src/Components/Pill/Pill'; -import { Green500, Red500 } from 'Common/Types/BrandColors'; +import { Green, Red } from 'Common/Types/BrandColors'; import { PromiseVoidFunction } from 'Common/Types/FunctionTypes'; const Settings: FunctionComponent = (): ReactElement => { @@ -385,28 +385,28 @@ const Settings: FunctionComponent = (): ReactElement => { return ( ); } else if (!item['sendgridApiKey']) { return ( ); } else if (!item['sendgridFromEmail']) { return ( ); } else if (!item['sendgridFromName']) { return ( ); } diff --git a/AdminDashboard/src/Pages/Settings/Probes/Index.tsx b/AdminDashboard/src/Pages/Settings/Probes/Index.tsx index 329f1a3880..6f13d763a0 100644 --- a/AdminDashboard/src/Pages/Settings/Probes/Index.tsx +++ b/AdminDashboard/src/Pages/Settings/Probes/Index.tsx @@ -9,7 +9,7 @@ import Probe from 'Model/Models/Probe'; import FieldType from 'CommonUI/src/Components/Types/FieldType'; import { JSONObject } from 'Common/Types/JSON'; import OneUptimeDate from 'Common/Types/Date'; -import { Green500, Red500 } from 'Common/Types/BrandColors'; +import { Green, Red } from 'Common/Types/BrandColors'; import Statusbubble from 'CommonUI/src/Components/StatusBubble/StatusBubble'; import ProbeElement from 'CommonUI/src/Components/Probe/Probe'; import IsNull from 'Common/Types/BaseDatabase/IsNull'; @@ -197,7 +197,7 @@ const Settings: FunctionComponent = (): ReactElement => { return ( ); @@ -206,7 +206,7 @@ const Settings: FunctionComponent = (): ReactElement => { return ( ); diff --git a/App/FeatureSet/Workers/DataMigrations/AddDowntimeMonitorStatusToStatusPage.ts b/App/FeatureSet/Workers/DataMigrations/AddDowntimeMonitorStatusToStatusPage.ts index d5a5d674c7..915c9fae88 100644 --- a/App/FeatureSet/Workers/DataMigrations/AddDowntimeMonitorStatusToStatusPage.ts +++ b/App/FeatureSet/Workers/DataMigrations/AddDowntimeMonitorStatusToStatusPage.ts @@ -4,7 +4,7 @@ import StatusPage from 'Model/Models/StatusPage'; import StatusPageService from 'CommonServer/Services/StatusPageService'; import MonitorStatus from 'Model/Models/MonitorStatus'; import MonitorStatusService from 'CommonServer/Services/MonitorStatusService'; -import { Green500 } from 'Common/Types/BrandColors'; +import { Green } from 'Common/Types/BrandColors'; import Color from 'Common/Types/Color'; export default class AddDowntimeMonitorStatusToStatusPage extends DataMigrationBase { @@ -61,7 +61,7 @@ export default class AddDowntimeMonitorStatusToStatusPage extends DataMigrationB id: statusPage.id!, data: { downtimeMonitorStatuses: getNonOperationStatuses as any, - defaultBarColor: new Color(Green500.toString()) as any, + defaultBarColor: new Color(Green.toString()) as any, }, props: { isRoot: true, diff --git a/Common/Types/BrandColors.ts b/Common/Types/BrandColors.ts index 5b44b7034a..9c041b32b0 100644 --- a/Common/Types/BrandColors.ts +++ b/Common/Types/BrandColors.ts @@ -3,6 +3,20 @@ import Color from './Color'; // Standard Colors export const Black: Color = Color.fromString('#000000'); export const White: Color = Color.fromString('#ffffff'); +export const slate: Color = Color.fromString('#564ab1'); +export const Purple: Color = Color.fromString('#6f42c1'); +export const Pink: Color = Color.fromString('#e83e8c'); +export const Red: Color = Color.fromString('#fd625e'); +export const Orange: Color = Color.fromString('#f1734f'); +export const Yellow: Color = Color.fromString('#ffbf53'); +export const Green: Color = Color.fromString('#2ab57d'); +export const Teal: Color = Color.fromString('#050505'); +export const Cyan: Color = Color.fromString('#4ba6ef'); +export const VeryLightGray: Color = Color.fromString('#c2c2c2'); +export const Grey: Color = Color.fromString('#575757'); +export const LightGray: Color = Color.fromString('#908B8B'); +export const Moroon: Color = Color.fromString('#b70400'); +export const Blue: Color = Color.fromString('#3686be'); // these are *-500 colors from tailwindcss export const Zinc500: Color = Color.fromString('#71717a'); @@ -29,9 +43,6 @@ export const Violet500: Color = Color.fromString('#8b5cf6'); export const Fuchsia500: Color = Color.fromString('#d946ef'); export const Rose500: Color = Color.fromString('#f43f5e'); -export const LightGray: Color = Color.fromString('#908B8B'); - -export const VeryLightGray: Color = Color.fromString('#c2c2c2'); export const BrightColors: Color[] = [ Black, diff --git a/CommonServer/Services/ProjectService.ts b/CommonServer/Services/ProjectService.ts index 6819031303..42a55ced26 100755 --- a/CommonServer/Services/ProjectService.ts +++ b/CommonServer/Services/ProjectService.ts @@ -19,9 +19,9 @@ import ObjectID from 'Common/Types/ObjectID'; import OneUptimeDate from 'Common/Types/Date'; import MonitorStatus from 'Model/Models/MonitorStatus'; import { - Yellow500, - Green500, - Red500, + Yellow, + Green, + Red, Moroon500, Black, } from 'Common/Types/BrandColors'; @@ -427,7 +427,7 @@ export class Service extends DatabaseService { ongoingScheduledMaintenanceState.name = 'Ongoing'; ongoingScheduledMaintenanceState.description = 'When an event is ongoing, it belongs to this state.'; - ongoingScheduledMaintenanceState.color = Yellow500; + ongoingScheduledMaintenanceState.color = Yellow; ongoingScheduledMaintenanceState.isOngoingState = true; ongoingScheduledMaintenanceState.projectId = createdItem.id!; ongoingScheduledMaintenanceState.order = 2; @@ -463,7 +463,7 @@ export class Service extends DatabaseService { completedScheduledMaintenanceState.name = 'Completed'; completedScheduledMaintenanceState.description = 'When an event is completed, it belongs to this state.'; - completedScheduledMaintenanceState.color = Green500; + completedScheduledMaintenanceState.color = Green; completedScheduledMaintenanceState.isResolvedState = true; completedScheduledMaintenanceState.projectId = createdItem.id!; completedScheduledMaintenanceState.order = 4; @@ -566,7 +566,7 @@ export class Service extends DatabaseService { createdIncidentState.name = 'Identified'; createdIncidentState.description = 'When an incident is created, it belongs to this state'; - createdIncidentState.color = Red500; + createdIncidentState.color = Red; createdIncidentState.isCreatedState = true; createdIncidentState.projectId = createdItem.id!; createdIncidentState.order = 1; @@ -582,7 +582,7 @@ export class Service extends DatabaseService { acknowledgedIncidentState.name = 'Acknowledged'; acknowledgedIncidentState.description = 'When an incident is acknowledged, it belongs to this state.'; - acknowledgedIncidentState.color = Yellow500; + acknowledgedIncidentState.color = Yellow; acknowledgedIncidentState.isAcknowledgedState = true; acknowledgedIncidentState.projectId = createdItem.id!; acknowledgedIncidentState.order = 2; @@ -598,7 +598,7 @@ export class Service extends DatabaseService { resolvedIncidentState.name = 'Resolved'; resolvedIncidentState.description = 'When an incident is resolved, it belongs to this state.'; - resolvedIncidentState.color = Green500; + resolvedIncidentState.color = Green; resolvedIncidentState.isResolvedState = true; resolvedIncidentState.projectId = createdItem.id!; resolvedIncidentState.order = 3; @@ -635,7 +635,7 @@ export class Service extends DatabaseService { majorIncident.name = 'Major Incident'; majorIncident.description = 'Issues causing significant impact. Immediate response is usually required. We might have some workarounds that mitigate the impact on customers. Examples include an important sub-system failing.'; - majorIncident.color = Red500; + majorIncident.color = Red; majorIncident.projectId = createdItem.id!; majorIncident.order = 2; @@ -650,7 +650,7 @@ export class Service extends DatabaseService { minorIncident.name = 'Minor Incident'; minorIncident.description = 'Issues with low impact, which can usually be handled within working hours. Most customers are unlikely to notice any problems. Examples include a slight drop in application performance.'; - minorIncident.color = Yellow500; + minorIncident.color = Yellow; minorIncident.projectId = createdItem.id!; minorIncident.order = 3; @@ -671,7 +671,7 @@ export class Service extends DatabaseService { operationalStatus.projectId = createdItem.id!; operationalStatus.priority = 1; operationalStatus.isOperationalState = true; - operationalStatus.color = Green500; + operationalStatus.color = Green; operationalStatus = await MonitorStatusService.create({ data: operationalStatus, @@ -686,7 +686,7 @@ export class Service extends DatabaseService { 'Monitor is operating at reduced performance.'; degradedStatus.priority = 2; degradedStatus.projectId = createdItem.id!; - degradedStatus.color = Yellow500; + degradedStatus.color = Yellow; degradedStatus = await MonitorStatusService.create({ data: degradedStatus, @@ -701,7 +701,7 @@ export class Service extends DatabaseService { downStatus.isOfflineState = true; downStatus.projectId = createdItem.id!; downStatus.priority = 3; - downStatus.color = Red500; + downStatus.color = Red; downStatus = await MonitorStatusService.create({ data: downStatus, diff --git a/CommonServer/Services/StatusPageService.ts b/CommonServer/Services/StatusPageService.ts index cd7313936c..7d949c2b90 100755 --- a/CommonServer/Services/StatusPageService.ts +++ b/CommonServer/Services/StatusPageService.ts @@ -30,7 +30,7 @@ import ProjectService from './ProjectService'; import CreateBy from '../Types/Database/CreateBy'; import MonitorStatus from 'Model/Models/MonitorStatus'; import MonitorStatusService from './MonitorStatusService'; -import { Green500 } from 'Common/Types/BrandColors'; +import { Green } from 'Common/Types/BrandColors'; export class Service extends DatabaseService { public constructor(postgresDatabase?: PostgresDatabase) { @@ -73,7 +73,7 @@ export class Service extends DatabaseService { } if (!createBy.data.defaultBarColor) { - createBy.data.defaultBarColor = Green500; + createBy.data.defaultBarColor = Green; } return { diff --git a/CommonServer/Tests/TestingUtils/Services/ScheduledMaintenanceStateServiceHelper.ts b/CommonServer/Tests/TestingUtils/Services/ScheduledMaintenanceStateServiceHelper.ts index afa8594b48..53ad48bf93 100644 --- a/CommonServer/Tests/TestingUtils/Services/ScheduledMaintenanceStateServiceHelper.ts +++ b/CommonServer/Tests/TestingUtils/Services/ScheduledMaintenanceStateServiceHelper.ts @@ -1,7 +1,7 @@ import ObjectID from 'Common/Types/ObjectID'; import ScheduledMaintenanceState from 'Model/Models/ScheduledMaintenanceState'; import CreateBy from '../../../Types/Database/CreateBy'; -import { Black, Yellow500 } from 'Common/Types/BrandColors'; +import { Black, Yellow } from 'Common/Types/BrandColors'; export default class ScheduledMaintenanceStateTestService { public static generateScheduledState( @@ -36,7 +36,7 @@ export default class ScheduledMaintenanceStateTestService { ongoingState.name = 'Ongoing'; ongoingState.description = 'When an event is ongoing, it belongs to this state.'; - ongoingState.color = Yellow500; + ongoingState.color = Yellow; ongoingState.isOngoingState = true; ongoingState.projectId = projectId; ongoingState.order = 2; diff --git a/CommonUI/src/Components/Checkbox/CheckboxViewer.tsx b/CommonUI/src/Components/Checkbox/CheckboxViewer.tsx index 01e840c4d3..016f4eb0ea 100644 --- a/CommonUI/src/Components/Checkbox/CheckboxViewer.tsx +++ b/CommonUI/src/Components/Checkbox/CheckboxViewer.tsx @@ -1,5 +1,5 @@ import React, { FunctionComponent, ReactElement } from 'react'; -import { Green500, Red500 } from 'Common/Types/BrandColors'; +import { Green, Red } from 'Common/Types/BrandColors'; import IconProp from 'Common/Types/Icon/IconProp'; import Icon from '../Icon/Icon'; @@ -19,13 +19,13 @@ const CheckboxViewer: FunctionComponent = ( ) : ( )} diff --git a/CommonUI/src/Components/ColorCircle/ColorCircle.tsx b/CommonUI/src/Components/ColorCircle/ColorCircle.tsx new file mode 100644 index 0000000000..f05395fca6 --- /dev/null +++ b/CommonUI/src/Components/ColorCircle/ColorCircle.tsx @@ -0,0 +1,25 @@ +import Color from 'Common/Types/Color'; +import React, { FunctionComponent, ReactElement } from 'react'; +import Tooltip from '../Tooltip/Tooltip'; + +export interface ComponentProps { + color: Color; + tooltip: string; +} + +const ColorCircle: FunctionComponent = ( + props: ComponentProps +): ReactElement => { + return ( + +
+ + ); +}; + +export default ColorCircle; diff --git a/CommonUI/src/Components/Graphs/DayUptimeGraph.tsx b/CommonUI/src/Components/Graphs/DayUptimeGraph.tsx index c23cd90905..1f13a06a42 100644 --- a/CommonUI/src/Components/Graphs/DayUptimeGraph.tsx +++ b/CommonUI/src/Components/Graphs/DayUptimeGraph.tsx @@ -1,4 +1,4 @@ -import { Green500 } from 'Common/Types/BrandColors'; +import { Green } from 'Common/Types/BrandColors'; import Color from 'Common/Types/Color'; import OneUptimeDate from 'Common/Types/Date'; import Dictionary from 'Common/Types/Dictionary'; @@ -54,7 +54,7 @@ const DayUptimeGraph: FunctionComponent = ( const getUptimeBar: GetUptimeBarFunction = ( dayNumber: number ): ReactElement => { - let color: Color = props.defaultBarColor || Green500; + let color: Color = props.defaultBarColor || Green; const todaysDay: Date = OneUptimeDate.getSomeDaysAfterDate( props.startDate, @@ -227,7 +227,7 @@ const DayUptimeGraph: FunctionComponent = ( if (!hasEvents) { toolTipText += ` - No data for this day.`; - color = props.defaultBarColor || Green500; + color = props.defaultBarColor || Green; } let className: string = 'h-20 w-20'; diff --git a/CommonUI/src/Components/ModelTable/BaseModelTable.tsx b/CommonUI/src/Components/ModelTable/BaseModelTable.tsx index 3fcd5549ae..48846807bb 100644 --- a/CommonUI/src/Components/ModelTable/BaseModelTable.tsx +++ b/CommonUI/src/Components/ModelTable/BaseModelTable.tsx @@ -53,7 +53,7 @@ import SubscriptionPlan, { PlanSelect, } from 'Common/Types/Billing/SubscriptionPlan'; import Pill from '../Pill/Pill'; -import { Yellow500 } from 'Common/Types/BrandColors'; +import { Yellow } from 'Common/Types/BrandColors'; import { ModalWidth } from '../Modal/Modal'; import ProjectUtil from '../../Utils/Project'; import API from '../../Utils/API/API'; @@ -1337,7 +1337,7 @@ const BaseModelTable: ( marginLeft: '5px', }} > - + )} diff --git a/CommonUI/src/Components/MonitorGraphs/UptimeUtil.ts b/CommonUI/src/Components/MonitorGraphs/UptimeUtil.ts index e8eebbeff4..f6e2635759 100644 --- a/CommonUI/src/Components/MonitorGraphs/UptimeUtil.ts +++ b/CommonUI/src/Components/MonitorGraphs/UptimeUtil.ts @@ -2,7 +2,7 @@ import ObjectID from 'Common/Types/ObjectID'; import { MonitorEvent } from './Uptime'; import MonitorStatusTimeline from 'Model/Models/MonitorStatusTimeline'; import OneUptimeDate from 'Common/Types/Date'; -import { Green500 } from 'Common/Types/BrandColors'; +import { Green } from 'Common/Types/BrandColors'; import { Event } from '../Graphs/DayUptimeGraph'; import MonitorStatus from 'Model/Models/MonitorStatus'; import { UptimePrecision } from 'Model/Models/StatusPageResource'; @@ -51,7 +51,7 @@ export default class UptimeUtil { endDate: endDate, label: monitorEvents[i]?.monitorStatus?.name || 'Operational', priority: monitorEvents[i]?.monitorStatus?.priority || 0, - color: monitorEvents[i]?.monitorStatus?.color || Green500, + color: monitorEvents[i]?.monitorStatus?.color || Green, monitorId: monitorEvents[i]!.monitorId!, eventStatusId: monitorEvents[i]!.monitorStatus!.id!, }); diff --git a/CommonUI/src/Components/Workflow/Component.tsx b/CommonUI/src/Components/Workflow/Component.tsx index a2243e33f9..5f9c3ffdd8 100644 --- a/CommonUI/src/Components/Workflow/Component.tsx +++ b/CommonUI/src/Components/Workflow/Component.tsx @@ -10,7 +10,7 @@ import { } from 'Common/Types/Workflow/Component'; import Tooltip from '../Tooltip/Tooltip'; import Pill from '../Pill/Pill'; -import { Green500 } from 'Common/Types/BrandColors'; +import { Green } from 'Common/Types/BrandColors'; export interface ComponentProps { data: NodeDataProp; @@ -141,7 +141,7 @@ const Node: FunctionComponent = (props: ComponentProps) => { {props.data.metadata.componentType === ComponentType.Trigger && props.data.nodeType !== NodeType.PlaceholderNode && !props.data.isPreview && ( - + )} {!props.data.isPreview && diff --git a/CommonUI/src/Components/Workflow/WorkflowStatus.tsx b/CommonUI/src/Components/Workflow/WorkflowStatus.tsx index 4fd787bca5..82d79a1917 100644 --- a/CommonUI/src/Components/Workflow/WorkflowStatus.tsx +++ b/CommonUI/src/Components/Workflow/WorkflowStatus.tsx @@ -1,4 +1,4 @@ -import { Green500, Red500, Yellow500 } from 'Common/Types/BrandColors'; +import { Green, Red, Yellow } from 'Common/Types/BrandColors'; import React, { FunctionComponent, ReactElement } from 'react'; import WorkflowStatus from 'Common/Types/Workflow/WorkflowStatus'; import Pill from '../Pill/Pill'; @@ -11,27 +11,27 @@ const WorkflowStatusElement: FunctionComponent = ( props: ComponentProps ): ReactElement => { if (props.status === WorkflowStatus.Success) { - return ; + return ; } if (props.status === WorkflowStatus.Running) { - return ; + return ; } if (props.status === WorkflowStatus.Scheduled) { - return ; + return ; } if (props.status === WorkflowStatus.Error) { - return ; + return ; } if (props.status === WorkflowStatus.Timeout) { - return ; + return ; } if (props.status === WorkflowStatus.WorkflowCountExceeded) { - return ; + return ; } - return ; + return ; }; export default WorkflowStatusElement; diff --git a/Dashboard/src/Components/OnCallPolicy/ExecutionLogs/ExecutionLogsTable.tsx b/Dashboard/src/Components/OnCallPolicy/ExecutionLogs/ExecutionLogsTable.tsx index 830f8765fe..68709ec07c 100644 --- a/Dashboard/src/Components/OnCallPolicy/ExecutionLogs/ExecutionLogsTable.tsx +++ b/Dashboard/src/Components/OnCallPolicy/ExecutionLogs/ExecutionLogsTable.tsx @@ -5,7 +5,7 @@ import DashboardNavigation from '../../../Utils/Navigation'; import FieldType from 'CommonUI/src/Components/Types/FieldType'; import { JSONObject } from 'Common/Types/JSON'; import Pill from 'CommonUI/src/Components/Pill/Pill'; -import { Green500, Red500, Yellow500 } from 'Common/Types/BrandColors'; +import { Green, Red, Yellow } from 'Common/Types/BrandColors'; import { ButtonStyleType } from 'CommonUI/src/Components/Button/Button'; import ConfirmModal from 'CommonUI/src/Components/Modal/ConfirmModal'; import IncidentView from '../../../Components/Incident/Incident'; @@ -149,14 +149,14 @@ const ExecutionLogsTable: FunctionComponent = ( if (item['status'] === OnCallDutyPolicyStatus.Completed) { return ( ); } else if (item['status'] === OnCallDutyPolicyStatus.Started) { return ( ); @@ -165,7 +165,7 @@ const ExecutionLogsTable: FunctionComponent = ( ) { return ( ); @@ -174,14 +174,14 @@ const ExecutionLogsTable: FunctionComponent = ( ) { return ( ); } return ( - + ); }, }, diff --git a/Dashboard/src/Components/OnCallPolicy/ExecutionLogs/ExecutionLogsTimelineTable.tsx b/Dashboard/src/Components/OnCallPolicy/ExecutionLogs/ExecutionLogsTimelineTable.tsx index 68c7632c0e..fe5732ec13 100644 --- a/Dashboard/src/Components/OnCallPolicy/ExecutionLogs/ExecutionLogsTimelineTable.tsx +++ b/Dashboard/src/Components/OnCallPolicy/ExecutionLogs/ExecutionLogsTimelineTable.tsx @@ -4,7 +4,7 @@ import DashboardNavigation from '../../../Utils/Navigation'; import FieldType from 'CommonUI/src/Components/Types/FieldType'; import { JSONObject } from 'Common/Types/JSON'; import Pill from 'CommonUI/src/Components/Pill/Pill'; -import { Green500, Red500, Yellow500 } from 'Common/Types/BrandColors'; +import { Green, Red, Yellow } from 'Common/Types/BrandColors'; import { ButtonStyleType } from 'CommonUI/src/Components/Button/Button'; import ConfirmModal from 'CommonUI/src/Components/Modal/ConfirmModal'; import OnCallDutyPolicyExecutionLogTimeline from 'Model/Models/OnCallDutyPolicyExecutionLogTimeline'; @@ -207,7 +207,7 @@ const ExecutionLogTimelineTable: FunctionComponent = ( ) { return ( = ( ) { return ( = ( ) { return ( = ( ) { return ( = ( ) { return ( = ( ) { return ( = ( return ( = ( return ( ); @@ -32,7 +32,7 @@ const ProbeStatusElement: FunctionComponent = ( return ( ); diff --git a/Dashboard/src/Pages/Monitor/View/Index.tsx b/Dashboard/src/Pages/Monitor/View/Index.tsx index 7bbe62f7e0..fce5bf18b5 100644 --- a/Dashboard/src/Pages/Monitor/View/Index.tsx +++ b/Dashboard/src/Pages/Monitor/View/Index.tsx @@ -30,7 +30,7 @@ import API from 'CommonUI/src/Utils/API/API'; import DisabledWarning from '../../../Components/Monitor/DisabledWarning'; import MonitorType from 'Common/Types/Monitor/MonitorType'; import IncomingMonitorLink from '../../../Components/Monitor/IncomingRequestMonitor/IncomingMonitorLink'; -import { Green500, Gray500 } from 'Common/Types/BrandColors'; +import { Green, Gray500 } from 'Common/Types/BrandColors'; import UptimeUtil from 'CommonUI/src/Components/MonitorGraphs/UptimeUtil'; import MonitorStatus from 'Model/Models/MonitorStatus'; import { UptimePrecision } from 'Model/Models/StatusPageResource'; @@ -108,7 +108,7 @@ const MonitorView: FunctionComponent = ( style={{ color: currentMonitorStatus?.color?.toString() || - Green500.toString(), + Green.toString(), }} > {uptimePercent}% uptime @@ -495,7 +495,7 @@ const MonitorView: FunctionComponent = ( startDate={OneUptimeDate.getSomeDaysAgo(90)} endDate={OneUptimeDate.getCurrentDate()} isLoading={isLoading} - defaultBarColor={Green500} + defaultBarColor={Green} downtimeMonitorStatuses={downTimeMonitorStatues} /> diff --git a/Dashboard/src/Pages/MonitorGroup/View/Index.tsx b/Dashboard/src/Pages/MonitorGroup/View/Index.tsx index bc867e6561..1bd0cccdf3 100644 --- a/Dashboard/src/Pages/MonitorGroup/View/Index.tsx +++ b/Dashboard/src/Pages/MonitorGroup/View/Index.tsx @@ -29,7 +29,7 @@ import UptimeUtil from 'CommonUI/src/Components/MonitorGraphs/UptimeUtil'; import MonitorStatus from 'Model/Models/MonitorStatus'; import ProjectUtil from 'CommonUI/src/Utils/Project'; import { UptimePrecision } from 'Model/Models/StatusPageResource'; -import { Green500 } from 'Common/Types/BrandColors'; +import { Green } from 'Common/Types/BrandColors'; import Statusbubble from 'CommonUI/src/Components/StatusBubble/StatusBubble'; import SortOrder from 'Common/Types/BaseDatabase/SortOrder'; import PageLoader from 'CommonUI/src/Components/Loader/PageLoader'; @@ -71,7 +71,7 @@ const MonitorGroupView: FunctionComponent = ( style={{ color: currentGroupStatus?.color?.toString() || - Green500.toString(), + Green.toString(), }} > {uptimePercent}% uptime @@ -87,7 +87,7 @@ const MonitorGroupView: FunctionComponent = ( return ( ); @@ -306,7 +306,7 @@ const MonitorGroupView: FunctionComponent = ( startDate={OneUptimeDate.getSomeDaysAgo(90)} endDate={OneUptimeDate.getCurrentDate()} isLoading={isLoading} - defaultBarColor={Green500} + defaultBarColor={Green} downtimeMonitorStatuses={downTimeMonitorStatues} /> diff --git a/Dashboard/src/Pages/Settings/CallLog.tsx b/Dashboard/src/Pages/Settings/CallLog.tsx index a6796c289e..e0e81f9fd1 100644 --- a/Dashboard/src/Pages/Settings/CallLog.tsx +++ b/Dashboard/src/Pages/Settings/CallLog.tsx @@ -14,7 +14,7 @@ import { JSONObject } from 'Common/Types/JSON'; import { ButtonStyleType } from 'CommonUI/src/Components/Button/Button'; import Pill from 'CommonUI/src/Components/Pill/Pill'; import CallStatus from 'Common/Types/Call/CallStatus'; -import { Green500, Red500 } from 'Common/Types/BrandColors'; +import { Green, Red } from 'Common/Types/BrandColors'; import { BILLING_ENABLED } from 'CommonUI/src/Config'; import Column from 'CommonUI/src/Components/ModelTable/Column'; import Columns from 'CommonUI/src/Components/ModelTable/Columns'; @@ -118,8 +118,8 @@ const CallLogs: FunctionComponent = ( isMinimal={false} color={ item['status'] === CallStatus.Success - ? Green500 - : Red500 + ? Green + : Red } text={item['status'] as string} /> diff --git a/Dashboard/src/Pages/Settings/EmailLog.tsx b/Dashboard/src/Pages/Settings/EmailLog.tsx index 44b9aa3f07..995f1ece89 100644 --- a/Dashboard/src/Pages/Settings/EmailLog.tsx +++ b/Dashboard/src/Pages/Settings/EmailLog.tsx @@ -14,7 +14,7 @@ import { JSONObject } from 'Common/Types/JSON'; import { ButtonStyleType } from 'CommonUI/src/Components/Button/Button'; import Pill from 'CommonUI/src/Components/Pill/Pill'; import EmailStatus from 'Common/Types/Mail/MailStatus'; -import { Green500, Red500 } from 'Common/Types/BrandColors'; +import { Green, Red } from 'Common/Types/BrandColors'; import Columns from 'CommonUI/src/Components/ModelTable/Columns'; import ConfirmModal from 'CommonUI/src/Components/Modal/ConfirmModal'; import CustomSMTPElement from '../../Components/CustomSMTP/CustomSMTPView'; @@ -124,8 +124,8 @@ const EmailLogs: FunctionComponent = ( isMinimal={false} color={ item['status'] === EmailStatus.Success - ? Green500 - : Red500 + ? Green + : Red } text={item['status'] as string} /> diff --git a/Dashboard/src/Pages/Settings/Invoices.tsx b/Dashboard/src/Pages/Settings/Invoices.tsx index fb179dd148..3e54b284f4 100644 --- a/Dashboard/src/Pages/Settings/Invoices.tsx +++ b/Dashboard/src/Pages/Settings/Invoices.tsx @@ -15,7 +15,7 @@ import BillingInvoice, { InvoiceStatus } from 'Model/Models/BillingInvoice'; import FieldType from 'CommonUI/src/Components/Types/FieldType'; import URL from 'Common/Types/API/URL'; import Pill from 'CommonUI/src/Components/Pill/Pill'; -import { Green500, Yellow500 } from 'Common/Types/BrandColors'; +import { Green, Yellow } from 'Common/Types/BrandColors'; import { APP_API_URL } from 'CommonUI/src/Config'; import BaseAPI from 'CommonUI/src/Utils/API/API'; import ModelAPI from 'CommonUI/src/Utils/ModelAPI/ModelAPI'; @@ -173,7 +173,7 @@ const Settings: FunctionComponent = ( text={Text.uppercaseFirstLetter( item['status'] as string )} - color={Green500} + color={Green} /> ); } @@ -182,7 +182,7 @@ const Settings: FunctionComponent = ( text={Text.uppercaseFirstLetter( item['status'] as string )} - color={Yellow500} + color={Yellow} /> ); }, diff --git a/Dashboard/src/Pages/Settings/Probes.tsx b/Dashboard/src/Pages/Settings/Probes.tsx index 0dd17d4fae..544bdceb76 100644 --- a/Dashboard/src/Pages/Settings/Probes.tsx +++ b/Dashboard/src/Pages/Settings/Probes.tsx @@ -17,7 +17,7 @@ import ConfirmModal from 'CommonUI/src/Components/Modal/ConfirmModal'; import { ButtonStyleType } from 'CommonUI/src/Components/Button/Button'; import ProbeElement from 'CommonUI/src/Components/Probe/Probe'; import Statusbubble from 'CommonUI/src/Components/StatusBubble/StatusBubble'; -import { Green500, Red500 } from 'Common/Types/BrandColors'; +import { Green, Red } from 'Common/Types/BrandColors'; import OneUptimeDate from 'Common/Types/Date'; import URL from 'Common/Types/API/URL'; import { APP_API_URL } from 'CommonUI/src/Config'; @@ -267,7 +267,7 @@ const ProbePage: FunctionComponent = ( return ( ); @@ -276,7 +276,7 @@ const ProbePage: FunctionComponent = ( return ( ); diff --git a/Dashboard/src/Pages/Settings/SmsLog.tsx b/Dashboard/src/Pages/Settings/SmsLog.tsx index 8725686b5a..95ad8bbce4 100644 --- a/Dashboard/src/Pages/Settings/SmsLog.tsx +++ b/Dashboard/src/Pages/Settings/SmsLog.tsx @@ -14,7 +14,7 @@ import { JSONObject } from 'Common/Types/JSON'; import { ButtonStyleType } from 'CommonUI/src/Components/Button/Button'; import Pill from 'CommonUI/src/Components/Pill/Pill'; import SmsStatus from 'Common/Types/SmsStatus'; -import { Green500, Red500 } from 'Common/Types/BrandColors'; +import { Green, Red } from 'Common/Types/BrandColors'; import { BILLING_ENABLED } from 'CommonUI/src/Config'; import Column from 'CommonUI/src/Components/ModelTable/Column'; import Columns from 'CommonUI/src/Components/ModelTable/Columns'; @@ -116,8 +116,8 @@ const SMSLogs: FunctionComponent = ( isMinimal={false} color={ item['status'] === SmsStatus.Success - ? Green500 - : Red500 + ? Green + : Red } text={item['status'] as string} /> diff --git a/Dashboard/src/Pages/Settings/TeamView.tsx b/Dashboard/src/Pages/Settings/TeamView.tsx index 45f5c93a71..7654254d7b 100644 --- a/Dashboard/src/Pages/Settings/TeamView.tsx +++ b/Dashboard/src/Pages/Settings/TeamView.tsx @@ -28,7 +28,7 @@ import LabelsElement from '../../Components/Label/Labels'; import BadDataException from 'Common/Types/Exception/BadDataException'; import FormValues from 'CommonUI/src/Components/Forms/Types/FormValues'; import Pill from 'CommonUI/src/Components/Pill/Pill'; -import { Green500, Yellow500 } from 'Common/Types/BrandColors'; +import { Green, Yellow } from 'Common/Types/BrandColors'; import DashboardNavigation from '../../Utils/Navigation'; import BaseModel from 'Common/Models/BaseModel'; import { FormProps } from 'CommonUI/src/Components/Forms/BasicForm'; @@ -210,12 +210,12 @@ const TeamView: FunctionComponent = ( type: FieldType.Boolean, getElement: (item: JSONObject): ReactElement => { if (item['hasAcceptedInvitation']) { - return ; + return ; } return ( ); }, diff --git a/Dashboard/src/Pages/StatusPages/View/EmailSubscribers.tsx b/Dashboard/src/Pages/StatusPages/View/EmailSubscribers.tsx index 733105bcf3..32c959061f 100644 --- a/Dashboard/src/Pages/StatusPages/View/EmailSubscribers.tsx +++ b/Dashboard/src/Pages/StatusPages/View/EmailSubscribers.tsx @@ -16,7 +16,7 @@ import ModelTable from 'CommonUI/src/Components/ModelTable/ModelTable'; import NotNull from 'Common/Types/BaseDatabase/NotNull'; import { JSONObject } from 'Common/Types/JSON'; import Pill from 'CommonUI/src/Components/Pill/Pill'; -import { Green500, Red500 } from 'Common/Types/BrandColors'; +import { Green, Red } from 'Common/Types/BrandColors'; import Navigation from 'CommonUI/src/Utils/Navigation'; import StatusPage from 'Model/Models/StatusPage'; import ModelAPI from 'CommonUI/src/Utils/ModelAPI/ModelAPI'; @@ -263,14 +263,14 @@ const StatusPageDelete: FunctionComponent = ( if (item['isUnsubscribed']) { return ( ); } return ( ); diff --git a/Dashboard/src/Pages/StatusPages/View/PrivateUser.tsx b/Dashboard/src/Pages/StatusPages/View/PrivateUser.tsx index 63fce245f1..b27115c155 100644 --- a/Dashboard/src/Pages/StatusPages/View/PrivateUser.tsx +++ b/Dashboard/src/Pages/StatusPages/View/PrivateUser.tsx @@ -8,7 +8,7 @@ import FormFieldSchemaType from 'CommonUI/src/Components/Forms/Types/FormFieldSc import FieldType from 'CommonUI/src/Components/Types/FieldType'; import { JSONObject } from 'Common/Types/JSON'; import Pill from 'CommonUI/src/Components/Pill/Pill'; -import { Green500, Yellow500 } from 'Common/Types/BrandColors'; +import { Green, Yellow } from 'Common/Types/BrandColors'; import Navigation from 'CommonUI/src/Utils/Navigation'; const StatusPageDelete: FunctionComponent = ( @@ -84,11 +84,11 @@ const StatusPageDelete: FunctionComponent = ( getElement: (item: JSONObject): ReactElement => { if (item['password']) { return ( - + ); } return ( - + ); }, }, diff --git a/Dashboard/src/Pages/StatusPages/View/SMSSubscribers.tsx b/Dashboard/src/Pages/StatusPages/View/SMSSubscribers.tsx index c048817e38..40c6d8ecd9 100644 --- a/Dashboard/src/Pages/StatusPages/View/SMSSubscribers.tsx +++ b/Dashboard/src/Pages/StatusPages/View/SMSSubscribers.tsx @@ -17,7 +17,7 @@ import ModelTable from 'CommonUI/src/Components/ModelTable/ModelTable'; import NotNull from 'Common/Types/BaseDatabase/NotNull'; import { JSONObject } from 'Common/Types/JSON'; import Pill from 'CommonUI/src/Components/Pill/Pill'; -import { Green500, Red500 } from 'Common/Types/BrandColors'; +import { Green, Red } from 'Common/Types/BrandColors'; import Navigation from 'CommonUI/src/Utils/Navigation'; import StatusPage from 'Model/Models/StatusPage'; import ModelAPI from 'CommonUI/src/Utils/ModelAPI/ModelAPI'; @@ -265,14 +265,14 @@ const StatusPageDelete: FunctionComponent = ( if (item['isUnsubscribed']) { return ( ); } return ( ); diff --git a/Dashboard/src/Pages/Telemetry/Services/View/Traces/Index.tsx b/Dashboard/src/Pages/Telemetry/Services/View/Traces/Index.tsx index f2987ad108..629b25003e 100644 --- a/Dashboard/src/Pages/Telemetry/Services/View/Traces/Index.tsx +++ b/Dashboard/src/Pages/Telemetry/Services/View/Traces/Index.tsx @@ -12,7 +12,7 @@ import { DropdownOption } from 'CommonUI/src/Components/Dropdown/Dropdown'; import { JSONObject } from 'Common/Types/JSON'; import ColorSquareCube from 'CommonUI/src/Components/ColorSquareCube/ColorSquareCube'; import AnalyticsBaseModel from 'Common/AnalyticsModels/BaseModel'; -import { Green500, Red500 } from 'Common/Types/BrandColors'; +import { Green, Red } from 'Common/Types/BrandColors'; const TracesList: FunctionComponent = ( _props: PageComponentProps @@ -123,7 +123,7 @@ const TracesList: FunctionComponent = ( SpanStatus.Unset || !spanObj.statusCode) ? ( ) : ( @@ -133,7 +133,7 @@ const TracesList: FunctionComponent = ( spanObj.statusCode === SpanStatus.Ok ? ( ) : ( @@ -143,7 +143,7 @@ const TracesList: FunctionComponent = ( spanObj.statusCode === SpanStatus.Error ? ( ) : ( diff --git a/Dashboard/src/Pages/UserSettings/OnCallLogs.tsx b/Dashboard/src/Pages/UserSettings/OnCallLogs.tsx index b58e2024fd..5fbde9c499 100644 --- a/Dashboard/src/Pages/UserSettings/OnCallLogs.tsx +++ b/Dashboard/src/Pages/UserSettings/OnCallLogs.tsx @@ -18,7 +18,7 @@ import OnCallDutyPolicyEscalationRule from 'Model/Models/OnCallDutyPolicyEscalat import EscalationRuleView from '../../Components/OnCallPolicy/EscalationRule/EscalationRule'; import Pill from 'CommonUI/src/Components/Pill/Pill'; import UserNotificationExecutionStatus from 'Common/Types/UserNotification/UserNotificationExecutionStatus'; -import { Green500, Red500, Yellow500 } from 'Common/Types/BrandColors'; +import { Green, Red, Yellow } from 'Common/Types/BrandColors'; import { ButtonStyleType } from 'CommonUI/src/Components/Button/Button'; import ConfirmModal from 'CommonUI/src/Components/Modal/ConfirmModal'; import DropdownUtil from 'CommonUI/src/Utils/Dropdown'; @@ -207,7 +207,7 @@ const Settings: FunctionComponent = ( ) { return ( = ( ) { return ( = ( ) { return ( = ( ) { return ( = ( return ( ); diff --git a/Dashboard/src/Pages/UserSettings/OnCallLogsTimeline.tsx b/Dashboard/src/Pages/UserSettings/OnCallLogsTimeline.tsx index 37120e81e5..ec8f66793e 100644 --- a/Dashboard/src/Pages/UserSettings/OnCallLogsTimeline.tsx +++ b/Dashboard/src/Pages/UserSettings/OnCallLogsTimeline.tsx @@ -13,7 +13,7 @@ import FieldType from 'CommonUI/src/Components/Types/FieldType'; import { JSONObject } from 'Common/Types/JSON'; import Pill from 'CommonUI/src/Components/Pill/Pill'; import UserNotificationStatus from 'Common/Types/UserNotification/UserNotificationStatus'; -import { Green500, Red500, Yellow500 } from 'Common/Types/BrandColors'; +import { Green, Red, Yellow } from 'Common/Types/BrandColors'; import { ButtonStyleType } from 'CommonUI/src/Components/Button/Button'; import ConfirmModal from 'CommonUI/src/Components/Modal/ConfirmModal'; import ObjectID from 'Common/Types/ObjectID'; @@ -146,7 +146,7 @@ const Settings: FunctionComponent = ( ) { return ( ); @@ -156,7 +156,7 @@ const Settings: FunctionComponent = ( ) { return ( = ( ) { return ( ); @@ -177,7 +177,7 @@ const Settings: FunctionComponent = ( ) { return ( ); @@ -185,7 +185,7 @@ const Settings: FunctionComponent = ( return ( ); diff --git a/StatusPage/src/Components/Monitor/MonitorOverview.tsx b/StatusPage/src/Components/Monitor/MonitorOverview.tsx index 584952f4d3..737e31e924 100644 --- a/StatusPage/src/Components/Monitor/MonitorOverview.tsx +++ b/StatusPage/src/Components/Monitor/MonitorOverview.tsx @@ -1,4 +1,4 @@ -import { Green500 } from 'Common/Types/BrandColors'; +import { Green } from 'Common/Types/BrandColors'; import MonitorUptimeGraph from 'CommonUI/src/Components/MonitorGraphs/Uptime'; import React, { FunctionComponent, ReactElement } from 'react'; import MonitorStatus from 'Model/Models/MonitorStatus'; @@ -67,7 +67,7 @@ const MonitorOverview: FunctionComponent = ( style={{ color: props.currentStatus?.color?.toString() || - Green500.toString(), + Green.toString(), }} > {uptimePercent}% uptime @@ -82,7 +82,7 @@ const MonitorOverview: FunctionComponent = ( style={{ color: props.currentStatus?.color?.toString() || - Green500.toString(), + Green.toString(), }} > {props.currentStatus?.name || 'Operational'} diff --git a/StatusPage/src/Pages/Incidents/Detail.tsx b/StatusPage/src/Pages/Incidents/Detail.tsx index f382a0c0f5..b9932032c1 100644 --- a/StatusPage/src/Pages/Incidents/Detail.tsx +++ b/StatusPage/src/Pages/Incidents/Detail.tsx @@ -33,7 +33,7 @@ import EventItem, { import Navigation from 'CommonUI/src/Utils/Navigation'; import Monitor from 'Model/Models/Monitor'; import Color from 'Common/Types/Color'; -import { Green500, Gray500, Red500 } from 'Common/Types/BrandColors'; +import { Green, Gray500, Red } from 'Common/Types/BrandColors'; import IconProp from 'Common/Types/Icon/IconProp'; import EmptyState from 'CommonUI/src/Components/EmptyState/EmptyState'; import API from '../../Utils/API'; @@ -73,7 +73,7 @@ export const getIncidentEventItem: GetIncidentEventItemFunction = ( const timeline: Array = []; let currentStateStatus: string = ''; - let currentStatusColor: Color = Green500; + let currentStatusColor: Color = Green; if (isSummary) { // If this is summary then reverse the order so we show the latest first @@ -140,7 +140,7 @@ export const getIncidentEventItem: GetIncidentEventItemFunction = ( currentStateStatus = incidentStateTimeline.incidentState?.name || ''; currentStatusColor = - incidentStateTimeline.incidentState?.color || Green500; + incidentStateTimeline.incidentState?.color || Green; } // If this incident is a sumamry then don't include all the notes . @@ -219,7 +219,7 @@ export const getIncidentEventItem: GetIncidentEventItemFunction = ( ? 'Created at ' + OneUptimeDate.getDateAsLocalFormattedString(incident.createdAt!) : '', - eventTypeColor: Red500, + eventTypeColor: Red, labels: incident.labels?.map((label: Label) => { return { diff --git a/StatusPage/src/Pages/Overview/Overview.tsx b/StatusPage/src/Pages/Overview/Overview.tsx index 5fb3c3da36..88d417445a 100644 --- a/StatusPage/src/Pages/Overview/Overview.tsx +++ b/StatusPage/src/Pages/Overview/Overview.tsx @@ -30,7 +30,7 @@ import StatusPageAnnouncement from 'Model/Models/StatusPageAnnouncement'; import ScheduledMaintenance from 'Model/Models/ScheduledMaintenance'; import ScheduledMaintenancePublicNote from 'Model/Models/ScheduledMaintenancePublicNote'; import MonitorOverview from '../../Components/Monitor/MonitorOverview'; -import { Green500 } from 'Common/Types/BrandColors'; +import { Green } from 'Common/Types/BrandColors'; import OneUptimeDate from 'Common/Types/Date'; import Dictionary from 'Common/Types/Dictionary'; import IncidentGroup from '../../Types/IncidentGroup'; @@ -414,7 +414,7 @@ const Overview: FunctionComponent = ( if (!currentStatus) { currentStatus = new MonitorStatus(); currentStatus.name = 'Operational'; - currentStatus.color = Green500; + currentStatus.color = Green; } elements.push( @@ -457,7 +457,7 @@ const Overview: FunctionComponent = ( showCurrentStatus={resource.showCurrentStatus} uptimeGraphHeight={10} defaultBarColor={ - statusPage?.defaultBarColor || Green500 + statusPage?.defaultBarColor || Green } /> ); @@ -480,7 +480,7 @@ const Overview: FunctionComponent = ( if (!currentStatus) { currentStatus = new MonitorStatus(); currentStatus.name = 'Operational'; - currentStatus.color = Green500; + currentStatus.color = Green; } elements.push( @@ -539,7 +539,7 @@ const Overview: FunctionComponent = ( showCurrentStatus={resource.showCurrentStatus} uptimeGraphHeight={10} defaultBarColor={ - statusPage?.defaultBarColor || Green500 + statusPage?.defaultBarColor || Green } /> ); @@ -666,7 +666,7 @@ const Overview: FunctionComponent = ( ): ReactElement => { let currentStatus: MonitorStatus = new MonitorStatus(); currentStatus.name = 'Operational'; - currentStatus.color = Green500; + currentStatus.color = Green; let hasResource: boolean = false; for (const resource of statusPageResources) { @@ -708,7 +708,7 @@ const Overview: FunctionComponent = ( style={{ color: currentStatus?.color?.toString() || - Green500.toString(), + Green.toString(), }} > {currentStatus?.name || 'Operational'} diff --git a/StatusPage/src/Pages/ScheduledEvent/Detail.tsx b/StatusPage/src/Pages/ScheduledEvent/Detail.tsx index 9c4d3b69e6..e174bac86e 100644 --- a/StatusPage/src/Pages/ScheduledEvent/Detail.tsx +++ b/StatusPage/src/Pages/ScheduledEvent/Detail.tsx @@ -30,7 +30,7 @@ import EventItem, { } from 'CommonUI/src/Components/EventItem/EventItem'; import Navigation from 'CommonUI/src/Utils/Navigation'; import Color from 'Common/Types/Color'; -import { Green500, Gray500, Yellow500 } from 'Common/Types/BrandColors'; +import { Green, Gray500, Yellow } from 'Common/Types/BrandColors'; import EmptyState from 'CommonUI/src/Components/EmptyState/EmptyState'; import IconProp from 'Common/Types/Icon/IconProp'; import API from '../../Utils/API'; @@ -72,7 +72,7 @@ export const getScheduledEventEventItem: GetScheduledEventEventItemFunction = ( /// get timeline. let currentStateStatus: string = ''; - let currentStatusColor: Color = Green500; + let currentStatusColor: Color = Green; const timeline: Array = []; @@ -156,7 +156,7 @@ export const getScheduledEventEventItem: GetScheduledEventEventItemFunction = ( .scheduledMaintenanceState?.name || ''; currentStatusColor = scheduledMaintenanceEventstateTimeline - .scheduledMaintenanceState?.color || Green500; + .scheduledMaintenanceState?.color || Green; } if (isSummary) { @@ -245,7 +245,7 @@ export const getScheduledEventEventItem: GetScheduledEventEventItemFunction = ( isDetailItem: !isSummary, currentStatus: currentStateStatus, currentStatusColor: currentStatusColor, - eventTypeColor: Yellow500, + eventTypeColor: Yellow, eventSecondDescription: scheduledMaintenance.startsAt ? 'Scheduled at ' + OneUptimeDate.getDateAsLocalFormattedString(