refactor: replace custom color with preset color

src/routes/chat/ChannelChat/index.tsx

@@ -174,8 +174,8 @@ function ChannelChat({ cid = 0, dropFiles = [] }: Props) {
               <h2 className="font-bold text-4xl dark:text-white">{t("welcome_channel", { name })}</h2>
               <p className="text-gray-600 dark:text-gray-300">{t("welcome_desc", { name })} </p>
               {loginUser?.is_admin && (
-                <NavLink to={`/setting/channel/${cid}?f=${pathname}`} className="flex items-center gap-1 bg-clip-text text-fill-transparent bg-gradient-to-r from-[#3c8ce7] to-primary-400 ">
-                  <EditIcon className="w-4 h-4 fill-[#3c8ce7]" />
+                <NavLink to={`/setting/channel/${cid}?f=${pathname}`} className="flex items-center gap-1 bg-clip-text text-fill-transparent bg-gradient-to-r from-blue-500 to-primary-400 ">
+                  <EditIcon className="w-4 h-4 fill-blue-500" />
                   {t("edit_channel")}
                 </NavLink>
               )}

src/routes/chat/Layout/DnDTip.tsx

@@ -13,7 +13,7 @@ const DnDTip = ({ context, name }: Props) => {
       className={`flex-center absolute left-0 top-0 w-full h-full bg-black/50`}
     >
       <div className={`p-4 drop-shadow-md rounded-lg bg-primary-300`}>
-        <div className="p-4 pt-16 border-2 border-dashed border-[#a5f3fc] rounded-md flex flex-col items-center text-white">
+        <div className="p-4 pt-16 border-2 border-dashed border-primary-300 rounded-md flex flex-col items-center text-white">
           <h4 className="text-xl font-semibold">{`${t("send_to")} ${ChatPrefixes[context]}${name}`}</h4>
           <span className="text-sm">Photos accept jpg, png, max size limit to 10M.</span>
         </div>

src/routes/login/SignUpLink.tsx

@@ -17,9 +17,9 @@ export default function MagicLinkLogin({ smtp = false }: Props) {
   };
 
   return (
-    <div className="flex gap-1 mt-7 text-sm text-[#667085] dark:text-gray-100 justify-center">
+    <div className="flex gap-1 mt-7 text-sm text-slate-500 dark:text-gray-100 justify-center">
       <span>{t("login.no_account")}</span>
-      <a className="text-[#22d3ee] cursor-pointer" onClick={handleSignUp}>{t("sign_up")}</a>
+      <a className="text-primary-400 cursor-pointer" onClick={handleSignUp}>{t("sign_up")}</a>
     </div>
   );
 }

src/routes/onboarding/steps/invite-link.tsx

@@ -20,7 +20,7 @@ export default function InviteLink() {
       <span className="text-sm text-gray-500 mb-2 font-semibold">{t("last_desc")}</span>
       <div className="w-full md:w-[400px] rounded shadow-md flex border border-solid border-gray-100">
         <StyledInput className="large !border-none !shadow-none" readOnly placeholder="Generating" value={link} />
-        <StyledButton onClick={copyLink} className="ghost small border_less !px-2 hover:!text-[#088ab2]">
+        <StyledButton onClick={copyLink} className="ghost small border_less !px-2 hover:!text-primary-600">
           {linkCopied ? "Copied" : ct("action.copy")}
         </StyledButton>
       </div>

src/routes/reg/SignInLink.tsx

@@ -17,9 +17,9 @@ export default function SignInLink({ token }: { token?: string }) {
   }, [token]);
 
   return (
-    <div className="flex gap-1 mt-7 text-sm text-[#667085] dark:text-gray-100 justify-center">
+    <div className="flex gap-1 mt-7 text-sm text-slate-500 dark:text-gray-100 justify-center">
       <span>{t("reg.have_account")}</span>
-      <a onClick={handleSignIn} className="text-[#22d3ee] cursor-pointer">{t("sign_in")}</a>
+      <a onClick={handleSignIn} className="text-primary-400 cursor-pointer">{t("sign_in")}</a>
     </div>
   );
 }