refactor: more tailwind

src/routes/users/index.tsx

@@ -6,7 +6,6 @@ import Search from "./Search";
 import User from "../../common/component/User";
 import Profile from "../../common/component/Profile";
 
-import StyledWrapper from "./styled";
 import BlankPlaceholder from "../../common/component/BlankPlaceholder";
 import useFilteredUsers from "../../common/hook/useFilteredUsers";
 
@@ -24,15 +23,16 @@ function UsersPage() {
   }, [pathname]);
 
   if (!users) return null;
+
   return (
-    <StyledWrapper>
-      <div className="left dark:!bg-[#1F2A37]">
+    <div className="flex h-full pt-2 pr-12 pb-2.5">
+      <div className="rounded-l-2xl bg-white dark:bg-[#1F2A37] relative flex flex-col min-w-[268px] shadow-[inset_-1px_0px_0px_rgba(0,_0,_0,_0.1)]">
         <Search input={input} updateInput={updateInput} />
-        <div className="list">
-          <nav className="nav">
+        <div className="px-2 py-3 overflow-scroll pb-[50px]">
+          <nav className="flex flex-col gap-1">
             {users.map(({ uid }) => {
               return (
-                <NavLink key={uid} className="session" to={`/users/${uid}`}>
+                <NavLink key={uid} className={({ isActive }) => `rounded-md hover:bg-gray-500/10 ${isActive ? "bg-gray-500/10" : ""}`} to={`/users/${uid}`}>
                   <User uid={uid} enableContextMenu={true} />
                 </NavLink>
               );
@@ -40,10 +40,10 @@ function UsersPage() {
           </nav>
         </div>
       </div>
-      <div className={`right ${!user_id ? "placeholder" : ""} dark:!bg-[#384250]`}>
+      <div className={`rounded-r-2xl bg-white w-full flex justify-center items-start ${!user_id ? "h-full items-center" : ""} dark:bg-[#384250]`}>
         {user_id ? <Profile uid={+user_id} /> : <BlankPlaceholder type="user" />}
       </div>
-    </StyledWrapper>
+    </div>
   );
 }
 export default memo(UsersPage);

src/routes/users/styled.tsx

@@ -1,50 +0,0 @@
-import styled from "styled-components";
-const StyledWrapper = styled.div`
-  display: flex;
-  height: 100%;
-  padding: 8px 48px 10px 0;
-  > .left {
-    border-radius: 16px 0 0 16px;
-    background-color: #fff;
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    min-width: 268px;
-    box-shadow: inset -1px 0px 0px rgba(0, 0, 0, 0.1);
-    .list {
-      padding: 12px 8px;
-      overflow: scroll;
-      padding-bottom: 50px;
-      > .nav {
-        display: flex;
-        flex-direction: column;
-        gap: 4px;
-        a {
-          border-radius: 6px;
-          text-decoration: none;
-        }
-        .session {
-          &:hover,
-          &.active {
-            background: rgba(116, 127, 141, 0.1);
-          }
-        }
-      }
-    }
-  }
-  .right {
-    border-radius: 0 16px 16px 0;
-    background-color: #fff;
-    /* height: 100vh; */
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: flex-start;
-    &.placeholder {
-      height: 100%;
-      align-items: center;
-    }
-  }
-`;
-
-export default StyledWrapper;