Add colors to data types (#448)

* Color added to main datatypes

* Add tailwind colors to all data types and display them

Author: Happy4Game

src/components/EditorCanvas/Table.jsx

@@ -373,8 +373,12 @@ export default function Table(props) {
           ) : settings.showDataTypes ? (
             <div className="flex gap-1 items-center">
               {fieldData.primary && <IconKeyStroked />}
-              {!fieldData.notNull && <span>?</span>}
-              <span>
+              {!fieldData.notNull && <span className="font-mono">?</span>}
+              <span
+                className={
+                  "font-mono " + dbToTypes[database][fieldData.type].color
+                }
+              >
                 {fieldData.type +
                   ((dbToTypes[database][fieldData.type].isSized ||
                     dbToTypes[database][fieldData.type].hasPrecision) &&

src/data/constants.js

@@ -1,6 +1,18 @@
 export const defaultBlue = "#175e7a";
 export const defaultNoteTheme = "#fcf7ac";
 export const darkBgTheme = "#16161A";
+export const stringColor = "text-orange-500";
+export const intColor = "text-yellow-500";
+export const decimalColor = "text-lime-500";
+export const booleanColor = "text-violet-500";
+export const binaryColor = "text-emerald-500";
+export const enumSetColor = "text-sky-500";
+export const documentColor = "text-indigo-500";
+export const networkIdColor = "text-rose-500";
+export const geometricColor = "text-fuchsia-500";
+export const vectorColor = "text-slate-500";
+export const otherColor = "text-zinc-500";
+export const dateColor = "text-cyan-500";
 export const tableHeaderHeight = 50;
 export const tableWidth = 220;
 export const tableFieldHeight = 36;