chore: add dark mode styles to setting page (#83)

src/components/PricingView.tsx

@@ -4,12 +4,7 @@ import { useTranslation } from "react-i18next";
 import getStripe from "../utils/get-stripejs";
 import { fetchPostJSON } from "../utils/api-helpers";
 
-const includedFeatures = [
+const includedFeatures = ["Private forum access", "Member resources", "Entry to annual conference", "Official member t-shirt"];
-  "Private forum access",
-  "Member resources",
-  "Entry to annual conference",
-  "Official member t-shirt",
-];
 
 const checkout = async () => {
   // Create a Checkout Session.
@@ -39,19 +34,15 @@ const PricingView = () => {
   const { data: session, status } = useSession();
 
   return (
-    <div className="bg-white">
+    <div className="bg-white dark:bg-zinc-800">
       <div className="mx-auto max-w-7xl p-6 lg:flex lg:items-center lg:justify-between lg:px-8">
-        <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
+        <h2 className="text-3xl font-bold tracking-tight sm:text-4xl">{t("setting.plan.pro-question-per-month")}</h2>
-          {t("setting.plan.pro-question-per-month")}
-        </h2>
         <div className="mt-10 flex items-center gap-x-6 lg:mt-0 lg:flex-shrink-0">
           <button
             className="rounded-md bg-indigo-600 px-3.5 py-2.5 text-xl font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
             onClick={() => (session?.user?.email ? checkout() : signIn())}
           >
-            {session?.user?.email
+            {session?.user?.email ? t("setting.plan.early-bird-checkout") : t("payment.login-to-buy")}
-              ? t("setting.plan.early-bird-checkout")
-              : t("payment.login-to-buy")}
           </button>
         </div>
       </div>

src/components/SettingView.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
+import { HasFeature } from "../utils";
 import Icon from "./Icon";
 import AccountView from "./AccountView";
 import PricingView from "./PricingView";
@@ -8,13 +9,12 @@ import ClearDataButton from "./ClearDataButton";
 import LocaleSelector from "./LocaleSelector";
 import ThemeSelector from "./ThemeSelector";
 import OpenAIApiConfigView from "./OpenAIApiConfigView";
-import { HasFeature } from "../utils";
 
 const SettingView = () => {
   const { t } = useTranslation();
 
   return (
-    <div className="w-full flex flex-col justify-start items-start space-y-3 pt-4">
+    <div className="w-full flex flex-col justify-start items-start space-y-3 pt-4 dark:bg-zinc-800">
       <div className="w-full flex flex-row justify-start items-start flex-wrap gap-2">
         <a
           href="https://discord.gg/z6kakemDjm"

src/pages/setting/index.tsx

@@ -4,13 +4,7 @@ import { Fragment, useState } from "react";
 import { useTranslation } from "react-i18next";
 import Link from "next/link";
 import { Dialog, Transition } from "@headlessui/react";
-import {
+import { ArrowUturnLeftIcon, Bars3Icon, Cog6ToothIcon, XMarkIcon, CreditCardIcon } from "@heroicons/react/24/outline";
-  ArrowUturnLeftIcon,
-  Bars3Icon,
-  Cog6ToothIcon,
-  XMarkIcon,
-  CreditCardIcon,
-} from "@heroicons/react/24/outline";
 import SettingView from "../../components/SettingView";
 import StripeCheckPaymentBanner from "../../components/StripeCheckPaymentBanner";
 
@@ -49,13 +43,9 @@ const SettingPage: NextPage = () => {
         ```
       */}
 
-      <div>
+      <div className="dark:bg-zinc-800">
         <Transition.Root show={sidebarOpen} as={Fragment}>
-          <Dialog
+          <Dialog as="div" className="relative z-50 lg:hidden" onClose={setSidebarOpen}>
-            as="div"
-            className="relative z-50 lg:hidden"
-            onClose={setSidebarOpen}
-          >
             <Transition.Child
               as={Fragment}
               enter="transition-opacity ease-linear duration-300"
@@ -89,21 +79,14 @@ const SettingPage: NextPage = () => {
                     leaveTo="opacity-0"
                   >
                     <div className="absolute left-full top-0 flex w-16 justify-center pt-5">
-                      <button
+                      <button type="button" className="-m-2.5 p-2.5" onClick={() => setSidebarOpen(false)}>
-                        type="button"
-                        className="-m-2.5 p-2.5"
-                        onClick={() => setSidebarOpen(false)}
-                      >
                         <span className="sr-only">Close sidebar</span>
-                        <XMarkIcon
+                        <XMarkIcon className="h-6 w-6 text-white" aria-hidden="true" />
-                          className="h-6 w-6 text-white"
-                          aria-hidden="true"
-                        />
                       </button>
                     </div>
                   </Transition.Child>
                   {/* Sidebar component, swap this element with another sidebar if you like */}
-                  <div className="flex grow flex-col gap-y-5 overflow-y-auto bg-white px-6 pb-2">
+                  <div className="flex grow flex-col gap-y-5 overflow-y-auto bg-white dark:bg-zinc-800 px-6 pb-2">
                     <Link className="flex pt-4 shrink-0 items-center" href="/">
                       <img className="w-auto" src="/chat-logo.webp" alt="" />
                     </Link>
@@ -116,17 +99,13 @@ const SettingPage: NextPage = () => {
                                 <Link
                                   href={item.href}
                                   className={classNames(
-                                    item.current
+                                    item.current ? "bg-gray-50 text-indigo-600" : "text-gray-700 hover:text-indigo-600 hover:bg-gray-50",
-                                      ? "bg-gray-50 text-indigo-600"
-                                      : "text-gray-700 hover:text-indigo-600 hover:bg-gray-50",
                                     "group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold"
                                   )}
                                 >
                                   <item.icon
                                     className={classNames(
-                                      item.current
+                                      item.current ? "text-indigo-600" : "text-gray-400 group-hover:text-indigo-600",
-                                        ? "text-indigo-600"
-                                        : "text-gray-400 group-hover:text-indigo-600",
                                       "h-6 w-6 shrink-0"
                                     )}
                                     aria-hidden="true"
@@ -149,7 +128,7 @@ const SettingPage: NextPage = () => {
         {/* Static sidebar for desktop */}
         <div className="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-72 lg:flex-col">
           {/* Sidebar component, swap this element with another sidebar if you like */}
-          <div className="flex grow flex-col gap-y-5 overflow-y-auto border-r border-gray-200 bg-white px-6">
+          <div className="flex grow flex-col gap-y-5 overflow-y-auto border-r border-gray-200 dark:border-zinc-700 bg-white dark:bg-zinc-700 px-6">
             <Link className="flex pt-4 shrink-0 items-center" href="/">
               <img className="" src="/chat-logo.webp" alt="" />
             </Link>
@@ -163,17 +142,15 @@ const SettingPage: NextPage = () => {
                           href={item.href}
                           className={classNames(
                             item.current
-                              ? "bg-gray-50 text-indigo-600"
+                              ? "bg-gray-50 !text-indigo-600 dark:bg-zinc-800"
-                              : "text-gray-700 hover:text-indigo-600 hover:bg-gray-50",
+                              : "text-gray-700 hover:text-indigo-600 hover:bg-gray-50 dark:hover:bg-zinc-800",
-                            "group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold"
+                            "group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold dark:text-gray-400"
                           )}
                         >
                           <item.icon
                             className={classNames(
-                              item.current
+                              item.current ? "!text-indigo-600" : "text-gray-400 group-hover:text-indigo-600",
-                                ? "text-indigo-600"
+                              "h-6 w-6 shrink-0 dark:text-gray-400"
-                                : "text-gray-400 group-hover:text-indigo-600",
-                              "h-6 w-6 shrink-0"
                             )}
                             aria-hidden="true"
                           />
@@ -188,23 +165,15 @@ const SettingPage: NextPage = () => {
           </div>
         </div>
 
-        <div className="sticky top-0 z-40 flex items-center gap-x-6 bg-white px-4 py-4 shadow-sm sm:px-6 lg:hidden">
+        <div className="sticky top-0 z-40 flex items-center gap-x-6 bg-white dark:bg-zinc-700 px-4 py-4 shadow-sm sm:px-6 lg:hidden">
-          <button
+          <button type="button" className="-m-2.5 p-2.5 text-gray-700 dark:text-gray-400 lg:hidden" onClick={() => setSidebarOpen(true)}>
-            type="button"
-            className="-m-2.5 p-2.5 text-gray-700 lg:hidden"
-            onClick={() => setSidebarOpen(true)}
-          >
             <span className="sr-only">Open sidebar</span>
             <Bars3Icon className="h-6 w-6" aria-hidden="true" />
           </button>
         </div>
 
         <main className="lg:pl-72">
-          {router.query.session_id && (
+          {router.query.session_id && <StripeCheckPaymentBanner sessionId={router.query.session_id as string} />}
-            <StripeCheckPaymentBanner
-              sessionId={router.query.session_id as string}
-            />
-          )}
           <div className="px-4 sm:px-6 lg:px-8">
             <SettingView />
           </div>