Skip to content

Commit a4fce80

Browse files
ameer2468ameer2468
committed
remove hover effects from bento
1 parent 306ba9b commit a4fce80

File tree

4 files changed

+36
-33
lines changed

4 files changed

+36
-33
lines changed

‎apps/dashboard/app/globals.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -122,11 +122,11 @@
122122

123123
--primary: oklch(0.4722 0.2664 270);
124124
--primary-foreground: oklch(1 0 0);
125+
125126
--secondary: oklch(0.93 0.005 240);
126127
--secondary-brighter: oklch(0.96 0.005 240);
127128
--secondary-brightest: oklch(100% 0.005 240);
128129
--secondary-foreground: oklch(0.25 0.01 240);
129-
130130

131131
--muted: oklch(0.60 0.0079 240);
132132
--muted-foreground: oklch(0.4 0.0079 240);

‎apps/docs/app/global.css‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -74,11 +74,16 @@
7474
--popover-foreground: oklch(0.145 0 0);
7575
--primary: oklch(0.205 0 0);
7676
--primary-foreground: oklch(0.985 0 0);
77-
--secondary: oklch(0.97 0 0);
78-
--secondary-foreground: oklch(0.205 0 0);
77+
78+
--secondary: oklch(0.93 0.005 240);
79+
--secondary-brighter: oklch(0.96 0.005 240);
80+
--secondary-brightest: oklch(100% 0.005 240);
81+
--secondary-foreground: oklch(0.25 0.01 240);
82+
83+
7984
--muted: oklch(0.97 0 0);
8085
--muted-foreground: oklch(0.556 0 0);
81-
--accent: oklch(0.97 0 0);
86+
--accent: oklch(0.9134 0.0079 240);
8287
--accent-foreground: oklch(0.205 0 0);
8388
--destructive: oklch(0.577 0.245 27.325);
8489
--destructive-foreground: oklch(1 0 0);
@@ -152,11 +157,13 @@
152157
--popover-foreground: oklch(0.985 0 0);
153158
--primary: oklch(0.922 0 0);
154159
--primary-foreground: oklch(0.205 0 0);
155-
--secondary: oklch(0.269 0 0);
156-
--secondary-foreground: oklch(0.985 0 0);
160+
--secondary: oklch(0.22 0.006 286.033);
161+
--secondary-brighter: oklch(0.25 0.006 286.033);
162+
--secondary-brightest: oklch(0.28 0.006 286.033);
163+
--secondary-foreground: oklch(0.25 0.01 286.033);
157164
--muted: oklch(0.269 0 0);
158165
--muted-foreground: oklch(0.708 0 0);
159-
--accent: oklch(0.371 0 0);
166+
--accent: oklch(20% 0.006 286.033);
160167
--accent-foreground: oklch(0.985 0 0);
161168
--destructive: oklch(0.704 0.191 22.216);
162169
--destructive-foreground: oklch(0.985 0 0);
@@ -244,6 +251,7 @@
244251
background-image: repeating-linear-gradient(-50deg, rgba(255, 255, 255, 0.1) 0px, rgba(255, 255, 255, 0.1) 1px, transparent 1px, transparent 5px);
245252
}
246253

254+
247255
/* Green Angled Rectangle Gradient */
248256

