From 29faaf8fb5bc887818ff07a8c024218757fd5486 Mon Sep 17 00:00:00 2001
From: Oliver Pan <2216991777@qq.com>
Date: Mon, 24 Jun 2024 00:27:32 -0500
Subject: [PATCH] chore: Refactor toolbar component

---
 apps/web/components/core/toobar.tsx  | 30 --------------------------
 apps/web/components/core/toolbar.tsx | 32 ++++++++++++++++++++++++++++
 2 files changed, 32 insertions(+), 30 deletions(-)
 delete mode 100644 apps/web/components/core/toobar.tsx
 create mode 100644 apps/web/components/core/toolbar.tsx

diff --git a/apps/web/components/core/toobar.tsx b/apps/web/components/core/toobar.tsx
deleted file mode 100644
index 94f995d..0000000
--- a/apps/web/components/core/toobar.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { cn } from "@ui/lib/utils";
-import ColorModeDropdownMenu from "../ui/color-mode-dropdown-menu";
-import { ModeToggle } from "../ui/dark-mode-toggle";
-import { DiceButton } from "../ui/dice-button";
-import DesktopPreviewToolbarButtons from "../ui/desktop-primary-toolbar-buttons";
-
-function Toolbar() {
-  return (
-    <div
-      className={cn(
-        "mx-auto max-w-[120rem] ",
-        "relative z-[41] flex select-none flex-row items-center justify-between bg-background-accent py-2 transition-colors sm:z-40",
-        "fixed inset-x-0 bottom-0 w-full border-t border-t-border",
-        "sm:border-t-none sm:sticky sm:inset-x-auto sm:bottom-auto sm:top-0 sm:border-none",
-        "site-padding pointer-events-auto",
-      )}
-    >
-      <div className="flex items-center justify-end gap-4">
-        <ModeToggle />
-        <ColorModeDropdownMenu />
-      </div>
-      <div className="flex items-center justify-end gap-4">
-        <DesktopPreviewToolbarButtons />
-        <DiceButton />
-      </div>
-    </div>
-  );
-}
-
-export default Toolbar;
diff --git a/apps/web/components/core/toolbar.tsx b/apps/web/components/core/toolbar.tsx
new file mode 100644
index 0000000..8cdb359
--- /dev/null
+++ b/apps/web/components/core/toolbar.tsx
@@ -0,0 +1,32 @@
+import { cn } from '@ui/lib/utils'
+
+import ColorModeDropdownMenu from '../ui/color-mode-dropdown-menu'
+import { ModeToggle } from '../ui/dark-mode-toggle'
+import DesktopPreviewToolbarButtons from '../ui/desktop-primary-toolbar-buttons'
+import { DiceButton } from '../ui/dice-button'
+
+function Toolbar() {
+  return (
+    <div
+      className={cn(
+        'mx-auto max-w-[120rem]',
+        'relative z-[41] flex select-none flex-row items-center justify-between py-2 sm:z-40',
+        'fixed inset-x-0 bottom-0 w-full border-t border-t-border',
+        'sm:border-t-none sm:sticky sm:inset-x-auto sm:bottom-auto sm:top-0 sm:border-none',
+        'site-padding pointer-events-auto bg-background-accent',
+        'transition-bg'
+      )}
+    >
+      <div className="flex items-center justify-end gap-4">
+        <ModeToggle />
+        <ColorModeDropdownMenu />
+      </div>
+      <div className="flex items-center justify-end gap-4">
+        <DesktopPreviewToolbarButtons />
+        <DiceButton />
+      </div>
+    </div>
+  )
+}
+
+export default Toolbar