chore: update style

src/common/component/ManageMembers.js

@@ -212,7 +212,7 @@ export default function ManageMembers({ cid = null }) {
                       content={
                         <StyledMenu className="menu">
                           <li
-                            className="item"
+                            className="item sb"
                             onClick={handleToggleRole.bind(null, {
                               ignore: is_admin,
                               uid,
@@ -223,7 +223,7 @@ export default function ManageMembers({ cid = null }) {
                             {is_admin && <IconCheck className="icon" />}
                           </li>
                           <li
-                            className="item"
+                            className="item sb"
                             onClick={handleToggleRole.bind(null, {
                               ignore: !is_admin,
                               uid,

src/common/component/styled/Input.js

@@ -80,7 +80,11 @@ export default function Input({
   };
   return type == "password" ? (
     <StyledWrapper className={className}>
-      <StyledInput type={inputType} className="inner" {...rest} />
+      <StyledInput
+        type={inputType}
+        className={`inner ${className}`}
+        {...rest}
+      />
       <div className="view" onClick={togglePasswordVisible}>
         {inputType == "password" ? (
           <HiEyeOff color="#78787c" />
@@ -92,7 +96,11 @@ export default function Input({
   ) : prefix ? (
     <StyledWrapper className={className}>
       <span className="prefix">{prefix}</span>
-      <StyledInput className="inner" type={inputType} {...rest} />
+      <StyledInput
+        className={`inner ${className}`}
+        type={inputType}
+        {...rest}
+      />
     </StyledWrapper>
   ) : (
     <StyledInput type={inputType} className={className} {...rest} />

src/common/component/styled/Menu.js

@@ -12,7 +12,7 @@ const StyledMenu = styled.ul`
   .item {
     display: flex;
     align-items: center;
-    justify-content: space-between;
+
     gap: 14px;
     white-space: nowrap;
     cursor: pointer;
@@ -23,13 +23,17 @@ const StyledMenu = styled.ul`
     font-size: 14px;
     line-height: 20px;
     color: #616161;
+
     .icon {
-      width: 12px;
-      height: 12px;
+      width: 20px;
+      height: 20px;
       path {
         fill: #475467;
       }
     }
+    &.sb {
+      justify-content: space-between;
+    }
     &:hover {
       background-color: #22ccee;
       color: #fff;

src/routes/chat/ChannelChat/index.js

@@ -1,5 +1,7 @@
 import { useState, useEffect } from "react";
 import { useDebounce } from "rooks";
+import { NavLink, useLocation } from "react-router-dom";
+import Tippy from "@tippyjs/react";
 import { useDispatch, useSelector } from "react-redux";
 import PinList from "./PinList";
 import FavList from "../FavList";
@@ -28,8 +30,6 @@ import {
   StyledHeader,
 } from "./styled";
 import InviteModal from "../../../common/component/InviteModal";
-import { NavLink, useLocation } from "react-router-dom";
-import Tippy from "@tippyjs/react";
 
 export default function ChannelChat({ cid = "", dropFiles = [] }) {
   const [toolVisible, setToolVisible] = useState("");

src/routes/chat/ChannelList/index.js

@@ -7,7 +7,7 @@ import NavItem from "./NavItem";
 export default function ChannelList({ setDropFiles }) {
   const [currId, setCurrId] = useState(null);
   const { channelIds } = useSelector((store) => {
-    return { channelIds: store.channels.ids, channelData: store.channels.byId };
+    return { channelIds: store.channels.ids };
   });
 
   const setRemoveChannel = (cid = undefined) => {