refactor: new mobile layout
This commit is contained in:
Tristan Yang
@@ -38,10 +38,10 @@ const BlankPlaceholder: FC<Props> = ({ type = "chat" }) => {
|
||||
const chatHandler = type == "chat" ? toggleChannelModalVisible : toggleUserListVisible;
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-col gap-8 -mt-[50px] dark:bg-[#384250]">
|
||||
<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>
|
||||
<p className="text-sm text-[#98a2b3] max-w-[424px] text-center">
|
||||
<p className="text-sm text-gray-400 max-w-[424px] text-center">
|
||||
{t("desc")}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -4,8 +4,8 @@ interface Props {
|
||||
}
|
||||
|
||||
const Divider: FC<Props> = ({ content }) => {
|
||||
return <div className="relative border-none h-[1px] bg-[#e3e5e8] dark:bg-gray-500 my-6 overflow-visible">
|
||||
<span className="p-1 absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-xs text-gray-500 dark:text-gray-300 font-semibold bg-white dark:bg-[#384250]">{content}</span>
|
||||
return <div className="relative border-none h-[1px] bg-slate-200 dark:bg-gray-500 my-6 overflow-visible">
|
||||
<span className="p-1 absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-xs text-gray-500 dark:text-gray-300 font-semibold bg-white dark:bg-gray-700">{content}</span>
|
||||
</div>;
|
||||
};
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ interface Props {
|
||||
const Progress: FC<Props> = ({ value, width = "100%" }) => {
|
||||
return (
|
||||
<div className="bg-[#ecfdff] rounded h-2 overflow-hidden" style={{ width }}>
|
||||
<div className="h-2 bg-[#088ab2] rounded transition-all" style={{ width: `${value}%` }}></div>
|
||||
<div className="h-2 bg-primary-700 rounded transition-all" style={{ width: `${value}%` }}></div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -44,7 +44,7 @@ const GoogleLoginInner: FC<Props> = ({ type = "login", loaded, loadError }) => {
|
||||
}, [error]);
|
||||
|
||||
return (
|
||||
<Button className=" group relative w-full !bg-white dark:!bg-[#384250] !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-[#d0d5dd]" 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
|
||||
|
||||
@@ -105,27 +105,27 @@ const Commands: FC<Props> = ({ context = "user", contextId = 0, mid = 0, toggleE
|
||||
trigger="click"
|
||||
content={<ReactionPicker mid={mid} hidePicker={hideAll} />}
|
||||
>
|
||||
<li className="flex cursor-pointer p-1 hover:bg-[#f3f4f6] dark:hover:bg-gray-800">
|
||||
<li className="flex cursor-pointer p-1 hover:bg-gray-100 dark:hover:bg-gray-800">
|
||||
<Tooltip placement="top" tip={t("action.add_reaction")}>
|
||||
<img src={reactIcon} className="toggler w-6 h-6" alt="icon emoji" />
|
||||
</Tooltip>
|
||||
</li>
|
||||
</Tippy>
|
||||
{canEdit && (
|
||||
<li className="flex cursor-pointer p-1 hover:bg-[#f3f4f6] dark:hover:bg-gray-800" onClick={toggleEditMessage}>
|
||||
<li className="flex cursor-pointer p-1 hover:bg-gray-100 dark:hover:bg-gray-800" onClick={toggleEditMessage}>
|
||||
<Tooltip placement="top" tip={t("action.edit")}>
|
||||
<img src={editIcon} className="w-6 h-6" alt="icon edit" />
|
||||
</Tooltip>
|
||||
</li>
|
||||
)}
|
||||
{canReply && (
|
||||
<li className="flex cursor-pointer p-1 hover:bg-[#f3f4f6] dark:hover:bg-gray-800" onClick={handleReply}>
|
||||
<li className="flex cursor-pointer p-1 hover:bg-gray-100 dark:hover:bg-gray-800" onClick={handleReply}>
|
||||
<Tooltip placement="top" tip={t("action.reply")}>
|
||||
<img src={replyIcon} className="w-6 h-6" alt="icon reply" />
|
||||
</Tooltip>
|
||||
</li>
|
||||
)}
|
||||
<li className="flex cursor-pointer p-1 hover:bg-[#f3f4f6] dark:hover:bg-gray-800" onClick={handleAddFav}>
|
||||
<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" />
|
||||
</Tooltip>
|
||||
@@ -166,7 +166,7 @@ const Commands: FC<Props> = ({ context = "user", contextId = 0, mid = 0, toggleE
|
||||
/>
|
||||
}
|
||||
>
|
||||
<li className="flex cursor-pointer p-1 hover:bg-[#f3f4f6] dark:hover:bg-gray-800">
|
||||
<li className="flex cursor-pointer p-1 hover:bg-gray-100 dark:hover:bg-gray-800">
|
||||
<Tooltip placement="top" tip={t("more")}>
|
||||
<img src={moreIcon} alt="icon more" />
|
||||
</Tooltip>
|
||||
|
||||
@@ -56,7 +56,7 @@ const Profile: FC<Props> = ({ uid, type = "embed", cid }) => {
|
||||
name={name}
|
||||
/>
|
||||
<h2 className="text-lg select-text font-bold text-[#1c1c1e] dark:text-white">{name}</h2>
|
||||
<span className="text-sm text-[#98a2b3] dark:text-gray-200 select-text">{email}</span>
|
||||
<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")}>
|
||||
<NavLink to={`/chat/dm/${uid}`}>
|
||||
|
||||
@@ -145,7 +145,7 @@ const Send: FC<IProps> = ({
|
||||
{replying_mid && <Replying context={context} mid={replying_mid} id={id} />}
|
||||
{mode == Modes.text && <UploadFileList context={context} id={id} />}
|
||||
|
||||
<div className={clsx(`flex justify-between items-center gap-4 px-4 py-3.5`, isMarkdownMode && `grid grid-cols-[1fr_1fr] grid-rows-[auto_auto] gap-0`)}>
|
||||
<div className={clsx(`flex justify-between items-center gap-4 px-2 md:px-4 py-1 md:py-3.5`, isMarkdownMode && `grid grid-cols-[1fr_1fr] grid-rows-[auto_auto] gap-0`)}>
|
||||
<EmojiPicker selectEmoji={insertEmoji} />
|
||||
{mode == Modes.text && (
|
||||
<MixedInput
|
||||
|
||||
@@ -27,7 +27,7 @@ const StyledSettingContainer: FC<PropsWithChildren<Props>> = ({
|
||||
const { pathname } = useLocation();
|
||||
return (
|
||||
<div className="w-screen h-screen flex">
|
||||
<div className="h-screen min-w-[120px] md:min-w-[212px] overflow-scroll px-4 py-8 bg-[#f5f6f7] dark:bg-[#1F2A37]">
|
||||
<div className="h-screen min-w-[120px] md:min-w-[212px] overflow-scroll px-4 py-8 bg-neutral-100 dark:bg-gray-800">
|
||||
<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>
|
||||
@@ -58,7 +58,7 @@ const StyledSettingContainer: FC<PropsWithChildren<Props>> = ({
|
||||
</ul>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="bg-white w-full max-h-full overflow-auto p-8 dark:bg-[#384250]">
|
||||
<div className="bg-white w-full max-h-full overflow-auto p-8 dark:bg-gray-700">
|
||||
{nav && <h4 className="font-bold text-xl text-gray-600 mb-8 dark:text-gray-100">{nav.title}</h4>}
|
||||
{children}
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { FC } from "react";
|
||||
import Tippy, { TippyProps } from "@tippyjs/react";
|
||||
import clsx from "clsx";
|
||||
import { isMobile } from "../utils";
|
||||
|
||||
|
||||
const Triangle: FC<Pick<TippyProps, "placement">> = ({ placement }) => {
|
||||
@@ -23,6 +24,7 @@ const Tooltip: FC<Props> = ({ tip = "", placement = "right", delay = null, child
|
||||
|
||||
return (
|
||||
<Tippy
|
||||
disabled={isMobile()}
|
||||
offset={[0, 18]}
|
||||
duration={delay ? defaultDuration : 0}
|
||||
delay={delay ?? [150, 0]}
|
||||
|
||||
@@ -43,8 +43,8 @@ const User: FC<Props> = ({
|
||||
};
|
||||
if (!curr) return null;
|
||||
const online = curr.online || curr.uid == loginUid;
|
||||
const containerClass = clsx(`relative flex items-center justify-start md:gap-2 rounded-lg select-none `, interactive && "hover:bg-gray-500/10", compact ? "p-0" : "p-2");
|
||||
const nameClass = clsx(`hidden md:block text-sm text-gray-500 max-w-[190px] truncate font-semibold dark:text-white`);
|
||||
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]",
|
||||
compact && "w-3.5 h-3.5");
|
||||
|
||||
@@ -14,7 +14,7 @@ const Version: FC<Props> = () => {
|
||||
<li>{t("build_time")}: {ts} <span className="text-gray-700 dark:text-gray-300">({dayjs(ts * 1000).fromNow()})</span></li>
|
||||
<li>GitHub:
|
||||
<strong className="font-bold">
|
||||
<a className="text-[#06b6d4] underline underline-offset-2" href="https://github.com/Privoce/vocechat-web/issues" target="_blank" rel="noopener noreferrer">vocechat-web/issues</a>
|
||||
<a className="text-primary-600 underline underline-offset-2" href="https://github.com/Privoce/vocechat-web/issues" target="_blank" rel="noopener noreferrer">vocechat-web/issues</a>
|
||||
</strong>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
Reference in New Issue
Block a user