feat: darkmode draft version

src/common/component/StyledSettingContainer.tsx

@@ -1,96 +1,8 @@
 import { FC, PropsWithChildren, ReactNode } from "react";
-import styled from "styled-components";
 import { useLocation, NavLink } from "react-router-dom";
-import backIcon from "../../assets/icons/arrow.left.svg?url";
+import IconBack from "../../assets/icons/arrow.left.svg";
 import { Nav } from "../../routes/settingChannel/navs";
-
-const StyledWrapper = styled.div`
-  width: 100vw;
-  height: 100vh;
-  display: flex;
-
-  > .left {
-    max-height: 100vh;
-    overflow: scroll;
-    padding: 32px 16px;
-    min-width: 212px;
-    background-color: #f5f6f7;
-
-    > .title {
-      cursor: pointer;
-      font-weight: bold;
-      font-size: 16px;
-      line-height: 24px;
-      color: #1c1c1e;
-      margin-bottom: 32px;
-      padding-left: 24px;
-      background-size: 16px;
-      background: url(${backIcon}) no-repeat left;
-    }
-
-    > .items {
-      display: flex;
-      flex-direction: column;
-      gap: 2px;
-      margin-bottom: 36px;
-
-      &:before {
-        padding-left: 12px;
-        content: attr(data-title);
-        font-weight: bold;
-        font-size: 12px;
-        line-height: 18px;
-        color: #6b7280;
-        margin-bottom: 2px;
-      }
-
-      .item {
-        font-weight: 500;
-        font-size: 14px;
-        line-height: 20px;
-        color: #44494f;
-        border-radius: 4px;
-
-        &:hover,
-        &.curr {
-          background: #e7e5e4;
-        }
-
-        > a {
-          display: block;
-          padding: 4px 12px;
-        }
-      }
-
-      &.danger .item {
-        cursor: pointer;
-        padding: 4px 12px;
-        color: #ef4444;
-
-        &:hover {
-          background: none;
-        }
-      }
-    }
-  }
-
-  > .right {
-    background-color: #fff;
-    width: 100%;
-    max-height: 100%;
-    overflow: auto;
-    padding: 32px;
-
-    > .title {
-      font-weight: bold;
-      font-size: 20px;
-      line-height: 30px;
-      color: #374151;
-      margin-bottom: 32px;
-    }
-  }
-`;
-
+import clsx from "clsx";
 export interface Danger {
   title: string;
   handler: () => void;
@@ -114,18 +26,18 @@ const StyledSettingContainer: FC<PropsWithChildren<Props>> = ({
 }) => {
   const { pathname } = useLocation();
   return (
-    <StyledWrapper>
-      <div className="left">
-        <h2 onClick={closeModal} className="title">
-          {title}
+    <div className="w-screen h-screen flex">
+      <div className="max-h-screen min-w-[212px] overflow-scroll px-4 py-8 bg-[#f5f6f7] dark:bg-[#1F2A37]">
+        <h2 onClick={closeModal} className="flex gap-2 items-center cursor-pointer mb-8 font-bold text-gray-800 dark:text-white">
+          <IconBack className="dark:fill-gray-400" /> {title}
         </h2>
         {navs.map(({ title, items }) => {
           return (
-            <ul key={title} data-title={title} className="items">
+            <ul key={title} data-title={title} className="flex flex-col gap-0.5 mb-9 before:pl-3 before:content-[attr(data-title)] before:font-bold before:text-xs before:text-gray-400">
               {items.map(({ name, title }) => {
                 return (
-                  <li key={name} className={`item ${name == nav?.name ? "curr" : ""}`}>
-                    <NavLink to={`${pathname}?nav=${name}`}>{title}</NavLink>
+                  <li key={name} className={clsx(`text-sm text-gray-700 whitespace-nowrap dark:text-gray-200  rounded hover:bg-[#e7e5e4] dark:hover:bg-slate-500/20`, name == nav?.name && "bg-[#e7e5e4] dark:bg-slate-500/20")}>
+                    <NavLink to={`${pathname}?nav=${name}`} className="block px-3 py-1">{title}</NavLink>
                   </li>
                 );
               })}
@@ -133,12 +45,12 @@ const StyledSettingContainer: FC<PropsWithChildren<Props>> = ({
           );
         })}
         {dangers.length ? (
-          <ul className="items danger">
+          <ul className="flex flex-col gap-2 mb-9">
             {dangers.map((d) => {
               if (typeof d === "boolean" || !d) return null;
               const { title, handler } = d;
               return (
-                <li key={title} onClick={handler} className="item">
+                <li key={title} onClick={handler} className="text-sm text-white dark:text-gray-200 rounded cursor-pointer py-1.5 px-3 bg-[#ef4444] hover:bg-red-600">
                   {title}
                 </li>
               );
@@ -146,11 +58,11 @@ const StyledSettingContainer: FC<PropsWithChildren<Props>> = ({
           </ul>
         ) : null}
       </div>
-      <div className="right">
-        {nav && <h4 className="title">{nav.title}</h4>}
+      <div className="bg-white w-full max-h-full overflow-auto p-8 dark:bg-[#384250]">
+        {nav && <h4 className="font-bold text-xl text-gray-600 mb-8 dark:text-gray-100">{nav.title}</h4>}
         {children}
       </div>
-    </StyledWrapper>
+    </div>
   );
 };