Update BrandColors imports to use Green instead of Green500

OneUptime · Apr 19, 2024 · fb070b9 · fb070b9
1 parent add3139
commit fb070b9
Show file tree

Hide file tree

Showing 35 changed files with 171 additions and 135 deletions.
diff --git 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 (
                                             <Pill
                                                 text="Enabled"
-                                                color={Green500}
+                                                color={Green}
                                             />
                                         );
                                     } else if (!item['sendgridApiKey']) {
                                         return (
                                             <Pill
                                                 text="Not Enabled. Please add the API key."
-                                                color={Red500}
+                                                color={Red}
                                             />
                                         );
                                     } else if (!item['sendgridFromEmail']) {
                                         return (
                                             <Pill
                                                 text="Not Enabled. Please add the From Email."
-                                                color={Red500}
+                                                color={Red}
                                             />
                                         );
                                     } else if (!item['sendgridFromName']) {
                                         return (
                                             <Pill
                                                 text="Not Enabled. Please add the From Name."
-                                                color={Red500}
+                                                color={Red}
                                             />
                                         );
                                     }

diff --git 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 (
                                     <Statusbubble
                                         text={'Connected'}
-                                        color={Green500}
+                                        color={Green}
                                         shouldAnimate={true}
                                     />
                                 );
@@ -206,7 +206,7 @@ const Settings: FunctionComponent = (): ReactElement => {
                             return (
                                 <Statusbubble
                                     text={'Disconnected'}
-                                    color={Red500}
+                                    color={Red}
                                     shouldAnimate={false}
                                 />
                             );

diff --git 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
@@ -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
@@ -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<Model> {
         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<Model> {
         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<Model> {
         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<Model> {
         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<Model> {
         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<Model> {
         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<Model> {
         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<Model> {
         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<Model> {
             '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<Model> {
         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
@@ -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<StatusPage> {
     public constructor(postgresDatabase?: PostgresDatabase) {
@@ -73,7 +73,7 @@ export class Service extends DatabaseService<StatusPage> {
         }
 
         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
@@ -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
@@ -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<ComponentProps> = (
                         <Icon
                             className="h-5 w-5"
                             icon={IconProp.CheckCircle}
-                            color={Green500}
+                            color={Green}
                         />
                     ) : (
                         <Icon
                             className="h-5 w-5"
                             icon={IconProp.CircleClose}
-                            color={Red500}
+                            color={Red}
                         />
                     )}
                 </div>

diff --git a/CommonUI/src/Components/ColorCircle/ColorCircle.tsx 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<ComponentProps> = (
+    props: ComponentProps
+): ReactElement => {
+    return (
+        <Tooltip text={props.tooltip}>
+            <div
+                className="rounded-max h-3 w-3"
+                style={{
+                    backgroundColor: props.color.toString(),
+                }}
+            ></div>
+        </Tooltip>
+    );
+};
+
+export default ColorCircle;
diff --git 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<ComponentProps> = (
     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<ComponentProps> = (
 
         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
@@ -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: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
                             marginLeft: '5px',
                         }}
                     >
-                        <Pill text={`${planName} Plan`} color={Yellow500} />
+                        <Pill text={`${planName} Plan`} color={Yellow} />
                     </span>
                 )}
             </span>

diff --git 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
@@ -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<ComponentProps> = (props: ComponentProps) => {
                 {props.data.metadata.componentType === ComponentType.Trigger &&
                     props.data.nodeType !== NodeType.PlaceholderNode &&
                     !props.data.isPreview && (
-                        <Pill text="Trigger" color={Green500} />
+                        <Pill text="Trigger" color={Green} />
                     )}
             </div>
             {!props.data.isPreview &&