Update vertical align

Author: carlagn

packages/eclipse/src/components/takeover.tsx

@@ -19,7 +19,7 @@ function Takeover({ className, ...props }: React.ComponentProps<"div">) {
 const takeoverMenuVariants = cva("p-6 w-full", {
   variants: {
     variant: {
-      default: "flex justify-between align-center",
+      default: "flex justify-between items-center",
       wizard: "",
     },
   },
@@ -47,12 +47,20 @@ function TakeoverMenu({
     >
       {variant === "default" ? (
         <>
-          <div className="p-1.5" onClick={() => onBack?.()}>
+          <button
+            className="p-1.5"
+            onClick={() => onBack?.()}
+            aria-label="Go back"
+          >
             <i className="text-foreground-neutral-weak fa-regular fa-arrow-left" />
-          </div>
-          <div className="p-1.5" onClick={() => onClose?.()}>
+          </button>
+          <button
+            className="p-1.5"
+            onClick={() => onClose?.()}
+            aria-label="Close"
+          >
             <i className="text-foreground-neutral-weak fa-regular fa-xmark" />
-          </div>
+          </button>
         </>
       ) : (
         props.children

packages/ui/src/components/navigation-menu.tsx

@@ -275,7 +275,7 @@ function Socials({
   return (
     <div
       className={cn(
-        "gap-4 align-center lg:flex! sm:flex md:hidden! hidden",
+        "gap-4 items-center lg:flex! sm:flex md:hidden! hidden",
         scroll && "md:hidden! lg:hidden!",
         className,
       )}
@@ -301,7 +301,7 @@ function Socials({
         </NavigationMenuLink>
       </NavigationMenuItem>
       {(include === "all" || include?.includes("discord")) && (
-        <NavigationMenuItem className="align-center flex">
+        <NavigationMenuItem className="items-center flex">
           <NavigationMenuLink
             className="p-0 hover:bg-revert cursor-pointer"
             href="https://pris.ly/discord"
@@ -321,21 +321,21 @@ function Socials({
         </NavigationMenuItem>
       )}
       {(include === "all" || include?.includes("twitter")) && (
-        <NavigationMenuItem className="align-center flex">
+        <NavigationMenuItem className="items-center flex">
           <NavigationMenuLink className="p-0" href="https://pris.ly/x">
             <i className="fa-brands fa-x-twitter"></i>
           </NavigationMenuLink>
         </NavigationMenuItem>
       )}
       {(include === "all" || include?.includes("youtube")) && (
-        <NavigationMenuItem className="align-center flex">
+        <NavigationMenuItem className="items-center flex">
           <NavigationMenuLink className="p-0" href="https://pris.ly/youtube">
             <i className="fa-brands fa-youtube"></i>
           </NavigationMenuLink>
         </NavigationMenuItem>
       )}
       {(include === "all" || include?.includes("linkedin")) && (
-        <NavigationMenuItem className="align-center flex">
+        <NavigationMenuItem className="items-center flex">
           <NavigationMenuLink className="p-0" href="https://pris.ly/linkedin">
             <i className="fa-brands fa-square-linkedin"></i>
           </NavigationMenuLink>