fix: use frappe-ui theme colors and fixed tailwind config

frontend/src/components/Controls/ColorSwatches.vue

@@ -21,7 +21,10 @@
 								:style="
 									modelValue
 										? {
-												backgroundColor: getColor(modelValue.toLowerCase(), 400)
+												backgroundColor: getColor(
+													modelValue.toLowerCase(),
+													400
+												),
 										  }
 										: {}
 								"
@@ -54,8 +57,7 @@
 							:key="color"
 							class="size-5 rounded-full cursor-pointer"
 							:style="{
-								backgroundColor: 
-									getColor(color.toLowerCase(), 400),
+								backgroundColor: getColor(color.toLowerCase(), 400),
 							}"
 							@click="
 								(e) => {
@@ -104,5 +106,4 @@ const colors = computed(() => {
 		'Yellow',
 	]
 })
-
 </script>

frontend/src/components/CourseCard.vue

@@ -152,7 +152,8 @@ const props = defineProps({
 })
 
 const getGradientColor = () => {
-	let theme = localStorage.getItem('theme') == "light" ? "lightMode": "darkMode"
+	let theme =
+		localStorage.getItem('theme') == 'light' ? 'lightMode' : 'darkMode'
 	let color = props.course.card_gradient?.toLowerCase() || 'blue'
 	let colorMap = colors[theme][color]
 	return `linear-gradient(to top right, black, ${colorMap[400]})`

frontend/src/components/StudentHeatmap.vue

@@ -81,11 +81,11 @@ const chartOptions = computed(() => {
 				enableShades: true,
 				colorScale: {
 					ranges: [
-						{ from: 0, to: 0, color: getColor("green", 400) },
-						{ from: 1, to: 5, color: getColor("green", 200) },
-						{ from: 6, to: 15, color: getColor("green", 500) },
-						{ from: 16, to: 30, color: getColor("green", 700) },
-						{ from: 31, to: 100, color: getColor("green", 800) },
+						{ from: 0, to: 0, color: getColor('green', 400) },
+						{ from: 1, to: 5, color: getColor('green', 200) },
+						{ from: 6, to: 15, color: getColor('green', 500) },
+						{ from: 16, to: 30, color: getColor('green', 700) },
+						{ from: 31, to: 100, color: getColor('green', 800) },
 					],
 				},
 			},

frontend/src/utils/index.js

@@ -807,6 +807,7 @@ export const decodeEntities = (encodedString) => {
 }
 
 export const getColor = (color, shade) => {
-	let theme = localStorage.getItem('theme') == "light" ? "lightMode" : "darkMode"
+	let theme =
+		localStorage.getItem('theme') == 'light' ? 'lightMode' : 'darkMode'
 	return colorsJSON[theme][color][shade]
-}
+}

frontend/vite.config.js

@@ -65,6 +65,6 @@ export default defineConfig({
 			'highlight.js',
 			'plyr',
 		],
-		exclude: ['frappe-ui']
+		exclude: ['frappe-ui'],
 	},
 })