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

chore: polish UI

Browse Source
This commit is contained in:
Tristan Yang
2023-02-23 22:20:15 +08:00
parent d10df4bee5
commit 8a5259a9fd
11 changed files with 24 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/common/component/ChannelModal/index.tsx
+6 -6
View File
@@ -94,9 +94,9 @@ const ChannelModal: FC<Props> = ({ personal = false, closeModal }) => {
return (
<Modal>
<div className="flex max-h-[402px] bg-white dark:bg-gray-800 drop-shadow rounded-lg">
<div className="flex flex-col md:flex-row max-h-screen md:max-h-[402px] bg-white dark:bg-gray-800 drop-shadow rounded-lg">
{!is_public && (
<div className="w-[260px] shadow-[inset_-1px_0px_0px_rgba(0,_0,_0,_0.1)]">
<div className="md:w-[260px] md:shadow-[inset_-1px_0px_0px_rgba(0,_0,_0,_0.1)]">
<div className="sticky top-0 z-[99] rounded-tl-lg shadow-[0px_1px_0px_rgba(0,_0,_0,_0.1)] p-2 w-[calc(100%_-_1px)]">
<input
className="outline-none p-2 text-sm w-full bg-transparent dark:text-white"
@@ -106,7 +106,7 @@ const ChannelModal: FC<Props> = ({ personal = false, closeModal }) => {
/>
</div>
{users && (
<ul className="flex flex-col overflow-y-scroll overflow-x-hidden h-[calc(100%_-_52px_-_10px)]">
<ul className="flex flex-col overflow-y-scroll overflow-x-hidden max-h-80 md:h-[calc(100%_-_52px_-_10px)]">
{users.map((u) => {
const { uid } = u;
const checked = members ? members.includes(uid) : false;
@@ -134,19 +134,19 @@ const ChannelModal: FC<Props> = ({ personal = false, closeModal }) => {
)}
<div className={clsx(`w-80 md:min-w-[400px] flex flex-col items-center p-8 box-border`, !is_public && "w-[344px] justify-evenly")}>
<h3 className="font-semibold text-xl text-gray-600 mb-4 dark:text-white">{t("create_channel")}</h3>
<p className="text-gray-400 mb-12 text-sm font-normal">
<p className="text-gray-400 mb-2 md:mb-12 text-sm font-normal">
{!is_public
? t("create_private_channel_desc")
: t("create_channel_desc")}
</p>
<div className="w-full flex flex-col justify-start gap-2 mb-8">
<div className="w-full flex flex-col justify-start gap-2 mb-2 md:mb-8">
<span className="text-gray-400 text-sm font-normal">{t("channel_name")}</span>
<div className="relative">
<input className="text-gray-600 rounded p-2 pl-9 border border-solid border-gray-300 w-full bg-transparent" onChange={handleNameInput} value={name} placeholder="new channel" />
<ChannelIcon personal={!is_public} className="absolute left-2 top-1/2 -translate-y-1/2" />
</div>
</div>
<div className="w-full flex items-center justify-between mb-12">
<div className="w-full flex items-center justify-between mb-8 md:mb-12">
<span className="text-gray-400 text-sm">{t("private_channel")}</span>
<StyledToggle
checked={!is_public}
src/common/component/FileBox/index.tsx
+3 -3
View File
@@ -80,13 +80,13 @@ const FileBox: FC<Props> = ({
}) => {
const fromUser = useAppSelector((store) => store.users.byId[from_uid]);
const icon = getFileIcon(file_type, name, "icon w-9 h-12");
if (!content || !fromUser || !name) return null;
if (!content || !name) return null;
const previewContent = renderPreview({ file_type, content, name });
const withPreview = preview && previewContent;
return (
<div
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-72 md:w-[370px]", withPreview && "relative overflow-hidden h-[281px]", file_type.startsWith("audio") && "h-[125px]")}
className={clsx(`rounded-md border border-solid border-gray-300 dark:border-gray-500 bg-gray-100 dark:bg-gray-900`, flex ? "w-full" : "w-72 md:w-[370px]", withPreview ? "relative overflow-hidden h-[281px]" : "h-[66px] ", file_type.startsWith("audio") && "h-[125px]")}
>
<div className="w-full p-2 flex items-center justify-between gap-2">
{icon}
@@ -96,7 +96,7 @@ const FileBox: FC<Props> = ({
<span className="size">{formatBytes(size)}</span>
<span className="hidden md:block time">{fromNowTime(created_at)}</span>
<span>
by <strong className="font-bold">{fromUser.name}</strong>
by <strong className="font-bold">{fromUser?.name || "Deleted User"}</strong>
</span>
</em>
</div>