From bfd49466a5c00c4ee6905de23a370e955715d856 Mon Sep 17 00:00:00 2001 From: Matt Ketmo Date: Fri, 8 Nov 2024 23:54:23 +0100 Subject: [PATCH] feat: highlight new alerts (#15) --- package.json | 1 - pnpm-lock.yaml | 24 ---------------------- src/app/globals.css | 4 ++++ src/components/alerts/alert-groups.tsx | 26 ++++++++++-------------- src/components/alerts/alert-severity.tsx | 2 +- tailwind.config.ts | 13 ++++++++++-- 6 files changed, 27 insertions(+), 43 deletions(-) diff --git a/package.json b/package.json index fe70473..0596ffb 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,6 @@ "@radix-ui/react-tooltip": "^1.1.3", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", - "framer-motion": "^11.11.11", "lucide-react": "^0.454.0", "next": "15.0.2", "next-themes": "^0.4.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 1968569..295f9db 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -38,9 +38,6 @@ importers: clsx: specifier: ^2.1.1 version: 2.1.1 - framer-motion: - specifier: ^11.11.11 - version: 11.11.11(react-dom@19.0.0-rc-02c0e824-20241028(react@19.0.0-rc-02c0e824-20241028))(react@19.0.0-rc-02c0e824-20241028) lucide-react: specifier: ^0.454.0 version: 0.454.0(react@19.0.0-rc-02c0e824-20241028) @@ -1263,20 +1260,6 @@ packages: resolution: {integrity: sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==} engines: {node: '>=14'} - framer-motion@11.11.11: - resolution: {integrity: sha512-tuDH23ptJAKUHGydJQII9PhABNJBpB+z0P1bmgKK9QFIssHGlfPd6kxMq00LSKwE27WFsb2z0ovY0bpUyMvfRw==} - peerDependencies: - '@emotion/is-prop-valid': '*' - react: ^18.0.0 - react-dom: ^18.0.0 - peerDependenciesMeta: - '@emotion/is-prop-valid': - optional: true - react: - optional: true - react-dom: - optional: true - fs.realpath@1.0.0: resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==} @@ -3508,13 +3491,6 @@ snapshots: cross-spawn: 7.0.3 signal-exit: 4.1.0 - framer-motion@11.11.11(react-dom@19.0.0-rc-02c0e824-20241028(react@19.0.0-rc-02c0e824-20241028))(react@19.0.0-rc-02c0e824-20241028): - dependencies: - tslib: 2.8.1 - optionalDependencies: - react: 19.0.0-rc-02c0e824-20241028 - react-dom: 19.0.0-rc-02c0e824-20241028(react@19.0.0-rc-02c0e824-20241028) - fs.realpath@1.0.0: {} fsevents@2.3.3: diff --git a/src/app/globals.css b/src/app/globals.css index 48d2c1f..dd2355d 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -41,7 +41,9 @@ body { --sidebar-accent-foreground: 240 5.9% 10%; --sidebar-border: 220 13% 91%; --sidebar-ring: 217.2 91.2% 59.8%; + --row-highlight: #FDF1E6; } + .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; @@ -75,6 +77,7 @@ body { --sidebar-accent-foreground: 240 4.8% 95.9%; --sidebar-border: 240 3.7% 15.9%; --sidebar-ring: 217.2 91.2% 59.8%; + --row-highlight: #2C2218; } } @@ -82,6 +85,7 @@ body { * { @apply border-border; } + body { @apply bg-background text-foreground; } diff --git a/src/components/alerts/alert-groups.tsx b/src/components/alerts/alert-groups.tsx index 860dbdf..cd8381a 100644 --- a/src/components/alerts/alert-groups.tsx +++ b/src/components/alerts/alert-groups.tsx @@ -1,4 +1,3 @@ -import { motion, AnimatePresence } from "framer-motion" import { useState } from "react" import { ChevronDown } from "lucide-react" @@ -57,20 +56,17 @@ function AlertGroup(props: AlertGroupProps) { maxHeight: open ? `${alerts.length * 50}px` : '0', }}> diff --git a/src/components/alerts/alert-severity.tsx b/src/components/alerts/alert-severity.tsx index a1068f6..67025f9 100644 --- a/src/components/alerts/alert-severity.tsx +++ b/src/components/alerts/alert-severity.tsx @@ -17,7 +17,7 @@ export function AlertSeverity({ alert }: { alert: Alert }) { text = 'ERR' break case 'warning': - color = 'bg-orange-300' + color = 'bg-orange-300 dark:text-black' text = 'WARN' break case 'info': diff --git a/tailwind.config.ts b/tailwind.config.ts index b6a0bec..d094106 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -92,12 +92,21 @@ const config: Config = { from: { transform: 'rotate(360deg)' }, - } + }, + 'highlight': { + '0%': { + background: 'var(--row-highlight)', + }, + '100%': { + background: 'none', + }, + }, }, animation: { 'accordion-down': 'accordion-down 0.2s ease-out', 'accordion-up': 'accordion-up 0.2s ease-out', - 'reverse-spin': 'reverse-spin 1s linear infinite' + 'reverse-spin': 'reverse-spin 1s linear infinite', + highlight: 'highlight 3s', } } },