fix: tweak UX

src/common/component/InviteLink.tsx

@@ -16,7 +16,7 @@ const InviteLink: FC<Props> = () => {
 
   return (
     <div className="flex flex-col items-start pb-8">
-      <p className="font-semibold text-sm mb-2 text-gray-500 dark:text-gray-50 flex gap-4">
+      <p className="font-semibold text-sm mb-2 text-gray-500 dark:text-gray-50 flex flex-col md:flex-row gap-4">
         {t("share_invite_link")}
         <a className="text-primary-500 flex gap-1 items-center" href="http://doc.voce.chat/faq#fe_url" target="_blank" rel="noopener noreferrer">
           <IconQuestion /> {t("invite_link_faq")}

src/common/component/ManageMembers/index.tsx

@@ -84,44 +84,45 @@ const ManageMembers: FC<Props> = ({ cid }) => {
                 </div>
               </div>
               <div className="flex items-center gap-7">
-                <span className="text-xs text-right text-gray-500 dark:text-slate-100 flex items-center gap-1">
+                {switchRoleVisible ? <Tippy
-                  {is_admin ? t("admin") : t("user")}
+                  interactive
-                  {switchRoleVisible && (
+                  placement="bottom-end"
-                    <Tippy
+                  trigger="click"
-                      interactive
+                  content={
-                      placement="bottom-end"
+                    <ul className="context-menu">
-                      trigger="click"
+                      <li
-                      content={
+                        className="item sb"
-                        <ul className="context-menu">
+                        onClick={handleToggleRole.bind(null, {
-                          <li
+                          ignore: is_admin,
-                            className="item sb"
+                          uid,
-                            onClick={handleToggleRole.bind(null, {
+                          isAdmin: true
-                              ignore: is_admin,
+                        })}
-                              uid,
+                      >
-                              isAdmin: true
+                        {t("admin")}
-                            })}
+                        {is_admin && <IconCheck className="icon" />}
-                          >
+                      </li>
-                            {t("admin")}
+                      <li
-                            {is_admin && <IconCheck className="icon" />}
+                        className="item sb"
-                          </li>
+                        onClick={handleToggleRole.bind(null, {
-                          <li
+                          ignore: !is_admin,
-                            className="item sb"
+                          uid,
-                            onClick={handleToggleRole.bind(null, {
+                          isAdmin: false
-                              ignore: !is_admin,
+                        })}
-                              uid,
+                      >
-                              isAdmin: false
+                        {t("user")}
-                            })}
+                        {!is_admin && <IconCheck className="icon" />}
-                          >
+                      </li>
-                            {t("user")}
+                    </ul>
-                            {!is_admin && <IconCheck className="icon" />}
+                  }
-                          </li>
+                >
-                        </ul>
+                  <span className="text-xs text-right text-gray-500 dark:text-slate-100 flex items-center gap-1 cursor-pointer">
-                      }
+                    {is_admin ? t("admin") : t("user")}
-                    >
+                    <IconArrowDown className="dark:fill-slate-50" />
-                      <IconArrowDown className="cursor-pointer dark:fill-slate-50" />
+                  </span>
-                    </Tippy>
+                </Tippy> :
-                  )}
+                  <span className="text-xs text-right text-gray-500 dark:text-slate-100 flex items-center gap-1">
-                </span>
+                    {is_admin ? t("admin") : t("user")}</span>}
+
                 {dotsVisible && (
                   <Tippy
                     interactive

src/common/component/Message/Reaction.tsx

@@ -76,7 +76,7 @@ const Reaction: FC<Props> = ({ mid, reactions = null, readOnly = false }) => {
               placement="top"
               content={<ReactionDetails uids={uids} emoji={reaction as keyof Emojis} index={idx} />}
             >
-              <i className="emoji">
+              <i className="emoji w-4 h-4">
                 <ReactionItem native={reaction as keyof Emojis} />
               </i>
             </Tippy>

src/common/component/Message/index.tsx

@@ -98,7 +98,7 @@ const Message: FC<IProps> = ({
       ref={inviewRef}
       className={clsx(`group w-full relative flex items-start gap-2 md:gap-4 px-1 md:px-2 py-1 my-2 rounded-lg md:dark:hover:bg-gray-800 md:hover:bg-gray-100`,
         readOnly && "hover:bg-transparent",
-        showExpire && "bg-red-200",
+        showExpire && "bg-red-200 dark:bg-red-200/40",
         pinInfo && "bg-cyan-50 dark:bg-cyan-800 pt-7"
       )}
     >

src/common/component/RequireAuth.tsx

@@ -4,6 +4,7 @@ import { GuestRoutes } from "../../app/config";
 import { useGetInitializedQuery } from "../../app/services/auth";
 import { useGetLoginConfigQuery } from "../../app/services/server";
 import { useAppSelector } from "../../app/store";
+import Loading from "./Loading";
 
 interface Props {
   children: ReactElement;
@@ -14,15 +15,15 @@ const GuestAllows = GuestRoutes.map((path) => {
 });
 const RequireAuth: FC<Props> = ({ children, redirectTo = "/login" }) => {
   const location = useLocation();
-  const matchs = matchRoutes(GuestAllows, location);
+  const matches = matchRoutes(GuestAllows, location);
-  const allowGuest = matchs ? !!matchs[0].pathname : false;
+  const allowGuest = matches ? !!matches[0].pathname : false;
   const { data: loginConfig, isSuccess: loginConfigSuccess } = useGetLoginConfigQuery();
   const { isSuccess: checkInitialSuccess } = useGetInitializedQuery();
   const { token, guest, initialized } = useAppSelector((store) => store.authData);
   // console.log("auth route", { checkInitialSuccess, loginConfigSuccess, initialized, guest: loginConfig?.guest, token, allowGuest, guest });
 
   // 初始化和login配置检查
-  if (!checkInitialSuccess || !loginConfigSuccess) return null;
+  if (!checkInitialSuccess || !loginConfigSuccess) return <Loading fullscreen={true} />;
   //  未初始化 则先走setup 流程
   if (!initialized) return <Navigate to={`/onboarding`} replace />;
   // 开启guest 并且没token 而且是允许guest访问的路由  则先去过渡页登录

src/routes/chat/index.tsx

@@ -56,7 +56,7 @@ function ChatPage() {
       {usersModalVisible && <UsersModal closeModal={toggleUsersModalVisible} />}
       <div className={clsx(`flex h-screen md:h-full md:pt-2 md:pb-2.5 md:pr-1`, isGuest ? "guest-container md:px-1" : "md:pr-12")}>
         {sessionListVisible && <div onClick={toggleSessionList} className="z-30 fixed top-0 left-4 w-screen h-screen bg-black/50 transition-all backdrop-blur-sm"></div>}
-        <div className={clsx("left-container pb-14 md:pb-0 flex-col md:rounded-l-2xl w-full md:max-w-[250px] md:min-w-[268px] h-full shadow-[rgb(0_0_0_/_10%)_-1px_0px_0px_inset] bg-white dark:!bg-gray-800",
+        <div className={clsx("left-container pb-14 md:pb-0 flex-col md:rounded-l-2xl w-full h-screen md:max-w-[250px] md:min-w-[268px] shadow-[rgb(0_0_0_/_10%)_-1px_0px_0px_inset] bg-white dark:!bg-gray-800",
           isMainPath ? "flex" : "hidden md:flex"
         )}>
           <Server readonly={isGuest} />