feat: darkmode draft version
This commit is contained in:
Tristan Yang
@@ -5,7 +5,6 @@ import Modal from "../Modal";
|
||||
import Button from "../styled/Button";
|
||||
import ChannelIcon from "../ChannelIcon";
|
||||
import User from "../User";
|
||||
import StyledWrapper from "./styled";
|
||||
import StyledCheckbox from "../styled/Checkbox";
|
||||
import StyledToggle from "../../component/styled/Toggle";
|
||||
import useFilteredUsers from "../../hook/useFilteredUsers";
|
||||
@@ -13,6 +12,7 @@ import { useCreateChannelMutation } from "../../../app/services/channel";
|
||||
import { useAppSelector } from "../../../app/store";
|
||||
import { CreateChannelDTO } from "../../../types/channel";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import clsx from "clsx";
|
||||
|
||||
interface Props {
|
||||
personal?: boolean;
|
||||
@@ -94,18 +94,19 @@ const ChannelModal: FC<Props> = ({ personal = false, closeModal }) => {
|
||||
|
||||
return (
|
||||
<Modal>
|
||||
<StyledWrapper>
|
||||
<div className="flex max-h-[402px] bg-white dark:bg-gray-800 drop-shadow rounded-lg">
|
||||
{!is_public && (
|
||||
<div className="left">
|
||||
<div className="search">
|
||||
<div className="w-[260px] shadow-[inset_-1px_0px_0px_rgba(0,_0,_0,_0.1)]">
|
||||
<div className="sticky top-0 z-[99] rounded-tl-lg shadow-[0px_1px_0px_rgba(0,_0,_0,_0.1)] p-2 w-[calc(100%_-_1px)]">
|
||||
<input
|
||||
className="outline-none p-2 text-sm w-full bg-transparent dark:text-white"
|
||||
value={input}
|
||||
onChange={handleInputChange}
|
||||
placeholder={t("search_user_placeholder")}
|
||||
/>
|
||||
</div>
|
||||
{users && (
|
||||
<ul className="users">
|
||||
<ul className="flex flex-col overflow-y-scroll overflow-x-hidden h-[calc(100%_-_52px_-_10px)]">
|
||||
{users.map((u) => {
|
||||
const { uid } = u;
|
||||
const checked = members ? members.includes(uid) : false;
|
||||
@@ -113,7 +114,7 @@ const ChannelModal: FC<Props> = ({ personal = false, closeModal }) => {
|
||||
<li
|
||||
key={uid}
|
||||
data-uid={uid}
|
||||
className="user"
|
||||
className="cursor-pointer flex items-center px-4 rounded hover:bg-gray-500/10"
|
||||
onClick={loginUid == uid ? undefined : toggleCheckMember}
|
||||
>
|
||||
<StyledCheckbox
|
||||
@@ -131,38 +132,38 @@ const ChannelModal: FC<Props> = ({ personal = false, closeModal }) => {
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div className={`right ${!is_public ? "private" : ""}`}>
|
||||
<h3 className="title">{t("create_channel")}</h3>
|
||||
<p className="desc normal">
|
||||
<div className={clsx(`min-w-[400px] flex flex-col items-center p-8 box-border`, !is_public && "w-[344px] justify-evenly")}>
|
||||
<h3 className="font-semibold text-xl text-gray-600 mb-4 dark:text-white">{t("create_channel")}</h3>
|
||||
<p className="text-gray-400 mb-12 text-sm font-normal">
|
||||
{!is_public
|
||||
? t("create_private_channel_desc")
|
||||
: t("create_channel_desc")}
|
||||
</p>
|
||||
<div className="name">
|
||||
<span className="label normal">{t("channel_name")}</span>
|
||||
<div className="input">
|
||||
<input onChange={handleNameInput} value={name} placeholder="new channel" />
|
||||
<ChannelIcon personal={!is_public} className="icon" />
|
||||
<div className="w-full flex flex-col justify-start gap-2 mb-8.5">
|
||||
<span className="text-gray-400 text-sm font-normal">{t("channel_name")}</span>
|
||||
<div className="relative">
|
||||
<input className="text-gray-600 rounded p-2 pl-9 border border-solid border-gray-300 w-full" onChange={handleNameInput} value={name} placeholder="new channel" />
|
||||
<ChannelIcon personal={!is_public} className="absolute left-2 top-1/2 -translate-y-1/2" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="private">
|
||||
<span className="txt normal">{t("private_channel")}</span>
|
||||
<div className="w-full flex items-center justify-between mb-12.5">
|
||||
<span className="text-gray-400 text-sm">{t("private_channel")}</span>
|
||||
<StyledToggle
|
||||
data-checked={!is_public}
|
||||
data-disabled={!loginUser?.is_admin}
|
||||
onClick={handleToggle}
|
||||
/>
|
||||
</div>
|
||||
<div className="btns">
|
||||
<Button onClick={closeModal} className="normal cancel">
|
||||
<div className="w-full flex gap-4 items-center justify-end">
|
||||
<Button onClick={closeModal} className="text-sm cancel">
|
||||
{t("action.cancel", { ns: "common" })}
|
||||
</Button>
|
||||
<Button disabled={isLoading} onClick={handleCreate} className="normal">
|
||||
<Button disabled={isLoading} onClick={handleCreate} className="text-sm">
|
||||
{t("action.create", { ns: "common" })}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</StyledWrapper>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,136 +0,0 @@
|
||||
import styled from "styled-components";
|
||||
|
||||
const StyledWrapper = styled.div`
|
||||
display: flex;
|
||||
max-height: 402px;
|
||||
background: #fff;
|
||||
box-shadow: 0px 25px 50px rgba(31, 41, 55, 0.25);
|
||||
border-radius: var(--br);
|
||||
transition: all 0.5s ease;
|
||||
.left {
|
||||
width: 260px;
|
||||
box-shadow: inset -1px 0px 0px rgba(0, 0, 0, 0.1);
|
||||
.search {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 99;
|
||||
background: #fff;
|
||||
border-top-left-radius: var(--br);
|
||||
box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
|
||||
padding: 8px;
|
||||
width: calc(100% - 1px);
|
||||
input {
|
||||
outline: none;
|
||||
width: -webkit-fill-available;
|
||||
padding: 8px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
.users {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100% - 52px - 10px);
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
.user {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 16px;
|
||||
width: -webkit-fill-available;
|
||||
border-radius: 4px;
|
||||
&:hover {
|
||||
background: rgba(116, 127, 141, 0.1);
|
||||
}
|
||||
> div {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.right {
|
||||
min-width: 400px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 32px;
|
||||
box-sizing: border-box;
|
||||
&.private {
|
||||
width: 344px;
|
||||
justify-content: space-evenly;
|
||||
.desc {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
> .title {
|
||||
font-weight: 600;
|
||||
font-size: 20px;
|
||||
line-height: 30px;
|
||||
color: #374151;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.desc {
|
||||
font-weight: normal;
|
||||
color: #6b7280;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
.name {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
gap: 8px;
|
||||
margin-bottom: 34px;
|
||||
.label {
|
||||
font-weight: 600;
|
||||
color: #6b7280;
|
||||
}
|
||||
.input {
|
||||
position: relative;
|
||||
input {
|
||||
width: -webkit-fill-available;
|
||||
border: 1px solid #e5e7eb;
|
||||
box-shadow: 0px 1px 2px rgba(31, 41, 55, 0.08);
|
||||
border-radius: 4px;
|
||||
padding: 8px;
|
||||
color: #78787c;
|
||||
padding-left: 36px;
|
||||
}
|
||||
.icon {
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
.private {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 50px;
|
||||
.txt {
|
||||
font-weight: 600;
|
||||
color: #6b7280;
|
||||
}
|
||||
input {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.btns {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 16px;
|
||||
}
|
||||
.normal {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
`;
|
||||
export default StyledWrapper;
|
||||
Reference in New Issue
Block a user