From 5825bcf9b3249b3b8c643dd7c49e5099729701ac Mon Sep 17 00:00:00 2001 From: Jannat Patel Date: Mon, 8 Dec 2025 10:37:08 +0530 Subject: [PATCH] fix: use frappe-ui theme colors and fixed tailwind config --- frontend/package.json | 7 +- .../src/components/Controls/ColorSwatches.vue | 10 +- frontend/src/components/CourseCard.vue | 5 +- .../Modals/CourseProgressSummary.vue | 12 +- .../src/components/Notes/InlineLessonMenu.vue | 5 +- frontend/src/components/StudentHeatmap.vue | 12 +- frontend/src/pages/Programs/ProgramForm.vue | 10 +- .../pages/Programs/ProgramProgressSummary.vue | 12 +- frontend/src/utils/frappe-ui-colors.json | 499 ++++++ frontend/src/utils/index.js | 11 +- frontend/src/utils/theme.js | 5 - frontend/vite.config.js | 4 +- frontend/yarn.lock | 113 +- lms/lms/api.py | 2 +- package.json | 2 +- yarn.lock | 1355 ----------------- 16 files changed, 598 insertions(+), 1466 deletions(-) create mode 100644 frontend/src/utils/frappe-ui-colors.json delete mode 100644 frontend/src/utils/theme.js delete mode 100644 yarn.lock diff --git a/frontend/package.json b/frontend/package.json index 82a6920b..4a7937b0 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -6,8 +6,9 @@ "scripts": { "dev": "vite", "serve": "vite preview", - "build": "vite build --base=/assets/lms/frontend/ && yarn copy-html-entry", - "copy-html-entry": "cp ../lms/public/frontend/index.html ../lms/www/lms.html" + "build": "vite build --base=/assets/lms/frontend/ && yarn copy-html-entry && yarn copy-colors-json", + "copy-html-entry": "cp ../lms/public/frontend/index.html ../lms/www/lms.html", + "copy-colors-json": "cp node_modules/frappe-ui/src/tailwind/colors.json src/utils/frappe-ui-colors.json" }, "dependencies": { "@codemirror/lang-html": "6.4.9", @@ -40,7 +41,6 @@ "pinia": "2.0.33", "plyr": "3.7.8", "socket.io-client": "4.7.2", - "tailwindcss": "3.4.15", "thememirror": "2.0.1", "typescript": "5.7.2", "vue": "^3.5.0", @@ -56,6 +56,7 @@ "autoprefixer": "10.4.2", "postcss": "8.4.5", "vite": "5.0.11", + "tailwindcss": "^3.4.15", "vite-plugin-pwa": "0.15.0" }, "resolutions": { diff --git a/frontend/src/components/Controls/ColorSwatches.vue b/frontend/src/components/Controls/ColorSwatches.vue index 60e21d2c..194cba3c 100644 --- a/frontend/src/components/Controls/ColorSwatches.vue +++ b/frontend/src/components/Controls/ColorSwatches.vue @@ -21,8 +21,7 @@ :style=" modelValue ? { - backgroundColor: - theme.backgroundColor[modelValue.toLowerCase()][400], + backgroundColor: getColor(modelValue.toLowerCase(), 400) } : {} " @@ -55,8 +54,8 @@ :key="color" class="size-5 rounded-full cursor-pointer" :style="{ - backgroundColor: - theme.backgroundColor[color.toLowerCase()][400], + backgroundColor: + getColor(color.toLowerCase(), 400), }" @click=" (e) => { @@ -79,7 +78,7 @@ import { Button, FormControl, Popover } from 'frappe-ui' import { computed } from 'vue' import { Palette, X } from 'lucide-vue-next' -import { theme } from '@/utils/theme' +import { getColor } from '@/utils' const emit = defineEmits(['update:modelValue', 'change']) @@ -105,4 +104,5 @@ const colors = computed(() => { 'Yellow', ] }) + diff --git a/frontend/src/components/CourseCard.vue b/frontend/src/components/CourseCard.vue index d1093cc2..80afae12 100644 --- a/frontend/src/components/CourseCard.vue +++ b/frontend/src/components/CourseCard.vue @@ -136,11 +136,11 @@ import { Award, BookOpen, GraduationCap, Star, Users } from 'lucide-vue-next' import { sessionStore } from '@/stores/session' import { Tooltip } from 'frappe-ui' -import { theme } from '@/utils/theme' import { formatAmount } from '@/utils' import CourseInstructors from '@/components/CourseInstructors.vue' import UserAvatar from '@/components/UserAvatar.vue' import ProgressBar from '@/components/ProgressBar.vue' +import colors from '@/utils/frappe-ui-colors.json' const { user } = sessionStore() @@ -152,8 +152,9 @@ const props = defineProps({ }) const getGradientColor = () => { + let theme = localStorage.getItem('theme') == "light" ? "lightMode": "darkMode" let color = props.course.card_gradient?.toLowerCase() || 'blue' - let colorMap = theme.backgroundColor[color] + let colorMap = colors[theme][color] return `linear-gradient(to top right, black, ${colorMap[400]})` /* return `bg-gradient-to-br from-${color}-100 via-${color}-200 to-${color}-400` */ /* return `linear-gradient(to bottom right, ${colorMap[100]}, ${colorMap[400]})` */ diff --git a/frontend/src/components/Modals/CourseProgressSummary.vue b/frontend/src/components/Modals/CourseProgressSummary.vue index b98b58e4..fbc9b692 100644 --- a/frontend/src/components/Modals/CourseProgressSummary.vue +++ b/frontend/src/components/Modals/CourseProgressSummary.vue @@ -114,11 +114,11 @@ categoryColumn: 'category', valueColumn: 'count', colors: [ - theme.colors.red['400'], - theme.colors.amber['400'], - theme.colors.pink['400'], - theme.colors.blue['400'], - theme.colors.green['400'], + getColor('red', 400), + getColor('amber', 400), + getColor('pink', 400), + getColor('blue', 400), + getColor('green', 400), ], }" /> @@ -146,7 +146,7 @@ import { NumberChart, } from 'frappe-ui' import { computed, ref, watch } from 'vue' -import { theme } from '@/utils/theme' +import { getColor } from '@/utils' const show = defineModel({ default: false }) const searchFilter = ref(null) diff --git a/frontend/src/components/Notes/InlineLessonMenu.vue b/frontend/src/components/Notes/InlineLessonMenu.vue index 32a1a6d3..9c0c6a4c 100644 --- a/frontend/src/components/Notes/InlineLessonMenu.vue +++ b/frontend/src/components/Notes/InlineLessonMenu.vue @@ -20,7 +20,7 @@ @@ -55,9 +55,8 @@