From c5669f8bc4c1961989df04b910443ad8ea7d6ee0 Mon Sep 17 00:00:00 2001 From: Tristan Yang Date: Tue, 7 Feb 2023 09:25:05 +0800 Subject: [PATCH] refactor: more tailwind --- public/index.html | 5 +- src/assets/icons/folder.svg | 4 +- src/assets/icons/user.svg | 4 +- src/assets/index.css | 144 +++++++++++++++++- src/common/component/Avatar.tsx | 48 +++--- src/common/component/ChannelModal/index.tsx | 8 +- src/common/component/ContextMenu.tsx | 5 +- src/common/component/FileBox/index.tsx | 36 ++--- src/common/component/FileBox/styled.tsx | 72 --------- src/common/component/ForwardModal/index.tsx | 40 ++--- src/common/component/ForwardModal/styled.tsx | 107 ------------- src/common/component/GithubLoginButton.tsx | 2 +- src/common/component/ManageMembers/index.tsx | 9 +- src/common/component/Message/EditMessage.tsx | 60 ++------ .../component/Message/ForwardedMessage.tsx | 33 +--- src/common/component/Message/Reaction.tsx | 119 ++------------- .../component/Message/ReactionPicker.tsx | 40 +---- src/common/component/Message/Reply.tsx | 114 ++------------ src/common/component/MixedInput/index.tsx | 2 +- src/common/component/Profile/index.tsx | 5 +- src/common/component/ReactionItem.tsx | 16 +- src/common/component/Send/Replying.tsx | 91 ++--------- src/common/component/Send/index.tsx | 16 +- src/common/component/Send/styled.tsx | 37 ----- src/common/component/styled/Button.tsx | 85 +++-------- src/common/component/styled/Menu.tsx | 78 ---------- src/common/component/styled/Radio.tsx | 78 ++-------- src/common/component/styled/Select.tsx | 5 +- src/common/component/styled/Toggle.tsx | 46 ++---- src/index.tsx | 13 +- src/routes/chat/ChannelChat/index.tsx | 25 ++- src/routes/chat/ChannelChat/styled.tsx | 85 ----------- src/routes/chat/Layout/index.tsx | 7 +- src/routes/chat/Layout/styled.tsx | 15 +- src/routes/home/index.tsx | 58 ++++--- src/routes/home/styled.tsx | 66 -------- src/routes/setting/APIConfig.tsx | 2 +- src/routes/setting/LogoutConfirmModal.tsx | 2 +- src/routes/setting/Overview/index.tsx | 4 +- src/routes/setting/ProfileBasicEditModal.tsx | 2 +- src/routes/setting/config/Agora.tsx | 7 +- src/routes/setting/config/Firebase.tsx | 5 +- .../setting/config/IssuerList/index.tsx | 2 +- src/routes/setting/config/Logins.tsx | 15 +- src/routes/setting/config/SMTP.tsx | 11 +- src/routes/setting/config/StyledContainer.tsx | 67 -------- src/routes/users/index.tsx | 16 +- src/routes/users/styled.tsx | 50 ------ 48 files changed, 447 insertions(+), 1314 deletions(-) delete mode 100644 src/common/component/FileBox/styled.tsx delete mode 100644 src/common/component/ForwardModal/styled.tsx delete mode 100644 src/common/component/Send/styled.tsx delete mode 100644 src/common/component/styled/Menu.tsx delete mode 100644 src/routes/chat/ChannelChat/styled.tsx delete mode 100644 src/routes/home/styled.tsx delete mode 100644 src/routes/setting/config/StyledContainer.tsx delete mode 100644 src/routes/users/styled.tsx diff --git a/public/index.html b/public/index.html index 051ccc76..7977ba1c 100644 --- a/public/index.html +++ b/public/index.html @@ -2,7 +2,10 @@ - + diff --git a/src/assets/icons/folder.svg b/src/assets/icons/folder.svg index 5530e8ac..e792b0b7 100644 --- a/src/assets/icons/folder.svg +++ b/src/assets/icons/folder.svg @@ -1,3 +1,3 @@ - - + + diff --git a/src/assets/icons/user.svg b/src/assets/icons/user.svg index f7e26675..0038c970 100644 --- a/src/assets/icons/user.svg +++ b/src/assets/icons/user.svg @@ -1,3 +1,3 @@ - - + + diff --git a/src/assets/index.css b/src/assets/index.css index f5cb5bf5..3cf17a9b 100644 --- a/src/assets/index.css +++ b/src/assets/index.css @@ -30,8 +30,9 @@ .md-editor { position: relative; width: 100%; - width: -webkit-fill-available; + /* width: -webkit-fill-available; */ margin-top: 16px; + grid-column: span 2; } .md-editor > div { transition: height 0.5s ease 0s; @@ -63,6 +64,147 @@ bottom: 15px; right: 15px; } + /* setting container */ + .setting-container { + position: relative; + width: 512px; + height: 100%; + display: flex; + flex-direction: column; + gap: 24px; + } + .setting-container .inputs { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 32px; + } + .setting-container .inputs .input { + width: 100%; + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 16px; + } + .setting-container .inputs .input .row { + width: 100%; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + } + .setting-container .inputs .input .row.inputs { + flex-direction: column; + gap: 8px; + } + .setting-container .inputs .input .row .title { + display: flex; + flex-direction: column; + align-items: flex-start; + } + .setting-container .inputs .input .row .title .txt { + display: flex; + flex-direction: row; + align-items: center; + gap: 8px; + } + .setting-container .inputs .input .row .title .txt .icon { + cursor: pointer; + } + .setting-container .inputs .input .row .title .desc { + font-weight: 400; + font-size: 14px; + line-height: 20px; + color: #667085; + } + .setting-container .tip { + display: flex; + gap: 8px; + align-items: center; + } + .setting-container .tip .link { + font-weight: 600; + font-size: 14px; + line-height: 20px; + color: #06b6d4; + } + /* context menu */ + .context-menu { + display: flex; + flex-direction: column; + gap: 2px; + padding: 4px; + background-color: #fff; + box-shadow: 0 20px 25px 20px rgba(31, 41, 55, 0.1), 0 10px 10px rgba(31, 41, 55, 0.04); + border-radius: 12px; + min-width: 200px; + } + .context-menu .item { + position: relative; + display: flex; + align-items: center; + gap: 14px; + white-space: nowrap; + cursor: pointer; + border-radius: 6px; + padding: 6px; + font-style: normal; + font-weight: 600; + font-size: 14px; + line-height: 20px; + color: #616161; + } + .context-menu .item .icon { + width: 20px; + height: 20px; + } + .context-menu .item .icon path { + fill: #475467; + } + .context-menu .item.sb { + justify-content: space-between; + } + .context-menu .item:hover { + background-color: #22ccee; + color: #fff; + } + .context-menu .item:hover .icon path { + fill: #fff; + } + .context-menu .item.bottom_line { + margin-bottom: 9px; + } + .context-menu .item.bottom_line:before { + position: absolute; + content: ""; + left: 6px; + bottom: -4px; + display: block; + padding: 0 6px; + box-sizing: border-box; + width: calc(88%); + height: 1px; + background-color: #f2f4f7; + } + .context-menu .item.danger { + color: #a11043; + } + .context-menu .item.danger:hover { + background-color: #b42318; + color: #fff; + } + .context-menu .item[data-disabled="true"] { + color: #a4a8b3; + } + .context-menu .item[data-disabled="true"] .icon path { + fill: #a4a8b3; + } + /* text fill transparent */ + .text-fill-transparent { + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + text-fill-color: transparent; + } } /* 全局设置滚动条 */ ::-webkit-scrollbar-thumb { diff --git a/src/common/component/Avatar.tsx b/src/common/component/Avatar.tsx index 8f8448af..f650c0df 100644 --- a/src/common/component/Avatar.tsx +++ b/src/common/component/Avatar.tsx @@ -1,4 +1,4 @@ -import { FC, ImgHTMLAttributes } from "react"; +import { FC, ImgHTMLAttributes, useEffect, useState } from "react"; import { getInitials } from "../utils"; interface Props extends ImgHTMLAttributes { @@ -29,26 +29,34 @@ const Avatar: FC = ({ height, ...rest }) => { - if (src && src.length !== 0) { - return ; - } else { - return ( -
- {getInitials(name)} -
- ); + const [avatarSrc, setAvatarSrc] = useState(""); + useEffect(() => { + if (!src) { + setAvatarSrc(src); + } + }, [src]); + const handleError = () => { + setAvatarSrc(""); + }; + if (avatarSrc) { + return ; } + return ( +
+ {getInitials(name)} +
+ ); }; export default Avatar; diff --git a/src/common/component/ChannelModal/index.tsx b/src/common/component/ChannelModal/index.tsx index 389d1593..13792a3a 100644 --- a/src/common/component/ChannelModal/index.tsx +++ b/src/common/component/ChannelModal/index.tsx @@ -139,18 +139,18 @@ const ChannelModal: FC = ({ personal = false, closeModal }) => { ? t("create_private_channel_desc") : t("create_channel_desc")}