249257
.green-angled-rectangle-gradient {
@@ -267,7 +275,7 @@
267275
/* Red Angled Rectangle Gradient */
268276

269277
.red-angled-rectangle-gradient {
270-
background-image: repeating-linear-gradient(-50deg, rgba(121, 16, 16, 0.1) 0px, rgba(121, 16, 16, 0.1) 1px, transparent 1px, transparent 5px);
278+
background-image: repeating-linear-gradient(-50deg, rgba(255, 141, 141, 0.4) 0px, rgba(255, 141, 141, 0.) 1px, transparent 1px, transparent 5px);
271279
}
272280

273281
.dark .red-angled-rectangle-gradient {

‎apps/docs/components/bento.tsx‎

Lines changed: 16 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ const BentoCard = ({
4545
}) => (
4646
<motion.div
4747
className={cn(
48-
"group relative overflow-hidden border border-border bg-card backdrop-blur-xl transition-colors duration-500 hover:border-muted-foreground/30",
48+
"group relative overflow-hidden border border-border bg-card backdrop-blur-xl duration-500",
4949
className
5050
)}
5151
initial={{ opacity: 0, y: 20 }}
@@ -55,14 +55,11 @@ const BentoCard = ({
5555
>
5656
<CardHeader className={cn("relative z-20 px-6 py-4", headerClassName)}>
5757
<div className="flex items-center gap-3">
58-
<div className="flex h-8 w-8 items-center justify-center bg-secondary/40 ring-1 ring-border transition-all duration-300 group-hover:bg-accent group-hover:ring-muted-foreground/30">
59-
<Icon
60-
className="h-4 w-4 text-muted-foreground transition-colors group-hover:text-foreground"
61-
weight="duotone"
62-
/>
58+
<div className="flex h-8 w-8 items-center justify-center bg-secondary/40 ring-1 ring-border">
59+
<Icon className="h-4 w-4 text-muted-foreground" weight="duotone" />
6360
</div>
6461
<div className="flex flex-col gap-0.5">
65-
<CardTitle className="font-medium font-mono text-foreground text-sm transition-colors">
62+
<CardTitle className="font-medium font-mono text-foreground text-sm">
6663
{title}
6764
</CardTitle>
6865
{description && (
@@ -124,9 +121,7 @@ const FunnelsFeature = () => {
124121
Conversion Rate
125122
</div>
126123
</div>
127-
<Badge className="h-6 border-border bg-secondary/50 px-2.5 font-mono text-muted-foreground text-xs">
128-
+2.4%
129-
</Badge>
124+
<Badge variant="gray">+2.4%</Badge>
130125
</div>
131126
<div
132127
className="h-[320px] w-full"
@@ -368,7 +363,7 @@ const SessionsFeature = () => {
368363
{sessions.map((session) => (
369364
<motion.div
370365
animate={{ opacity: 1, y: 0 }}
371-
className="group flex items-center justify-between border border-border/50 bg-secondary/20 p-2 text-sm transition-colors hover:border-muted-foreground/20 hover:bg-accent/50"
366+
className="group flex items-center justify-between border border-border/50 bg-secondary/20 p-2 text-sm transition-colors"
372367
exit={{ y: -60 }}
373368
initial={{ opacity: 0, y: 60 }}
374369
key={session.id}
@@ -383,7 +378,7 @@ const SessionsFeature = () => {
383378
{session.flag}
384379
</div>
385380
<div className="flex flex-col gap-1">
386-
<span className="font-medium font-mono text-secondary-foreground text-xs transition-colors group-hover:text-foreground">
381+
<span className="font-medium font-mono text-accent-foreground text-xs transition-colors group-hover:text-foreground">
387382
{session.path}
388383
</span>
389384
<span className="font-mono text-muted-foreground text-xs">
@@ -407,7 +402,7 @@ const SessionsFeature = () => {
407402

408403
const ErrorTrackingFeature = () => (
409404
<div className="flex h-full flex-1 flex-col">
410-
<div className="relative overflow-hidden border border-border bg-secondary/20 p-4 transition-all hover:border-muted-foreground/20 hover:bg-accent/50">
405+
<div className="relative overflow-hidden border border-border bg-secondary/20 p-4 transition-all">
411406
<div className="flex items-start gap-3">
412407
<div className="rounded-md bg-destructive/10 p-2">
413408
<motion.div
@@ -422,13 +417,13 @@ const ErrorTrackingFeature = () => (
422417
</div>
423418
<div className="min-w-0 flex-1 space-y-2">
424419
<div className="flex items-center justify-between gap-2">
425-
<p className="truncate font-medium font-mono text-secondary-foreground text-xs">
420+
<p className="truncate font-medium font-mono text-[11px] text-accent-foreground">
426421
TypeError: undefined is not a function
427422
</p>
428423
<Badge variant="destructive">
429424
<motion.span
430425
animate={{ opacity: [1, 0.5, 1] }}
431-
className="font-mono text-[10px] text-red-100"
426+
className="font-mono text-[10px]"
432427
transition={{ duration: 2, repeat: Number.POSITIVE_INFINITY }}
433428
>
434429
CRITICAL
@@ -480,7 +475,7 @@ const FeatureFlagsFeature = () => {
480475
>
481476
{flags.map((flag, i) => (
482477
<div
483-
className="group flex items-center justify-between border border-border/50 bg-secondary/20 p-3 transition-all hover:border-muted-foreground/20 hover:bg-accent/50"
478+
className="group flex items-center justify-between border border-border/50 bg-secondary/20 p-3 transition-all"
484479
key={i}
485480
>
486481
<div className="flex min-w-0 flex-1 items-center gap-3">
@@ -501,7 +496,7 @@ const FeatureFlagsFeature = () => {
501496
)}
502497
</div>
503498
<div className="flex min-w-0 flex-col gap-0.5">
504-
<span className="truncate font-medium font-mono text-secondary-foreground text-xs transition-colors group-hover:text-foreground">
499+
<span className="truncate font-medium font-mono text-accent-foreground text-xs transition-colors group-hover:text-foreground">
505500
{flag.name}
506501
</span>
507502
<span className="font-medium font-mono text-[9px] text-muted-foreground uppercase tracking-widest">
@@ -571,7 +566,7 @@ const WebVitalsFeature = () => {
571566
<motion.div
572567
animate={{ opacity: 1, y: 0 }}
573568
className={cn(
574-
"angled-rectangle-gradient flex h-full flex-col items-center justify-between gap-2 border border-border border-b-0 p-3 transition-all hover:border-muted-foreground/20 hover:bg-accent/50"
569+
"angled-rectangle-gradient flex h-full flex-col items-center justify-between gap-2 border border-border border-b-0 p-3 transition-all"
575570
)}
576571
initial={{ opacity: 0, y: 20 }}
577572
key={m.label}
@@ -711,7 +706,7 @@ const CustomEventsFeature = () => {
711706
{events.map((event) => (
712707
<motion.div
713708
animate={{ opacity: 1, y: 0 }}
714-
className="group flex items-center justify-between border border-border/50 bg-secondary/20 p-2 text-xs transition-colors hover:border-muted-foreground/20 hover:bg-accent/50"
709+
className="flex items-center justify-between border border-border/50 bg-secondary/20 p-2 text-xs transition-colors"
715710
exit={{ y: -60 }}
716711
initial={{ opacity: 0, y: 60 }}
717712
key={event.id}
@@ -722,10 +717,10 @@ const CustomEventsFeature = () => {
722717
}}
723718
>
724719
<div className="flex items-center gap-3">
725-
<div className="rounded-md border border-border bg-background p-2 text-muted-foreground shadow-sm transition-colors group-hover:bg-accent group-hover:text-foreground">
720+
<div className="rounded-md border border-border bg-background p-2 text-muted-foreground transition-colors">
726721
<CursorClick className="size-3" weight="fill" />
727722
</div>
728-
<span className="font-mono text-muted-foreground transition-colors group-hover:text-foreground">
723+
<span className="font-mono text-muted-foreground transition-colors">
729724
{event.name}
730725
</span>
731726
</div>

‎apps/docs/components/ui/badge.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,20 +5,20 @@ import type * as React from 'react';
55
import { cn } from '@/lib/utils';
66

77
const badgeVariants = cva(
8-
'inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap rounded-md border px-2 py-0.5 font-medium text-xs transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3',
8+
'inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap rounded-full border px-2 py-0.5 font-medium text-xs transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3',
99
{
1010
variants: {
1111
variant: {
1212
default:
1313
'badge-angled-rectangle-gradient border border-primary-foreground/20 bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
1414
gray:
15-
'border border-secondary-foreground/20 badge-angled-rectangle-gradient bg-accent text-accent-foreground [a&]:hover:bg-secondary/90',
15+
'bg-secondary border border-accent-foreground/30 badge-angled-rectangle-gradient text-accent-foreground',
1616
amber:
1717
'amber-angled-rectangle-gradient border border-amber-200 bg-amber-100 text-amber-800 [a&]:hover:bg-amber-200/90',
18-
secondary:
18+
secondary:
1919
'border border-accent-foreground/20 dark-angled-rectangle-gradient bg-accent-foreground text-accent [a&]:hover:bg-secondary/90',
2020
destructive:
21-
'border red-angled-rectangle-gradient border-destructive-foreground/20 bg-destructive text-white focus-visible:ring-destructive/20 dark:bg-red-900 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90',
21+
'border dark:border-red-500 border-red-800 bg-red-700 red-angled-rectangle-gradient text-white focus-visible:ring-destructive/20 dark:bg-red-900 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90',
2222
outline:
2323
'border border-foreground/20 text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
2424
},

0 commit comments

Comments
 (0)