Moved animation css code to tailwind config and added yellow as warning color

Author: mauryapari

src/app/hero-banner.tsx

@@ -17,7 +17,7 @@ export default function HeroBanner() {
  href={"/race"}
  title="View Profile Picture"
  prefetch
- className="px-4 py-2 text-sm italic font-medium transition-colors bg-yellow-500 rounded-md md:text-2xl ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus:bg-accent hover:bg-accent hover:text-accent-foreground"
+ className="px-4 py-2 text-sm italic font-medium transition-colors bg-warning rounded-md md:text-2xl ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus:bg-accent hover:bg-accent hover:text-accent-foreground"
  >
  {"Start Racing"}
  </Link>

src/app/race/displayed-code.tsx

@@ -1,5 +1,4 @@
 import { cn } from "@/lib/utils";
-import "@/styles/animation.css";
 
 interface displayCodeProps {
  code: string;
@@ -21,7 +20,7 @@ export default function DisplayedCode({
  key={index}
  className={cn({
  "bg-red-500 opacity-100": errors.includes(index),
- "blink-animation": userInput.length === index,
+ "animate-blink": userInput.length === index,
  "opacity-100":
  userInput.length !== index && userInput[index] === char,
  "opacity-50":

src/components/header.tsx

@@ -9,7 +9,7 @@ export async function Header() {
  const user = await getCurrentUser();
 
  return (
- <header className="sticky top-0 z-40 flex w-full border-b-2 border-yellow-500 bg-background/10 backdrop-blur-sm">
+ <header className="sticky top-0 z-40 flex w-full border-b-2 border-warning bg-background/10 backdrop-blur-sm">
  <div className="container flex items-center w-full h-20 space-x-4 sm:space-x-0">
  <div className="flex-1">
  <MainNav items={siteConfig.getHeaderLinks(!!user)} />

src/components/mode-toggle.tsx

@@ -18,7 +18,7 @@ export function ModeToggle() {
  return (
  <DropdownMenu>
  <DropdownMenuTrigger asChild>
- <Button className="border-yellow-500" variant="outline" size="icon">
+ <Button className="border-warning" variant="outline" size="icon">
  <Icons.sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:rotate-90 dark:scale-0" />
  <Icons.moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
  <span className="sr-only">Toggle theme</span>

src/styles/animation.css

@@ -34,6 +34,9 @@
  --success: 129, 74%, 45%;
  --success-foreground: 114, 65%, 36%;
 
+ --warning-light: 53, 98.3%, 76.9%;
+ --warning-dark: 45, 93.4%, 47.5%;
+
  --ring: 215 20.2% 65.1%;
 
  --radius: 0.5rem;
@@ -72,6 +75,9 @@
  --success: 121, 68%, 44%;
  --success-foreground: 114, 68%, 35%;
 
+ --warning-light: 53, 98.3%, 76.9%;
+ --warning-dark: 45, 93.4%, 47.5%;
+
  --ring: 217.2 32.6% 17.5%;
 
  --monochrome-color: 0 0% 100%;

src/styles/globals.css

@@ -2,10 +2,10 @@
 module.exports = {
  darkMode: ["class"],
  content: [
- './pages/**/*.{ts,tsx}',
- './components/**/*.{ts,tsx}',
- './app/**/*.{ts,tsx}',
- './src/**/*.{ts,tsx}',
+ "./pages/**/*.{ts,tsx}",
+ "./components/**/*.{ts,tsx}",
+ "./app/**/*.{ts,tsx}",
+ "./src/**/*.{ts,tsx}",
  ],
  theme: {
  container: {
@@ -44,6 +44,10 @@ module.exports = {
  DEFAULT: "hsl(var(--success))",
  foreground: "hsl(var(--success-foreground))",
  },
+ warning: {
+ DEFAULT: "hsl(var(--warning-dark))",
+ 200: "hsl(var(--warning-light))",
+ },
  muted: {
  DEFAULT: "hsl(var(--muted))",
  foreground: "hsl(var(--muted-foreground))",
@@ -86,14 +90,20 @@ module.exports = {
  "dash": {
  "0%": { transform: "translate(2539.6383913420013px, 0)" },
  "100%": { transform: "translate(-2539.6383913420013px, 0)" }
+ },
+ "blink": {
+ "0%": { background: "bg-warning-200", color: "##878c8e" },
+ "50%": { background: "transparent" },
+ "100%": { background: "bg-warning-200", color: "##878c8e" },
  }
  },
  animation: {
  "accordion-down": "accordion-down 0.2s ease-out",
  "accordion-up": "accordion-up 0.2s ease-out",
  "gear-rotate-left": "gear-rotate-left 5s linear infinite",
  "gear-rotate-right": "gear-rotate-right 5s linear infinite",
- "dash":"dash linear infinite",
+ "dash": "dash linear infinite",
+ "blink": "blink 1.5s ease infinite"
  },
  },
  },