chore: update feather icon

2024-09-20 22:46:16 +08:00 · 2022-07-30 00:29:20 +08:00 · 2022-07-30 00:29:20 +08:00 · c703f281d9
parent e179c65e52
commit c703f281d9
30 changed files with 78 additions and 47 deletions
--- a/web/index.html
+++ b/web/index.html
@ -6,7 +6,6 @@
    <meta name="theme-color" content="#f6f5f4" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <title>Memos</title>
-    <script src="https://kit.fontawesome.com/41e3aaa6af.js" crossorigin="anonymous"></script>
  </head>
  <body>
    <div id="root"></div>
--- 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": {
--- 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<Props> = ({ destroy }: Props) => {
          <span className="icon-text">🤠</span>About <b>Memos</b>
        </p>
        <button className="btn close-btn" onClick={handleCloseBtnClick}>
-          <i className="fa-solid fa-xmark fa-lg"></i>
+          <Icon.X />
        </button>
      </div>
      <div className="dialog-content-container">
--- 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: Props) => {
          Archived Memos
        </p>
        <button className="btn close-btn" onClick={destroy}>
-          <i className="fa-solid fa-xmark fa-lg icon-img"></i>
+          <Icon.X className="icon-img" />
        </button>
      </div>
      <div className="dialog-content-container">
--- 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<Props> = ({ destroy }: Props) => {
      <div className="dialog-header-container">
        <p className="title-text">Change Password</p>
        <button className="btn close-btn" onClick={handleCloseBtnClick}>
-          <i className="fa-solid fa-xmark fa-lg"></i>
+          <Icon.X />
        </button>
      </div>
      <div className="dialog-content-container">
--- 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: Props) => {
          {shortcutId ? "Edit Shortcut" : "Create Shortcut"}
        </p>
        <button className="btn close-btn" onClick={destroy}>
-          <i className="fa-solid fa-xmark fa-lg"></i>
+          <Icon.X />
        </button>
      </div>
      <div className="dialog-content-container">
@ -296,7 +297,7 @@ const FilterInputer: React.FC<MemoFilterInputerProps> = (props: MemoFilterInpute
      />

      {inputElements}
-      <i className="fa-solid fa-xmark remove-btn" onClick={handleRemoveBtnClick}></i>
+      <Icon.X className="remove-btn" onClick={handleRemoveBtnClick} />
    </div>
  );
 };
--- 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) => {
        </p>
        <div className="btns-container">
          <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 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 className="btn-text" onClick={handleShareBtnClick}>
-            <i className="fa-solid fa-share-nodes icon-img"></i>
+          <button className="btn-text share" onClick={handleShareBtnClick}>
+            <Icon.Share className="icon-img" />
          </button>
          <span className="split-line">/</span>
          <button className="btn-text" onClick={() => props.destroy()}>
-            <i className="fa-solid fa-xmark fa-lg icon-img"></i>
+            <Icon.X className="icon-img" />
          </button>
        </div>
        <DatePicker
--- a/web/src/components/Dialog/CommonDialog.tsx
+++ b/web/src/components/Dialog/CommonDialog.tsx
@ -1,3 +1,4 @@
+import Icon from "../Icon";
 import { generateDialog } from "./BaseDialog";
 import "../../less/common-dialog.less";

@ -44,7 +45,7 @@ const CommonDialog: React.FC<Props> = (props: Props) => {
      <div className="dialog-header-container">
        <p className="title-text">{title}</p>
        <button className="btn close-btn" onClick={handleCloseBtnClick}>
-          <i className="fa-solid fa-xmark fa-lg"></i>
+          <Icon.X />
        </button>
      </div>
      <div className="dialog-content-container">
--- 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<Props> = () => {
  return (
    <a className="github-badge-container" href="https://github.com/usememos/memos">
      <div className="github-icon">
-        <i className="fa-brands fa-github fa-lg icon-img"></i>
+        <Icon.GitHub className="icon-img" />
        Star
      </div>
      <div className="count-text">
--- a/web/src/components/Icon.ts
+++ b/web/src/components/Icon.ts
@ -0,0 +1,3 @@
+import * as Icon from "react-feather";
+
+export default Icon;
--- 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: Props) => {
        </div>
        <div className={`btns-container ${userService.isVisitorMode() ? "!hidden" : ""}`}>
          <span className="btn more-action-btn">
-            <i className="fa-solid fa-ellipsis icon-img"></i>
+            <Icon.MoreHorizontal className="icon-img" />
          </span>
          <div className="more-action-btns-wrapper">
            <div className="more-action-btns-container">
              <div className="btns-container">
                <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>
                </div>
                <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>
                </div>
                <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>
                </div>
              </div>
@ -219,7 +220,7 @@ const Memo: React.FC<Props> = (props: Props) => {
        <div className="expand-btn-container">
          <span className={`btn ${state.expandButtonStatus === 0 ? "expand-btn" : "fold-btn"}`} onClick={handleExpandBtnClick}>
            {state.expandButtonStatus === 0 ? "Expand" : "Fold"}
-            <i className="fa-solid fa-chevron-right icon-img"></i>
+            <Icon.ChevronRight className="icon-img" />
          </span>
        </div>
      )}
--- 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) => {
      <Only when={!userService.isVisitorMode()}>
        <div className="card-header-container">
          <div className="visibility-selector-container">
-            <i className="fa-solid fa-eye mr-2"></i>
+            <Icon.Eye className="mr-2" />
            <Selector
              className="visibility-selector"
              dataSource={visibilityList}
@ -145,13 +146,13 @@ const MemoCardDialog: React.FC<Props> = (props: Props) => {
            <Only when={!userService.isVisitorMode()}>
              <>
                <button className="btn edit-btn" onClick={handleEditMemoBtnClick}>
-                  <i className="fa-solid fa-pen-to-square icon-img"></i>
+                  <Icon.Edit className="icon-img" />
                </button>
                <span className="split-line">/</span>
              </>
            </Only>
            <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>
          </div>
        </div>
--- 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<Props> = () => {
        tools={
          <>
            <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}>
                {tags.map((t) => {
                  return <span key={t}>{t}</span>;
@ -239,11 +240,11 @@ const MemoEditor: React.FC<Props> = () => {
              </div>
            </div>
            <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>
            </button>
            <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>
          </>
        }
--- 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<Props> = () => {
    <div className="section-header-container memos-header-container">
      <div className="title-container">
        <div className="action-btn" onClick={toggleSiderbar}>
-          <i className="fa-solid fa-bars icon-img"></i>
+          <Icon.Menu className="icon-img" />
        </div>
        <span className="title-text" onClick={handleTitleTextClick}>
          {titleText}
--- 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<Props> = ({ destroy, imgUrl }: Props) => {
    <>
      <div className="btns-container">
        <button className="btn" onClick={handleCloseBtnClick}>
-          <i className="fa-solid fa-xmark fa-lg icon-img"></i>
+          <Icon.X className="icon-img" />
        </button>
        <button className="btn" onClick={handleDownloadBtnClick}>
-          <i className="fa-solid fa-download icon-img"></i>
+          <Icon.Download className="icon-img" />
        </button>
      </div>
      <div className="img-container">
--- 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<Props> = () => {
  return (
    <div className="search-bar-container">
      <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} />
      </div>
      <div className="quickly-action-wrapper">
--- 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: Props) => {
  return (
    <div className="dialog-content-container">
      <button className="btn close-btn" onClick={destroy}>
-        <i className="fa-solid fa-xmark fa-lg icon-img"></i>
+        <Icon.X className="icon-img" />
      </button>
      <div className="section-selector-container">
        <span className="section-title">Basic</span>
--- 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: Props) => {
          <span className="icon-text">🌄</span>Share Memo
        </p>
        <button className="btn close-btn" onClick={handleCloseBtnClick}>
-          <i className="fa-solid fa-xmark fa-lg icon-img"></i>
+          <Icon.X className="icon-img" />
        </button>
      </div>
      <div className="dialog-content-container">
--- 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<Props> = () => {
      <p className="title-text">
        <span className="normal-text">Shortcuts</span>
        <button className="btn" onClick={() => showCreateShortcutDialog()}>
-          <i className="fa-solid fa-plus icon-img fa-xs"></i>
+          <Icon.Plus className="icon-img" />
        </button>
      </p>
      <div className="shortcuts-container">
@ -113,7 +114,7 @@ const ShortcutContainer: React.FC<ShortcutContainerProps> = (props: ShortcutCont
        </div>
        <div className="btns-container">
          <span className="action-btn toggle-btn">
-            <i className="fa-solid fa-ellipsis fa-sm icon-img"></i>
+            <Icon.MoreHorizontal className="icon-img" />
          </span>
          <div className="action-btns-wrapper">
            <div className="action-btns-container">
--- 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<Props> = () => {
    <aside className="sidebar-wrapper">
      <div className="close-container">
        <span className="action-btn" onClick={toggleSiderbar}>
-          <i className="fa-solid fa-xmark fa-lg icon-img"></i>
+          <Icon.X className="icon-img" />
        </span>
      </div>
      <UserBanner />
--- a/web/src/components/TagList.tsx
+++ b/web/src/components/TagList.tsx
@ -3,6 +3,7 @@ import * as utils from "../helpers/utils";
 import { useAppSelector } from "../store";
 import { locationService, memoService, userService } from "../services";
 import useToggle from "../hooks/useToggle";
+import Icon from "./Icon";
 import Only from "./common/OnlyWhen";
 import "../less/tag-list.less";

@ -118,7 +119,7 @@ const TagItemContainer: React.FC<TagItemContainerProps> = (props: TagItemContain
        <div className="btns-container">
          {hasSubTags ? (
            <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>
          ) : null}
        </div>
--- a/web/src/components/UserBanner.tsx
+++ b/web/src/components/UserBanner.tsx
@ -3,6 +3,7 @@ import * as utils from "../helpers/utils";
 import userService from "../services/userService";
 import { locationService } from "../services";
 import { useAppSelector } from "../store";
+import Icon from "./Icon";
 import MenuBtnsPopup from "./MenuBtnsPopup";
 import "../less/user-banner.less";

@ -45,7 +46,7 @@ const UserBanner: React.FC<Props> = () => {
          {!isVisitorMode && user?.role === "HOST" ? <span className="tag">MOD</span> : null}
        </div>
        <button className="action-btn menu-popup-btn" onClick={handlePopupBtnClick}>
-          <i className="fa-solid fa-ellipsis icon-img"></i>
+          <Icon.MoreHorizontal className="icon-img" />
        </button>
        <MenuBtnsPopup shownStatus={shouldShowPopupBtns} setShownStatus={setShouldShowPopupBtns} />
      </div>
--- 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<DatePickerProps> = (props: DatePickerProps) => {
    <div className={`date-picker-wrapper ${className}`}>
      <div className="date-picker-header">
        <span className="btn-text" onClick={() => handleChangeMonthBtnClick(-1)}>
-          <i className="fa-solid fa-chevron-left icon-img"></i>
+          <Icon.ChevronLeft className="icon-img" />
        </span>
        <span className="normal-text">
          {firstDate.getFullYear()}/{firstDate.getMonth() + 1}
        </span>
        <span className="btn-text" onClick={() => handleChangeMonthBtnClick(1)}>
-          <i className="fa-solid fa-chevron-right icon-img"></i>
+          <Icon.ChevronRight className="icon-img" />
        </span>
      </div>
      <div className="date-picker-day-container">
--- 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: Props) => {
      <div className={`current-value-container ${showSelector ? "active" : ""}`} onClick={handleCurrentValueClick}>
        <span className="value-text">{currentItem.text}</span>
        <span className="arrow-text">
-          <i className="fa-solid fa-chevron-down fa-sm icon-img"></i>
+          <Icon.ChevronDown className="icon-img" />
        </span>
      </div>

--- 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";
          }
        }
--- 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;
    }
  }

--- 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;
--- 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 {
--- 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;
      }
    }
  }
--- 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"