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

chore: tailwind tweaks

Browse Source
This commit is contained in:
Tristan Yang
2023-02-13 07:33:43 +08:00
parent 8670bf32da
commit 84423c009d
13 changed files with 36 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/common/component/BlankPlaceholder.tsx
+4 -4
View File
@@ -14,9 +14,9 @@ interface Props {
type?: "chat" | "user";
}
const classes = {
box: "w-[150px] md:w-[200px] h-[150px] md:h-[200px] cursor-pointer bg-[#f9fafb] dark:bg-gray-800 rounded-3xl flex-center flex-col gap-4",
boxIcon: "w-10 h-10",
boxTip: "px-5 text-sm text-[#475467] dark:text-gray-100 font-bold text-center"
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",
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"
};
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-[#384250]">
<div className="flex flex-col gap-2 items-center">
<h2 className="text-3xl text-[#344054] dark:text-white font-bold">{t("title", { name: server.name })}</h2>
<h2 className="text-center text-3xl text-[#344054] dark:text-white font-bold">{t("title", { name: server.name })}</h2>
<p className="text-sm text-[#98a2b3] max-w-[424px] text-center">
{t("desc")}
</p>
src/common/component/FileMessage/VideoMessage.tsx
+1 -1
View File
@@ -37,7 +37,7 @@ const VideoMessage = ({ url, name, size, download }: Props) => {
};
const tipClass = 'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2';
return (
<div className='w-96 h-52 relative rounded-md border border-solid border-gray-300 overflow-hidden group'>
<div className='w-64 h-32 md:w-96 md:h-52 relative rounded-md border border-solid border-gray-300 overflow-hidden group'>
<div className="absolute top-0 left-0 w-full h-full bg-black/40 z-20 group-hover:hidden"></div>
<div className="absolute top-0 left-0 w-full flex justify-between z-30 px-3 py-2 overflow-hidden group-hover:bg-black/20">
<div className="flex gap-2 ">
src/common/component/GithubLoginButton.tsx
+1 -1
View File
@@ -45,7 +45,7 @@ const GithubLoginButton: FC<Props> = ({ type = "login", source = "webapp", clien
};
return (
<Button className="flex-center gap-3 ghost !text-gray-600 dark:!text-gray-100 !border-[#d0d5dd]" onClick={handleGithubLogin}>
<Button className="flex-center gap-3 ghost" onClick={handleGithubLogin}>
<IconGithub className="w-6 h-6" />
{` ${type === "login" ? t("login.github") : t("reg.github")}`}
</Button>
src/common/component/SaveTip.tsx
+1 -1
View File
@@ -13,7 +13,7 @@ const SaveTip: FC<Props> = ({ saveHandler, resetHandler }) => {
const { t } = useTranslation("setting");
// const btnClass=clsx("")
return (
<div className="w-full p-2 absolute bottom-16 left-0 flex items-center justify-between font-semibold text-gray-700 border border-solid border-gray-200 dark:border-gray-400 dark:bg-gray-600 shadow-md rounded-full">
<div className="z-50 w-full p-2 absolute bottom-16 left-0 flex items-center justify-between font-semibold text-gray-700 border border-solid border-gray-200 dark:border-gray-400 dark:bg-gray-600 shadow-xl rounded-full">
<span className="p-2 text-sm dark:text-gray-200">{t('save_tip')}</span>
<div className="flex items-center gap-3">
<Button className="small ghost border_less !text-gray-700 !shadow-none dark:!text-gray-100" onClick={resetHandler}>
src/common/component/StyledSettingContainer.tsx
+7 -7
View File
@@ -27,17 +27,17 @@ const StyledSettingContainer: FC<PropsWithChildren<Props>> = ({
const { pathname } = useLocation();
return (
<div className="w-screen h-screen flex">
<div className="max-h-screen min-w-[212px] overflow-scroll px-4 py-8 bg-[#f5f6f7] dark:bg-[#1F2A37]">
<h2 onClick={closeModal} className="flex gap-2 items-center cursor-pointer mb-8 font-bold text-gray-800 dark:text-white">
<div className="h-screen min-w-[120px] md:min-w-[212px] overflow-scroll px-4 py-8 bg-[#f5f6f7] dark:bg-[#1F2A37]">
<h2 onClick={closeModal} className="flex gap-2 items-center text-sm md:text-base cursor-pointer mb-8 font-bold text-gray-800 dark:text-white">
<IconBack className="dark:fill-gray-400" /> {title}
</h2>
{navs.map(({ title, items }) => {
return (
<ul key={title} data-title={title} className="flex flex-col gap-0.5 mb-9 before:pl-3 before:content-[attr(data-title)] before:font-bold before:text-xs before:text-gray-400">
<ul key={title} data-title={title} className="flex flex-col gap-0.5 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(`text-sm font-semibold text-gray-600 whitespace-nowrap dark:text-gray-200 rounded hover:bg-[#e7e5e4] dark:hover:bg-slate-500/20`, name == nav?.name && "bg-[#e7e5e4] dark:bg-slate-500/20")}>
<NavLink to={`${pathname}?nav=${name}`} className="block px-3 py-1">{title}</NavLink>
<li key={name} className={clsx(`text-xs md:text-sm font-semibold text-gray-600 whitespace-nowrap dark:text-gray-200 rounded hover:bg-[#e7e5e4] dark:hover:bg-slate-500/20`, name == nav?.name && "bg-[#e7e5e4] dark:bg-slate-500/20")}>
<NavLink to={`${pathname}?nav=${name}`} className="block md:px-3 py-1">{title}</NavLink>
</li>
);
})}
@@ -45,12 +45,12 @@ const StyledSettingContainer: FC<PropsWithChildren<Props>> = ({
);
})}
{dangers.length ? (
<ul className="flex flex-col gap-2 mb-9 text-sm font-semibold text-red-500 dark:text-red-400">
<ul className="flex flex-col gap-2 mb-9 text-xs md:text-sm font-semibold text-red-500 dark:text-red-400">
{dangers.map((d) => {
if (typeof d === "boolean" || !d) return null;
const { title, handler } = d;
return (
<li key={title} onClick={handler} className="rounded cursor-pointer py-1.5 px-3">
<li key={title} onClick={handler} className="rounded cursor-pointer py-1.5 md:px-3">
{title}
</li>
);
src/common/component/styled/Button.tsx
+3 -3
View File
@@ -12,12 +12,12 @@ 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-primary-400 border border-solid border-primary-400 !bg-transparent",
isCancel && "!bg-transparent !text-black dark:!text-gray-50 border border-solid border-gray-200",
isGhost && "!text-gray-600 dark:!text-gray-100 !border !border-solid !border-[#d0d5dd] !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",
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",
isDanger && "!bg-red-500 disabled:!bg-gray-300 hover:!bg-red-500/80 active:bg-red-700",
className
)} {...rest}>
{children}
src/routes/chat/GuestChannelChat/index.tsx
+1 -1
View File
@@ -44,7 +44,7 @@ export default function GuestChannelChat({ cid = 0 }: Props) {
<div className="flex items-center gap-1">
<ChannelIcon personal={!is_public} />
<span className="text-gray-800 dark:text-white">{name}</span>
<span className="ml-2 text-gray-500">{description}</span>
<span className="ml-2 text-gray-500 hidden md:block ">{description}</span>
</div>
</header>
}
src/routes/chat/Layout/LoginTip.tsx
+2 -2
View File
@@ -21,8 +21,8 @@ const LoginTip = () => {
return (
<div className="flex items-center justify-between bg-slate-200/80 dark:bg-gray-800 rounded-lg w-full p-4">
<span className="text-base text-[#98a2b3] dark:text-gray-100">
<i className="mr-2 text-lg">👋</i>
<span className="text-xs md:text-base text-[#98a2b3] dark:text-gray-100">
<i className="mr-2 text-xs md:text-lg ">👋</i>
{t("sign_in_tip")}
</span>
<Button onClick={handleSignIn} className="small">{ct("action.login")}</Button>
src/routes/login/MetamaskLoginButton.tsx
+1 -1
View File
@@ -93,7 +93,7 @@ export default function MetamaskLoginButton({
}
};
return (
<Button className="flex ghost flex-center gap-2 !text-gray-600 !border-slate-200 dark:!text-gray-100" disabled={requesting} onClick={handleMetamaskLogin}>
<Button className="flex ghost flex-center gap-2" disabled={requesting} onClick={handleMetamaskLogin}>
<img className="w-6 h-6" src={metamaskSvg} alt="meta mask icon" />
{type == "login" ? t("login.metamask") : t("reg.metamask")}
</Button>
src/routes/login/OidcLoginButton.tsx
+9 -7
View File
@@ -20,7 +20,7 @@ const OidcLoginButton: FC<IProps> = ({ issuers, type = "login" }) => {
return (
<>
<Button
className="flex ghost flex-center gap-2 !text-gray-600 !border-slate-200 dark:!text-gray-100"
className="flex ghost flex-center gap-2"
onClick={() => {
setModal(true);
}}
@@ -30,13 +30,15 @@ const OidcLoginButton: FC<IProps> = ({ issuers, type = "login" }) => {
{modal && (
<Modal id="modal-modal">
<StyledModal className="text-center " title="Login with OIDC">
{issuers
.filter((issuer) => issuer.enable)
.map((issuer, index) => (
<OidcLoginEntry issuer={issuer} key={index} />
))}
<div className="flex flex-col gap-2">
{issuers
.filter((issuer) => issuer.enable)
.map((issuer, index) => (
<OidcLoginEntry issuer={issuer} key={index} />
))}
</div>
<StyledButton
className="border_less ghost text-gray-500 dark:text-white"
className="border_less ghost"
onClick={() => {
setModal(false);
}}
src/routes/login/OidcLoginEntry.tsx
+1 -1
View File
@@ -21,7 +21,7 @@ const OidcLoginEntry: FC<{ issuer: OIDCConfig }> = ({ issuer }) => {
}, [data, isSuccess]);
return (
<Button className="flex text-gray-800 dark:text-gray-100 flex-center gap-3" disabled={isLoading || isSuccess} onClick={handleSolidLogin}>
<Button className="flex flex-center gap-3" disabled={isLoading || isSuccess} onClick={handleSolidLogin}>
{!!issuer.favicon && <img src={issuer.favicon} className="w-6 h-6" alt="icon" />}
{isLoading ? `Loading...` : `Login with ${issuer.domain}`}
</Button>
src/routes/login/index.tsx
+3 -3
View File
@@ -127,11 +127,11 @@ export default function LoginPage() {
<div className="flex-center h-screen dark:bg-[#384250]">
<div className="py-8 px-10 shadow-md rounded-xl">
<div className="flex-center flex-col pb-6">
<img src={`${BASE_URL}/resource/organization/logo`} alt="logo" className="w-14 h-14 mb-7 rounded-full" />
<h2 className="font-semibold text-2xl text-gray-800 dark:text-white mb-2">{t("login.title")}</h2>
<img src={`${BASE_URL}/resource/organization/logo`} alt="logo" className="w-14 h-14 mb-3 md:mb-7 rounded-full" />
<h2 className="font-semibold text-2xl text-gray-800 dark:text-white md:mb-2">{t("login.title")}</h2>
<span className="text-gray-400 dark:text-gray-100">{t("login.desc")}</span>
</div>
<form className="flex flex-col gap-5 min-w-[360px]" onSubmit={handleLogin}>
<form className="flex flex-col gap-5 w-[320px] md:min-w-[360px] " onSubmit={handleLogin}>
<Input
className="large"
name="email"
src/routes/resources/Filter/index.tsx
+2 -2
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 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');
return clsx(`cursor-pointer flex items-center gap-2 shadow rounded-lg py-2 px-3 text-xs text-gray-900 dark:text-gray-200`, selected ? 'text-white bg-primary-400' : 'border border-solid border-gray-300 dark:border-gray-400 ');
};
export default function Filter({ filter, updateFilter }) {
const { t } = useTranslation("file");
@@ -66,7 +66,7 @@ export default function Filter({ filter, updateFilter }) {
<Avatar
width={16}
height={16}
className="w-4 h-4 rounded-full"
className="rounded-full"
name={userMap[from].name}
src={userMap[from].avatar}
/>