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

chore: update UI

Browse Source
This commit is contained in:
Tristan Yang
2023-02-08 17:27:46 +08:00
parent 9cefd14565
commit c6f9cc2cef
12 changed files with 28 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/icons/channel.private.svg
+3 -3
View File
@@ -1,4 +1,4 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.83667 8.33333L6.48667 11.6667H6.4H3.25V13.3333H6.23333L5.8 17.5H7.475L7.91667 13.3333H11.2417L10.8083 17.5H12.4917L12.9333 13.3333H16.6167V11.6667H13.1167L13.2917 10H11.6625L11.4875 11.6667H8.1625L8.5125 8.33333H10.8334V6.66667H8.66667L9.10833 2.5H7.43333L7 6.66667H3.325V8.33333H6.83667Z" fill="#616161"/>
<path d="M16.6875 4.16675V3.33341C16.6875 2.40008 15.875 1.66675 15 1.66675C14.125 1.66675 13.3333 2.40008 13.3333 3.33341V4.16675C12.8731 4.16675 12.5 4.53985 12.5 5.00008V7.50008C12.5 7.96031 12.8731 8.33341 13.3333 8.33341H15H16.6667C17.1269 8.33341 17.5 7.96031 17.5 7.50008V4.97925C17.5 4.53051 17.1362 4.16675 16.6875 4.16675ZM15.8333 4.16675H14.1667V3.33341C14.1667 2.85722 14.5556 2.50008 15 2.50008C15.4444 2.50008 15.8333 2.85722 15.8333 3.33341V4.16675Z" fill="#616161"/>
<svg width="20" height="20" viewBox="0 0 20 20" fill="#616161" xmlns="http://www.w3.org/2000/svg">
<path d="M6.83667 8.33333L6.48667 11.6667H6.4H3.25V13.3333H6.23333L5.8 17.5H7.475L7.91667 13.3333H11.2417L10.8083 17.5H12.4917L12.9333 13.3333H16.6167V11.6667H13.1167L13.2917 10H11.6625L11.4875 11.6667H8.1625L8.5125 8.33333H10.8334V6.66667H8.66667L9.10833 2.5H7.43333L7 6.66667H3.325V8.33333H6.83667Z"/>
<path d="M16.6875 4.16675V3.33341C16.6875 2.40008 15.875 1.66675 15 1.66675C14.125 1.66675 13.3333 2.40008 13.3333 3.33341V4.16675C12.8731 4.16675 12.5 4.53985 12.5 5.00008V7.50008C12.5 7.96031 12.8731 8.33341 13.3333 8.33341H15H16.6667C17.1269 8.33341 17.5 7.96031 17.5 7.50008V4.97925C17.5 4.53051 17.1362 4.16675 16.6875 4.16675ZM15.8333 4.16675H14.1667V3.33341C14.1667 2.85722 14.5556 2.50008 15 2.50008C15.4444 2.50008 15.8333 2.85722 15.8333 3.33341V4.16675Z" />
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 905 B

After

Width:  |  Height:  |  Size: 880 B

