Refactor class names to use inline styles in ChatHistory component

Royal-lobster · Apr 14, 2024 · 32ba953 · 32ba953
1 parent ecd3416
commit 32ba953
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 17 deletions.
diff --git a/src/components/QuickMenu/RecursiveItem.tsx b/src/components/QuickMenu/RecursiveItem.tsx
@@ -12,7 +12,7 @@ export const RecursiveItem = ({ item, handleGenerate }: RecursiveItemProps) => {
   if (item.prompt && !(item.children as [Prompt] | undefined)?.length) {
     return (
       <DropdownMenu.Item
-        className={ItemClassNames}
+        className="cdx-p-1 cdx-rounded cdx-border-0 cdx-select-none cdx-outline-0 cdx-text-sm cdx-flex cdx-items-center cdx-justify-between data-[highlighted]:cdx-bg-neutral-200 data-[highlighted]:dark:cdx-bg-neutral-600"
         onSelect={() => handleGenerate(item.prompt)}
       >
         <span>{item.name}</span>
@@ -24,12 +24,12 @@ export const RecursiveItem = ({ item, handleGenerate }: RecursiveItemProps) => {
 
   return (
     <DropdownMenu.Sub>
-      <DropdownMenu.SubTrigger className={ItemClassNames}>
+      <DropdownMenu.SubTrigger className="cdx-p-1 cdx-rounded cdx-border-0 cdx-select-none cdx-outline-0 cdx-text-sm cdx-flex cdx-items-center cdx-justify-between data-[highlighted]:cdx-bg-neutral-200 data-[highlighted]:dark:cdx-bg-neutral-600">
         <span>{item.name}</span>
         <HiOutlineChevronRight size={10} />
       </DropdownMenu.SubTrigger>
       <DropdownMenu.SubContent
-        className={ContentClassNames}
+        className="cdx-flex cdx-flex-col cdx-min-w-[150px] cdx-gap-2 cdx-backdrop-blur-sm !cdx-font-sans cdx-m-2 cdx-bg-neutral-50 cdx-shadow-md cdx-p-2 cdx-rounded dark:cdx-bg-neutral-800 cdx-text-neutral-800 dark:cdx-text-neutral-100"
         style={{ zIndex: 2147483647 }}
       >
         {item.children.map((item) => (

diff --git a/src/components/QuickMenu/index.tsx b/src/components/QuickMenu/index.tsx
@@ -7,12 +7,6 @@ import { generatePromptInSidebar } from '../../lib/generatePromptInSidebar'
 import { RecursiveItem } from './RecursiveItem'
 import './index.css'
 
-export const ContentClassNames =
-  'cdx-flex cdx-flex-col cdx-min-w-[150px] cdx-gap-2 cdx-backdrop-blur-sm !cdx-font-sans cdx-m-2 cdx-bg-neutral-50 cdx-shadow-md cdx-p-2 cdx-rounded dark:cdx-bg-neutral-800 cdx-text-neutral-800 dark:cdx-text-neutral-100'
-
-export const ItemClassNames =
-  'cdx-p-1 cdx-rounded cdx-border-0 cdx-select-none cdx-outline-0 cdx-text-sm cdx-flex cdx-items-center cdx-justify-between data-[highlighted]:cdx-bg-neutral-200 data-[highlighted]:dark:cdx-bg-neutral-600'
-
 interface QuickMenuProps {
   selectedText: string
   setMenuOpen: (open: boolean) => void
@@ -61,7 +55,7 @@ export const QuickMenu = ({ selectedText, setMenuOpen }: QuickMenuProps) => {
       <DropdownMenu.Portal>
         <DropdownMenu.Content
           style={{ zIndex: 2147483647 }}
-          className={ContentClassNames}
+          className="cdx-flex cdx-flex-col cdx-min-w-[150px] cdx-gap-2 cdx-backdrop-blur-sm !cdx-font-sans cdx-m-2 cdx-bg-neutral-50 cdx-shadow-md cdx-p-2 cdx-rounded dark:cdx-bg-neutral-800 cdx-text-neutral-800 dark:cdx-text-neutral-100"
         >
           <DropdownMenu.Group>
             {prompts

diff --git a/src/components/Sidebar/chat/ChangeChatModel.tsx b/src/components/Sidebar/chat/ChangeChatModel.tsx
@@ -7,7 +7,7 @@ const ChangeChatModel = () => {
   const { availableModels, activeChatModel, setActiveChatModel } =
     useChatModels()
   return (
-    <div className="cdx-flex cdx-items-center cdx-gap-1 cdx-text-neutral-500 dark:cdx-bg-black/20 cdx-bg-black/10 cdx-border cdx-rounded-md cdx-border-neutral-400/30 dark:cdx-border-neutral-500/30 cdx-py-1 cdx-px-3">
+    <div className="cdx-flex cdx-items-center cdx-gap-1 cdx-text-neutral-500 dark:cdx-bg-neutral-900 cdx-bg-neutral-200 cdx-border cdx-rounded-md cdx-border-neutral-400/30 dark:cdx-border-neutral-500/30 cdx-py-1 cdx-px-3">
       <BsRobot size={18} className="cdx-flex-shrink-0" />
       <select
         value={activeChatModel}

diff --git a/src/components/Sidebar/chat/ChatHistory.tsx b/src/components/Sidebar/chat/ChatHistory.tsx
@@ -29,21 +29,21 @@ const ChatHistory = () => {
   return (
     <div>
       <DropdownMenu.Root>
-        <DropdownMenu.Trigger className="cdx-flex cdx-items-center cdx-gap-1 cdx-text-neutral-500 dark:cdx-bg-black/20 cdx-bg-black/10 cdx-border cdx-rounded-md cdx-border-neutral-400/30 dark:cdx-border-neutral-500/30 cdx-py-1 cdx-px-3">
+        <DropdownMenu.Trigger className="cdx-flex cdx-items-center cdx-gap-1 cdx-text-neutral-500 dark:cdx-bg-neutral-900 cdx-bg-neutral-200 cdx-border cdx-rounded-md cdx-border-neutral-400/30 dark:cdx-border-neutral-500/30 cdx-py-1 cdx-px-3">
           <RiTimeLine size={18} className="cdx-flex-shrink-0" /> History
         </DropdownMenu.Trigger>
         <DropdownMenu.Content
           side="top"
-          className="cdx-max-w-xs cdx-mr-3 cdx-w-[280px] cdx-bg-white/90 dark:cdx-bg-neutral-800/80 cdx-rounded-lg cdx-mb-1.5 cdx-pb-3 cdx-overflow-hidden focus:outline-none"
+          className="cdx-max-w-xs cdx-mr-3 cdx-w-[280px] dark:cdx-bg-neutral-900 cdx-bg-neutral-200 cdx-border cdx-border-neutral-400/30 dark:cdx-border-neutral-500/30 cdx-rounded-lg cdx-mb-1.5 cdx-pb-3 cdx-overflow-hidden focus:outline-none"
         >
-          <div className="cdx-backdrop-blur-md">
+          <div>
             <div className="cdx-flex cdx-justify-between cdx-items-center cdx-p-3 cdx-border-b-[#E5E7EB] cdx-border-b dark:cdx-border-b-[#2F2F2F]">
               <h1 className="cdx-text-lg cdx-font-bold cdx-text-[#5A5A5A] dark:cdx-text-[#E3E3E3]">
                 History
               </h1>
               <button
                 type="button"
-                className="cdx-flex cdx-items-center cdx-text-white cdx-bg-[#3B82F6] cdx-gap-1.5 cdx-px-2.5 cdx-py-1.5 cdx-rounded-sm cdx-font-medium"
+                className="cdx-flex cdx-items-center cdx-text-white cdx-bg-[#3B82F6] cdx-gap-1.5 cdx-px-2.5 cdx-py-1.5 cdx-rounded-md cdx-font-medium"
                 onClick={handleCreateNewChat}
               >
                 <RiAddLine />

diff --git a/src/components/Sidebar/chat/InsertPromptToDraftButton.tsx b/src/components/Sidebar/chat/InsertPromptToDraftButton.tsx
@@ -6,7 +6,6 @@ import {
   RiFilePaperLine,
   RiInsertRowTop,
 } from 'react-icons/ri'
-import { ContentClassNames } from '../../QuickMenu'
 import { usePrompts } from '../../../hooks/usePrompts'
 import { RecursiveItem } from '../../QuickMenu/RecursiveItem'
 
@@ -33,7 +32,7 @@ const InsertPromptToDraftButton = ({
       <DropdownMenu.Portal>
         <DropdownMenu.Content
           style={{ zIndex: 2147483647 }}
-          className={ContentClassNames}
+          className="cdx-flex cdx-flex-col cdx-min-w-[150px] cdx-gap-2 cdx-backdrop-blur-sm !cdx-font-sans cdx-m-2 cdx-bg-neutral-50 cdx-shadow-md cdx-p-2 cdx-rounded dark:cdx-bg-neutral-800 cdx-text-neutral-800 dark:cdx-text-neutral-100"
         >
           <DropdownMenu.Group>
             {prompts