[Omn-190] - [Settings View] - Labels

packages/web/utils/settings-page/labels/labelColorObjects.tsx

@@ -0,0 +1,46 @@
+import { LabelColorObjects } from './types'
+
+export const labelColorObjects: LabelColorObjects = {
+  '#FF5D99': {
+    colorName: 'red',
+    text: '#B20042',
+    border: '#FF5D9966',
+    background: '#FF5D990D',
+  },
+  '#7CFF7B': {
+    colorName: 'green',
+    text: '#01A800',
+    border: '#7CFF7B66',
+    background: '#7CFF7B0D',
+  },
+  '#FFD234': {
+    colorName: 'yellow',
+    text: '#947300',
+    border: '#FFD23466',
+    background: '#FFD2340D',
+  },
+  '#7BE4FF': {
+    colorName: 'blue',
+    text: '#007E9E',
+    border: '#7BE4FF66',
+    background: '#7BE4FF0D',
+  },
+  '#CE88EF': {
+    colorName: 'purple',
+    text: '#B759E3',
+    border: '#CE88EF66',
+    background: '#CE88EF0D',
+  },
+  '#EF8C43': {
+    colorName: 'orange',
+    text: '#F37417',
+    border: '#EF8C4366',
+    background: '#EF8C430D',
+  },
+  'custom color': {
+    colorName: 'custom color',
+    text: '#A5A4A1',
+    border: '#D8D7D566',
+    background: '#D8D7D50D',
+  },
+}

packages/web/utils/settings-page/labels/types.ts

@@ -0,0 +1,71 @@
+import React from "react";
+import { Label } from "../../../lib/networking/queries/useGetLabelsQuery";
+
+export type LabelColor =
+  | '#FF5D99'
+  | '#7CFF7B'
+  | '#FFD234'
+  | '#7BE4FF'
+  | '#CE88EF'
+  | '#EF8C43'
+  | 'custom color';
+
+export type LabelOptionProps = {
+  color: string;
+  isDropdownOption?: boolean;
+  isCreateMode: boolean | undefined;
+  labelId: string;
+};
+
+export type ColorDetailsProps = {
+  colorName: string;
+  color: string;
+  icon: JSX.Element;
+};
+
+export type LabelColorObject = {
+  colorName: string;
+  text: string;
+  border: string;
+  background: string;
+};
+
+export type LabelColorObjects = {
+  [key: string]: LabelColorObject;
+};
+
+export type LabelColorHex = {
+  rowId: string;
+  value: LabelColor;
+};
+
+export type GenericTableCardProps = {
+  label: Label | null;
+  editingLabelId: string | null;
+  labelColorHex: LabelColorHex;
+  isCreateMode: boolean;
+  nameInputText: string,
+  descriptionInputText: string,
+  isMobileView?: boolean;
+  handleGenerateRandomColor: (rowId?: string) => void;
+  setEditingLabelId: (id: string | null) => void;
+  setLabelColorHex: (color: LabelColorHex) => void;
+  deleteLabel: (id: string) => void;
+  setNameInputText: (text: string) => void,
+  setDescriptionInputText: (text: string) => void,
+  resetState: () => void,
+  createLabel: () => void,
+  updateLabel: (id: string) => void;
+  setIsCreateMode: (isCreateMode: boolean) => void,
+  onEditPress: (label: Label | null) => void,
+};
+
+export type LabelColorDropdownProps = {
+  isCreateMode: boolean;
+  canEdit: boolean;
+  labelColorHexRowId: string;
+  labelColorHexValue: string;
+  labelId: string;
+  labelColor: LabelColor;
+  setLabelColorHex: (color: LabelColorHex) => void;
+};