Skip to content

C
canifa_note
Commit acb71dfb authored by Johnny's avatar Johnny
Browse files
Options

chore: tweak button styles

parent df8d1d4f
Hide whitespace changes
Inline Side-by-side
Showing with 77 additions and 73 deletions
web/src/components/HomeSidebar/ShortcutsSection.tsx
View file @ acb71dfb
...@@ -61,18 +61,18 @@ const ShortcutsSection = observer(() => { ...@@ -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")}
......
web/src/components/HomeSidebar/TagsSection.tsx
View file @ acb71dfb
...@@ -56,7 +56,7 @@ const TagsSection = observer((props: Props) => { ...@@ -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) => { ...@@ -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")}
......
web/src/components/MemoActionMenu.tsx
View file @ acb71dfb
...@@ -176,7 +176,7 @@ const MemoActionMenu = observer((props: Props) => { ...@@ -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) => { ...@@ -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) => { ...@@ -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) => { ...@@ -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) => { ...@@ -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) => { ...@@ -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")}
......
web/src/components/MemoEditor/ActionButton/MarkdownMenu.tsx
View file @ acb71dfb
...@@ -69,24 +69,26 @@ const MarkdownMenu = (props: Props) => { ...@@ -69,24 +69,26 @@ const MarkdownMenu = (props: Props) => {
</Button> </Button>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent align="start" className="text-sm p-1"> <PopoverContent align="start" className="text-sm p-1">
<button <div className="flex flex-col text-sm gap-0.5">
onClick={handleCodeBlockClick} <button
className="w-full flex items-center gap-2 px-2 py-1.5 text-left text-sm hover:bg-gray-100 rounded-md" onClick={handleCodeBlockClick}
> 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" /> >
<span>{t("markdown.code-block")}</span> <Code2Icon className="w-4 h-auto" />
</button> <span>{t("markdown.code-block")}</span>
<button </button>
onClick={handleCheckboxClick} <button
className="w-full flex items-center gap-2 px-2 py-1.5 text-left text-sm hover:bg-gray-100 rounded-md" onClick={handleCheckboxClick}
> 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" /> >
<span>{t("markdown.checkbox")}</span> <CheckSquareIcon className="w-4 h-auto" />
</button> <span>{t("markdown.checkbox")}</span>
<div className="-mt-0.5 pl-2"> </button>
<Link fontSize={12} href="https://www.usememos.com/docs/getting-started/content-syntax" target="_blank"> <div className="pl-2">
{t("markdown.content-syntax")} <Link fontSize={12} href="https://www.usememos.com/docs/getting-started/content-syntax" target="_blank">
</Link> {t("markdown.content-syntax")}
</Link>
</div>
</div> </div>
</PopoverContent> </PopoverContent>
</Popover> </Popover>
......
web/src/components/Settings/MemberSection.tsx
View file @ acb71dfb
...@@ -225,14 +225,14 @@ const MemberSection = observer(() => { ...@@ -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(() => { ...@@ -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>
......
web/src/components/Settings/SSOSection.tsx
View file @ acb71dfb
...@@ -71,13 +71,13 @@ const SSOSection = () => { ...@@ -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>
......
web/src/components/UserBanner.tsx
View file @ acb71dfb
...@@ -46,41 +46,43 @@ const UserBanner = (props: Props) => { ...@@ -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" }}>
<button <div className="flex flex-col text-sm gap-0.5">
onClick={() => navigateTo(`/u/${encodeURIComponent(currentUser.username)}`)} <button
className="w-full flex items-center gap-2 px-2 py-1 text-left text-sm hover:bg-gray-100 rounded-md outline-none" onClick={() => navigateTo(`/u/${encodeURIComponent(currentUser.username)}`)}
> 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" /> >
<span className="truncate">{t("common.profile")}</span> <SquareUserIcon className="w-4 h-auto opacity-60" />
</button> <span className="truncate">{t("common.profile")}</span>
<button </button>
onClick={() => navigateTo(Routes.ARCHIVED)} <button
className="w-full flex items-center gap-2 px-2 py-1 text-left text-sm hover:bg-gray-100 rounded-md outline-none" onClick={() => navigateTo(Routes.ARCHIVED)}
> 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" /> >
<span className="truncate">{t("common.archived")}</span> <ArchiveIcon className="w-4 h-auto opacity-60" />
</button> <span className="truncate">{t("common.archived")}</span>
<button </button>
onClick={() => navigateTo(Routes.INBOX)} <button
className="w-full flex items-center gap-2 px-2 py-1 text-left text-sm hover:bg-gray-100 rounded-md outline-none" onClick={() => navigateTo(Routes.INBOX)}
> 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" /> >
<span className="truncate">{t("common.inbox")}</span> <BellIcon className="w-4 h-auto opacity-60" />
</button> <span className="truncate">{t("common.inbox")}</span>
<button </button>
onClick={() => navigateTo(Routes.SETTING)} <button
className="w-full flex items-center gap-2 px-2 py-1 text-left text-sm hover:bg-gray-100 rounded-md outline-none" onClick={() => navigateTo(Routes.SETTING)}
> 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" /> >
<span className="truncate">{t("common.settings")}</span> <SettingsIcon className="w-4 h-auto opacity-60" />
</button> <span className="truncate">{t("common.settings")}</span>
<button </button>
onClick={handleSignOut} <button
className="w-full flex items-center gap-2 px-2 py-1 text-left text-sm hover:bg-gray-100 rounded-md outline-none" onClick={handleSignOut}
> 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" /> >
<span className="truncate">{t("common.sign-out")}</span> <LogOutIcon className="w-4 h-auto opacity-60" />
</button> <span className="truncate">{t("common.sign-out")}</span>
</button>
</div>
</PopoverContent> </PopoverContent>
</Popover> </Popover>
</div> </div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment