YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-02-19 12:50:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

chore: update feather icon

Browse Source
This commit is contained in:
boojack 2022-07-30 00:29:20 +08:00
parent e179c65e52
commit c703f281d9
30 changed files with 78 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
web/index.html
View File

@ -6,7 +6,6 @@
<meta name="theme-color" content="#f6f5f4" /> <meta name="theme-color" content="#f6f5f4" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<title>Memos</title> <title>Memos</title>
<script src="https://kit.fontawesome.com/41e3aaa6af.js" crossorigin="anonymous"></script>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

1
web/package.json
View File

@ -15,6 +15,7 @@
"qs": "^6.11.0", "qs": "^6.11.0",
"react": "^18.1.0", "react": "^18.1.0",
"react-dom": "^18.1.0", "react-dom": "^18.1.0",
"react-feather": "^2.0.10",
"react-redux": "^8.0.1" "react-redux": "^8.0.1"
}, },
"devDependencies": { "devDependencies": {

3
web/src/components/AboutSiteDialog.tsx
View File

@ -1,6 +1,7 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import * as api from "../helpers/api"; import * as api from "../helpers/api";
import Only from "./common/OnlyWhen"; import Only from "./common/OnlyWhen";
import Icon from "./Icon";
import { generateDialog } from "./Dialog"; import { generateDialog } from "./Dialog";
import GitHubBadge from "./GitHubBadge"; import GitHubBadge from "./GitHubBadge";
import "../less/about-site-dialog.less"; import "../less/about-site-dialog.less";
@ -37,7 +38,7 @@ const AboutSiteDialog: React.FC<Props> = ({ destroy }: Props) => {
<span className="icon-text">🤠</span>About <b>Memos</b> <span className="icon-text">🤠</span>About <b>Memos</b>
</p> </p>
<button className="btn close-btn" onClick={handleCloseBtnClick}> <button className="btn close-btn" onClick={handleCloseBtnClick}>
<i className="fa-solid fa-xmark fa-lg"></i> <Icon.X />
</button> </button>
</div> </div>
<div className="dialog-content-container"> <div className="dialog-content-container">

3
web/src/components/ArchivedMemoDialog.tsx
View File

@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
import useLoading from "../hooks/useLoading"; import useLoading from "../hooks/useLoading";
import { memoService } from "../services"; import { memoService } from "../services";
import { useAppSelector } from "../store"; import { useAppSelector } from "../store";
import Icon from "./Icon";
import { generateDialog } from "./Dialog"; import { generateDialog } from "./Dialog";
import toastHelper from "./Toast"; import toastHelper from "./Toast";
import ArchivedMemo from "./ArchivedMemo"; import ArchivedMemo from "./ArchivedMemo";
@ -37,7 +38,7 @@ const ArchivedMemoDialog: React.FC<Props> = (props: Props) => {
Archived Memos Archived Memos
</p> </p>
<button className="btn close-btn" onClick={destroy}> <button className="btn close-btn" onClick={destroy}>
<i className="fa-solid fa-xmark fa-lg icon-img"></i> <Icon.X className="icon-img" />
</button> </button>
</div> </div>
<div className="dialog-content-container"> <div className="dialog-content-container">

3
web/src/components/ChangePasswordDialog.tsx
View File

@ -1,6 +1,7 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { validate, ValidatorConfig } from "../helpers/validator"; import { validate, ValidatorConfig } from "../helpers/validator";
import { userService } from "../services"; import { userService } from "../services";
import Icon from "./Icon";
import { generateDialog } from "./Dialog"; import { generateDialog } from "./Dialog";
import toastHelper from "./Toast"; import toastHelper from "./Toast";
import "../less/change-password-dialog.less"; import "../less/change-password-dialog.less";
@ -72,7 +73,7 @@ const ChangePasswordDialog: React.FC<Props> = ({ destroy }: Props) => {
<div className="dialog-header-container"> <div className="dialog-header-container">
<p className="title-text">Change Password</p> <p className="title-text">Change Password</p>
<button className="btn close-btn" onClick={handleCloseBtnClick}> <button className="btn close-btn" onClick={handleCloseBtnClick}>
<i className="fa-solid fa-xmark fa-lg"></i> <Icon.X />
</button> </button>
</div> </div>
<div className="dialog-content-container"> <div className="dialog-content-container">

5
web/src/components/CreateShortcutDialog.tsx
View File

@ -2,6 +2,7 @@ import { memo, useCallback, useEffect, useState } from "react";
import { memoService, shortcutService } from "../services"; import { memoService, shortcutService } from "../services";
import { checkShouldShowMemoWithFilters, filterConsts, getDefaultFilter, relationConsts } from "../helpers/filter"; import { checkShouldShowMemoWithFilters, filterConsts, getDefaultFilter, relationConsts } from "../helpers/filter";
import useLoading from "../hooks/useLoading"; import useLoading from "../hooks/useLoading";
import Icon from "./Icon";
import { generateDialog } from "./Dialog"; import { generateDialog } from "./Dialog";
import toastHelper from "./Toast"; import toastHelper from "./Toast";
import Selector from "./common/Selector"; import Selector from "./common/Selector";
@ -100,7 +101,7 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
{shortcutId ? "Edit Shortcut" : "Create Shortcut"} {shortcutId ? "Edit Shortcut" : "Create Shortcut"}
</p> </p>
<button className="btn close-btn" onClick={destroy}> <button className="btn close-btn" onClick={destroy}>
<i className="fa-solid fa-xmark fa-lg"></i> <Icon.X />
</button> </button>
</div> </div>
<div className="dialog-content-container"> <div className="dialog-content-container">
@ -296,7 +297,7 @@ const FilterInputer: React.FC<MemoFilterInputerProps> = (props: MemoFilterInpute
/> />
{inputElements} {inputElements}
<i className="fa-solid fa-xmark remove-btn" onClick={handleRemoveBtnClick}></i> <Icon.X className="remove-btn" onClick={handleRemoveBtnClick} />
</div> </div>
); );
}; };

11
web/src/components/DailyReviewDialog.tsx
View File

@ -4,6 +4,7 @@ import toImage from "../labs/html2image";
import useToggle from "../hooks/useToggle"; import useToggle from "../hooks/useToggle";
import { DAILY_TIMESTAMP } from "../helpers/consts"; import { DAILY_TIMESTAMP } from "../helpers/consts";
import * as utils from "../helpers/utils"; import * as utils from "../helpers/utils";
import Icon from "./Icon";
import { generateDialog } from "./Dialog"; import { generateDialog } from "./Dialog";
import DatePicker from "./common/DatePicker"; import DatePicker from "./common/DatePicker";
import showPreviewImageDialog from "./PreviewImageDialog"; import showPreviewImageDialog from "./PreviewImageDialog";
@ -64,17 +65,17 @@ const DailyReviewDialog: React.FC<Props> = (props: Props) => {
</p> </p>
<div className="btns-container"> <div className="btns-container">
<button className="btn-text" onClick={() => setCurrentDateStamp(currentDateStamp - DAILY_TIMESTAMP)}> <button className="btn-text" onClick={() => setCurrentDateStamp(currentDateStamp - DAILY_TIMESTAMP)}>
<i className="fa-solid fa-chevron-left icon-img"></i> <Icon.ChevronLeft className="icon-img" />
</button> </button>
<button className="btn-text" onClick={() => setCurrentDateStamp(currentDateStamp + DAILY_TIMESTAMP)}> <button className="btn-text" onClick={() => setCurrentDateStamp(currentDateStamp + DAILY_TIMESTAMP)}>
<i className="fa-solid fa-chevron-right icon-img"></i> <Icon.ChevronRight className="icon-img" />
</button> </button>
<button className="btn-text" onClick={handleShareBtnClick}> <button className="btn-text share" onClick={handleShareBtnClick}>
<i className="fa-solid fa-share-nodes icon-img"></i> <Icon.Share className="icon-img" />
</button> </button>
<span className="split-line">/</span> <span className="split-line">/</span>
<button className="btn-text" onClick={() => props.destroy()}> <button className="btn-text" onClick={() => props.destroy()}>
<i className="fa-solid fa-xmark fa-lg icon-img"></i> <Icon.X className="icon-img" />
</button> </button>
</div> </div>
<DatePicker <DatePicker

3
web/src/components/Dialog/CommonDialog.tsx
View File

@ -1,3 +1,4 @@
import Icon from "../Icon";
import { generateDialog } from "./BaseDialog"; import { generateDialog } from "./BaseDialog";
import "../../less/common-dialog.less"; import "../../less/common-dialog.less";
@ -44,7 +45,7 @@ const CommonDialog: React.FC<Props> = (props: Props) => {
<div className="dialog-header-container"> <div className="dialog-header-container">
<p className="title-text">{title}</p> <p className="title-text">{title}</p>
<button className="btn close-btn" onClick={handleCloseBtnClick}> <button className="btn close-btn" onClick={handleCloseBtnClick}>
<i className="fa-solid fa-xmark fa-lg"></i> <Icon.X />
</button> </button>
</div> </div>
<div className="dialog-content-container"> <div className="dialog-content-container">

3
web/src/components/GitHubBadge.tsx
View File

@ -1,5 +1,6 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import * as api from "../helpers/api"; import * as api from "../helpers/api";
import Icon from "./Icon";
import "../less/github-badge.less"; import "../less/github-badge.less";
interface Props {} interface Props {}
@ -16,7 +17,7 @@ const GitHubBadge: React.FC<Props> = () => {
return ( return (
<a className="github-badge-container" href="https://github.com/usememos/memos"> <a className="github-badge-container" href="https://github.com/usememos/memos">
<div className="github-icon"> <div className="github-icon">
<i className="fa-brands fa-github fa-lg icon-img"></i> <Icon.GitHub className="icon-img" />
Star Star
</div> </div>
<div className="count-text"> <div className="count-text">

3
web/src/components/Icon.ts Normal file
View File

@ -0,0 +1,3 @@
import * as Icon from "react-feather";
export default Icon;

11
web/src/components/Memo.tsx
View File

@ -5,6 +5,7 @@ import relativeTime from "dayjs/plugin/relativeTime";
import { IMAGE_URL_REG, UNKNOWN_ID } from "../helpers/consts"; import { IMAGE_URL_REG, UNKNOWN_ID } from "../helpers/consts";
import { DONE_BLOCK_REG, formatMemoContent, TODO_BLOCK_REG } from "../helpers/marked"; import { DONE_BLOCK_REG, formatMemoContent, TODO_BLOCK_REG } from "../helpers/marked";
import { editorStateService, locationService, memoService, userService } from "../services"; import { editorStateService, locationService, memoService, userService } from "../services";
import Icon from "./Icon";
import Only from "./common/OnlyWhen"; import Only from "./common/OnlyWhen";
import toastHelper from "./Toast"; import toastHelper from "./Toast";
import Image from "./Image"; import Image from "./Image";
@ -178,21 +179,21 @@ const Memo: React.FC<Props> = (props: Props) => {
</div> </div>
<div className={`btns-container ${userService.isVisitorMode() ? "!hidden" : ""}`}> <div className={`btns-container ${userService.isVisitorMode() ? "!hidden" : ""}`}>
<span className="btn more-action-btn"> <span className="btn more-action-btn">
<i className="fa-solid fa-ellipsis icon-img"></i> <Icon.MoreHorizontal className="icon-img" />
</span> </span>
<div className="more-action-btns-wrapper"> <div className="more-action-btns-wrapper">
<div className="more-action-btns-container"> <div className="more-action-btns-container">
<div className="btns-container"> <div className="btns-container">
<div className="btn" onClick={handleTogglePinMemoBtnClick}> <div className="btn" onClick={handleTogglePinMemoBtnClick}>
<i className={`fa-solid fa-thumbtack icon-img ${memo.pinned ? "" : "opacity-20"}`}></i> <Icon.MapPin className={`icon-img ${memo.pinned ? "" : "opacity-20"}`} />
<span className="tip-text">{memo.pinned ? "Unpin" : "Pin"}</span> <span className="tip-text">{memo.pinned ? "Unpin" : "Pin"}</span>
</div> </div>
<div className="btn" onClick={handleEditMemoClick}> <div className="btn" onClick={handleEditMemoClick}>
<i className="fa-solid fa-pen-to-square icon-img"></i> <Icon.Edit className="icon-img" />
<span className="tip-text">Edit</span> <span className="tip-text">Edit</span>
</div> </div>
<div className="btn" onClick={handleGenMemoImageBtnClick}> <div className="btn" onClick={handleGenMemoImageBtnClick}>
<i className="fa-solid fa-share-nodes icon-img"></i> <Icon.Share className="icon-img" />
<span className="tip-text">Share</span> <span className="tip-text">Share</span>
</div> </div>
</div> </div>
@ -219,7 +220,7 @@ const Memo: React.FC<Props> = (props: Props) => {
<div className="expand-btn-container"> <div className="expand-btn-container">
<span className={`btn ${state.expandButtonStatus === 0 ? "expand-btn" : "fold-btn"}`} onClick={handleExpandBtnClick}> <span className={`btn ${state.expandButtonStatus === 0 ? "expand-btn" : "fold-btn"}`} onClick={handleExpandBtnClick}>
{state.expandButtonStatus === 0 ? "Expand" : "Fold"} {state.expandButtonStatus === 0 ? "Expand" : "Fold"}
<i className="fa-solid fa-chevron-right icon-img"></i> <Icon.ChevronRight className="icon-img" />
</span> </span>
</div> </div>
)} )}

7
web/src/components/MemoCardDialog.tsx
View File

@ -9,6 +9,7 @@ import { generateDialog } from "./Dialog";
import Image from "./Image"; import Image from "./Image";
import "../less/memo-card-dialog.less"; import "../less/memo-card-dialog.less";
import Selector from "./common/Selector"; import Selector from "./common/Selector";
import Icon from "./Icon";
interface LinkedMemo extends Memo { interface LinkedMemo extends Memo {
createdAtStr: string; createdAtStr: string;
@ -128,7 +129,7 @@ const MemoCardDialog: React.FC<Props> = (props: Props) => {
<Only when={!userService.isVisitorMode()}> <Only when={!userService.isVisitorMode()}>
<div className="card-header-container"> <div className="card-header-container">
<div className="visibility-selector-container"> <div className="visibility-selector-container">
<i className="fa-solid fa-eye mr-2"></i> <Icon.Eye className="mr-2" />
<Selector <Selector
className="visibility-selector" className="visibility-selector"
dataSource={visibilityList} dataSource={visibilityList}
@ -145,13 +146,13 @@ const MemoCardDialog: React.FC<Props> = (props: Props) => {
<Only when={!userService.isVisitorMode()}> <Only when={!userService.isVisitorMode()}>
<> <>
<button className="btn edit-btn" onClick={handleEditMemoBtnClick}> <button className="btn edit-btn" onClick={handleEditMemoBtnClick}>
<i className="fa-solid fa-pen-to-square icon-img"></i> <Icon.Edit className="icon-img" />
</button> </button>
<span className="split-line">/</span> <span className="split-line">/</span>
</> </>
</Only> </Only>
<button className="btn close-btn" onClick={props.destroy}> <button className="btn close-btn" onClick={props.destroy}>
<i className="fa-solid fa-xmark fa-lg icon-img"></i> <Icon.X className="icon-img" />
</button> </button>
</div> </div>
</div> </div>

7
web/src/components/MemoEditor.tsx
View File

@ -3,6 +3,7 @@ import { UNKNOWN_ID } from "../helpers/consts";
import { editorStateService, locationService, memoService, resourceService } from "../services"; import { editorStateService, locationService, memoService, resourceService } from "../services";
import { useAppSelector } from "../store"; import { useAppSelector } from "../store";
import * as storage from "../helpers/storage"; import * as storage from "../helpers/storage";
import Icon from "./Icon";
import toastHelper from "./Toast"; import toastHelper from "./Toast";
import Editor, { EditorRefActions } from "./Editor/Editor"; import Editor, { EditorRefActions } from "./Editor/Editor";
import "../less/memo-editor.less"; import "../less/memo-editor.less";
@ -231,7 +232,7 @@ const MemoEditor: React.FC<Props> = () => {
tools={ tools={
<> <>
<div className="action-btn tag-action"> <div className="action-btn tag-action">
<i className="fa-solid fa-hashtag icon-img"></i> <Icon.Hash className="icon-img" />
<div ref={tagSeletorRef} className="tag-list" onClick={handleTagSeletorClick}> <div ref={tagSeletorRef} className="tag-list" onClick={handleTagSeletorClick}>
{tags.map((t) => { {tags.map((t) => {
return <span key={t}>{t}</span>; return <span key={t}>{t}</span>;
@ -239,11 +240,11 @@ const MemoEditor: React.FC<Props> = () => {
</div> </div>
</div> </div>
<button className="action-btn"> <button className="action-btn">
<i className="fa-solid fa-image icon-img" onClick={handleUploadFileBtnClick}></i> <Icon.Image className="icon-img" onClick={handleUploadFileBtnClick} />
<span className={`tip-text ${state.isUploadingResource ? "!block" : ""}`}>Uploading</span> <span className={`tip-text ${state.isUploadingResource ? "!block" : ""}`}>Uploading</span>
</button> </button>
<button className="action-btn" onClick={handleFullscreenBtnClick}> <button className="action-btn" onClick={handleFullscreenBtnClick}>
<i className={`fa-solid fa-${state.fullscreen ? "compress" : "expand"} icon-img`}></i> {state.fullscreen ? <Icon.Minimize className="icon-img" /> : <Icon.Maximize className="icon-img" />}
</button> </button>
</> </>
} }

3
web/src/components/MemosHeader.tsx
View File

@ -1,6 +1,7 @@
import { useCallback, useEffect, useState } from "react"; import { useCallback, useEffect, useState } from "react";
import { memoService, shortcutService } from "../services"; import { memoService, shortcutService } from "../services";
import { useAppSelector } from "../store"; import { useAppSelector } from "../store";
import Icon from "./Icon";
import SearchBar from "./SearchBar"; import SearchBar from "./SearchBar";
import { toggleSiderbar } from "./Sidebar"; import { toggleSiderbar } from "./Sidebar";
import "../less/memos-header.less"; import "../less/memos-header.less";
@ -40,7 +41,7 @@ const MemosHeader: React.FC<Props> = () => {
<div className="section-header-container memos-header-container"> <div className="section-header-container memos-header-container">
<div className="title-container"> <div className="title-container">
<div className="action-btn" onClick={toggleSiderbar}> <div className="action-btn" onClick={toggleSiderbar}>
<i className="fa-solid fa-bars icon-img"></i> <Icon.Menu className="icon-img" />
</div> </div>
<span className="title-text" onClick={handleTitleTextClick}> <span className="title-text" onClick={handleTitleTextClick}>
{titleText} {titleText}

7
web/src/components/PreviewImageDialog.tsx
View File

@ -1,5 +1,6 @@
import { generateDialog } from "./Dialog";
import * as utils from "../helpers/utils"; import * as utils from "../helpers/utils";
import Icon from "./Icon";
import { generateDialog } from "./Dialog";
import "../less/preview-image-dialog.less"; import "../less/preview-image-dialog.less";
interface Props extends DialogProps { interface Props extends DialogProps {
@ -22,10 +23,10 @@ const PreviewImageDialog: React.FC<Props> = ({ destroy, imgUrl }: Props) => {
<> <>
<div className="btns-container"> <div className="btns-container">
<button className="btn" onClick={handleCloseBtnClick}> <button className="btn" onClick={handleCloseBtnClick}>
<i className="fa-solid fa-xmark fa-lg icon-img"></i> <Icon.X className="icon-img" />
</button> </button>
<button className="btn" onClick={handleDownloadBtnClick}> <button className="btn" onClick={handleDownloadBtnClick}>
<i className="fa-solid fa-download icon-img"></i> <Icon.Download className="icon-img" />
</button> </button>
</div> </div>
<div className="img-container"> <div className="img-container">

3
web/src/components/SearchBar.tsx
View File

@ -2,6 +2,7 @@ import { locationService } from "../services";
import { useAppSelector } from "../store"; import { useAppSelector } from "../store";
import { memoSpecialTypes } from "../helpers/filter"; import { memoSpecialTypes } from "../helpers/filter";
import "../less/search-bar.less"; import "../less/search-bar.less";
import Icon from "./Icon";
interface Props {} interface Props {}
@ -24,7 +25,7 @@ const SearchBar: React.FC<Props> = () => {
return ( return (
<div className="search-bar-container"> <div className="search-bar-container">
<div className="search-bar-inputer"> <div className="search-bar-inputer">
<i className="fa-solid fa-magnifying-glass fa-sm icon-img"></i> <Icon.Search className="icon-img" />
<input className="text-input" type="text" placeholder="" onChange={handleTextQueryInput} /> <input className="text-input" type="text" placeholder="" onChange={handleTextQueryInput} />
</div> </div>
<div className="quickly-action-wrapper"> <div className="quickly-action-wrapper">

3
web/src/components/SettingDialog.tsx
View File

@ -5,6 +5,7 @@ import MyAccountSection from "./Settings/MyAccountSection";
import PreferencesSection from "./Settings/PreferencesSection"; import PreferencesSection from "./Settings/PreferencesSection";
import MemberSection from "./Settings/MemberSection"; import MemberSection from "./Settings/MemberSection";
import "../less/setting-dialog.less"; import "../less/setting-dialog.less";
import Icon from "./Icon";
interface Props extends DialogProps {} interface Props extends DialogProps {}
@ -30,7 +31,7 @@ const SettingDialog: React.FC<Props> = (props: Props) => {
return ( return (
<div className="dialog-content-container"> <div className="dialog-content-container">
<button className="btn close-btn" onClick={destroy}> <button className="btn close-btn" onClick={destroy}>
<i className="fa-solid fa-xmark fa-lg icon-img"></i> <Icon.X className="icon-img" />
</button> </button>
<div className="section-selector-container"> <div className="section-selector-container">
<span className="section-title">Basic</span> <span className="section-title">Basic</span>

3
web/src/components/ShareMemoImageDialog.tsx
View File

@ -4,6 +4,7 @@ import toImage from "../labs/html2image";
import { ANIMATION_DURATION, IMAGE_URL_REG } from "../helpers/consts"; import { ANIMATION_DURATION, IMAGE_URL_REG } from "../helpers/consts";
import * as utils from "../helpers/utils"; import * as utils from "../helpers/utils";
import { formatMemoContent } from "../helpers/marked"; import { formatMemoContent } from "../helpers/marked";
import Icon from "./Icon";
import { generateDialog } from "./Dialog"; import { generateDialog } from "./Dialog";
import Only from "./common/OnlyWhen"; import Only from "./common/OnlyWhen";
import toastHelper from "./Toast"; import toastHelper from "./Toast";
@ -75,7 +76,7 @@ const ShareMemoImageDialog: React.FC<Props> = (props: Props) => {
<span className="icon-text">🌄</span>Share Memo <span className="icon-text">🌄</span>Share Memo
</p> </p>
<button className="btn close-btn" onClick={handleCloseBtnClick}> <button className="btn close-btn" onClick={handleCloseBtnClick}>
<i className="fa-solid fa-xmark fa-lg icon-img"></i> <Icon.X className="icon-img" />
</button> </button>
</div> </div>
<div className="dialog-content-container"> <div className="dialog-content-container">

5
web/src/components/ShortcutList.tsx
View File

@ -4,6 +4,7 @@ import { useAppSelector } from "../store";
import * as utils from "../helpers/utils"; import * as utils from "../helpers/utils";
import useToggle from "../hooks/useToggle"; import useToggle from "../hooks/useToggle";
import useLoading from "../hooks/useLoading"; import useLoading from "../hooks/useLoading";
import Icon from "./Icon";
import toastHelper from "./Toast"; import toastHelper from "./Toast";
import showCreateShortcutDialog from "./CreateShortcutDialog"; import showCreateShortcutDialog from "./CreateShortcutDialog";
import "../less/shortcut-list.less"; import "../less/shortcut-list.less";
@ -39,7 +40,7 @@ const ShortcutList: React.FC<Props> = () => {
<p className="title-text"> <p className="title-text">
<span className="normal-text">Shortcuts</span> <span className="normal-text">Shortcuts</span>
<button className="btn" onClick={() => showCreateShortcutDialog()}> <button className="btn" onClick={() => showCreateShortcutDialog()}>
<i className="fa-solid fa-plus icon-img fa-xs"></i> <Icon.Plus className="icon-img" />
</button> </button>
</p> </p>
<div className="shortcuts-container"> <div className="shortcuts-container">
@ -113,7 +114,7 @@ const ShortcutContainer: React.FC<ShortcutContainerProps> = (props: ShortcutCont
</div> </div>
<div className="btns-container"> <div className="btns-container">
<span className="action-btn toggle-btn"> <span className="action-btn toggle-btn">
<i className="fa-solid fa-ellipsis fa-sm icon-img"></i> <Icon.MoreHorizontal className="icon-img" />
</span> </span>
<div className="action-btns-wrapper"> <div className="action-btns-wrapper">
<div className="action-btns-container"> <div className="action-btns-container">

3
web/src/components/Sidebar.tsx
View File

@ -1,4 +1,5 @@
import { userService } from "../services"; import { userService } from "../services";
import Icon from "./Icon";
import Only from "./common/OnlyWhen"; import Only from "./common/OnlyWhen";
import showDailyReviewDialog from "./DailyReviewDialog"; import showDailyReviewDialog from "./DailyReviewDialog";
import showSettingDialog from "./SettingDialog"; import showSettingDialog from "./SettingDialog";
@ -24,7 +25,7 @@ const Sidebar: React.FC<Props> = () => {
<aside className="sidebar-wrapper"> <aside className="sidebar-wrapper">
<div className="close-container"> <div className="close-container">
<span className="action-btn" onClick={toggleSiderbar}> <span className="action-btn" onClick={toggleSiderbar}>
<i className="fa-solid fa-xmark fa-lg icon-img"></i> <Icon.X className="icon-img" />
</span> </span>
</div> </div>
<UserBanner /> <UserBanner />

3
web/src/components/TagList.tsx
View File

@ -3,6 +3,7 @@ import * as utils from "../helpers/utils";
import { useAppSelector } from "../store"; import { useAppSelector } from "../store";
import { locationService, memoService, userService } from "../services"; import { locationService, memoService, userService } from "../services";
import useToggle from "../hooks/useToggle"; import useToggle from "../hooks/useToggle";
import Icon from "./Icon";
import Only from "./common/OnlyWhen"; import Only from "./common/OnlyWhen";
import "../less/tag-list.less"; import "../less/tag-list.less";
@ -118,7 +119,7 @@ const TagItemContainer: React.FC<TagItemContainerProps> = (props: TagItemContain
<div className="btns-container"> <div className="btns-container">
{hasSubTags ? ( {hasSubTags ? (
<span className={`action-btn toggle-btn ${showSubTags ? "shown" : ""}`} onClick={handleToggleBtnClick}> <span className={`action-btn toggle-btn ${showSubTags ? "shown" : ""}`} onClick={handleToggleBtnClick}>
<i className="fa-solid fa-chevron-right icon-img"></i> <Icon.ChevronRight className="icon-img" />
</span> </span>
) : null} ) : null}
</div> </div>

3
web/src/components/UserBanner.tsx
View File

@ -3,6 +3,7 @@ import * as utils from "../helpers/utils";
import userService from "../services/userService"; import userService from "../services/userService";
import { locationService } from "../services"; import { locationService } from "../services";
import { useAppSelector } from "../store"; import { useAppSelector } from "../store";
import Icon from "./Icon";
import MenuBtnsPopup from "./MenuBtnsPopup"; import MenuBtnsPopup from "./MenuBtnsPopup";
import "../less/user-banner.less"; import "../less/user-banner.less";
@ -45,7 +46,7 @@ const UserBanner: React.FC<Props> = () => {
{!isVisitorMode && user?.role === "HOST" ? <span className="tag">MOD</span> : null} {!isVisitorMode && user?.role === "HOST" ? <span className="tag">MOD</span> : null}
</div> </div>
<button className="action-btn menu-popup-btn" onClick={handlePopupBtnClick}> <button className="action-btn menu-popup-btn" onClick={handlePopupBtnClick}>
<i className="fa-solid fa-ellipsis icon-img"></i> <Icon.MoreHorizontal className="icon-img" />
</button> </button>
<MenuBtnsPopup shownStatus={shouldShowPopupBtns} setShownStatus={setShouldShowPopupBtns} /> <MenuBtnsPopup shownStatus={shouldShowPopupBtns} setShownStatus={setShouldShowPopupBtns} />
</div> </div>

5
web/src/components/common/DatePicker.tsx
View File

@ -1,6 +1,7 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { DAILY_TIMESTAMP } from "../../helpers/consts"; import { DAILY_TIMESTAMP } from "../../helpers/consts";
import "../../less/common/date-picker.less"; import "../../less/common/date-picker.less";
import Icon from "../Icon";
interface DatePickerProps { interface DatePickerProps {
className?: string; className?: string;
@ -55,13 +56,13 @@ const DatePicker: React.FC<DatePickerProps> = (props: DatePickerProps) => {
<div className={`date-picker-wrapper ${className}`}> <div className={`date-picker-wrapper ${className}`}>
<div className="date-picker-header"> <div className="date-picker-header">
<span className="btn-text" onClick={() => handleChangeMonthBtnClick(-1)}> <span className="btn-text" onClick={() => handleChangeMonthBtnClick(-1)}>
<i className="fa-solid fa-chevron-left icon-img"></i> <Icon.ChevronLeft className="icon-img" />
</span> </span>
<span className="normal-text"> <span className="normal-text">
{firstDate.getFullYear()}/{firstDate.getMonth() + 1} {firstDate.getFullYear()}/{firstDate.getMonth() + 1}
</span> </span>
<span className="btn-text" onClick={() => handleChangeMonthBtnClick(1)}> <span className="btn-text" onClick={() => handleChangeMonthBtnClick(1)}>
<i className="fa-solid fa-chevron-right icon-img"></i> <Icon.ChevronRight className="icon-img" />
</span> </span>
</div> </div>
<div className="date-picker-day-container"> <div className="date-picker-day-container">

3
web/src/components/common/Selector.tsx
View File

@ -1,5 +1,6 @@
import { memo, useEffect, useRef } from "react"; import { memo, useEffect, useRef } from "react";
import useToggle from "../../hooks/useToggle"; import useToggle from "../../hooks/useToggle";
import Icon from "../Icon";
import "../../less/common/selector.less"; import "../../less/common/selector.less";
interface TVObject { interface TVObject {
@ -64,7 +65,7 @@ const Selector: React.FC<Props> = (props: Props) => {
<div className={`current-value-container ${showSelector ? "active" : ""}`} onClick={handleCurrentValueClick}> <div className={`current-value-container ${showSelector ? "active" : ""}`} onClick={handleCurrentValueClick}>
<span className="value-text">{currentItem.text}</span> <span className="value-text">{currentItem.text}</span>
<span className="arrow-text"> <span className="arrow-text">
<i className="fa-solid fa-chevron-down fa-sm icon-img"></i> <Icon.ChevronDown className="icon-img" />
</span> </span>
</div> </div>

2
web/src/less/daily-review-dialog.less
View File

@ -23,7 +23,7 @@
@apply w-full h-auto; @apply w-full h-auto;
} }
&.share-btn { &.share {
@apply ~"p-0.5"; @apply ~"p-0.5";
} }
} }

2
web/src/less/github-badge.less
View File

@ -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; @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 { > .icon-img {
@apply mr-1; @apply mr-1 w-4 h-4;
} }
} }

4
web/src/less/memo.less
View File

@ -51,10 +51,10 @@
box-shadow: 0 0 8px 0 rgb(0 0 0 / 20%); box-shadow: 0 0 8px 0 rgb(0 0 0 / 20%);
> .btns-container { > .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 { > .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 { &:hover > .tip-text {
@apply block; @apply block;

2
web/src/less/search-bar.less
View File

@ -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; @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 { > .icon-img {
@apply h-auto opacity-30; @apply w-4 h-auto opacity-30;
} }
> .text-input { > .text-input {

4
web/src/less/shortcut-list.less
View File

@ -12,10 +12,10 @@
} }
> .btn { > .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 { > .icon-img {
@apply opacity-60; @apply w-4 h-4;
} }
} }
} }

9
web/yarn.lock
View File

@ -2028,7 +2028,7 @@ prettier@2.5.1:
resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.5.1.tgz#fff75fa9d519c54cf0fce328c1017d94546bc56a" resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.5.1.tgz#fff75fa9d519c54cf0fce328c1017d94546bc56a"
integrity sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg== integrity sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg==
prop-types@^15.8.1: prop-types@^15.7.2, prop-types@^15.8.1:
version "15.8.1" version "15.8.1"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@ -2072,6 +2072,13 @@ react-dom@^18.1.0:
loose-envify "^1.1.0" loose-envify "^1.1.0"
scheduler "^0.23.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: react-is@^16.13.1, react-is@^16.7.0:
version "16.13.1" version "16.13.1"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"