aykhans/slash-e
1
0
Fork 0
mirror of https://github.com/aykhans/slash-e.git synced 2025-04-20 22:07:15 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

chore: tweak styles

Browse Source
This commit is contained in:
Steven 2023-12-10 15:10:53 +08:00
parent 3d109dc1b4
commit 9ac6188707
4 changed files with 22 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/web/src/components/Header.tsx
View File

@ -43,7 +43,7 @@ const Header: React.FC = () => {
)} )}
{shouldShowRouterSwitch && ( {shouldShowRouterSwitch && (
<> <>
<span className="font-mono opacity-60 mx-1">/</span> <span className="font-mono opacity-60 mx-1 dark:text-gray-400">/</span>
<Dropdown <Dropdown
trigger={ trigger={
<button className="flex flex-row justify-end items-center cursor-pointer"> <button className="flex flex-row justify-end items-center cursor-pointer">
@ -51,20 +51,20 @@ const Header: React.FC = () => {
<Icon.ChevronsUpDown className="ml-1 w-4 h-auto text-gray-600 dark:text-gray-400" /> <Icon.ChevronsUpDown className="ml-1 w-4 h-auto text-gray-600 dark:text-gray-400" />
</button> </button>
} }
actionsClassName="!w-36 -left-4" actionsClassName="!w-32 -left-4 text-sm"
actions={ actions={
<> <>
<Link <Link
to="/" to="/"
className="w-full px-2 flex flex-row justify-start items-center text-left dark:text-gray-400 leading-8 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-800 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60" className="w-full px-2 flex flex-row justify-start items-center text-left dark:text-gray-400 leading-8 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-800 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
> >
<Icon.SquareSlash className="w-5 h-auto mr-2 opacity-70" /> Shortcuts <Icon.SquareSlash className="w-4 h-auto mr-2 opacity-70" /> Shortcuts
</Link> </Link>
<Link <Link
to="/collections" to="/collections"
className="w-full px-2 flex flex-row justify-start items-center text-left dark:text-gray-400 leading-8 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-800 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60" className="w-full px-2 flex flex-row justify-start items-center text-left dark:text-gray-400 leading-8 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-800 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
> >
<Icon.LibrarySquare className="w-5 h-auto mr-2 opacity-70" /> Collections <Icon.LibrarySquare className="w-4 h-auto mr-2 opacity-70" /> Collections
</Link> </Link>
</> </>
} }
@ -81,34 +81,34 @@ const Header: React.FC = () => {
<Icon.ChevronDown className="ml-2 w-5 h-auto text-gray-600 dark:text-gray-400" /> <Icon.ChevronDown className="ml-2 w-5 h-auto text-gray-600 dark:text-gray-400" />
</button> </button>
} }
actionsClassName="!w-32" actionsClassName="!w-32 text-sm"
actions={ actions={
<> <>
<Link <Link
to="/setting/general" to="/setting/general"
className="w-full px-2 flex flex-row justify-start items-center text-left dark:text-gray-400 leading-8 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-800 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60" className="w-full px-2 flex flex-row justify-start items-center text-left dark:text-gray-400 leading-8 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-800 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
> >
<Icon.User className="w-4 h-auto mr-2" /> {t("user.profile")} <Icon.User className="w-4 h-auto mr-2 opacity-70" /> {t("user.profile")}
</Link> </Link>
{isAdmin && ( {isAdmin && (
<Link <Link
to="/setting/workspace" to="/setting/workspace"
className="w-full px-2 flex flex-row justify-start items-center text-left dark:text-gray-400 leading-8 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-800 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60" className="w-full px-2 flex flex-row justify-start items-center text-left dark:text-gray-400 leading-8 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-800 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
> >
<Icon.Settings className="w-4 h-auto mr-2" /> {t("settings.self")} <Icon.Settings className="w-4 h-auto mr-2 opacity-70" /> {t("settings.self")}
</Link> </Link>
)} )}
<button <button
className="w-full px-2 flex flex-row justify-start items-center text-left dark:text-gray-400 leading-8 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-800 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60" className="w-full px-2 flex flex-row justify-start items-center text-left dark:text-gray-400 leading-8 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-800 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
onClick={() => setShowAboutDialog(true)} onClick={() => setShowAboutDialog(true)}
> >
<Icon.Info className="w-4 h-auto mr-2" /> {t("common.about")} <Icon.Info className="w-4 h-auto mr-2 opacity-70" /> {t("common.about")}
</button> </button>
<button <button
className="w-full px-2 flex flex-row justify-start items-center text-left dark:text-gray-400 leading-8 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-800 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60" className="w-full px-2 flex flex-row justify-start items-center text-left dark:text-gray-400 leading-8 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-800 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
onClick={() => handleSignOutButtonClick()} onClick={() => handleSignOutButtonClick()}
> >
<Icon.LogOut className="w-4 h-auto mr-2" /> {t("auth.sign-out")} <Icon.LogOut className="w-4 h-auto mr-2 opacity-70" /> {t("auth.sign-out")}
</button> </button>
</> </>
} }

10
frontend/web/src/components/ShortcutActionsDropdown.tsx
View File

@ -43,7 +43,7 @@ const ShortcutActionsDropdown = (props: Props) => {
return ( return (
<> <>
<Dropdown <Dropdown
actionsClassName="!w-32 dark:text-gray-500" actionsClassName="!w-32 dark:text-gray-500 text-sm"
actions={ actions={
<> <>
{havePermission && ( {havePermission && (
@ -51,20 +51,20 @@ const ShortcutActionsDropdown = (props: Props) => {
className="w-full px-2 flex flex-row justify-start items-center text-left leading-8 cursor-pointer rounded hover:bg-gray-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60 dark:hover:bg-zinc-800" className="w-full px-2 flex flex-row justify-start items-center text-left leading-8 cursor-pointer rounded hover:bg-gray-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60 dark:hover:bg-zinc-800"
onClick={() => setShowEditDrawer(true)} onClick={() => setShowEditDrawer(true)}
> >
<Icon.Edit className="w-4 h-auto mr-2" /> {t("common.edit")} <Icon.Edit className="w-4 h-auto mr-2 opacity-70" /> {t("common.edit")}
</button> </button>
)} )}
<button <button
className="w-full px-2 flex flex-row justify-start items-center text-left leading-8 cursor-pointer rounded hover:bg-gray-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60 dark:hover:bg-zinc-800" className="w-full px-2 flex flex-row justify-start items-center text-left leading-8 cursor-pointer rounded hover:bg-gray-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60 dark:hover:bg-zinc-800"
onClick={() => setShowQRCodeDialog(true)} onClick={() => setShowQRCodeDialog(true)}
> >
<Icon.QrCode className="w-4 h-auto mr-2" /> QR Code <Icon.QrCode className="w-4 h-auto mr-2 opacity-70" /> QR Code
</button> </button>
<button <button
className="w-full px-2 flex flex-row justify-start items-center text-left leading-8 cursor-pointer rounded hover:bg-gray-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60 dark:hover:bg-zinc-800" className="w-full px-2 flex flex-row justify-start items-center text-left leading-8 cursor-pointer rounded hover:bg-gray-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60 dark:hover:bg-zinc-800"
onClick={gotoAnalytics} onClick={gotoAnalytics}
> >
<Icon.BarChart2 className="w-4 h-auto mr-2" /> {t("analytics.self")} <Icon.BarChart2 className="w-4 h-auto mr-2 opacity-70" /> {t("analytics.self")}
</button> </button>
{havePermission && ( {havePermission && (
<button <button
@ -73,7 +73,7 @@ const ShortcutActionsDropdown = (props: Props) => {
handleDeleteShortcutButtonClick(shortcut); handleDeleteShortcutButtonClick(shortcut);
}} }}
> >
<Icon.Trash className="w-4 h-auto mr-2" /> {t("common.delete")} <Icon.Trash className="w-4 h-auto mr-2 opacity-70" /> {t("common.delete")}
</button> </button>
)} )}
</> </>

10
frontend/web/src/components/ShortcutCard.tsx
View File

@ -103,7 +103,7 @@ const ShortcutCard = (props: Props) => {
})} })}
{shortcut.tags.length === 0 && <span className="text-gray-400 text-sm leading-4 italic">No tags</span>} {shortcut.tags.length === 0 && <span className="text-gray-400 text-sm leading-4 italic">No tags</span>}
</div> </div>
<div className="w-full flex mt-2 gap-2 overflow-x-auto"> <div className="w-full mt-2 flex gap-2 overflow-x-auto">
<Tooltip <Tooltip
title={t(`shortcut.visibility.${convertVisibilityFromPb(shortcut.visibility).toLowerCase()}.description`)} title={t(`shortcut.visibility.${convertVisibilityFromPb(shortcut.visibility).toLowerCase()}.description`)}
variant="solid" variant="solid"
@ -111,19 +111,19 @@ const ShortcutCard = (props: Props) => {
arrow arrow
> >
<div <div
className="w-auto px-2 leading-6 flex flex-row justify-start items-center flex-nowrap whitespace-nowrap border rounded-full cursor-pointer text-gray-500 dark:text-gray-400 text-sm dark:border-zinc-700" className="w-auto leading-5 flex flex-row justify-start items-center flex-nowrap whitespace-nowrap cursor-pointer text-gray-500 text-xs"
onClick={() => viewStore.setFilter({ visibility: shortcut.visibility })} onClick={() => viewStore.setFilter({ visibility: shortcut.visibility })}
> >
<VisibilityIcon className="w-4 h-auto mr-1 opacity-60" visibility={shortcut.visibility} /> <VisibilityIcon className="w-3 h-auto mr-0.5 opacity-70" visibility={shortcut.visibility} />
{t(`shortcut.visibility.${convertVisibilityFromPb(shortcut.visibility).toLowerCase()}.self`)} {t(`shortcut.visibility.${convertVisibilityFromPb(shortcut.visibility).toLowerCase()}.self`)}
</div> </div>
</Tooltip> </Tooltip>
<Tooltip title="View count" variant="solid" placement="top" arrow> <Tooltip title="View count" variant="solid" placement="top" arrow>
<Link <Link
to={`/shortcut/${shortcut.id}#analytics`} to={`/shortcut/${shortcut.id}#analytics`}
className="w-auto px-2 leading-6 flex flex-row justify-start items-center flex-nowrap whitespace-nowrap border rounded-full cursor-pointer text-gray-500 dark:text-gray-400 text-sm dark:border-zinc-700" className="w-auto leading-5 flex flex-row justify-start items-center flex-nowrap whitespace-nowrap cursor-pointer text-gray-500 text-xs"
> >
<Icon.BarChart2 className="w-4 h-auto mr-1 opacity-80" /> <Icon.BarChart2 className="w-3 h-auto mr-0.5 opacity-70" />
{t("shortcut.visits", { count: shortcut.viewCount })} {t("shortcut.visits", { count: shortcut.viewCount })}
</Link> </Link>
</Tooltip> </Tooltip>

6
frontend/web/src/pages/ShortcutDetail.tsx
View File

@ -78,7 +78,7 @@ const ShortcutDetail = () => {
return ( return (
<> <>
<div className="mx-auto max-w-8xl w-full px-3 md:px-12 pt-4 pb-6 flex flex-col justify-start items-start"> <div className="mx-auto max-w-8xl w-full px-3 md:px-12 pt-4 pb-6 flex flex-col justify-start items-start">
<div className="mt-8 w-12 h-12 flex justify-center items-center overflow-clip"> <div className="mt-4 sm:mt-8 w-12 h-12 flex justify-center items-center overflow-clip">
{favicon ? ( {favicon ? (
<img className="w-full h-auto rounded-lg" src={favicon} decoding="async" loading="lazy" /> <img className="w-full h-auto rounded-lg" src={favicon} decoding="async" loading="lazy" />
) : ( ) : (
@ -156,8 +156,8 @@ const ShortcutDetail = () => {
></Dropdown> ></Dropdown>
)} )}
</div> </div>
{shortcut.description && <p className="w-full break-all mt-2 text-gray-400 text-sm dark:text-gray-500">{shortcut.description}</p>} {shortcut.description && <p className="w-full break-all mt-4 text-gray-500 dark:text-gray-400">{shortcut.description}</p>}
<div className="mt-4 ml-1 flex flex-row justify-start items-start flex-wrap gap-2"> <div className="mt-2 flex flex-row justify-start items-start flex-wrap gap-2">
{shortcut.tags.map((tag) => { {shortcut.tags.map((tag) => {
return ( return (
<span key={tag} className="max-w-[8rem] truncate text-gray-400 text leading-4 dark:text-gray-500"> <span key={tag} className="max-w-[8rem] truncate text-gray-400 text leading-4 dark:text-gray-500">