paulmataruso/Palmr
1
0
Fork 0
mirror of https://github.com/kyantech/Palmr.git synced 2025-11-02 04:53:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: update global styles and layout for improved typography and card interaction

Browse Source 
- Replaced Geist font with Outfit for both sans-serif and mono styles in globals.css and layout.tsx.
- Enhanced card hover effect in quick-access-cards.tsx to improve user interaction feedback.
- Adjusted card component structure in card.tsx for better styling and layout consistency.
This commit is contained in:
Daniel Luiz Alves
2025-07-03 01:09:12 -03:00
parent d5918c3088
commit 1ea4115578
4 changed files with 25 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web/src/app/dashboard/components/quick-access-cards.tsx
View File

@@ -37,7 +37,7 @@ export function QuickAccessCards() {
{QUICK_ACCESS_ITEMS.map((card) => ( {QUICK_ACCESS_ITEMS.map((card) => (
<Card <Card
key={card.title} key={card.title}
className="cursor-pointer transform transition-all hover:scale-102" className="cursor-pointer transform transition-all hover:bg-card/80"
onClick={() => router.push(card.path)} onClick={() => router.push(card.path)}
> >
<CardContent> <CardContent>

10
apps/web/src/app/globals.css
View File

@@ -6,8 +6,8 @@
@theme inline { @theme inline {
--color-background: var(--background); --color-background: var(--background);
--color-foreground: var(--foreground); --color-foreground: var(--foreground);
--font-sans: var(--font-geist-sans); --font-sans: Outfit, sans-serif;
--font-mono: var(--font-geist-mono); --font-mono: monospace;
--color-sidebar-ring: var(--sidebar-ring); --color-sidebar-ring: var(--sidebar-ring);
--color-sidebar-border: var(--sidebar-border); --color-sidebar-border: var(--sidebar-border);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
@@ -41,6 +41,9 @@
--radius-md: calc(var(--radius) - 2px); --radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius); --radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px); --radius-xl: calc(var(--radius) + 4px);
--font-sans: Outfit, sans-serif;
--font-mono: monospace;
--font-serif: Outfit, sans-serif;
} }
:root { :root {
@@ -76,6 +79,9 @@
--sidebar-accent-foreground: oklch(0.21 0.006 285.885); --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
--sidebar-border: oklch(0.92 0.004 286.32); --sidebar-border: oklch(0.92 0.004 286.32);
--sidebar-ring: oklch(0.5927 0.1767 142.49); --sidebar-ring: oklch(0.5927 0.1767 142.49);
--font-sans: Outfit, sans-serif;
--font-mono: monospace;
--font-serif: Outfit, sans-serif;
} }
.dark { .dark {

15
apps/web/src/app/layout.tsx
View File

@@ -1,4 +1,4 @@
import { Geist, Geist_Mono } from "next/font/google"; import { Outfit } from "next/font/google";
import { NextIntlClientProvider } from "next-intl"; import { NextIntlClientProvider } from "next-intl";
import { getLocale } from "next-intl/server"; import { getLocale } from "next-intl/server";
@@ -12,14 +12,11 @@ import { AuthProvider } from "@/contexts/auth-context";
import { ShareProvider } from "@/contexts/share-context"; import { ShareProvider } from "@/contexts/share-context";
import { ThemeProvider } from "../providers/theme-provider"; import { ThemeProvider } from "../providers/theme-provider";
const geistSans = Geist({ const outfit = Outfit({
variable: "--font-geist-sans",
subsets: ["latin"],
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"], subsets: ["latin"],
variable: "--font-outfit",
weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
display: "swap",
}); });
export default async function RootLayout({ export default async function RootLayout({
@@ -39,7 +36,7 @@ export default async function RootLayout({
<head> <head>
<Favicon /> <Favicon />
</head> </head>
<body className={`${geistSans.variable} ${geistMono.variable} antialiased`}> <body className={`${outfit.variable} antialiased`}>
<NextIntlClientProvider> <NextIntlClientProvider>
<ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange> <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
<AuthProvider> <AuthProvider>

18
apps/web/src/components/ui/card.tsx
View File

@@ -4,14 +4,16 @@ import { cn } from "@/lib/utils";
function Card({ className, ...props }: React.ComponentProps<"div">) { function Card({ className, ...props }: React.ComponentProps<"div">) {
return ( return (
<div <div className="border p-1.5 rounded-xl text-card-foreground shadow-lg dark:shadow-sm">
data-slot="card" <div
className={cn( data-slot="card"
"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border dark:border-none shadow-lg py-6 dark:shadow-sm", className={cn(
className "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border dark:border-none py-6 ",
)} className
{...props} )}
/> {...props}
/>
</div>
); );
} }