feat: add keyframes and animation, change gradient css, change existi…

…ng button

src/app/posts-fb/components/share-button.tsx

@@ -3,7 +3,7 @@
 import { ClipboardCheckIcon, Share2Icon } from "lucide-react";
 import { useState } from "react";
 
-import { Button } from "@/components/ui/button";
+import { Button } from "@/components/button";
 
 export function ShareButton({ link }: { link: string }) {
   const [clicked, setClicked] = useState(false);

src/components/ui/button.tsx → src/components/button.tsx

@@ -71,7 +71,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
             " before:ease-[cubic-bezier(.23,1,.32,1)] before:transition-all before:duration-200 hover:before:-top-1/2" +
             " hover:before:origin-top hover:before:ease-in",
           {
-            "before:bg-gradient-green-blue": variant === "gradient",
+            "before:bg-gradient-main": variant === "gradient",
             "before:bg-white":
               ["default", "secondary"].includes(variant) && color === "white",
             "before:bg-black":
@@ -103,13 +103,13 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
                 className={cn(
                   "h-2 w-2 rounded-full transition-transform duration-75 group-hover:scale-0",
                   {
-                    "bg-gradient-green-blue": variant === "gradient",
+                    "bg-gradient-main": variant === "gradient",
                     "bg-white": variant === "secondary" && color === "white",
                     "bg-black": variant === "secondary" && color === "black",
                   },
                 )}
               />
-              <div className="group-hover:animate-reveal-arrow absolute grid h-full w-full rotate-[30deg] scale-0 place-items-center rounded-full bg-black transition-transform duration-150 ease-out group-hover:ease-in">
+              <div className="absolute grid h-full w-full rotate-[30deg] scale-0 place-items-center rounded-full bg-black transition-transform duration-150 ease-out group-hover:animate-reveal-arrow group-hover:ease-in">
                 <ArrowRight className="!size-5 text-white md:!size-6" />
               </div>
             </div>

src/components/latest-news/post-preview.tsx

@@ -6,7 +6,7 @@ import { useState } from "react";
 
 import type { FacebookPost } from "@/lib/types";
 
-import { Button } from "../ui/button";
+import { Button } from "../button";
 
 export function PostPreview({ post }: { post: FacebookPost }) {
   const date = format(post.updated_time, "dd MMMM yyyy", { locale: pl });

src/components/no-data-info.tsx

@@ -2,7 +2,7 @@
 
 import type { NoDataInfoProps } from "@/lib/types";
 
-import { Button } from "./ui/button";
+import { Button } from "./button";
 
 const handleReload = () => {
   window.location.reload();
@@ -13,13 +13,7 @@ function NoDataInfo({ errorTitle, errorMessage }: NoDataInfoProps) {
     <div className="align-center flex flex-col items-center">
       <h3 className="mb-5 text-lg font-bold">{errorTitle}</h3>
       <p className="mb-5 w-80 text-center sm:w-90">{errorMessage}</p>
-      <Button
-        className="rounded-[100px] border-black font-medium"
-        variant="outline"
-        onClick={handleReload}
-      >
-        odśwież
-      </Button>
+      <Button onClick={handleReload}>odśwież</Button>
     </div>
   );
 }

src/components/static-map.tsx

@@ -3,7 +3,7 @@ import { useState } from "react";
 
 import { cn } from "@/lib/utils";
 
-import { Button } from "./ui/button";
+import { Button } from "./button";
 
 export function StaticMap() {
   const [outside, setOutside] = useState(true);

tailwind.config.ts

@@ -63,7 +63,7 @@ export default {
       },
       backgroundImage: {
         "gradient-main":
-          "radial-gradient(circle at top left, hsl(var(--primary)), hsl(var(--secondary)))",
+          "radial-gradient(94.87% 94.87% at 90% 70%, hsl(var(--primary)), hsl(var(--secondary)))",
         "gradient-secondary":
           "radial-gradient(circle at bottom right, hsl(var(--primary)), hsl(var(--secondary)))",
       },
@@ -74,6 +74,16 @@ export default {
         "animate-height-open": "1fr",
         "animate-height-closed": "0fr",
       },
+      keyframes: {
+        "bouncy-arrow-reveal": {
+          "0%": { transform: "scale3d(0,0,1) rotate(45deg)" },
+          "100%": { transform: "scaleX(1) rotate(0deg)" },
+        },
+      },
+      animation: {
+        "reveal-arrow":
+          "bouncy-arrow-reveal 0.17s cubic-bezier(.2, 1.2, .3, 1.4) forwards",
+      },
     },
   },
   plugins: [animate],