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

refactor: replace custom color with preset color

Browse Source
This commit is contained in:
Tristan Yang
2023-02-18 11:11:17 +08:00
parent 7d169bade5
commit b8b8db0d00
20 changed files with 25 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/common/component/BlankPlaceholder.tsx
+3 -3
View File
@@ -14,9 +14,9 @@ interface Props {
type?: "chat" | "user";
}
const classes = {
box: "w-[220px] md:w-[200px] h-[100px] md:h-[200px] cursor-pointer bg-[#f9fafb] dark:bg-gray-800 rounded-3xl flex-center flex-col gap-4",
box: "w-[220px] md:w-[200px] h-[100px] md:h-[200px] cursor-pointer bg-white dark:bg-gray-800 rounded-3xl flex-center flex-col gap-4",
boxIcon: "w-7 h-7 md:w-10 md:h-10",
boxTip: "px-5 text-xs md:text-sm text-[#475467] dark:text-gray-100 font-bold text-center"
boxTip: "px-5 text-xs md:text-sm text-slate-600 dark:text-gray-100 font-bold text-center"
};
const BlankPlaceholder: FC<Props> = ({ type = "chat" }) => {
const { t } = useTranslation("welcome");
@@ -40,7 +40,7 @@ const BlankPlaceholder: FC<Props> = ({ type = "chat" }) => {
<>
<div className="flex flex-col gap-8 -mt-[50px] dark:bg-gray-700">
<div className="flex flex-col gap-2 items-center">
<h2 className="text-center text-3xl text-[#344054] dark:text-white font-bold">{t("title", { name: server.name })}</h2>
<h2 className="text-center text-3xl text-slate-700 dark:text-white font-bold">{t("title", { name: server.name })}</h2>
<p className="text-sm text-gray-400 max-w-[424px] text-center">
{t("desc")}
</p>
src/common/component/FileMessage/AudioMessage.tsx
+1 -1
View File
@@ -18,7 +18,7 @@ const AudioMessage = ({ url, name, size, download }: Props) => {
};
const _size = formatBytes(size);
return (
<div className='w-96 flex flex-col gap-2 px-3 py-2 rounded-md border border-solid border-gray-300 overflow-hidden bg-[#f1f3f4]'>
<div className='w-96 flex flex-col gap-2 px-3 py-2 rounded-md border border-solid border-gray-300 overflow-hidden bg-stone-100'>
<div className="flex justify-between z-30 overflow-hidden">
<div className="flex gap-2 ">
<IconAudio className="w-9 h-auto" />
src/common/component/FileMessage/Progress.tsx
+1 -1
View File
@@ -6,7 +6,7 @@ interface Props {
const Progress: FC<Props> = ({ value, width = "100%" }) => {
return (
<div className="bg-[#ecfdff] rounded h-2 overflow-hidden" style={{ width }}>
<div className="bg-gray-50 rounded h-2 overflow-hidden" style={{ width }}>
<div className="h-2 bg-primary-700 rounded transition-all" style={{ width: `${value}%` }}></div>
</div>
);
src/common/component/GoogleLoginButton.tsx
+1 -1
View File
@@ -44,7 +44,7 @@ const GoogleLoginInner: FC<Props> = ({ type = "login", loaded, loadError }) => {
}, [error]);
return (
<Button className=" group relative w-full !bg-white dark:!bg-gray-700 !text-gray-600 dark:!text-gray-200 !h-[46px] overflow-hidden border border-solid border-[#d0d5dd]" disabled={!loaded || isLoading}>
<Button className=" group relative w-full !bg-white dark:!bg-gray-700 !text-gray-600 dark:!text-gray-200 !h-[46px] overflow-hidden border border-solid border-gray-300" disabled={!loaded || isLoading}>
<div className="absolute left-0 top-0 w-full flex-center gap-3 z-[998] h-10 bg-inherit">
<IconGoogle className="w-6 h-6" />
{loadError
src/common/component/Message/Commands.tsx
+1 -1
View File
@@ -127,7 +127,7 @@ const Commands: FC<Props> = ({ context = "user", contextId = 0, mid = 0, toggleE
)}
<li className="flex cursor-pointer p-1 hover:bg-gray-100 dark:hover:bg-gray-800" onClick={handleAddFav}>
<Tooltip placement="top" tip={t("action.add_to_fav")}>
<IconBookmark className="fill-[#667085] w-6 h-6" />
<IconBookmark className="fill-slate-500 w-6 h-6" />
</Tooltip>
</li>
<Tippy
src/common/component/Message/Reaction.tsx
+2 -2
View File
@@ -65,7 +65,7 @@ const Reaction: FC<Props> = ({ mid, reactions = null, readOnly = false }) => {
return uids.length > 0 ? (
<span
onClick={readOnly ? undefined : handleReact.bind(null, reaction)}
className={`cursor-pointer rounded-md relative flex items-center gap-1 p-1 hover:bg-[#cff9fe] ${reacted ? "shadow-[inset_0_0_0_1px_#06aed4] bg-[#a5f0fc]" : ""}`}
className={`cursor-pointer rounded-md relative flex items-center gap-1 p-1 hover:bg-cyan-100 ${reacted ? "shadow-[inset_0_0_0_1px_#06aed4] bg-cyan-200" : ""}`}
key={reaction}
>
<Tippy
@@ -93,7 +93,7 @@ const Reaction: FC<Props> = ({ mid, reactions = null, readOnly = false }) => {
trigger="click"
content={<ReactionPicker mid={mid} hidePicker={hideAll} />}
>
<button className="invisible group-hover:visible w-6 h-6 bg-[#ecfdff] hover:bg-[#cff9fe] rounded-md flex-center">
<button className="invisible group-hover:visible w-6 h-6 bg-cyan-100 hover:bg-cyan-200 rounded-md flex-center">
<IconAddEmoji className={'w-4 h-4'} />
</button>
</Tippy>
src/common/component/Profile/index.tsx
+1 -1
View File
@@ -55,7 +55,7 @@ const Profile: FC<Props> = ({ uid, type = "embed", cid }) => {
src={avatar}
name={name}
/>
<h2 className="text-lg select-text font-bold text-[#1c1c1e] dark:text-white">{name}</h2>
<h2 className="text-lg select-text font-bold text-gray-900 dark:text-white">{name}</h2>
<span className="text-sm text-gray-400 dark:text-gray-200 select-text">{email}</span>
{/* <p className="intro">{introduction}</p> */}
<ul className={clsx("mt-6 flex flex-col md:flex-row items-center gap-2", isCard && "pb-0.5")}>
src/common/component/Send/Toolbar.tsx
+1 -1
View File
@@ -48,7 +48,7 @@ const Toolbar: FC<Props> = ({
<div className={`hidden md:flex flex-col md:flex-row items-center justify-end gap-2.5`}>
<div className="flex cursor-pointer gap-3.5">
<Tooltip placement="top" tip="Markdown">
<MarkdownIcon className={isMarkdown ? "fill-[#22ccee]" : "dark:fill-gray-300"} onClick={toggleMode} />
<MarkdownIcon className={isMarkdown ? "fill-primary-400" : "dark:fill-gray-300"} onClick={toggleMode} />
</Tooltip>
{isMarkdown &&
(fullscreen ? (
src/common/component/Send/index.tsx
+1 -1
View File
@@ -139,7 +139,7 @@ const Send: FC<IProps> = ({
const isMarkdownMode = mode == Modes.markdown;
return (
<div
className={clsx(`send relative bg-gray-200 rounded-lg w-full dark:bg-[#4D5761] ${mode} ${markdownFullscreen ? "fullscreen" : ""} ${replying_mid ? "reply" : ""
className={clsx(`send relative bg-gray-200 rounded-lg w-full dark:bg-gray-600 ${mode} ${markdownFullscreen ? "fullscreen" : ""} ${replying_mid ? "reply" : ""
} ${context}`, isMarkdownMode && markdownFullscreen && '-mt-9')}
>
{replying_mid && <Replying context={context} mid={replying_mid} id={id} />}
src/common/component/StyledSettingContainer.tsx
+1 -1
View File
@@ -41,7 +41,7 @@ const StyledSettingContainer: FC<PropsWithChildren<Props>> = ({
<ul key={title} data-title={title} className="flex flex-col gap-0.5 mb-5 md:mb-9 before:md:pl-3 before:content-[attr(data-title)] before:font-bold before:text-xs before:text-gray-400">
{items.map(({ name, title }) => {
return (
<li key={name} className={clsx(`md:text-sm font-semibold text-gray-600 whitespace-nowrap dark:text-gray-200 md:rounded hover:bg-[#e7e5e4] dark:hover:bg-slate-500/20`, name == nav?.name && "bg-[#e7e5e4] dark:bg-slate-500/20")}>
<li key={name} className={clsx(`md:text-sm font-semibold text-gray-600 whitespace-nowrap dark:text-gray-200 md:rounded hover:bg-stone-200 dark:hover:bg-slate-500/20`, name == nav?.name && "bg-stone-200 dark:bg-slate-500/20")}>
<NavLink to={`${pathPrefix}/${name}`} className="block md:px-3 py-1">{title}</NavLink>
</li>
);
src/common/component/User/index.tsx
+1 -1
View File
@@ -46,7 +46,7 @@ const User: FC<Props> = ({
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]",
online ? "bg-green-500" : "bg-zinc-400",
compact && "w-3.5 h-3.5");
if (!popover)
return (
src/common/component/styled/Button.tsx
+1 -1
View File
@@ -12,7 +12,7 @@ const StyledButton = ({ children, className = '', ...rest }: Props) => {
const isFull = className.includes('flex');
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-gray-600 dark:!text-gray-100 !border !border-solid !border-[#d0d5dd] !bg-transparent",
isGhost && "!text-gray-600 dark:!text-gray-100 !border !border-solid !border-gray-300 !bg-transparent",
isCancel && "!bg-transparent !text-black dark:!text-gray-50 !border !border-solid !border-gray-200",
isSmall && "!py-2",
noBorder && "!shadow-none !border-none",
src/common/component/styled/Checkbox.tsx
+1 -1
View File
@@ -6,6 +6,6 @@ export default function StyledCheckbox(props: InputHTMLAttributes<HTMLInputEleme
readOnly
{...props}
type="checkbox"
className={`checkbox w-5 h-5 rounded-md border border-solid border-slate-300 checked:border-[#1fe1f9] disabled:opacity-40 ${cbClasses}`}
className={`checkbox w-5 h-5 rounded-md border border-solid border-slate-300 checked:border-primary-400 disabled:opacity-40 ${cbClasses}`}
/>;
}