chore: fix the theme of dropdown menu on articles page (dark mode) (#1067)

* chore: update the theme of dropdown menu on articles page (for dark mode)

* chore: fix dark mode theme in profile page

Author: nawinsharma

app/(app)/[username]/_usernameClient.tsx

@@ -88,7 +88,7 @@ const Profile = ({ profile, isOwner, session }: Props) => {
 
   return (
     <>
-      <div className="text-900 mx-auto max-w-2xl px-4 dark:text-white">
+      <div className="text-900 mx-auto max-w-2xl px-4 text-black dark:text-white">
         <main className="pt-6 sm:flex">
           <div className="mr-4 flex-shrink-0 self-center">
             {image && (
@@ -124,7 +124,7 @@ const Profile = ({ profile, isOwner, session }: Props) => {
             <h1>Account locked 🔒</h1>
           </div>
         ) : (
-          <div className="mx-auto mt-4 sm:max-w-2xl lg:max-w-5xl">
+          <div className="mx-auto mt-4 dark:bg-neutral-900 sm:max-w-2xl lg:max-w-5xl">
             <Tabs tabs={tabs} />
           </div>
         )}

app/(app)/articles/_client.tsx

@@ -79,7 +79,7 @@ const ArticlesPage = () => {
             <select
               id="filter"
               name="filter"
-              className="mt-2 block w-full rounded border-neutral-300 py-1 pl-3 pr-10 text-sm leading-6 focus:ring-2 focus:ring-pink-600 dark:border-neutral-600"
+              className="mt-2 block w-full rounded border-neutral-300 py-1 pl-3 pr-10 text-sm leading-6 focus:ring-2 focus:ring-pink-600 dark:border-neutral-600 dark:bg-neutral-800"
               onChange={(e) => {
                 router.push(
                   `/articles?filter=${e.target.value}${

app/(app)/create/[[...paramsArr]]/_client.tsx

@@ -638,7 +638,7 @@ const Create = ({ session }: { session: Session }) => {
                 <div className="h-full px-4 py-0 sm:px-6 lg:px-4 lg:py-6 ">
                   {/* Start main area*/}
                   <div className="relative h-full">
-                    <div className="bg-white text-white shadow dark:bg-neutral-900">
+                    <div className="bg-white text-black shadow dark:bg-neutral-900 dark:text-white">
                       {viewPreview ? (
                         <section className="mx-auto max-w-xl px-4 py-6 pb-4 sm:p-6 lg:pb-8">
                           <article

components/Tabs/index.tsx

@@ -29,7 +29,7 @@ export function Tabs(props: Props) {
         <select
           id="tabs"
           name="tabs"
-          className="block w-full rounded-md border-neutral-300 focus:border-neutral-500 focus:ring-neutral-500"
+          className="block w-full rounded-md border-neutral-300 bg-white focus:border-neutral-500 focus:ring-neutral-500 dark:bg-neutral-900"
           defaultValue={tabs.find((tab) => tab.current)?.name || tabs[0].name}
           onChange={(e) => {
             router.push(e.target.value);