clean up; settings theme

version-patch
trueberryless-org · Jul 8, 2024 · 04fcc70 · 04fcc70
1 parent 956aa8f
commit 04fcc70
Show file tree

Hide file tree

Showing 21 changed files with 319 additions and 647 deletions.
diff --git a/src/components/dashboard/dashboard.tsx b/src/components/dashboard/dashboard.tsx
@@ -116,7 +116,7 @@ export default function Dashboard() {
     return (
         <div className="flex w-full flex-col">
             <main className="flex min-h-[calc(100vh-_theme(spacing.16))] flex-1 flex-col gap-4 bg-muted/40 p-4 md:gap-8 md:p-10">
-                <div className="flex-1 space-y-4 p-8 pt-6">
+                <div className="flex-1 space-y-4 px-8">
                     {shouldShowExportNotification(user) && (
                         <Alert className="mb-12">
                             <Terminal className="h-4 w-4" />
@@ -127,8 +127,8 @@ export default function Dashboard() {
                             </AlertDescription>
                         </Alert>
                     )}
-                    <div className="flex items-center justify-between space-y-2">
-                        <h2 className="text-3xl font-bold tracking-tight">Dashboard</h2>
+                    <div className="flex items-center justify-between">
+                        <h2 className="text-4xl font-bold tracking-tight">Dashboard</h2>
                         <div className="flex items-center space-x-2">
                             <CalendarDateRangePicker />
                             <Button>Download</Button>
@@ -151,7 +151,7 @@ export default function Dashboard() {
                             <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
                                 <Card>
                                     <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                                        <CardTitle className="text-sm font-medium">
+                                        <CardTitle className="text-sm font-medium text-primary">
                                             Total Revenue
                                         </CardTitle>
                                         <svg
@@ -176,7 +176,7 @@ export default function Dashboard() {
                                 </Card>
                                 <Card>
                                     <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                                        <CardTitle className="text-sm font-medium">
+                                        <CardTitle className="text-sm font-medium text-primary">
                                             Subscriptions
                                         </CardTitle>
                                         <svg
@@ -203,7 +203,9 @@ export default function Dashboard() {
                                 </Card>
                                 <Card>
                                     <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                                        <CardTitle className="text-sm font-medium">Sales</CardTitle>
+                                        <CardTitle className="text-sm font-medium text-primary">
+                                            Sales
+                                        </CardTitle>
                                         <svg
                                             xmlns="http://www.w3.org/2000/svg"
                                             viewBox="0 0 24 24"
@@ -227,7 +229,7 @@ export default function Dashboard() {
                                 </Card>
                                 <Card>
                                     <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                                        <CardTitle className="text-sm font-medium">
+                                        <CardTitle className="text-sm font-medium text-primary">
                                             Active Now
                                         </CardTitle>
                                         <svg

diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
@@ -22,9 +22,6 @@ import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
 import ModeToggle from "./themes/mode-switch";
 import { useUser } from "./UserContext";
 import ThemeSwitcher from "./themes/theme-switcher";
-import { getChartThemes } from "@/lib/chart-themes";
-
-const chartThemes = getChartThemes();
 
 export default function Navbar() {
     const { user, setUser } = useUser();

diff --git a/src/components/projects/data-table-column-header.tsx b/src/components/projects/data-table-column-header.tsx
@@ -36,11 +36,11 @@ export function DataTableColumnHeader<TData, TValue>({
                     >
                         <span>{title}</span>
                         {column.getIsSorted() === "desc" ? (
-                            <ArrowDownIcon className="ml-2 h-4 w-4" />
+                            <ArrowDownIcon className="ml-2 h-4 w-4 text-primary" />
                         ) : column.getIsSorted() === "asc" ? (
-                            <ArrowUpIcon className="ml-2 h-4 w-4" />
+                            <ArrowUpIcon className="ml-2 h-4 w-4 text-primary" />
                         ) : (
-                            <ArrowUpDownIcon className="ml-2 h-4 w-4" />
+                            <ArrowUpDownIcon className="ml-2 h-4 w-4 text-primary" />
                         )}
                     </Button>
                 </DropdownMenuTrigger>

diff --git 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<Project>)
                 <Link href={`/projects/${projectId}`}>
                     <DropdownMenuItem>View</DropdownMenuItem>
                 </Link>
-                <Link href={`/projects/${projectId}/edit`}>
-                    <DropdownMenuItem>Edit</DropdownMenuItem>
-                </Link>
+                {row.original.archivedAt === null && (
+                    <Link href={`/projects/${projectId}/edit`}>
+                        <DropdownMenuItem>Edit</DropdownMenuItem>
+                    </Link>
+                )}
             </DropdownMenuContent>
         </DropdownMenu>
     );

diff --git 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<PriorityIconLabelProps> = ({ priorityValue, justify }) => {
+const PriorityIconLabel: React.FC<PriorityIconLabelProps> = ({
+    priorityValue,
+    justify,
+    className,
+}) => {
     const priority = priorities.find((priority) => priority.value === priorityValue);
 
     if (!priority) {
@@ -16,8 +21,8 @@ const PriorityIconLabel: React.FC<PriorityIconLabelProps> = ({ priorityValue, ju
     const Icon = priority.icon;
     const justifyClass = justify === "right" ? "justify-end" : "justify-start";
     return (
-        <div className={`flex items-center ${justifyClass}`}>
-            {Icon && <Icon className="mr-2 h-4 w-4 text-muted-foreground" />}
+        <div className={`flex items-center ${justifyClass} ${className}`}>
+            {Icon && <Icon className="mr-2 h-4 w-4" />}
             <span>{priority.label}</span>
         </div>
     );

diff --git a/src/components/projects/status.tsx b/src/components/projects/status.tsx
@@ -3,19 +3,22 @@ import { statuses } from "@/models/project"; // Adjust the import path as needed
 
 interface StatusIconLabelProps {
     statusValue: string;
+    justify?: "left" | "right";
+    className?: string;
 }
 
-const StatusIconLabel: React.FC<StatusIconLabelProps> = ({ statusValue }) => {
+const StatusIconLabel: React.FC<StatusIconLabelProps> = ({ statusValue, justify, className }) => {
     const status = statuses.find((status) => status.value === statusValue);
 
     if (!status) {
         return null;
     }
 
     const Icon = status.icon;
+    const justifyClass = justify === "right" ? "justify-end" : "justify-start";
     return (
-        <div className="flex items-center">
-            {Icon && <Icon className="mr-2 h-4 w-4 text-muted-foreground" />}
+        <div className={`flex items-center ${justifyClass} ${className}`}>
+            {Icon && <Icon className="mr-2 h-4 w-4" />}
             <span>{status.label}</span>
         </div>
     );

diff --git 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<TData, TValue>({
                     >
                         <span>{title}</span>
                         {column.getIsSorted() === "desc" ? (
-                            <ArrowDownIcon className="ml-2 h-4 w-4" />
+                            <ArrowDownIcon className="ml-2 h-4 w-4 text-primary" />
                         ) : column.getIsSorted() === "asc" ? (
-                            <ArrowUpIcon className="ml-2 h-4 w-4" />
+                            <ArrowUpIcon className="ml-2 h-4 w-4 text-primary" />
                         ) : (
-                            <ArrowUpDownIcon className="ml-2 h-4 w-4" />
+                            <ArrowUpDownIcon className="ml-2 h-4 w-4 text-primary" />
                         )}
                     </Button>
                 </DropdownMenuTrigger>

diff --git 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<PriorityIconLabelProps> = ({ priorityValue, justify }) => {
+const PriorityIconLabel: React.FC<PriorityIconLabelProps> = ({
+    priorityValue,
+    justify,
+    className,
+}) => {
     const priority = priorities.find((priority) => priority.value === priorityValue);
 
     if (!priority) {
@@ -16,8 +21,8 @@ const PriorityIconLabel: React.FC<PriorityIconLabelProps> = ({ priorityValue, ju
     const Icon = priority.icon;
     const justifyClass = justify === "right" ? "justify-end" : "justify-start";
     return (
-        <div className={`flex items-center ${justifyClass}`}>
-            {Icon && <Icon className="mr-2 h-4 w-4 text-muted-foreground" />}
+        <div className={`flex items-center ${justifyClass} ${className}`}>
+            {Icon && <Icon className="mr-2 h-4 w-4" />}
             <span>{priority.label}</span>
         </div>
     );

diff --git a/src/components/tasks/status.tsx b/src/components/tasks/status.tsx
@@ -3,19 +3,22 @@ import { statuses } from "@/models/task"; // Adjust the import path as needed
 
 interface StatusIconLabelProps {
     statusValue: string;
+    justify?: "left" | "right";
+    className?: string;
 }
 
-const StatusIconLabel: React.FC<StatusIconLabelProps> = ({ statusValue }) => {
+const StatusIconLabel: React.FC<StatusIconLabelProps> = ({ statusValue, justify, className }) => {
     const status = statuses.find((status) => status.value === statusValue);
 
     if (!status) {
         return null;
     }
 
     const Icon = status.icon;
+    const justifyClass = justify === "right" ? "justify-end" : "justify-start";
     return (
-        <div className="flex items-center">
-            {Icon && <Icon className="mr-2 h-4 w-4 text-muted-foreground" />}
+        <div className={`flex items-center ${justifyClass} ${className}`}>
+            {Icon && <Icon className="mr-2 h-4 w-4" />}
             <span>{status.label}</span>
         </div>
     );

diff --git 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
@@ -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<HTMLDivElement>,
-    VariantProps<typeof badgeVariants> {}
+    extends React.HTMLAttributes<HTMLDivElement>,
+        VariantProps<typeof badgeVariants> {}
 
 function Badge({ className, variant, ...props }: BadgeProps) {
-  return (
-    <div className={cn(badgeVariants({ variant }), className)} {...props} />
-  )
+    return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
 }
 
-export { Badge, badgeVariants }
+export { Badge, badgeVariants };