diff --git a/src/components/dashboard/dashboard.tsx b/src/components/dashboard/dashboard.tsx index 7a7db40..06ceae3 100644 --- a/src/components/dashboard/dashboard.tsx +++ b/src/components/dashboard/dashboard.tsx @@ -116,7 +116,7 @@ export default function Dashboard() { return (
-
+
{shouldShowExportNotification(user) && ( @@ -127,8 +127,8 @@ export default function Dashboard() { )} -
-

Dashboard

+
+

Dashboard

@@ -151,7 +151,7 @@ export default function Dashboard() {
- + Total Revenue - + Subscriptions - Sales + + Sales + - + Active Now ({ > {title} {column.getIsSorted() === "desc" ? ( - + ) : column.getIsSorted() === "asc" ? ( - + ) : ( - + )} diff --git a/src/components/projects/data-table-row-actions.tsx b/src/components/projects/data-table-row-actions.tsx index 9789bb5..48ee87e 100644 --- a/src/components/projects/data-table-row-actions.tsx +++ b/src/components/projects/data-table-row-actions.tsx @@ -32,9 +32,11 @@ export function DataTableRowActions({ row }: DataTableRowActionsProps) View - - Edit - + {row.original.archivedAt === null && ( + + Edit + + )} ); diff --git a/src/components/projects/priority.tsx b/src/components/projects/priority.tsx index db54fd0..02bc111 100644 --- a/src/components/projects/priority.tsx +++ b/src/components/projects/priority.tsx @@ -4,9 +4,14 @@ import { priorities } from "@/models/project"; // Adjust the import path as need interface PriorityIconLabelProps { priorityValue: string; justify?: "left" | "right"; + className?: string; } -const PriorityIconLabel: React.FC = ({ priorityValue, justify }) => { +const PriorityIconLabel: React.FC = ({ + priorityValue, + justify, + className, +}) => { const priority = priorities.find((priority) => priority.value === priorityValue); if (!priority) { @@ -16,8 +21,8 @@ const PriorityIconLabel: React.FC = ({ priorityValue, ju const Icon = priority.icon; const justifyClass = justify === "right" ? "justify-end" : "justify-start"; return ( -
- {Icon && } +
+ {Icon && } {priority.label}
); diff --git a/src/components/projects/status.tsx b/src/components/projects/status.tsx index 1aaf269..58a0fe2 100644 --- a/src/components/projects/status.tsx +++ b/src/components/projects/status.tsx @@ -3,9 +3,11 @@ import { statuses } from "@/models/project"; // Adjust the import path as needed interface StatusIconLabelProps { statusValue: string; + justify?: "left" | "right"; + className?: string; } -const StatusIconLabel: React.FC = ({ statusValue }) => { +const StatusIconLabel: React.FC = ({ statusValue, justify, className }) => { const status = statuses.find((status) => status.value === statusValue); if (!status) { @@ -13,9 +15,10 @@ const StatusIconLabel: React.FC = ({ statusValue }) => { } const Icon = status.icon; + const justifyClass = justify === "right" ? "justify-end" : "justify-start"; return ( -
- {Icon && } +
+ {Icon && } {status.label}
); diff --git a/src/components/tasks/data-table-column-header.tsx b/src/components/tasks/data-table-column-header.tsx index f387db7..1848318 100644 --- a/src/components/tasks/data-table-column-header.tsx +++ b/src/components/tasks/data-table-column-header.tsx @@ -36,11 +36,11 @@ export function DataTableColumnHeader({ > {title} {column.getIsSorted() === "desc" ? ( - + ) : column.getIsSorted() === "asc" ? ( - + ) : ( - + )} diff --git a/src/components/tasks/priority.tsx b/src/components/tasks/priority.tsx index ffe08c2..dca8921 100644 --- a/src/components/tasks/priority.tsx +++ b/src/components/tasks/priority.tsx @@ -4,9 +4,14 @@ import { priorities } from "@/models/task"; // Adjust the import path as needed interface PriorityIconLabelProps { priorityValue: string; justify?: "left" | "right"; + className?: string; } -const PriorityIconLabel: React.FC = ({ priorityValue, justify }) => { +const PriorityIconLabel: React.FC = ({ + priorityValue, + justify, + className, +}) => { const priority = priorities.find((priority) => priority.value === priorityValue); if (!priority) { @@ -16,8 +21,8 @@ const PriorityIconLabel: React.FC = ({ priorityValue, ju const Icon = priority.icon; const justifyClass = justify === "right" ? "justify-end" : "justify-start"; return ( -
- {Icon && } +
+ {Icon && } {priority.label}
); diff --git a/src/components/tasks/status.tsx b/src/components/tasks/status.tsx index e648d9c..262a97e 100644 --- a/src/components/tasks/status.tsx +++ b/src/components/tasks/status.tsx @@ -3,9 +3,11 @@ import { statuses } from "@/models/task"; // Adjust the import path as needed interface StatusIconLabelProps { statusValue: string; + justify?: "left" | "right"; + className?: string; } -const StatusIconLabel: React.FC = ({ statusValue }) => { +const StatusIconLabel: React.FC = ({ statusValue, justify, className }) => { const status = statuses.find((status) => status.value === statusValue); if (!status) { @@ -13,9 +15,10 @@ const StatusIconLabel: React.FC = ({ statusValue }) => { } const Icon = status.icon; + const justifyClass = justify === "right" ? "justify-end" : "justify-start"; return ( -
- {Icon && } +
+ {Icon && } {status.label}
); diff --git a/src/components/themes/theme-switcher.tsx b/src/components/themes/theme-switcher.tsx index 90ebc45..92c0795 100644 --- a/src/components/themes/theme-switcher.tsx +++ b/src/components/themes/theme-switcher.tsx @@ -14,33 +14,7 @@ import { import { ThemeDiamond } from "./theme-diamond"; import { useUser } from "../UserContext"; import { saveData } from "@/utils/save"; - -// Utility function to set the theme -function setTheme(theme: any) { - const htmlElement = document.documentElement; - const themes = ["default", "palette", "sapphire", "ruby", "emerald", "daylight", "midnight"]; - - // Remove all theme classes - themes.forEach((t) => htmlElement.classList.remove(t)); - - // Add the new theme class if it's not 'gray' - if (theme !== "default") { - htmlElement.classList.add(theme); - } -} - -// Utility function to get the current theme -function getCurrentTheme() { - const htmlElement = document.documentElement; - const themes = ["default", "palette", "sapphire", "ruby", "emerald", "daylight", "midnight"]; - - for (let theme of themes) { - if (htmlElement.classList.contains(theme)) { - return theme; - } - } - return "default"; -} +import { getCurrentTheme, setTheme } from "@/utils/themes"; export default function ThemeSwitcher() { const { user } = useUser(); diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx index f000e3e..b772e76 100644 --- a/src/components/ui/badge.tsx +++ b/src/components/ui/badge.tsx @@ -1,36 +1,34 @@ -import * as React from "react" -import { cva, type VariantProps } from "class-variance-authority" +import * as React from "react"; +import { cva, type VariantProps } from "class-variance-authority"; -import { cn } from "@/lib/utils" +import { cn } from "@/lib/utils"; const badgeVariants = cva( - "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", - { - variants: { - variant: { - default: - "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", - secondary: - "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", - destructive: - "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", - outline: "text-foreground", - }, - }, - defaultVariants: { - variant: "default", - }, - } -) + "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", + { + variants: { + variant: { + default: + "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", + secondary: + "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", + destructive: + "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", + outline: "text-foreground", + }, + }, + defaultVariants: { + variant: "default", + }, + } +); export interface BadgeProps - extends React.HTMLAttributes, - VariantProps {} + extends React.HTMLAttributes, + VariantProps {} function Badge({ className, variant, ...props }: BadgeProps) { - return ( -
- ) + return
; } -export { Badge, badgeVariants } +export { Badge, badgeVariants }; diff --git a/src/lib/chart-themes.ts b/src/lib/chart-themes.ts deleted file mode 100644 index d9cabfe..0000000 --- a/src/lib/chart-themes.ts +++ /dev/null @@ -1,484 +0,0 @@ -import { themeColorsToCssVariables } from "@/lib/charts"; - -export const CHART_THEMES = [ - { - name: "Default", - id: "default-shadcn", - colors: { - background: "0 0% 100%", - foreground: "240 10% 3.9%", - card: "0 0% 100%", - "card-foreground": "240 10% 3.9%", - popover: "0 0% 100%", - "popover-foreground": "240 10% 3.9%", - primary: "240 5.9% 10%", - "primary-foreground": "0 0% 98%", - secondary: "240 4.8% 95.9%", - "secondary-foreground": "240 5.9% 10%", - muted: "240 4.8% 95.9%", - "muted-foreground": "240 3.8% 46.1%", - accent: "240 4.8% 95.9%", - "accent-foreground": "240 5.9% 10%", - destructive: "0 84.2% 60.2%", - "destructive-foreground": "0 0% 98%", - border: "240 5.9% 90%", - input: "240 5.9% 90%", - ring: "240 10% 3.9%", - "chart-1": "173 58% 39%", - "chart-2": "12 76% 61%", - "chart-3": "197 37% 24%", - "chart-4": "43 74% 66%", - "chart-5": "27 87% 67%", - }, - colorsDark: { - background: "240 10% 3.9%", - foreground: "0 0% 98%", - card: "240 10% 3.9%", - "card-foreground": "0 0% 98%", - popover: "240 10% 3.9%", - "popover-foreground": "0 0% 98%", - primary: "0 0% 98%", - "primary-foreground": "240 5.9% 10%", - secondary: "240 3.7% 15.9%", - "secondary-foreground": "0 0% 98%", - muted: "240 3.7% 15.9%", - "muted-foreground": "240 5% 64.9%", - accent: "240 3.7% 15.9%", - "accent-foreground": "0 0% 98%", - destructive: "0 62.8% 30.6%", - "destructive-foreground": "0 0% 98%", - border: "240 3.7% 15.9%", - input: "240 3.7% 15.9%", - ring: "240 4.9% 83.9%", - "chart-1": "220 70% 50%", - "chart-5": "160 60% 45%", - "chart-3": "30 80% 55%", - "chart-4": "280 65% 60%", - "chart-2": "340 75% 55%", - }, - fontFamily: { - heading: { - name: "Inter", - type: "sans-serif", - }, - body: { - name: "Inter", - type: "sans-serif", - }, - }, - radius: 0.5, - }, - { - name: "Palette", - id: "default-palette", - colors: { - background: "0 0% 100%", - foreground: "240 10% 3.9%", - card: "0 0% 100%", - "card-foreground": "240 10% 3.9%", - popover: "0 0% 100%", - "popover-foreground": "240 10% 3.9%", - primary: "240 5.9% 10%", - "primary-foreground": "0 0% 98%", - secondary: "240 4.8% 95.9%", - "secondary-foreground": "240 5.9% 10%", - muted: "240 4.8% 95.9%", - "muted-foreground": "240 3.8% 46.1%", - accent: "240 4.8% 95.9%", - "accent-foreground": "240 5.9% 10%", - destructive: "0 84.2% 60.2%", - "destructive-foreground": "0 0% 98%", - border: "240 5.9% 90%", - input: "240 5.9% 90%", - ring: "240 10% 3.9%", - "chart-1": "12 76% 61%", - "chart-2": "173 58% 39%", - "chart-3": "197 37% 24%", - "chart-4": "43 74% 66%", - "chart-5": "27 87% 67%", - }, - colorsDark: { - background: "240 10% 3.9%", - foreground: "0 0% 98%", - card: "240 10% 3.9%", - "card-foreground": "0 0% 98%", - popover: "240 10% 3.9%", - "popover-foreground": "0 0% 98%", - primary: "0 0% 98%", - "primary-foreground": "240 5.9% 10%", - secondary: "240 3.7% 15.9%", - "secondary-foreground": "0 0% 98%", - muted: "240 3.7% 15.9%", - "muted-foreground": "240 5% 64.9%", - accent: "240 3.7% 15.9%", - "accent-foreground": "0 0% 98%", - destructive: "0 62.8% 30.6%", - "destructive-foreground": "0 0% 98%", - border: "240 3.7% 15.9%", - input: "240 3.7% 15.9%", - ring: "240 4.9% 83.9%", - "chart-1": "220 70% 50%", - "chart-2": "160 60% 45%", - "chart-3": "30 80% 55%", - "chart-4": "280 65% 60%", - "chart-5": "340 75% 55%", - }, - fontFamily: { - heading: { - name: "Inter", - type: "sans-serif", - }, - body: { - name: "Inter", - type: "sans-serif", - }, - }, - radius: 0.5, - }, - { - name: "Sapphire", - id: "default-sapphire", - colors: { - background: "0 0% 100%", - foreground: "222.2 84% 4.9%", - card: "0 0% 100%", - cardForeground: "222.2 84% 4.9%", - popover: "0 0% 100%", - popoverForeground: "222.2 84% 4.9%", - primary: "221.2 83.2% 53.3%", - primaryForeground: "210 40% 98%", - secondary: "210 40% 96.1%", - secondaryForeground: "222.2 47.4% 11.2%", - muted: "210 40% 96.1%", - mutedForeground: "215.4 16.3% 44%", - accent: "210 40% 96.1%", - accentForeground: "222.2 47.4% 11.2%", - destructive: "0 72% 51%", - destructiveForeground: "210 40% 98%", - border: "214.3 31.8% 91.4%", - input: "214.3 31.8% 91.4%", - ring: "221.2 83.2% 53.3%", - "chart-1": "221.2 83.2% 53.3%", - "chart-2": "212 95% 68%", - "chart-3": "216 92% 60%", - "chart-4": "210 98% 78%", - "chart-5": "212 97% 87%", - }, - colorsDark: { - background: "240 10% 3.9%", - foreground: "0 0% 98%", - card: "240 10% 3.9%", - "card-foreground": "0 0% 98%", - popover: "240 10% 3.9%", - "popover-foreground": "0 0% 98%", - primary: "221.2 83.2% 53.3%", - primaryForeground: "210 40% 98%", - secondary: "210 40% 96.1%", - secondaryForeground: "222.2 47.4% 11.2%", - muted: "240 3.7% 15.9%", - "muted-foreground": "240 5% 64.9%", - accent: "210 40% 96.1%", - accentForeground: "222.2 47.4% 11.2%", - destructive: "0 72% 51%", - destructiveForeground: "210 40% 98%", - border: "240 3.7% 15.9%", - input: "240 3.7% 15.9%", - ring: "221.2 83.2% 53.3%", - "chart-1": "221.2 83.2% 53.3%", - "chart-2": "212 95% 68%", - "chart-3": "216 92% 60%", - "chart-4": "210 98% 78%", - "chart-5": "212 97% 87%", - }, - fontFamily: { - heading: { - name: "Inter", - type: "sans-serif", - }, - body: { - name: "Inter", - type: "sans-serif", - }, - }, - radius: 0.5, - }, - { - name: "Ruby", - id: "default-ruby", - colors: { - background: "0 0% 100%", - foreground: "240 10% 3.9%", - card: "0 0% 100%", - cardForeground: "240 10% 3.9%", - popover: "0 0% 100%", - popoverForeground: "240 10% 3.9%", - primary: "346.8 77.2% 49.8%", - primaryForeground: "355.7 100% 99%", - secondary: "240 4.8% 95.9%", - secondaryForeground: "240 5.9% 10%", - muted: "240 4.8% 95.9%", - mutedForeground: "240 3.8% 45%", - accent: "240 4.8% 95.9%", - accentForeground: "240 5.9% 10%", - destructive: "0 72% 51%", - destructiveForeground: "0 0% 98%", - border: "240 5.9% 90%", - input: "240 5.9% 90%", - ring: "346.8 77.2% 49.8%", - "chart-1": "347 77% 50%", - "chart-2": "352 83% 91%", - "chart-3": "350 80% 72%", - "chart-4": "351 83% 82%", - "chart-5": "349 77% 62%", - }, - colorsDark: { - background: "240 10% 3.9%", - foreground: "0 0% 98%", - card: "240 10% 3.9%", - "card-foreground": "0 0% 98%", - popover: "240 10% 3.9%", - "popover-foreground": "0 0% 98%", - primary: "346.8 77.2% 49.8%", - primaryForeground: "355.7 100% 99%", - secondary: "240 4.8% 95.9%", - secondaryForeground: "240 5.9% 10%", - muted: "240 3.7% 15.9%", - "muted-foreground": "240 5% 64.9%", - accent: "240 4.8% 95.9%", - accentForeground: "240 5.9% 10%", - destructive: "0 72% 51%", - destructiveForeground: "0 0% 98%", - border: "240 3.7% 15.9%", - input: "240 3.7% 15.9%", - ring: "221.2 83.2% 53.3%", - "chart-1": "347 77% 50%", - "chart-2": "349 77% 62%", - "chart-3": "350 80% 72%", - "chart-4": "351 83% 82%", - "chart-5": "352 83% 91%", - }, - fontFamily: { - heading: { - name: "Inter", - type: "sans-serif", - }, - body: { - name: "Inter", - type: "sans-serif", - }, - }, - radius: 0.5, - }, - { - name: "Emerald", - id: "default-emerald", - colors: { - background: "0 0% 100%", - foreground: "240 10% 3.9%", - card: "0 0% 100%", - cardForeground: "240 10% 3.9%", - popover: "0 0% 100%", - popoverForeground: "240 10% 3.9%", - primary: "142 86% 28%", - primaryForeground: "356 29% 98%", - secondary: "240 4.8% 95.9%", - secondaryForeground: "240 5.9% 10%", - muted: "240 4.8% 95.9%", - mutedForeground: "240 3.8% 45%", - accent: "240 4.8% 95.9%", - accentForeground: "240 5.9% 10%", - destructive: "0 72% 51%", - destructiveForeground: "0 0% 98%", - border: "240 5.9% 90%", - input: "240 5.9% 90%", - ring: "142 86% 28%", - "chart-1": "139 65% 20%", - "chart-2": "140 74% 44%", - "chart-3": "142 88% 28%", - "chart-4": "137 55% 15%", - "chart-5": "141 40% 9%", - }, - colorsDark: { - background: "240 10% 3.9%", - foreground: "0 0% 98%", - card: "240 10% 3.9%", - "card-foreground": "0 0% 98%", - popover: "240 10% 3.9%", - "popover-foreground": "0 0% 98%", - primary: "142 86% 28%", - primaryForeground: "356 29% 98%", - secondary: "240 4.8% 95.9%", - secondaryForeground: "240 5.9% 10%", - muted: "240 3.7% 15.9%", - "muted-foreground": "240 5% 64.9%", - accent: "240 4.8% 95.9%", - accentForeground: "240 5.9% 10%", - destructive: "0 72% 51%", - destructiveForeground: "0 0% 98%", - border: "240 3.7% 15.9%", - input: "240 3.7% 15.9%", - ring: "142 86% 28%", - "chart-1": "142 88% 28%", - "chart-2": "139 65% 20%", - "chart-3": "140 74% 24%", - "chart-4": "137 55% 15%", - "chart-5": "141 40% 9%", - }, - fontFamily: { - heading: { - name: "Inter", - type: "sans-serif", - }, - body: { - name: "Inter", - type: "sans-serif", - }, - }, - radius: 0.5, - }, - { - name: "Daylight", - id: "default-daylight", - colors: { - background: "36 39% 88%", - foreground: "36 45% 15%", - primary: "36 45% 70%", - primaryForeground: "36 45% 11%", - secondary: "40 35% 77%", - secondaryForeground: "36 45% 25%", - accent: "36 64% 57%", - accentForeground: "36 72% 17%", - destructive: "0 84% 37%", - destructiveForeground: "0 0% 98%", - muted: "36 33% 75%", - mutedForeground: "36 45% 25%", - card: "36 46% 82%", - cardForeground: "36 45% 20%", - popover: "0 0% 100%", - popoverForeground: "240 10% 3.9%", - border: "36 45% 60%", - input: "36 45% 60%", - ring: "36 45% 30%", - "chart-1": "25 34% 28%", - "chart-2": "26 36% 34%", - "chart-3": "28 40% 40%", - "chart-4": "31 41% 48%", - "chart-5": "35 43% 53%", - }, - colorsDark: { - background: "36 39% 88%", - foreground: "36 45% 15%", - primary: "36 45% 70%", - primaryForeground: "36 45% 11%", - secondary: "40 35% 77%", - secondaryForeground: "36 45% 25%", - accent: "36 64% 57%", - accentForeground: "36 72% 17%", - destructive: "0 84% 37%", - destructiveForeground: "0 0% 98%", - muted: "36 33% 75%", - mutedForeground: "36 45% 25%", - card: "36 46% 82%", - cardForeground: "36 45% 20%", - popover: "0 0% 100%", - popoverForeground: "240 10% 3.9%", - border: "36 45% 60%", - input: "36 45% 60%", - ring: "36 45% 30%", - "chart-1": "25 34% 28%", - "chart-2": "26 36% 34%", - "chart-3": "28 40% 40%", - "chart-4": "31 41% 48%", - "chart-5": "35 43% 53%", - }, - fontFamily: { - heading: { - name: "DM Sans", - type: "sans-serif", - }, - body: { - name: "Space Mono", - type: "monospace", - }, - }, - }, - { - name: "Midnight", - id: "default-midnight", - colors: { - background: "240 5% 6%", - foreground: "60 5% 90%", - primary: "240 0% 90%", - primaryForeground: "60 0% 0%", - secondary: "240 4% 15%", - secondaryForeground: "60 5% 85%", - accent: "240 0% 13%", - accentForeground: "60 0% 100%", - destructive: "0 60% 50%", - destructiveForeground: "0 0% 98%", - muted: "240 5% 25%", - mutedForeground: "60 5% 85%", - card: "240 4% 10%", - cardForeground: "60 5% 90%", - popover: "240 5% 15%", - popoverForeground: "60 5% 85%", - border: "240 6% 20%", - input: "240 6% 20%", - ring: "240 5% 90%", - "chart-1": "359 2% 90%", - "chart-2": "240 1% 74%", - "chart-3": "240 1% 58%", - "chart-4": "240 1% 42%", - "chart-5": "240 2% 26%", - }, - colorsDark: { - background: "240 5% 6%", - foreground: "60 5% 90%", - primary: "240 0% 90%", - primaryForeground: "60 0% 0%", - secondary: "240 4% 15%", - secondaryForeground: "60 5% 85%", - accent: "240 0% 13%", - accentForeground: "60 0% 100%", - destructive: "0 60% 50%", - destructiveForeground: "0 0% 98%", - muted: "240 5% 25%", - mutedForeground: "60 5% 85%", - card: "240 4% 10%", - cardForeground: "60 5% 90%", - popover: "240 5% 15%", - popoverForeground: "60 5% 85%", - border: "240 6% 20%", - input: "240 6% 20%", - ring: "240 5% 90%", - "chart-1": "359 2% 90%", - "chart-2": "240 1% 74%", - "chart-3": "240 1% 58%", - "chart-4": "240 1% 42%", - "chart-5": "240 2% 26%", - }, - fontFamily: { - heading: { - name: "Manrope", - type: "sans-serif", - }, - body: { - name: "Manrope", - type: "sans-serif", - }, - }, - radius: 0.5, - }, -] as const; - -export type ChartTheme = ReturnType[number]; - -export function getChartThemes() { - return CHART_THEMES.map((theme) => ({ - ...theme, - cssVars: { - light: themeColorsToCssVariables(theme.colors), - dark: themeColorsToCssVariables(theme.colorsDark), - }, - })); -} diff --git a/src/lib/charts.ts b/src/lib/charts.ts deleted file mode 100644 index d691cf7..0000000 --- a/src/lib/charts.ts +++ /dev/null @@ -1,25 +0,0 @@ -export function themeColorsToCssVariables( - colors: Record -): Record { - const cssVars = colors - ? Object.fromEntries( - Object.entries(colors).map(([name, value]) => { - if (value === undefined) return [] - const cssName = themeColorNameToCssVariable(name) - return [cssName, value] - }) - ) - : {} - - // for (const key of Array.from({ length: 5 }, (_, index) => index)) { - // cssVars[`--chart-${key + 1}`] = - // cssVars[`--chart-${key + 1}`] || - // `${cssVars["--primary"]} / ${100 - key * 20}%` - // } - - return cssVars -} - -export function themeColorNameToCssVariable(name: string) { - return `--${name.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase()}` -} diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index ea4179e..c378650 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -6,7 +6,6 @@ import { loadData } from "@/utils/load"; import { ThemeProvider } from "next-themes"; import { Toaster } from "@/components/ui/toaster"; import { UserProvider, useUser } from "@/components/UserContext"; -import { CHART_THEMES, getChartThemes } from "@/lib/chart-themes"; const inter = Inter({ subsets: ["latin"] }); diff --git a/src/pages/projects/[id].tsx b/src/pages/projects/[id].tsx index ca00fde..628545c 100644 --- a/src/pages/projects/[id].tsx +++ b/src/pages/projects/[id].tsx @@ -110,11 +110,20 @@ export default function Project() {

{project.name}

- - + + - - + + {project.archivedAt && (
- + Archived
@@ -145,7 +154,9 @@ export default function Project() { > - Creation + + Creation + @@ -177,7 +188,9 @@ export default function Project() { - Last Update + + Last Update + @@ -201,7 +214,9 @@ export default function Project() { {project.archivedAt && ( - Deletion + + Deletion + @@ -229,7 +244,9 @@ export default function Project() { )} - Status + + Status + @@ -243,7 +260,9 @@ export default function Project() { - Priority + + Priority + diff --git a/src/pages/projects/[id]/edit.tsx b/src/pages/projects/[id]/edit.tsx index 3538a34..7080c29 100644 --- a/src/pages/projects/[id]/edit.tsx +++ b/src/pages/projects/[id]/edit.tsx @@ -117,11 +117,17 @@ export default function EditProduct() {

{project.name}

- - + + - - + +
(null); const [pictureData, setPictureData] = useState(null); const [activeTab, setActiveTab] = useState("General"); @@ -75,8 +82,25 @@ export default function Settings() { if (storedTab) { setActiveTab(storedTab.toString()); } + + const initialTheme = user?.theme || getCurrentTheme(); + setColorTheme(initialTheme); + setCurrentTheme(initialTheme); }, []); + const handleThemeChange = useCallback( + (theme: any) => { + setColorTheme(theme); + setCurrentTheme(theme); + + if (user) { + user.theme = theme; + saveData(user); + } + }, + [user] + ); + const handleTabClick = (tabName: string) => { setActiveTab(tabName); setSessionStorageItem("activeTab", tabName); @@ -254,6 +278,14 @@ export default function Settings() { > Data Management + handleTabClick("Themes")} + > + Themes +
)} + {activeTab === "Themes" && ( +
+ + + Light / Dark Mode + + Choose the lightness / darkness of your interface here. + + + + +
setTheme("light")} + > + + +
+
setTheme("dark")} + > + + +
+
setTheme("system")} + > + + +
+ + + + + + Color Modes + + Choose the color theme which you like most. + + + + +
handleThemeChange("default")} + > + + +
+
handleThemeChange("palette")} + > + + +
+
handleThemeChange("sapphire")} + > + + +
+
handleThemeChange("ruby")} + > + + +
+
handleThemeChange("emerald")} + > + + +
+
handleThemeChange("daylight")} + > + + +
+
handleThemeChange("midnight")} + > + + +
+ + + +
+ )} {activeTab === "Danger Zone" && (
diff --git a/src/pages/tasks/[id].tsx b/src/pages/tasks/[id].tsx index 6bf10c7..b58d3b0 100644 --- a/src/pages/tasks/[id].tsx +++ b/src/pages/tasks/[id].tsx @@ -42,8 +42,8 @@ import { TableHeader, TableRow, } from "@/components/ui/table"; -import StatusIconLabel from "@/components/projects/status"; -import PriorityIconLabel from "@/components/projects/priority"; +import StatusIconLabel from "@/components/tasks/status"; +import PriorityIconLabel from "@/components/tasks/priority"; import { calcPriorityComparison, calcStatusComparison } from "@/utils/projectUtils"; import { format } from "date-fns"; import { saveData } from "@/utils/save"; @@ -91,13 +91,19 @@ export default function Project() { {task.name} {task.priority && ( - - + + )} {task.status && ( - - + + )}
@@ -111,7 +117,7 @@ export default function Project() { > - Creation + Creation @@ -143,7 +149,7 @@ export default function Project() { - Last Update + Last Update @@ -167,7 +173,7 @@ export default function Project() { {project.archivedAt && ( - Deletion + Deletion @@ -195,7 +201,7 @@ export default function Project() { )} - Status + Status @@ -209,7 +215,7 @@ export default function Project() { - Priority + Priority diff --git a/src/pages/tasks/[id]/edit.tsx b/src/pages/tasks/[id]/edit.tsx index 1bd35be..21ec3e2 100644 --- a/src/pages/tasks/[id]/edit.tsx +++ b/src/pages/tasks/[id]/edit.tsx @@ -97,13 +97,19 @@ export default function EditProduct() { {task.name} {task.priority && ( - - + + )} {task.status && ( - - + + )}
diff --git a/src/styles/globals.css b/src/styles/globals.css index d5f6484..68f07cd 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -157,24 +157,24 @@ .palette { --background: 0 0% 100%; - --foreground: 240 10% 3.9%; + --foreground: 197 37% 45%; --card: 0 0% 100%; - --card-foreground: 240 10% 3.9%; + --card-foreground: 27 87% 24%; --popover: 0 0% 100%; - --popover-foreground: 240 10% 3.9%; + --popover-foreground: 27 87% 24%; --primary: 240 5.9% 10%; - --primary-foreground: 0 0% 98%; - --secondary: 240 4.8% 95.9%; - --secondary-foreground: 240 5.9% 10%; - --muted: 240 4.8% 95.9%; + --primary-foreground: 12 76% 61%; + --secondary: 27 87% 67%; + --secondary-foreground: 197 37% 24%; + --muted: 43 74% 90%; --muted-foreground: 240 3.8% 46.1%; --accent: 240 4.8% 95.9%; - --accent-foreground: 240 5.9% 10%; + --accent-foreground: 197 37% 24%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; - --border: 240 5.9% 90%; + --border: 173 58% 89%; --input: 240 5.9% 90%; - --ring: 240 10% 3.9%; + --ring: 173 58% 39%; --chart-1: 12 76% 61%; --chart-2: 173 58% 39%; --chart-3: 197 37% 24%; @@ -183,19 +183,19 @@ } .palette.dark { --background: 240 10% 3.9%; - --foreground: 0 0% 98%; + --foreground: 30 80% 78%; --card: 240 10% 3.9%; - --card-foreground: 0 0% 98%; + --card-foreground: 340 75% 85%; --popover: 240 10% 3.9%; - --popover-foreground: 0 0% 98%; - --primary: 0 0% 98%; - --primary-foreground: 240 5.9% 10%; - --secondary: 240 3.7% 15.9%; - --secondary-foreground: 0 0% 98%; - --muted: 240 3.7% 15.9%; + --popover-foreground: 340 75% 85%; + --primary: 30 80% 92%; + --primary-foreground: 30 80% 40%; + --secondary: 340 75% 15.9%; + --secondary-foreground: 30 80% 55%; + --muted: 280 65% 15.9%; --muted-foreground: 240 5% 64.9%; --accent: 240 3.7% 15.9%; - --accent-foreground: 0 0% 98%; + --accent-foreground: 30 80% 55%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 240 3.7% 15.9%; @@ -370,8 +370,8 @@ .daylight { --background: 36 39% 88%; --foreground: 36 45% 15%; - --primary: 36 45% 70%; - --primary-foreground: 36 45% 11%; + --primary: 36 45% 50%; + --primary-foreground: 36 45% 91%; --secondary: 40 35% 77%; --secondary-foreground: 36 45% 25%; --accent: 36 64% 57%; @@ -427,7 +427,7 @@ --primary-foreground: 60 0% 95%; --secondary: 240 4% 85%; --secondary-foreground: 60 5% 15%; - --accent: 240 0% 35%; + --accent: 240 0% 75%; --accent-foreground: 60 0% 0%; --destructive: 0 60% 80%; --destructive-foreground: 0 0% 20%; diff --git a/src/utils/themes.ts b/src/utils/themes.ts new file mode 100644 index 0000000..8928706 --- /dev/null +++ b/src/utils/themes.ts @@ -0,0 +1,26 @@ +// Utility function to set the theme +export function setTheme(theme: any) { + const htmlElement = document.documentElement; + const themes = ["default", "palette", "sapphire", "ruby", "emerald", "daylight", "midnight"]; + + // Remove all theme classes + themes.forEach((t) => htmlElement.classList.remove(t)); + + // Add the new theme class if it's not 'gray' + if (theme !== "default") { + htmlElement.classList.add(theme); + } +} + +// Utility function to get the current theme +export function getCurrentTheme() { + const htmlElement = document.documentElement; + const themes = ["default", "palette", "sapphire", "ruby", "emerald", "daylight", "midnight"]; + + for (let theme of themes) { + if (htmlElement.classList.contains(theme)) { + return theme; + } + } + return "default"; +}