ColdBreeze/ColdBreeze-chat-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: polish dark mode

Browse Source
This commit is contained in:
Tristan Yang
2023-02-09 22:37:55 +08:00
parent 446e9a17d9
commit 38d0d243d0
16 changed files with 89 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/icons/fullscreen.exit.svg
+2 -2
View File
@@ -1,3 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9 4C9 3.44772 8.55228 3 8 3C7.44772 3 7 3.44772 7 4V6.5C7 6.77614 6.77614 7 6.5 7H4C3.44772 7 3 7.44772 3 8C3 8.55228 3.44772 9 4 9H6.5C7.88071 9 9 7.88071 9 6.5V4ZM9 20C9 20.5523 8.55228 21 8 21C7.44772 21 7 20.5523 7 20V17.5C7 17.2239 6.77614 17 6.5 17H4C3.44772 17 3 16.5523 3 16C3 15.4477 3.44772 15 4 15H6.5C7.88071 15 9 16.1193 9 17.5V20ZM16 3C15.4477 3 15 3.44772 15 4V6.5C15 7.88071 16.1193 9 17.5 9H20C20.5523 9 21 8.55228 21 8C21 7.44772 20.5523 7 20 7H17.5C17.2239 7 17 6.77614 17 6.5V4C17 3.44772 16.5523 3 16 3ZM15 20C15 20.5523 15.4477 21 16 21C16.5523 21 17 20.5523 17 20V17.5C17 17.2239 17.2239 17 17.5 17H20C20.5523 17 21 16.5523 21 16C21 15.4477 20.5523 15 20 15H17.5C16.1193 15 15 16.1193 15 17.5V20Z" fill="#667085"/>
<svg width="24" height="24" viewBox="0 0 24 24" fill="#667085" xmlns="http://www.w3.org/2000/svg">
<path d="M9 4C9 3.44772 8.55228 3 8 3C7.44772 3 7 3.44772 7 4V6.5C7 6.77614 6.77614 7 6.5 7H4C3.44772 7 3 7.44772 3 8C3 8.55228 3.44772 9 4 9H6.5C7.88071 9 9 7.88071 9 6.5V4ZM9 20C9 20.5523 8.55228 21 8 21C7.44772 21 7 20.5523 7 20V17.5C7 17.2239 6.77614 17 6.5 17H4C3.44772 17 3 16.5523 3 16C3 15.4477 3.44772 15 4 15H6.5C7.88071 15 9 16.1193 9 17.5V20ZM16 3C15.4477 3 15 3.44772 15 4V6.5C15 7.88071 16.1193 9 17.5 9H20C20.5523 9 21 8.55228 21 8C21 7.44772 20.5523 7 20 7H17.5C17.2239 7 17 6.77614 17 6.5V4C17 3.44772 16.5523 3 16 3ZM15 20C15 20.5523 15.4477 21 16 21C16.5523 21 17 20.5523 17 20V17.5C17 17.2239 17.2239 17 17.5 17H20C20.5523 17 21 16.5523 21 16C21 15.4477 20.5523 15 20 15H17.5C16.1193 15 15 16.1193 15 17.5V20Z" />
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 851 B

After

Width:  |  Height:  |  Size: 840 B

src/assets/icons/fullscreen.svg
+2 -2
View File
@@ -1,3 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 6C5 5.44772 5.44772 5 6 5H8C8.55228 5 9 4.55228 9 4C9 3.44772 8.55228 3 8 3H6C4.34315 3 3 4.34315 3 6V8C3 8.55228 3.44772 9 4 9C4.55228 9 5 8.55228 5 8V6ZM5 18C5 18.5523 5.44772 19 6 19H8C8.55228 19 9 19.4477 9 20C9 20.5523 8.55228 21 8 21H6C4.34315 21 3 19.6569 3 18V16C3 15.4477 3.44772 15 4 15C4.55228 15 5 15.4477 5 16V18ZM18 5C18.5523 5 19 5.44772 19 6V8C19 8.55228 19.4477 9 20 9C20.5523 9 21 8.55228 21 8V6C21 4.34315 19.6569 3 18 3H16C15.4477 3 15 3.44772 15 4C15 4.55228 15.4477 5 16 5H18ZM19 18C19 18.5523 18.5523 19 18 19H16C15.4477 19 15 19.4477 15 20C15 20.5523 15.4477 21 16 21H18C19.6569 21 21 19.6569 21 18V16C21 15.4477 20.5523 15 20 15C19.4477 15 19 15.4477 19 16V18Z" fill="#667085"/>
<svg width="24" height="24" viewBox="0 0 24 24" fill="#667085" xmlns="http://www.w3.org/2000/svg">
<path d="M5 6C5 5.44772 5.44772 5 6 5H8C8.55228 5 9 4.55228 9 4C9 3.44772 8.55228 3 8 3H6C4.34315 3 3 4.34315 3 6V8C3 8.55228 3.44772 9 4 9C4.55228 9 5 8.55228 5 8V6ZM5 18C5 18.5523 5.44772 19 6 19H8C8.55228 19 9 19.4477 9 20C9 20.5523 8.55228 21 8 21H6C4.34315 21 3 19.6569 3 18V16C3 15.4477 3.44772 15 4 15C4.55228 15 5 15.4477 5 16V18ZM18 5C18.5523 5 19 5.44772 19 6V8C19 8.55228 19.4477 9 20 9C20.5523 9 21 8.55228 21 8V6C21 4.34315 19.6569 3 18 3H16C15.4477 3 15 3.44772 15 4C15 4.55228 15.4477 5 16 5H18ZM19 18C19 18.5523 18.5523 19 18 19H16C15.4477 19 15 19.4477 15 20C15 20.5523 15.4477 21 16 21H18C19.6569 21 21 19.6569 21 18V16C21 15.4477 20.5523 15 20 15C19.4477 15 19 15.4477 19 16V18Z" />
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 819 B

