opensource/sqlchat
1
0
Fork 0
mirror of https://github.com/sqlchat/sqlchat.git synced 2025-09-24 08:36:18 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
boojack
2023-05-08 23:29:33 +08:00
committed by GitHub
parent 698eff0978
commit cd265a5c47
3 changed files with 23 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/PricingView.tsx
View File

@ -4,12 +4,7 @@ import { useTranslation } from "react-i18next";
import getStripe from "../utils/get-stripejs";
import { fetchPostJSON } from "../utils/api-helpers";
const includedFeatures = [
"Private forum access",
"Member resources",
"Entry to annual conference",
"Official member t-shirt",
];
const includedFeatures = ["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">
{t("setting.plan.pro-question-per-month")}
</h2>
<h2 className="text-3xl font-bold tracking-tight sm:text-4xl">{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
? t("setting.plan.early-bird-checkout")
: t("payment.login-to-buy")}
{session?.user?.email ? t("setting.plan.early-bird-checkout") : t("payment.login-to-buy")}
</button>
</div>
</div>

4
src/components/SettingView.tsx
View File

@ -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"

65
src/pages/setting/index.tsx
View File

@ -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 {
ArrowUturnLeftIcon,
Bars3Icon,
Cog6ToothIcon,
XMarkIcon,
CreditCardIcon,
} from "@heroicons/react/24/outline";
import { 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
as="div"
className="relative z-50 lg:hidden"
onClose={setSidebarOpen}
>
<Dialog 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
type="button"
className="-m-2.5 p-2.5"
onClick={() => setSidebarOpen(false)}
>
<button type="button" className="-m-2.5 p-2.5" onClick={() => setSidebarOpen(false)}>
<span className="sr-only">Close sidebar</span>
<XMarkIcon
className="h-6 w-6 text-white"
aria-hidden="true"
/>
<XMarkIcon 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
? "bg-gray-50 text-indigo-600"
: "text-gray-700 hover:text-indigo-600 hover:bg-gray-50",
item.current ? "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
? "text-indigo-600"
: "text-gray-400 group-hover:text-indigo-600",
item.current ? "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"
: "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"
? "bg-gray-50 !text-indigo-600 dark:bg-zinc-800"
: "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 dark:text-gray-400"
)}
>
<item.icon
className={classNames(
item.current
? "text-indigo-600"
: "text-gray-400 group-hover:text-indigo-600",
"h-6 w-6 shrink-0"
item.current ? "!text-indigo-600" : "text-gray-400 group-hover:text-indigo-600",
"h-6 w-6 shrink-0 dark:text-gray-400"
)}
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">
<button
type="button"
className="-m-2.5 p-2.5 text-gray-700 lg:hidden"
onClick={() => setSidebarOpen(true)}
>
<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 type="button" className="-m-2.5 p-2.5 text-gray-700 dark:text-gray-400 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 && (
<StripeCheckPaymentBanner
sessionId={router.query.session_id as string}
/>
)}
{router.query.session_id && <StripeCheckPaymentBanner sessionId={router.query.session_id as string} />}
<div className="px-4 sm:px-6 lg:px-8">
<SettingView />
</div>