From c703f281d9344365f603ab0f83629f7b9ff02b56 Mon Sep 17 00:00:00 2001 From: boojack Date: Sat, 30 Jul 2022 00:29:20 +0800 Subject: [PATCH] chore: update feather icon --- web/index.html | 1 - web/package.json | 1 + web/src/components/AboutSiteDialog.tsx | 3 ++- web/src/components/ArchivedMemoDialog.tsx | 3 ++- web/src/components/ChangePasswordDialog.tsx | 3 ++- web/src/components/CreateShortcutDialog.tsx | 5 +++-- web/src/components/DailyReviewDialog.tsx | 11 ++++++----- web/src/components/Dialog/CommonDialog.tsx | 3 ++- web/src/components/GitHubBadge.tsx | 3 ++- web/src/components/Icon.ts | 3 +++ web/src/components/Memo.tsx | 11 ++++++----- web/src/components/MemoCardDialog.tsx | 7 ++++--- web/src/components/MemoEditor.tsx | 7 ++++--- web/src/components/MemosHeader.tsx | 3 ++- web/src/components/PreviewImageDialog.tsx | 7 ++++--- web/src/components/SearchBar.tsx | 3 ++- web/src/components/SettingDialog.tsx | 3 ++- web/src/components/ShareMemoImageDialog.tsx | 3 ++- web/src/components/ShortcutList.tsx | 5 +++-- web/src/components/Sidebar.tsx | 3 ++- web/src/components/TagList.tsx | 3 ++- web/src/components/UserBanner.tsx | 3 ++- web/src/components/common/DatePicker.tsx | 5 +++-- web/src/components/common/Selector.tsx | 3 ++- web/src/less/daily-review-dialog.less | 2 +- web/src/less/github-badge.less | 2 +- web/src/less/memo.less | 4 ++-- web/src/less/search-bar.less | 2 +- web/src/less/shortcut-list.less | 4 ++-- web/yarn.lock | 9 ++++++++- 30 files changed, 78 insertions(+), 47 deletions(-) create mode 100644 web/src/components/Icon.ts diff --git a/web/index.html b/web/index.html index 47e1c570..252895a1 100644 --- a/web/index.html +++ b/web/index.html @@ -6,7 +6,6 @@ Memos -
diff --git a/web/package.json b/web/package.json index 23c581f9..0342dfdf 100644 --- a/web/package.json +++ b/web/package.json @@ -15,6 +15,7 @@ "qs": "^6.11.0", "react": "^18.1.0", "react-dom": "^18.1.0", + "react-feather": "^2.0.10", "react-redux": "^8.0.1" }, "devDependencies": { diff --git a/web/src/components/AboutSiteDialog.tsx b/web/src/components/AboutSiteDialog.tsx index 28813494..d7a0b9ef 100644 --- a/web/src/components/AboutSiteDialog.tsx +++ b/web/src/components/AboutSiteDialog.tsx @@ -1,6 +1,7 @@ import { useEffect, useState } from "react"; import * as api from "../helpers/api"; import Only from "./common/OnlyWhen"; +import Icon from "./Icon"; import { generateDialog } from "./Dialog"; import GitHubBadge from "./GitHubBadge"; import "../less/about-site-dialog.less"; @@ -37,7 +38,7 @@ const AboutSiteDialog: React.FC = ({ destroy }: Props) => { 🤠About Memos

diff --git a/web/src/components/ArchivedMemoDialog.tsx b/web/src/components/ArchivedMemoDialog.tsx index 2616cfe3..532ee0f1 100644 --- a/web/src/components/ArchivedMemoDialog.tsx +++ b/web/src/components/ArchivedMemoDialog.tsx @@ -2,6 +2,7 @@ import { useEffect, useState } from "react"; import useLoading from "../hooks/useLoading"; import { memoService } from "../services"; import { useAppSelector } from "../store"; +import Icon from "./Icon"; import { generateDialog } from "./Dialog"; import toastHelper from "./Toast"; import ArchivedMemo from "./ArchivedMemo"; @@ -37,7 +38,7 @@ const ArchivedMemoDialog: React.FC = (props: Props) => { Archived Memos

diff --git a/web/src/components/ChangePasswordDialog.tsx b/web/src/components/ChangePasswordDialog.tsx index bdbc6776..e8fcebc2 100644 --- a/web/src/components/ChangePasswordDialog.tsx +++ b/web/src/components/ChangePasswordDialog.tsx @@ -1,6 +1,7 @@ import { useEffect, useState } from "react"; import { validate, ValidatorConfig } from "../helpers/validator"; import { userService } from "../services"; +import Icon from "./Icon"; import { generateDialog } from "./Dialog"; import toastHelper from "./Toast"; import "../less/change-password-dialog.less"; @@ -72,7 +73,7 @@ const ChangePasswordDialog: React.FC = ({ destroy }: Props) => {

Change Password

diff --git a/web/src/components/CreateShortcutDialog.tsx b/web/src/components/CreateShortcutDialog.tsx index 72bead74..8c5ac5b8 100644 --- a/web/src/components/CreateShortcutDialog.tsx +++ b/web/src/components/CreateShortcutDialog.tsx @@ -2,6 +2,7 @@ import { memo, useCallback, useEffect, useState } from "react"; import { memoService, shortcutService } from "../services"; import { checkShouldShowMemoWithFilters, filterConsts, getDefaultFilter, relationConsts } from "../helpers/filter"; import useLoading from "../hooks/useLoading"; +import Icon from "./Icon"; import { generateDialog } from "./Dialog"; import toastHelper from "./Toast"; import Selector from "./common/Selector"; @@ -100,7 +101,7 @@ const CreateShortcutDialog: React.FC = (props: Props) => { {shortcutId ? "Edit Shortcut" : "Create Shortcut"}

@@ -296,7 +297,7 @@ const FilterInputer: React.FC = (props: MemoFilterInpute /> {inputElements} - +
); }; diff --git a/web/src/components/DailyReviewDialog.tsx b/web/src/components/DailyReviewDialog.tsx index 0d2549fb..bf8edfd0 100644 --- a/web/src/components/DailyReviewDialog.tsx +++ b/web/src/components/DailyReviewDialog.tsx @@ -4,6 +4,7 @@ import toImage from "../labs/html2image"; import useToggle from "../hooks/useToggle"; import { DAILY_TIMESTAMP } from "../helpers/consts"; import * as utils from "../helpers/utils"; +import Icon from "./Icon"; import { generateDialog } from "./Dialog"; import DatePicker from "./common/DatePicker"; import showPreviewImageDialog from "./PreviewImageDialog"; @@ -64,17 +65,17 @@ const DailyReviewDialog: React.FC = (props: Props) => {

- /
= (props: Props) => {

{title}

diff --git a/web/src/components/GitHubBadge.tsx b/web/src/components/GitHubBadge.tsx index 92d70b88..d654839a 100644 --- a/web/src/components/GitHubBadge.tsx +++ b/web/src/components/GitHubBadge.tsx @@ -1,5 +1,6 @@ import { useEffect, useState } from "react"; import * as api from "../helpers/api"; +import Icon from "./Icon"; import "../less/github-badge.less"; interface Props {} @@ -16,7 +17,7 @@ const GitHubBadge: React.FC = () => { return (
- + Star
diff --git a/web/src/components/Icon.ts b/web/src/components/Icon.ts new file mode 100644 index 00000000..89606cc0 --- /dev/null +++ b/web/src/components/Icon.ts @@ -0,0 +1,3 @@ +import * as Icon from "react-feather"; + +export default Icon; diff --git a/web/src/components/Memo.tsx b/web/src/components/Memo.tsx index 55c18b1a..09bfcc85 100644 --- a/web/src/components/Memo.tsx +++ b/web/src/components/Memo.tsx @@ -5,6 +5,7 @@ import relativeTime from "dayjs/plugin/relativeTime"; import { IMAGE_URL_REG, UNKNOWN_ID } from "../helpers/consts"; import { DONE_BLOCK_REG, formatMemoContent, TODO_BLOCK_REG } from "../helpers/marked"; import { editorStateService, locationService, memoService, userService } from "../services"; +import Icon from "./Icon"; import Only from "./common/OnlyWhen"; import toastHelper from "./Toast"; import Image from "./Image"; @@ -178,21 +179,21 @@ const Memo: React.FC = (props: Props) => {
- +
- + {memo.pinned ? "Unpin" : "Pin"}
- + Edit
- + Share
@@ -219,7 +220,7 @@ const Memo: React.FC = (props: Props) => {
{state.expandButtonStatus === 0 ? "Expand" : "Fold"} - +
)} diff --git a/web/src/components/MemoCardDialog.tsx b/web/src/components/MemoCardDialog.tsx index edc7ee0d..98d7e10b 100644 --- a/web/src/components/MemoCardDialog.tsx +++ b/web/src/components/MemoCardDialog.tsx @@ -9,6 +9,7 @@ import { generateDialog } from "./Dialog"; import Image from "./Image"; import "../less/memo-card-dialog.less"; import Selector from "./common/Selector"; +import Icon from "./Icon"; interface LinkedMemo extends Memo { createdAtStr: string; @@ -128,7 +129,7 @@ const MemoCardDialog: React.FC = (props: Props) => {
- + = (props: Props) => { <> /
diff --git a/web/src/components/MemoEditor.tsx b/web/src/components/MemoEditor.tsx index 3cabfdb4..7fda26e0 100644 --- a/web/src/components/MemoEditor.tsx +++ b/web/src/components/MemoEditor.tsx @@ -3,6 +3,7 @@ import { UNKNOWN_ID } from "../helpers/consts"; import { editorStateService, locationService, memoService, resourceService } from "../services"; import { useAppSelector } from "../store"; import * as storage from "../helpers/storage"; +import Icon from "./Icon"; import toastHelper from "./Toast"; import Editor, { EditorRefActions } from "./Editor/Editor"; import "../less/memo-editor.less"; @@ -231,7 +232,7 @@ const MemoEditor: React.FC = () => { tools={ <>
- +
{tags.map((t) => { return {t}; @@ -239,11 +240,11 @@ const MemoEditor: React.FC = () => {
} diff --git a/web/src/components/MemosHeader.tsx b/web/src/components/MemosHeader.tsx index a07f3508..62f3c512 100644 --- a/web/src/components/MemosHeader.tsx +++ b/web/src/components/MemosHeader.tsx @@ -1,6 +1,7 @@ import { useCallback, useEffect, useState } from "react"; import { memoService, shortcutService } from "../services"; import { useAppSelector } from "../store"; +import Icon from "./Icon"; import SearchBar from "./SearchBar"; import { toggleSiderbar } from "./Sidebar"; import "../less/memos-header.less"; @@ -40,7 +41,7 @@ const MemosHeader: React.FC = () => {
- +
{titleText} diff --git a/web/src/components/PreviewImageDialog.tsx b/web/src/components/PreviewImageDialog.tsx index 7e6f07d2..a8d2d593 100644 --- a/web/src/components/PreviewImageDialog.tsx +++ b/web/src/components/PreviewImageDialog.tsx @@ -1,5 +1,6 @@ -import { generateDialog } from "./Dialog"; import * as utils from "../helpers/utils"; +import Icon from "./Icon"; +import { generateDialog } from "./Dialog"; import "../less/preview-image-dialog.less"; interface Props extends DialogProps { @@ -22,10 +23,10 @@ const PreviewImageDialog: React.FC = ({ destroy, imgUrl }: Props) => { <>
diff --git a/web/src/components/SearchBar.tsx b/web/src/components/SearchBar.tsx index d638b066..bd03613d 100644 --- a/web/src/components/SearchBar.tsx +++ b/web/src/components/SearchBar.tsx @@ -2,6 +2,7 @@ import { locationService } from "../services"; import { useAppSelector } from "../store"; import { memoSpecialTypes } from "../helpers/filter"; import "../less/search-bar.less"; +import Icon from "./Icon"; interface Props {} @@ -24,7 +25,7 @@ const SearchBar: React.FC = () => { return (
- +
diff --git a/web/src/components/SettingDialog.tsx b/web/src/components/SettingDialog.tsx index eb2111f2..9bf5480d 100644 --- a/web/src/components/SettingDialog.tsx +++ b/web/src/components/SettingDialog.tsx @@ -5,6 +5,7 @@ import MyAccountSection from "./Settings/MyAccountSection"; import PreferencesSection from "./Settings/PreferencesSection"; import MemberSection from "./Settings/MemberSection"; import "../less/setting-dialog.less"; +import Icon from "./Icon"; interface Props extends DialogProps {} @@ -30,7 +31,7 @@ const SettingDialog: React.FC = (props: Props) => { return (
Basic diff --git a/web/src/components/ShareMemoImageDialog.tsx b/web/src/components/ShareMemoImageDialog.tsx index 69d7f82b..1eccf4e1 100644 --- a/web/src/components/ShareMemoImageDialog.tsx +++ b/web/src/components/ShareMemoImageDialog.tsx @@ -4,6 +4,7 @@ import toImage from "../labs/html2image"; import { ANIMATION_DURATION, IMAGE_URL_REG } from "../helpers/consts"; import * as utils from "../helpers/utils"; import { formatMemoContent } from "../helpers/marked"; +import Icon from "./Icon"; import { generateDialog } from "./Dialog"; import Only from "./common/OnlyWhen"; import toastHelper from "./Toast"; @@ -75,7 +76,7 @@ const ShareMemoImageDialog: React.FC = (props: Props) => { 🌄Share Memo

diff --git a/web/src/components/ShortcutList.tsx b/web/src/components/ShortcutList.tsx index fc23ef63..5eda3eee 100644 --- a/web/src/components/ShortcutList.tsx +++ b/web/src/components/ShortcutList.tsx @@ -4,6 +4,7 @@ import { useAppSelector } from "../store"; import * as utils from "../helpers/utils"; import useToggle from "../hooks/useToggle"; import useLoading from "../hooks/useLoading"; +import Icon from "./Icon"; import toastHelper from "./Toast"; import showCreateShortcutDialog from "./CreateShortcutDialog"; import "../less/shortcut-list.less"; @@ -39,7 +40,7 @@ const ShortcutList: React.FC = () => {

Shortcuts

@@ -113,7 +114,7 @@ const ShortcutContainer: React.FC = (props: ShortcutCont
- +
diff --git a/web/src/components/Sidebar.tsx b/web/src/components/Sidebar.tsx index 1052aa0f..a8451685 100644 --- a/web/src/components/Sidebar.tsx +++ b/web/src/components/Sidebar.tsx @@ -1,4 +1,5 @@ import { userService } from "../services"; +import Icon from "./Icon"; import Only from "./common/OnlyWhen"; import showDailyReviewDialog from "./DailyReviewDialog"; import showSettingDialog from "./SettingDialog"; @@ -24,7 +25,7 @@ const Sidebar: React.FC = () => {
diff --git a/web/src/components/common/DatePicker.tsx b/web/src/components/common/DatePicker.tsx index 6ab3d788..9fa20f87 100644 --- a/web/src/components/common/DatePicker.tsx +++ b/web/src/components/common/DatePicker.tsx @@ -1,6 +1,7 @@ import { useEffect, useState } from "react"; import { DAILY_TIMESTAMP } from "../../helpers/consts"; import "../../less/common/date-picker.less"; +import Icon from "../Icon"; interface DatePickerProps { className?: string; @@ -55,13 +56,13 @@ const DatePicker: React.FC = (props: DatePickerProps) => {
handleChangeMonthBtnClick(-1)}> - + {firstDate.getFullYear()}/{firstDate.getMonth() + 1} handleChangeMonthBtnClick(1)}> - +
diff --git a/web/src/components/common/Selector.tsx b/web/src/components/common/Selector.tsx index 958202d8..d1bf80be 100644 --- a/web/src/components/common/Selector.tsx +++ b/web/src/components/common/Selector.tsx @@ -1,5 +1,6 @@ import { memo, useEffect, useRef } from "react"; import useToggle from "../../hooks/useToggle"; +import Icon from "../Icon"; import "../../less/common/selector.less"; interface TVObject { @@ -64,7 +65,7 @@ const Selector: React.FC = (props: Props) => {
{currentItem.text} - +
diff --git a/web/src/less/daily-review-dialog.less b/web/src/less/daily-review-dialog.less index ebb5e755..9c7f229a 100644 --- a/web/src/less/daily-review-dialog.less +++ b/web/src/less/daily-review-dialog.less @@ -23,7 +23,7 @@ @apply w-full h-auto; } - &.share-btn { + &.share { @apply ~"p-0.5"; } } diff --git a/web/src/less/github-badge.less b/web/src/less/github-badge.less index 07e9fbf1..dfdf422a 100644 --- a/web/src/less/github-badge.less +++ b/web/src/less/github-badge.less @@ -5,7 +5,7 @@ @apply w-auto h-full px-2 border-r rounded-l flex flex-row justify-center items-center text-xs font-bold text-gray-800 bg-gray-100; > .icon-img { - @apply mr-1; + @apply mr-1 w-4 h-4; } } diff --git a/web/src/less/memo.less b/web/src/less/memo.less index 24106ffe..1b338bff 100644 --- a/web/src/less/memo.less +++ b/web/src/less/memo.less @@ -51,10 +51,10 @@ box-shadow: 0 0 8px 0 rgb(0 0 0 / 20%); > .btns-container { - @apply w-full flex flex-row justify-between items-center border-b border-gray-100 p-1 mb-1; + @apply w-full flex flex-row justify-around items-center border-b border-gray-100 p-1 mb-1; > .btn { - @apply relative w-7 h-7 p-1 text-gray-600; + @apply relative w-6 h-6 p-1 text-gray-600; &:hover > .tip-text { @apply block; diff --git a/web/src/less/search-bar.less b/web/src/less/search-bar.less index ea35c1ac..3bb07bf3 100644 --- a/web/src/less/search-bar.less +++ b/web/src/less/search-bar.less @@ -7,7 +7,7 @@ @apply h-9 flex flex-row justify-start items-center w-full py-2 px-3 sm:px-4 rounded-full sm:rounded-lg bg-zinc-200; > .icon-img { - @apply h-auto opacity-30; + @apply w-4 h-auto opacity-30; } > .text-input { diff --git a/web/src/less/shortcut-list.less b/web/src/less/shortcut-list.less index d5417bd2..f0e02d8d 100644 --- a/web/src/less/shortcut-list.less +++ b/web/src/less/shortcut-list.less @@ -12,10 +12,10 @@ } > .btn { - @apply flex flex-col justify-center items-center w-5 p-1 h-5 bg-gray-200 rounded ml-2 shadow hover:opacity-80; + @apply flex flex-col justify-center items-center w-5 h-5 bg-gray-200 rounded ml-2 shadow hover:opacity-80; > .icon-img { - @apply opacity-60; + @apply w-4 h-4; } } } diff --git a/web/yarn.lock b/web/yarn.lock index b576930e..6c7b61fa 100644 --- a/web/yarn.lock +++ b/web/yarn.lock @@ -2028,7 +2028,7 @@ prettier@2.5.1: resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.5.1.tgz#fff75fa9d519c54cf0fce328c1017d94546bc56a" integrity sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg== -prop-types@^15.8.1: +prop-types@^15.7.2, prop-types@^15.8.1: version "15.8.1" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== @@ -2072,6 +2072,13 @@ react-dom@^18.1.0: loose-envify "^1.1.0" scheduler "^0.23.0" +react-feather@^2.0.10: + version "2.0.10" + resolved "https://registry.yarnpkg.com/react-feather/-/react-feather-2.0.10.tgz#0e9abf05a66754f7b7bb71757ac4da7fb6be3b68" + integrity sha512-BLhukwJ+Z92Nmdcs+EMw6dy1Z/VLiJTzEQACDUEnWMClhYnFykJCGWQx+NmwP/qQHGX/5CzQ+TGi8ofg2+HzVQ== + dependencies: + prop-types "^15.7.2" + react-is@^16.13.1, react-is@^16.7.0: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"