chore(ui): clean up

src/components/column/dnd.tsx

@@ -51,6 +51,9 @@ export function Dnd() {
         {items.map(id => (
           <motion.li
             key={id}
+            transition={{
+              type: "tween",
+            }}
             variants={{
               hidden: { y: 20, opacity: 0 },
               visible: {

src/components/column/index.tsx

@@ -17,12 +17,10 @@ export function Column({ id }: { id: ColumnID }) {
   if (id === currentColumnID) {
     return (
       <>
-        <div className="flex justify-center md:hidden">
+        <div className="flex justify-center md:hidden mb-6">
           <NavBar />
         </div>
-        <div className="mt-10">
-          <Dnd />
-        </div>
+        <Dnd />
       </>
     )
   }

src/components/common/toast.tsx

@@ -9,7 +9,7 @@ export function Toast() {
         unstyled: true,
         classNames: {
           toast: clsx(
-            "flex gap-1 p-1 rounded-xl backdrop-blur-5 items-center bg-op-40! w-full",
+            "flex gap-1 p-1 rounded-xl backdrop-blur-5 items-center bg-op-70! w-full",
             "bg-blue",
             "data-[type=error]:(bg-red)",
             "data-[type=success]:(bg-green)",
@@ -17,10 +17,10 @@ export function Toast() {
             "data-[type=warning]:(bg-yellow)",
           ),
           icon: "text-white ml-1 dark:text-dark-600 text-op-80!",
-          content: "bg-base bg-op-70! p-2 rounded-md color-base w-full backdrop-blur-md",
+          content: "bg-base bg-op-70! p-2 rounded-lg color-base w-full backdrop-blur-md",
           title: "font-normal text-base",
           description: "color-base text-op-80! text-sm",
-          actionButton: "bg-base bg-op-70! rounded-md py-2 w-4em backdrop-blur-md hover:(bg-base bg-op-60!)",
+          actionButton: "bg-base bg-op-70! rounded-lg py-2 w-4em backdrop-blur-md hover:(bg-base bg-op-60!)",
           closeButton: "bg-base bg-op-50! border-0 hover:(bg-base bg-op-70!)",
         },
       }}

src/components/header/menu.tsx

@@ -50,7 +50,7 @@ export function Menu() {
           id="dropdown-menu"
           className={clsx([
             "absolute top-2rem right-0 z-99 w-200px",
-            "bg-primary p-1 backdrop-blur-5 bg-op-40! rounded-xl",
+            "bg-primary p-1 backdrop-blur-5 bg-op-70! rounded-xl",
           ])}
           initial={{
             scale: 0.9,
@@ -59,7 +59,7 @@ export function Menu() {
             scale: 1,
           }}
         >
-          <ol className="bg-base bg-op-70! backdrop-blur-md p-2 rounded-md color-base text-base">
+          <ol className="bg-base bg-op-70! backdrop-blur-md p-2 rounded-lg color-base text-base">
             {enabledLogin && !loggedIn && (
               <li onClick={login}>
                 <span className="i-ph:sign-in-duotone inline-block" />

src/routes/__root.tsx

@@ -54,9 +54,10 @@ function RootComponent() {
           <Header />
         </header>
         <main className={clsx([
-          "min-h-[calc(100vh-170px)]",
-          "md:(min-h-[calc(100vh-110px)])",
-          "lg:(min-h-[calc(100vh-124px)])",
+          "mt-2",
+          "min-h-[calc(100vh-180px)]",
+          "md:(min-h-[calc(100vh-175px)])",
+          "lg:(min-h-[calc(100vh-194px)])",
         ])}
         >
           <Outlet />