Add Colors Constant To tailwind.config.ts

This allows importing colors from a single place for the rest of the app.
Also added Atlassify to known words in .vscode settings

.vscode/settings.json

@@ -13,5 +13,8 @@
   ],
   "[xml]": {
     "editor.defaultFormatter": "redhat.vscode-xml"
-  }
+  },
+  "cSpell.words": [
+    "Atlassify"
+  ]
 }

src/components/Sidebar.tsx

@@ -19,6 +19,7 @@ import { quitApp } from '../utils/comms';
 import { getFilterCount } from '../utils/filters';
 import { openMyNotifications } from '../utils/links';
 import { getNotificationCount } from '../utils/notifications/notifications';
+import { colors } from '../../tailwind.config';
 
 export const Sidebar: FC = () => {
   const navigate = useNavigate();
@@ -238,7 +239,7 @@ export const Sidebar: FC = () => {
                     {...iconProps}
                     size="medium"
                     primaryColor="white"
-                    secondaryColor="#388BFF"
+                    secondaryColor={colors['sidebar']}
                   />
                 )}
                 shape="circle"

tailwind.config.js → tailwind.config.ts

@@ -1,16 +1,21 @@
-/** @type {import('tailwindcss').Config} */
-export default {
+import type { Config } from 'tailwindcss';
+
+export const colors = {
+  sidebar: '#388BFF',
+};
+
+const config: Config = {
   content: ['./src/**/*.js', './src/**/*.ts', './src/**/*.tsx'],
   darkMode: 'class',
   theme: {
     extend: {
-      colors: {
-        sidebar: '#388BFF',
-      },
+      colors: colors,
     },
   },
   variants: {
     extend: {},
   },
   plugins: [],
 };
+
+export default config;