created a placeholder PrimaryButton

src/components/ComponentsConteiner.tsx

@@ -3,6 +3,7 @@
 import { useState } from "react";
 import PrimaryButton from "./buttons/PrimaryButton";
 import ThemeToggle from "./UI/ThemeToggle";
+import { Home } from "lucide-react";
 
 export default function ComponentsConteiner() {
     const [isLoading, setIsloading] = useState(false);
@@ -17,7 +18,8 @@ export default function ComponentsConteiner() {
             <ThemeToggle />
             <div className="w-36">
                 <PrimaryButton onClick={() => dummyLoading()} loading={isLoading}>
-                    <p>test text</p>
+                    <Home size={20} />
+                    <p>test icon</p>
                 </PrimaryButton>
             </div>
         </div>

src/components/buttons/PrimaryButton.tsx

@@ -14,7 +14,7 @@ export default function PrimaryButton({ children, loading, className, onClick }:
         <button
             onClick={onClick}
             className={cn(
-                "bg-primary flex w-full items-center justify-center overflow-hidden rounded-xl px-4 py-2 text-white",
+                "bg-primary grid w-full place-items-center overflow-hidden rounded-xl px-4 py-2 text-white",
                 className
             )}
         >
@@ -24,7 +24,7 @@ export default function PrimaryButton({ children, loading, className, onClick }:
                         key={"loading"}
                         initial={{
                             opacity: 0,
-                            x: -100,
+                            x: -80,
                         }}
                         animate={{
                             opacity: 1,
@@ -32,7 +32,10 @@ export default function PrimaryButton({ children, loading, className, onClick }:
                         }}
                         exit={{
                             opacity: 0,
-                            x: -100,
+                            x: -80,
+                        }}
+                        transition={{
+                            duration: 0.2,
                         }}
                     >
                         <LoaderPinwheel className="animate-spin" />
@@ -42,7 +45,7 @@ export default function PrimaryButton({ children, loading, className, onClick }:
                         key="content"
                         initial={{
                             opacity: 0,
-                            x: 100,
+                            x: 80,
                         }}
                         animate={{
                             opacity: 1,
@@ -50,8 +53,12 @@ export default function PrimaryButton({ children, loading, className, onClick }:
                         }}
                         exit={{
                             opacity: 0,
-                            x: 100,
+                            x: 80,
                         }}
+                        transition={{
+                            duration: 0.2,
+                        }}
+                        className="flex items-center justify-center gap-2"
                     >
                         {children}
                     </motion.div>

src/styles/globals.css

@@ -29,7 +29,7 @@ body {
     --color-text: #273343;
 
     /* constants */
-    --color-primary: #16a795;
+    --color-primary: #114455;
     --color-warning: #eedd55;
     --color-information: #0ea5e9;
     --color-error: #ef4444;