diff --git a/package.json b/package.json index 85dea702..2c51a477 100644 --- a/package.json +++ b/package.json @@ -7,16 +7,16 @@ "@emoji-mart/react": "^1.1.1", "@metamask/onboarding": "^1.0.1", "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10", - "@react-oauth/google": "^0.7.0", + "@react-oauth/google": "^0.7.1", "@reduxjs/toolkit": "^1.9.2", "@svgr/webpack": "^6.5.1", "@tippyjs/react": "^4.2.6", - "@toast-ui/editor": "^3.2.1", + "@toast-ui/editor": "^3.2.2", "@toast-ui/editor-plugin-code-syntax-highlight": "^3.1.0", - "@toast-ui/react-editor": "^3.2.2", - "@types/node": "^18.13.0", - "@types/react": "^18.0.27", - "@types/react-dom": "^18.0.10", + "@toast-ui/react-editor": "^3.2.3", + "@types/node": "^18.14.0", + "@types/react": "^18.0.28", + "@types/react-dom": "^18.0.11", "@udecode/plate": "16.8", "@uiball/loaders": "^1.2.6", "bfj": "^7.0.2", @@ -30,12 +30,12 @@ "dotenv": "^16.0.3", "dotenv-expand": "^10.0.0", "emoji-mart": "5.5.2", - "eslint": "^8.33.0", + "eslint": "^8.34.0", "file-loader": "^6.2.0", "firebase": "^9.17.1", "fs-extra": "^11.1.0", "html-webpack-plugin": "^5.5.0", - "i18next": "^22.4.9", + "i18next": "^22.4.10", "i18next-browser-languagedetector": "^7.0.1", "i18next-http-backend": "^2.1.1", "linkify-plugin-mention": "^4.1.0", @@ -63,9 +63,9 @@ "react-use-wizard": "^2.2.1", "resolve": "^1.22.1", "rooks": "^7.4.3", - "slate": "^0.90.0", + "slate": "^0.91.1", "slate-history": "^0.86.0", - "slate-react": "^0.90.0", + "slate-react": "^0.91.1", "source-map-loader": "^4.0.1", "style-loader": "^3.3.1", "styled-components": "^5.3.6", @@ -120,8 +120,8 @@ "@types/masonry-layout": "^4.2.5", "@types/react-helmet": "^6.1.6", "@types/react-syntax-highlighter": "^15.5.6", - "@typescript-eslint/eslint-plugin": "^5.51.0", - "@typescript-eslint/parser": "^5.51.0", + "@typescript-eslint/eslint-plugin": "^5.52.0", + "@typescript-eslint/parser": "^5.52.0", "@welldone-software/why-did-you-render": "^7.0.1", "autoprefixer": "^10.4.13", "babel-loader": "^9.1.2", @@ -134,13 +134,13 @@ "eslint-plugin-react-hooks": "^4.6.0", "gh-pages": "^5.0.0", "husky": "^8.0.3", - "lint-staged": "^13.1.1", + "lint-staged": "^13.1.2", "md5-file": "^5.0.0", "patch-package": "^6.5.1", "postcss": "^8.4.21", "postcss-loader": "^7.0.2", "postinstall-postinstall": "^2.1.0", "prettier": "^2.8.4", - "tailwindcss": "^3.2.6" + "tailwindcss": "^3.2.7" } } diff --git a/public/widget.html b/public/widget.html index c0ec701f..cf23d61b 100644 --- a/public/widget.html +++ b/public/widget.html @@ -15,6 +15,9 @@ background: transparent; overflow: hidden; } + html.dark #root { + background: rgb(64 67 71); + } diff --git a/src/index-widget.tsx b/src/index-widget.tsx index ae2a47eb..33f8d476 100644 --- a/src/index-widget.tsx +++ b/src/index-widget.tsx @@ -1,16 +1,24 @@ import ReactDOM from "react-dom/client"; import { Provider } from "react-redux"; - +import { WidgetProvider } from './widget/WidgetContext'; import Widget from "./widget/index"; import './assets/index.css'; import store from "./app/store"; import './i18n'; +import { isDarkMode } from "./common/utils"; const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement); -const hostId = new URLSearchParams(location.search).get("host"); -const themeColor = new URLSearchParams(location.search).get("themeColor") || "#1fe1f9"; +const hostId = new URLSearchParams(location.search).get("host") || 1; +// dark mode +if (isDarkMode()) { + document.documentElement.classList.add('dark'); +} else { + document.documentElement.classList.remove('dark'); +} root.render( hostId ? - + + + : null ); diff --git a/src/widget/Popup/Header.tsx b/src/widget/Popup/Header.tsx index eb6ab1c4..df5bade3 100644 --- a/src/widget/Popup/Header.tsx +++ b/src/widget/Popup/Header.tsx @@ -1,6 +1,6 @@ import { FC } from 'react'; +import { useWidget } from '../WidgetContext'; import { useAppSelector } from '../../app/store'; -import { useTheme } from '../ThemeContext'; import IconClose from './close.svg'; type Props = { @@ -8,20 +8,19 @@ type Props = { }; const Index: FC = ({ handleClose }) => { - const { color, fgColor } = useTheme(); + const { color, fgColor, embed } = useWidget(); const { name, logo } = useAppSelector(store => store.server); return ( -
+
logo
{name}
- + }
); }; diff --git a/src/widget/Popup/Message/Text.tsx b/src/widget/Popup/Message/Text.tsx index a3006497..b9a3da9c 100644 --- a/src/widget/Popup/Message/Text.tsx +++ b/src/widget/Popup/Message/Text.tsx @@ -1,6 +1,6 @@ // import React from 'react'; import clsx from 'clsx'; -import { useTheme } from '../../ThemeContext'; +import { useWidget } from '../../WidgetContext'; type Props = { uid: number, @@ -10,10 +10,10 @@ type Props = { } const Text = ({ content, host, sending }: Props) => { - const { color, fgColor } = useTheme(); + const { color, fgColor } = useWidget(); return host ? -
+
{content}
: diff --git a/src/widget/Popup/Message/index.tsx b/src/widget/Popup/Message/index.tsx index 3baf702a..84e8d1ad 100644 --- a/src/widget/Popup/Message/index.tsx +++ b/src/widget/Popup/Message/index.tsx @@ -34,7 +34,7 @@ const Index = (props: IWidgetMessage) => { } return
{host ? <>
- avatar + avatar
{contentContainer} diff --git a/src/widget/Popup/MessageInput.tsx b/src/widget/Popup/MessageInput.tsx index 7212933d..83ef42ba 100644 --- a/src/widget/Popup/MessageInput.tsx +++ b/src/widget/Popup/MessageInput.tsx @@ -1,7 +1,7 @@ import { useRef, useState, memo } from 'react'; import clsx from 'clsx'; import useSendMessage from '../../common/hook/useSendMessage'; -import { useTheme } from '../ThemeContext'; +import { useWidget } from '../WidgetContext'; @@ -11,7 +11,7 @@ type Props = { } let isComposing = false; const MessageInput = (props: Props) => { - const { color } = useTheme(); + const { color } = useWidget(); const { from, to } = props; const { sendMessage } = useSendMessage({ from, @@ -22,13 +22,13 @@ const MessageInput = (props: Props) => { const [content, setContent] = useState(''); const ref = useRef(null); const textareaClassName = clsx( - 'px-2.5 py-1.5 text-sm rounded-md w-full block', + 'px-2.5 py-1.5 text-sm rounded-md w-full block dark:bg-gray-700 dark:text-gray-100', 'min-h-[32px] max-h-[92px] h-8 resize-none overflow-y-auto', - `ring-1 ring-gray-200 focus:ring-2 focus:ring-[${color}]`, + `ring-1 ring-gray-200 dark:ring-gray-800 focus:ring-2 focus:ring-[${color}]`, 'focus:outline-none', ); return ( -
+