valknar/kit-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: update Logo and Kit title styling in App Shell

Browse Source
This commit is contained in:
Sebastian Krüger
2026-02-23 13:33:17 +01:00
parent facb7e5161
commit 5ab1387165
3 changed files with 13 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
components/Logo.tsx
View File

@@ -7,7 +7,7 @@ export default function Logo({ className = '', size = 120 }: { className?: strin
<motion.svg
width={size}
height={size}
viewBox="0 0 200 200"
viewBox="0 0 64 64"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={className}
@@ -17,7 +17,7 @@ export default function Logo({ className = '', size = 120 }: { className?: strin
>
{/* Wrench (Lucide) - vertical */}
<motion.g
transform="translate(100, 100) rotate(0) scale(5) translate(-12, -12)"
transform="translate(32, 32) rotate(0) scale(3.15) translate(-12.5, -11.5)"
initial={{ pathLength: 0, opacity: 0 }}
animate={{ pathLength: 1, opacity: 1 }}
transition={{ duration: 1.2, ease: 'easeInOut' }}
@@ -35,7 +35,7 @@ export default function Logo({ className = '', size = 120 }: { className?: strin
{/* Brush (Lucide) - horizontal flipped */}
<motion.g
transform="translate(100, 97) rotate(90) scale(5) translate(-12, -12)"
transform="translate(32, 30) rotate(90) scale(3.025) translate(-11.25, -11)"
initial={{ pathLength: 0, opacity: 0 }}
animate={{ pathLength: 1, opacity: 1 }}
transition={{ duration: 1.2, delay: 0.3, ease: 'easeInOut' }}

12
components/layout/AppHeader.tsx
View File

@@ -8,6 +8,7 @@ import { Button } from '@/components/ui/Button';
import { useTheme } from '@/components/providers/ThemeProvider';
import { cn } from '@/lib/utils/cn';
import { useSidebar } from './SidebarProvider';
import Logo from '@/components/Logo';
export function AppHeader() {
const pathname = usePathname();
@@ -28,9 +29,12 @@ export function AppHeader() {
{isOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
</Button>
<nav className="hidden sm:flex items-center text-sm font-medium text-muted-foreground">
<Link href="/" className="hover:text-foreground transition-colors flex items-center gap-2">
<span>Kit</span>
<nav className="flex items-center text-sm font-medium">
<Link href="/" className="flex items-center gap-2 group">
<Logo size={20} />
<span className="font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-pink-400 group-hover:opacity-80 transition-opacity">
Kit
</span>
</Link>
{pathSegments.map((segment, index) => {
const href = `/${pathSegments.slice(0, index + 1).join('/')}`;
@@ -43,7 +47,7 @@ export function AppHeader() {
href={href}
className={cn(
"capitalize transition-colors",
isLast ? "text-foreground font-semibold" : "hover:text-foreground"
isLast ? "text-foreground font-semibold" : "text-muted-foreground hover:text-foreground font-medium"
)}
>
{segment.replace(/-/g, ' ')}

4
components/layout/AppSidebar.tsx
View File

@@ -111,10 +111,10 @@ export function AppSidebar() {
<div className="flex h-16 items-center justify-between px-6 shrink-0 border-b border-border">
<Link href="/" className="flex items-center gap-3 group overflow-hidden">
<div className="shrink-0">
<Logo size={isCollapsed ? 32 : 32} />
<Logo size={isCollapsed ? 24 : 24} />
</div>
{!isCollapsed && (
<span className="font-bold text-xl bg-clip-text text-transparent bg-gradient-to-r from-purple-400 via-pink-400 to-cyan-400 group-hover:opacity-80 transition-opacity whitespace-nowrap">
<span className="font-bold text-xl bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-pink-400 group-hover:opacity-80 transition-opacity whitespace-nowrap">
Kit
</span>
)}