chore: tweak UIs

src/components/AutoDeleteMessages.tsx

@@ -74,7 +74,7 @@ const AutoDeleteMessages = ({ id, type = "channel" }: Props) => {
     <section className="max-w-[512px] h-full relative">
       <div className="text-sm">
         <h2 className="dark:text-white">{t("title")}</h2>
-        <p className="text-gray-400">{t("desc")}</p>
+        <p className="text-gray-400 text-xs">{t("desc")}</p>
       </div>
       <div className="mt-4">
         <StyledRadio
@@ -89,7 +89,7 @@ const AutoDeleteMessages = ({ id, type = "channel" }: Props) => {
         <>
           <div className="text-sm mt-8">
             <h2 className="dark:text-white">{t("clear_title")}</h2>
-            <p className="text-gray-400">{t("clear_desc")}</p>
+            <p className="text-gray-400 text-xs">{t("clear_desc")}</p>
           </div>
           <div className="mt-4">
             <StyledButton className="danger" onClick={handleClear}>

src/components/styled/Textarea.tsx

@@ -6,7 +6,7 @@ const StyledTextarea = forwardRef(({ className, ...rest }: Props, ref) => {
     <textarea
       ref={ref}
       className={`rounded text-sm p-2 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 resize-none w-full shadow-sm 
-  border border-solid border-gray-200 dark:border-gray-400 
+  border border-solid border-gray-200 dark:border-gray-400 outline-none
   disabled:bg-gray-100 dark:disabled:bg-gray-800/50 dark:disabled:border-gray-600
   disabled:text-gray-400 dark:disabled:text-gray-500 
   disabled:pointer-events-none 

src/routes/settingChannel/Overview.tsx

@@ -106,7 +106,7 @@ export default function Overview({ id = 0 }) {
             id="name"
             placeholder={t("name")}
           />
-          <IconChannel className="absolute bottom-2.5 left-2" />
+          <IconChannel className="absolute bottom-2.5 left-2 dark:fill-gray-300" />
         </div>
         <div className={inputClass}>
           <Label htmlFor="desc">{t("topic")}</Label>