theme

Author: heymynameisrob

src/components/editor.tsx

@@ -72,7 +72,7 @@ export function Editor({ docId }: { docId: string }) {
   return (
     <div
       className={cn(
-        "relative flex flex-col w-full h-full shrink-0 bg-background border-r last:border-none",
+        "relative flex flex-col w-full h-full shrink-0 bg-background border-r last:border-none dark:bg-gray-2",
         isSaving && "opacity-70 pointer-events-none aniamte-pulse",
       )}
     >

src/components/emoji-picker.tsx

@@ -46,7 +46,7 @@ export const EmojiPicker = ({
           variant="ghost"
           onClick={() => setIsOpen(!isOpen)}
           className={cn(
-            "h-7 w-7 rounded-md bg-gray-3 dark:bg-gray-2 p-px !text-base",
+            "h-7 w-7 rounded-md bg-gray-3 hover:bg-gray-4 p-px !text-base dark:bg-gray-4 dark:hover:bg-gray-5",
             disabled && "pointer-events-none",
             className,
           )}

src/components/sidebar.tsx

@@ -0,0 +1,23 @@
+import { DocQueueItem } from "@/components/docs/doc-queue-item";
+import { UserMenu } from "@/components/user-menu";
+import { useOpenDocsStore } from "@/stores/docs";
+
+export function Sidebar() {
+  const { docs } = useOpenDocsStore();
+
+  const limit = 3;
+
+  return (
+    <div className="flex bg-gray-2 border-r md:flex-col dark:bg-background">
+      <div className="flex h-full items-center gap-2 px-2 py-4 overflow-x-scroll md:overflow-y-scroll scrol-mb-4 md:flex-col">
+        {docs.length > 3 &&
+          docs
+            .slice(0, docs.length - limit)
+            .map((id: string) => <DocQueueItem key={id} id={id} />)}
+      </div>
+      <div className="flex items-center justify-center p-2">
+        <UserMenu position="bottom" />
+      </div>
+    </div>
+  );
+}

src/components/tiptap/tiptap-editor.tsx

@@ -48,7 +48,7 @@ export const TipTapEditor = ({
       Mention.configure({
         HTMLAttributes: {
           class:
-            "bg-gray-2 border border-secondary px-1 py-0.5 rounded-lg underline text-accent font-normal cursor-pointer hover:bg-gray-3",
+            "bg-gray-2 px-1 py-0.5 rounded-lg underline text-accent font-normal cursor-pointer hover:bg-gray-3 dark:bg-gray-4 dark:hover:bg-gray-5",
         },
         suggestion: {
           items: async ({ query }: { query: string }) => {

src/pages/index.tsx

@@ -9,7 +9,7 @@ import { Editor } from "@/components/editor";
 import { Island } from "@/components/client-island";
 import { useOpenDocsStore, useReadOnlyStore } from "@/stores/docs";
 import { OpenDocsEmptyState } from "@/components/docs/docs-empty";
-import { DocQueueItem } from "@/components/docs/doc-queue-item";
+import { Sidebar } from "@/components/sidebar";
 
 import type { GetServerSidePropsContext } from "next";
 
@@ -26,17 +26,7 @@ export default function Page() {
 
   return (
     <main className="flex flex-col h-screen md:flex-row">
-      <div className="flex bg-gray-2 border-r md:flex-col dark:bg-gray-1">
-        <div className="flex h-full items-center gap-2 px-2 py-4 overflow-x-scroll md:overflow-y-scroll scrol-mb-4 md:flex-col">
-          {openDocs.length > 3 &&
-            openDocs
-              .slice(0, openDocs.length - limit)
-              .map((id) => <DocQueueItem key={id} id={id} />)}
-        </div>
-        <div className="flex items-center justify-center p-2 bg-gradient-to-t from-gray-4 to-gray-2 dark:to-gray-1">
-          <UserMenu position="bottom" />
-        </div>
-      </div>
+      <Sidebar />
       <div className="flex w-full h-full">
         <div className="w-full h-full grid grid-cols-1 md:grid-cols-3">
           {openDocs.length > 0 &&

src/primitives/command.tsx

@@ -31,7 +31,7 @@ interface CommandDialogProps extends DialogProps {
 const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
   return (
     <Dialog {...props}>
-      <DialogContent className="overflow-hidden p-0 shadow-floating max-w-[600px]">
+      <DialogContent className="overflow-hidden p-0 shadow-floating max-w-[600px] border">
         <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-primary [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
           {children}
         </Command>
@@ -48,7 +48,7 @@ const CommandInput = React.forwardRef<
 >(({ className, currentPage, ...props }, ref) => (
   <div
     className={cn(
-      "flex items-center gap-2 border-b px-3 bg-gray-1 dark:bg-gray-2",
+      "flex items-center gap-2 border-b px-3 bg-gray-1 dark:bg-gray-1",
       className,
     )}
     cmdk-input-wrapper=""
@@ -76,7 +76,7 @@ const CommandList = React.forwardRef<
   <CommandPrimitive.List
     ref={ref}
     className={cn(
-      "max-h-[300px] overflow-y-auto overflow-x-hidden dark:bg-gray-1",
+      "max-h-[300px] overflow-y-auto overflow-x-hidden dark:bg-gray-2",
       className,
     )}
     {...props}