chore: tweak responsible styles

This commit is contained in:
Steven
2023-12-19 08:41:41 +08:00
parent fe4ec0b156
commit a3a1bbe8de
16 changed files with 411 additions and 399 deletions

View File

@ -20,30 +20,32 @@ const Inboxes = () => {
}, []);
return (
<section className="@container w-full max-w-3xl min-h-full flex flex-col justify-start items-center px-4 sm:px-2 sm:pt-4 pb-8">
<section className="@container w-full max-w-4xl min-h-full flex flex-col justify-start items-center sm:pt-4 pb-8">
<MobileHeader />
<div className="w-full shadow flex flex-col justify-start items-start px-4 py-3 rounded-xl bg-white dark:bg-zinc-700 text-black dark:text-gray-300">
<div className="relative w-full flex flex-row justify-between items-center">
<p className="px-2 py-1 flex flex-row justify-start items-center select-none opacity-80">
<Icon.Bell className="w-5 h-auto mr-1" /> {t("common.inbox")}
</p>
</div>
<div className="w-full h-auto flex flex-col justify-start items-start px-2 pb-4 bg-white dark:bg-zinc-700">
{inboxes.length === 0 && (
<div className="w-full mt-4 mb-8 flex flex-col justify-center items-center italic">
<Empty />
<p className="mt-4 text-gray-600 dark:text-gray-400">{t("message.no-data")}</p>
<div className="w-full px-4">
<div className="w-full shadow flex flex-col justify-start items-start px-4 py-3 rounded-xl bg-white dark:bg-zinc-700 text-black dark:text-gray-300">
<div className="relative w-full flex flex-row justify-between items-center">
<p className="px-2 py-1 flex flex-row justify-start items-center select-none opacity-80">
<Icon.Bell className="w-5 h-auto mr-1" /> {t("common.inbox")}
</p>
</div>
<div className="w-full h-auto flex flex-col justify-start items-start px-2 pb-4 bg-white dark:bg-zinc-700">
{inboxes.length === 0 && (
<div className="w-full mt-4 mb-8 flex flex-col justify-center items-center italic">
<Empty />
<p className="mt-4 text-gray-600 dark:text-gray-400">{t("message.no-data")}</p>
</div>
)}
<div className="flex flex-col justify-start items-start w-full mt-4 gap-4">
{inboxes.map((inbox) => {
if (inbox.type === Inbox_Type.TYPE_MEMO_COMMENT) {
return <MemoCommentMessage key={`${inbox.name}-${inbox.status}`} inbox={inbox} />;
} else if (inbox.type === Inbox_Type.TYPE_VERSION_UPDATE) {
return <VersionUpdateMessage key={`${inbox.name}-${inbox.status}`} inbox={inbox} />;
}
return undefined;
})}
</div>
)}
<div className="flex flex-col justify-start items-start w-full mt-4 gap-4">
{inboxes.map((inbox) => {
if (inbox.type === Inbox_Type.TYPE_MEMO_COMMENT) {
return <MemoCommentMessage key={`${inbox.name}-${inbox.status}`} inbox={inbox} />;
} else if (inbox.type === Inbox_Type.TYPE_VERSION_UPDATE) {
return <VersionUpdateMessage key={`${inbox.name}-${inbox.status}`} inbox={inbox} />;
}
return undefined;
})}
</div>
</div>
</div>