aiden
/
memos
mirror of https://github.com/usememos/memos
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

chore: tweak button styles

Browse Source
pull/4770/head
Johnny 4 months ago
parent df8d1d4f3d
commit acb71dfb69
7 changed files with 77 additions and 73 deletions
Show Stats Download Patch File Download Diff File

8
web/src/components/HomeSidebar/ShortcutsSection.tsx
Unescape Escape View File

@ -61,18 +61,18 @@ const ShortcutsSection = observer(() => {
<PopoverTrigger asChild> <PopoverTrigger asChild>
<MoreVerticalIcon className="w-4 h-auto shrink-0 opacity-40 cursor-pointer hover:opacity-70" /> <MoreVerticalIcon className="w-4 h-auto shrink-0 opacity-40 cursor-pointer hover:opacity-70" />
</PopoverTrigger> </PopoverTrigger>
<PopoverContent align="start" sideOffset={2}> <PopoverContent align="end" alignOffset={-12}>
<div className="flex flex-col gap-0.5"> <div className="flex flex-col text-sm gap-0.5">
<button <button
onClick={() => showCreateShortcutDialog({ shortcut })} onClick={() => showCreateShortcutDialog({ shortcut })}
className="flex items-center gap-1 px-2 py-1 text-sm text-left dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded transition-colors" className="flex items-center gap-2 px-2 py-1 text-left dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded"
> >
<Edit3Icon className="w-4 h-auto" /> <Edit3Icon className="w-4 h-auto" />
{t("common.edit")} {t("common.edit")}
</button> </button>
<button <button
onClick={() => handleDeleteShortcut(shortcut)} onClick={() => handleDeleteShortcut(shortcut)}
className="flex items-center gap-1 px-2 py-1 text-sm text-left text-red-600 dark:text-red-400 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded transition-colors" className="flex items-center gap-2 px-2 py-1 text-left text-red-600 dark:text-red-400 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded"
> >
<TrashIcon className="w-4 h-auto" /> <TrashIcon className="w-4 h-auto" />
{t("common.delete")} {t("common.delete")}

8
web/src/components/HomeSidebar/TagsSection.tsx
Unescape Escape View File

@ -56,7 +56,7 @@ const TagsSection = observer((props: Props) => {
<MoreVerticalIcon className="w-4 h-auto shrink-0 opacity-60" /> <MoreVerticalIcon className="w-4 h-auto shrink-0 opacity-60" />
</PopoverTrigger> </PopoverTrigger>
<PopoverContent align="end" alignOffset={-12}> <PopoverContent align="end" alignOffset={-12}>
<div className="w-auto flex flex-row justify-between items-center gap-2"> <div className="w-auto flex flex-row justify-between items-center gap-2 p-1">
<span className="text-sm shrink-0 dark:text-zinc-400">{t("common.tree-mode")}</span> <span className="text-sm shrink-0 dark:text-zinc-400">{t("common.tree-mode")}</span>
<Switch size="sm" checked={treeMode} onChange={(event) => setTreeMode(event.target.checked)} /> <Switch size="sm" checked={treeMode} onChange={(event) => setTreeMode(event.target.checked)} />
</div> </div>
@ -82,17 +82,17 @@ const TagsSection = observer((props: Props) => {
</div> </div>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent align="start" sideOffset={2}> <PopoverContent align="start" sideOffset={2}>
<div className="flex flex-col gap-0.5"> <div className="flex flex-col text-sm gap-0.5">
<button <button
onClick={() => showRenameTagDialog({ tag: tag })} onClick={() => showRenameTagDialog({ tag: tag })}
className="flex items-center gap-1 px-2 py-1 text-sm text-left dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded transition-colors" className="flex items-center gap-2 px-2 py-1 text-left dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded"
> >
<Edit3Icon className="w-4 h-auto" /> <Edit3Icon className="w-4 h-auto" />
{t("common.rename")} {t("common.rename")}
</button> </button>
<button <button
onClick={() => handleDeleteTag(tag)} onClick={() => handleDeleteTag(tag)}
className="flex items-center gap-1 px-2 py-1 text-sm text-left text-red-600 dark:text-red-400 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded transition-colors" className="flex items-center gap-2 px-2 py-1 text-left text-red-600 dark:text-red-400 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded"
> >
<TrashIcon className="w-4 h-auto" /> <TrashIcon className="w-4 h-auto" />
{t("common.delete")} {t("common.delete")}

12
web/src/components/MemoActionMenu.tsx
Unescape Escape View File

@ -176,7 +176,7 @@ const MemoActionMenu = observer((props: Props) => {
{!isComment && ( {!isComment && (
<button <button
onClick={handleTogglePinMemoBtnClick} onClick={handleTogglePinMemoBtnClick}
className="flex items-center gap-2 px-2 py-1 text-left dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded transition-colors" className="flex items-center gap-2 px-2 py-1 text-left dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded"
> >
{memo.pinned ? <BookmarkMinusIcon className="w-4 h-auto" /> : <BookmarkPlusIcon className="w-4 h-auto" />} {memo.pinned ? <BookmarkMinusIcon className="w-4 h-auto" /> : <BookmarkPlusIcon className="w-4 h-auto" />}
{memo.pinned ? t("common.unpin") : t("common.pin")} {memo.pinned ? t("common.unpin") : t("common.pin")}
@ -184,7 +184,7 @@ const MemoActionMenu = observer((props: Props) => {
)} )}
<button <button
onClick={handleEditMemoClick} onClick={handleEditMemoClick}
className="flex items-center gap-2 px-2 py-1 text-left dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded transition-colors" className="flex items-center gap-2 px-2 py-1 text-left dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded"
> >
<Edit3Icon className="w-4 h-auto" /> <Edit3Icon className="w-4 h-auto" />
{t("common.edit")} {t("common.edit")}
@ -194,7 +194,7 @@ const MemoActionMenu = observer((props: Props) => {
{!isArchived && ( {!isArchived && (
<button <button
onClick={handleCopyLink} onClick={handleCopyLink}
className="flex items-center gap-2 px-2 py-1 text-left dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded transition-colors" className="flex items-center gap-2 px-2 py-1 text-left dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded"
> >
<CopyIcon className="w-4 h-auto" /> <CopyIcon className="w-4 h-auto" />
{t("memo.copy-link")} {t("memo.copy-link")}
@ -205,7 +205,7 @@ const MemoActionMenu = observer((props: Props) => {
{!isArchived && !isComment && hasCompletedTaskList && ( {!isArchived && !isComment && hasCompletedTaskList && (
<button <button
onClick={handleRemoveCompletedTaskListItemsClick} onClick={handleRemoveCompletedTaskListItemsClick}
className="flex items-center gap-2 px-2 py-1 text-left text-amber-600 dark:text-amber-400 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded transition-colors" className="flex items-center gap-2 px-2 py-1 text-left text-amber-600 dark:text-amber-400 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded"
> >
<SquareCheckIcon className="w-4 h-auto" /> <SquareCheckIcon className="w-4 h-auto" />
{t("memo.remove-completed-task-list-items")} {t("memo.remove-completed-task-list-items")}
@ -214,7 +214,7 @@ const MemoActionMenu = observer((props: Props) => {
{!isComment && ( {!isComment && (
<button <button
onClick={handleToggleMemoStatusClick} onClick={handleToggleMemoStatusClick}
className="flex items-center gap-2 px-2 py-1 text-left text-amber-600 dark:text-amber-400 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded transition-colors" className="flex items-center gap-2 px-2 py-1 text-left text-amber-600 dark:text-amber-400 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded"
> >
{isArchived ? <ArchiveRestoreIcon className="w-4 h-auto" /> : <ArchiveIcon className="w-4 h-auto" />} {isArchived ? <ArchiveRestoreIcon className="w-4 h-auto" /> : <ArchiveIcon className="w-4 h-auto" />}
{isArchived ? t("common.restore") : t("common.archive")} {isArchived ? t("common.restore") : t("common.archive")}
@ -222,7 +222,7 @@ const MemoActionMenu = observer((props: Props) => {
)} )}
<button <button
onClick={handleDeleteMemoClick} onClick={handleDeleteMemoClick}
className="flex items-center gap-2 px-2 py-1 text-left text-red-600 dark:text-red-400 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded transition-colors" className="flex items-center gap-2 px-2 py-1 text-left text-red-600 dark:text-red-400 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded"
> >
<TrashIcon className="w-4 h-auto" /> <TrashIcon className="w-4 h-auto" />
{t("common.delete")} {t("common.delete")}

8
web/src/components/MemoEditor/ActionButton/MarkdownMenu.tsx
Unescape Escape View File

@ -69,25 +69,27 @@ const MarkdownMenu = (props: Props) => {
</Button> </Button>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent align="start" className="text-sm p-1"> <PopoverContent align="start" className="text-sm p-1">
<div className="flex flex-col text-sm gap-0.5">
<button <button
onClick={handleCodeBlockClick} onClick={handleCodeBlockClick}
className="w-full flex items-center gap-2 px-2 py-1.5 text-left text-sm hover:bg-gray-100 rounded-md" className="flex items-center gap-2 px-2 py-1 text-left dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded"
> >
<Code2Icon className="w-4 h-auto" /> <Code2Icon className="w-4 h-auto" />
<span>{t("markdown.code-block")}</span> <span>{t("markdown.code-block")}</span>
</button> </button>
<button <button
onClick={handleCheckboxClick} onClick={handleCheckboxClick}
className="w-full flex items-center gap-2 px-2 py-1.5 text-left text-sm hover:bg-gray-100 rounded-md" className="flex items-center gap-2 px-2 py-1 text-left dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded"
> >
<CheckSquareIcon className="w-4 h-auto" /> <CheckSquareIcon className="w-4 h-auto" />
<span>{t("markdown.checkbox")}</span> <span>{t("markdown.checkbox")}</span>
</button> </button>
<div className="-mt-0.5 pl-2"> <div className="pl-2">
<Link fontSize={12} href="https://www.usememos.com/docs/getting-started/content-syntax" target="_blank"> <Link fontSize={12} href="https://www.usememos.com/docs/getting-started/content-syntax" target="_blank">
{t("markdown.content-syntax")} {t("markdown.content-syntax")}
</Link> </Link>
</div> </div>
</div>
</PopoverContent> </PopoverContent>
</Popover> </Popover>
); );

8
web/src/components/Settings/MemberSection.tsx
Unescape Escape View File

@ -225,14 +225,14 @@ const MemberSection = observer(() => {
<div className="flex flex-col gap-0.5 text-sm"> <div className="flex flex-col gap-0.5 text-sm">
<button <button
onClick={() => showCreateUserDialog(user, () => fetchUsers())} onClick={() => showCreateUserDialog(user, () => fetchUsers())}
className="flex items-center gap-2 px-2 py-1.5 text-left dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded transition-colors" className="flex items-center gap-2 px-2 py-1 text-left dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded"
> >
{t("common.update")} {t("common.update")}
</button> </button>
{user.state === State.NORMAL ? ( {user.state === State.NORMAL ? (
<button <button
onClick={() => handleArchiveUserClick(user)} onClick={() => handleArchiveUserClick(user)}
className="flex items-center gap-2 px-2 py-1.5 text-left dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded transition-colors" className="flex items-center gap-2 px-2 py-1 text-left dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded"
> >
{t("setting.member-section.archive-member")} {t("setting.member-section.archive-member")}
</button> </button>
@ -240,13 +240,13 @@ const MemberSection = observer(() => {
<> <>
<button <button
onClick={() => handleRestoreUserClick(user)} onClick={() => handleRestoreUserClick(user)}
className="flex items-center gap-2 px-2 py-1.5 text-left dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded transition-colors" className="flex items-center gap-2 px-2 py-1 text-left dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded"
> >
{t("common.restore")} {t("common.restore")}
</button> </button>
<button <button
onClick={() => handleDeleteUserClick(user)} onClick={() => handleDeleteUserClick(user)}
className="flex items-center gap-2 px-2 py-1.5 text-left text-red-600 dark:text-red-400 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded transition-colors" className="flex items-center gap-2 px-2 py-1 text-left text-red-600 dark:text-red-400 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded"
> >
{t("setting.member-section.delete-member")} {t("setting.member-section.delete-member")}
</button> </button>

4
web/src/components/Settings/SSOSection.tsx
Unescape Escape View File

@ -71,13 +71,13 @@ const SSOSection = () => {
<div className="flex flex-col gap-0.5 text-sm"> <div className="flex flex-col gap-0.5 text-sm">
<button <button
onClick={() => showCreateIdentityProviderDialog(identityProvider, fetchIdentityProviderList)} onClick={() => showCreateIdentityProviderDialog(identityProvider, fetchIdentityProviderList)}
className="flex items-center gap-2 px-2 py-1 text-left dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded transition-colors" className="flex items-center gap-2 px-2 py-1 text-left dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded"
> >
{t("common.edit")} {t("common.edit")}
</button> </button>
<button <button
onClick={() => handleDeleteIdentityProvider(identityProvider)} onClick={() => handleDeleteIdentityProvider(identityProvider)}
className="flex items-center gap-2 px-2 py-1 text-left text-red-600 dark:text-red-400 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded transition-colors" className="flex items-center gap-2 px-2 py-1 text-left text-red-600 dark:text-red-400 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded"
> >
{t("common.delete")} {t("common.delete")}
</button> </button>

12
web/src/components/UserBanner.tsx
Unescape Escape View File

@ -46,41 +46,43 @@ const UserBanner = (props: Props) => {
</div> </div>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent align="start" className="p-1" style={{ zIndex: "9999" }}> <PopoverContent align="start" className="p-1" style={{ zIndex: "9999" }}>
<div className="flex flex-col text-sm gap-0.5">
<button <button
onClick={() => navigateTo(`/u/${encodeURIComponent(currentUser.username)}`)} onClick={() => navigateTo(`/u/${encodeURIComponent(currentUser.username)}`)}
className="w-full flex items-center gap-2 px-2 py-1 text-left text-sm hover:bg-gray-100 rounded-md outline-none" className="flex items-center gap-2 px-2 py-1 text-left dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded"
> >
<SquareUserIcon className="w-4 h-auto opacity-60" /> <SquareUserIcon className="w-4 h-auto opacity-60" />
<span className="truncate">{t("common.profile")}</span> <span className="truncate">{t("common.profile")}</span>
</button> </button>
<button <button
onClick={() => navigateTo(Routes.ARCHIVED)} onClick={() => navigateTo(Routes.ARCHIVED)}
className="w-full flex items-center gap-2 px-2 py-1 text-left text-sm hover:bg-gray-100 rounded-md outline-none" className="flex items-center gap-2 px-2 py-1 text-left dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded"
> >
<ArchiveIcon className="w-4 h-auto opacity-60" /> <ArchiveIcon className="w-4 h-auto opacity-60" />
<span className="truncate">{t("common.archived")}</span> <span className="truncate">{t("common.archived")}</span>
</button> </button>
<button <button
onClick={() => navigateTo(Routes.INBOX)} onClick={() => navigateTo(Routes.INBOX)}
className="w-full flex items-center gap-2 px-2 py-1 text-left text-sm hover:bg-gray-100 rounded-md outline-none" className="flex items-center gap-2 px-2 py-1 text-left dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded"
> >
<BellIcon className="w-4 h-auto opacity-60" /> <BellIcon className="w-4 h-auto opacity-60" />
<span className="truncate">{t("common.inbox")}</span> <span className="truncate">{t("common.inbox")}</span>
</button> </button>
<button <button
onClick={() => navigateTo(Routes.SETTING)} onClick={() => navigateTo(Routes.SETTING)}
className="w-full flex items-center gap-2 px-2 py-1 text-left text-sm hover:bg-gray-100 rounded-md outline-none" className="flex items-center gap-2 px-2 py-1 text-left dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded"
> >
<SettingsIcon className="w-4 h-auto opacity-60" /> <SettingsIcon className="w-4 h-auto opacity-60" />
<span className="truncate">{t("common.settings")}</span> <span className="truncate">{t("common.settings")}</span>
</button> </button>
<button <button
onClick={handleSignOut} onClick={handleSignOut}
className="w-full flex items-center gap-2 px-2 py-1 text-left text-sm hover:bg-gray-100 rounded-md outline-none" className="flex items-center gap-2 px-2 py-1 text-left dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-700 outline-none rounded"
> >
<LogOutIcon className="w-4 h-auto opacity-60" /> <LogOutIcon className="w-4 h-auto opacity-60" />
<span className="truncate">{t("common.sign-out")}</span> <span className="truncate">{t("common.sign-out")}</span>
</button> </button>
</div>
</PopoverContent> </PopoverContent>
</Popover> </Popover>
</div> </div>

Write Preview
Loading…
Cancel
Save