diff --git a/package.json b/package.json index c1980b39..96dbb191 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vocechat-web", - "version": "0.3.38", + "version": "0.3.39", "private": true, "homepage": "https://voce.chat", "dependencies": { diff --git a/src/assets/icons/close.svg b/src/assets/icons/close.svg index 76004bbd..c5198164 100644 --- a/src/assets/icons/close.svg +++ b/src/assets/icons/close.svg @@ -1,3 +1,3 @@ - - + + diff --git a/src/assets/icons/download.svg b/src/assets/icons/download.svg index 4111174a..1ebbe2cc 100644 --- a/src/assets/icons/download.svg +++ b/src/assets/icons/download.svg @@ -1,3 +1,3 @@ - - + + diff --git a/src/assets/index.css b/src/assets/index.css index 766afa99..cefc2fe7 100644 --- a/src/assets/index.css +++ b/src/assets/index.css @@ -47,3 +47,10 @@ ---channel-text-color: #1c1c1e; ---msg-text-color: #374151; } +/* overrides */ + +#MARKDOWN_CONTAINER .toastui-editor-contents { + display: flex; + flex-direction: column; + align-items: flex-start; +} diff --git a/src/common/component/Avatar.tsx b/src/common/component/Avatar.tsx index 5bb3425a..8f8448af 100644 --- a/src/common/component/Avatar.tsx +++ b/src/common/component/Avatar.tsx @@ -34,7 +34,7 @@ const Avatar: FC = ({ } else { return (
` - width: ${({ size }) => `${size}px`}; - height: ${({ size }) => `${size}px`}; - position: relative; - cursor: pointer; - .avatar { - overflow: hidden; - position: relative; - width: 100%; - height: 100%; - border-radius: 50%; - background-color: #eee; - img { - object-fit: cover; - width: 100%; - height: 100%; - } - input[type="file"] { - cursor: pointer; - display: block; - opacity: 0; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - } - .tip { - white-space: nowrap; - padding: 4px; - display: none; - justify-content: center; - align-items: center; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: rgba(0, 0, 0, 0.5); - color: #fff; - font-weight: bold; - font-size: 12px; - line-height: 18px; - } - &:hover .tip { - display: flex; - } - } - .icon { - display: none; - width: 28px; - height: 28px; - position: absolute; - top: 0; - right: 0; - } - &:hover .icon { - display: block; - } -`; +import clsx from "clsx"; type UID = number; interface Props { @@ -102,16 +41,18 @@ const AvatarUploader: FC = ({ setUploading(false); }; + return ( - -
- +
+
+ {!disabled && ( <> -
+
{uploading ? t("status.uploading") : t("action.change_avatar")}
= ({ )}
- {!disabled && icon} - + {!disabled && icon} +
); }; diff --git a/src/common/component/BlankPlaceholder.tsx b/src/common/component/BlankPlaceholder.tsx index 94f73eec..974ebe87 100644 --- a/src/common/component/BlankPlaceholder.tsx +++ b/src/common/component/BlankPlaceholder.tsx @@ -14,7 +14,7 @@ interface Props { type?: "chat" | "user"; } const classes = { - box: "w-[200px] h-[200px] cursor-pointer bg-[#f9fafb] rounded-3xl flex-center flex-col gap-4", + box: "w-[150px] md:w-[200px] h-[150px] md:h-[200px] cursor-pointer bg-[#f9fafb] rounded-3xl flex-center flex-col gap-4", boxIcon: "w-10 h-10", boxTip: "px-5 text-sm text-[#475467] font-bold text-center" }; @@ -45,7 +45,7 @@ const BlankPlaceholder: FC = ({ type = "chat" }) => { {t("desc")}

-
+
{t("invite")}
diff --git a/src/common/component/Channel.tsx b/src/common/component/Channel.tsx index 7ed0325d..4f94018e 100644 --- a/src/common/component/Channel.tsx +++ b/src/common/component/Channel.tsx @@ -1,50 +1,8 @@ import { FC } from "react"; -import styled from "styled-components"; import Avatar from "./Avatar"; import { useAppSelector } from "../../app/store"; +import clsx from "clsx"; -const StyledWrapper = styled.div` - display: flex; - align-items: center; - justify-content: flex-start; - gap: 8px; - padding: 8px; - border-radius: 8px; - user-select: none; - &.compact { - padding: 0; - } - &.interactive { - &:hover, - &.active { - background: rgba(116, 127, 141, 0.1); - } - } - .avatar { - cursor: pointer; - width: ${({ size }: { size: number }) => `${size}px`}; - height: ${({ size }: { size: number }) => `${size}px`}; - position: relative; - img { - border-radius: 50%; - width: 100%; - height: 100%; - } - } - .name { - display: flex; - font-weight: 600; - font-size: 14px; - line-height: 20px; - color: #52525b; - .txt { - max-width: 140px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - } -`; interface Props { interactive?: boolean; @@ -63,12 +21,12 @@ const Channel: FC = ({ interactive = true, id, compact = false, avatarSiz if (!channel) return null; const { name, members = [], is_public, icon } = channel; + return ( - -
+
= ({ interactive = true, id, compact = false, avatarSiz src={icon} name={"#"} alt="avatar" + className="!w-full !h-full rounded-full" />
{!compact && ( -
- {name} ({is_public ? totalMemberCount : members.length}) +
+ {name} ({is_public ? totalMemberCount : members.length})
)} - +
); }; diff --git a/src/common/component/FileBox/preview/Doc.tsx b/src/common/component/FileBox/preview/Doc.tsx index 69aae0b8..926cedd3 100644 --- a/src/common/component/FileBox/preview/Doc.tsx +++ b/src/common/component/FileBox/preview/Doc.tsx @@ -1,15 +1,4 @@ import { useState, useEffect, FC } from "react"; -import styled from "styled-components"; - -const Styled = styled.div` - background-color: #fff; - height: 218px; - padding: 15px 15px 0 15px; - line-height: 1.4; - overflow: scroll; - white-space: pre-wrap; - word-break: break-all; -`; interface Props { url: string; @@ -28,7 +17,7 @@ const Doc: FC = ({ url }) => { }, [url]); if (!content) return null; - return {content}; + return
{content}
; }; export default Doc; diff --git a/src/common/component/FileMessage/index.tsx b/src/common/component/FileMessage/index.tsx index 87d78a4a..21818253 100644 --- a/src/common/component/FileMessage/index.tsx +++ b/src/common/component/FileMessage/index.tsx @@ -1,6 +1,5 @@ import { FC, useEffect, useState } from "react"; import dayjs from "dayjs"; -import Styled from "./styled"; import ImageMessage from "./ImageMessage"; import useRemoveLocalMessage from "../../hook/useRemoveLocalMessage"; import useUploadFile from "../../hook/useUploadFile"; @@ -12,6 +11,7 @@ import IconDownload from "../../../assets/icons/download.svg"; import IconClose from "../../../assets/icons/close.circle.svg"; import VideoMessage from "./VideoMessage"; import AudioMessage from "./AudioMessage"; +import clsx from "clsx"; const isLocalFile = (content: string) => { return content.startsWith("blob:"); @@ -117,7 +117,7 @@ const FileMessage: FC = ({ removeLocalMessage(properties.local_id); }; if (!properties) return null; - const icon = getFileIcon(content_type, name); + const icon = getFileIcon(content_type, name, "w-9 h-auto"); if (!content || !name) return null; @@ -156,21 +156,21 @@ const FileMessage: FC = ({ /> ); return ( - -
+
+
{icon} -
- {name} - +
+ {name} + {sending ? ( ) : ( <> - {formatBytes(size)} - {dayjs(created_at).fromNow()} + {formatBytes(size)} + {dayjs(created_at).fromNow()} {fromUser && ( - - by {fromUser.name} + + by {fromUser.name} )} @@ -178,14 +178,14 @@ const FileMessage: FC = ({
{sending ? ( - + ) : ( - - + + )}
- +
); }; diff --git a/src/common/component/FileMessage/styled.tsx b/src/common/component/FileMessage/styled.tsx deleted file mode 100644 index c21bb177..00000000 --- a/src/common/component/FileMessage/styled.tsx +++ /dev/null @@ -1,66 +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; - &.sending { - opacity: 0.9; - } - * { - user-select: text; - } - .basic { - 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 { - white-space: nowrap; - font-weight: 400; - font-size: 12px; - line-height: 18px; - color: #616161; - display: flex; - gap: 16px; - .from strong { - font-weight: bold; - } - } - } - .download { - white-space: nowrap; - svg path{ - fill: #616161; - } - } - .cancel { - cursor: pointer; - } - } -`; - -export default Styled; diff --git a/src/common/component/ForwardModal/index.tsx b/src/common/component/ForwardModal/index.tsx index e24a4740..531cce05 100644 --- a/src/common/component/ForwardModal/index.tsx +++ b/src/common/component/ForwardModal/index.tsx @@ -5,7 +5,6 @@ import Button from "../styled/Button"; import Input from "../styled/Input"; import Channel from "../Channel"; import User from "../User"; -// import Channel from "../Channel"; import Reply from "../Message/Reply"; import StyledWrapper from "./styled"; import useForwardMessage from "../../hook/useForwardMessage"; diff --git a/src/common/component/GithubLoginButton.tsx b/src/common/component/GithubLoginButton.tsx index cfdac6f2..ce56ac68 100644 --- a/src/common/component/GithubLoginButton.tsx +++ b/src/common/component/GithubLoginButton.tsx @@ -1,23 +1,8 @@ import { FC, useEffect } from "react"; import IconGithub from "../../assets/icons/github.svg"; -import styled from "styled-components"; import Button from "./styled/Button"; import { useTranslation } from "react-i18next"; -const StyledSocialButton = styled(Button)` - width: 100%; - display: flex; - align-items: center; - justify-content: center; - gap: 12px; - color: #344054; - border: 1px solid #d0d5dd; - background: none !important; - .icon { - width: 24px; - height: 24px; - } -`; type Props = { source?: "widget" | "webapp", @@ -60,10 +45,10 @@ const GithubLoginButton: FC = ({ type = "login", source = "webapp", clien }; return ( - - + ); }; export default GithubLoginButton; diff --git a/src/common/component/GoogleLoginButton.tsx b/src/common/component/GoogleLoginButton.tsx index bd2991c7..b21acfe5 100644 --- a/src/common/component/GoogleLoginButton.tsx +++ b/src/common/component/GoogleLoginButton.tsx @@ -1,54 +1,12 @@ import { FC, useEffect, useState } from "react"; import { GoogleLogin, GoogleOAuthProvider } from "@react-oauth/google"; import toast from "react-hot-toast"; -import styled from "styled-components"; import { KEY_LOCAL_MAGIC_TOKEN } from "../../app/config"; import IconGoogle from "../../assets/icons/google.svg"; import Button from "./styled/Button"; import { useLoginMutation } from "../../app/services/auth"; import { useTranslation } from "react-i18next"; -const StyledSocialButton = styled(Button)` - position: relative; - width: 100%; - background: white !important; - border: 1px solid #d0d5dd; - color: #344054; - height: 46px; - overflow: hidden; - .mask { - background: inherit; - position: absolute; - left: 0; - top: 0; - width: 100%; - display: flex; - align-items: center; - justify-content: center; - gap: 12px; - z-index: 998; - height: 40px; - .icon { - width: 24px; - height: 24px; - } - } - > .hide { - left: 0; - top: 0; - position: absolute; - width: 100%; - iframe { - width: 100% !important; - } - } - &:hover { - .hide { - opacity: 0; - z-index: 999; - } - } -`; interface Props { loadError?: boolean; @@ -86,16 +44,16 @@ const GoogleLoginInner: FC = ({ type = "login", loaded, loadError }) => { }, [error]); return ( - -
- + ); }; diff --git a/src/common/component/Manifest/Prompt.tsx b/src/common/component/Manifest/Prompt.tsx index 91deee84..608ed7c0 100644 --- a/src/common/component/Manifest/Prompt.tsx +++ b/src/common/component/Manifest/Prompt.tsx @@ -1,51 +1,8 @@ import { FC } from "react"; -import styled from "styled-components"; import Modal from "../Modal"; import IconClose from "../../../assets/icons/close.svg"; import Button from "../styled/Button"; -const Styled = styled.div` - position: relative; - margin-top: 15px; - pointer-events: all; - width: 406px; - padding: 16px; - border-radius: 6px; - background: #fff; - box-shadow: 0 25px 50px rgba(31, 41, 55, 0.25); - display: flex; - flex-direction: column; - gap: 12px; - .tip { - display: flex; - flex-direction: column; - gap: 16px; - color: #344054; - .title { - font-weight: 600; - font-size: 16px; - line-height: 24px; - } - .desc { - font-weight: 400; - font-size: 14px; - line-height: 20px; - } - } - .btns { - width: 100%; - display: flex; - justify-content: flex-end; - gap: 16px; - } - .close { - cursor: pointer; - position: absolute; - top: 16px; - right: 16px; - } -`; - interface Props { handleInstall?: () => void; closePrompt?: () => void; @@ -54,13 +11,13 @@ interface Props { const Prompt: FC = ({ handleInstall, closePrompt }) => { return ( - - -
-

Install web app on desktop?

-

Add to desktop for quick access to this app.

+
+ +
+

Install web app on desktop?

+

Add to desktop for quick access to this app.

-
+
@@ -68,7 +25,7 @@ const Prompt: FC = ({ handleInstall, closePrompt }) => { Install
- +
); }; diff --git a/src/common/component/MarkdownRender.tsx b/src/common/component/MarkdownRender.tsx index 0d1e0a47..7c59b785 100644 --- a/src/common/component/MarkdownRender.tsx +++ b/src/common/component/MarkdownRender.tsx @@ -3,21 +3,10 @@ import "prismjs/themes/prism.css"; import "@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css"; //@ts-ignore import codeSyntaxHighlight from "@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight-all.js"; - import { Viewer } from "@toast-ui/react-editor"; -import styled from "styled-components"; + import ImagePreviewModal, { PreviewImageData } from "./ImagePreviewModal"; -const Styled = styled.div` - * { - user-select: text; - } - .toastui-editor-contents { - display: flex; - flex-direction: column; - align-items: flex-start; - } -`; interface IProps { content: string; @@ -60,9 +49,9 @@ const MarkdownRender: FC = ({ content }) => { {previewImage && ( )} - +
- +
); }; diff --git a/src/common/component/Tooltip.tsx b/src/common/component/Tooltip.tsx index 22926614..967dafa2 100644 --- a/src/common/component/Tooltip.tsx +++ b/src/common/component/Tooltip.tsx @@ -1,43 +1,18 @@ -// import React from 'react' -import Tippy, { TippyProps } from "@tippyjs/react"; -import styled from "styled-components"; import { FC } from "react"; +import Tippy, { TippyProps } from "@tippyjs/react"; +import clsx from "clsx"; -const StyledTip = styled.div` - position: relative; - background: #fff; - padding: 8px 12px; - font-weight: 500; - font-size: 12px; - line-height: 18px; - color: #1d2939; - border-radius: var(--br); - box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03); - &::after { - background-color: inherit; - position: absolute; - content: ""; - width: 12px; - height: 12px; - border-radius: 1px; - transform-origin: center; - } - &.right::after { - left: 0; - top: 50%; - transform: translate3d(-50%, -50%, 0) rotate(45deg); - } - &.top::after { - left: 50%; - bottom: 0; - transform: translate3d(-50%, 50%, 0) rotate(45deg); - } - &.bottom::after { - top: 0; - left: 50%; - transform: translate3d(-50%, -50%, 0) rotate(45deg); - } -`; + +const Triangle: FC> = ({ placement }) => { + if (placement == "left") return null; + const cls = clsx("w-3 h-3 bg-inherit absolute rounded-[1px] origin-center rotate-45", + placement == "right" && "left-0 top-1/2 -translate-x-1/2 -translate-y-1/2", + placement == "top" && "left-1/2 bottom-0 -translate-x-1/2 translate-y-1/2", + placement == "bottom" && "top-0 left-1/2 -translate-x-1/2 -translate-y-1/2", + + ); + return ; +}; type Props = { tip: string; @@ -52,7 +27,10 @@ const Tooltip: FC = ({ tip = "", placement = "right", delay = null, child duration={delay ? defaultDuration : 0} delay={delay ?? [150, 0]} placement={placement} - content={{tip}} + content={
+ + {tip} +
} {...rest} > {children} diff --git a/src/common/component/User/index.tsx b/src/common/component/User/index.tsx index f9bb96d4..39f8e22f 100644 --- a/src/common/component/User/index.tsx +++ b/src/common/component/User/index.tsx @@ -6,7 +6,6 @@ import IconBot from "../../../assets/icons/bot.svg"; import Avatar from "../Avatar"; import Profile from "../Profile"; import ContextMenu from "./ContextMenu"; -import StyledWrapper from "./styled"; import useContextMenu from "../../hook/useContextMenu"; import { useAppSelector } from "../../../app/store"; import clsx from "clsx"; @@ -44,6 +43,11 @@ const User: FC = ({ }; if (!curr) return null; const online = curr.online || curr.uid == loginUid; + const containerClass = clsx(`relative flex items-center justify-start gap-2 p-2 rounded-lg select-none `, interactive && "hover:bg-gray-500/10", compact && "p-0"); + const nameClass = clsx(`text-sm text-gray-500 max-w-[190px] overflow-hidden text-ellipsis font-semibold`); + const statusClass = clsx(`absolute -bottom-0.5 -right-1.5 w-3 h-3 box-content rounded-full border-[2px] border-solid border-white`, + online ? "bg-[#22c55e]" : "bg-[#a1a1aa]", + compact && "w-3.5 h-3.5"); if (!popover) return ( = ({ visible={contextMenuVisible} hide={hideContextMenu} > - -
+
-
+
{!compact && ( - + {curr?.name} )} {owner && } {curr.is_bot && } - +
); return ( @@ -94,30 +98,30 @@ const User: FC = ({ trigger="click" content={} > - -
+
-
+
{!compact && ( - + {curr?.name} )} {owner && } {curr.is_bot && } - +
); diff --git a/src/common/component/User/styled.tsx b/src/common/component/User/styled.tsx deleted file mode 100644 index 3fa76f7c..00000000 --- a/src/common/component/User/styled.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import styled from "styled-components"; - -const StyledWrapper = styled.div` - display: flex; - align-items: center; - justify-content: flex-start; - gap: 8px; - padding: 8px; - border-radius: 8px; - user-select: none; - &.interactive { - &:hover, - &.active { - background: rgba(116, 127, 141, 0.1); - } - } - .avatar { - cursor: pointer; - width: ${({ size }: { size: number }) => `${size}px`}; - height: ${({ size }: { size: number }) => `${size}px`}; - position: relative; - img { - object-fit: cover; - border-radius: 50%; - width: 100%; - height: 100%; - } - .status { - position: absolute; - bottom: -2px; - right: -6px; - width: 12px; - height: 12px; - box-sizing: content-box; - border-radius: 50%; - border: 2px solid #fff; - &.online { - background-color: #22c55e; - } - &.offline { - background-color: #a1a1aa; - } - &.alert { - background-color: #dc2626; - } - } - } - .name { - font-weight: 600; - font-size: 14px; - line-height: 20px; - color: #52525b; - max-width: 190px; - overflow: hidden; - text-overflow: ellipsis; - } - /* session nav */ - &.compact { - padding: 0; - .avatar .status { - width: 15px; - height: 15px; - } - } -`; - -export default StyledWrapper; diff --git a/src/common/utils.tsx b/src/common/utils.tsx index 84b5bbf5..21da2f96 100644 --- a/src/common/utils.tsx +++ b/src/common/utils.tsx @@ -160,7 +160,7 @@ export function sliceFile(file: File | null, chunksAmount: number) { return chunks; } -export const getFileIcon = (type: string, name = "") => { +export const getFileIcon = (type: string, name = "", className = "icon") => { let icon = null; const checks = { @@ -176,27 +176,27 @@ export const getFileIcon = (type: string, name = "") => { switch (true) { case checks.image.test(_type): { - icon = ; + icon = ; } break; case checks.pdf.test(_type): - icon = ; + icon = ; break; case checks.code.test(_type): - icon = ; + icon = ; break; case checks.doc.test(_type): - icon = ; + icon = ; break; case checks.audio.test(_type): - icon = ; + icon = ; break; case checks.video.test(_type): - icon = ; + icon = ; break; default: - icon = ; + icon = ; break; } return icon; diff --git a/src/routes/chat/ChannelChat/PinList.tsx b/src/routes/chat/ChannelChat/PinList.tsx index 1fd03df3..42d55da6 100644 --- a/src/routes/chat/ChannelChat/PinList.tsx +++ b/src/routes/chat/ChannelChat/PinList.tsx @@ -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 = ({ id }: Props) => { }; const noPins = pins.length == 0; return ( - -

{t("pinned_msg")}({pins.length})

+ +

{t("pinned_msg")}({pins.length})

{noPins ? ( -
+
-
{t("pin_empty_tip")}
+
{t("pin_empty_tip")}
) : ( -
    +
      {pins.map((data) => { return ( -
    • +
    • -
      +
      {canPin && ( - )} diff --git a/src/routes/chat/ChannelChat/index.tsx b/src/routes/chat/ChannelChat/index.tsx index 49873a05..7aa75c7c 100644 --- a/src/routes/chat/ChannelChat/index.tsx +++ b/src/routes/chat/ChannelChat/index.tsx @@ -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) {
    } header={ - -
    +
    +
    - {name} - {description} + {name} + {description}
    - +
    } users={ diff --git a/src/routes/chat/ChannelChat/styled.tsx b/src/routes/chat/ChannelChat/styled.tsx index 202e291f..000be93f 100644 --- a/src/routes/chat/ChannelChat/styled.tsx +++ b/src/routes/chat/ChannelChat/styled.tsx @@ -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; diff --git a/src/routes/chat/DMChat/index.tsx b/src/routes/chat/DMChat/index.tsx index 18e5cc5c..7b740cca 100644 --- a/src/routes/chat/DMChat/index.tsx +++ b/src/routes/chat/DMChat/index.tsx @@ -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 = ({ uid = 0, dropFiles }) => {
} header={ - +
- +
} > - +
{hasMore ? : null} {[...feeds].map((mid, idx) => { const curr = messageData[mid]; @@ -86,7 +85,7 @@ const DMChat: FC = ({ uid = 0, dropFiles }) => { context: "user" }); })} - +
); }; diff --git a/src/routes/chat/DMChat/styled.tsx b/src/routes/chat/DMChat/styled.tsx deleted file mode 100644 index 09a31415..00000000 --- a/src/routes/chat/DMChat/styled.tsx +++ /dev/null @@ -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; -`; diff --git a/src/routes/chat/GuestChannelChat/index.tsx b/src/routes/chat/GuestChannelChat/index.tsx index ef2b6804..e5ab52da 100644 --- a/src/routes/chat/GuestChannelChat/index.tsx +++ b/src/routes/chat/GuestChannelChat/index.tsx @@ -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={ - -
+
+
- {name} - {description} + {name} + {description}
- +
} > diff --git a/src/routes/chat/GuestChannelChat/styled.tsx b/src/routes/chat/GuestChannelChat/styled.tsx index d8691476..063bc17b 100644 --- a/src/routes/chat/GuestChannelChat/styled.tsx +++ b/src/routes/chat/GuestChannelChat/styled.tsx @@ -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%; diff --git a/src/routes/chat/index.tsx b/src/routes/chat/index.tsx index 77ffe49d..32385a39 100644 --- a/src/routes/chat/index.tsx +++ b/src/routes/chat/index.tsx @@ -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() { )} {usersModalVisible && } - + + {sessionListVisible &&
}
{isGuest ? : } - + }
{placeholderVisible && (isGuest ? : )} diff --git a/src/routes/home/User.tsx b/src/routes/home/User.tsx index 4586d271..64161e97 100644 --- a/src/routes/home/User.tsx +++ b/src/routes/home/User.tsx @@ -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 = ({ uid }) => { if (!user) return null; return ( - +
-
- +
+
- +
); }; diff --git a/src/routes/login/MagicLinkLogin.tsx b/src/routes/login/MagicLinkLogin.tsx index 8f267eee..ebf9ab04 100644 --- a/src/routes/login/MagicLinkLogin.tsx +++ b/src/routes/login/MagicLinkLogin.tsx @@ -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 Sign in with Magic Link; + return ; } diff --git a/src/routes/onboarding/steps/admin-account.tsx b/src/routes/onboarding/steps/admin-account.tsx index 8a855d34..ef9b9a9f 100644 --- a/src/routes/onboarding/steps/admin-account.tsx +++ b/src/routes/onboarding/steps/admin-account.tsx @@ -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 = ({ serverName }) => { }, [isUpdatedServer]); return ( - - {t("admin_title")} - {t("admin_desc")} -
+
+ {t("admin_title")} + {t("admin_desc")} + = ({ serverName }) => { onChange={(e) => setEmail(e.target.value)} /> = ({ serverName }) => { onChange={(e) => setPassword(e.target.value)} /> = ({ serverName }) => { /> { const formEle = formRef?.current; if (formEle) { @@ -174,7 +126,7 @@ const AdminAccount: FC = ({ serverName }) => { > {!(isSigningUp || isLoggingIn || isUpdatingServer) ? t("sign") : "..."} - +
); }; export default AdminAccount; diff --git a/src/routes/onboarding/steps/done-page.tsx b/src/routes/onboarding/steps/done-page.tsx index 3872e0da..86f58f03 100644 --- a/src/routes/onboarding/steps/done-page.tsx +++ b/src/routes/onboarding/steps/done-page.tsx @@ -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 ( - - {t("done_welcome", { serverName })} - {t("done_title")} - +
+ {t("done_welcome", { serverName })} + {t("done_title")} + - + - navigate("/")}> - play icon - {t("enter")} + navigate("/")}> + play icon + {t("enter")} - +
); } diff --git a/src/routes/onboarding/steps/server-name.tsx b/src/routes/onboarding/steps/server-name.tsx index b48b18cf..b4de9cd0 100644 --- a/src/routes/onboarding/steps/server-name.tsx +++ b/src/routes/onboarding/steps/server-name.tsx @@ -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 = ({ serverName, setServerName }) => { const { t } = useTranslation("welcome", { keyPrefix: "onboarding" }); const { nextStep } = useWizard(); + return ( - - {t("new_server")} - +
+ {t("new_server")} + {t("server_desc")} setServerName(e.target.value)} /> { // Verification for space name if (serverName === "") { @@ -79,7 +38,7 @@ const ServerName: FC = ({ serverName, setServerName }) => { > {t("create_server")} - +
); }; export default ServerName; diff --git a/src/routes/onboarding/steps/welcome-page.tsx b/src/routes/onboarding/steps/welcome-page.tsx index ddcaba4d..b53b7411 100644 --- a/src/routes/onboarding/steps/welcome-page.tsx +++ b/src/routes/onboarding/steps/welcome-page.tsx @@ -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 ( - - {t("welcome")} - +
+ {t("welcome")} + {t("welcome_desc")} - + play icon {t("start")} - +
); } diff --git a/src/routes/onboarding/steps/who-can-sign-up.tsx b/src/routes/onboarding/steps/who-can-sign-up.tsx index bcb8fca6..a56c2620 100644 --- a/src/routes/onboarding/steps/who-can-sign-up.tsx +++ b/src/routes/onboarding/steps/who-can-sign-up.tsx @@ -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 ( - - {t("onboarding.invite_title")} - {t("onboarding.invite_desc")} + + {t("onboarding.invite_title")} + {t("onboarding.invite_desc")} {value && } { // nextStep(); diff --git a/src/routes/resources/Filter/Type.tsx b/src/routes/resources/Filter/Type.tsx index 956be8d7..269337ce 100644 --- a/src/routes/resources/Filter/Type.tsx +++ b/src/routes/resources/Filter/Type.tsx @@ -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: + icon: }, pdf: { title: "PDFs", - icon: + icon: }, image: { title: "Images", - icon: + icon: }, audio: { title: "Audio", - icon: + icon: }, video: { title: "Videos", - icon: + icon: }, code: { title: "Code Snippets", - icon: + icon: }, unknown: { title: "Unknown Files", - icon: + icon: } }; type Props = { @@ -86,23 +46,24 @@ const Type: FC = ({ select = "", updateFilter }) => { const handleClick = (type?: string) => { updateFilter({ type }); }; + return ( - -
    -
  • +
    +
      +
    • Any Type {!select && }
      • {Object.entries(FileTypes).map(([type, { title, icon }]) => { return ( -
    • +
    • {icon} {title} - {select == type && } + {select == type && }
      • ); })}
    - +
    ); }; export default Type; diff --git a/src/routes/sendMagicLink/SentTip.tsx b/src/routes/sendMagicLink/SentTip.tsx index 13004ce1..3fa0c31a 100644 --- a/src/routes/sendMagicLink/SentTip.tsx +++ b/src/routes/sendMagicLink/SentTip.tsx @@ -10,9 +10,9 @@ interface Props { const SentTip: FC = ({ email, reset }) => { const { t } = useTranslation("auth"); return ( -
    -

    {t("check_email")}

    - +
    +

    {t("check_email")}

    + {t("check_email_desc", { email })} + )}
    - +
    ); } diff --git a/src/routes/sendMagicLink/styled.tsx b/src/routes/sendMagicLink/styled.tsx deleted file mode 100644 index 7aba28f3..00000000 --- a/src/routes/sendMagicLink/styled.tsx +++ /dev/null @@ -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; diff --git a/src/routes/setting/License/LicensePriceListModal.tsx b/src/routes/setting/License/LicensePriceListModal.tsx index cfbaf573..043eae12 100644 --- a/src/routes/setting/License/LicensePriceListModal.tsx +++ b/src/routes/setting/License/LicensePriceListModal.tsx @@ -44,7 +44,7 @@ const LicensePriceListModal: FC = ({ 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 || ""}` diff --git a/src/routes/setting/LogoutConfirmModal.tsx b/src/routes/setting/LogoutConfirmModal.tsx index 19a6850e..ea040c25 100644 --- a/src/routes/setting/LogoutConfirmModal.tsx +++ b/src/routes/setting/LogoutConfirmModal.tsx @@ -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 = ({ closeModal }) => { return ( - = ({ closeModal }) => { } > -
    -