Skip to content

C
canifa_note
Commit 9417797b authored by boojack's avatar boojack
Browse files
Options

chore: use `fontawesome` instead of `material icons`

parent 167e5596
Hide whitespace changes
Inline Side-by-side
Showing with 61 additions and 107 deletions
web/index.html
View file @ 9417797b
......@@ -6,6 +6,7 @@
<meta name="theme-color" content="#f6f5f4" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-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>
......
web/public/icons/add.svg deleted 100644 → 0
View file @ 167e5596
<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="M22.5 38V25.5H10V22.5H22.5V10H25.5V22.5H38V25.5H25.5V38Z"/></svg>
\ No newline at end of file
web/public/icons/arrow-left.svg deleted 100644 → 0
View file @ 167e5596
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12l4.58-4.59z"/></svg>
\ No newline at end of file
web/public/icons/arrow-right.svg deleted 100644 → 0
View file @ 167e5596
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6-6-6z"/></svg>
\ No newline at end of file
web/public/icons/checkbox-active.svg deleted 100644 → 0
View file @ 167e5596
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#37352f"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zM17.99 9l-1.41-1.42-6.59 6.59-2.58-2.57-1.42 1.41 4 3.99z"/></svg>
\ No newline at end of file
web/public/icons/checkbox.svg deleted 100644 → 0
View file @ 167e5596
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#37352f"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/></svg>
\ No newline at end of file
web/public/icons/close-fullscreen.svg deleted 100644 → 0
View file @ 167e5596
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><rect fill="none" height="24" width="24"/><path d="M22,3.41l-5.29,5.29L20,12h-8V4l3.29,3.29L20.59,2L22,3.41z M3.41,22l5.29-5.29L12,20v-8H4l3.29,3.29L2,20.59L3.41,22z"/></svg>
\ No newline at end of file
web/public/icons/close.svg deleted 100644 → 0
View file @ 167e5596
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>
\ No newline at end of file
web/public/icons/download.svg deleted 100644 → 0
View file @ 167e5596
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><path d="M18,15v3H6v-3H4v3c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2v-3H18z M17,11l-1.41-1.41L13,12.17V4h-2v8.17L8.41,9.59L7,11l5,5 L17,11z"/></g></svg>
\ No newline at end of file
web/public/icons/edit.svg deleted 100644 → 0
View file @ 167e5596
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M14.06 9.02l.92.92L5.92 19H5v-.92l9.06-9.06M17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75z"/></svg>
\ No newline at end of file
web/public/icons/image.svg deleted 100644 → 0
View file @ 167e5596
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.86 8.86l-3 3.87L9 13.14 6 17h12l-3.86-5.14z"/></svg>
\ No newline at end of file
web/public/icons/invisibility.svg deleted 100644 → 0
View file @ 167e5596
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0zm0 0h24v24H0V0zm0 0h24v24H0V0zm0 0h24v24H0V0z" fill="none"/><path d="M12 6c3.79 0 7.17 2.13 8.82 5.5-.59 1.22-1.42 2.27-2.41 3.12l1.41 1.41c1.39-1.23 2.49-2.77 3.18-4.53C21.27 7.11 17 4 12 4c-1.27 0-2.49.2-3.64.57l1.65 1.65C10.66 6.09 11.32 6 12 6zm-1.07 1.14L13 9.21c.57.25 1.03.71 1.28 1.28l2.07 2.07c.08-.34.14-.7.14-1.07C16.5 9.01 14.48 7 12 7c-.37 0-.72.05-1.07.14zM2.01 3.87l2.68 2.68C3.06 7.83 1.77 9.53 1 11.5 2.73 15.89 7 19 12 19c1.52 0 2.98-.29 4.32-.82l3.42 3.42 1.41-1.41L3.42 2.45 2.01 3.87zm7.5 7.5l2.61 2.61c-.04.01-.08.02-.12.02-1.38 0-2.5-1.12-2.5-2.5 0-.05.01-.08.01-.13zm-3.4-3.4l1.75 1.75c-.23.55-.36 1.15-.36 1.78 0 2.48 2.02 4.5 4.5 4.5.63 0 1.23-.13 1.77-.36l.98.98c-.88.24-1.8.38-2.75.38-3.79 0-7.17-2.13-8.82-5.5.7-1.43 1.72-2.61 2.93-3.53z"/></svg>
\ No newline at end of file
web/public/icons/menu.svg deleted 100644 → 0
View file @ 167e5596
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#37352f"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>
\ No newline at end of file
web/public/icons/more-white.svg deleted 100644 → 0
View file @ 167e5596
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>
\ No newline at end of file
web/public/icons/more.svg deleted 100644 → 0
View file @ 167e5596
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#37352f"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>
\ No newline at end of file
web/public/icons/open-fullscreen.svg deleted 100644 → 0
View file @ 167e5596
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><rect fill="none" height="24" width="24"/><polygon points="21,11 21,3 13,3 16.29,6.29 6.29,16.29 3,13 3,21 11,21 7.71,17.71 17.71,7.71"/></svg>
\ No newline at end of file
web/public/icons/pin.svg deleted 100644 → 0
View file @ 167e5596
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><path d="M14,4v5c0,1.12,0.37,2.16,1,3H9c0.65-0.86,1-1.9,1-3V4H14 M17,2H7C6.45,2,6,2.45,6,3c0,0.55,0.45,1,1,1c0,0,0,0,0,0l1,0v5 c0,1.66-1.34,3-3,3v2h5.97v7l1,1l1-1v-7H19v-2c0,0,0,0,0,0c-1.66,0-3-1.34-3-3V4l1,0c0,0,0,0,0,0c0.55,0,1-0.45,1-1 C18,2.45,17.55,2,17,2L17,2z"/></g></svg>
\ No newline at end of file
web/public/icons/pinned.svg deleted 100644 → 0
View file @ 167e5596
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><path d="M16,9V4l1,0c0.55,0,1-0.45,1-1v0c0-0.55-0.45-1-1-1H7C6.45,2,6,2.45,6,3v0 c0,0.55,0.45,1,1,1l1,0v5c0,1.66-1.34,3-3,3h0v2h5.97v7l1,1l1-1v-7H19v-2h0C17.34,12,16,10.66,16,9z" fill-rule="evenodd"/></g></svg>
\ No newline at end of file
web/public/icons/search.svg deleted 100644 → 0
View file @ 167e5596
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#37352f"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
\ No newline at end of file
web/public/icons/share.svg deleted 100644 → 0
View file @ 167e5596
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92s2.92-1.31 2.92-2.92c0-1.61-1.31-2.92-2.92-2.92zM18 4c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zM6 13c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm12 7.02c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z"/></svg>
\ No newline at end of file
web/public/icons/tag.svg deleted 100644 → 0
View file @ 167e5596
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><path d="M20,10V8h-4V4h-2v4h-4V4H8v4H4v2h4v4H4v2h4v4h2v-4h4v4h2v-4h4v-2h-4v-4H20z M14,14h-4v-4h4V14z"/></g></svg>
\ No newline at end of file
web/public/icons/visibility.svg deleted 100644 → 0
View file @ 167e5596
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 6c3.79 0 7.17 2.13 8.82 5.5C19.17 14.87 15.79 17 12 17s-7.17-2.13-8.82-5.5C4.83 8.13 8.21 6 12 6m0-2C7 4 2.73 7.11 1 11.5 2.73 15.89 7 19 12 19s9.27-3.11 11-7.5C21.27 7.11 17 4 12 4zm0 5c1.38 0 2.5 1.12 2.5 2.5S13.38 14 12 14s-2.5-1.12-2.5-2.5S10.62 9 12 9m0-2c-2.48 0-4.5 2.02-4.5 4.5S9.52 16 12 16s4.5-2.02 4.5-4.5S14.48 7 12 7z"/></svg>
\ No newline at end of file
web/src/components/AboutSiteDialog.tsx
View file @ 9417797b
......@@ -37,7 +37,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}>
<img className="icon-img" src="/icons/close.svg" />
<i className="fa-solid fa-xmark"></i>
</button>
</div>
<div className="dialog-content-container">
......
web/src/components/ArchivedMemoDialog.tsx
View file @ 9417797b
......@@ -37,7 +37,7 @@ const ArchivedMemoDialog: React.FC<Props> = (props: Props) => {
Archived Memos
</p>
<button className="btn close-btn" onClick={destroy}>
<img className="icon-img" src="/icons/close.svg" />
<i className="fa-solid fa-xmark icon-img"></i>
</button>
</div>
<div className="dialog-content-container">
......
web/src/components/ChangePasswordDialog.tsx
View file @ 9417797b
......@@ -70,7 +70,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}>
<img className="icon-img" src="/icons/close.svg" />
<i className="fa-solid fa-xmark"></i>
</button>
</div>
<div className="dialog-content-container">
......
web/src/components/ConfirmResetOpenIdDialog.tsx
View file @ 9417797b
......@@ -41,7 +41,7 @@ const ConfirmResetOpenIdDialog: React.FC<Props> = ({ destroy }: Props) => {
<div className="dialog-header-container">
<p className="title-text">Reset Open API</p>
<button className="btn close-btn" onClick={handleCloseBtnClick}>
<img className="icon-img" src="/icons/close.svg" />
<i className="fa-solid fa-xmark"></i>
</button>
</div>
<div className="dialog-content-container">
......
web/src/components/CreateShortcutDialog.tsx
View file @ 9417797b
......@@ -100,7 +100,7 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
{shortcutId ? "Edit Shortcut" : "Create Shortcut"}
</p>
<button className="btn close-btn" onClick={destroy}>
<img className="icon-img" src="/icons/close.svg" />
<i className="fa-solid fa-xmark"></i>
</button>
</div>
<div className="dialog-content-container">
......@@ -296,7 +296,7 @@ const FilterInputer: React.FC<MemoFilterInputerProps> = (props: MemoFilterInpute
/>
{inputElements}
<img className="remove-btn" src="/icons/close.svg" onClick={handleRemoveBtnClick} />
<i className="fa-solid fa-xmark remove-btn" onClick={handleRemoveBtnClick}></i>
</div>
);
};
......
web/src/components/DailyReviewDialog.tsx
View file @ 9417797b
......@@ -64,16 +64,16 @@ const DailyReviewDialog: React.FC<Props> = (props: Props) => {
</p>
<div className="btns-container">
<button className="btn-text" onClick={() => setCurrentDateStamp(currentDateStamp - DAILY_TIMESTAMP)}>
<img className="icon-img" src="/icons/arrow-left.svg" />
<i className="fa-solid fa-chevron-left icon-img"></i>
</button>
<button className="btn-text" onClick={() => setCurrentDateStamp(currentDateStamp + DAILY_TIMESTAMP)}>
<img className="icon-img" src="/icons/arrow-right.svg" />
<i className="fa-solid fa-chevron-right icon-img"></i>
</button>
<button className="btn-text share-btn" onClick={handleShareBtnClick}>
<img className="icon-img" src="/icons/share.svg" />
<button className="btn-text" onClick={handleShareBtnClick}>
<i className="fa-solid fa-share-nodes icon-img"></i>
</button>
<button className="btn-text" onClick={() => props.destroy()}>
<img className="icon-img" src="/icons/close.svg" />
<i className="fa-solid fa-xmark icon-img"></i>
</button>
</div>
<DatePicker
......
web/src/components/GitHubBadge.tsx
View file @ 9417797b
......@@ -16,7 +16,7 @@ const GitHubBadge: React.FC<Props> = () => {
return (
<a className="github-badge-container" href="https://github.com/usememos/memos">
<div className="github-icon">
<img className="icon-img" src="/github.webp" alt="" />
<i className="fa-brands fa-github fa-lg icon-img"></i>
Star
</div>
<div className="count-text">
......
web/src/components/Memo.tsx
View file @ 9417797b
......@@ -23,7 +23,6 @@ interface Props {
}
interface State {
createdAtStr: string;
expandButtonStatus: ExpandButtonStatus;
}
......@@ -38,9 +37,9 @@ export const getFormatedMemoCreatedAtStr = (createdTs: number): string => {
const Memo: React.FC<Props> = (props: Props) => {
const memo = props.memo;
const [state, setState] = useState<State>({
createdAtStr: getFormatedMemoCreatedAtStr(memo.createdTs),
expandButtonStatus: -1,
});
const [createdAtStr, setCreatedAtStr] = useState<string>(getFormatedMemoCreatedAtStr(memo.createdTs));
const memoContainerRef = useRef<HTMLDivElement>(null);
const imageUrls = Array.from(memo.content.match(IMAGE_URL_REG) ?? []).map((s) => s.replace(IMAGE_URL_REG, "$1"));
......@@ -58,10 +57,7 @@ const Memo: React.FC<Props> = (props: Props) => {
if (Date.now() - memo.createdTs < 1000 * 60 * 60 * 24) {
setInterval(() => {
setState({
...state,
createdAtStr: dayjs(memo.createdTs).fromNow(),
});
setCreatedAtStr(dayjs(memo.createdTs).fromNow());
}, 1000 * 1);
}
}, []);
......@@ -166,7 +162,6 @@ const Memo: React.FC<Props> = (props: Props) => {
const handleExpandBtnClick = () => {
setState({
...state,
expandButtonStatus: Number(Boolean(!state.expandButtonStatus)) as ExpandButtonStatus,
});
};
......@@ -175,7 +170,7 @@ const Memo: React.FC<Props> = (props: Props) => {
<div className={`memo-wrapper ${"memos-" + memo.id} ${memo.pinned ? "pinned" : ""}`}>
<div className="memo-top-wrapper">
<div className="status-text-container" onClick={handleShowMemoStoryDialog}>
<span className="time-text">{state.createdAtStr}</span>
<span className="time-text">{createdAtStr}</span>
<Only when={memo.pinned}>
<span className="status-text">PINNED</span>
</Only>
......@@ -185,21 +180,21 @@ const Memo: React.FC<Props> = (props: Props) => {
</div>
<div className={`btns-container ${userService.isVisitorMode() ? "!hidden" : ""}`}>
<span className="btn more-action-btn">
<img className="icon-img" src="/icons/more.svg" />
<i className="fa-solid fa-ellipsis icon-img"></i>
</span>
<div className="more-action-btns-wrapper">
<div className="more-action-btns-container">
<div className="btns-container">
<div className="btn" onClick={handleTogglePinMemoBtnClick}>
<img className="icon-img" src={`/icons/${memo.pinned ? "pinned" : "pin"}.svg`} />
<i className={`fa-solid fa-thumbtack icon-img ${memo.pinned ? "" : "opacity-20"}`}></i>
<span className="tip-text">{memo.pinned ? "Unpin" : "Pin"}</span>
</div>
<div className="btn" onClick={handleEditMemoClick}>
<img className="icon-img" src="/icons/edit.svg" alt="" />
<i className="fa-solid fa-pen-to-square icon-img"></i>
<span className="tip-text">Edit</span>
</div>
<div className="btn" onClick={handleGenMemoImageBtnClick}>
<img className="icon-img" src="/icons/share.svg" alt="" />
<i className="fa-solid fa-share-nodes icon-img"></i>
<span className="tip-text">Share</span>
</div>
</div>
......@@ -226,7 +221,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"}
<img className="icon-img" src="/icons/arrow-right.svg" alt="" />
<i className="fa-solid fa-chevron-right icon-img"></i>
</span>
</div>
)}
......
web/src/components/MemoCardDialog.tsx
View file @ 9417797b
......@@ -135,19 +135,19 @@ const MemoCardDialog: React.FC<Props> = (props: Props) => {
<div className="btns-container">
<Only when={!userService.isVisitorMode()}>
<>
<button className="btn edit-btn" onClick={handlePinClick}>
<img className="icon-img" src={`/icons/${memo.pinned ? "pinned" : "pin"}.svg`} />
<button className="btn" onClick={handlePinClick}>
<i className={`fa-solid fa-thumbtack icon-img ${memo.pinned ? "" : "opacity-20"}`}></i>
</button>
<button className="btn edit-btn" onClick={handleVisibilityClick}>
<img className="icon-img" src={`/icons/${memo.visibility === "PRIVATE" ? "invisibility" : "visibility"}.svg`} />
<button className="btn" onClick={handleVisibilityClick}>
<i className={`fa-solid fa-eye icon-img ${memo.pinned ? "" : "opacity-20"}`}></i>
</button>
<button className="btn edit-btn" onClick={handleEditMemoBtnClick}>
<img className="icon-img" src="/icons/edit.svg" />
<i className="fa-solid fa-pen-to-square icon-img"></i>
</button>
</>
</Only>
<button className="btn close-btn" onClick={props.destroy}>
<img className="icon-img" src="/icons/close.svg" />
<i className="fa-solid fa-xmark icon-img"></i>
</button>
</div>
</div>
......
web/src/components/MemoEditor.tsx
View file @ 9417797b
......@@ -231,7 +231,7 @@ const MemoEditor: React.FC<Props> = () => {
tools={
<>
<div className="action-btn tag-action">
<img className="icon-img" src="/icons/tag.svg" />
<i className="fa-solid fa-hashtag icon-img"></i>
<div ref={tagSeletorRef} className="tag-list" onClick={handleTagSeletorClick}>
{tags.map((t) => {
return <span key={t}>{t}</span>;
......@@ -239,11 +239,11 @@ const MemoEditor: React.FC<Props> = () => {
</div>
</div>
<button className="action-btn">
<img className="icon-img" src="/icons/image.svg" onClick={handleUploadFileBtnClick} />
<i className="fa-solid fa-image icon-img" onClick={handleUploadFileBtnClick}></i>
<span className={`tip-text ${state.isUploadingResource ? "!block" : ""}`}>Uploading</span>
</button>
<button className="action-btn" onClick={handleFullscreenBtnClick}>
<img className="icon-img" src={`/icons/${state.fullscreen ? "close" : "open"}-fullscreen.svg`} alt="" />
<i className={`fa-solid fa-${state.fullscreen ? "compress" : "expand"} icon-img`}></i>
</button>
</>
}
......
web/src/components/MemosHeader.tsx
View file @ 9417797b
......@@ -40,7 +40,7 @@ const MemosHeader: React.FC<Props> = () => {
<div className="section-header-container memos-header-container">
<div className="title-container">
<div className="action-btn" onClick={toggleSiderbar}>
<img src="/icons/menu.svg" className="icon-img" alt="" />
<i className="fa-solid fa-bars icon-img"></i>
</div>
<span className="title-text" onClick={handleTitleTextClick}>
{titleText}
......
web/src/components/PreviewImageDialog.tsx
View file @ 9417797b
......@@ -22,10 +22,10 @@ const PreviewImageDialog: React.FC<Props> = ({ destroy, imgUrl }: Props) => {
<>
<div className="btns-container">
<button className="btn" onClick={handleCloseBtnClick}>
<img className="icon-img" src="/icons/close.svg" />
<i className="fa-solid fa-xmark icon-img"></i>
</button>
<button className="btn" onClick={handleDownloadBtnClick}>
<img className="icon-img" src="/icons/download.svg" />
<i className="fa-solid fa-download icon-img"></i>
</button>
</div>
<div className="img-container">
......
web/src/components/SearchBar.tsx
View file @ 9417797b
......@@ -24,7 +24,7 @@ const SearchBar: React.FC<Props> = () => {
return (
<div className="search-bar-container">
<div className="search-bar-inputer">
<img className="icon-img" src="/icons/search.svg" />
<i className="fa-solid fa-magnifying-glass icon-img"></i>
<input className="text-input" type="text" placeholder="" onChange={handleTextQueryInput} />
</div>
<div className="quickly-action-wrapper">
......
web/src/components/SettingDialog.tsx
View file @ 9417797b
......@@ -30,7 +30,7 @@ const SettingDialog: React.FC<Props> = (props: Props) => {
return (
<div className="dialog-content-container">
<button className="btn close-btn" onClick={destroy}>
<img className="icon-img" src="/icons/close.svg" />
<i className="fa-solid fa-xmark icon-img"></i>
</button>
<div className="section-selector-container">
<span className="section-title">Basic</span>
......
web/src/components/ShareMemoImageDialog.tsx
View file @ 9417797b
......@@ -75,7 +75,7 @@ const ShareMemoImageDialog: React.FC<Props> = (props: Props) => {
<span className="icon-text">🌄</span>Share Memo
</p>
<button className="btn close-btn" onClick={handleCloseBtnClick}>
<img className="icon-img" src="/icons/close.svg" />
<i className="fa-solid fa-xmark icon-img"></i>
</button>
</div>
<div className="dialog-content-container">
......
web/src/components/ShortcutList.tsx
View file @ 9417797b
......@@ -39,7 +39,7 @@ const ShortcutList: React.FC<Props> = () => {
<p className="title-text">
<span className="normal-text">Shortcuts</span>
<button className="btn" onClick={() => showCreateShortcutDialog()}>
<img src="/icons/add.svg" alt="add shortcut" />
<i className="fa-solid fa-plus icon-img fa-xs"></i>
</button>
</p>
<div className="shortcuts-container">
......@@ -113,7 +113,7 @@ const ShortcutContainer: React.FC<ShortcutContainerProps> = (props: ShortcutCont
</div>
<div className="btns-container">
<span className="action-btn toggle-btn">
<img className="icon-img" src="/icons/more.svg" />
<i className="fa-solid fa-ellipsis fa-sm icon-img"></i>
</span>
<div className="action-btns-wrapper">
<div className="action-btns-container">
......
web/src/components/Sidebar.tsx
View file @ 9417797b
......@@ -27,7 +27,7 @@ const Sidebar: React.FC<Props> = () => {
<aside className="sidebar-wrapper">
<div className="close-container">
<span className="action-btn" onClick={toggleSiderbar}>
<img src="/icons/close.svg" className="icon-img" alt="" />
<i className="fa-solid fa-xmark icon-img"></i>
</span>
</div>
<UserBanner />
......
web/src/components/TagList.tsx
View file @ 9417797b
......@@ -116,7 +116,7 @@ const TagItemContainer: React.FC<TagItemContainerProps> = (props: TagItemContain
<div className="btns-container">
{hasSubTags ? (
<span className={`action-btn toggle-btn ${showSubTags ? "shown" : ""}`} onClick={handleToggleBtnClick}>
<img className="icon-img" src="/icons/arrow-right.svg" />
<i className="fa-solid fa-chevron-right icon-img"></i>
</span>
) : null}
</div>
......
web/src/components/UserBanner.tsx
View file @ 9417797b
......@@ -45,7 +45,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}>
<img src="/icons/more.svg" className="icon-img" />
<i className="fa-solid fa-ellipsis icon-img"></i>
</button>
<MenuBtnsPopup shownStatus={shouldShowPopupBtns} setShownStatus={setShouldShowPopupBtns} />
</div>
......
web/src/components/common/DatePicker.tsx
View file @ 9417797b
......@@ -55,13 +55,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)}>
<img className="icon-img" src="/icons/arrow-left.svg" />
<i className="fa-solid fa-chevron-left icon-img"></i>
</span>
<span className="normal-text">
{firstDate.getFullYear()}/{firstDate.getMonth() + 1}
</span>
<span className="btn-text" onClick={() => handleChangeMonthBtnClick(1)}>
<img className="icon-img" src="/icons/arrow-right.svg" />
<i className="fa-solid fa-chevron-right icon-img"></i>
</span>
</div>
<div className="date-picker-day-container">
......
web/src/components/common/Selector.tsx
View file @ 9417797b
......@@ -64,7 +64,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">
<img className="icon-img" src="/icons/arrow-right.svg" />
<i className="fa-solid fa-chevron-right icon-img"></i>
</span>
</div>
......
web/src/less/common/date-picker.less
View file @ 9417797b
@import "../mixin.less";
.date-picker-wrapper {
.flex(column, flex-start, flex-start);
padding: 16px;
@apply flex flex-col justify-start items-start p-4;
> .date-picker-header {
.flex(row, center, center);
width: 100%;
@apply flex flex-row justify-center items-center w-full mb-2;
> .btn-text {
width: 24px;
height: 24px;
border-radius: 4px;
cursor: pointer;
user-select: none;
> .icon-img {
width: 100%;
height: auto;
}
&:hover {
background-color: @bg-whitegray;
}
@apply w-6 h-6 rounded cursor-pointer select-none flex flex-col justify-center items-center opacity-40 hover:bg-gray-200;
}
> .normal-text {
margin: 0 4px;
line-height: 24px;
@apply mx-1 leading-6 font-mono;
}
}
......
web/src/less/editor.less
View file @ 9417797b
......@@ -28,10 +28,10 @@
@apply flex flex-row justify-start items-center;
> .action-btn {
@apply flex flex-row justify-start items-center p-1 w-auto h-auto mr-1 select-none rounded cursor-pointer opacity-60 hover:opacity-90 hover:bg-gray-300 hover:shadow;
@apply flex flex-row justify-center items-center p-1 w-auto h-auto mr-1 select-none rounded cursor-pointer opacity-60 hover:opacity-90 hover:bg-gray-300 hover:shadow;
> .icon-img {
@apply w-5 h-auto;
@apply w-5 h-5 mx-auto flex flex-row justify-center items-center;
}
> .tip-text {
......
web/src/less/github-badge.less
View file @ 9417797b
......@@ -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 w-4 h-auto mr-1;
@apply mr-1;
}
}
......
web/src/less/memo.less
View file @ 9417797b
......@@ -73,18 +73,16 @@
}
.btn {
@apply flex flex-row justify-center items-center px-2 leading-6 text-sm rounded hover:bg-gray-100;
@apply flex flex-row justify-center items-center px-2 leading-6 text-sm rounded hover:bg-gray-200;
&.more-action-btn {
@apply w-8 -mr-2 opacity-60 cursor-default;
@apply w-8 -mr-2 opacity-60 cursor-default hover:bg-transparent;
> .icon-img {
@apply w-4 h-auto;
}
&:hover {
background-color: unset;
& + .more-action-btns-wrapper {
display: flex;
}
......@@ -130,7 +128,7 @@
}
> .icon-img {
@apply w-4 h-auto transition-all;
@apply w-4 h-auto ml-1 transition-all;
}
}
}
......
web/src/less/search-bar.less
View file @ 9417797b
......@@ -8,7 +8,7 @@
@apply w-full py-2 px-4 rounded-lg flex flex-row justify-start items-center bg-zinc-200;
> .icon-img {
@apply mr-2 w-4 h-auto opacity-80;
@apply mr-2 h-auto opacity-30;
}
> .text-input {
......
web/src/less/shortcut-list.less
View file @ 9417797b
......@@ -12,10 +12,10 @@
}
> .btn {
@apply flex flex-col justify-center items-center w-5 h-5 bg-gray-200 rounded ml-2 shadow hover:opacity-80;
@apply flex flex-col justify-center items-center w-5 p-1 h-5 bg-gray-200 rounded ml-2 shadow hover:opacity-80;
> img {
@apply w-4 h-4 opacity-80;
> .icon-img {
@apply opacity-60;
}
}
}
......@@ -66,14 +66,11 @@
@apply flex-row justify-end items-center hidden shrink-0;
> .action-btn {
.flex(row, center, center);
@apply w-6 h-6 shrink-0;
> .icon-img {
@apply w-4 h-auto;
}
@apply flex flex-row justify-center items-center w-6 h-6 shrink-0;
&.toggle-btn {
@apply opacity-60;
&:hover {
& + .action-btns-wrapper {
@apply flex;
......
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