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

chore: update shortcut card style

Browse Source
This commit is contained in:
Steven 2023-12-24 09:17:41 +08:00
parent 88606e0a0c
commit 70b0645f2e
6 changed files with 127 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/web/src/components/CollectionView.tsx
View File

@ -27,7 +27,8 @@ const CollectionView = (props: Props) => {
const { t } = useTranslation();
const { sm } = useResponsiveWidth();
const navigateTo = useNavigateTo();
const currentUser = useUserStore().getCurrentUser();
const userStore = useUserStore();
const currentUser = userStore.getCurrentUser();
const collectionStore = useCollectionStore();
const shortcutList = useShortcutStore().getShortcutList();
const [showEditDialog, setShowEditDialog] = useState<boolean>(false);
@ -71,9 +72,9 @@ const CollectionView = (props: Props) => {
</div>
<p className="text-sm text-gray-500">{collection.description}</p>
</div>
<div className="flex flex-row justify-end items-center shrink-0">
<div className="flex flex-row justify-end items-center shrink-0 gap-2">
<Link className="w-full text-gray-400 cursor-pointer hover:text-gray-500" to={`/c/${collection.name}`} target="_blank">
<Icon.Share className="w-4 h-auto mr-2" />
<Icon.Share className="w-4 h-auto" />
</Link>
{showAdminActions && (
<Dropdown

2
frontend/web/src/components/CreateCollectionDrawer.tsx
View File

@ -159,7 +159,7 @@ const CreateCollectionDrawer: React.FC<Props> = (props: Props) => {
<Drawer anchor="right" open={true} onClose={onClose}>
<DialogTitle>{isCreating ? "Create Collection" : "Edit Collection"}</DialogTitle>
<ModalClose />
<DialogContent className="max-w-full sm:max-w-sm">
<DialogContent className="w-full max-w-full sm:max-w-[24rem]">
<div className="overflow-y-auto w-full mt-2 px-3 pb-4">
<div className="w-full flex flex-col justify-start items-start mb-3">
<span className="mb-2">

2
frontend/web/src/components/CreateShortcutDrawer.tsx
View File

@ -213,7 +213,7 @@ const CreateShortcutDrawer: React.FC<Props> = (props: Props) => {
<Drawer anchor="right" open={true} onClose={onClose}>
<DialogTitle>{isCreating ? "Create Shortcut" : "Edit Shortcut"}</DialogTitle>
<ModalClose />
<DialogContent className="w-full">
<DialogContent className="w-full max-w-full sm:max-w-[24rem]">
<div className="overflow-y-auto w-full mt-2 px-3 pb-4">
<div className="w-full flex flex-col justify-start items-start mb-3">
<span className="mb-2">

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

@ -1,9 +1,11 @@
import { Tooltip } from "@mui/joy";
import { Avatar, Tooltip } from "@mui/joy";
import classNames from "classnames";
import copy from "copy-to-clipboard";
import { useEffect } from "react";
import toast from "react-hot-toast";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import useUserStore from "@/stores/v1/user";
import { Shortcut } from "@/types/proto/api/v2/shortcut_service";
import { convertVisibilityFromPb } from "@/utils/visibility";
import { absolutifyLink, getFaviconWithGoogleS2 } from "../helpers/utils";
@ -19,17 +21,22 @@ interface Props {
const ShortcutCard = (props: Props) => {
const { shortcut } = props;
const { t } = useTranslation();
const userStore = useUserStore();
const viewStore = useViewStore();
const creator = userStore.getUserById(shortcut.creatorId);
const shortcutLink = absolutifyLink(`/s/${shortcut.name}`);
const favicon = getFaviconWithGoogleS2(shortcut.link);
useEffect(() => {
userStore.getOrFetchUserById(shortcut.creatorId);
}, []);
const handleCopyButtonClick = () => {
copy(shortcutLink);
toast.success("Shortcut link copied to clipboard.");
};
return (
<>
<div
className={classNames(
"group px-4 py-3 w-full flex flex-col justify-start items-start border rounded-lg hover:shadow dark:border-zinc-700"
@ -108,6 +115,15 @@ 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 mt-2 flex gap-2 overflow-x-auto">
<Tooltip title={creator.nickname} variant="solid" placement="top" arrow>
<Avatar
className="dark:bg-zinc-800"
sx={{
"--Avatar-size": "24px",
}}
alt={creator.nickname.toUpperCase()}
></Avatar>
</Tooltip>
<Tooltip
title={t(`shortcut.visibility.${convertVisibilityFromPb(shortcut.visibility).toLowerCase()}.description`)}
variant="solid"
@ -134,7 +150,6 @@ const ShortcutCard = (props: Props) => {
</Tooltip>
</div>
</div>
</>
);
};

6
frontend/web/src/components/SubscriptionFAQ.tsx
View File

@ -11,13 +11,13 @@ const SubscriptionFAQ = () => {
<Accordion>
<AccordionSummary>Can I use the Free plan in my team?</AccordionSummary>
<AccordionDetails>
Of course you can. In the free plan, you can invite up to 5 members to your team. If you need more, you can upgrade to the Pro
plan.
Of course you can. In the free plan, you can invite up to 5 members to your team. If you need more, you should upgrade to the
Pro plan.
</AccordionDetails>
</Accordion>
<Accordion>
<AccordionSummary>How many devices can the license key be used on?</AccordionSummary>
<AccordionDetails>{`It's unlimited for now, but please don't abuse it.`}</AccordionDetails>
<AccordionDetails>{`It's unlimited for now, but please do not abuse it.`}</AccordionDetails>
</Accordion>
<Accordion>
<AccordionSummary>{`Can I get a refund if Slash doesn't meet my needs?`}</AccordionSummary>

2
frontend/web/src/pages/SubscriptionSetting.tsx
View File

@ -56,7 +56,7 @@ const SubscriptionSetting: React.FC = () => {
<div className="w-full flex justify-between items-center mt-4">
<div>
{profile.plan === PlanType.FREE && (
<Link href="https://yourselfhosted.lemonsqueezy.com/checkout/buy/d03a2696-8a8b-49c9-9e19-d425e3884fd7" target="_blank">
<Link href="https://yourselfhosted.lemonsqueezy.com/checkout/buy/947e9a56-c93a-4294-8d71-2ea4b0f3ec51" target="_blank">
Buy a license key
<Icon.ExternalLink className="w-4 h-auto ml-1" />
</Link>