Add tailwind colors to all data types and display them

src/components/EditorCanvas/Table.jsx

@@ -373,11 +373,12 @@ export default function Table(props) {
           ) : settings.showDataTypes ? (
             <div className="flex gap-1 items-center">
               {fieldData.primary && <IconKeyStroked />}
-              {!fieldData.notNull && <span style={{fontFamily: 'monospace'}}>NULL</span>}
+              {!fieldData.notNull && <span className="font-mono">?</span>}
-              <span style={{
+              <span
-                color: dbToTypes[database][fieldData.type].color,
+                className={
-                fontFamily: 'monospace'
+                  "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;