refactor: style problem and async request

web/src/routes/Main/Content/Group/Sidebar.tsx

@@ -61,7 +61,7 @@ const GroupPanelItem: React.FC<{
         className={clsx(
           'w-full hover:bg-white hover:bg-opacity-20 cursor-pointer text-white rounded px-1 h-8 flex items-center text-base group',
           {
-            'bg-opacity-20': isActive,
+            'bg-white bg-opacity-20': isActive,
           }
         )}
       >

web/src/routes/Main/Content/Personal/Friends/FriendList.tsx

@@ -1,5 +1,10 @@
-import React, { useCallback } from 'react';
-import { createDMConverse, t, useAppSelector } from 'tailchat-shared';
+import React from 'react';
+import {
+  createDMConverse,
+  t,
+  useAppSelector,
+  useAsyncRequest,
+} from 'tailchat-shared';
 import { UserListItem } from '@/components/UserListItem';
 import { IconBtn } from '@/components/IconBtn';
 import { Tooltip } from 'antd';
@@ -12,11 +17,10 @@ export const FriendList: React.FC = React.memo(() => {
   const friends = useAppSelector((state) => state.user.friends);
   const history = useHistory();
 
-  const handleCreateConverse = useCallback(
-    (targetId: string) => {
-      createDMConverse(targetId).then((converse) => {
-        history.push(`/main/personal/converse/${converse._id}`);
-      });
+  const [, handleCreateConverse] = useAsyncRequest(
+    async (targetId: string) => {
+      const converse = await createDMConverse(targetId);
+      history.push(`/main/personal/converse/${converse._id}`);
     },
     [history]
   );

web/tailwind.config.js

@@ -49,6 +49,7 @@ module.exports = {
       lg: { min: '1024px' },
       md: { max: '767px' },
       sm: { max: '639px' },
+      mobile: { max: '639px' }, // alias
     },
     extend: {
       borderRadius: {