Merge pull request #82 from elek-io/small-visual-improvements

Nils-Kolvenbach · web-flow · commit 6e3dc924cc44 · 2025-09-08T12:26:17.000+02:00
Small visual improvements
diff --git a/.changeset/common-views-report.md b/.changeset/common-views-report.md
@@ -0,0 +1,5 @@
+---
+'@elek-io/client': patch
+---
+
+Small visual improvements
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,4 +1,13 @@
 {
+  "files.watcherExclude": {
+    "**/routeTree.gen.ts": true
+  },
+  "search.exclude": {
+    "**/routeTree.gen.ts": true
+  },
+  "files.readonlyInclude": {
+    "**/routeTree.gen.ts": true
+  },
   "editor.formatOnSave": true,
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.codeActionsOnSave": {
diff --git a/components.json b/components.json
@@ -4,7 +4,7 @@
   "rsc": true,
   "tsx": true,
   "tailwind": {
-    "config": "tailwind.config.js",
+    "config": "",
     "css": "src/renderer/src/index.css",
     "baseColor": "zinc",
     "cssVariables": false,
@@ -13,5 +13,6 @@
   "aliases": {
     "components": "@renderer/components",
     "utils": "@renderer/util"
-  }
+  },
+  "iconLibrary": "lucide"
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -70,7 +70,7 @@
     "react-hook-form": "7.62.0",
     "sonner": "2.0.7",
     "tailwind-merge": "3.3.1",
-    "tailwindcss-animate": "1.0.7",
+    "tw-animate-css": "1.3.8",
     "zod": "4.0.17",
     "zustand": "5.0.7"
   },
diff --git a/src/renderer/index.html b/src/renderer/index.html
@@ -12,7 +12,7 @@
     <link href="/src/index.css" rel="stylesheet" />
   </head>
   <body
-    class="h-full bg-zinc-200 dark:bg-zinc-800 text-zinc-800 dark:text-zinc-200"
+    class="h-full antialiased transition-colors ease-linear bg-zinc-200 dark:bg-zinc-950 text-zinc-800 dark:text-zinc-200"
   >
     <div id="app" class="flex flex-col h-full"></div>
     <script type="module" src="/src/main.tsx"></script>
diff --git a/src/renderer/src/components/ui/card.tsx b/src/renderer/src/components/ui/card.tsx
@@ -6,7 +6,7 @@ const Card = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
     <div
       ref={ref}
       className={cn(
-        'rounded-xl border border-zinc-200 bg-white text-zinc-950 shadow-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-50',
+        'rounded-lg border border-zinc-200 bg-zinc-50 shadow-sm dark:border-zinc-800 dark:bg-zinc-900',
         className
       )}
       {...props}
@@ -19,7 +19,10 @@ const CardHeader = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (
     <div
       ref={ref}
-      className={cn('flex flex-col space-y-1.5 p-6', className)}
+      className={cn(
+        'flex flex-col space-y-1.5 p-6 text-zinc-800 dark:text-zinc-200',
+        className
+      )}
       {...props}
     />
   )
@@ -32,7 +35,7 @@ const CardTitle = forwardRef<
 >(({ className, ...props }, ref) => (
   <h3
     ref={ref}
-    className={cn('leading-none tracking-tight', className)}
+    className={cn('text-base font-semibold leading-6', className)}
     {...props}
   />
 ));