-
+
{t("channel_name")}
-
+
{t("private_channel")}
diff --git a/src/common/component/ContextMenu.tsx b/src/common/component/ContextMenu.tsx index 943caf82..4c683be2 100644 --- a/src/common/component/ContextMenu.tsx +++ b/src/common/component/ContextMenu.tsx @@ -1,5 +1,4 @@ import { FC, ReactElement } from "react"; -import StyledMenu from "./styled/Menu"; export interface Item { title: string; @@ -16,7 +15,7 @@ interface Props { const ContextMenu: FC = ({ items = [], hideMenu = null }) => { return ( - +
    {items.map((item) => { // if (!item) return null; const { @@ -49,7 +48,7 @@ const ContextMenu: FC = ({ items = [], hideMenu = null }) => { ); })} - +
); }; diff --git a/src/common/component/FileBox/index.tsx b/src/common/component/FileBox/index.tsx index ebce418e..937c6939 100644 --- a/src/common/component/FileBox/index.tsx +++ b/src/common/component/FileBox/index.tsx @@ -1,6 +1,6 @@ import { FC, ReactElement } from "react"; import dayjs from "dayjs"; -import Styled from "./styled"; +import clsx from "clsx"; import { VideoPreview, AudioPreview, @@ -80,33 +80,33 @@ const FileBox: FC = ({ content }) => { const fromUser = useAppSelector((store) => store.users.byId[from_uid]); - const icon = getFileIcon(file_type, name); + const icon = getFileIcon(file_type, name, "icon w-9 h-12"); if (!content || !fromUser || !name) return null; const previewContent = renderPreview({ file_type, content, name }); const withPreview = preview && previewContent; + return ( - -
+
{icon} -
- {name} - - {formatBytes(size)} - {dayjs(created_at).fromNow()} - - by {fromUser.name} - - +
+ {name} + + {formatBytes(size)} + {dayjs(created_at).fromNow()} + + by {fromUser.name} + +
- +
- {withPreview &&
{previewContent}
} - + {withPreview &&
{previewContent}
} +
); }; diff --git a/src/common/component/FileBox/styled.tsx b/src/common/component/FileBox/styled.tsx deleted file mode 100644 index a2a79afc..00000000 --- a/src/common/component/FileBox/styled.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import styled from "styled-components"; - -const Styled = styled.div` - background: #f3f4f6; - border: 1px solid #d4d4d4; - box-sizing: border-box; - border-radius: 6px; - width: 370px; - height: 66px; - * { - user-select: text; - } - &.flex { - width: 100%; - } - &.preview { - position: relative; - overflow: hidden; - height: 281px; - &.audio { - height: 125px; - } - } - .basic { - width: 100%; - padding: 8px; - display: flex; - align-items: center; - justify-content: space-between; - gap: 8px; - .icon { - width: 36px; - height: 48px; - } - .info { - display: flex; - flex-direction: column; - gap: 4px; - width: 100%; - overflow: hidden; - .name { - font-weight: 600; - font-size: 14px; - line-height: 20px; - color: #1c1c1e; - white-space: nowrap; - text-overflow: ellipsis; - } - .details { - font-weight: 400; - font-size: 12px; - line-height: 18px; - color: #616161; - display: flex; - gap: 16px; - .from strong { - font-weight: bold; - } - } - } - .download { - white-space: nowrap; - } - } - .preview { - height: calc(100% - 64px); - overflow: hidden; - /* todo */ - } -`; - -export default Styled; diff --git a/src/common/component/ForwardModal/index.tsx b/src/common/component/ForwardModal/index.tsx index 531cce05..a64eac42 100644 --- a/src/common/component/ForwardModal/index.tsx +++ b/src/common/component/ForwardModal/index.tsx @@ -1,25 +1,26 @@ import { useState, MouseEvent, ChangeEvent, FC } from "react"; -// import toast from "react-hot-toast"; +import toast from "react-hot-toast"; + import Modal from "../Modal"; import Button from "../styled/Button"; import Input from "../styled/Input"; import Channel from "../Channel"; import User from "../User"; import Reply from "../Message/Reply"; -import StyledWrapper from "./styled"; import useForwardMessage from "../../hook/useForwardMessage"; import useSendMessage from "../../hook/useSendMessage"; import useFilteredChannels from "../../hook/useFilteredChannels"; import useFilteredUsers from "../../hook/useFilteredUsers"; import CloseIcon from "../../../assets/icons/close.circle.svg"; import StyledCheckbox from "../styled/Checkbox"; -import toast from "react-hot-toast"; +import { useTranslation } from "react-i18next"; interface IProps { mids: number[]; closeModal: () => void; } const ForwardModal: FC = ({ mids, closeModal }) => { + const { t } = useTranslation(); const [appendText, setAppendText] = useState(""); const { sendMessages } = useSendMessage(); const { forwardMessage, forwarding } = useForwardMessage(); @@ -74,16 +75,17 @@ const ForwardModal: FC = ({ mids, closeModal }) => { (selectedChannels.length == 0 && selectedMembers.length == 0) || forwarding; return ( - -
-
+
+
+
-
    +
      {channels && channels.map((c) => { const { gid } = c; @@ -93,7 +95,7 @@ const ForwardModal: FC = ({ mids, closeModal }) => { key={gid} data-type="channel" data-id={gid} - className="user channel" + className="cursor-pointer flex items-center px-4 rounded hover:bg-gray-600/10" onClick={toggleCheck} > @@ -110,7 +112,7 @@ const ForwardModal: FC = ({ mids, closeModal }) => { key={uid} data-id={uid} data-type="user" - className="user" + className="cursor-pointer flex items-center px-4 rounded hover:bg-gray-600/10" onClick={toggleCheck} > @@ -120,15 +122,15 @@ const ForwardModal: FC = ({ mids, closeModal }) => { })}
-
-

Send To {selectedCount}

-
    +
    +

    Send To {selectedCount}

    +
      {selectedChannels.map((cid) => { return ( -
    • +
      • @@ -143,27 +145,27 @@ const ForwardModal: FC = ({ mids, closeModal }) => { ); })}
    -
    +
    {mids.map((mid) => ( ))}
    -
    +
    - +
    ); }; diff --git a/src/common/component/ForwardModal/styled.tsx b/src/common/component/ForwardModal/styled.tsx deleted file mode 100644 index d538d6f0..00000000 --- a/src/common/component/ForwardModal/styled.tsx +++ /dev/null @@ -1,107 +0,0 @@ -import styled from "styled-components"; - -const StyledWrapper = styled.div` - display: flex; - max-height: 514px; - min-height: 400px; - background: #fff; - box-shadow: 0px 25px 50px rgba(31, 41, 55, 0.25); - border-radius: var(--br); - transition: all 0.5s ease; - overflow: hidden; - .left { - width: 276px; - box-shadow: inset -1px 0px 0px rgba(0, 0, 0, 0.1); - overflow-y: scroll; - .search { - position: sticky; - top: 0; - z-index: 99; - background: #fff; - box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1); - padding: 16px; - width: calc(100% - 1px); - input { - outline: none; - width: -webkit-fill-available; - padding: 10px 8px; - font-size: 14px; - line-height: 20px; - background: rgba(0, 0, 0, 0.08); - border-radius: var(--br); - } - } - .users { - display: flex; - flex-direction: column; - padding-bottom: 20px; - .user { - cursor: pointer; - display: flex; - align-items: center; - padding: 0 16px; - width: -webkit-fill-available; - border-radius: 4px; - &:hover { - background: rgba(116, 127, 141, 0.1); - } - > div { - width: 100%; - } - } - } - } - .right { - display: flex; - flex-direction: column; - align-items: flex-start; - padding: 16px; - box-sizing: border-box; - .title { - font-weight: 600; - font-size: 14px; - line-height: 20px; - color: #344054; - margin-bottom: 16px; - } - .selected { - width: 100%; - height: 260px; - padding: 10px 0; - overflow: scroll; - .item { - position: relative; - .remove { - cursor: pointer; - position: absolute; - right: 5px; - top: 50%; - transform: translateY(-50%); - } - } - } - .msgs { - border-radius: var(--br); - padding: 8px; - max-height: 200px; - overflow: auto; - background-color: #f4f4f5; - width: 280px; - margin-bottom: 4px; - > .reply { - background: none; - } - } - .input { - margin-bottom: 32px; - } - .btns { - width: 100%; - display: flex; - align-items: center; - justify-content: flex-end; - gap: 16px; - } - } -`; -export default StyledWrapper; diff --git a/src/common/component/GithubLoginButton.tsx b/src/common/component/GithubLoginButton.tsx index ce56ac68..8039bfae 100644 --- a/src/common/component/GithubLoginButton.tsx +++ b/src/common/component/GithubLoginButton.tsx @@ -45,7 +45,7 @@ const GithubLoginButton: FC = ({ type = "login", source = "webapp", clien }; return ( - diff --git a/src/common/component/ManageMembers/index.tsx b/src/common/component/ManageMembers/index.tsx index 7985d691..b35cffef 100644 --- a/src/common/component/ManageMembers/index.tsx +++ b/src/common/component/ManageMembers/index.tsx @@ -4,7 +4,6 @@ import { hideAll } from "tippy.js"; import toast from "react-hot-toast"; import { useUpdateUserMutation } from "../../../app/services/user"; import User from "../User"; -import StyledMenu from "../styled/Menu"; import InviteLink from "../InviteLink"; import moreIcon from "../../../assets/icons/more.svg?url"; import IconOwner from "../../../assets/icons/owner.svg"; @@ -93,7 +92,7 @@ const ManageMembers: FC = ({ cid }) => { placement="bottom-end" trigger="click" content={ - +
    • = ({ cid }) => { {t("user")} {!is_admin && }
      • - +
    } > @@ -129,7 +128,7 @@ const ManageMembers: FC = ({ cid }) => { placement="right-start" trigger="click" content={ - +
      {email && (
    • {ct("action.copy_email")} @@ -145,7 +144,7 @@ const ManageMembers: FC = ({ cid }) => { {ct("action.remove")}
      • )} - +
    } >
    diff --git a/src/common/component/Message/EditMessage.tsx b/src/common/component/Message/EditMessage.tsx index d6c6a234..cc96ec2f 100644 --- a/src/common/component/Message/EditMessage.tsx +++ b/src/common/component/Message/EditMessage.tsx @@ -1,51 +1,10 @@ import { useState, useRef, useEffect, ChangeEvent, KeyboardEvent, FC } from "react"; -import styled from "styled-components"; import TextareaAutosize from "react-textarea-autosize"; import { useKey } from "rooks"; import { useEditMessageMutation } from "../../../app/services/message"; import { ContentTypes } from "../../../app/config"; import { useAppSelector } from "../../../app/store"; -const StyledWrapper = styled.div` - width: 100%; - .input { - background: #e5e7eb; - border-radius: 8px; - padding: 16px; - textarea { - outline: none; - width: 100%; - background: none; - resize: unset; - user-select: text; - color: #374151; - font-weight: normal; - font-size: 14px; - line-height: 20px; - word-break: break-all; - white-space: break-spaces; - } - } - .opts { - padding: 4px; - display: flex; - align-items: center; - gap: 16px; - .opt { - font-weight: normal; - font-size: 12px; - line-height: 18px; - button { - padding: 0 4px; - font-size: inherit; - line-height: inherit; - background: none; - cursor: pointer; - color: #06b6d4; - } - } - } -`; type Props = { mid: number; cancelEdit: () => void; @@ -97,9 +56,10 @@ const EditMessage: FC = ({ mid, cancelEdit }) => { }; if (!msg) return null; + return ( - -
    +
    +
    @@ -109,7 +69,7 @@ const EditMessage: FC = ({ mid, cancelEdit }) => { ) } ref={inputRef} - className="content" + className="content w-full resize-none bg-transparent text-gray-800 text-sm break-all" maxRows={8} minRows={1} onKeyDown={handleInputKeydown} @@ -118,15 +78,15 @@ const EditMessage: FC = ({ mid, cancelEdit }) => { placeholder={`Edit Message`} />
    -
    - - esc to +
    + + esc to - - enter to + + enter to
    - +
    ); }; export default EditMessage; diff --git a/src/common/component/Message/ForwardedMessage.tsx b/src/common/component/Message/ForwardedMessage.tsx index 859fb4b3..b5f9f4d9 100644 --- a/src/common/component/Message/ForwardedMessage.tsx +++ b/src/common/component/Message/ForwardedMessage.tsx @@ -1,5 +1,4 @@ import { useEffect, useState, FC, ReactElement } from "react"; -import styled from "styled-components"; import StyledMsg from "./styled"; import renderContent from "./renderContent"; import Avatar from "../Avatar"; @@ -7,29 +6,6 @@ import IconForward from "../../../assets/icons/forward.svg"; import useNormalizeMessage from "../../hook/useNormalizeMessage"; import { useTranslation } from "react-i18next"; -const StyledForward = styled.div` - display: flex; - flex-direction: column; - border-radius: var(--br); - background-color: #f4f4f5; - > .tip { - padding: 8px 8px 0 8px; - display: flex; - align-items: center; - gap: 4px; - .icon { - width: 16px; - height: 16px; - path { - fill: #98a2b3; - } - } - font-weight: 400; - font-size: 12px; - line-height: 18px; - color: #98a2b3; - } -`; type Props = { context: "user" | "channel"; to: number; @@ -45,15 +21,14 @@ const ForwardedMessage: FC = ({ context, to, from_uid, id }) => { normalizeMessage(id); } }, [id]); - useEffect(() => { if (messages) { const forward_mids = messages.map(({ from_mid }) => from_mid) || []; // console.log("fff", messages); setForwards( - -

    - +
    +

    + {t("action.forward")}

    @@ -87,7 +62,7 @@ const ForwardedMessage: FC = ({ context, to, from_uid, id }) => { ); })}
    - +
    ); } }, [messages, context, to, from_uid]); diff --git a/src/common/component/Message/Reaction.tsx b/src/common/component/Message/Reaction.tsx index c1bde24c..45223722 100644 --- a/src/common/component/Message/Reaction.tsx +++ b/src/common/component/Message/Reaction.tsx @@ -1,108 +1,13 @@ import { FC } from "react"; -import styled from "styled-components"; import Tippy from "@tippyjs/react"; import { hideAll } from "tippy.js"; import ReactionItem, { Emojis, ReactionMap } from "../ReactionItem"; import ReactionPicker from "./ReactionPicker"; import Tooltip from "../Tooltip"; import { useReactMessageMutation } from "../../../app/services/message"; -import addEmojiIcon from "../../../assets/icons/add.emoji.svg?url"; +import IconAddEmoji from "../../../assets/icons/add.emoji.svg"; import { useAppSelector } from "../../../app/store"; -const StyledWrapper = styled.span` - position: relative; - margin-top: 8px; - margin-bottom: 4px; - display: flex; - align-items: center; - gap: 4px; - width: fit-content; - .reaction { - cursor: pointer; - background-color: #ecfdff; - border-radius: 6px; - position: relative; - display: flex; - align-items: center; - gap: 4px; - padding: 4px; - > .emoji { - > * { - display: flex; - } - } - &:hover { - background-color: #cff9fe; - } - &.reacted { - box-shadow: inset 0 0 0 1px #06aed4; - background-color: #a5f0fc; - } - - > .count { - font-weight: 400; - font-size: 12px; - line-height: 16px; - color: #06aed4; - } - } - > .add { - visibility: hidden; - width: 24px; - height: 24px; - background-color: #ecfdff; - border-radius: 6px; - border: none; - background-image: url(${addEmojiIcon}); - background-size: 16px; - background-repeat: no-repeat; - background-position: center; - &:hover { - background-color: #cff9fe; - } - } - &:hover > .add { - visibility: visible; - } -`; -const StyledDetails = styled.div` - position: relative; - background: #ffffff; - border-radius: var(--br); - box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03); - display: flex; - align-items: flex-start; - gap: 8px; - padding: 8px; - &:after { - content: ""; - display: block; - width: 12px; - height: 12px; - background-color: #fff; - border-radius: 1px; - position: absolute; - bottom: -6px; - left: calc(50% - 6px); - transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0); - } - &.first:after { - left: calc(50% - 16px); - } - .emoji { - width: 32px; - height: 32px; - } - .desc { - display: flex; - flex-direction: column; - width: 140px; - font-weight: 500; - font-size: 12px; - line-height: 18px; - color: #1d2939; - } -`; const ReactionDetails = ({ uids = [], @@ -123,15 +28,15 @@ const ReactionDetails = ({ ? `${names.join(", ")} and ${names.length - 3} others reacted with` : `${names.join(", ")} reacted with`; return ( - -
    +
    +
    -
    +
    {prefixDesc} {ReactionMap[emoji]}
    - +
    ); }; type Props = { @@ -152,15 +57,15 @@ const Reaction: FC = ({ mid, reactions = null, readOnly = false }) => { reactWithEmoji({ mid, action: emoji }); }; if (!reactions || Object.entries(reactions).length == 0) return null; + return ( - + {Object.entries(reactions).map(([reaction, uids], idx) => { const reacted = uids.findIndex((id: number) => id == currUid) > -1; return uids.length > 0 ? ( 1 ? count : ""} + className={`cursor-pointer rounded-md relative flex items-center gap-1 p-1 hover:bg-[#cff9fe] ${reacted ? "shadow-[inset_0_0_0_1px_#06aed4] bg-[#a5f0fc]" : ""}`} key={reaction} > = ({ mid, reactions = null, readOnly = false }) => { - {uids.length > 1 ? {`${uids.length}`} : null} + {uids.length > 1 ? {`${uids.length}`} : null} ) : null; })} @@ -188,11 +93,13 @@ const Reaction: FC = ({ mid, reactions = null, readOnly = false }) => { trigger="click" content={} > - + )} - + ); }; export default Reaction; diff --git a/src/common/component/Message/ReactionPicker.tsx b/src/common/component/Message/ReactionPicker.tsx index 61db6d99..5f2c1754 100644 --- a/src/common/component/Message/ReactionPicker.tsx +++ b/src/common/component/Message/ReactionPicker.tsx @@ -1,40 +1,9 @@ import { FC } from "react"; -import styled from "styled-components"; import { useReactMessageMutation } from "../../../app/services/message"; import { Emojis } from "../../../app/config"; import Emoji from "../ReactionItem"; import { useAppSelector } from "../../../app/store"; -const StyledPicker = styled.div` - background: none; - z-index: 999; - .emojis { - padding: 4px; - display: grid; - grid-template-columns: repeat(4, 1fr); - gap: 8px; - background: #fff; - filter: drop-shadow(0px 25px 50px rgba(31, 41, 55, 0.25)); - border-radius: 12px; - &.reacting { - opacity: 0.6; - } - .wrapper { - display: flex; - cursor: pointer; - border-radius: 8px; - padding: 4px; - &:hover, - &.reacted { - background-color: #f5f6f7; - } - > .emoji { - width: 16px; - height: 16px; - } - } - } -`; type Props = { mid: number; hidePicker: () => void; @@ -52,15 +21,14 @@ const ReactionPicker: FC = ({ mid, hidePicker }) => { hidePicker(); }; return ( - -
      +
      +
        {Emojis.map((emoji) => { let reacted = reactionData[emoji] && reactionData[emoji].findIndex((id) => id == currUid) > -1; - return (
      • @@ -69,7 +37,7 @@ const ReactionPicker: FC = ({ mid, hidePicker }) => { ); })}
      - +
      ); }; export default ReactionPicker; diff --git a/src/common/component/Message/Reply.tsx b/src/common/component/Message/Reply.tsx index 0fcd4fd8..145a754e 100644 --- a/src/common/component/Message/Reply.tsx +++ b/src/common/component/Message/Reply.tsx @@ -1,5 +1,4 @@ import React, { MouseEvent, FC } from "react"; -import styled from "styled-components"; import MarkdownRender from "../MarkdownRender"; import { ContentTypes } from "../../../app/config"; import { getFileIcon, isImage } from "../../utils"; @@ -8,94 +7,6 @@ import LinkifyText from '../LinkifyText'; import Avatar from "../Avatar"; import { useAppSelector } from "../../../app/store"; import { MessagePayload } from "../../../app/slices/message"; -const Styled = styled.div` - display: flex; - align-items: flex-start; - padding: 8px; - background: #e5e7eb; - border-radius: var(--br); - gap: 8px; - margin-bottom: 4px; - - &.clickable { - cursor: pointer; - } - - .user { - display: flex; - align-items: center; - gap: 4px; - white-space: nowrap; - - .avatar { - width: 16px; - height: 16px; - border-radius: 50%; - } - - .name { - font-style: normal; - font-weight: 500; - font-size: 14px; - line-height: 20px; - color: #06b6d4; - } - } - - .content { - overflow: hidden; - font-weight: 500; - font-size: 14px; - line-height: 20px; - color: #616161; - display: flex; - align-items: center; - - .txt { - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 1; - text-overflow: ellipsis; - overflow: hidden; - word-wrap: break-word; - word-break: break-all; - } - - .md { - position: relative; - max-height: 152px; - overflow: hidden; - - &:after { - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - content: ""; - background: linear-gradient(180deg, rgba(255, 255, 255, 0) 63.54%, #e5e7eb 93.09%); - } - } - - .pic { - display: inherit; - width: 40px; - height: 40px; - object-fit: cover; - } - - .icon { - width: 15px; - height: 20px; - } - - .file_name { - margin-left: 5px; - font-size: 10px; - color: #555; - } - } -`; const renderContent = (data: MessagePayload) => { const { content_type, content, thumbnail, properties } = data; @@ -103,14 +14,14 @@ const renderContent = (data: MessagePayload) => { switch (content_type) { case ContentTypes.text: res = ( - + ); break; case ContentTypes.markdown: res = ( -
      +
      ); @@ -118,14 +29,14 @@ const renderContent = (data: MessagePayload) => { case ContentTypes.file: { const { content_type = "", name, size } = properties || {}; - const icon = getFileIcon(content_type, name); + const icon = getFileIcon(content_type, name, "w-4 h-5"); if (isImage(content_type, size)) { - res = ; + res = ; } else { res = ( <> {icon} - {name} + {name} ); } @@ -161,25 +72,26 @@ const Reply: FC = ({ mid, interactive = true }) => { if (!data) return null; const currUser = users[data.from_uid || 0]; if (!currUser) return null; + return ( - -
      +
      - {currUser.name} + {currUser.name}
      -
      {renderContent(data)}
      - +
      {renderContent(data)}
      +
      ); }; diff --git a/src/common/component/MixedInput/index.tsx b/src/common/component/MixedInput/index.tsx index 66e2032a..7c8a7cd0 100644 --- a/src/common/component/MixedInput/index.tsx +++ b/src/common/component/MixedInput/index.tsx @@ -188,7 +188,7 @@ const Plugins: FC = ({ return ( -
      +
      = ({ uid, type = "embed", cid }) => { trigger="click" hideOnClick={true} content={ - +
        {canCopyEmail && (
      • {t("copy_email")} @@ -92,7 +91,7 @@ const Profile: FC = ({ uid, type = "embed", cid }) => { {t("remove")}
        • )} - +
      } >
    • diff --git a/src/common/component/ReactionItem.tsx b/src/common/component/ReactionItem.tsx index c3d79255..f9f3201c 100644 --- a/src/common/component/ReactionItem.tsx +++ b/src/common/component/ReactionItem.tsx @@ -29,14 +29,14 @@ export const ReactionMap = { "🚀": ":rocket:", }; const emojis: Emojis = { - "👍": , - "👎": , - "😄": , - "👀": , - "🚀": , - "❤️": , - "🙁": , - "🎉": + "👍": , + "👎": , + "😄": , + "👀": , + "🚀": , + "❤️": , + "🙁": , + "🎉": }; interface Props { diff --git a/src/common/component/Send/Replying.tsx b/src/common/component/Send/Replying.tsx index f2a726b3..e1e2e451 100644 --- a/src/common/component/Send/Replying.tsx +++ b/src/common/component/Send/Replying.tsx @@ -1,4 +1,3 @@ -import styled from "styled-components"; import { ContentTypes } from "../../../app/config"; import MarkdownRender from "../MarkdownRender"; import closeIcon from "../../../assets/icons/close.circle.svg?url"; @@ -9,73 +8,6 @@ import { useAppSelector } from "../../../app/store"; import { MessagePayload } from "../../../app/slices/message"; import LinkifyText from "../LinkifyText"; -const Styled = styled.div` - background-color: #f3f4f6; - z-index: 999; - display: flex; - align-items: flex-start; - justify-content: flex-start; - gap: 16px; - border-top-left-radius: 8px; - border-top-right-radius: 8px; - width: 100%; - padding: 12px 16px; - .prefix { - white-space: nowrap; - color: #667085; - font-style: normal; - font-weight: 400; - font-size: 14px; - line-height: 20px; - em { - font-weight: bold; - color: #363f53; - } - } - .content { - white-space: normal; - color: #616161; - overflow: hidden; - padding-right: 30px; - font-weight: 500; - font-size: 14px; - line-height: 20px; - > .pic { - width: 40px; - height: 40px; - object-fit: cover; - } - .md { - position: relative; - max-height: 100px; - overflow: hidden; - &:after { - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - content: ""; - background: linear-gradient(180deg, rgba(255, 255, 255, 0) 63.54%, #f3f4f6 93.09%); - } - } - .icon { - width: 15px; - height: 20px; - } - .name { - margin-left: 5px; - font-size: 10px; - color: #555; - } - } - .close { - background: none; - position: absolute; - top: 16px; - right: 16px; - } -`; const renderContent = (data: MessagePayload) => { const { content_type, content, thumbnail = "", properties } = data; let res = null; @@ -87,9 +19,10 @@ const renderContent = (data: MessagePayload) => { // return ; // }); break; + case ContentTypes.markdown: res = ( -
      +
      ); @@ -100,13 +33,13 @@ const renderContent = (data: MessagePayload) => { const image = isImage(content_type, size); // console.log("replying data", content_type, size, image); if (image) { - res = ; + res = ; } else { - const icon = getFileIcon(content_type, name); + const icon = getFileIcon(content_type, name, "icon w-4 h-5"); res = ( <> {icon} - {name} + {name} ); } @@ -118,7 +51,6 @@ const renderContent = (data: MessagePayload) => { // console.log("replying data", data); return res; }; - export default function Replying({ context, id, @@ -138,15 +70,16 @@ export default function Replying({ if (!msg) return null; const { from_uid = 0 } = msg; const user = usersData[from_uid]; + return ( - -
      - Replying to {user?.name} +
      +
      + Replying to {user?.name}
      -
      {renderContent(msg)}
      - - +
      ); } diff --git a/src/common/component/Send/index.tsx b/src/common/component/Send/index.tsx index e18058ef..8eff2245 100644 --- a/src/common/component/Send/index.tsx +++ b/src/common/component/Send/index.tsx @@ -1,10 +1,12 @@ import { useEffect, useState, FC } from "react"; +import clsx from "clsx"; +import { useTranslation } from "react-i18next"; import useSendMessage from "../../hook/useSendMessage"; import useAddLocalFileMessage from "../../hook/useAddLocalFileMessage"; import { updateInputMode } from "../../../app/slices/ui"; import { ContentTypes, ChatPrefixes } from "../../../app/config"; -import StyledSend from "./styled"; +// import StyledSend from "./styled"; import UploadFileList from "./UploadFileList"; import Replying from "./Replying"; import Toolbar from "./Toolbar"; @@ -15,7 +17,6 @@ import MixedInput, { useMixedEditor } from "../MixedInput"; import useDraft from "../../hook/useDraft"; import useUploadFile from "../../hook/useUploadFile"; import { useAppDispatch, useAppSelector } from "../../../app/store"; -import { useTranslation } from "react-i18next"; const Modes = { text: "text", @@ -135,15 +136,16 @@ const Send: FC = ({ const placeholder = `${t("send_to")} ${ChatPrefixes[context]}${name} `; const members = context == "channel" ? (channelsData[id]?.is_public ? uids : channelsData[id]?.members) : []; + const isMarkdownMode = mode == Modes.markdown; return ( - {replying_mid && } {mode == Modes.text && } -
      +
      {mode == Modes.text && ( = ({ /> )}
      - +
      ); }; diff --git a/src/common/component/Send/styled.tsx b/src/common/component/Send/styled.tsx deleted file mode 100644 index d45fe1b5..00000000 --- a/src/common/component/Send/styled.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import styled from "styled-components"; - -const StyledSend = styled.div` - position: relative; - background: #e5e7eb; - border-radius: var(--br); - width: 100%; - width: -webkit-fill-available; - &.markdown.fullscreen { - margin-top: -35px; - } - .send_box { - display: flex; - justify-content: space-between; - align-items: flex-start; - gap: 15px; - padding: 14px 18px; - &.markdown { - display: grid; - grid-template-columns: 1fr 1fr; - grid-template-rows: auto auto; - gap: 0; - .input { - grid-column: span 2; - } - } - &.reply { - border-top-left-radius: 0; - border-top-right-radius: 0; - } - .input { - width: 100%; - } - } -`; - -export default StyledSend; diff --git a/src/common/component/styled/Button.tsx b/src/common/component/styled/Button.tsx index a06787dd..eb6bc47a 100644 --- a/src/common/component/styled/Button.tsx +++ b/src/common/component/styled/Button.tsx @@ -1,63 +1,26 @@ -import styled from "styled-components"; - -const StyledButton = styled.button` - cursor: pointer; - padding: 10px 14px; - border: none; - box-sizing: border-box; - box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05); - border-radius: var(--br, 4px); - font-weight: 500; - font-size: 14px; - line-height: 20px; - color: #fff; - background-color: #22ccee; - word-break: keep-all; - &.flex { - width: 100%; - } - &:hover, - &:active { - background-color: #06aed4; - } - &:focus { - background-color: #22ccee; - } - &:disabled { - background-color: #d0d5dd; - } - &.small { - padding: 8px 14px; - font-size: 14px; - line-height: 20px; - } - &.mini { - padding: 4px 10px; - font-size: 12px; - line-height: 18px; - } - &.danger { - border: none; - background-color: #ef4444; - color: #fff; - &:disabled { - background-color: #fecdca; - } - } - &.ghost { - border: 1px solid #1fe1f9; - background: none; - color: #1fe1f9; - } - &.border_less { - box-shadow: none; - border: none !important; - } - &.cancel { - border: 1px solid #e5e7eb; - background: none; - color: #374151; - } -`; +import clsx from "clsx"; +import { ButtonHTMLAttributes, ReactNode } from "react"; +type Props = ButtonHTMLAttributes & { children?: ReactNode } +const StyledButton = ({ children, className = '', ...rest }: Props) => { + const isGhost = className.includes('ghost'); + const noBorder = className.includes('border_less'); + const isCancel = className.includes('cancel'); + const isDanger = className.includes('danger'); + const isSmall = className.includes('small'); + const isMini = className.includes('mini'); + const isFull = className.includes('flex'); + return ; +}; export default StyledButton; diff --git a/src/common/component/styled/Menu.tsx b/src/common/component/styled/Menu.tsx deleted file mode 100644 index 284a6f14..00000000 --- a/src/common/component/styled/Menu.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import styled from "styled-components"; - -const StyledMenu = styled.ul` - display: flex; - flex-direction: column; - gap: 2px; - padding: 4px; - background-color: #fff; - box-shadow: 0 20px 25px 20px rgba(31, 41, 55, 0.1), 0 10px 10px rgba(31, 41, 55, 0.04); - border-radius: 12px; - min-width: 200px; - .item { - position: relative; - display: flex; - align-items: center; - gap: 14px; - white-space: nowrap; - cursor: pointer; - border-radius: 6px; - padding: 6px; - font-style: normal; - font-weight: 600; - font-size: 14px; - line-height: 20px; - color: #616161; - .icon { - width: 20px; - height: 20px; - path { - fill: #475467; - } - } - &.sb { - justify-content: space-between; - } - &:hover { - background-color: #22ccee; - color: #fff; - .icon { - path { - fill: #fff; - } - } - } - &.bottom_line { - margin-bottom: 9px; - &:before { - position: absolute; - content: ""; - left: 6px; - bottom: -4px; - display: block; - padding: 0 6px; - box-sizing: border-box; - width: calc(100% - 12px); - height: 1px; - background-color: #f2f4f7; - } - } - &.danger { - color: #a11043; - &:hover { - background-color: #b42318; - color: #fff; - } - } - &[data-disabled="true"] { - color: #a4a8b3; - .icon { - path { - fill: #a4a8b3; - } - } - } - } -`; - -export default StyledMenu; diff --git a/src/common/component/styled/Radio.tsx b/src/common/component/styled/Radio.tsx index 23486853..dc60df21 100644 --- a/src/common/component/styled/Radio.tsx +++ b/src/common/component/styled/Radio.tsx @@ -1,67 +1,5 @@ import { useState, useId, FC } from "react"; -import styled from "styled-components"; -const StyledForm = styled.form` - width: 100%; - > .option { - &:not(:last-child) { - margin-bottom: 8px; - } - - > input[type="radio"] { - display: none; - - & + .box { - background: #ffffff; - border: 1px solid #d0d5dd; - box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05); - border-radius: 8px; - transition: all ease-in-out 250ms; - - & > label { - display: flex; - flex-direction: row; - align-items: center; - font-weight: 400; - font-size: 16px; - line-height: 24px; - color: #667085; - cursor: pointer; - user-select: none; - transition: all ease-in-out 250ms; - - &:before { - content: ""; - display: inline-block; - width: 14px; - height: 14px; - border-radius: 8px; - background: #ffffff; - box-shadow: inset 0 0 0 4px #ffffff; - border: 1px solid #d0d5dd; - margin: 14px 8px 14px 14px; - transition: all ease-in-out 500ms; - } - } - } - - &:checked + .box { - background: #22ccee; - border: 1px solid #d0d5dd; - - & > label { - color: #ffffff; - - &:before { - background: #ffffff; - box-shadow: inset 0 0 0 4px #22ccee; - border: 1px solid #ffffff; - } - } - } - } - } -`; type Props = { options: string[]; values: (string | number)[]; @@ -84,12 +22,12 @@ const Radio: FC = ({ const [fallbackValue, setFallbackValue] = useState(defaultValue); const _value = value !== VALUE_NOT_SET ? value : fallbackValue; - return ( - +
      {options.map((item, index) => ( -
      +
      { @@ -105,12 +43,16 @@ const Radio: FC = ({ }} id={`${id}-${index}`} /> -
      - +
      + +
      +
      +
      +
      ))} - + ); }; export default Radio; diff --git a/src/common/component/styled/Select.tsx b/src/common/component/styled/Select.tsx index 5b16d0ef..c1aa6c0b 100644 --- a/src/common/component/styled/Select.tsx +++ b/src/common/component/styled/Select.tsx @@ -2,7 +2,6 @@ import { FC, useState } from "react"; import Tippy from "@tippyjs/react"; import IconSelect from "../../../assets/icons/check.sign.svg"; import IconArrow from "../../../assets/icons/arrow.down.svg"; -import Menu from "./Menu"; import { useTranslation } from "react-i18next"; @@ -42,7 +41,7 @@ const Select: FC = ({ options = [], updateSelect = null, current = null } placement="bottom" interactive content={ - +
        {options.map(({ title, value, selected, underline }) => { return (
      • = ({ options = [], updateSelect = null, current = null }
        • ); })} -
      +
    } >
    diff --git a/src/common/component/styled/Toggle.tsx b/src/common/component/styled/Toggle.tsx index 1f5bae8b..83166abc 100644 --- a/src/common/component/styled/Toggle.tsx +++ b/src/common/component/styled/Toggle.tsx @@ -1,36 +1,12 @@ -import styled from "styled-components"; - -const StyledToggle = styled.div` - cursor: pointer; - position: relative; - width: 44px; - height: 24px; - background-color: #1fe1f9; - border-radius: 12px; - transition: all 0.2s ease-in; - &:after { - border-radius: 50%; - background-color: #fff; - content: ""; - display: block; - width: 20px; - height: 20px; - position: absolute; - top: 2px; - right: 2px; - transition: all 0.4s ease; - } - &[data-checked="false"] { - background-color: #f2f4f7; - &:after { - transform: translateX(-100%); - } - } - &[data-disabled="true"] { - cursor: not-allowed; - background-color: #ccc; - pointer-events: none; - } -`; - +import clsx from "clsx"; +import { HTMLAttributes } from "react"; +const StyledToggle = (props: Pick, "onClick"> & { checked?: boolean, disabled?: boolean }) => { + const { checked = true, disabled = false } = props; + return
    +
    +
    ; +}; export default StyledToggle; diff --git a/src/index.tsx b/src/index.tsx index 1ec9fcb3..b0bd68db 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -17,10 +17,19 @@ import NewVersion from "./common/component/NewVersion"; import './i18n'; const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement); - +// dark mode +const isDarkMode = localStorage.theme === 'dark'; +const isLightMode = localStorage.theme === 'light'; +if (isDarkMode || (!isLightMode && window.matchMedia('(prefers-color-scheme: dark)').matches)) { + document.documentElement.classList.add('dark'); +} else { + document.documentElement.classList.remove('dark'); +} root.render( - + diff --git a/src/routes/chat/ChannelChat/index.tsx b/src/routes/chat/ChannelChat/index.tsx index aa34b993..2f530cd7 100644 --- a/src/routes/chat/ChannelChat/index.tsx +++ b/src/routes/chat/ChannelChat/index.tsx @@ -21,7 +21,6 @@ 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 } from "./styled"; import InviteModal from "../../../common/component/InviteModal"; import LoadMore from "../LoadMore"; import { useAppSelector } from "../../../app/store"; @@ -151,11 +150,11 @@ function ChannelChat({ cid = 0, dropFiles = [] }: Props) { } users={ - +
    {addVisible && ( -
    - -
    {t("add_channel_members")}
    +
    + +
    {t("add_channel_members")}
    )} {memberIds.map((uid: number) => { @@ -171,19 +170,19 @@ function ChannelChat({ cid = 0, dropFiles = [] }: Props) { /> ); })} - +
    } > - +
    {hasMore ? ( ) : ( -
    -

    {t("welcome_channel", { name })}

    -

    {t("welcome_desc", { name })}

    +
    +

    {t("welcome_channel", { name })}

    +

    {t("welcome_desc", { name })}

    {loginUser?.is_admin && ( - - + + {t("edit_channel")} )} @@ -205,7 +204,7 @@ function ChannelChat({ cid = 0, dropFiles = [] }: Props) { context: "channel" }); })} - +
    ); diff --git a/src/routes/chat/ChannelChat/styled.tsx b/src/routes/chat/ChannelChat/styled.tsx deleted file mode 100644 index 032a925f..00000000 --- a/src/routes/chat/ChannelChat/styled.tsx +++ /dev/null @@ -1,85 +0,0 @@ -import styled from "styled-components"; - -export const StyledUsers = styled.div` - /* display: flex; */ - flex-direction: column; - gap: 5px; - /* todo */ - width: 226px; - height: calc(100vh - 56px - 22px); - overflow-y: scroll; - padding: 8px; - box-shadow: inset 1px 0px 0px rgba(0, 0, 0, 0.1); - > .add { - cursor: pointer; - display: flex; - align-items: center; - justify-content: flex-start; - gap: 4px; - padding: 10px; - border-radius: 8px; - user-select: none; - &:hover { - background: rgba(116, 127, 141, 0.1); - } - .icon { - width: 24px; - height: 24px; - } - .txt { - font-weight: 600; - font-size: 14px; - line-height: 20px; - color: #52525b; - } - } -`; -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; - } - .edit { - display: flex; - align-items: center; - gap: 4px; - .icon { - width: 16px; - height: 16px; - path { - fill: #3c8ce7; - } - } - padding: 0; - font-style: normal; - font-weight: 500; - font-size: 16px; - line-height: 24px; - background: linear-gradient(135deg, #3c8ce7 0%, #00eaff 100%); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; - text-fill-color: transparent; - } - } -`; diff --git a/src/routes/chat/Layout/index.tsx b/src/routes/chat/Layout/index.tsx index 32f6cbd3..f235fc72 100644 --- a/src/routes/chat/Layout/index.tsx +++ b/src/routes/chat/Layout/index.tsx @@ -13,6 +13,7 @@ import useLicense from "../../../common/hook/useLicense"; import LicenseUpgradeTip from "./LicenseOutdatedTip"; // import { useTranslation } from "react-i18next"; import DnDTip from "./DnDTip"; +import clsx from "clsx"; interface Props { readonly?: boolean; @@ -112,13 +113,15 @@ const Layout: FC = ({
    {children} -
    +
    {readonly ? ( ) : reachLimit ? ( ) : ( - +
    + +
    )} {selects && }
    diff --git a/src/routes/chat/Layout/styled.tsx b/src/routes/chat/Layout/styled.tsx index ac77cb5b..2ec6beb6 100644 --- a/src/routes/chat/Layout/styled.tsx +++ b/src/routes/chat/Layout/styled.tsx @@ -24,15 +24,6 @@ const Styled = styled.article` flex-direction: column; padding: 0; height: calc(100vh - 56px - 18px); - > .send { - padding: 0 16px 16px 16px; - &.selecting { - padding: 0; - > .send { - display: none; - } - } - } } .members { box-shadow: inset 0px 10px 2px -10px rgba(0, 0, 0, 0.1); @@ -52,8 +43,7 @@ const Styled = styled.article` height: 1px; margin: 18px auto; } - .tools, - .apps { + .tools { display: flex; flex-direction: column; } @@ -93,9 +83,6 @@ const Styled = styled.article` } } } - .apps { - gap: 15px; - } } } diff --git a/src/routes/home/index.tsx b/src/routes/home/index.tsx index 58447a76..47827fd7 100644 --- a/src/routes/home/index.tsx +++ b/src/routes/home/index.tsx @@ -2,7 +2,6 @@ import { memo } from "react"; import { Outlet, NavLink, useLocation, useMatch } from "react-router-dom"; import { useTranslation } from "react-i18next"; -import StyledWrapper from "./styled"; import User from "./User"; import Loading from "../../common/component/Loading"; import Menu from "./Menu"; @@ -52,49 +51,62 @@ function HomePage() { // 有点绕 const chatNav = isChatHomePath ? "/chat" : chatPath || "/chat"; const userNav = userPath || "/users"; - + const linkClass = `flex items-center gap-2.5 px-3 py-2 font-semibold text-sm text-gray-600 rounded-lg hover:bg-black/10`; return ( <> {!guest && } - +
    {!guest && ( -
    +
    {loginUid && } -
    )} -
    +
    - +
    ); } diff --git a/src/routes/home/styled.tsx b/src/routes/home/styled.tsx deleted file mode 100644 index 253cea80..00000000 --- a/src/routes/home/styled.tsx +++ /dev/null @@ -1,66 +0,0 @@ -import styled from "styled-components"; -const StyledWrapper = styled.div` - display: flex; - width: 100vw; - height: 100vh; - background: var(---navs-bg); - &.guest { - background: none; - } - > .col { - height: 100%; - display: flex; - flex-direction: column; - &.left { - align-items: center; - position: relative; - background: transparent; - width: 64px; - transition: all 0.5s ease-in; - > .divider { - width: -webkit-fill-available; - height: 1px; - background-color: #d4d4d4; - margin: 8px 16px; - } - &.expand { - width: 140px; - } - } - &.right { - width: 100%; - } - .link_navs { - display: flex; - flex-direction: column; - gap: 4px; - padding: 24px 12px; - .link { - display: flex; - align-items: center; - gap: 10px; - text-decoration: none; - padding: 8px 12px; - font-weight: 600; - font-size: 14px; - line-height: 20px; - color: #4b5563; - border-radius: 8px; - &:hover { - background-color: rgba(0, 0, 0, 0.08); - } - &.active { - background-color: #55c7ec; - svg path { - fill: #fff; - } - } - } - } - } - &.guest > .col.right { - margin: 0 8px; - } -`; - -export default StyledWrapper; diff --git a/src/routes/setting/APIConfig.tsx b/src/routes/setting/APIConfig.tsx index 800c5310..2f8ca74a 100644 --- a/src/routes/setting/APIConfig.tsx +++ b/src/routes/setting/APIConfig.tsx @@ -37,7 +37,7 @@ export default function APIConfig() {
    diff --git a/src/routes/setting/LogoutConfirmModal.tsx b/src/routes/setting/LogoutConfirmModal.tsx index ea040c25..d83f3b34 100644 --- a/src/routes/setting/LogoutConfirmModal.tsx +++ b/src/routes/setting/LogoutConfirmModal.tsx @@ -41,7 +41,7 @@ const LogoutConfirmModal: FC = ({ closeModal }) => { description={t("logout.desc")} buttons={ <> - + diff --git a/src/routes/setting/Overview/index.tsx b/src/routes/setting/Overview/index.tsx index 25194828..8d2e20ae 100644 --- a/src/routes/setting/Overview/index.tsx +++ b/src/routes/setting/Overview/index.tsx @@ -7,7 +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 DarkMode from "./DarkMode"; import ServerVersionChecker from "../../../common/component/ServerVersionChecker"; export default function Overview() { @@ -67,7 +67,7 @@ export default function Overview() { )} - {/* */} +
    ); } diff --git a/src/routes/setting/ProfileBasicEditModal.tsx b/src/routes/setting/ProfileBasicEditModal.tsx index 183d11ae..7f048b9c 100644 --- a/src/routes/setting/ProfileBasicEditModal.tsx +++ b/src/routes/setting/ProfileBasicEditModal.tsx @@ -66,7 +66,7 @@ const ProfileBasicEditModal: FC = ({ } >
    - +
    diff --git a/src/routes/setting/config/Agora.tsx b/src/routes/setting/config/Agora.tsx index 80bd1462..c2527b0d 100644 --- a/src/routes/setting/config/Agora.tsx +++ b/src/routes/setting/config/Agora.tsx @@ -1,4 +1,3 @@ -import StyledContainer from "./StyledContainer"; import Input from "../../../common/component/styled/Input"; import Textarea from "../../../common/component/styled/Textarea"; import Label from "../../../common/component/styled/Label"; @@ -35,11 +34,11 @@ export default function ConfigAgora() { } = values as AgoraConfig; return ( - +
    - +
    @@ -111,6 +110,6 @@ export default function ConfigAgora() {
    {changed && } {/* */} - +
    ); } diff --git a/src/routes/setting/config/Firebase.tsx b/src/routes/setting/config/Firebase.tsx index 28e2eda1..de258fa5 100644 --- a/src/routes/setting/config/Firebase.tsx +++ b/src/routes/setting/config/Firebase.tsx @@ -1,5 +1,4 @@ import { ChangeEvent } from "react"; -import StyledContainer from "./StyledContainer"; import Input from "../../../common/component/styled/Input"; import Textarea from "../../../common/component/styled/Textarea"; import Label from "../../../common/component/styled/Label"; @@ -78,7 +77,7 @@ export default function ConfigFirebase() { client_email, } = values as FirebaseConfig; return ( - +
    } {changed && } - +
    ); } diff --git a/src/routes/setting/config/IssuerList/index.tsx b/src/routes/setting/config/IssuerList/index.tsx index 2fd53577..814740a9 100644 --- a/src/routes/setting/config/IssuerList/index.tsx +++ b/src/routes/setting/config/IssuerList/index.tsx @@ -57,7 +57,7 @@ const IssuerList: FC = ({ issuers = [], onChange }) => {
    { onChange( issuers.map((issuer) => ({ diff --git a/src/routes/setting/config/Logins.tsx b/src/routes/setting/config/Logins.tsx index 8e203c58..51b02536 100644 --- a/src/routes/setting/config/Logins.tsx +++ b/src/routes/setting/config/Logins.tsx @@ -1,6 +1,5 @@ import { ChangeEvent } from "react"; import toast from "react-hot-toast"; -import StyledContainer from "./StyledContainer"; import Toggle from "../../../common/component/styled/Toggle"; import Label from "../../../common/component/styled/Label"; import Input from "../../../common/component/styled/Input"; @@ -71,7 +70,7 @@ export default function Logins() { const valuesChanged = clientIdChanged || changed || githubChanged; return ( - +
    @@ -83,7 +82,7 @@ export default function Logins() {
    @@ -97,7 +96,7 @@ export default function Logins() {
    @@ -112,7 +111,7 @@ export default function Logins() {
    @@ -135,7 +134,7 @@ export default function Logins() {
    @@ -166,7 +165,7 @@ export default function Logins() {
    @@ -194,6 +193,6 @@ export default function Logins() {
    {valuesChanged && } - +
    ); } diff --git a/src/routes/setting/config/SMTP.tsx b/src/routes/setting/config/SMTP.tsx index 4f7609eb..bc40701a 100644 --- a/src/routes/setting/config/SMTP.tsx +++ b/src/routes/setting/config/SMTP.tsx @@ -1,17 +1,16 @@ import { useState, useEffect, ChangeEvent } from "react"; +import toast from "react-hot-toast"; +import { useTranslation } from "react-i18next"; import { useSendTestEmailMutation } from "../../../app/services/server"; import iconQuestion from "../../../assets/icons/question.svg?url"; import useConfig from "../../../common/hook/useConfig"; -import StyledContainer from "./StyledContainer"; import Input from "../../../common/component/styled/Input"; import Button from "../../../common/component/styled/Button"; import Toggle from "../../../common/component/styled/Toggle"; import Label from "../../../common/component/styled/Label"; import SaveTip from "../../../common/component/SaveTip"; -import toast from "react-hot-toast"; import { SMTPConfig } from "../../../types/server"; -import { useTranslation } from "react-i18next"; export default function ConfigSMTP() { const { t } = useTranslation("setting", { keyPrefix: "smtp" }); @@ -54,11 +53,11 @@ export default function ConfigSMTP() { if (!values) return null; const { host, port, from, username, password, enabled = false } = values as SMTPConfig; return ( - +
    - +
    @@ -144,6 +143,6 @@ export default function ConfigSMTP() {
    {changed && } {/* */} - +
    ); } \ No newline at end of file diff --git a/src/routes/setting/config/StyledContainer.tsx b/src/routes/setting/config/StyledContainer.tsx deleted file mode 100644 index fb46552e..00000000 --- a/src/routes/setting/config/StyledContainer.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import styled from "styled-components"; - -const StyledContainer = 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: 32px; - .input { - width: 100%; - display: flex; - flex-direction: column; - align-items: flex-start; - gap: 16px; - .row { - width: 100%; - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; - &.inputs { - flex-direction: column; - gap: 8px; - } - .title { - display: flex; - flex-direction: column; - align-items: flex-start; - .txt { - display: flex; - flex-direction: row; - align-items: center; - gap: 8px; - .icon { - cursor: pointer; - } - } - .desc { - font-weight: 400; - font-size: 14px; - line-height: 20px; - color: #667085; - } - } - } - } - } - .tip { - display: flex; - gap: 8px; - align-items: center; - .link { - font-weight: 600; - font-size: 14px; - line-height: 20px; - color: #06b6d4; - } - } -`; - -export default StyledContainer; diff --git a/src/routes/users/index.tsx b/src/routes/users/index.tsx index fa522a58..ccf46bff 100644 --- a/src/routes/users/index.tsx +++ b/src/routes/users/index.tsx @@ -6,7 +6,6 @@ import Search from "./Search"; import User from "../../common/component/User"; import Profile from "../../common/component/Profile"; -import StyledWrapper from "./styled"; import BlankPlaceholder from "../../common/component/BlankPlaceholder"; import useFilteredUsers from "../../common/hook/useFilteredUsers"; @@ -24,15 +23,16 @@ function UsersPage() { }, [pathname]); if (!users) return null; + return ( - -
    +
    +
    -
    -
    -
    +
    {user_id ? : }
    - +
    ); } export default memo(UsersPage); diff --git a/src/routes/users/styled.tsx b/src/routes/users/styled.tsx deleted file mode 100644 index 650c4adb..00000000 --- a/src/routes/users/styled.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import styled from "styled-components"; -const StyledWrapper = styled.div` - display: flex; - height: 100%; - padding: 8px 48px 10px 0; - > .left { - border-radius: 16px 0 0 16px; - background-color: #fff; - position: relative; - display: flex; - flex-direction: column; - min-width: 268px; - box-shadow: inset -1px 0px 0px rgba(0, 0, 0, 0.1); - .list { - padding: 12px 8px; - overflow: scroll; - padding-bottom: 50px; - > .nav { - display: flex; - flex-direction: column; - gap: 4px; - a { - border-radius: 6px; - text-decoration: none; - } - .session { - &:hover, - &.active { - background: rgba(116, 127, 141, 0.1); - } - } - } - } - } - .right { - border-radius: 0 16px 16px 0; - background-color: #fff; - /* height: 100vh; */ - width: 100%; - display: flex; - justify-content: center; - align-items: flex-start; - &.placeholder { - height: 100%; - align-items: center; - } - } -`; - -export default StyledWrapper;