feat: darkmode draft version

src/routes/chat/GuestChannelChat/index.tsx

@@ -1,13 +1,13 @@
 // import { useState, useEffect } from "react";
 // import { NavLink } from "react-router-dom";
+import { useTranslation } from "react-i18next";
 import useMessageFeed from "../../../common/hook/useMessageFeed";
 import ChannelIcon from "../../../common/component/ChannelIcon";
 import Layout from "../Layout";
 import { renderMessageFragment } from "../utils";
-import { StyledChannelChat } from "./styled";
 import LoadMore from "../LoadMore";
 import { useAppSelector } from "../../../app/store";
-import { useTranslation } from "react-i18next";
+
 type Props = {
   cid?: number;
 };
@@ -43,19 +43,19 @@ export default function GuestChannelChat({ cid = 0 }: Props) {
           <header className="head flex items-center h-full justify-center md:justify-between">
             <div className="flex items-center gap-1 text-base">
               <ChannelIcon personal={!is_public} />
-              <span className="text-gray-800">{name}</span>
+              <span className="text-gray-800 dark:text-white">{name}</span>
               <span className="ml-2 text-gray-500">{description}</span>
             </div>
           </header>
         }
       >
-        <StyledChannelChat id={`VOCECHAT_FEED_channel_${cid}`}>
+        <article className="py-4.5 px-4 w-full h-full overflow-x-hidden overflow-y-auto" id={`VOCECHAT_FEED_channel_${cid}`}>
           {hasMore ? (
             <LoadMore pullUp={pullUp} pulling={pulling} />
           ) : (
-            <div className="info">
-              <h2 className="title">{t("welcome_channel", { name })}</h2>
-              <p className="desc">{t("welcome_desc", { name })} </p>
+            <div className="pt-14 flex flex-col items-start gap-2">
+              <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>
             </div>
           )}
           {/* <div className="feed"> */}
@@ -73,7 +73,7 @@ export default function GuestChannelChat({ cid = 0 }: Props) {
               context: "channel"
             });
           })}
-        </StyledChannelChat>
+        </article>
       </Layout>
     </>
   );

src/routes/chat/GuestChannelChat/styled.tsx

@@ -1,28 +0,0 @@
-import styled from "styled-components";
-export const StyledChannelChat = styled.article`
-  padding: 18px 16px;
-  width: 100%;
-  height: 100%;
-  height: -webkit-fill-available;
-  overflow-x: hidden;
-  overflow-y: auto;
-  overflow-anchor: auto;
-  > .info {
-    padding-top: 62px;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 8px;
-    .title {
-      font-weight: bold;
-      font-size: 36px;
-      line-height: 44px;
-    }
-    .desc {
-      color: #78787c;
-      font-weight: 500;
-      font-size: 16px;
-      line-height: 24px;
-    }
-  }
-`;