match more official stylings

src/App.jsx

@@ -12,13 +12,11 @@ const App = () => {
   const { title } = useSelector((state) => state.convo);
   useDocumentTitle(title);
 
-// bg-color: #343541 instead of bg-gray-800
-
   return (
     <div className="flex h-screen">
       <Nav />
       <div className="flex h-full w-full flex-1 flex-col bg-gray-50 md:pl-[260px]">
-        <div className="transition-width relative flex h-full w-full flex-1 flex-col items-stretch overflow-hidden bg-white dark:bg-gray-800/90">
+        <div className="transition-width relative flex h-full w-full flex-1 flex-col items-stretch overflow-hidden bg-white dark:bg-gray-800">
           <MobileNav />
           {messages.length === 0 ? (
             <Landing title={title} />

src/components/Messages/Message.jsx

@@ -56,7 +56,7 @@ export default function Message({
 
   if (notUser) {
     props.className =
-    'w-full border-b border-black/10 dark:border-gray-900/50 text-gray-800 dark:text-gray-100 group bg-gray-100 dark:bg-[#444654]';
+    'w-full border-b border-black/10 bg-gray-50 dark:border-gray-900/50 text-gray-800 dark:text-gray-100 group bg-gray-100 dark:bg-[#444654]';
   }
 
   if (notUser && backgroundColor || sender === 'bingai') {

src/components/Messages/index.jsx

@@ -55,8 +55,8 @@ const Messages = ({ messages }) => {
       onScroll={debouncedHandleScroll}
     >
       {/* <div className="flex-1 overflow-hidden"> */}
-      <div className="h-full dark:bg-gray-800">
+      <div className="h-full dark:gpt-dark-gray">
-        <div className="flex h-full flex-col items-center text-sm dark:bg-gray-800">
+        <div className="flex h-full flex-col items-center text-sm dark:gpt-dark-gray">
           {messages.map((message, i) => (
             <Message
               key={i}
@@ -78,7 +78,7 @@ const Messages = ({ messages }) => {
           </CSSTransition>
 
           <div
-            className="group h-32 w-full flex-shrink-0 dark:border-gray-900/50 dark:bg-gray-800 md:h-48"
+            className="group h-32 w-full flex-shrink-0 dark:border-gray-900/50 dark:gpt-dark-gray md:h-48"
             ref={messagesEndRef}
           />
         </div>

src/components/Models/ModelDialog.jsx

@@ -47,7 +47,7 @@ export default function ModelDialog({ mutate }) {
       return;
     }
 
-      updateCustomGpt.trigger({ value, chatGptLabel, promptPrefix });
+    updateCustomGpt.trigger({ value, chatGptLabel, promptPrefix });
 
     mutate();
     setSaveText('Saved!');
@@ -63,10 +63,10 @@ export default function ModelDialog({ mutate }) {
   const requiredProp = required ? { required: true } : {};
 
   return (
-    <DialogContent className="dark:bg-gray-800">
+    <DialogContent className="shadow-2xl dark:bg-gray-800">
       <DialogHeader>
-        <DialogTitle>Customize ChatGPT</DialogTitle>
+        <DialogTitle className="text-gray-800 dark:text-white">Customize ChatGPT</DialogTitle>
-        <DialogDescription>
+        <DialogDescription className="text-gray-600 dark:text-gray-300">
           Note: important instructions are often better placed in your message rather than the
           prefix.{' '}
           <a
@@ -92,8 +92,8 @@ export default function ModelDialog({ mutate }) {
             ref={inputRef}
             onChange={(e) => setChatGptLabel(e.target.value)}
             placeholder="Set a custom name for ChatGPT"
-            className="col-span-3 shadow-[0_0_10px_rgba(0,0,0,0.10)] invalid:border-red-400 invalid:text-red-600 invalid:placeholder-red-600
+            className=" col-span-3 shadow-[0_0_10px_rgba(0,0,0,0.10)] outline-none placeholder:text-gray-400 invalid:border-red-400 invalid:text-red-600 invalid:placeholder-red-600 invalid:placeholder-opacity-70 invalid:ring-opacity-10 focus:ring-0 focus:invalid:border-red-400 focus:invalid:ring-red-300 dark:border-none dark:bg-gray-700
-              invalid:placeholder-opacity-70 invalid:ring-opacity-20 focus:ring-opacity-20 focus:invalid:border-red-400 focus:invalid:ring-red-400 dark:shadow-[0_0_15px_rgba(0,0,0,0.10)]  dark:invalid:border-red-600 dark:invalid:text-red-300 dark:invalid:placeholder-opacity-80 dark:focus:invalid:ring-red-600 dark:focus:invalid:ring-opacity-50"
+              dark:text-gray-50 dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] dark:invalid:border-red-600 dark:invalid:text-red-300 dark:invalid:placeholder-opacity-80 dark:focus:border-none  dark:focus:border-transparent dark:focus:outline-none dark:focus:ring-0 dark:focus:ring-gray-400 dark:focus:ring-offset-0 dark:focus:invalid:ring-red-600 dark:focus:invalid:ring-opacity-50"
             {...requiredProp}
           />
         </div>
@@ -109,22 +109,22 @@ export default function ModelDialog({ mutate }) {
             value={promptPrefix}
             onChange={(e) => setPromptPrefix(e.target.value)}
             placeholder="Set custom instructions. Defaults to: 'You are ChatGPT, a large language model trained by OpenAI.'"
-            className="col-span-3 flex h-20 w-full resize-none rounded-md border border-slate-300 bg-transparent py-2 px-3 text-sm shadow-[0_0_10px_rgba(0,0,0,0.10)] placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-opacity-20 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:text-slate-50 dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900"
+            className="col-span-3 flex h-20 w-full resize-none rounded-md border border-gray-300 bg-transparent py-2 px-3 text-sm shadow-[0_0_10px_rgba(0,0,0,0.10)] outline-none placeholder:text-gray-400 focus:outline-none focus:ring-gray-400 focus:ring-opacity-20 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-none dark:bg-gray-700 dark:text-gray-50 dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] dark:focus:border-none dark:focus:border-transparent dark:focus:outline-none dark:focus:ring-0 dark:focus:ring-gray-400 dark:focus:ring-offset-0"
           />
         </div>
       </div>
       <DialogFooter>
-        <DialogClose>Cancel</DialogClose>
+        <DialogClose className="dark:hover:gray-400 border-gray-700">Cancel</DialogClose>
         <Button
           style={{ backgroundColor: 'rgb(16, 163, 127)' }}
           onClick={saveHandler}
-          className="inline-flex h-10 items-center justify-center rounded-md border-none py-2 px-4 text-sm font-semibold text-white transition-colors"
+          className="inline-flex h-10 items-center justify-center rounded-md border-none py-2 px-4 text-sm font-semibold text-white transition-colors dark:text-gray-200"
         >
           {saveText}
         </Button>
         <DialogClose
           onClick={submitHandler}
-          className="inline-flex h-10 items-center justify-center rounded-md border-none bg-slate-900 py-2 px-4 text-sm font-semibold text-white transition-colors hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-slate-200 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900"
+          className="inline-flex h-10 items-center justify-center rounded-md border-none bg-gray-900 py-2 px-4 text-sm font-semibold text-white transition-colors hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-200 dark:focus:ring-gray-400 dark:focus:ring-offset-gray-900"
         >
           Submit
         </DialogClose>

src/components/Models/ModelItem.jsx

@@ -8,7 +8,7 @@ export default function ModelItem({ modelName, value }) {
       <DialogTrigger className="w-full">
         <DropdownMenuRadioItem
           value={value}
-          className="dark:font-semibold dark:hover:bg-gray-800"
+          className="dark:font-semibold dark:hover:bg-gray-800 dark:text-gray-100"
         >
           {modelName}
           <sup>$</sup>
@@ -20,7 +20,7 @@ export default function ModelItem({ modelName, value }) {
   return (
     <DropdownMenuRadioItem
       value={value}
-      className="dark:font-semibold dark:hover:bg-gray-800"
+      className="dark:font-semibold dark:hover:bg-gray-800 dark:text-gray-100"
     >
       {modelName}
       {value === 'chatgpt' && <sup>$</sup>}

src/components/Models/ModelMenu.jsx

@@ -116,7 +116,7 @@ export default function ModelMenu() {
 
   return (
     <Dialog>
-      <DropdownMenu>
+      <DropdownMenu >
         <DropdownMenuTrigger asChild>
           <Button
             variant="outline"
@@ -129,7 +129,7 @@ export default function ModelMenu() {
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent className="w-56 dark:bg-gray-700">
-          <DropdownMenuLabel>Select a Model</DropdownMenuLabel>
+          <DropdownMenuLabel className="dark:text-gray-300">Select a Model</DropdownMenuLabel>
           <DropdownMenuSeparator />
           <DropdownMenuRadioGroup
             value={customModel ? customModel : model}

tailwind.config.js

@@ -6,6 +6,9 @@ module.exports = {
   // darkMode: 'class',
   darkMode: ['class'],
   theme: {
+    // colors: {
+    //   'gpt-dark-gray': '#343541',
+    // },
     extend: {
       // fontFamily: {
       //   sans: ['var(--font-sans)', ...fontFamily.sans]
@@ -23,7 +26,21 @@ module.exports = {
       animation: {
         'accordion-down': 'accordion-down 0.2s ease-out',
         'accordion-up': 'accordion-up 0.2s ease-out'
-      }
+      },
+      colors: {
+        gray: {
+          '50': '#f7f7f8',
+          '100': '#d9d9e3',
+          '200': '#d9d9e3', // Replacing .bg-gray-200
+          '300': '#c5c5d2',
+          '400': '#acacb1',
+          '500': '#8e8ea0',
+          '600': '#565869',
+          '700': '#40414f', // Replacing .dark .dark:bg-gray-700 and .dark .dark:hover:bg-gray-700:hover
+          '800': '#343541', // Replacing .dark .dark:bg-gray-800, .bg-gray-800, and .dark .dark:hover:bg-gray-800\/90
+          '900': '#202123' // Replacing .dark .dark:bg-gray-900, .bg-gray-900, and .dark .dark:hover:bg-gray-900:hover
+        }
+    }
     }
   },
   plugins: [