mirror of
https://github.com/aykhans/slash-e.git
synced 2025-04-20 14:01:24 +00:00
chore: tweak styles
This commit is contained in:
Steven
parent
3d109dc1b4
commit
9ac6188707
@ -43,7 +43,7 @@ const Header: React.FC = () => {
|
||||
)}
|
||||
{shouldShowRouterSwitch && (
|
||||
<>
|
||||
<span className="font-mono opacity-60 mx-1">/</span>
|
||||
<span className="font-mono opacity-60 mx-1 dark:text-gray-400">/</span>
|
||||
<Dropdown
|
||||
trigger={
|
||||
<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" />
|
||||
</button>
|
||||
}
|
||||
actionsClassName="!w-36 -left-4"
|
||||
actionsClassName="!w-32 -left-4 text-sm"
|
||||
actions={
|
||||
<>
|
||||
<Link
|
||||
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"
|
||||
>
|
||||
<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
|
||||
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"
|
||||
>
|
||||
<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>
|
||||
</>
|
||||
}
|
||||
@ -81,34 +81,34 @@ const Header: React.FC = () => {
|
||||
<Icon.ChevronDown className="ml-2 w-5 h-auto text-gray-600 dark:text-gray-400" />
|
||||
</button>
|
||||
}
|
||||
actionsClassName="!w-32"
|
||||
actionsClassName="!w-32 text-sm"
|
||||
actions={
|
||||
<>
|
||||
<Link
|
||||
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"
|
||||
>
|
||||
<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>
|
||||
{isAdmin && (
|
||||
<Link
|
||||
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"
|
||||
>
|
||||
<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>
|
||||
)}
|
||||
<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"
|
||||
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
|
||||
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()}
|
||||
>
|
||||
<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>
|
||||
</>
|
||||
}
|
||||
|
||||
@ -43,7 +43,7 @@ const ShortcutActionsDropdown = (props: Props) => {
|
||||
return (
|
||||
<>
|
||||
<Dropdown
|
||||
actionsClassName="!w-32 dark:text-gray-500"
|
||||
actionsClassName="!w-32 dark:text-gray-500 text-sm"
|
||||
actions={
|
||||
<>
|
||||
{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"
|
||||
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
|
||||
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)}
|
||||
>
|
||||
<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
|
||||
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}
|
||||
>
|
||||
<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>
|
||||
{havePermission && (
|
||||
<button
|
||||
@ -73,7 +73,7 @@ const ShortcutActionsDropdown = (props: Props) => {
|
||||
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>
|
||||
)}
|
||||
</>
|
||||
|
||||
@ -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>}
|
||||
</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
|
||||
title={t(`shortcut.visibility.${convertVisibilityFromPb(shortcut.visibility).toLowerCase()}.description`)}
|
||||
variant="solid"
|
||||
@ -111,19 +111,19 @@ const ShortcutCard = (props: Props) => {
|
||||
arrow
|
||||
>
|
||||
<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 })}
|
||||
>
|
||||
<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`)}
|
||||
</div>
|
||||
</Tooltip>
|
||||
<Tooltip title="View count" variant="solid" placement="top" arrow>
|
||||
<Link
|
||||
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 })}
|
||||
</Link>
|
||||
</Tooltip>
|
||||
|
||||
@ -78,7 +78,7 @@ const ShortcutDetail = () => {
|
||||
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="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 ? (
|
||||
<img className="w-full h-auto rounded-lg" src={favicon} decoding="async" loading="lazy" />
|
||||
) : (
|
||||
@ -156,8 +156,8 @@ const ShortcutDetail = () => {
|
||||
></Dropdown>
|
||||
)}
|
||||
</div>
|
||||
{shortcut.description && <p className="w-full break-all mt-2 text-gray-400 text-sm dark:text-gray-500">{shortcut.description}</p>}
|
||||
<div className="mt-4 ml-1 flex flex-row justify-start items-start flex-wrap gap-2">
|
||||
{shortcut.description && <p className="w-full break-all mt-4 text-gray-500 dark:text-gray-400">{shortcut.description}</p>}
|
||||
<div className="mt-2 flex flex-row justify-start items-start flex-wrap gap-2">
|
||||
{shortcut.tags.map((tag) => {
|
||||
return (
|
||||
<span key={tag} className="max-w-[8rem] truncate text-gray-400 text leading-4 dark:text-gray-500">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user