chore: tailwind tweaks
This commit is contained in:
Tristan Yang
@@ -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>
|
||||
|
||||
@@ -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 ">
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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}>
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user