diff --git a/src/renderer/src/components/ui/page-section.tsx b/src/renderer/src/components/ui/page-section.tsx
@@ -1,5 +1,12 @@
 import { cn } from '@renderer/util';
 import { type HTMLAttributes, type ReactElement, type ReactNode } from 'react';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from './card';
 
 export interface PageSectionProps extends HTMLAttributes<HTMLDivElement> {
   children?: ReactNode;
@@ -13,24 +20,21 @@ export function PageSection({
   ...props
 }: PageSectionProps): ReactElement {
   return (
-    <section
-      className={cn(
-        'p-6 border-t border-zinc-200 dark:border-zinc-800',
-        className
-      )}
-    >
-      <div className="sm:flex sm:items-center mb-4">
-        <div className="sm:flex-auto">
-          <h2 className="text-base font-semibold leading-6">{props.title}</h2>
-          <p className="mt-2 text-[0.8rem] text-zinc-500 dark:text-zinc-400">
-            {props.description}
-          </p>
-        </div>
-        <div className="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
-          {props.actions && props.actions}
-        </div>
-      </div>
-      {props.children}
+    <section className={cn('', className)}>
+      <Card>
+        <CardHeader>
+          <div className="sm:flex sm:items-center">
+            <div className="sm:flex-auto">
+              <CardTitle>{props.title}</CardTitle>
+              <CardDescription>{props.description}</CardDescription>
+            </div>
+            <div className="sm:ml-16 sm:flex-none">
+              {props.actions && props.actions}
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent>{props.children}</CardContent>
+      </Card>
     </section>
   );
 }
diff --git a/src/renderer/src/components/ui/page.tsx b/src/renderer/src/components/ui/page.tsx
@@ -31,7 +31,7 @@ export const Page = forwardRef<HTMLElement, PageProps>(
         onDragEnter={props.onDragEnter}
         onDrop={props.onDrop}
       >
-        <div className="relative bg-brand-950 text-white pb-32">
+        <div className="relative bg-gradient-to-br from-brand-950 to-50% text-white pb-32">
           <div className="relative container mx-auto">
             <div className="md:flex md:items-center px-4 sm:px-6 lg:px-8 py-10">
               <div className="md:flex-auto">
diff --git a/src/renderer/src/index.css b/src/renderer/src/index.css
@@ -26,6 +26,14 @@
   --color-brand-950: var(--color-cyan-950);
 }
 
+@utility container {
+  padding: 0 2rem;
+
+  @variant xl {
+    max-width: 1400px;
+  }
+}
+
 /*
   By default, the frameless window is non-draggable. 
   Apps need to specify -webkit-app-region: drag in CSS to tell Electron 
diff --git a/src/renderer/src/routes/projects/$projectId/dashboard.tsx b/src/renderer/src/routes/projects/$projectId/dashboard.tsx
@@ -1,4 +1,11 @@
 import { Button } from '@renderer/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@renderer/components/ui/card';
 import { CommitHistory } from '@renderer/components/ui/commit-history';
 import { Page } from '@renderer/components/ui/page';
 import { PageSection } from '@renderer/components/ui/page-section';
@@ -35,32 +42,32 @@ function ProjectDashboardPage(): ReactElement {
   }
 
   return (
-    <Page
-      title="Dashboard"
-      layout="bare"
-      description={<Description />}
-      // actions={<Actions />}
-    >
+    <Page title="Dashboard" layout="bare" description={<Description />}>
       <div className="grid grid-cols-1 items-start gap-4 lg:grid-cols-3 lg:gap-8">
-        <div className="grid grid-cols-1 gap-4 lg:col-span-2">
-          <div className="rounded-lg bg-white dark:bg-zinc-900 shadow-sm p-4">
-            Current Project: {JSON.stringify(context.project)}
-          </div>
+        <div className="lg:col-span-2">
+          <Card>
+            <CardHeader>
+              <CardTitle>Current Project</CardTitle>
+              <CardDescription>Description</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <pre>
+                <code>{JSON.stringify(context.project, null, 2)}</code>
+              </pre>
+            </CardContent>
+          </Card>
         </div>
-        <div className="grid grid-cols-1 gap-4">
-          <div className="rounded-lg bg-white dark:bg-zinc-900 shadow-sm">
-            <PageSection
-              title="Latest changes"
-              actions={<LatestChangesActions />}
-              className="border-none pb-0"
-            >
-              <CommitHistory
-                projectId={context.project.id}
-                commits={context.project.fullHistory.slice(0, 5)}
-                language={context.user.language}
-              />
-            </PageSection>
-          </div>
+        <div className="lg:col-span-1">
+          <PageSection
+            title="Latest changes"
+            actions={<LatestChangesActions />}
+          >
+            <CommitHistory
+              projectId={context.project.id}
+              commits={context.project.fullHistory.slice(0, 5)}
+              language={context.user.language}
+            />
+          </PageSection>
         </div>
       </div>
     </Page>
diff --git a/src/renderer/src/routes/projects/index.tsx b/src/renderer/src/routes/projects/index.tsx
@@ -167,7 +167,7 @@ function ListProjectsPage(): ReactElement {
               params={{ projectId: project.id }}
               className="no-underline"
             >
-              <Card className="transition hover:shadow-lg hover:dark:border-zinc-200">
+              <Card className="hover:shadow-lg hover:dark:border-zinc-200">
                 <CardHeader>
                   <CardTitle>{project.name}</CardTitle>
                   <CardDescription>{project.description}</CardDescription>

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@elek-io/client': patch
 +---
++
 +Small visual improvements
Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,7 @@`
`12`	`12`	`<link href="/src/index.css" rel="stylesheet" />`
`13`	`13`	`</head>`
`14`	`14`	`<body`
`15`		`- class="h-full bg-zinc-200 dark:bg-zinc-800 text-zinc-800 dark:text-zinc-200"`
	`15`	`+ class="h-full antialiased transition-colors ease-linear bg-zinc-200 dark:bg-zinc-950 text-zinc-800 dark:text-zinc-200"`
`16`	`16`	`>`
`17`	`17`	`<div id="app" class="flex flex-col h-full"></div>`
`18`	`18`	`<script type="module" src="/src/main.tsx"></script>`
Original file line number	Diff line number	Diff line change
`@@ -31,7 +31,7 @@ export const Page = forwardRef<HTMLElement, PageProps>(`
`31`	`31`	`onDragEnter={props.onDragEnter}`
`32`	`32`	`onDrop={props.onDrop}`
`33`	`33`	`>`
`34`		`- <div className="relative bg-brand-950 text-white pb-32">`
	`34`	`+ <div className="relative bg-gradient-to-br from-brand-950 to-50% text-white pb-32">`
`35`	`35`	`<div className="relative container mx-auto">`
`36`	`36`	`<div className="md:flex md:items-center px-4 sm:px-6 lg:px-8 py-10">`
`37`	`37`	`<div className="md:flex-auto">`