src/common/component/ChannelIcon.tsx
+2 -2
View File
@@ -10,8 +10,8 @@ interface Props {
const ChannelIcon: FC<Props> = ({ personal = false, muted = false, className = "" }) => {
return (
<div className={`flex${muted ? "!text-gray-400 !fill-slate-400" : ""} ${className}`}>
{personal ? <LockHashIcon /> : <HashIcon />}
<div className={`flex ${muted ? "!text-gray-400" : ""} ${className}`}>
{personal ? <LockHashIcon className="dark:fill-gray-300" /> : <HashIcon className="dark:fill-gray-300" />}
</div>
);
};
src/common/component/FileBox/index.tsx
+3 -3
View File
@@ -87,12 +87,12 @@ const FileBox: FC<Props> = ({
return (
<div
className={clsx(`h-[66px] rounded-md border border-solid border-gray-300 bg-gray-100`, flex ? "w-full" : "w-[370px]", withPreview && "relative overflow-hidden h-[281px]", file_type.startsWith("audio") && "h-[125px]")}
className={clsx(`h-[66px] rounded-md border border-solid border-gray-300 dark:border-gray-500 bg-gray-100 dark:bg-gray-900`, flex ? "w-full" : "w-[370px]", withPreview && "relative overflow-hidden h-[281px]", file_type.startsWith("audio") && "h-[125px]")}
>
<div className="w-full p-2 flex items-center justify-between gap-2">
{icon}
<div className="flex flex-col gap-1 w-full overflow-hidden">
<span className="font-semibold text-sm text-gray-800 whitespace-nowrap text-ellipsis">{name}</span>
<span className="font-semibold text-sm text-gray-800 dark:text-gray-200 whitespace-nowrap text-ellipsis">{name}</span>
<em className="text-xs text-gray-500 flex gap-4 not-italic">
<span className="size">{formatBytes(size)}</span>
<span className="time">{dayjs(created_at).fromNow()}</span>
@@ -102,7 +102,7 @@ const FileBox: FC<Props> = ({
</em>
</div>
<a className="whitespace-nowrap" download={name} href={`${content}&download=true`}>
<IconDownload className="fill-gray-500" />
<IconDownload className="fill-gray-500 dark:fill-gray-300" />
</a>
</div>
{withPreview && <div className="h-[calc(100%_-_64px)] overflow-hidden">{previewContent}</div>}
src/common/component/FileMessage/index.tsx
+8 -8
View File
@@ -156,22 +156,22 @@ const FileMessage: FC<Props> = ({
/>
);
return (
<div className={clsx(`file_message bg-slate-50 border border-solid border-gray-300 box-border w-[370px] h-[66px] rounded-md`, sending && "opacity-90")}>
<div className={clsx(`file_message bg-slate-50 dark:bg-slate-900 border border-solid border-gray-300 dark:border-gray-500 box-border w-[370px] h-[66px] rounded-md`, sending && "opacity-90")}>
<div className="p-2 flex items-center justify-between gap-2">
{icon}
<div className="flex flex-col gap-1 w-full overflow-hidden">
<span className="font-semibold text-sm text-gray-800 whitespace-nowrap text-ellipsis">{name}</span>
<span className="whitespace-nowrap text-xs text-gray-500 flex gap-4">
<span className="font-semibold text-sm text-gray-800 dark:text-gray-100 whitespace-nowrap text-ellipsis">{name}</span>
<span className="whitespace-nowrap text-xs text-gray-500 dark:text-gray-300 flex gap-4">
{sending ? (
<Progress value={progress} width={"80%"} />
) : (
<>
<i>{formatBytes(size)}</i>
<i>{dayjs(created_at).fromNow()}</i>
<strong>{formatBytes(size)}</strong>
<strong>{dayjs(created_at).fromNow()}</strong>
{fromUser && (
<i>
<strong>
by <strong className="font-bold">{fromUser.name}</strong>
</i>
</strong>
)}
</>
)}
@@ -181,7 +181,7 @@ const FileMessage: FC<Props> = ({
<IconClose className="cursor-pointer" onClick={handleCancel} />
) : (
<a className="whitespace-nowrap" download={name} href={`${content}&download=true`}>
<IconDownload className="fill-gray-500" />
<IconDownload className="fill-gray-500 dark:fill-gray-400" />
</a>
)}
</div>
src/common/component/GoogleLoginButton.tsx
+1 -1
View File
@@ -44,7 +44,7 @@ const GoogleLoginInner: FC<Props> = ({ type = "login", loaded, loadError }) => {
}, [error]);
return (
<Button className="group relative w-full !bg-white !text-gray-600 !h-[46px] overflow-hidden !border !border-solid !border-[#d0d5dd]" disabled={!loaded || isLoading}>
<Button className=" group relative w-full bg-white dark:bg-[#384250] text-gray-600 dark:text-gray-200 !h-[46px] overflow-hidden border border-solid border-[#d0d5dd]" disabled={!loaded || isLoading}>
<div className="absolute left-0 top-0 w-full flex-center gap-3 z-[998] h-10 bg-inherit">
<IconGoogle className="w-6 h-6" />
{loadError
src/common/component/Message/index.tsx
+1 -1
View File
@@ -96,7 +96,7 @@ const Message: FC<IProps> = ({
onContextMenu={readOnly ? undefined : handleContextMenuEvent}
data-msg-mid={mid}
ref={inviewRef}
className={clsx(`group w-full relative flex items-start gap-4 px-2 py-1 my-2 rounded-lg dark:hover:bg-gray-800 hover:bg-gray-50`,
className={clsx(`group w-full relative flex items-start gap-4 px-2 py-1 my-2 rounded-lg dark:hover:bg-gray-800 hover:bg-gray-100`,
readOnly && "hover:bg-transparent",
showExpire && "bg-red-200",
pinInfo && "bg-cyan-50 dark:bg-cyan-800 pt-7"
src/common/component/styled/Input.tsx
+2 -2
View File
@@ -44,14 +44,14 @@ const Input: FC<Props> = ({ type = "text", prefix = "", className = "", ...rest
isPwd && "pr-[30px]"
);
return type == "password" ? (
<div className={`w-full relative flex overflow-hidden rounded border border-gray-300 dark:border-gray-500 shadow ${className}`}>
<div className={`w-full relative flex overflow-hidden rounded border border-gray-300 dark:border-gray-400 shadow ${className}`}>
<input type={inputType} autoComplete={inputType == "password" ? "current-password" : "on"} className={`${inputClass} ${className}`} {...rest} />
<div className="absolute top-1/2 right-2.5 -translate-y-1/2 cursor-pointer" onClick={togglePasswordVisible}>
{inputType == "password" ? <IconEyeClose className="fill-gray-500" /> : <IconEyeOpen className="fill-gray-500" />}
</div>
</div>
) : prefix ? (
<div className={`w-full relative flex overflow-hidden rounded border border-gray-300 dark:border-gray-500 shadow ${className}`}>
<div className={`w-full relative flex overflow-hidden rounded border border-gray-300 dark:border-gray-400 shadow ${className}`}>
<span className="px-4 py-2 text-sm text-gray-500 dark:text-gray-300 bg-gray-200 dark:bg-gray-800 border dark:border-gray-600">{prefix}</span>
<input className={`${inputClass} ${className}`} type={inputType} {...rest} />
</div>
src/common/component/styled/Radio.tsx
+2 -2
View File
@@ -43,10 +43,10 @@ const Radio: FC<Props> = ({
}}
id={`${id}-${index}`}
/>
<div className="drop-shadow px-2 py-3 border border-gray-300 dark:border-gray-400 rounded-lg w-full h-full bg-white dark:bg-gray-800 peer-checked:bg-primary-400 text-sm text-gray-500 dark:text-gray-300 peer-checked:text-white">
<div className="drop-shadow px-2 py-3 border border-solid border-gray-300 dark:border-gray-400 rounded-lg w-full h-full bg-white dark:bg-gray-800 peer-checked:bg-primary-400 text-sm text-gray-500 dark:text-gray-300 peer-checked:text-white">
<label className="ml-6" htmlFor={`${id}-${index}`}>{item}</label>
</div>
<div className="absolute top-1/2 left-3 -translate-y-1/2 w-3.5 h-3.5 rounded-full border border-gray-300 peer-checked:hidden"></div>
<div className="absolute top-1/2 left-3 -translate-y-1/2 w-3.5 h-3.5 rounded-full border border-solid border-gray-300 peer-checked:hidden"></div>
<div className="absolute top-1/2 left-3 -translate-y-1/2 w-3.5 h-3.5 rounded-full border border-solid border-white invisible peer-checked:visible flex-center">
<div className="w-1 h-1 bg-white rounded-full"></div>
</div>
src/routes/chat/ChannelChat/index.tsx
+2 -2
View File
@@ -132,8 +132,8 @@ function ChannelChat({ cid = 0, dropFiles = [] }: Props) {
</ul>
}
header={
<header className="box-border h-14 px-5 border-solid border-b border-b-black/10 flex items-center justify-center md:justify-between">
<div className="flex items-center gap-1 text-base">
<header className="h-14 px-5 flex items-center justify-center md:justify-between shadow-[inset_0_-1px_0_rgb(0_0_0_/_10%)]">
<div className="flex items-center gap-1">
<ChannelIcon personal={!is_public} />
<span className="text-gray-800 dark:text-white">{name}</span>
<span className="ml-2 text-gray-500">{description}</span>
src/routes/chat/GuestChannelChat/index.tsx
+2 -2
View File
@@ -40,8 +40,8 @@ export default function GuestChannelChat({ cid = 0 }: Props) {
to={cid}
context="channel"
header={
<header className="head flex items-center h-full justify-center md:justify-between">
<div className="flex items-center gap-1 text-base">
<header className="box-border h-14 px-5 border-solid border-b border-b-black/10 flex items-center justify-center md:justify-between">
<div className="flex items-center gap-1">
<ChannelIcon personal={!is_public} />
<span className="text-gray-800 dark:text-white">{name}</span>
<span className="ml-2 text-gray-500">{description}</span>
src/routes/chat/Layout/index.tsx
+1 -1
View File
@@ -124,7 +124,7 @@ const Layout: FC<Props> = ({
{selects && <Operations context={context} id={to} />}
</div>
</div>
{users && <div className="shadow-[inset_0px_10px_2px_-10px_rgba(0,_0,_0,_0.1)] hidden md:block">{users}</div>}
{users && <div className="hidden md:block">{users}</div>}
{aside && <div className={clsx("p-3 absolute right-0 -top-14 translate-x-full flex-col hidden md:flex")}>{aside}</div>}
</main>
{!readonly && isActive && (
src/routes/chat/index.tsx
+1 -1
View File
@@ -55,7 +55,7 @@ function ChatPage() {
{usersModalVisible && <UsersModal closeModal={toggleUsersModalVisible} />}
<div className={`flex h-full pt-2 pb-2.5 pr-1 ${isGuest ? "!pr-1 !pt-0" : ""} md:!pr-12 `}>
{sessionListVisible && <div onClick={toggleSessionList} className="z-30 fixed top-0 left-4 w-screen h-screen bg-black/50 transition-all backdrop-blur-sm"></div>}
<div className={clsx("flex-col rounded-l-2xl min-w-[268px] h-full border border-solid border-r-black/5 dark:border-none box-border fixed md:relative top-0 left-0 z-40 transition-all md:overflow-auto bg-white dark:!bg-[#1F2A37]", sessionListVisible ? "max-md:translate-x-0" : "max-md:-translate-x-full")}>
<div className={clsx("flex-col rounded-l-2xl min-w-[268px] h-full shadow-[rgb(0_0_0_/_10%)_-1px_0px_0px_inset] fixed md:relative top-0 left-0 z-40 transition-all md:overflow-auto bg-white dark:!bg-[#1F2A37]", sessionListVisible ? "max-md:translate-x-0" : "max-md:-translate-x-full")}>
<Server readonly={isGuest} />
{isGuest ? <GuestSessionList /> : <SessionList tempSession={tmpSession} />}
{sessionListVisible ? null : <button className="absolute top-2 -right-[52px] z-50 p-2 bg-none md:hidden" onClick={toggleSessionList}>