ColdBreeze/ColdBreeze-chat-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: darkmode draft version

Browse Source
This commit is contained in:
Tristan Yang
2023-02-06 07:35:31 +08:00
parent b4c5d5cb86
commit 07ddfbf12b
111 changed files with 885 additions and 2102 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/chat/ChannelChat/index.tsx
+4 -4
View File
@@ -145,7 +145,7 @@ function ChannelChat({ cid = 0, dropFiles = [] }: 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>
@@ -155,7 +155,7 @@ function ChannelChat({ cid = 0, dropFiles = [] }: Props) {
{addVisible && (
<div className="add" onClick={toggleAddVisible}>
<img className="icon" src={addIcon} />
<div className="txt">{t("add_channel_members")}</div>
<div className="txt dark:!text-gray-50">{t("add_channel_members")}</div>
</div>
)}
{memberIds.map((uid: number) => {
@@ -179,8 +179,8 @@ function ChannelChat({ cid = 0, dropFiles = [] }: Props) {
<LoadMore pullUp={pullUp} pulling={pulling} />
) : (
<div className="info">
<h2 className="title">{t("welcome_channel", { name })}</h2>
<p className="desc">{t("welcome_desc", { name })} </p>
<h2 className="title dark:text-white">{t("welcome_channel", { name })}</h2>
<p className="desc dark:!text-gray-300">{t("welcome_desc", { name })} </p>
{loginUser?.is_admin && (
<NavLink to={`/setting/channel/${cid}?f=${pathname}`} className="edit">
<EditIcon className="icon" />
src/routes/chat/ChannelChat/styled.tsx
-25
View File
@@ -1,30 +1,5 @@
import styled from "styled-components";
export const StyledNotification = styled.div`
padding: 3px 8px;
font-style: normal;
font-weight: 600;
font-size: 12px;
line-height: 18px;
color: #fff;
position: absolute;
top: 0;
left: 10px;
width: 900px;
height: 24px;
background: linear-gradient(135deg, #3c8ce7 0%, #00eaff 100%);
border-radius: 0px 0px 8px 8px;
display: flex;
align-items: center;
justify-content: space-between;
.clear {
cursor: pointer;
color: inherit;
border: none;
background: none;
outline: none;
}
`;
export const StyledUsers = styled.div`
/* display: flex; */
flex-direction: column;
src/routes/chat/GuestBlankPlaceholder.tsx
+3 -3
View File
@@ -20,10 +20,10 @@ const GuestBlankPlaceholder = () => {
navigateTo("/login");
};
return (
<section className="flex flex-col items-center">
<h2 className="text-3xl text-gray-600 font-bold ">{t("welcome", { name: serverName })}</h2>
<section className="flex flex-col items-center bg-transparent">
<h2 className="text-3xl text-gray-600 dark:text-gray-50 font-bold ">{t("welcome", { name: serverName })}</h2>
<div className="flex flex-col">
<span className="text-gray-400 my-3 text-sm">{t("guest_login_tip")}</span>
<span className="text-gray-400 dark:text-gray-200 my-3 text-sm">{t("guest_login_tip")}</span>
<Button onClick={handleSignIn} className="small">{t("sign_in")}</Button>
</div>
</section>
src/routes/chat/GuestChannelChat/index.tsx
+8 -8
View File
@@ -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
-28
View File
@@ -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;
}
}
`;
src/routes/chat/GuestSessionList/Session.tsx
+11 -11
View File
@@ -1,9 +1,9 @@
// @ts-nocheck
import { useState, useEffect, FC } from "react";
import dayjs from "dayjs";
import clsx from "clsx";
import { renderPreviewMessage } from "../../chat/utils";
import Avatar from "../../../common/component/Avatar";
import IconLock from "../../../assets/icons/lock.svg";
import { NavLink } from "react-router-dom";
import { useAppSelector } from "../../../app/store";
@@ -35,25 +35,25 @@ const Session: FC<IProps> = ({ id, mid }) => {
}, [id, mid, userData, channelData]);
if (!data) return null;
const previewMsg = messageData[mid] || {};
const { name, icon, is_public } = data;
const { name, icon } = data;
return (
<li className="session">
<NavLink className={`nav`} to={`/chat/channel/${id}`}>
<div className="icon">
<NavLink className={({ isActive: linkActive }) => clsx(`nav flex gap-2 rounded-lg p-2 w-full hover:bg-gray-500/20`, linkActive && "bg-gray-500/20")} to={`/chat/channel/${id}`}>
<div className="flex bg-slate-50 rounded-full">
<Avatar width={40} height={40} className="icon" type="channel" name={name} src={icon} />
</div>
<div className="details">
<div className="up">
<span className={`name ${previewMsg.created_at ? "" : "only_title"}`}>
{name} {!is_public && <IconLock />}
<div className="w-full flex flex-col justify-between">
<div className="flex items-center justify-between">
<span className={clsx(`flex items-center gap-2 font-semibold text-sm text-gray-500 dark:text-white whitespace-nowrap overflow-hidden text-ellipsis`, previewMsg.created_at && "max-w-[190px]")}>
{name}
</span>
<span className="time">
<span className="text-xs text-gray-600 whitespace-nowrap overflow-hidden max-w-[80px] text-ellipsis">
{previewMsg.created_at ? dayjs(previewMsg.created_at).fromNow() : null}
</span>
</div>
<div className="down">
<span className="msg">{renderPreviewMessage(previewMsg)}</span>
<div className="flex items-center justify-between">
<span className="text-xs text-gray-500 whitespace-nowrap overflow-hidden w-36 text-ellipsis">{renderPreviewMessage(previewMsg)}</span>
</div>
</div>
</NavLink>
src/routes/chat/GuestSessionList/index.tsx
+2 -3
View File
@@ -1,6 +1,5 @@
import { FC } from "react";
import { useState, useEffect } from "react";
import Styled from "./styled";
import Session from "./Session";
import { useAppSelector } from "../../../app/store";
export interface ChatSession {
@@ -41,12 +40,12 @@ const SessionList: FC<Props> = () => {
}, [channelIDs, channelMessage, readChannels, readUsers, loginUid, userMessage]);
return (
<Styled>
<ul className="flex flex-col gap-0.5 p-2 overflow-auto h-[calc(100vh_-_56px_-_16px_-_8px)]">
{sessions.map((s) => {
const { key, id, mid = 0 } = s;
return <Session key={key} id={id} mid={mid} />;
})}
</Styled>
</ul>
);
};
export default SessionList;
src/routes/chat/GuestSessionList/styled.tsx
-86
View File
@@ -1,86 +0,0 @@
import styled from "styled-components";
const Styled = styled.ul`
display: flex;
flex-direction: column;
gap: 2px;
padding: 8px;
height: calc(100vh - 56px - 16px - 8px);
overflow: auto;
> .session {
> a {
display: flex;
gap: 8px;
border-radius: 8px;
padding: 8px;
width: 100%;
&.active,
&:hover {
background: rgba(116, 127, 141, 0.2);
}
.icon {
display: flex;
background-color: #eee;
border-radius: 50%;
img {
max-width: unset;
width: 40px;
height: 40px;
&.channel_default {
padding: 5px;
}
}
}
.details {
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
.up {
display: flex;
align-items: center;
justify-content: space-between;
.name {
font-weight: 600;
font-size: 14px;
line-height: 20px;
color: #52525b;
max-width: 112px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&.only_title {
max-width: 190px;
}
}
.time {
font-weight: 500;
font-size: 12px;
line-height: 18px;
color: #78787c;
white-space: nowrap;
overflow: hidden;
max-width: 80px;
text-overflow: ellipsis;
}
}
.down {
display: flex;
align-items: center;
justify-content: space-between;
> .msg {
font-weight: 400;
font-size: 12px;
line-height: 18px;
color: #78787c;
white-space: nowrap;
overflow: hidden;
width: 140px;
text-overflow: ellipsis;
}
}
}
}
}
`;
export default Styled;
src/routes/chat/Layout/LoginTip.tsx
+2 -2
View File
@@ -20,8 +20,8 @@ const LoginTip = () => {
};
return (
<div className="flex items-center justify-between bg-slate-200/80 rounded-lg w-full p-4">
<span className="text-base text-[#98a2b3]">
<div className="flex items-center justify-between bg-slate-200/80 dark:bg-gray-800 rounded-lg w-full p-4">
<span className="text-base text-[#98a2b3] dark:text-gray-100">
<i className="mr-2 text-lg">👋</i>
{t("sign_in_tip")}
</span>
src/routes/chat/Layout/styled.tsx
-2
View File
@@ -2,7 +2,6 @@ import styled from "styled-components";
const Styled = styled.article`
position: relative;
width: 100%;
background: #fff;
border-top-right-radius: 16px;
border-bottom-right-radius: 16px;
> .head {
@@ -21,7 +20,6 @@ const Styled = styled.article`
> .chat {
border-bottom-right-radius: 16px;
width: 100%;
background-color: #fff;
display: flex;
flex-direction: column;
padding: 0;
src/routes/chat/SessionList/Session.tsx
+12 -12
View File
@@ -1,15 +1,16 @@
// @ts-nocheck
import { useState, useEffect, FC } from "react";
import clsx from "clsx";
import dayjs from "dayjs";
import { useDrop } from "react-dnd";
import { NativeTypes } from "react-dnd-html5-backend";
import { useNavigate, NavLink } from "react-router-dom";
import ContextMenu from "./ContextMenu";
import getUnreadCount, { renderPreviewMessage } from "../utils";
import User from "../../../common/component/User";
import Avatar from "../../../common/component/Avatar";
import IconLock from "../../../assets/icons/lock.svg";
import useContextMenu from "../../../common/hook/useContextMenu";
import { useNavigate, NavLink } from "react-router-dom";
import useUploadFile from "../../../common/hook/useUploadFile";
import { useAppSelector } from "../../../app/store";
@@ -95,7 +96,6 @@ const Session: FC<IProps> = ({
messageData,
loginUid
});
return (
<li className="session">
<ContextMenu
@@ -109,11 +109,11 @@ const Session: FC<IProps> = ({
>
<NavLink
ref={drop}
className={`nav ${isActive ? "drop_over" : ""} ${muted ? "muted" : ""}`}
className={({ isActive: linkActive }) => clsx(`nav flex gap-2 rounded-lg p-2 w-full hover:bg-gray-500/20`, isActive && "shadow-[inset_0_0_0_2px_#52edff]", linkActive && "bg-gray-500/20")}
to={type == "user" ? `/chat/dm/${id}` : `/chat/channel/${id}`}
onContextMenu={handleContextMenuEvent}
>
<div className="icon">
<div className="flex bg-slate-50 rounded-full">
{type == "user" ? (
<User avatarSize={40} compact interactive={false} uid={id} />
) : (
@@ -127,21 +127,21 @@ const Session: FC<IProps> = ({
/>
)}
</div>
<div className="details">
<div className="up">
<span className={`name ${previewMsg.created_at ? "" : "only_title"}`}>
<div className="w-full flex flex-col justify-between">
<div className="flex items-center justify-between">
<span className={clsx(`flex items-center gap-2 font-semibold text-sm text-gray-500 dark:text-white whitespace-nowrap overflow-hidden text-ellipsis`, previewMsg.created_at && "max-w-[190px]")}>
{name} {!is_public && <IconLock />}
</span>
<span className="time">
<span className="text-xs text-gray-600 whitespace-nowrap overflow-hidden max-w-[80px] text-ellipsis">
{previewMsg.created_at ? dayjs(previewMsg.created_at).fromNow() : null}
</span>
</div>
<div className="down">
<span className="msg">{renderPreviewMessage(previewMsg)}</span>
<div className="flex items-center justify-between">
<span className="text-xs text-gray-500 whitespace-nowrap overflow-hidden w-36 text-ellipsis">{renderPreviewMessage(previewMsg)}</span>
{unreads > 0 && (
<i className={`badge ${unreads > 99 ? "dot" : ""}`}>
<strong className={clsx(`text-white h-5 min-w-[20px] bg-primary-400 font-bold text-[10px] rounded-[10px] flex-center`, unreads > 99 && 'w-1.5 h-1.5 p-0 min-w-[unset]', muted && "bg-gray-500")}>
{unreads > 99 ? null : unreads}
</i>
</strong>
)}
</div>
</div>
src/routes/chat/SessionList/index.tsx
+2 -4
View File
@@ -1,6 +1,5 @@
import { FC } from "react";
import { useState, useEffect } from "react";
import Styled from "./styled";
import Session from "./Session";
import DeleteChannelConfirmModal from "../../settingChannel/DeleteConfirmModal";
import InviteModal from "../../../common/component/InviteModal";
@@ -65,10 +64,9 @@ const SessionList: FC<Props> = ({ tempSession }) => {
userMessage,
tempSession
]);
return (
<>
<Styled>
<ul className="flex flex-col gap-0.5 p-2 overflow-auto h-[calc(100vh_-_56px_-_16px_-_8px)]">
{sessions.map((s) => {
const { key, type, id, mid = 0 } = s;
return (
@@ -82,7 +80,7 @@ const SessionList: FC<Props> = ({ tempSession }) => {
/>
);
})}
</Styled>
</ul>
{!!deleteId && (
<DeleteChannelConfirmModal
id={deleteId}
src/routes/chat/SessionList/styled.tsx
-124
View File
@@ -1,124 +0,0 @@
import styled from "styled-components";
const Styled = styled.ul`
display: flex;
flex-direction: column;
gap: 2px;
padding: 8px;
height: calc(100vh - 56px - 16px - 8px);
overflow: auto;
> .session {
> a {
display: flex;
gap: 8px;
border-radius: 8px;
padding: 8px;
width: 100%;
&.active,
&:hover {
background: rgba(116, 127, 141, 0.2);
}
&.drop_over {
box-shadow: inset 0 0 0 2px #52edff;
}
.icon {
display: flex;
background-color: #eee;
border-radius: 50%;
img {
max-width: unset;
width: 40px;
height: 40px;
&.channel_default {
padding: 5px;
}
}
}
.details {
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
.up {
display: flex;
align-items: center;
justify-content: space-between;
.name {
display: flex;
align-items: center;
gap: 2px;
font-weight: 600;
font-size: 14px;
line-height: 20px;
color: #52525b;
max-width: 112px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&.only_title {
max-width: 190px;
}
}
.time {
font-weight: 500;
font-size: 12px;
line-height: 18px;
color: #78787c;
white-space: nowrap;
overflow: hidden;
max-width: 80px;
text-overflow: ellipsis;
}
}
.down {
display: flex;
align-items: center;
justify-content: space-between;
> .msg {
font-weight: 400;
font-size: 12px;
line-height: 18px;
color: #78787c;
white-space: nowrap;
overflow: hidden;
width: 140px;
text-overflow: ellipsis;
}
> .badge {
color: #fff;
height: 20px;
min-width: 20px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: #1fe1f9;
font-weight: 900;
font-size: 10px;
line-height: 10px;
&.dot {
min-width: unset;
width: 6px;
height: 6px;
padding: 0;
}
&.mute {
background: #bfbfbf;
}
}
}
}
&.muted {
.up .name,
.up .time,
.down .msg {
color: #d0d5dd;
}
.down .badge {
background: #bfbfbf;
}
}
}
}
`;
export default Styled;
src/routes/chat/index.tsx
+5 -5
View File
@@ -14,7 +14,7 @@ import GuestBlankPlaceholder from "./GuestBlankPlaceholder";
import GuestChannelChat from "./GuestChannelChat";
import GuestSessionList from "./GuestSessionList";
import IconList from '../../assets/icons/list.svg';
import IconClose from '../../assets/icons/close.svg';
// import IconClose from '../../assets/icons/close.svg';
function ChatPage() {
const [sessionListVisible, setSessionListVisible] = useState(false);
const [channelModalVisible, setChannelModalVisible] = useState(false);
@@ -52,16 +52,16 @@ function ChatPage() {
<ChannelModal closeModal={toggleChannelModalVisible} personal={true} />
)}
{usersModalVisible && <UsersModal closeModal={toggleUsersModalVisible} />}
<StyledWrapper className={`${isGuest ? "!pr-1 !pt-0" : ""} md:!pr-12`}>
<StyledWrapper className={`${isGuest ? "!pr-1 !pt-0" : ""} md:!pr-12 `}>
{sessionListVisible && <div onClick={toggleSessionList} className="z-30 fixed top-0 left-4 w-screen h-screen bg-black/50 transition-all backdrop-blur-sm"></div>}
<div className={clsx("left !fixed top-0 left-0 z-40 transition-all md:!relative md:translate-x-0 md:overflow-auto", sessionListVisible ? "translate-x-0" : "-translate-x-full")}>
<div className={clsx("left fixed md:relative top-0 left-0 z-40 transition-all md:overflow-auto bg-white dark:!bg-[#1F2A37]", sessionListVisible ? "max-md:translate-x-0" : "max-md:-translate-x-full")}>
<Server readonly={isGuest} />
{isGuest ? <GuestSessionList /> : <SessionList tempSession={tmpSession} />}
{sessionListVisible ? null : <button className="absolute top-2 -right-[52px] z-50 p-2 bg-none md:hidden" onClick={toggleSessionList}>
<IconList />
<IconList className="dark:stroke-gray-300" />
</button>}
</div>
<div className={`right ${placeholderVisible ? "placeholder" : ""}`}>
<div className={`right ${placeholderVisible ? "placeholder" : ""} bg-white dark:!bg-[#384250]`}>
{placeholderVisible && (isGuest ? <GuestBlankPlaceholder /> : <BlankPlaceholder />)}
{channel_id !== 0 &&
(isGuest ? (
src/routes/chat/styled.tsx
-5
View File
@@ -6,14 +6,10 @@ const StyledWrapper = styled.div`
padding-bottom: 10px;
padding-right: 4px;
> .left {
background-color: #fff;
position: relative;
/* display: flex; */
flex-direction: column;
min-width: 268px;
box-shadow: inset -1px 0px 0px rgba(0, 0, 0, 0.05);
height: 100%;
/* overflow: auto; */
border-radius: 16px 0 0 16px;
.list {
margin: 12px 8px;
@@ -149,7 +145,6 @@ const StyledWrapper = styled.div`
border-radius: 0 16px 16px 0;
width: 100%;
&.placeholder {
background-color: #fff;
height: 100%;
display: flex;
align-items: center;
src/routes/favs/index.tsx
+2 -2
View File
@@ -118,7 +118,7 @@ function FavsPage() {
removeFavorite(id);
};
return (
<div className="h-screen flex bg-white mt-2 mr-6 mb-2.5 overflow-auto">
<div className="h-screen flex bg-white mt-2 mr-6 mb-2.5 overflow-auto dark:bg-[#384250] rounded-2xl">
<div className="min-w-[268px] p-2 shadow-inner-[-1px_0px_0px_rgba(0,_0,_0,_0.1)]">
<ul className="flex flex-col gap-0.5">
{Filters.map(({ icon, title, filter: f }) => {
@@ -129,7 +129,7 @@ function FavsPage() {
onClick={handleFilter.bind(null, f as filter)}
>
{icon}
<span className="font-bold text-sm text-gray-600">{title}</span>
<span className="font-bold text-sm text-gray-600 dark:text-gray-100">{title}</span>
</li>
);
})}
src/routes/home/Menu.tsx
+3 -20
View File
@@ -2,36 +2,19 @@ import { FC } from "react";
import { NavLink, useLocation } from "react-router-dom";
import Tooltip from "../../common/component/Tooltip";
import settingIcon from "../../assets/icons/setting.svg?url";
import styled from "styled-components";
const StyledMenus = styled.ul`
display: flex;
flex-direction: column;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
padding: 8px 12px;
.menu {
cursor: pointer;
display: flex;
align-items: center;
padding: 10px;
gap: 10px;
}
`;
type Props = {};
const Menu: FC<Props> = () => {
const { pathname } = useLocation();
return (
<StyledMenus>
<li className="menu link_navs">
<ul className="flex flex-col absolute left-0 bottom-0 w-full px-3 py-2">
<li className="cursor-pointer flex items-center p-2.5 gap-2.5 link_navs">
<NavLink className="link" to={`/setting?f=${pathname}`}>
<Tooltip placement="right" tip="Settings">
<img src={settingIcon} alt="setting icon" className="w-6 h-6 max-w-[unset]" />
</Tooltip>
</NavLink>
</li>
</StyledMenus>
</ul>
);
};
export default Menu;
src/routes/home/index.tsx
+1 -1
View File
@@ -57,7 +57,7 @@ function HomePage() {
<>
<Manifest />
{!guest && <Notification />}
<StyledWrapper className={guest ? "guest" : ""}>
<StyledWrapper className={`dark:!bg-[#121926] ${guest ? "guest" : ""}`}>
{!guest && (
<div className={`col left`}>
{loginUid && <User uid={loginUid} />}
src/routes/invite/index.tsx
+20 -15
View File
@@ -1,11 +1,12 @@
import { useState, useEffect, FormEvent, ChangeEvent, FC } from "react";
import StyledWrapper from "./styled";
import { Navigate } from "react-router-dom";
import toast from "react-hot-toast";
import BASE_URL from "../../app/config";
import { useRegisterMutation } from "../../app/services/auth";
import { useCheckMagicTokenValidMutation } from "../../app/services/auth";
import { useAppSelector } from "../../app/store";
import StyledButton from "../../common/component/styled/Button";
import Input from "../../common/component/styled/Input";
interface AuthForm {
name: string;
@@ -117,15 +118,16 @@ const InvitePage: FC = () => {
if (!valid) return <>invite token expires or invalid</>;
return (
<StyledWrapper>
<div className="form animate__animated animate__fadeInDown animate__faster">
<div className="tips">
<img src={`${BASE_URL}/resource/organization/logo`} alt="logo" className="logo" />
<h2 className="title">Sign Up to VoceChat</h2>
<span className="desc">Please enter your details.</span>
<div className="flex-center h-screen dark:bg-[#384250]">
<div className="py-8 px-10 shadow-md rounded-xl">
<div className="flex-center flex-col pb-6">
<img src={`${BASE_URL}/resource/organization/logo`} alt="logo" className="w-14 h-14 mb-7 rounded-full" />
<h2 className="font-semibold text-2xl text-gray-800 dark:text-white mb-2">Sign Up to VoceChat</h2>
<span className="text-gray-400 dark:text-gray-100">Please enter your details.</span>
</div>
<form onSubmit={handleReg}>
<input
<form className="flex flex-col gap-5 min-w-[360px]" onSubmit={handleReg}>
<Input
className="large"
name="name"
value={name}
required
@@ -133,7 +135,8 @@ const InvitePage: FC = () => {
data-type="name"
onChange={handleInput}
/>
<input
<Input
className="large"
name="email"
value={email}
required
@@ -141,7 +144,8 @@ const InvitePage: FC = () => {
data-type="email"
onChange={handleInput}
/>
<input
<Input
className="large"
type="password"
value={password}
name="password"
@@ -150,7 +154,8 @@ const InvitePage: FC = () => {
onChange={handleInput}
placeholder="Enter your password"
/>
<input
<Input
className="large"
type="password"
value={secondPwd}
name="password"
@@ -160,12 +165,12 @@ const InvitePage: FC = () => {
onChange={handleSecondPwdInput}
placeholder="Enter your password again"
/>
<button disabled={isLoading || isSuccess} className="btn" type="submit">
<StyledButton disabled={isLoading || isSuccess} className="flex justify-center" type="submit">
Sign Up
</button>
</StyledButton>
</form>
</div>
</StyledWrapper>
</div>
);
};
src/routes/invite/styled.tsx
-74
View File
@@ -1,74 +0,0 @@
import styled from "styled-components";
const StyledWrapper = styled.div`
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
.form {
padding: 36px 40px 32px 40px;
box-shadow: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
border-radius: 12px;
.tips {
display: flex;
flex-direction: column;
align-items: center;
padding-bottom: 24px;
.logo {
width: 56px;
height: 56px;
margin-bottom: 28px;
}
.title {
font-weight: 600;
font-size: 24px;
line-height: 32px;
color: #101828;
margin-bottom: 8px;
}
}
.desc {
font-weight: normal;
font-size: 16px;
line-height: 24px;
color: #667085;
}
form {
display: flex;
flex-direction: column;
gap: 20px;
input {
width: 360px;
background: #ffffff;
border: 1px solid #d0d5dd;
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
border-radius: 8px;
padding: 10px 14px;
font-weight: normal;
font-size: 16px;
line-height: 24px;
color: #667085;
}
}
.btn {
display: inline-block;
text-align: center;
width: 100%;
font-weight: 500;
font-size: 16px;
line-height: 24px;
color: #ffffff;
padding: 10px;
background: #1fe1f9;
border: 1px solid #1fe1f9;
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
border-radius: 8px;
&.google {
color: #344054;
border-color: #d0d5dd;
background: none;
}
}
}
`;
export default StyledWrapper;
src/routes/login/MagicLinkLogin.tsx
+1 -1
View File
@@ -8,5 +8,5 @@ export default function MagicLinkLogin() {
// signIn();
};
return <Button className="w-full mb-4" onClick={handleGoogleLogin}>Sign in with Magic Link</Button>;
return <Button className="w-full" onClick={handleGoogleLogin}>Sign in with Magic Link</Button>;
}
src/routes/login/MetamaskLoginButton.tsx
+5 -6
View File
@@ -3,11 +3,10 @@ import { useState, useEffect, useRef } from "react";
import MetaMaskOnboarding from "@metamask/onboarding";
import { useLazyGetMetamaskNonceQuery } from "../../app/services/auth";
import metamaskSvg from "../../assets/icons/metamask.svg?url";
import { StyledSocialButton } from "./styled";
import Onboarding from "@metamask/onboarding";
import { LoginCredential } from "../../types/auth";
import { useTranslation } from "react-i18next";
import { AuthType } from "../../types/common";
import Button from "../../common/component/styled/Button";
// import toast from "react-hot-toast";
export default function MetamaskLoginButton({
@@ -21,7 +20,7 @@ export default function MetamaskLoginButton({
const [requesting, setRequesting] = useState(false);
const [accounts, setAccounts] = useState([]);
const [getNonce] = useLazyGetMetamaskNonceQuery();
const onboarding = useRef<Onboarding | undefined>();
const onboarding = useRef<MetaMaskOnboarding | undefined>();
useEffect(() => {
if (!onboarding.current) {
@@ -94,9 +93,9 @@ export default function MetamaskLoginButton({
}
};
return (
<StyledSocialButton disabled={requesting} onClick={handleMetamaskLogin}>
<img className="icon" src={metamaskSvg} alt="meta mask icon" />
<Button className="flex ghost flex-center gap-2 !text-gray-600 !border-slate-200 dark:!text-gray-100" disabled={requesting} onClick={handleMetamaskLogin}>
<img className="w-6 h-6" src={metamaskSvg} alt="meta mask icon" />
{type == "login" ? t("login.metamask") : t("reg.metamask")}
</StyledSocialButton>
</Button>
);
}
src/routes/login/OidcLoginButton.tsx
+9 -28
View File
@@ -1,68 +1,49 @@
/* eslint-disable no-undef */
import { FC, useState } from "react";
import styled from "styled-components";
import StyledModal from "../../common/component/styled/Modal";
import Modal from "../../common/component/Modal";
import { StyledSocialButton } from "./styled";
import StyledButton from "../../common/component/styled/Button";
import OidcLoginEntry from "./OidcLoginEntry";
import { OIDCConfig } from "../../types/auth";
import { useTranslation } from "react-i18next";
import { AuthType } from "../../types/common";
const StyledOidcLoginModal = styled(StyledModal)`
text-align: center;
padding: 32px 32px 16px;
> *:first-child {
margin-bottom: 32px;
}
> .button {
> .icon {
width: 24px;
height: 24px;
}
&.buttonCancel {
color: #8f8f8f;
}
}
`;
import Button from "../../common/component/styled/Button";
interface IProps {
issuers?: OIDCConfig[];
type?: AuthType
}
const OidcLoginButton: FC<IProps> = ({ issuers, type = "login" }) => {
const { t } = useTranslation("auth");
const { t: ct } = useTranslation();
const [modal, setModal] = useState(false);
if (!issuers) return null;
return (
<>
<StyledSocialButton
<Button
className="flex ghost flex-center gap-2 !text-gray-600 !border-slate-200 dark:!text-gray-100"
onClick={() => {
setModal(true);
}}
>
{type == "login" ? t("login.oidc") : t("reg.oidc")}
</StyledSocialButton>
</Button>
{modal && (
<Modal id="modal-modal">
<StyledOidcLoginModal title="Login with OIDC">
<StyledModal className="text-center " title="Login with OIDC">
{issuers
.filter((issuer) => issuer.enable)
.map((issuer, index) => (
<OidcLoginEntry issuer={issuer} key={index} />
))}
<StyledButton
className="border_less ghost buttonCancel"
className="border_less ghost text-gray-500 dark:text-white"
onClick={() => {
setModal(false);
}}
>
Close
{ct("action.close")}
</StyledButton>
</StyledOidcLoginModal>
</StyledModal>
</Modal>
)}
</>
src/routes/login/OidcLoginEntry.tsx
+4 -4
View File
@@ -1,7 +1,7 @@
import { useEffect, FC } from "react";
import { useGetOpenidMutation } from "../../app/services/auth";
import Button from "../../common/component/styled/Button";
import { OIDCConfig } from "../../types/auth";
import { StyledSocialButton } from "./styled";
const OidcLoginEntry: FC<{ issuer: OIDCConfig }> = ({ issuer }) => {
const [getOpenId, { data, isLoading, isSuccess }] = useGetOpenidMutation();
@@ -21,10 +21,10 @@ const OidcLoginEntry: FC<{ issuer: OIDCConfig }> = ({ issuer }) => {
}, [data, isSuccess]);
return (
<StyledSocialButton disabled={isLoading || isSuccess} onClick={handleSolidLogin}>
{!!issuer.favicon && <img src={issuer.favicon} className="icon" alt="icon" />}
<Button className="flex text-gray-800 dark:text-gray-100 flex-center gap-3" disabled={isLoading || isSuccess} onClick={handleSolidLogin}>
{!!issuer.favicon && <img src={issuer.favicon} className="w-6 h-6" alt="icon" />}
{isLoading ? `Loading...` : `Login with ${issuer.domain}`}
</StyledSocialButton>
</Button>
);
};
export default OidcLoginEntry;
src/routes/login/SignUpLink.tsx
+1 -1
View File
@@ -17,7 +17,7 @@ export default function MagicLinkLogin({ smtp = false }: Props) {
};
return (
<div className="flex gap-1 mt-7 text-sm text-[#667085] justify-center">
<div className="flex gap-1 mt-7 text-sm text-[#667085] dark:text-gray-100 justify-center">
<span>{t("login.no_account")}</span>
<a className="text-[#22d3ee] cursor-pointer" onClick={handleSignUp}>{t("sign_up")}</a>
</div>
src/routes/login/index.tsx
+12 -11
View File
@@ -3,7 +3,6 @@ import { useState, useEffect, FormEvent, ChangeEvent } from "react";
import toast from "react-hot-toast";
import BASE_URL from "../../app/config";
// import web3 from "web3";
import StyledWrapper from "./styled";
import Input from "../../common/component/styled/Input";
import Button from "../../common/component/styled/Button";
@@ -15,6 +14,7 @@ import useGoogleAuthConfig from "../../common/hook/useGoogleAuthConfig";
import { FetchBaseQueryError } from "@reduxjs/toolkit/dist/query";
import { useTranslation } from "react-i18next";
import SocialLoginButtons from "./SocialLoginButtons";
import Divider from "../../common/component/Divider";
export default function LoginPage() {
const { t } = useTranslation("auth");
@@ -122,15 +122,16 @@ export default function LoginPage() {
const hasDivider =
enableMagicLink || googleLogin || enableMetamaskLogin || oidc.length > 0 || enableGithubLogin;
return (
<StyledWrapper>
<div className="form">
<div className="tips">
<img src={`${BASE_URL}/resource/organization/logo`} alt="logo" className="logo" />
<h2 className="title">{t("login.title")}</h2>
<span className="desc">{t("login.desc")}</span>
<div className="flex-center h-screen dark:bg-[#384250]">
<div className="py-8 px-10 shadow-md rounded-xl">
<div className="flex-center flex-col pb-6">
<img src={`${BASE_URL}/resource/organization/logo`} alt="logo" className="w-14 h-14 mb-7 rounded-full" />
<h2 className="font-semibold text-2xl text-gray-800 dark:text-white mb-2">{t("login.title")}</h2>
<span className="text-gray-400 dark:text-gray-100">{t("login.desc")}</span>
</div>
<form onSubmit={handleLogin}>
<form className="flex flex-col gap-5 min-w-[360px]" onSubmit={handleLogin}>
<Input
className="large"
name="email"
@@ -155,8 +156,8 @@ export default function LoginPage() {
{isLoading ? "Signing" : t("sign_in")}
</Button>
</form>
{hasDivider && <hr className="or" />}
<div className="btns">
{hasDivider && <Divider content="OR" />}
<div className="flex flex-col gap-4">
{enableMagicLink && <MagicLinkLogin />}
@@ -164,6 +165,6 @@ export default function LoginPage() {
</div>
{whoCanSignUp === "EveryOne" && <SignUpLink smtp={enableSMTP} />}
</div>
</StyledWrapper>
</div>
);
}
src/routes/login/styled.tsx
-88
View File
@@ -1,88 +0,0 @@
import styled from "styled-components";
import Button from "../../common/component/styled/Button";
export const StyledSocialButton = styled(Button)`
width: 100%;
/* margin-bottom: 16px; */
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
color: #344054;
border: 1px solid #d0d5dd;
background: none !important;
.icon {
width: 24px;
height: 24px;
}
`;
const StyledWrapper = styled.div`
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
.form {
padding: 36px 40px 32px 40px;
box-shadow: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
border-radius: 12px;
.tips {
display: flex;
flex-direction: column;
align-items: center;
padding-bottom: 24px;
.logo {
width: 56px;
height: 56px;
margin-bottom: 28px;
border-radius: 50%;
}
.title {
font-weight: 600;
font-size: 24px;
line-height: 32px;
color: #101828;
margin-bottom: 8px;
}
}
.desc {
font-weight: normal;
font-size: 16px;
line-height: 24px;
color: #667085;
}
form {
display: flex;
flex-direction: column;
gap: 20px;
width: 360px;
}
.or {
border: none;
position: relative;
height: 1px;
background-color: #e4e7ec;
margin: 26px 0;
overflow: visible;
&:after {
padding: 4px;
background-color: #fff;
content: "OR";
position: absolute;
left: 50%;
top: 50%;
transform: translate3d(-50%, -50%, 0);
font-size: 14px;
line-height: 20px;
color: #667085;
}
}
>.btns{
display: flex;
flex-direction: column;
gap: 15px;
}
}
`;
export default StyledWrapper;
src/routes/onboarding/steps/who-can-sign-up.tsx
+2 -14
View File
@@ -1,6 +1,5 @@
import { useEffect, useState } from "react";
import toast from "react-hot-toast";
import styled from "styled-components";
import StyledRadio from "../../../common/component/styled/Radio";
import StyledButton from "../../../common/component/styled/Button";
import { useGetLoginConfigQuery, useUpdateLoginConfigMutation } from "../../../app/services/server";
@@ -40,20 +39,9 @@ export default function SignUpSetting() {
if (isSuccess) nextStep();
}, [isSuccess]);
const StyledWrapper = styled.div`
/* > form {
width: 512px;
}
> .button {
width: 124px;
height: 44px;
margin-top: 24px;
} */
`;
return (
<StyledWrapper className="h-full flex-center flex-col text-center w-[512px] m-auto">
<div className="h-full flex-center flex-col text-center w-[512px] m-auto">
<span className="font-bold text-2xl mb-2">{t("onboarding.invite_title")}</span>
<span className="text-sm mb-6">{t("onboarding.invite_desc")}</span>
{value && <StyledRadio
@@ -82,6 +70,6 @@ export default function SignUpSetting() {
>
{t("onboarding.confirm")}
</StyledButton>
</StyledWrapper>
</div>
);
}
src/routes/reg/EmailNextStepTip.tsx
+3 -3
View File
@@ -2,9 +2,9 @@
export default function EmailNextTip() {
return (
<div className="flex flex-col items-center">
<div className="font-bold text-3xl text-gray-800 mt-3">Magic link Sent</div>
<p className="text-center text-gray-400 mb-6">Login to your email client, and continue next step</p>
<p className="text-center text-gray-400">You can close this window now.</p>
<div className="font-bold text-3xl text-gray-800 dark:text-white mt-3">Magic link Sent</div>
<p className="text-center text-gray-400 dark:text-gray-300 mb-6">Login to your email client, and continue next step</p>
<p className="text-center text-gray-400 dark:text-gray-300">You can close this window now.</p>
</div>
);
}
src/routes/reg/ExpiredTip.tsx
+1 -1
View File
@@ -2,7 +2,7 @@
export default function ExpiredTip() {
return (
<div className="flex flex-col items-center">
<div className="font-bold text-3xl text-gray-800 mt-3">Magic link expired</div>
<div className="font-bold text-3xl text-gray-800 dark:text-white mt-3">Magic link expired</div>
<p className="text-center text-gray-400 mb-6">Go back to your original VoceChat tab and request a new magic link.</p>
<p className="text-center text-gray-400">You can close this window now.</p>
</div>
src/routes/reg/RegWithUsername.tsx
+4 -4
View File
@@ -98,14 +98,14 @@ const RegWithUsername: FC = () => {
const isSuccess = loginSuccess || regSuccess;
return (
<>
<div className="tips">
<h2 className="title">What’s your name</h2>
<span className="desc">
<div className="flex-center flex-col pb-6">
<h2 className="font-semibold text-2xl text-gray-800 dark:text-white mb-2">What’s your name</h2>
<span className="text-gray-400 dark:text-gray-100">
Enter a name or handle so people know how you’d like to be called. Your name will only be
visible to others in spaces you joined.
</span>
</div>
<form onSubmit={handleAuth}>
<form className="flex flex-col gap-5 min-w-[360px]" onSubmit={handleAuth}>
<Input
className="large"
name="username"
src/routes/reg/Register.tsx
+7 -6
View File
@@ -6,6 +6,7 @@ import Button from "../../common/component/styled/Button";
import { useLazyCheckEmailQuery, useSendRegMagicLinkMutation } from "../../app/services/auth";
import EmailNextTip from "./EmailNextStepTip";
import SignInLink from "./SignInLink";
import Divider from "../../common/component/Divider";
import { useTranslation } from "react-i18next";
import { useGetLoginConfigQuery } from "../../app/services/server";
@@ -101,13 +102,13 @@ export default function Reg() {
return (
<>
<div className="tips">
<img src={`${BASE_URL}/resource/organization/logo`} alt="logo" className="logo" />
<h2 className="title">{t("reg.title")}</h2>
<span className="desc">{t("reg.desc")}</span>
<div className="flex-center flex-col pb-6">
<img src={`${BASE_URL}/resource/organization/logo`} alt="logo" className="w-14 h-14 mb-7 rounded-full" />
<h2 className="font-semibold text-2xl text-gray-800 dark:text-white mb-2">{t("reg.title")}</h2>
<span className="text-gray-400 dark:text-gray-100">{t("reg.desc")}</span>
</div>
<form onSubmit={handleReg} autoSave={"false"} autoComplete={"true"}>
<form className="flex flex-col gap-5 min-w-[360px]" onSubmit={handleReg} autoSave={"false"} autoComplete={"true"}>
<Input
className="large"
name="email"
@@ -145,7 +146,7 @@ export default function Reg() {
{isLoading ? t('signing_up') : t("sign_up")}
</Button>
</form>
<hr className="or" />
<Divider content="OR" />
<div className="flex flex-col gap-3 py-3">
<SocialLoginButtons type="register" />
</div>
src/routes/reg/SignInLink.tsx
+1 -1
View File
@@ -17,7 +17,7 @@ export default function SignInLink({ token }: { token?: string }) {
}, [token]);
return (
<div className="flex gap-1 mt-7 text-sm text-[#667085] justify-center">
<div className="flex gap-1 mt-7 text-sm text-[#667085] dark:text-gray-100 justify-center">
<span>{t("reg.have_account")}</span>
<a onClick={handleSignIn} className="text-[#22d3ee] cursor-pointer">{t("sign_in")}</a>
</div>
src/routes/reg/index.tsx
+3 -4
View File
@@ -1,12 +1,11 @@
import { Outlet } from "react-router-dom";
import StyledWrapper from "./styled";
export default function RegContainer() {
return (
<StyledWrapper>
<div className="form">
<div className="flex-center h-screen dark:bg-[#384250]">
<div className="py-8 px-10 shadow-md rounded-xl">
<Outlet />
</div>
</StyledWrapper>
</div>
);
}
src/routes/reg/styled.tsx
-71
View File
@@ -1,71 +0,0 @@
import styled from "styled-components";
const StyledWrapper = styled.div`
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
.form {
max-width: 440px;
padding: 36px 40px 32px 40px;
box-shadow: 0 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
border-radius: 12px;
.tips {
display: flex;
flex-direction: column;
align-items: center;
padding-bottom: 24px;
.logo {
width: 56px;
height: 56px;
margin-bottom: 28px;
border-radius: 50%;
}
.title {
font-weight: 600;
font-size: 24px;
line-height: 32px;
color: #101828;
margin-bottom: 8px;
&.error {
color: red;
}
}
.desc {
text-align: center;
font-weight: normal;
font-size: 16px;
line-height: 24px;
color: #667085;
}
}
form {
display: flex;
flex-direction: column;
gap: 20px;
width: 360px;
}
}
.or {
border: none;
position: relative;
height: 1px;
background-color: #e4e7ec;
margin: 26px 0;
overflow: visible;
&:after {
padding: 4px;
background-color: #fff;
content: "OR";
position: absolute;
left: 50%;
top: 50%;
transform: translate3d(-50%, -50%, 0);
font-size: 14px;
line-height: 20px;
color: #667085;
}
}
`;
export default StyledWrapper;
src/routes/resources/Filter/Channel.tsx
+10 -58
View File
@@ -1,57 +1,9 @@
import { FC } from "react";
import styled from "styled-components";
import CheckSign from "../../../assets/icons/check.sign.svg";
import ChannelIcon from "../../../common/component/ChannelIcon";
import Search from "../Search";
import useFilteredChannels from "../../../common/hook/useFilteredChannels";
const Styled = styled.div`
padding: 0 4px 4px 4px;
background: #ffffff;
max-height: 400px;
overflow: auto;
box-shadow: 0 24px 48px -12px rgba(16, 24, 40, 0.18);
border-radius: 8px;
display: flex;
flex-direction: column;
align-items: flex-start;
position: relative;
> .search {
z-index: 1;
background-color: #fff;
position: sticky;
top: 0;
input {
z-index: 2;
}
}
> .list {
width: 100%;
display: flex;
flex-direction: column;
gap: 16px;
padding: 8px;
.channel {
position: relative;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
.name {
color: #616161;
font-weight: 600;
font-size: 14px;
line-height: 20px;
}
.check {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
}
}
`;
type Props = {
select: number;
updateFilter: (param: { channel?: number }) => void;
@@ -63,27 +15,27 @@ const Channel: FC<Props> = ({ select = 0, updateFilter }) => {
};
return (
<Styled>
<div className="search">
<div className="rounded-lg p-1 pt-0 bg-white dark:bg-gray-800 overflow-auto max-h-[400px] flex flex-col items-start relative drop-shadow">
<div className=" bg-white dark:bg-gray-800 sticky top-0 z-10">
<Search embed={true} value={input} updateSearchValue={updateInput} />
</div>
<ul className="list">
<li className="channel" onClick={handleClick.bind(null, undefined)}>
<ul className="w-full flex flex-col gap-4 p-2">
<li className="relative cursor-pointer flex items-center gap-2" onClick={handleClick.bind(null, undefined)}>
<ChannelIcon />
<span className="name">Any Channel</span>
{!select && <CheckSign className="check" />}
<span className="text-gray-500 dark:text-gray-100 font-semibold text-sm">Any Channel</span>
{!select && <CheckSign className="absolute right-0 top-1/2 -translate-y-1/2" />}
</li>
{channels.map(({ gid, is_public, name }) => {
return (
<li key={gid} className="channel" onClick={handleClick.bind(null, gid)}>
<li key={gid} className="relative cursor-pointer flex items-center gap-2" onClick={handleClick.bind(null, gid)}>
<ChannelIcon personal={!is_public} />
<span className="name">{name}</span>
{select == gid && <CheckSign className="check" />}
<span className="text-gray-500 dark:text-gray-100 font-semibold text-sm">{name}</span>
{select == gid && <CheckSign className="absolute right-0 top-1/2 -translate-y-1/2" />}
</li>
);
})}
</ul>
</Styled>
</div>
);
};
export default Channel;
src/routes/resources/Filter/Date.tsx
+7 -43
View File
@@ -1,42 +1,6 @@
import { FC } from "react";
import styled from "styled-components";
import CheckSign from "../../../assets/icons/check.sign.svg";
const Styled = styled.div`
padding: 12px;
background: #ffffff;
min-width: 200px;
overflow: auto;
box-shadow: 0px 24px 48px -12px rgba(16, 24, 40, 0.18);
border-radius: 8px;
display: flex;
flex-direction: column;
align-items: flex-start;
position: relative;
> .list {
width: 100%;
display: flex;
flex-direction: column;
gap: 16px;
.date {
position: relative;
cursor: pointer;
display: flex;
align-items: center;
gap: 16px;
color: #616161;
font-weight: 600;
font-size: 14px;
line-height: 20px;
.check {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
}
}
`;
export const Dates = {
today: {
@@ -66,22 +30,22 @@ const DateFilter: FC<Props> = ({ select = "", updateFilter }) => {
};
return (
<Styled>
<ul className="list">
<li className="date" onClick={handleClick.bind(null, undefined)}>
<div className="p-3 bg-white min-w-[200px] overflow-auto rounded-lg flex flex-col items-start relative drop-shadow">
<ul className="w-full flex flex-col gap-4">
<li className="relative cursor-pointer flex items-center gap-4 text-gray-500 font-semibold text-sm" onClick={handleClick.bind(null, undefined)}>
Any Time
{!select && <CheckSign className="check" />}
{!select && <CheckSign className="absolute right-0 top-1/2 -translate-y-1/2" />}
</li>
{Object.entries(Dates).map(([_key, { title }]) => {
return (
<li key={title} className="date" onClick={handleClick.bind(null, _key)}>
<li key={title} className="relative cursor-pointer flex items-center gap-4 text-gray-500 font-semibold text-sm" onClick={handleClick.bind(null, _key)}>
{title}
{select == _key && <CheckSign className="check" />}
{select == _key && <CheckSign className="absolute right-0 -top-1/2 -translate-y-1/2" />}
</li>
);
})}
</ul>
</Styled>
</div>
);
};
export default DateFilter;
src/routes/resources/Filter/From.tsx
+8 -52
View File
@@ -1,53 +1,9 @@
import { FC } from "react";
import styled from "styled-components";
import Search from "../Search";
import CheckSign from "../../../assets/icons/check.sign.svg";
import User from "../../../common/component/User";
import useFilteredUsers from "../../../common/hook/useFilteredUsers";
const Styled = styled.div`
padding: 0 4px 4px 4px;
background: #ffffff;
max-height: 300px;
overflow: auto;
box-shadow: 0 24px 48px -12px rgba(16, 24, 40, 0.18);
border-radius: 8px;
display: flex;
flex-direction: column;
align-items: flex-start;
position: relative;
> .search {
z-index: 1;
background-color: #fff;
position: sticky;
top: 0;
input {
z-index: 2;
}
}
> .list {
width: 100%;
display: flex;
flex-direction: column;
.user {
position: relative;
cursor: pointer;
&.none {
padding: 10px;
font-weight: 600;
font-size: 14px;
line-height: 20px;
color: #616161;
}
.check {
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
}
}
}
`;
type Props = {
select: number;
updateFilter: (param: { from?: number }) => void;
@@ -59,25 +15,25 @@ const From: FC<Props> = ({ select = "", updateFilter }) => {
};
return (
<Styled>
<div className="search">
<div className="rounded-lg p-1 pt-0 bg-white dark:bg-gray-800 overflow-auto max-h-[300px] flex flex-col items-start relative drop-shadow">
<div className="bg-white sticky top-0 z-10">
<Search embed={true} value={input} updateSearchValue={updateInput} />
</div>
<ul className="list">
<li className="user none" onClick={handleClick.bind(null, undefined)}>
<ul className="w-full flex flex-col">
<li className="relative cursor-pointer p-2.5 font-semibold text-sm text-gray-500" onClick={handleClick.bind(null, undefined)}>
Anyone
{!select && <CheckSign className="check" />}
{!select && <CheckSign className="absolute right-1.5 top-1/2 -translate-y-1/2" />}
</li>
{users.map(({ uid }) => {
return (
<li key={uid} className="user" onClick={handleClick.bind(null, uid)}>
<li key={uid} className="relative cursor-pointer" onClick={handleClick.bind(null, uid)}>
<User uid={uid} interactive={true} />
{select == uid && <CheckSign className="check" />}
{select == uid && <CheckSign className="absolute right-1.5 top-1/2 -translate-y-1/2" />}
</li>
);
})}
</ul>
</Styled>
</div>
);
};
export default From;
src/routes/resources/Filter/Type.tsx
+4 -4
View File
@@ -48,17 +48,17 @@ const Type: FC<Props> = ({ select = "", updateFilter }) => {
};
return (
<div className="p-3 bg-white min-w-[100px] overflow-auto shadow-md rounded-lg flex flex-col items-start relative">
<div className="p-3 bg-white min-w-[180px] overflow-auto shadow-md rounded-lg flex flex-col items-start relative">
<ul className="w-full flex flex-col gap-4">
<li className="flex justify-between" onClick={handleClick.bind(null, undefined)}>
<li className="relative cursor-pointer flex items-center gap-4 text-gray-500 font-semibold text-sm" onClick={handleClick.bind(null, undefined)}>
Any Type
{!select && <CheckSign className="check" />}
{!select && <CheckSign className="absolute right-0 top-1/2 -translate-y-1/2" />}
</li>
{Object.entries(FileTypes).map(([type, { title, icon }]) => {
return (
<li key={title} className="relative cursor-pointer flex items-center gap-2 text-sm text-gray-500 font-semibold" onClick={handleClick.bind(null, type)}>
{icon} {title}
{select == type && <CheckSign className="absolute right-0 left-1/2 -translate-y-1/2" />}
{select == type && <CheckSign className="absolute right-0 top-1/2 -translate-y-1/2" />}
</li>
);
})}
src/routes/resources/Filter/index.tsx
+12 -41
View File
@@ -1,5 +1,4 @@
import { useState } from "react";
import styled from "styled-components";
import Tippy from "@tippyjs/react";
import Avatar from "../../../common/component/Avatar";
import FilterDate, { Dates } from "./Date";
@@ -9,41 +8,12 @@ import FilterType, { FileTypes } from "./Type";
import ArrowDown from "../../../assets/icons/arrow.down.svg";
import { useAppSelector } from "../../../app/store";
import { useTranslation } from "react-i18next";
import clsx from "clsx";
const Styled = styled.div`
/* padding: 20px 0; */
display: flex;
align-items: center;
gap: 8px;
.filter {
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
border: 1px solid #d0d5dd;
box-sizing: border-box;
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
border-radius: var(--br);
padding: 7px 12px;
font-weight: 500;
font-size: 12px;
line-height: 18px;
&.selected {
border: none;
color: #fff;
background-color: #22ccee;
.arrow path {
stroke: #fff;
}
}
.avatar {
width: 16px;
height: 16px;
border-radius: 50%;
}
}
`;
const getClass = (selected: boolean) => {
return clsx(`cursor-pointer flex items-center gap-2 border border-solid box-border shadow rounded-lg py-2 px-3 text-xs`, selected && 'text-white bg-primary-400');
};
export default function Filter({ filter, updateFilter }) {
const { t } = useTranslation("file");
const [filtersVisible, setFiltersVisible] = useState({
@@ -79,8 +49,9 @@ export default function Filter({ filter, updateFilter }) {
from: fromVisible
} = filtersVisible;
return (
<Styled>
<div className="flex items-center gap-2">
<Tippy
interactive
onClickOutside={toggleFilterVisible.bind(null, { from: false })}
@@ -89,14 +60,14 @@ export default function Filter({ filter, updateFilter }) {
content={<FilterFrom select={filter.from} updateFilter={handleUpdateFilter} />}
>
<div
className={`filter ${from && "selected"}`}
className={getClass(from)}
onClick={toggleFilterVisible.bind(null, { from: true })}
>
{from && (
<Avatar
width={16}
height={16}
className="avatar"
className="w-4 h-4 rounded-full"
name={userMap[from].name}
src={userMap[from].avatar}
/>
@@ -115,7 +86,7 @@ export default function Filter({ filter, updateFilter }) {
content={<FilterChannel select={filter.channel} updateFilter={handleUpdateFilter} />}
>
<div
className={`filter ${channel && "selected"}`}
className={getClass(channel)}
onClick={toggleFilterVisible.bind(null, { channel: true })}
>
<span className="txt">{channel ? `In ${channelMap[channel].name}` : t("channel")}</span>
@@ -130,7 +101,7 @@ export default function Filter({ filter, updateFilter }) {
content={<FilterType select={filter.type} updateFilter={handleUpdateFilter} />}
>
<div
className={`filter ${type && "selected"}`}
className={getClass(type)}
onClick={toggleFilterVisible.bind(null, { type: true })}
>
<span className="txt">{type ? FileTypes[type].title : t("type")}</span>
@@ -145,13 +116,13 @@ export default function Filter({ filter, updateFilter }) {
content={<FilterDate select={filter.date} updateFilter={handleUpdateFilter} />}
>
<div
className={`filter ${date && "selected"}`}
className={getClass(date)}
onClick={toggleFilterVisible.bind(null, { date: true })}
>
<span className="txt">{date ? Dates[date].title : t("date")}</span>
<ArrowDown className="arrow" />
</div>
</Tippy>
</Styled>
</div>
);
}
src/routes/resources/View.tsx
+13 -38
View File
@@ -1,55 +1,30 @@
import { MouseEvent } from "react";
import styled from "styled-components";
import { useDispatch } from "react-redux";
import { updateFileListView } from "../../app/slices/ui";
import IconList from "../../assets/icons/file.list.svg";
import IconGrid from "../../assets/icons/file.grid.svg";
import clsx from "clsx";
const Styled = styled.ul`
display: flex;
border: 1px solid #d0d5dd;
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
border-radius: 8px;
box-sizing: border-box;
.view {
cursor: pointer;
padding: 8px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}
&.item .item,
&.grid .grid {
border: 1px solid #52edff;
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
border-radius: 8px;
svg {
transition: all 0.2s ease;
path {
fill: #52edff;
}
}
}
`;
export default function View({ view = "item" }) {
const getClass = (selected: boolean) => clsx(`cursor-pointer p-2 box-border flex-center`, selected && `border border-solid border-primary-400 shadow rounded-lg`);
type Props = {
view?: "item" | "grid"
}
export default function View({ view = "item" }: Props) {
const dispatch = useDispatch();
const handleChangeView = (evt: MouseEvent<HTMLLIElement>) => {
const { view: clickView } = evt.currentTarget.dataset;
if (clickView == view) return;
dispatch(updateFileListView(view == "item" ? "grid" : "item"));
};
const isGrid = view == "grid";
return (
<Styled className={view}>
<li className="view item" data-view={"item"} onClick={handleChangeView}>
<IconList />
<ul className={`flex border border-solid shadow rounded-lg box-border`}>
<li className={getClass(!isGrid)} data-view={"item"} onClick={handleChangeView}>
<IconList className={`${!isGrid ? "fill-primary-400" : ""} dark:fill-white`} />
</li>
<li className="view grid" data-view={"grid"} onClick={handleChangeView}>
<IconGrid />
<li className={getClass(isGrid)} data-view={"grid"} onClick={handleChangeView}>
<IconGrid className={`${isGrid ? "fill-primary-400" : ""} dark:fill-white`} />
</li>
</Styled>
</ul>
);
}
src/routes/resources/index.tsx
+1 -1
View File
@@ -82,7 +82,7 @@ function ResourceManagement({ fileMessages }) {
}, [view, filter]);
return (
<div className="h-screen overflow-y-scroll flex flex-col items-start my-2 mr-6 rounded-2xl bg-white">
<div className="h-screen overflow-y-scroll flex flex-col items-start my-2 mr-6 rounded-2xl bg-white dark:bg-[#384250]">
<Search value={filter.name} updateSearchValue={handleUpdateSearch} />
<div className="divider"></div>
<div className="flex justify-between w-full px-4 py-5">
src/routes/resources/styled.tsx
-40
View File
@@ -1,40 +0,0 @@
import styled from "styled-components";
const Styled = styled.div`
height: 100vh;
overflow-y: scroll;
display: flex;
flex-direction: column;
align-items: flex-start;
background-color: #fff;
margin: 8px 24px 10px 0;
border-radius: 16px;
.opts {
padding: 20px 16px;
display: flex;
justify-content: space-between;
width: 100%;
}
> .list {
padding: 0 16px;
height: 100%;
overflow-y: scroll;
width: 100%;
display: flex;
&.item {
gap: 8px;
flex-direction: column;
}
&.grid {
flex-direction: row;
flex-wrap: wrap;
> .file_box {
flex-direction: column;
/* margin-right: 8px; */
margin-bottom: 8px;
}
}
}
`;
export default Styled;
src/routes/setting/APIConfig.tsx
+1 -1
View File
@@ -40,7 +40,7 @@ export default function APIConfig() {
data-checked={thirdParty}
/>
<div className="w-full flex flex-col items-start gap-2">
<label htmlFor="secret" className="text-sm text-gray-500"> {t("third_app.key")}:</label>
<label htmlFor="secret" className="text-sm text-gray-500 dark:text-gray-100"> {t("third_app.key")}:</label>
<Input disabled={!thirdParty} type="password" id="secret" value={updatedSecret || data} />
</div>
<Tippy
src/routes/setting/APIDocument.tsx
+7 -7
View File
@@ -14,11 +14,11 @@ const APIDocument = () => {
};
return (
<section className="flex flex-col justify-start items-start gap-4">
<div className="text-gray-500 ">
<div className="text-gray-500 dark:text-gray-100">
{t("api_doc.desc")}
</div>
<div className='flex flex-col gap-2'>
<h2 className='text-gray-700 text-xl font-bold'>
<h2 className='text-gray-700 dark:text-white text-xl font-bold'>
{t("api_doc.access")}
</h2>
<a href={APIUrl} target="_blank" rel="noopener noreferrer" className='underline text-primary-600'>
@@ -26,12 +26,12 @@ const APIDocument = () => {
</a>
</div>
<div className='flex flex-col gap-2'>
<h2 className='text-gray-700 text-xl font-bold'>
<h2 className='text-gray-700 dark:text-white text-xl font-bold'>
{t("api_doc.use_method")}
</h2>
<div className=" flex flex-col gap-6">
<div className="flex flex-col gap-2">
<h3 className='text-gray-700 text-lg'>
<h3 className='text-gray-700 dark:text-white text-lg'>
👉 {t("api_doc.step_1")}
</h3>
{/* <div className="flex flex-col gap-1"> */}
@@ -39,8 +39,8 @@ const APIDocument = () => {
{/* </div> */}
</div>
<div className="flex flex-col gap-2">
<h3 className='text-gray-700 text-lg flex items-center gap-2'>
👉 {t("api_doc.step_2")} <span className='text-gray-500 text-sm'>
<h3 className='text-gray-700 dark:text-white text-lg flex items-center gap-2'>
👉 {t("api_doc.step_2")} <span className='text-gray-500 dark:text-white text-sm'>
({t("api_doc.step_2_desc")})
</span>
</h3>
@@ -53,7 +53,7 @@ const APIDocument = () => {
<img className='border border-solid rounded-md border-gray-300 shadow-lg w-[85%]' src="https://s.voce.chat/web_client/assets/img/api.doc.step2.jpg" alt="step 2" />
</div>
<div className="flex flex-col gap-2">
<h3 className='text-gray-700 text-lg flex items-center gap-2'>
<h3 className='text-gray-700 dark:text-white text-lg flex items-center gap-2'>
👉 {t("api_doc.last")}
</h3>
<img className='border border-solid rounded-md border-gray-300 shadow-lg w-[85%]' src="https://s.voce.chat/web_client/assets/img/api.doc.step3.png" alt="step 3" />
src/routes/setting/BotConfig/BotAPIKeys.tsx
+3 -3
View File
@@ -21,7 +21,7 @@ type Props = {
// </table>;
// };
type DeleteAPIKeyProps = { uid: number, kid: number }
const tdClass = "p-1 whitespace-nowrap text-xs text-gray-500 align-middle px-1";
const tdClass = "p-1 whitespace-nowrap text-xs text-gray-500 dark:text-gray-200 align-middle px-1";
const BotAPIKeys = ({ uid }: Props) => {
const { t } = useTranslation("setting", { keyPrefix: "bot" });
const [currentUid, setCurrentUid] = useState<number | undefined>();
@@ -39,11 +39,11 @@ const BotAPIKeys = ({ uid }: Props) => {
const colWidths = ["w-20", "w-[166px]", "w-36", "w-15", "w-10"];
return (
<div className='flex flex-col gap-2 items-start'>
<div className='border-t border-solid border-b border-gray-100 py-2 w-full'>
<div className='border-t border-solid border-b border-gray-100 dark:border-gray-500 py-2 w-full'>
<table className="min-w-full table-fixed font-mono">
<thead >
<tr >
{[t("col_key_name"), t('col_key_value'), t('col_key_create_time'), t('col_key_last_used'), ""].map((title, idx) => <th key={title} scope="col" className={clsx(`text-xs text-gray-900 px-1 text-left pb-2`, colWidths[idx])}>
{[t("col_key_name"), t('col_key_value'), t('col_key_create_time'), t('col_key_last_used'), ""].map((title, idx) => <th key={title} scope="col" className={clsx(`text-xs text-gray-900 dark:text-gray-50 px-1 text-left pb-2`, colWidths[idx])}>
{title}
</th>)}
</tr>
src/routes/setting/BotConfig/CreateModal.tsx
+3 -3
View File
@@ -77,12 +77,12 @@ const CreateModal = ({ closeModal }: Props) => {
</>
}
>
<form ref={formRef} className="w-full flex flex-col gap-2 items-center" action="/">
<div className="flex flex-col gap-1 w-full">
<form ref={formRef} className="w-full flex flex-col gap-2" action="/">
<div className="flex flex-col items-start gap-1 w-full">
<label htmlFor={"name"} className="text-sm text-[#6b7280]">Name</label>
<Input name={"name"} required placeholder='Please input bot name'></Input>
</div>
<div className="flex flex-col gap-1 w-full">
<div className="flex flex-col items-start gap-1 w-full">
<label htmlFor={"webhook_url"} className="text-sm text-[#6b7280]">Webhook URL (Optional)</label>
<Input name={"webhook_url"} type="url" placeholder='Please input webhook url'></Input>
</div>
src/routes/setting/BotConfig/WebhookEdit.tsx
+1 -1
View File
@@ -72,7 +72,7 @@ const WebhookEdit = ({ uid }: Props) => {
evt.preventDefault();
handleEdit();
}}>
<input readOnly={!editable} required autoFocus type="url" name='webhook' defaultValue={url} className={clsx("text-sm text-gray-500 px-2 py-1", editable ? "border border-solid border-gray-200 bg-gray-50" : "bg-transparent")} />
<input readOnly={!editable} required autoFocus type="url" name='webhook' defaultValue={url} className={clsx("text-sm text-gray-500 dark:text-gray-100 px-2 py-1", editable ? "border border-solid border-gray-200 bg-gray-50" : "bg-transparent")} />
</form>
<button type='button' disabled={isUpdating} onClick={handleEdit}>
{isUpdating ? <Orbit size={16} /> : editable ?
src/routes/setting/BotConfig/index.tsx
+8 -9
View File
@@ -20,11 +20,11 @@ type TipProps = { title: string, desc: string };
const Tip = ({ title, desc }: TipProps) => {
return <div className="flex flex-col text-sm">
<h2 className="">{title}</h2>
<p className="text-gray-500">{desc}</p>
<h2 className="dark:text-white">{title}</h2>
<p className="text-gray-500 dark:text-gray-400">{desc}</p>
</div>;
};
const tdClass = "p-6 whitespace-nowrap text-sm font-medium text-gray-900 align-top";
const tdClass = "p-6 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100 align-top";
type WebhookParams = { webhook?: string, uid: number };
type DeleteParams = { name: string, uid: number };
export default function BotConfig() {
@@ -65,19 +65,19 @@ export default function BotConfig() {
<Tip title={t("webhook_tip_title")} desc={t("webhook_tip_desc")} />
</div>
<div className="flex flex-col gap-1">
<h2 className='font-semibold flex gap-4 items-center'>
<h2 className='font-semibold flex gap-4 items-center dark:text-white'>
{t("manage")}
<a href="https://doc.voce.chat/bot-and-webhook" target="_blank" className="text-sm text-blue-400 underline-offset-1 underline" rel="noopener noreferrer">
🔗 {t("how_to_use")}
</a>
</h2>
<p className='text-gray-500 text-xs'>{t("manage_desc")}</p>
<p className='text-gray-500 dark:text-gray-400 text-xs'>{t("manage_desc")}</p>
</div>
<div className="w-fit overflow-hidden">
<table className="min-w-full table-auto">
<thead className="border-b bg-gray-50">
<thead className="border-b dark:border-b-gray-500 bg-gray-50 dark:bg-gray-600">
<tr>
{[t("col_avatar"), t('col_name'), t('col_api_key'), t('col_webhook'), t('col_opt')].map(title => <th key={title} scope="col" className="text-sm font-bold text-gray-900 px-6 py-4 text-left">
{[t("col_avatar"), t('col_name'), t('col_api_key'), t('col_webhook'), t('col_opt')].map(title => <th key={title} scope="col" className="text-sm font-bold text-gray-900 dark:text-gray-100 px-6 py-4 text-left">
{title}
</th>)}
</tr>
@@ -85,10 +85,9 @@ export default function BotConfig() {
<tbody>
{bots.map(bot => {
const { uid, name, avatar } = bot;
return <tr key={uid} className="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
return <tr key={uid} className="bg-white dark:bg-gray-800 border-b dark:border-b-gray-500 transition duration-300 ease-in-out hover:bg-gray-100">
<td className="px-4 py-2">
<AvatarUploader uid={uid} url={avatar} uploadImage={updateAvatar} name={name} size={56} />
</td>
<td className={`${tdClass}`}>
<div>
src/routes/setting/License/index.tsx
+1 -1
View File
@@ -13,7 +13,7 @@ const Item = ({ label, data, foldable = false, ...rest }: ItemProps) => {
const infoClass = clsx("font-bold w-full cursor-pointer", foldable ? " overflow-hidden text-ellipsis" : "whitespace-pre-wrap break-all");
if (!data) return null;
return <div className="whitespace-nowrap flex flex-col items-start justify-start text-lg">
<span className="text-sm text-gray-400">{label}</span>
<span className="text-sm text-gray-400 dark:text-white">{label}</span>
{Array.isArray(data) ? <ul className={infoClass}>
{data.map((d) => {
return <li key={d}>{d}</li>;
src/routes/setting/MyAccount.tsx
+6 -6
View File
@@ -61,16 +61,16 @@ export default function MyAccount() {
return (
<>
<div className="flex flex-col items-start gap-8">
<div className="p-6 flex flex-col items-center w-[512px] bg-slate-100 rounded-2xl">
<div className="p-6 flex flex-col items-center w-[512px] bg-slate-100 dark:bg-gray-800 rounded-2xl">
<AvatarUploader url={avatar} name={name} uploadImage={uploadAvatar} />
<div className="mt-2 mb-16 font-bold text-lg text-gray-800">
<div className="mt-2 mb-16 font-bold text-lg text-gray-800 dark:text-white">
{name} <span className="font-normal text-gray-500">#{uid}</span>
</div>
<div className="w-full flex justify-between mb-6">
<div className="flex flex-col text-gray-500">
<div className="flex flex-col text-gray-500 dark:text-gray-50">
<span className="text-xs uppercase font-semibold">{t("username")}</span>
<span className="text-sm ">
{name} <span className="text-gray-600"> #{uid}</span>
{name} <span className="text-gray-600 dark:text-gray-400"> #{uid}</span>
</span>
</div>
<Button data-edit="name" onClick={handleBasicEdit} className="">
@@ -78,7 +78,7 @@ export default function MyAccount() {
</Button>
</div>
<div className="w-full flex justify-between mb-6">
<div className="flex flex-col text-gray-500">
<div className="flex flex-col text-gray-500 dark:text-gray-50">
<span className="text-xs uppercase font-semibold">{t("email")}</span>
<span className="text-sm">{email}</span>
</div>
@@ -87,7 +87,7 @@ export default function MyAccount() {
</Button>
</div>
<div className="w-full flex justify-between mb-6">
<div className="flex flex-col text-gray-500">
<div className="flex flex-col text-gray-500 dark:text-gray-50">
<span className="text-xs uppercase font-semibold">{t("password")}</span>
<span className="text-sm">*********</span>
</div>
src/routes/setting/Overview/DarkMode.tsx
+43
View File
@@ -0,0 +1,43 @@
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import Radio from '../../../common/component/styled/Radio';
import { Theme } from '../../../types/common';
// type Props = {}
const DarkMode = () => {
const [theme, setTheme] = useState<Theme>(localStorage.theme || "auto");
const { t } = useTranslation("setting");
const handleThemeToggle = (v: Theme) => {
setTheme(v);
localStorage.theme = v;
// reset
document.documentElement.classList.remove("dark");
document.documentElement.classList.remove("light");
if (v !== "auto") {
document.documentElement.classList.add(v);
} else {
const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
document.documentElement.classList.add(isDark ? "dark" : 'light');
}
};
return (
<div className="text-sm">
<p className="dark:text-gray-100 font-semibold">{t("overview.theme.title")}</p>
<p className="flex justify-between w-full text-gray-400 mb-2">
{t("overview.theme.desc")}
</p>
<Radio
options={[t("overview.theme.auto"), t("overview.theme.dark"), t("overview.theme.light")]}
values={['auto', 'dark', 'light']}
value={theme}
onChange={(v) => {
handleThemeToggle(v);
}}
/>
</div>
);
};
export default DarkMode;
src/routes/setting/Overview/FrontendURL.tsx
+1 -2
View File
@@ -33,12 +33,11 @@ const Index = () => {
// if(!fetch)
return (
<div className="text-sm">
<p className="font-semibold">{t("overview.url.title")}</p>
<p className="dark:text-gray-100 font-semibold">{t("overview.url.title")}</p>
<p className="flex justify-between w-full text-gray-400">
{t("overview.url.desc")}
</p>
<div className="flex items-center gap-4 mt-2">
<StyledInput placeholder='frontend url' value={url} onChange={handleChange} />
<StyledButton disabled={!url || isLoading} className='' onClick={handleUpdate}> {ct("action.update")}</StyledButton>
</div>
src/routes/setting/Overview/index.tsx
+4 -2
View File
@@ -7,6 +7,7 @@ import useConfig from "../../../common/hook/useConfig";
import Server from './server';
import Language from './Language';
import FrontendURL from "./FrontendURL";
// import DarkMode from "./DarkMode";
import ServerVersionChecker from "../../../common/component/ServerVersionChecker";
export default function Overview() {
@@ -33,7 +34,7 @@ export default function Overview() {
{isAdmin && (
<>
<div className="text-sm">
<p className="font-semibold">{t("overview.sign_up.title")}</p>
<p className="dark:text-gray-100 font-semibold">{t("overview.sign_up.title")}</p>
<p className="flex justify-between w-full text-gray-400 mb-2">{t("overview.sign_up.desc")}</p>
<StyledRadio
options={[t("overview.sign_up.everyone"), t("overview.sign_up.invite")]}
@@ -45,7 +46,7 @@ export default function Overview() {
/>
</div>
<div className="text-sm">
<p className="font-semibold">{t("overview.guest_mode.title")}</p>
<p className="dark:text-gray-100 font-semibold">{t("overview.guest_mode.title")}</p>
<p className="flex justify-between w-full text-gray-400 mb-2">
<span className="txt">
{t("overview.guest_mode.desc")}
@@ -66,6 +67,7 @@ export default function Overview() {
</>
)}
<Language />
{/* <DarkMode /> */}
</div>
);
}
src/routes/setting/Overview/language.tsx
+1 -1
View File
@@ -11,7 +11,7 @@ const Index = () => {
};
return (
<div className="text-sm">
<p className="font-semibold">{t("overview.lang.title")}</p>
<p className="dark:text-gray-100 font-semibold">{t("overview.lang.title")}</p>
<p className="flex justify-between w-full text-gray-400 mb-2">
{t("overview.lang.desc")}
</p>
src/routes/setting/Overview/server.tsx
+3 -3
View File
@@ -72,7 +72,7 @@ const Index = () => {
</div>
{isAdmin && (
<div className="flex flex-col justify-between items-start">
<div className="text-sm text-gray-600">
<div className="text-sm text-gray-600 dark:text-gray-100">
{t("overview.upload_desc")}
</div>
</div>
@@ -80,7 +80,7 @@ const Index = () => {
</div>
<div className="flex flex-col items-start gap-6 mb-16">
<div className="w-full flex flex-col items-start gap-2">
<Label htmlFor="name">{t("overview.name")}</Label>
<Label className='dark:text-gray-100' htmlFor="name">{t("overview.name")}</Label>
<Input
disabled={!isAdmin}
data-type="name"
@@ -92,7 +92,7 @@ const Index = () => {
/>
</div>
<div className="w-full flex flex-col items-start gap-2">
<Label htmlFor="desc">{t("overview.desc")}</Label>
<Label className='dark:text-gray-100' htmlFor="desc">{t("overview.desc")}</Label>
<Textarea
disabled={!isAdmin}
data-type="description"
src/routes/setting/Widget.tsx
+12 -12
View File
@@ -5,14 +5,14 @@ import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
const Row = ({ paramKey, paramDefault, remarks }: { paramKey: string, paramDefault: string | number, remarks: string }) => {
return <tr className="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
return <tr className="bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-50 border-b transition duration-300 ease-in-out hover:bg-gray-100">
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
{paramKey}
</td>
<td className="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
<td className="text-sm font-light px-6 py-4 whitespace-nowrap">
{paramDefault}
</td>
<td className="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
<td className="text-sm font-light px-6 py-4 whitespace-nowrap">
{remarks}
</td>
</tr>;
@@ -22,23 +22,23 @@ export default function Widget() {
// const disableBtn = !reachLimit;
return (
<div className="flex flex-col justify-start items-start">
<div className="text-gray-600 ">
<div className="text-gray-600 dark:text-gray-100">
{t('tip')}
</div>
<label htmlFor="code" className="text-gray-500 text-sm mt-5">
<label htmlFor="code" className="text-gray-500 dark:text-white text-sm mt-5">
{t('code')}:
</label>
<SyntaxHighlighter id="code" language="html" style={vscDarkPlus} className="rounded">
{`<!-- ${t('code_comment')} -->\n<script \n data-host-id="1" \n data-close-width="48" \n data-close-height="48" \n data-open-width="380" \n data-open-height="680" \n src="${location.origin}/widget.js" \n async \n/>`}
</SyntaxHighlighter>
<div className="text-gray-500 text-sm mt-5 mb-2">
<div className="text-gray-500 dark:text-white text-sm mt-5 mb-2">
{t('config')}:
</div>
<div className="w-[700px] border border-solid border-gray-300 rounded overflow-hidden">
<div className="w-[700px] border border-solid border-gray-300 dark:border-gray-400 rounded overflow-hidden">
<table className="min-w-full table-auto">
<thead className="border-b bg-gray-50">
<thead className="border-b bg-gray-50 dark:bg-gray-500">
<tr>
{[t('param_key'), t('default_value'), t('remark')].map(title => <th key={title} scope="col" className="text-sm font-bold text-gray-900 px-6 py-4 text-left">
{[t('param_key'), t('default_value'), t('remark')].map(title => <th key={title} scope="col" className="text-sm font-bold text-gray-900 dark:text-white px-6 py-4 text-left">
{title}
</th>)}
</tr>
@@ -67,9 +67,9 @@ export default function Widget() {
}
].map(row => <Row key={row.paramKey} {...row} />)}
</tbody>
<tfoot className="border-t border-solid border-gray-200" >
<tfoot className="border-t border-solid border-gray-200 dark:border-gray-50 dark:bg-gray-500" >
<tr>
<td colSpan={3} className="text-gray-400 px-5 py-3 text-sm">
<td colSpan={3} className="text-gray-400 dark:text-white px-5 py-3 text-sm">
* All the parameters are optional, and prefixed by <i className="bg-gray-700 text-white px-1">data-</i>
</td>
</tr>
src/routes/setting/config/Firebase.tsx
+4 -4
View File
@@ -87,7 +87,7 @@ export default function ConfigFirebase() {
/>
{<fieldset className="inputs" disabled={select !== "custom"}>
<div className="input">
<Label htmlFor="name">{t("firebase.token_url")}</Label>
<Label htmlFor="name" className="dark:text-gray-200">{t("firebase.token_url")}</Label>
<Input
data-type="token_url"
onChange={handleChange}
@@ -97,7 +97,7 @@ export default function ConfigFirebase() {
/>
</div>
<div className="input">
<Label htmlFor="desc">{t("firebase.project_id")}</Label>
<Label htmlFor="desc" className="dark:text-gray-200">{t("firebase.project_id")}</Label>
<Input
data-type="project_id"
onChange={handleChange}
@@ -107,7 +107,7 @@ export default function ConfigFirebase() {
/>
</div>
<div className="input">
<Label htmlFor="desc">{t("firebase.private_key")}</Label>
<Label htmlFor="desc" className="dark:text-gray-200">{t("firebase.private_key")}</Label>
<Textarea
rows={10}
spellCheck={false}
@@ -119,7 +119,7 @@ export default function ConfigFirebase() {
/>
</div>
<div className="input">
<Label htmlFor="desc">{t("firebase.client_email")}</Label>
<Label htmlFor="desc" className="dark:text-gray-200">{t("firebase.client_email")}</Label>
<Input
data-type="client_email"
onChange={handleChange}
src/routes/setting/config/IssuerList/index.tsx
+16 -18
View File
@@ -1,12 +1,11 @@
import { ChangeEvent, FC, useState } from "react";
import { useTranslation } from "react-i18next";
import Select, { Option } from "../../../../common/component/styled/Select";
import Button from "../../../../common/component/styled/Button";
import Input from "../../../../common/component/styled/Input";
import Toggle from "../../../../common/component/styled/Toggle";
import options from "./items.json";
import Styled from "./styled";
import IconMinus from "../../../../assets/icons/minus.circle.svg";
import { useTranslation } from "react-i18next";
interface Issuer {
domain: string;
@@ -32,32 +31,31 @@ const IssuerList: FC<Props> = ({ issuers = [], onChange }) => {
(!newDomain && !select?.value) ||
!select?.title ||
issuers.some((issuer) => issuer.domain === newDomain);
return (
<Styled>
<ul className="issuers">
<div className="py-4 w-full flex flex-col gap-4">
<ul className="flex flex-col gap-4">
{issuers.map(({ enable, favicon, domain }) => {
return (
<li key={domain} className="issuer">
<div className="left">
<li key={domain} className="flex items-center justify-between gap-10">
<div className="flex-1 flex items-center justify-between">
<IconMinus
className="remove"
className="cursor-pointer"
onClick={() => {
onChange(issuers.filter((issuer) => issuer.domain !== domain));
}}
/>
<div className="data">
{Boolean(favicon) && <img src={favicon} alt="logo" className="icon" />}
<div className="flex items-center justify-between gap-4">
{Boolean(favicon) && <img src={favicon} alt="logo" className="w-8 h-8" />}
<Input
readOnly
value={domain}
prefix="https://"
placeholder="Issuer Domain"
className="url"
className="w-[280px]"
/>
</div>
</div>
<div className="right">
<div className="w-14 flex justify-end">
<Toggle
data-checked={enable}
onClick={() => {
@@ -74,8 +72,8 @@ const IssuerList: FC<Props> = ({ issuers = [], onChange }) => {
);
})}
<li className="issuer add">
<div className="left">
<li className="flex items-center justify-between gap-10 cursor-pointer">
<div className="flex-1 flex items-center justify-between">
<Select
options={options.map((option) => ({
...option,
@@ -84,18 +82,18 @@ const IssuerList: FC<Props> = ({ issuers = [], onChange }) => {
current={select}
updateSelect={setSelect}
/>
<div className="data">
<div className="flex items-center justify-between gap-4">
<Input
onChange={handleNewDomain}
readOnly={!!select?.value}
value={select?.value || newDomain}
prefix="https://"
placeholder="domain.com"
className="url"
className="w-[280px]"
/>
</div>
</div>
<div className="right">
<div className="w-14 flex justify-end">
<Button
disabled={disableBtn}
onClick={() => {
@@ -119,7 +117,7 @@ const IssuerList: FC<Props> = ({ issuers = [], onChange }) => {
</li>
</ul>
{/* <IconPlus className="add" /> */}
</Styled>
</div>
);
};
src/routes/setting/config/IssuerList/styled.tsx
-52
View File
@@ -1,52 +0,0 @@
import styled from "styled-components";
const Styled = styled.div`
padding: 16px 0;
width: 100%;
display: flex;
flex-direction: column;
gap: 16px;
.issuers {
display: flex;
flex-direction: column;
gap: 16px;
.issuer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
.left {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
.remove {
cursor: pointer;
}
.data {
display: flex;
align-items: center;
gap: 16px;
justify-content: space-between;
> .icon {
width: 32px;
height: 32px;
}
> .url {
width: 280px;
}
}
}
.right {
width: 56px;
display: flex;
justify-content: flex-end;
}
}
}
.add {
cursor: pointer;
}
`;
export default Styled;
src/routes/setting/config/Logins.tsx
+12 -12
View File
@@ -77,9 +77,9 @@ export default function Logins() {
<div className="row">
<div className="title">
<div className="txt">
<Label>{t("password")}</Label>
<Label className="dark:text-gray-200">{t("password")}</Label>
</div>
<span className="desc">{t("password_desc")}</span>
<span className="desc dark:!text-gray-400" >{t("password_desc")}</span>
</div>
<Toggle
onClick={handleToggle.bind(null, { password: !password })}
@@ -91,9 +91,9 @@ export default function Logins() {
<div className="row">
<div className="title">
<div className="txt">
<Label>{t("magic_link")}</Label>
<Label className="dark:text-gray-200">{t("magic_link")}</Label>
</div>
<span className="desc">{t("magic_link_desc")}</span>
<span className="desc dark:!text-gray-400" >{t("magic_link_desc")}</span>
</div>
<Toggle
onClick={handleToggle.bind(null, { magic_link: !magic_link })}
@@ -105,10 +105,10 @@ export default function Logins() {
<div className="row">
<div className="title">
<div className="txt">
<Label>{t("google")}</Label>
<Label className="dark:text-gray-200">{t("google")}</Label>
<Tooltip link="https://doc.voce.chat/setting/third_login/login-google" />
</div>
<span className="desc">{t("google_desc")}</span>
<span className="desc dark:!text-gray-400" >{t("google_desc")}</span>
</div>
<Toggle
onClick={handleToggle.bind(null, { google: !google })}
@@ -128,10 +128,10 @@ export default function Logins() {
<div className="row">
<div className="title">
<div className="txt">
<Label>{t("github")}</Label>
<Label className="dark:text-gray-200">{t("github")}</Label>
<Tooltip link="https://doc.voce.chat/setting/third_login/login-github" />
</div>
<span className="desc">{t("github_desc")}</span>
<span className="desc dark:!text-gray-400" >{t("github_desc")}</span>
</div>
<Toggle
onClick={handleToggle.bind(null, { github: !github })}
@@ -159,10 +159,10 @@ export default function Logins() {
<div className="row">
<div className="title">
<div className="txt">
<Label>{t("metamask")}</Label>
<Label className="dark:text-gray-200">{t("metamask")}</Label>
<Tooltip link="https://doc.voce.chat/setting/third_login/login-metamask" />
</div>
<span className="desc">{t("metamask_desc")}</span>
<span className="desc dark:!text-gray-400" >{t("metamask_desc")}</span>
</div>
<Toggle
onClick={handleToggle.bind(null, { metamask: !metamask })}
@@ -174,10 +174,10 @@ export default function Logins() {
<div className="row">
<div className="title">
<div className="txt">
<Label htmlFor="desc">{t("oidc")}</Label>
<Label className="dark:text-gray-200" htmlFor="desc">{t("oidc")}</Label>
<Tooltip link="https://doc.voce.chat/setting/third_login/login-webid" />
</div>
<span className="desc">{t("oidc_desc")}</span>
<span className="desc dark:!text-gray-400" >{t("oidc_desc")}</span>
</div>
</div>
<div className="row">
src/routes/setting/config/SMTP.tsx
+6 -6
View File
@@ -57,11 +57,11 @@ export default function ConfigSMTP() {
<StyledContainer>
<div className="inputs">
<div className="input row">
<Label>{t("enable")}</Label>
<Label className="dark:text-gray-200">{t("enable")}</Label>
<Toggle onClick={toggleEnable} data-checked={enabled}></Toggle>
</div>
<div className="input">
<Label htmlFor="name">{t("host")}</Label>
<Label className="dark:text-gray-200" htmlFor="name">{t("host")}</Label>
<Input
disabled={!enabled}
data-type="host"
@@ -72,7 +72,7 @@ export default function ConfigSMTP() {
/>
</div>
<div className="input">
<Label htmlFor="desc">{t("port")}</Label>
<Label className="dark:text-gray-200" htmlFor="desc">{t("port")}</Label>
<Input
disabled={!enabled}
type={"number"}
@@ -84,7 +84,7 @@ export default function ConfigSMTP() {
/>
</div>
<div className="input">
<Label htmlFor="desc">{t("from")}</Label>
<Label className="dark:text-gray-200" htmlFor="desc">{t("from")}</Label>
<Input
disabled={!enabled}
data-type="from"
@@ -95,7 +95,7 @@ export default function ConfigSMTP() {
/>
</div>
<div className="input">
<Label htmlFor="desc">{t("username")}</Label>
<Label className="dark:text-gray-200" htmlFor="desc">{t("username")}</Label>
<Input
disabled={!enabled}
data-type="username"
@@ -106,7 +106,7 @@ export default function ConfigSMTP() {
/>
</div>
<div className="input">
<Label htmlFor="desc">{t("password")}</Label>
<Label className="dark:text-gray-200" htmlFor="desc">{t("password")}</Label>
<Input
type={"password"}
disabled={!enabled}
src/routes/setting/navs.tsx
+2 -2
View File
@@ -86,11 +86,11 @@ const navs = [
},
{
name: "terms",
component: "Terms & Privacy"
component: <div className="dark:text-white">Terms & Privacy</div>
},
{
name: "feedback",
component: <ul className="flex flex-col gap-2 text-lg">
component: <ul className="flex flex-col gap-2 text-lg dark:text-white">
<li>Email: <strong className="font-bold">han@privoce.com</strong></li>
<li>Wechat: <strong className="font-bold">Privoce</strong></li>
<li>GitHub:&nbsp;
src/routes/users/Search.tsx
+2 -2
View File
@@ -15,10 +15,10 @@ const Search: FC<Props> = ({ input, updateInput }) => {
updateInput(evt.target.value);
};
return (
<div className="relative min-h-[56px] px-2 py-3 flex items-center justify-between gap-2 shadow">
<div className="relative min-h-[56px] px-2 py-3 flex items-center justify-between gap-2 border-solid border-b dark:border-b-gray-500">
<div className="flex items-center gap-1">
<img src={searchIcon} alt="search icon" />
<input value={input} placeholder={`${t("action.search")}...`} className="w-full text-sm" onChange={handleInput} />
<input value={input} placeholder={`${t("action.search")}...`} className="w-full text-sm bg-transparent" onChange={handleInput} />
</div>
<Tooltip tip={t("more")} placement="bottom">
<Tippy interactive placement="bottom-end" trigger="click" content={<AddEntriesMenu />}>
src/routes/users/index.tsx
+2 -2
View File
@@ -26,7 +26,7 @@ function UsersPage() {
if (!users) return null;
return (
<StyledWrapper>
<div className="left">
<div className="left dark:!bg-[#1F2A37]">
<Search input={input} updateInput={updateInput} />
<div className="list">
<nav className="nav">
@@ -40,7 +40,7 @@ function UsersPage() {
</nav>
</div>
</div>
<div className={`right ${!user_id ? "placeholder" : ""}`}>
<div className={`right ${!user_id ? "placeholder" : ""} dark:!bg-[#384250]`}>
{user_id ? <Profile uid={+user_id} /> : <BlankPlaceholder type="user" />}
</div>
</StyledWrapper>