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/assets/index.css
-10
View File
@@ -218,16 +218,6 @@
html.dark ::-webkit-scrollbar-thumb {
background: #1c1c1e;
}
:root {
/* border radius */
--br: 8px;
---navs-bg: #e5e7eb;
---body-bg: #f5f6f7;
---chat-bg: #fff;
---channel-text-color: #1c1c1e;
---msg-text-color: #374151;
}
/* markdown overrides */
#MARKDOWN_CONTAINER .toastui-editor-contents {
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}`}
/>;
}
src/routes/chat/ChannelChat/index.tsx
+2 -2
View File
@@ -174,8 +174,8 @@ function ChannelChat({ cid = 0, dropFiles = [] }: Props) {
<h2 className="font-bold text-4xl dark:text-white">{t("welcome_channel", { name })}</h2>
<p className="text-gray-600 dark:text-gray-300">{t("welcome_desc", { name })} </p>
{loginUser?.is_admin && (
<NavLink to={`/setting/channel/${cid}?f=${pathname}`} className="flex items-center gap-1 bg-clip-text text-fill-transparent bg-gradient-to-r from-[#3c8ce7] to-primary-400 ">
<EditIcon className="w-4 h-4 fill-[#3c8ce7]" />
<NavLink to={`/setting/channel/${cid}?f=${pathname}`} className="flex items-center gap-1 bg-clip-text text-fill-transparent bg-gradient-to-r from-blue-500 to-primary-400 ">
<EditIcon className="w-4 h-4 fill-blue-500" />
{t("edit_channel")}
</NavLink>
)}
src/routes/chat/Layout/DnDTip.tsx
+1 -1
View File
@@ -13,7 +13,7 @@ const DnDTip = ({ context, name }: Props) => {
className={`flex-center absolute left-0 top-0 w-full h-full bg-black/50`}
>
<div className={`p-4 drop-shadow-md rounded-lg bg-primary-300`}>
<div className="p-4 pt-16 border-2 border-dashed border-[#a5f3fc] rounded-md flex flex-col items-center text-white">
<div className="p-4 pt-16 border-2 border-dashed border-primary-300 rounded-md flex flex-col items-center text-white">
<h4 className="text-xl font-semibold">{`${t("send_to")} ${ChatPrefixes[context]}${name}`}</h4>
<span className="text-sm">Photos accept jpg, png, max size limit to 10M.</span>
</div>
src/routes/login/SignUpLink.tsx
+2 -2
View File
@@ -17,9 +17,9 @@ export default function MagicLinkLogin({ smtp = false }: Props) {
};
return (
<div className="flex gap-1 mt-7 text-sm text-[#667085] dark:text-gray-100 justify-center">
<div className="flex gap-1 mt-7 text-sm text-slate-500 dark:text-gray-100 justify-center">
<span>{t("login.no_account")}</span>
<a className="text-[#22d3ee] cursor-pointer" onClick={handleSignUp}>{t("sign_up")}</a>
<a className="text-primary-400 cursor-pointer" onClick={handleSignUp}>{t("sign_up")}</a>
</div>
);
}
src/routes/onboarding/steps/invite-link.tsx
+1 -1
View File
@@ -20,7 +20,7 @@ export default function InviteLink() {
<span className="text-sm text-gray-500 mb-2 font-semibold">{t("last_desc")}</span>
<div className="w-full md:w-[400px] rounded shadow-md flex border border-solid border-gray-100">
<StyledInput className="large !border-none !shadow-none" readOnly placeholder="Generating" value={link} />
<StyledButton onClick={copyLink} className="ghost small border_less !px-2 hover:!text-[#088ab2]">
<StyledButton onClick={copyLink} className="ghost small border_less !px-2 hover:!text-primary-600">
{linkCopied ? "Copied" : ct("action.copy")}
</StyledButton>
</div>
src/routes/reg/SignInLink.tsx
+2 -2
View File
@@ -17,9 +17,9 @@ export default function SignInLink({ token }: { token?: string }) {
}, [token]);
return (
<div className="flex gap-1 mt-7 text-sm text-[#667085] dark:text-gray-100 justify-center">
<div className="flex gap-1 mt-7 text-sm text-slate-500 dark:text-gray-100 justify-center">
<span>{t("reg.have_account")}</span>
<a onClick={handleSignIn} className="text-[#22d3ee] cursor-pointer">{t("sign_in")}</a>
<a onClick={handleSignIn} className="text-primary-400 cursor-pointer">{t("sign_in")}</a>
</div>
);
}
src/widget/Popup/Message/Text.tsx
+1 -1
View File
@@ -17,7 +17,7 @@ const Text = ({ content, host, sending }: Props) => {
{content}
</div>
:
<div className={clsx("text-md text-white bg-[#1fe1f9] rounded-lg px-3 py-1.5 transition-all break-words", sending ? 'opacity-70' : "")} style={{ maxWidth: 'min(((100vw - 56px) - 20px) - 64px, 360px)', backgroundColor: color, color: fgColor }}>
<div className={clsx("text-md text-white bg-primary-400 rounded-lg px-3 py-1.5 transition-all break-words", sending ? 'opacity-70' : "")} style={{ maxWidth: 'min(((100vw - 56px) - 20px) - 64px, 360px)', backgroundColor: color, color: fgColor }}>
{content}
</div>
;