feat: lots updates

src/common/component/ChannelModal/index.js

@@ -3,6 +3,7 @@ import toast from "react-hot-toast";
 import { useNavigate } from "react-router-dom";
 import { useSelector, useDispatch } from "react-redux";
 import Modal from "../Modal";
+import Button from "../StyledButton";
 import ChannelIcon from "../ChannelIcon";
 import Contact from "../Contact";
 import StyledWrapper from "./styled";
@@ -151,16 +152,16 @@ export default function ChannelModal({ personal = false, closeModal }) {
             </div>
           }
           <div className="btns">
-            <button onClick={closeModal} className="btn normal cancel">
+            <Button onClick={closeModal} className="normal cancel">
               Cancel
-            </button>
-            <button
+            </Button>
+            <Button
               disabled={isLoading}
               onClick={handleCreate}
-              className="btn normal create"
+              className="normal main"
             >
               Create
-            </button>
+            </Button>
           </div>
         </div>
       </StyledWrapper>

src/common/component/ChannelModal/styled.js

@@ -128,21 +128,6 @@ const StyledWrapper = styled.div`
       align-items: center;
       justify-content: flex-end;
       gap: 16px;
-      .btn {
-        cursor: pointer;
-        padding: 8px 16px;
-        background: none;
-        border: 1px solid #e5e7eb;
-        box-shadow: 0px 1px 2px rgba(31, 41, 55, 0.08);
-        border-radius: 4px;
-        font-weight: 500;
-        color: #374151;
-        &.create {
-          border: none;
-          background: #1fe1f9;
-          color: #fff;
-        }
-      }
     }
     .normal {
       font-size: 14px;