chore: tweak UIs

src/common/component/Message/ForwardedMessage.tsx

@@ -21,7 +21,7 @@ const ForwardedMessage: FC<Props> = ({ context, to, from_uid, id }) => {
       const forward_mids = messages.map(({ from_mid }) => from_mid) || [];
       // console.log("fff", messages);
       setForwards(
-        <div data-forwarded-mids={forward_mids.join(",")} className="flex flex-col rounded-lg bg-gray-200 dark:bg-gray-900">
+        <div data-forwarded-mids={forward_mids.join(",")} className="flex flex-col text-left rounded-lg bg-gray-200 dark:bg-gray-900">
           <h4 className="p-2 pb-0 flex items-center gap-1 text-gray-500 text-xs">
             <IconForward className="w-4 h-4 fill-gray-500" />
             {t("action.forward")}

src/common/component/Message/PreviewMessage.tsx

@@ -9,7 +9,7 @@ interface Props {
   context?: "forward" | "pin"
 }
 
-const PreviewMessage: FC<Props> = ({ mid = 0, context }) => {
+const PreviewMessage: FC<Props> = ({ mid = 0, context = "forward" }) => {
   const { msg, usersData } = useAppSelector((store) => {
     return { msg: store.message[mid], usersData: store.users.byId };
   });
@@ -17,6 +17,7 @@ const PreviewMessage: FC<Props> = ({ mid = 0, context }) => {
   const { from_uid = 0, content_type, content, thumbnail = "", properties } = msg;
   const { name, avatar } = usersData[from_uid] ?? {};
   const pinMsg = context == "pin";
+  const forwardMsg = context == "forward";
   return (
     <div className={clsx(`w-full relative flex items-start gap-3 p-2 my-2 rounded-lg`, pinMsg && "max-h-64 overflow-auto overflow-x-hidden border border-solid border-gray-200 dark:border-gray-400")}>
       <div className="w-10 h-10 flex shrink-0">
@@ -26,7 +27,7 @@ const PreviewMessage: FC<Props> = ({ mid = 0, context }) => {
         <div className="flex items-center gap-2 font-semibold">
           <span className="text-gray-500 text-sm">{name}</span>
         </div>
-        <div className={`select-text text-gray-600 text-sm break-all whitespace-pre-wrap dark:text-white`}>
+        <div className={clsx(`select-text text-gray-600 text-sm break-all whitespace-pre-wrap dark:text-white`, forwardMsg && "max-h-72 overflow-y-scroll")}>
           {renderContent({
             content_type,
             content,

src/common/component/Message/index.tsx

@@ -97,7 +97,7 @@ const Message: FC<IProps> = ({
       onContextMenu={readOnly ? undefined : handleContextMenuEvent}
       data-msg-mid={mid}
       ref={inViewRef}
-      className={clsx(`group w-full relative flex items-start gap-2 md:gap-4 px-1 md:px-2 py-1 my-2 rounded-lg md:dark:hover:bg-gray-800 md:hover:bg-gray-100`,
+      className={clsx(`group w-full relative flex items-start gap-2 md:gap-4 p-1 md:p-2 my-2 rounded-lg md:dark:hover:bg-gray-800 md:hover:bg-gray-100`,
         readOnly && "hover:bg-transparent",
         showExpire && "bg-red-200 dark:bg-red-200/40",
         pinInfo && "bg-cyan-50 dark:bg-cyan-800 pt-7"

src/common/component/Send/Replying.tsx

@@ -44,10 +44,10 @@ const renderContent = (data: MessagePayload) => {
         } else {
           const icon = getFileIcon(content_type, name, "icon w-4 h-5");
           res = (
-            <>
+            <div className="flex items-center gap-1">
               {icon}
               <span className="ml-1 text-[10px] text-gray-400">{name}</span>
-            </>
+            </div>
           );
         }
       }

src/common/component/styled/Button.tsx

@@ -10,7 +10,7 @@ const StyledButton = ({ children, className = '', ...rest }: Props) => {
   const isSmall = className.includes('small');
   const isMini = className.includes('mini');
   const isFull = className.includes('flex');
-  return <button className={clsx(`text-sm text-white bg-primary-400 break-keep shadow rounded-lg px-3.5 h-11 md:hover:bg-primary-500 active:bg-primary-500 disabled:bg-gray-300 disabled:hover:bg-gray-300 disabled:hover:cursor-not-allowed`,
+  return <button className={clsx(`text-sm text-white bg-primary-400 break-keep shadow-sm rounded-lg px-3.5 h-11 md:hover:bg-primary-500 active:bg-primary-500 disabled:bg-gray-300 disabled:hover:bg-gray-300 disabled:hover:cursor-not-allowed`,
     isFull && "w-full text-center justify-center",
     isGhost && " !text-gray-600 dark:!text-gray-100  !border !border-solid !border-gray-300 dark:!border-gray-500 !bg-transparent",
     isCancel && "!bg-transparent !text-black dark:!text-gray-50 !border !border-solid !border-gray-200",

src/common/component/styled/Input.tsx

@@ -50,14 +50,14 @@ const Input: FC<Props> = ({ type = "text", prefix = "", className = "", ...rest
     isPwd && "pr-[30px]"
   );
   return type == "password" ? (
-    <div className={`w-full relative flex overflow-hidden rounded border border-solid border-gray-300 dark:border-gray-400 shadow-sm ${className}`}>
+    <div className={`w-full relative flex overflow-hidden rounded border border-solid border-gray-200 dark:border-gray-400 shadow-sm ${className}`}>
       <input type={inputType} autoComplete={inputType == "password" ? "current-password" : "on"} className={`${inputClass} ${className}`} {...rest} />
       <div className="absolute top-1/2 right-2.5 -translate-y-1/2 cursor-pointer" onClick={togglePasswordVisible}>
         {inputType == "password" ? <IconEyeClose className="fill-gray-500" /> : <IconEyeOpen className="fill-gray-500" />}
       </div>
     </div>
   ) : prefix ? (
-    <div className={`w-full relative flex overflow-hidden rounded border border-solid border-gray-300 dark:border-gray-400 shadow-sm ${className}`}>
+    <div className={`w-full relative flex overflow-hidden rounded border border-solid border-gray-200 dark:border-gray-400 shadow-sm ${className}`}>
       {typeof prefix === "string" ? <span className="px-4 py-2 text-sm text-gray-500 dark:text-gray-300 bg-gray-100 dark:bg-gray-800 shadow-[rgb(0_0_0_/_10%)_-1px_0px_0px_inset]">{prefix}</span> : <span className="flex-center p-2 bg-gray-100 dark:bg-gray-800 ">{prefix}</span>}
       <input className={`${inputClass} ${className}`} type={inputType} {...rest} />
     </div>