refactor: more tailwind
This commit is contained in:
Tristan Yang
@@ -6,74 +6,13 @@ import IconClose from "../../../assets/icons/close.svg";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import PinnedMessage from "../../../common/component/PinnedMessage";
|
||||
const Styled = styled.div`
|
||||
padding: 16px;
|
||||
background: #f9fafb;
|
||||
filter: drop-shadow(0px 25px 50px rgba(31, 41, 55, 0.25));
|
||||
border-radius: 12px;
|
||||
min-width: 486px;
|
||||
max-height: 90vh;
|
||||
overflow-y: scroll;
|
||||
/* width: fit-content; */
|
||||
> .head {
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
color: #344054;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
> .none {
|
||||
padding: 16px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
.tip {
|
||||
width: 240px;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
color: #475467;
|
||||
}
|
||||
}
|
||||
> .list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
.pin {
|
||||
position: relative;
|
||||
border: 1px solid #f2f4f7;
|
||||
border-radius: var(--br);
|
||||
> .preview {
|
||||
.preview {
|
||||
background: none;
|
||||
.down img {
|
||||
width: 100% !important;
|
||||
height: auto !important;
|
||||
}
|
||||
}
|
||||
> .opts {
|
||||
visibility: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
padding: 4px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
border-radius: 6px;
|
||||
.btn {
|
||||
display: flex;
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
&:hover .opts {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
type Props = {
|
||||
id: number;
|
||||
@@ -88,22 +27,22 @@ const PinList: FC<Props> = ({ id }: Props) => {
|
||||
};
|
||||
const noPins = pins.length == 0;
|
||||
return (
|
||||
<Styled>
|
||||
<h4 className="head">{t("pinned_msg")}({pins.length})</h4>
|
||||
<Styled className="p-4 drop-shadow-md overflow-y-scroll max-h-[90vh] min-w-[486px] rounded-xl bg-gray-50">
|
||||
<h4 className=" text-gray-600 mb-4 font-semibold">{t("pinned_msg")}({pins.length})</h4>
|
||||
{noPins ? (
|
||||
<div className="none">
|
||||
<div className="flex flex-col items-center gap-2 w-full p-4">
|
||||
<IconSurprise />
|
||||
<div className="tip">{t("pin_empty_tip")}</div>
|
||||
<div className="w-60 font-semibold text-gray-500 text-center">{t("pin_empty_tip")}</div>
|
||||
</div>
|
||||
) : (
|
||||
<ul className="list">
|
||||
<ul className="flex flex-col gap-2">
|
||||
{pins.map((data) => {
|
||||
return (
|
||||
<li key={data.mid} className="pin">
|
||||
<li key={data.mid} className="group relative border border-solid border-slate-100 rounded-md ">
|
||||
<PinnedMessage data={data} />
|
||||
<div className="opts">
|
||||
<div className="invisible group-hover:visible flex items-center gap-1 absolute top-1 right-1 p-1 border border-solid border-black/10 rounded-md">
|
||||
{canPin && (
|
||||
<button className="btn" data-mid={data.mid} onClick={handleUnpin}>
|
||||
<button className="flex bg-none border-none" data-mid={data.mid} onClick={handleUnpin}>
|
||||
<IconClose className="fill-slate-900" />
|
||||
</button>
|
||||
)}
|
||||
|
||||
@@ -21,7 +21,7 @@ import IconPin from "../../../assets/icons/pin.svg";
|
||||
import IconHeadphone from "../../../assets/icons/headphone.svg";
|
||||
|
||||
import addIcon from "../../../assets/icons/add.svg?url";
|
||||
import { StyledUsers, StyledChannelChat, StyledHeader } from "./styled";
|
||||
import { StyledUsers, StyledChannelChat } from "./styled";
|
||||
import InviteModal from "../../../common/component/InviteModal";
|
||||
import LoadMore from "../LoadMore";
|
||||
import { useAppSelector } from "../../../app/store";
|
||||
@@ -142,13 +142,13 @@ function ChannelChat({ cid = 0, dropFiles = [] }: Props) {
|
||||
</ul>
|
||||
}
|
||||
header={
|
||||
<StyledHeader className="head">
|
||||
<div className="txt">
|
||||
<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="title">{name}</span>
|
||||
<span className="desc">{description}</span>
|
||||
<span className="text-gray-800">{name}</span>
|
||||
<span className="ml-2 text-gray-500">{description}</span>
|
||||
</div>
|
||||
</StyledHeader>
|
||||
</header>
|
||||
}
|
||||
users={
|
||||
<StyledUsers className={membersVisible ? "flex" : "hidden"}>
|
||||
|
||||
@@ -1,27 +1,5 @@
|
||||
import styled from "styled-components";
|
||||
export const StyledHeader = styled.header`
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.txt {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
.title {
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
color: #1c1c1e;
|
||||
}
|
||||
.desc {
|
||||
margin-left: 8px;
|
||||
font-weight: normal;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
color: #616161;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export const StyledNotification = styled.div`
|
||||
padding: 3px 8px;
|
||||
font-style: normal;
|
||||
|
||||
@@ -7,7 +7,6 @@ import FavIcon from "../../../assets/icons/bookmark.svg";
|
||||
import { useReadMessageMutation } from "../../../app/services/message";
|
||||
import User from "../../../common/component/User";
|
||||
import Layout from "../Layout";
|
||||
import { StyledHeader, StyledDMChat } from "./styled";
|
||||
import LoadMore from "../LoadMore";
|
||||
import { renderMessageFragment } from "../utils";
|
||||
import useMessageFeed from "../../../common/hook/useMessageFeed";
|
||||
@@ -65,12 +64,12 @@ const DMChat: FC<Props> = ({ uid = 0, dropFiles }) => {
|
||||
</ul>
|
||||
}
|
||||
header={
|
||||
<StyledHeader className="head">
|
||||
<header className="head h-full flex items-center justify-between">
|
||||
<User interactive={false} uid={currUser.uid} />
|
||||
</StyledHeader>
|
||||
</header>
|
||||
}
|
||||
>
|
||||
<StyledDMChat id={`VOCECHAT_FEED_user_${uid}`}>
|
||||
<article id={`VOCECHAT_FEED_user_${uid}`} className="w-full h-full px-4 py-4.5 overflow-auto">
|
||||
{hasMore ? <LoadMore pullUp={pullUp} pulling={pulling} /> : null}
|
||||
{[...feeds].map((mid, idx) => {
|
||||
const curr = messageData[mid];
|
||||
@@ -86,7 +85,7 @@ const DMChat: FC<Props> = ({ uid = 0, dropFiles }) => {
|
||||
context: "user"
|
||||
});
|
||||
})}
|
||||
</StyledDMChat>
|
||||
</article>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,36 +0,0 @@
|
||||
import styled from "styled-components";
|
||||
export const StyledHeader = styled.header`
|
||||
height: 100%;
|
||||
/* padding: 0 20px 0 10px; */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
/* tricky */
|
||||
> div {
|
||||
padding-left: 4px;
|
||||
}
|
||||
.txt {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
.title {
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
color: #1c1c1e;
|
||||
}
|
||||
.desc {
|
||||
margin-left: 8px;
|
||||
font-weight: normal;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
color: #616161;
|
||||
}
|
||||
}
|
||||
`;
|
||||
export const StyledDMChat = styled.article`
|
||||
width: 100%;
|
||||
padding: 18px 16px;
|
||||
height: 100%;
|
||||
height: -webkit-fill-available;
|
||||
overflow: auto;
|
||||
`;
|
||||
@@ -4,7 +4,7 @@ import useMessageFeed from "../../../common/hook/useMessageFeed";
|
||||
import ChannelIcon from "../../../common/component/ChannelIcon";
|
||||
import Layout from "../Layout";
|
||||
import { renderMessageFragment } from "../utils";
|
||||
import { StyledChannelChat, StyledHeader } from "./styled";
|
||||
import { StyledChannelChat } from "./styled";
|
||||
import LoadMore from "../LoadMore";
|
||||
import { useAppSelector } from "../../../app/store";
|
||||
import { useTranslation } from "react-i18next";
|
||||
@@ -40,13 +40,13 @@ export default function GuestChannelChat({ cid = 0 }: Props) {
|
||||
to={cid}
|
||||
context="channel"
|
||||
header={
|
||||
<StyledHeader className="head">
|
||||
<div className="txt">
|
||||
<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="title">{name}</span>
|
||||
<span className="desc">{description}</span>
|
||||
<span className="text-gray-800">{name}</span>
|
||||
<span className="ml-2 text-gray-500">{description}</span>
|
||||
</div>
|
||||
</StyledHeader>
|
||||
</header>
|
||||
}
|
||||
>
|
||||
<StyledChannelChat id={`VOCECHAT_FEED_channel_${cid}`}>
|
||||
|
||||
@@ -1,27 +1,4 @@
|
||||
import styled from "styled-components";
|
||||
export const StyledHeader = styled.header`
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.txt {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
.title {
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
color: #1c1c1e;
|
||||
}
|
||||
.desc {
|
||||
margin-left: 8px;
|
||||
font-weight: normal;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
color: #616161;
|
||||
}
|
||||
}
|
||||
`;
|
||||
export const StyledChannelChat = styled.article`
|
||||
padding: 18px 16px;
|
||||
width: 100%;
|
||||
|
||||
@@ -14,6 +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';
|
||||
function ChatPage() {
|
||||
const [sessionListVisible, setSessionListVisible] = useState(false);
|
||||
const [channelModalVisible, setChannelModalVisible] = useState(false);
|
||||
@@ -51,13 +52,14 @@ function ChatPage() {
|
||||
<ChannelModal closeModal={toggleChannelModalVisible} personal={true} />
|
||||
)}
|
||||
{usersModalVisible && <UsersModal closeModal={toggleUsersModalVisible} />}
|
||||
<StyledWrapper className={`${isGuest ? "!pr-1" : ""} 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")}>
|
||||
<Server readonly={isGuest} />
|
||||
{isGuest ? <GuestSessionList /> : <SessionList tempSession={tmpSession} />}
|
||||
<button className="absolute top-1/2 -right-[24px] z-50 p-2 rounded-full bg-slate-300/80 md:hidden" onClick={toggleSessionList}>
|
||||
{sessionListVisible ? null : <button className="absolute top-2 -right-[52px] z-50 p-2 bg-none md:hidden" onClick={toggleSessionList}>
|
||||
<IconList />
|
||||
</button>
|
||||
</button>}
|
||||
</div>
|
||||
<div className={`right ${placeholderVisible ? "placeholder" : ""}`}>
|
||||
{placeholderVisible && (isGuest ? <GuestBlankPlaceholder /> : <BlankPlaceholder />)}
|
||||
|
||||
@@ -1,23 +1,8 @@
|
||||
import { FC } from "react";
|
||||
import styled from "styled-components";
|
||||
import { NavLink, useLocation } from "react-router-dom";
|
||||
import Avatar from "../../common/component/Avatar";
|
||||
import { useAppSelector } from "../../app/store";
|
||||
|
||||
const StyledWrapper = styled.div`
|
||||
padding: 10px 12px;
|
||||
.avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
img {
|
||||
object-fit: cover;
|
||||
border-radius: 50%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
interface Props {
|
||||
uid: number;
|
||||
}
|
||||
@@ -28,13 +13,13 @@ const User: FC<Props> = ({ uid }) => {
|
||||
if (!user) return null;
|
||||
|
||||
return (
|
||||
<StyledWrapper>
|
||||
<div className="px-3 py-2.5 invisible md:visible">
|
||||
<NavLink to={`/setting?nav=my_account&f=${pathname}`}>
|
||||
<div className="avatar">
|
||||
<Avatar width={32} height={32} src={user.avatar} name={user.name} />
|
||||
<div className="w-8 h-8">
|
||||
<Avatar className=" object-cover w-full h-full" width={32} height={32} src={user.avatar} name={user.name} />
|
||||
</div>
|
||||
</NavLink>
|
||||
</StyledWrapper>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,12 +1,6 @@
|
||||
import styled from "styled-components";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import Button from "../../common/component/styled/Button";
|
||||
|
||||
const StyledMagicButton = styled(Button)`
|
||||
width: 100%;
|
||||
margin-bottom: 16px;
|
||||
`;
|
||||
|
||||
export default function MagicLinkLogin() {
|
||||
const navigate = useNavigate();
|
||||
const handleGoogleLogin = () => {
|
||||
@@ -14,5 +8,5 @@ export default function MagicLinkLogin() {
|
||||
// signIn();
|
||||
};
|
||||
|
||||
return <StyledMagicButton onClick={handleGoogleLogin}>Sign in with Magic Link</StyledMagicButton>;
|
||||
return <Button className="w-full mb-4" onClick={handleGoogleLogin}>Sign in with Magic Link</Button>;
|
||||
}
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { useEffect, useState, FC, useRef } from "react";
|
||||
import styled from "styled-components";
|
||||
import toast from "react-hot-toast";
|
||||
import { useDispatch } from "react-redux";
|
||||
import StyledInput from "../../../common/component/styled/Input";
|
||||
@@ -15,53 +14,6 @@ import { useAppSelector } from "../../../app/store";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useWizard } from "react-use-wizard";
|
||||
|
||||
const StyledWrapper = styled.div`
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
> .primaryText {
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 30px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
> .secondaryText {
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
form {
|
||||
> .input {
|
||||
margin-bottom: 20px;
|
||||
width: 360px;
|
||||
height: 44px;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
padding: 10px 14px;
|
||||
border: 1px solid #d0d5dd;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
|
||||
> .inner {
|
||||
padding: 0;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
}
|
||||
}}
|
||||
|
||||
> .button {
|
||||
width: 360px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
`;
|
||||
type Props = {
|
||||
serverName: string;
|
||||
};
|
||||
@@ -122,12 +74,12 @@ const AdminAccount: FC<Props> = ({ serverName }) => {
|
||||
}, [isUpdatedServer]);
|
||||
|
||||
return (
|
||||
<StyledWrapper>
|
||||
<span className="primaryText">{t("admin_title")}</span>
|
||||
<span className="secondaryText">{t("admin_desc")}</span>
|
||||
<form ref={formRef} action="/">
|
||||
<div className="h-full flex-center flex-col text-center w-[360px] m-auto">
|
||||
<span className="text-2xl mb-2 font-bold">{t("admin_title")}</span>
|
||||
<span className="text-sm mb-6">{t("admin_desc")}</span>
|
||||
<form ref={formRef} action="/" className="flex flex-col gap-2 w-full">
|
||||
<StyledInput
|
||||
className="input"
|
||||
className="large"
|
||||
placeholder="Enter your email"
|
||||
type={"email"}
|
||||
required
|
||||
@@ -135,7 +87,7 @@ const AdminAccount: FC<Props> = ({ serverName }) => {
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
/>
|
||||
<StyledInput
|
||||
className="input"
|
||||
className="large"
|
||||
type="password"
|
||||
required
|
||||
minLength={6}
|
||||
@@ -144,7 +96,7 @@ const AdminAccount: FC<Props> = ({ serverName }) => {
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
/>
|
||||
<StyledInput
|
||||
className="input"
|
||||
className="large"
|
||||
type="password"
|
||||
required
|
||||
minLength={6}
|
||||
@@ -154,7 +106,7 @@ const AdminAccount: FC<Props> = ({ serverName }) => {
|
||||
/>
|
||||
</form>
|
||||
<StyledButton
|
||||
className="button"
|
||||
className="mt-6 w-full"
|
||||
onClick={async () => {
|
||||
const formEle = formRef?.current;
|
||||
if (formEle) {
|
||||
@@ -174,7 +126,7 @@ const AdminAccount: FC<Props> = ({ serverName }) => {
|
||||
>
|
||||
{!(isSigningUp || isLoggingIn || isUpdatingServer) ? t("sign") : "..."}
|
||||
</StyledButton>
|
||||
</StyledWrapper>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default AdminAccount;
|
||||
|
||||
@@ -1,80 +1,26 @@
|
||||
import styled from "styled-components";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import StyledButton from "../../../common/component/styled/Button";
|
||||
import PlayIcon from "../../../assets/icons/play.svg?url";
|
||||
import { Trans, useTranslation } from "react-i18next";
|
||||
|
||||
const StyledWrapper = styled.div`
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
> .primaryText {
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 30px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
> .secondaryText {
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
> .tip {
|
||||
width: 588px;
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
margin-bottom: 48px;
|
||||
|
||||
> .strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
> .startButton {
|
||||
width: 128px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 15px 0 12px;
|
||||
|
||||
> img {
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
|
||||
> span {
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export default function DonePage({ serverName }: { serverName: string }) {
|
||||
const { t } = useTranslation("welcome", { keyPrefix: "onboarding" });
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<StyledWrapper>
|
||||
<span className="primaryText">{t("done_welcome", { serverName })}</span>
|
||||
<span className="secondaryText">{t("done_title")}</span>
|
||||
<span className="tip">
|
||||
<div className="h-full flex-center flex-col text-center w-[588px] m-auto">
|
||||
<span className="text-2xl font-bold mb-2">{t("done_welcome", { serverName })}</span>
|
||||
<span className="text-sm mb-12">{t("done_title")}</span>
|
||||
<span className="text-xl mb-12">
|
||||
<Trans i18nKey={"onboarding.done_desc"} ns={"welcome"}>
|
||||
<span className="strong" />
|
||||
<span className="font-bold" />
|
||||
</Trans>
|
||||
</span>
|
||||
<StyledButton className="startButton" onClick={() => navigate("/")}>
|
||||
<img src={PlayIcon} alt="play icon" />
|
||||
<span>{t("enter")}</span>
|
||||
<StyledButton className="!w-32 flex flex-col items-center py-3" onClick={() => navigate("/")}>
|
||||
<img className="mb-2" src={PlayIcon} alt="play icon" />
|
||||
<span className="text-sm">{t("enter")}</span>
|
||||
</StyledButton>
|
||||
</StyledWrapper>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,52 +1,10 @@
|
||||
import { FC } from "react";
|
||||
import styled from "styled-components";
|
||||
import toast from "react-hot-toast";
|
||||
import StyledInput from "../../../common/component/styled/Input";
|
||||
import StyledButton from "../../../common/component/styled/Button";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useWizard } from "react-use-wizard";
|
||||
|
||||
const StyledWrapper = styled.div`
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
> .primaryText {
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 30px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
> .secondaryText {
|
||||
width: 360px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
margin-bottom: 24px;
|
||||
color: #667085;
|
||||
}
|
||||
|
||||
> .input {
|
||||
width: 360px;
|
||||
height: 44px;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
padding: 10px 14px;
|
||||
border: 1px solid #d0d5dd;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
|
||||
}
|
||||
|
||||
> .button {
|
||||
width: 360px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
`;
|
||||
type Props = {
|
||||
serverName: string;
|
||||
setServerName: (name: string) => void;
|
||||
@@ -54,20 +12,21 @@ type Props = {
|
||||
const ServerName: FC<Props> = ({ serverName, setServerName }) => {
|
||||
const { t } = useTranslation("welcome", { keyPrefix: "onboarding" });
|
||||
const { nextStep } = useWizard();
|
||||
|
||||
return (
|
||||
<StyledWrapper>
|
||||
<span className="primaryText">{t("new_server")}</span>
|
||||
<span className="secondaryText">
|
||||
<div className="h-full flex-center flex-col text-center w-[360px] m-auto">
|
||||
<span className="text-2xl mb-2 font-bold">{t("new_server")}</span>
|
||||
<span className="text-sm mb-6 text-gray-400 ">
|
||||
{t("server_desc")}
|
||||
</span>
|
||||
<StyledInput
|
||||
className="input"
|
||||
className="h-11 px-3.5 py-2.5 border-gray-300 rounded-lg shadow"
|
||||
placeholder={t("placeholder_server")}
|
||||
value={serverName}
|
||||
onChange={(e) => setServerName(e.target.value)}
|
||||
/>
|
||||
<StyledButton
|
||||
className="button"
|
||||
className="w-full mt-6"
|
||||
onClick={() => {
|
||||
// Verification for space name
|
||||
if (serverName === "") {
|
||||
@@ -79,7 +38,7 @@ const ServerName: FC<Props> = ({ serverName, setServerName }) => {
|
||||
>
|
||||
{t("create_server")}
|
||||
</StyledButton>
|
||||
</StyledWrapper>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default ServerName;
|
||||
|
||||
@@ -1,64 +1,22 @@
|
||||
import styled from "styled-components";
|
||||
|
||||
import StyledButton from "../../../common/component/styled/Button";
|
||||
import PlayIcon from "../../../assets/icons/play.svg?url";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useWizard } from "react-use-wizard";
|
||||
|
||||
const StyledWrapper = styled.div`
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
> .primaryText {
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 30px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
> .secondaryText {
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
> .startButton {
|
||||
width: 128px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 15px 0 12px;
|
||||
|
||||
> img {
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
|
||||
> span {
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export default function WelcomePage() {
|
||||
const { t } = useTranslation("welcome", { keyPrefix: "onboarding" });
|
||||
const { nextStep } = useWizard();
|
||||
return (
|
||||
<StyledWrapper>
|
||||
<span className="primaryText">{t("welcome")}</span>
|
||||
<span className="secondaryText">
|
||||
<div className="flex-center flex-col h-full text-center">
|
||||
<span className="text-2xl mb-2 font-bold">{t("welcome")}</span>
|
||||
<span className="text-sm mb-6">
|
||||
{t("welcome_desc")}
|
||||
</span>
|
||||
<StyledButton className="startButton" onClick={nextStep}>
|
||||
<StyledButton className="!w-32 flex flex-col gap-2 items-center py-3 text-sm" onClick={nextStep}>
|
||||
<img src={PlayIcon} alt="play icon" />
|
||||
<span>{t("start")}</span>
|
||||
</StyledButton>
|
||||
</StyledWrapper>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -8,39 +8,6 @@ import { WhoCanSignUp } from "../../../types/server";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useWizard } from "react-use-wizard";
|
||||
|
||||
const StyledWrapper = styled.div`
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
> .primaryText {
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 30px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
> .secondaryText {
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
> form {
|
||||
width: 512px;
|
||||
}
|
||||
|
||||
> .button {
|
||||
width: 124px;
|
||||
height: 44px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
`;
|
||||
|
||||
export default function SignUpSetting() {
|
||||
const { t } = useTranslation("welcome");
|
||||
const { t: st } = useTranslation("setting");
|
||||
@@ -73,10 +40,22 @@ 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>
|
||||
<span className="primaryText">{t("onboarding.invite_title")}</span>
|
||||
<span className="secondaryText">{t("onboarding.invite_desc")}</span>
|
||||
<StyledWrapper 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
|
||||
options={[st("overview.sign_up.everyone"), st("overview.sign_up.invite")]}
|
||||
values={["EveryOne", "InvitationOnly"]}
|
||||
@@ -84,7 +63,7 @@ export default function SignUpSetting() {
|
||||
onChange={setValue}
|
||||
/>}
|
||||
<StyledButton
|
||||
className="button"
|
||||
className="w-32 mt-6"
|
||||
disabled={!value}
|
||||
onClick={() => {
|
||||
// nextStep();
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import styled from "styled-components";
|
||||
import IconPdf from "../../../assets/icons/file.pdf.svg";
|
||||
import IconAudio from "../../../assets/icons/file.audio.svg";
|
||||
import IconVideo from "../../../assets/icons/file.video.svg";
|
||||
@@ -9,73 +8,34 @@ import IconImage from "../../../assets/icons/file.image.svg";
|
||||
import CheckSign from "../../../assets/icons/check.sign.svg";
|
||||
import { FC } from "react";
|
||||
|
||||
const Styled = styled.div`
|
||||
padding: 12px;
|
||||
background: #ffffff;
|
||||
min-width: 200px;
|
||||
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;
|
||||
> .list {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
.type {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #475467;
|
||||
.icon {
|
||||
width: 15px;
|
||||
height: auto;
|
||||
}
|
||||
.check {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
export const FileTypes = {
|
||||
doc: {
|
||||
title: "Documents",
|
||||
icon: <IconDoc className="icon" />
|
||||
icon: <IconDoc className="w-4 h-auto" />
|
||||
},
|
||||
pdf: {
|
||||
title: "PDFs",
|
||||
icon: <IconPdf className="icon" />
|
||||
icon: <IconPdf className="w-4 h-auto" />
|
||||
},
|
||||
image: {
|
||||
title: "Images",
|
||||
icon: <IconImage className="icon" />
|
||||
icon: <IconImage className="w-4 h-auto" />
|
||||
},
|
||||
audio: {
|
||||
title: "Audio",
|
||||
icon: <IconAudio className="icon" />
|
||||
icon: <IconAudio className="w-4 h-auto" />
|
||||
},
|
||||
video: {
|
||||
title: "Videos",
|
||||
icon: <IconVideo className="icon" />
|
||||
icon: <IconVideo className="w-4 h-auto" />
|
||||
},
|
||||
code: {
|
||||
title: "Code Snippets",
|
||||
icon: <IconCode className="icon" />
|
||||
icon: <IconCode className="w-4 h-auto" />
|
||||
},
|
||||
unknown: {
|
||||
title: "Unknown Files",
|
||||
icon: <IconUnknown className="icon" />
|
||||
icon: <IconUnknown className="w-4 h-auto" />
|
||||
}
|
||||
};
|
||||
type Props = {
|
||||
@@ -86,23 +46,24 @@ const Type: FC<Props> = ({ select = "", updateFilter }) => {
|
||||
const handleClick = (type?: string) => {
|
||||
updateFilter({ type });
|
||||
};
|
||||
|
||||
return (
|
||||
<Styled>
|
||||
<ul className="list">
|
||||
<li className="type" onClick={handleClick.bind(null, undefined)}>
|
||||
<div className="p-3 bg-white min-w-[100px] 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)}>
|
||||
Any Type
|
||||
{!select && <CheckSign className="check" />}
|
||||
</li>
|
||||
{Object.entries(FileTypes).map(([type, { title, icon }]) => {
|
||||
return (
|
||||
<li key={title} className="type" onClick={handleClick.bind(null, type)}>
|
||||
<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="check" />}
|
||||
{select == type && <CheckSign className="absolute right-0 left-1/2 -translate-y-1/2" />}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</Styled>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default Type;
|
||||
|
||||
@@ -10,9 +10,9 @@ interface Props {
|
||||
const SentTip: FC<Props> = ({ email, reset }) => {
|
||||
const { t } = useTranslation("auth");
|
||||
return (
|
||||
<div className="tips">
|
||||
<h2 className="title">{t("check_email")}</h2>
|
||||
<span className="desc">
|
||||
<div className="flex flex-col items-center">
|
||||
<h2 className="font-semibold text-2xl text-gray-800 mb-2">{t("check_email")}</h2>
|
||||
<span className="text-center text-gray-500 mb-6">
|
||||
{t("check_email_desc", { email })}
|
||||
</span>
|
||||
<Button onClick={reset} className="main flex">
|
||||
|
||||
@@ -2,13 +2,13 @@ import { useState, useEffect, ChangeEvent, FormEvent } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import toast from "react-hot-toast";
|
||||
import BASE_URL from "../../app/config";
|
||||
import StyledWrapper from "./styled";
|
||||
import Input from "../../common/component/styled/Input";
|
||||
import Button from "../../common/component/styled/Button";
|
||||
import { useSendLoginMagicLinkMutation } from "../../app/services/auth";
|
||||
import SentTip from "./SentTip";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import SocialLoginButtons from "../login/SocialLoginButtons";
|
||||
import Divider from "../../common/component/Divider";
|
||||
|
||||
export default function SendMagicLinkPage() {
|
||||
const { t } = useTranslation("auth");
|
||||
@@ -62,20 +62,19 @@ export default function SendMagicLinkPage() {
|
||||
setEmail("");
|
||||
setSent(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<StyledWrapper>
|
||||
<div className="form">
|
||||
<div className="flex-center h-screen">
|
||||
<div className="py-8 px-10 shadow rounded-xl">
|
||||
{sent ? (
|
||||
<SentTip email={email} reset={handleReset} />
|
||||
) : (
|
||||
<>
|
||||
<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("placeholder_email")}</span>
|
||||
<div className="flex flex-col items-center">
|
||||
<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 mb-2">{t("login.title")}</h2>
|
||||
<span className="text-center text-gray-500 mb-6">{t("placeholder_email")}</span>
|
||||
</div>
|
||||
<form onSubmit={handleLogin}>
|
||||
<form onSubmit={handleLogin} className="flex flex-col gap-5 w-[360px]">
|
||||
<Input
|
||||
type="email"
|
||||
className="large"
|
||||
@@ -91,14 +90,14 @@ export default function SendMagicLinkPage() {
|
||||
{isLoading ? "Sending" : t("continue")}
|
||||
</Button>
|
||||
</form>
|
||||
<hr className="or" />
|
||||
<Divider content="or" />
|
||||
<div className="flex flex-col gap-3 py-3">
|
||||
<SocialLoginButtons />
|
||||
</div>
|
||||
<Button onClick={handlePwdPath}>{t("login.password")}</Button>
|
||||
<Button onClick={handlePwdPath} className="flex">{t("login.password")}</Button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</StyledWrapper>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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: 32px 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;
|
||||
.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 {
|
||||
text-align: center;
|
||||
font-weight: normal;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
color: #667085;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
}
|
||||
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;
|
||||
}
|
||||
}
|
||||
button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export default StyledWrapper;
|
||||
@@ -44,7 +44,7 @@ const LicensePriceListModal: FC<Props> = ({ closeModal }) => {
|
||||
const { t } = useTranslation("setting");
|
||||
const { t: ct } = useTranslation();
|
||||
const [getUrl, { isLoading, isSuccess }] = useGetLicensePaymentUrlMutation();
|
||||
const [host, setHost] = useState(location.host);
|
||||
const [host, setHost] = useState(location.hostname);
|
||||
const [popUpVisible, setPopUpVisible] = useState(false);
|
||||
const [selectPrice, setSelectPrice] = useState(
|
||||
`${LicensePriceList[0].pid}|${LicensePriceList[0].limit}|${LicensePriceList[0].type}|${LicensePriceList[0].sub_dur || ""}`
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { ChangeEvent, FC, useEffect, useState } from "react";
|
||||
import styled from "styled-components";
|
||||
import toast from "react-hot-toast";
|
||||
import Modal from "../../common/component/Modal";
|
||||
import StyledModal from "../../common/component/styled/Modal";
|
||||
@@ -8,25 +7,6 @@ import Checkbox from "../../common/component/styled/Checkbox";
|
||||
import useLogout from "../../common/hook/useLogout";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
const StyledConfirm = styled(StyledModal)`
|
||||
.clear {
|
||||
font-weight: normal;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #6b7280;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
.txt {
|
||||
cursor: pointer;
|
||||
color: orange;
|
||||
margin-right: 12px;
|
||||
}
|
||||
input {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
interface Props {
|
||||
closeModal: () => void;
|
||||
@@ -56,7 +36,7 @@ const LogoutConfirmModal: FC<Props> = ({ closeModal }) => {
|
||||
|
||||
return (
|
||||
<Modal id="modal-modal">
|
||||
<StyledConfirm
|
||||
<StyledModal
|
||||
title={t("logout.title")}
|
||||
description={t("logout.desc")}
|
||||
buttons={
|
||||
@@ -68,13 +48,13 @@ const LogoutConfirmModal: FC<Props> = ({ closeModal }) => {
|
||||
</>
|
||||
}
|
||||
>
|
||||
<div className="clear">
|
||||
<label htmlFor="clear_cb" className="txt">
|
||||
<div className="text-sm text-gray-400 flex justify-end items-center">
|
||||
<label htmlFor="clear_cb" className="cursor-pointer text-orange-500 mr-3">
|
||||
{t("logout.clear_local")}
|
||||
</label>
|
||||
<Checkbox name="clear_cb" checked={clearLocal} onChange={handleCheck} />
|
||||
<Checkbox className=" cursor-pointer" name="clear_cb" checked={clearLocal} onChange={handleCheck} />
|
||||
</div>
|
||||
</StyledConfirm>
|
||||
</StyledModal>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,105 +1,14 @@
|
||||
import { useEffect, useState, MouseEvent } from "react";
|
||||
import styled from "styled-components";
|
||||
import toast from "react-hot-toast";
|
||||
import { useUpdateAvatarMutation } from "../../app/services/user";
|
||||
import AvatarUploader from "../../common/component/AvatarUploader";
|
||||
import Button from "../../common/component/styled/Button";
|
||||
import ProfileBasicEditModal from "./ProfileBasicEditModal";
|
||||
import RemoveAccountConfirmModal from "./RemoveAccountConfirmModal";
|
||||
import UpdatePasswordModal from "./UpdatePasswordModal";
|
||||
import { useAppSelector } from "../../app/store";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
const StyledWrapper = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 32px;
|
||||
.card {
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 512px;
|
||||
background: #f3f4f6;
|
||||
border-radius: 20px;
|
||||
.name {
|
||||
margin-top: 8px;
|
||||
margin-bottom: 64px;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
line-height: 28px;
|
||||
color: #27272a;
|
||||
.uid {
|
||||
font-weight: normal;
|
||||
color: #52525b;
|
||||
}
|
||||
}
|
||||
.row {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 24px;
|
||||
.info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.label {
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
text-transform: uppercase;
|
||||
color: #52525b;
|
||||
}
|
||||
.txt {
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #52525b;
|
||||
.gray {
|
||||
color: #78787c;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
background: #1fe1f9;
|
||||
border: 1px solid #1fe1f9;
|
||||
}
|
||||
}
|
||||
}
|
||||
.danger {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
.head {
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
color: #374151;
|
||||
}
|
||||
.desc {
|
||||
font-weight: normal;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
color: #616161;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.btn {
|
||||
background: #ef4444;
|
||||
border: 1px solid #ef4444;
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
color: #fff;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
padding: 8px 14px;
|
||||
background: #1fe1f9;
|
||||
border: 1px solid #1fe1f9;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
|
||||
border-radius: 8px;
|
||||
}
|
||||
`;
|
||||
type EditField = "name" | "email" | "";
|
||||
export default function MyAccount() {
|
||||
const { t } = useTranslation("member");
|
||||
@@ -151,51 +60,49 @@ export default function MyAccount() {
|
||||
const { uid, avatar, name, email } = loginUser;
|
||||
return (
|
||||
<>
|
||||
<StyledWrapper>
|
||||
<div className="card">
|
||||
<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">
|
||||
<AvatarUploader url={avatar} name={name} uploadImage={uploadAvatar} />
|
||||
<div className="name">
|
||||
{name} <span className="uid">#{uid}</span>
|
||||
<div className="mt-2 mb-16 font-bold text-lg text-gray-800">
|
||||
{name} <span className="font-normal text-gray-500">#{uid}</span>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="info">
|
||||
<span className="label">{t("username")}</span>
|
||||
<span className="txt">
|
||||
{name} <span className="gray"> #{uid}</span>
|
||||
<div className="w-full flex justify-between mb-6">
|
||||
<div className="flex flex-col text-gray-500">
|
||||
<span className="text-xs uppercase font-semibold">{t("username")}</span>
|
||||
<span className="text-sm ">
|
||||
{name} <span className="text-gray-600"> #{uid}</span>
|
||||
</span>
|
||||
</div>
|
||||
<button data-edit="name" onClick={handleBasicEdit} className="btn">
|
||||
<Button data-edit="name" onClick={handleBasicEdit} className="">
|
||||
{ct("action.edit")}
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="info">
|
||||
<span className="label">{t("email")}</span>
|
||||
<span className="txt">{email}</span>
|
||||
<div className="w-full flex justify-between mb-6">
|
||||
<div className="flex flex-col text-gray-500">
|
||||
<span className="text-xs uppercase font-semibold">{t("email")}</span>
|
||||
<span className="text-sm">{email}</span>
|
||||
</div>
|
||||
<button data-edit="email" onClick={handleBasicEdit} className="btn">
|
||||
<Button data-edit="email" onClick={handleBasicEdit}>
|
||||
{ct("action.edit")}
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="info">
|
||||
<span className="label">{t("password")}</span>
|
||||
<span className="txt">*********</span>
|
||||
<div className="w-full flex justify-between mb-6">
|
||||
<div className="flex flex-col text-gray-500">
|
||||
<span className="text-xs uppercase font-semibold">{t("password")}</span>
|
||||
<span className="text-sm">*********</span>
|
||||
</div>
|
||||
<button onClick={togglePasswordModal} className="btn">
|
||||
<Button onClick={togglePasswordModal}>
|
||||
{ct("action.edit")}
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
{/* uid 1 是初始账户，不能删 */}
|
||||
{uid != 1 && (
|
||||
<div className="danger">
|
||||
<button className="btn" onClick={toggleRemoveAccountModalVisible}>
|
||||
{t("delete_account")}
|
||||
</button>
|
||||
</div>
|
||||
<Button className="danger" onClick={toggleRemoveAccountModalVisible}>
|
||||
{t("delete_account")}
|
||||
</Button>
|
||||
)}
|
||||
</StyledWrapper>
|
||||
</div>
|
||||
{editModal && (
|
||||
<ProfileBasicEditModal
|
||||
type={editModal == "email" ? "email" : "text"}
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { ChangeEvent, useEffect, useState, FC } from "react";
|
||||
import styled from "styled-components";
|
||||
import toast from "react-hot-toast";
|
||||
import Input from "../../common/component/styled/Input";
|
||||
import { useUpdatePasswordMutation, useGetCredentialsQuery } from "../../app/services/auth";
|
||||
@@ -8,21 +7,6 @@ import Button from "../../common/component/styled/Button";
|
||||
import Modal from "../../common/component/Modal";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
const StyledEdit = styled(StyledModal)`
|
||||
.input {
|
||||
margin: 16px 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
label {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #6b7280;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
interface Props {
|
||||
closeModal: () => void;
|
||||
@@ -75,9 +59,12 @@ const ProfileBasicEditModal: FC<Props> = ({ closeModal }) => {
|
||||
!confirmPassword ||
|
||||
newPassword !== confirmPassword ||
|
||||
isLoading;
|
||||
|
||||
const inputClass = `my-4 w-full flex flex-col gap-2`;
|
||||
const labelClass = `text-gray-400 font-semibold`;
|
||||
return (
|
||||
<Modal id="modal-modal">
|
||||
<StyledEdit
|
||||
<StyledModal
|
||||
title={t("change_pwd")}
|
||||
description={t("change_pwd_desc")}
|
||||
buttons={
|
||||
@@ -92,8 +79,8 @@ const ProfileBasicEditModal: FC<Props> = ({ closeModal }) => {
|
||||
}
|
||||
>
|
||||
{data?.password && (
|
||||
<div className="input">
|
||||
<label htmlFor={"current"}>{t("current_pwd")}</label>
|
||||
<div className={inputClass}>
|
||||
<label className={labelClass} htmlFor={"current"}>{t("current_pwd")}</label>
|
||||
<Input
|
||||
type="password"
|
||||
id="current"
|
||||
@@ -104,8 +91,8 @@ const ProfileBasicEditModal: FC<Props> = ({ closeModal }) => {
|
||||
></Input>
|
||||
</div>
|
||||
)}
|
||||
<div className="input">
|
||||
<label htmlFor={"newPassword"}>{t("new_pwd")}</label>
|
||||
<div className={inputClass}>
|
||||
<label className={labelClass} htmlFor={"newPassword"}>{t("new_pwd")}</label>
|
||||
<Input
|
||||
type="password"
|
||||
name={"newPassword"}
|
||||
@@ -114,8 +101,8 @@ const ProfileBasicEditModal: FC<Props> = ({ closeModal }) => {
|
||||
onChange={handleChange}
|
||||
></Input>
|
||||
</div>
|
||||
<div className="input">
|
||||
<label htmlFor={"confirmPassword"}>{t("confirm_new_pwd")}</label>
|
||||
<div className={inputClass}>
|
||||
<label className={labelClass} htmlFor={"confirmPassword"}>{t("confirm_new_pwd")}</label>
|
||||
<Input
|
||||
onBlur={handleCompare}
|
||||
type="password"
|
||||
@@ -125,7 +112,7 @@ const ProfileBasicEditModal: FC<Props> = ({ closeModal }) => {
|
||||
onChange={handleChange}
|
||||
></Input>
|
||||
</div>
|
||||
</StyledEdit>
|
||||
</StyledModal>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { useState, useEffect, ChangeEvent } from "react";
|
||||
import styled from "styled-components";
|
||||
import toast from "react-hot-toast";
|
||||
import {
|
||||
useChangeChannelTypeMutation,
|
||||
@@ -13,41 +12,11 @@ import Label from "../../common/component/styled/Label";
|
||||
import Radio from "../../common/component/styled/Radio";
|
||||
import Textarea from "../../common/component/styled/Textarea";
|
||||
import SaveTip from "../../common/component/SaveTip";
|
||||
import channelIcon from "../../assets/icons/channel.svg?url";
|
||||
import IconChannel from "../../assets/icons/channel.svg";
|
||||
import { useAppSelector } from "../../app/store";
|
||||
import { Channel } from "../../types/channel";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
const StyledWrapper = styled.div`
|
||||
position: relative;
|
||||
width: 512px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
.inputs {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 24px;
|
||||
.input {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
.name {
|
||||
padding-left: 36px;
|
||||
background-image: url(${channelIcon});
|
||||
background-size: 20px;
|
||||
background-position-x: 8px;
|
||||
background-position-y: 8px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
`;
|
||||
export default function Overview({ id = 0 }) {
|
||||
const { t } = useTranslation("setting", { keyPrefix: "channel" });
|
||||
const { t: ct } = useTranslation();
|
||||
@@ -119,16 +88,16 @@ export default function Overview({ id = 0 }) {
|
||||
if (!values || !id) return null;
|
||||
const { name, description } = values;
|
||||
const readOnly = !loginUser?.is_admin && channel?.owner != loginUser?.uid;
|
||||
|
||||
const inputClass = `w-full flex flex-col items-start gap-2 relative`;
|
||||
return (
|
||||
<StyledWrapper>
|
||||
<div className="relative w-[512px] flex flex-col gap-6 h-full">
|
||||
<AvatarUploader type="channel" url={channel?.icon} name={name} uploadImage={updateIcon} />
|
||||
<div className="inputs">
|
||||
<div className="input">
|
||||
<div className="flex flex-col gap-6 items-start">
|
||||
<div className={inputClass}>
|
||||
<Label htmlFor="name">{t("name")}</Label>
|
||||
<Input
|
||||
disabled={readOnly}
|
||||
className="name"
|
||||
className="!pl-8"
|
||||
data-type="name"
|
||||
onChange={handleChange}
|
||||
value={name}
|
||||
@@ -136,8 +105,9 @@ export default function Overview({ id = 0 }) {
|
||||
id="name"
|
||||
placeholder={t("name")}
|
||||
/>
|
||||
<IconChannel className="absolute bottom-2.5 left-2" />
|
||||
</div>
|
||||
<div className="input">
|
||||
<div className={inputClass}>
|
||||
<Label htmlFor="desc">{t("topic")}</Label>
|
||||
<Textarea
|
||||
disabled={readOnly}
|
||||
@@ -149,7 +119,7 @@ export default function Overview({ id = 0 }) {
|
||||
id="name"
|
||||
placeholder={t("topic_placeholder")} />
|
||||
</div>
|
||||
{!readOnly && <div className="input">
|
||||
{!readOnly && <div className={inputClass}>
|
||||
<Label htmlFor="desc">{t("visibility")}</Label>
|
||||
<Radio
|
||||
options={[t("public"), t("private")]}
|
||||
@@ -164,6 +134,6 @@ export default function Overview({ id = 0 }) {
|
||||
</div>}
|
||||
</div>
|
||||
{changed && <SaveTip saveHandler={handleUpdate} resetHandler={handleReset} />}
|
||||
</StyledWrapper>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import styled from "styled-components";
|
||||
import Tippy from "@tippyjs/react";
|
||||
import searchIcon from "../../assets/icons/search.svg?url";
|
||||
import addIcon from "../../assets/icons/add.svg?url";
|
||||
@@ -6,31 +5,6 @@ import AddEntriesMenu from "../../common/component/AddEntriesMenu";
|
||||
import Tooltip from "../../common/component/Tooltip";
|
||||
import { FC, ChangeEvent } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
const StyledWrapper = styled.div`
|
||||
position: relative;
|
||||
min-height: 56px;
|
||||
padding: 6px 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
|
||||
.search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
.input {
|
||||
width: 100%;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: none;
|
||||
font-weight: normal;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
`;
|
||||
type Props = {
|
||||
input: string,
|
||||
updateInput: (input: string) => void
|
||||
@@ -41,17 +15,17 @@ const Search: FC<Props> = ({ input, updateInput }) => {
|
||||
updateInput(evt.target.value);
|
||||
};
|
||||
return (
|
||||
<StyledWrapper>
|
||||
<div className="search">
|
||||
<div className="relative min-h-[56px] px-2 py-3 flex items-center justify-between gap-2 shadow">
|
||||
<div className="flex items-center gap-1">
|
||||
<img src={searchIcon} alt="search icon" />
|
||||
<input value={input} placeholder={`${t("action.search")}...`} className="input" onChange={handleInput} />
|
||||
<input value={input} placeholder={`${t("action.search")}...`} className="w-full text-sm" onChange={handleInput} />
|
||||
</div>
|
||||
<Tooltip tip={t("more")} placement="bottom">
|
||||
<Tippy interactive placement="bottom-end" trigger="click" content={<AddEntriesMenu />}>
|
||||
<img src={addIcon} alt="add icon" className="cursor-pointer" />
|
||||
</Tippy>
|
||||
</Tooltip>
|
||||
</StyledWrapper>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default Search;
|
||||
|
||||
Reference in New Issue
Block a user