refactor: update UXs

src/common/component/ChannelModal/index.js

@@ -6,6 +6,7 @@ import Modal from "../Modal";
 import ChannelIcon from "../ChannelIcon";
 import Contact from "../Contact";
 import StyledWrapper from "./styled";
+import StyledCheckbox from "../../component/StyledCheckbox";
 import useFilteredUsers from "../../hook/useFilteredUsers";
 import { addChannel } from "../../../app/slices/channels";
 
@@ -103,10 +104,9 @@ export default function ChannelModal({ personal = false, closeModal }) {
                       className="user"
                       onClick={toggleCheckMember}
                     >
-                      <input
+                      <StyledCheckbox
                         readOnly
                         checked={checked}
-                        type="checkbox"
                         name="cb"
                         id="cb"
                       />

src/common/component/ChannelModal/styled.js

@@ -41,7 +41,12 @@ const StyledWrapper = styled.div`
         display: flex;
         align-items: center;
         padding: 0 16px;
+        /* margin: 0 4px; */
         width: -webkit-fill-available;
+        border-radius: 4px;
+        &:hover {
+          background: rgba(116, 127, 141, 0.1);
+        }
         > div {
           width: 100%;
         }