After

Width:  |  Height:  |  Size: 808 B

src/assets/icons/markdown.svg
+2 -2
View File
@@ -1,3 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 2H21C21.2652 2 21.5196 2.11706 21.7071 2.32544C21.8946 2.53381 22 2.81643 22 3.11111V20.8889C22 21.1836 21.8946 21.4662 21.7071 21.6746C21.5196 21.8829 21.2652 22 21 22H3C2.73478 22 2.48043 21.8829 2.29289 21.6746C2.10536 21.4662 2 21.1836 2 20.8889V3.11111C2 2.81643 2.10536 2.53381 2.29289 2.32544C2.48043 2.11706 2.73478 2 3 2ZM7 15.8889V11.4444L9 13.6667L11 11.4444V15.8889H13V8.11111H11L9 10.3333L7 8.11111H5V15.8889H7ZM18 12.5556V8.11111H16V12.5556H14L17 15.8889L20 12.5556H18Z" fill="#667085"/>
<svg width="24" height="24" viewBox="0 0 24 24" fill="#667085" xmlns="http://www.w3.org/2000/svg">
<path d="M3 2H21C21.2652 2 21.5196 2.11706 21.7071 2.32544C21.8946 2.53381 22 2.81643 22 3.11111V20.8889C22 21.1836 21.8946 21.4662 21.7071 21.6746C21.5196 21.8829 21.2652 22 21 22H3C2.73478 22 2.48043 21.8829 2.29289 21.6746C2.10536 21.4662 2 21.1836 2 20.8889V3.11111C2 2.81643 2.10536 2.53381 2.29289 2.32544C2.48043 2.11706 2.73478 2 3 2ZM7 15.8889V11.4444L9 13.6667L11 11.4444V15.8889H13V8.11111H11L9 10.3333L7 8.11111H5V15.8889H7ZM18 12.5556V8.11111H16V12.5556H14L17 15.8889L20 12.5556H18Z" />
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 617 B

After

Width:  |  Height:  |  Size: 606 B

src/assets/index.css
+6 -6
View File
@@ -47,7 +47,7 @@
padding: 16px 0;
}
.md-editor .toastui-editor [contenteditable="true"] {
padding: 0;
padding: 6px 0;
}
.md-editor .toastui-editor-md-preview {
padding-top: 16px;
@@ -239,9 +239,9 @@ html.dark ::-webkit-scrollbar-thumb {
padding-right: 0;
padding-left: 8px;
}
[class^="toastui-editor-"] .toastui-editor-md-container .toastui-editor-md-splitter {
/* [class^="toastui-editor-"] .toastui-editor-md-container .toastui-editor-md-splitter {
background-color: #d0d5dd;
}
} */
[class^="toastui-editor-"] .toastui-editor-md-container .ProseMirror {
height: 100%;
}
@@ -251,7 +251,6 @@ html.dark ::-webkit-scrollbar-thumb {
font-weight: 400;
font-size: 14px;
line-height: 22px;
color: #475467;
margin: 0 0 16px;
word-break: break-all;
}
@@ -275,7 +274,6 @@ html.dark ::-webkit-scrollbar-thumb {
[class^="toastui-editor-"] ul > li:before {
margin-top: 10px !important;
margin-left: -14px;
background-color: #475467;
}
[class^="toastui-editor-"] ol li {
display: flex;
@@ -290,5 +288,7 @@ html.dark ::-webkit-scrollbar-thumb {
font-weight: 400;
font-size: 14px;
line-height: 20px;
color: #475467;
}
.toastui-editor-dark .toastui-editor-md-container {
background-color: #4e5762 !important;
}
src/common/component/MarkdownEditor/index.tsx
+5 -1
View File
@@ -2,11 +2,13 @@ import { useRef, useEffect, FC } from "react";
import "@toast-ui/editor/dist/toastui-editor.css";
import { Editor } from "@toast-ui/react-editor";
import "prismjs/themes/prism.css";
import '@toast-ui/editor/dist/theme/toastui-editor-dark.css';
import "@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css";
import codeSyntaxHighlight from "@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight-all.js";
import useUploadFile from "../../hook/useUploadFile";
import Button from "../styled/Button";
import { isDarkMode } from "../../utils";
type Props = {
updateDraft?: (draft: string) => void;
@@ -24,12 +26,13 @@ const MarkdownEditor: FC<Props> = ({
sendMarkdown,
setEditorInstance
}) => {
const editorRef = useRef<Editor | undefined>(undefined);
const editorRef = useRef<Editor>();
const { uploadFile } = useUploadFile();
// const [pHolder, setPHolder] = useState(placeholder);
useEffect(() => {
const editor = editorRef?.current;
if (editor) {
const editorInstance = editor.getInstance();
editorInstance.removeHook("addImageBlobHook");
editorInstance.addHook("addImageBlobHook", async (blob, callback) => {
@@ -73,6 +76,7 @@ const MarkdownEditor: FC<Props> = ({
height={height}
initialEditType="markdown"
useCommandShortcut={true}
theme={isDarkMode() ? "dark" : "light"}
/>
<Button className="send small" onClick={send}>
Send
src/common/component/MarkdownRender.tsx
+3 -1
View File
@@ -1,11 +1,13 @@
import { useEffect, useState, useRef, FC } from "react";
import "prismjs/themes/prism.css";
import '@toast-ui/editor/dist/theme/toastui-editor-dark.css';
import "@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css";
//@ts-ignore
import codeSyntaxHighlight from "@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight-all.js";
import { Viewer } from "@toast-ui/react-editor";
import ImagePreviewModal, { PreviewImageData } from "./ImagePreviewModal";
import { isDarkMode } from "../utils";
interface IProps {
@@ -50,7 +52,7 @@ const MarkdownRender: FC<IProps> = ({ content }) => {
<ImagePreviewModal download={false} data={previewImage} closeModal={closePreviewModal} />
)}
<div ref={mdContainer} id="MARKDOWN_CONTAINER">
<Viewer initialValue={content} plugins={[codeSyntaxHighlight]}></Viewer>
<Viewer initialValue={content} plugins={[codeSyntaxHighlight]} theme={isDarkMode() ? "dark" : "light"}></Viewer>
</div>
</>
);
src/common/component/Send/Toolbar.tsx
+4 -4
View File
@@ -48,22 +48,22 @@ const Toolbar: FC<Props> = ({
<div className={`flex flex-col items-center justify-end gap-2.5 md:flex-row`}>
<div className="cursor-pointer flex gap-3.5">
<Tooltip placement="top" tip="Markdown">
<MarkdownIcon className="fill-[#22ccee]" onClick={toggleMode} />
<MarkdownIcon className={isMarkdown ? "fill-[#22ccee]" : "dark:fill-gray-300"} onClick={toggleMode} />
</Tooltip>
{isMarkdown &&
(fullscreen ? (
<Tooltip placement="top" tip="Exit Fullscreen">
<ExitFullscreenIcon onClick={toggleMarkdownFullscreen} />
<ExitFullscreenIcon onClick={toggleMarkdownFullscreen} className="dark:fill-gray-300" />
</Tooltip>
) : (
<Tooltip placement="top" tip="Fullscreen">
<FullscreenIcon onClick={toggleMarkdownFullscreen} />
<FullscreenIcon onClick={toggleMarkdownFullscreen} className="dark:fill-gray-300" />
</Tooltip>
))}
</div>
{!isMarkdown && <Tooltip placement="top" tip={t("action.upload")}>
<div className="cursor-pointer relative w-6 h-6">
<AddIcon />
<AddIcon className="dark:fill-gray-300" />
<label htmlFor="file" className=" cursor-pointer absolute left-0 top-0 w-full h-full opacity-0">
<input
className="hidden"
src/common/component/User/index.tsx
+1 -1
View File
@@ -43,7 +43,7 @@ const User: FC<Props> = ({
};
if (!curr) return null;
const online = curr.online || curr.uid == loginUid;
const containerClass = clsx(`relative flex items-center justify-start gap-2 p-2 rounded-lg select-none `, interactive && "hover:bg-gray-500/10", compact && "p-0");
const containerClass = clsx(`relative flex items-center justify-start gap-2 rounded-lg select-none `, interactive && "hover:bg-gray-500/10", compact ? "p-0" : "p-2");
const nameClass = clsx(`text-sm text-gray-500 max-w-[190px] truncate font-semibold dark:text-white`);
const statusClass = clsx(`absolute -bottom-0.5 -right-1.5 w-3 h-3 box-content rounded-full border-[2px] border-solid border-white dark:border-gray-300`,
online ? "bg-[#22c55e]" : "bg-[#a1a1aa]",
src/common/component/Version.tsx
+2 -2
View File
@@ -6,12 +6,12 @@ type Props = {};
const Version: FC<Props> = () => {
const { t } = useTranslation("setting", { keyPrefix: "version" });
const { data: serverVersion } = useGetServerVersionQuery();
const ts = process.env.REACT_APP_BUILD_TIME;
const ts = (process.env.REACT_APP_BUILD_TIME ?? 0) as number;
return (
<div className="flex flex-col gap-3 dark:text-white">
<div className="item">{t("client_version")}: {process.env.VERSION}</div>
<div className="item">{t("server_version")}: {serverVersion}</div>
<div className="item">{t("build_time")}: {ts} {dayjs(ts).fromNow()}</div>
<div className="item">{t("build_time")}: {ts} ({dayjs(ts * 1000).fromNow()})</div>
</div>
);
};
src/common/component/styled/Button.tsx
+3 -3
View File
@@ -10,12 +10,12 @@ const StyledButton = ({ children, className = '', ...rest }: Props) => {
const isSmall = className.includes('small');
const isMini = className.includes('mini');
const isFull = className.includes('flex');
return <button className={clsx(`text-sm text-white bg-primary-400 break-keep shadow rounded-lg box-border px-3.5 py-2.5 hover:bg-primary-500 active:bg-primary-500 disabled:bg-gray-300`,
return <button className={clsx(`text-sm text-white bg-primary-400 break-keep shadow rounded-lg px-3.5 py-2.5 hover:bg-primary-500 active:bg-primary-500 disabled:bg-gray-300`,
isFull && "w-full",
isGhost && "text-primary-400 border border-solid border-primary-400 !bg-transparent",
isCancel && "!bg-transparent text-gray-800 dark:text-gray-50 border border-solid border-gray-200",
isCancel && "!bg-transparent !text-black dark:!text-gray-50 border border-solid border-gray-200",
isSmall && "!py-2",
noBorder && "!shadow-none border-none",
noBorder && "!shadow-none !border-none",
isMini && "!px-2.5 !py-1 !text-xs",
isDanger && "bg-red-500 disabled:bg-gray-300 hover:bg-red-500/80 active:bg-red-700",
className
src/common/utils.tsx
+7
View File
@@ -376,4 +376,11 @@ export const getContrastColor = (hexcolor: string) => {
// Check contrast
return (yiq >= 128) ? 'black' : 'white';
};
export const isDarkMode = () => {
const isDarkMode = localStorage.theme === 'dark';
const isLightMode = localStorage.theme === 'light';
return isDarkMode || (!isLightMode && window.matchMedia('(prefers-color-scheme: dark)').matches);
};
src/index.tsx
+2 -3
View File
@@ -14,12 +14,11 @@ import ReduxRoutes from "./routes";
import NewVersion from "./common/component/NewVersion";
// import i18n (needs to be bundled ;))
import './i18n';
import { isDarkMode } from './common/utils';
const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
// dark mode
const isDarkMode = localStorage.theme === 'dark';
const isLightMode = localStorage.theme === 'light';
if (isDarkMode || (!isLightMode && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
if (isDarkMode()) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
src/routes/home/index.tsx
+1 -1
View File
@@ -58,7 +58,7 @@ function HomePage() {
{!guest && <Notification />}
<div className={`vocechat-container flex w-screen h-screen bg-[#e5e7eb] dark:bg-[#121926]`}>
{!guest && (
<div className={`h-full flex flex-col items-center relative w-16 bg-transparent transition-all`}>
<div className={`h-full flex flex-col items-center relative w-16 bg-[#e5e7eb] dark:bg-[#121926] transition-all`}>
{loginUid && <User uid={loginUid} />}
<nav className="flex flex-col gap-1 px-3 py-6">
<NavLink
src/routes/resources/Filter/index.tsx
+1 -1
View File
@@ -11,7 +11,7 @@ import { useTranslation } from "react-i18next";
import clsx from "clsx";
const getClass = (selected: boolean) => {
return clsx(`cursor-pointer flex items-center gap-2 border border-solid dark:border-gray-400 box-border shadow rounded-lg py-2 px-3 text-xs text-gray-900 dark:text-gray-200`, selected && 'text-white bg-primary-400');
return clsx(`cursor-pointer flex items-center gap-2 border border-solid border-gray-300 dark:border-gray-400 shadow rounded-lg py-2 px-3 text-xs text-gray-900 dark:text-gray-200`, selected && 'text-white bg-primary-400');
};
export default function Filter({ filter, updateFilter }) {
const { t } = useTranslation("file");