chore: fix icon style

This commit is contained in:
boojack 2022-07-17 10:29:12 +08:00
parent 9417797b99
commit 93ba2f4fab
18 changed files with 20 additions and 39 deletions

View File

@ -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}>
<i className="fa-solid fa-xmark"></i>
<i className="fa-solid fa-xmark fa-lg"></i>
</button>
</div>
<div className="dialog-content-container">

View File

@ -37,7 +37,7 @@ const ArchivedMemoDialog: React.FC<Props> = (props: Props) => {
Archived Memos
</p>
<button className="btn close-btn" onClick={destroy}>
<i className="fa-solid fa-xmark icon-img"></i>
<i className="fa-solid fa-xmark fa-lg icon-img"></i>
</button>
</div>
<div className="dialog-content-container">

View File

@ -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}>
<i className="fa-solid fa-xmark"></i>
<i className="fa-solid fa-xmark fa-lg"></i>
</button>
</div>
<div className="dialog-content-container">

View File

@ -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}>
<i className="fa-solid fa-xmark"></i>
<i className="fa-solid fa-xmark fa-lg"></i>
</button>
</div>
<div className="dialog-content-container">

View File

@ -100,7 +100,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"></i>
<i className="fa-solid fa-xmark fa-lg"></i>
</button>
</div>
<div className="dialog-content-container">

View File

@ -73,7 +73,7 @@ const DailyReviewDialog: React.FC<Props> = (props: Props) => {
<i className="fa-solid fa-share-nodes icon-img"></i>
</button>
<button className="btn-text" onClick={() => props.destroy()}>
<i className="fa-solid fa-xmark icon-img"></i>
<i className="fa-solid fa-xmark fa-lg icon-img"></i>
</button>
</div>
<DatePicker

View File

@ -139,7 +139,7 @@ const MemoCardDialog: React.FC<Props> = (props: Props) => {
<i className={`fa-solid fa-thumbtack icon-img ${memo.pinned ? "" : "opacity-20"}`}></i>
</button>
<button className="btn" onClick={handleVisibilityClick}>
<i className={`fa-solid fa-eye icon-img ${memo.pinned ? "" : "opacity-20"}`}></i>
<i className={`fa-solid fa-eye icon-img ${memo.visibility === "PUBLIC" ? "" : "opacity-20"}`}></i>
</button>
<button className="btn edit-btn" onClick={handleEditMemoBtnClick}>
<i className="fa-solid fa-pen-to-square icon-img"></i>
@ -147,7 +147,7 @@ const MemoCardDialog: React.FC<Props> = (props: Props) => {
</>
</Only>
<button className="btn close-btn" onClick={props.destroy}>
<i className="fa-solid fa-xmark icon-img"></i>
<i className="fa-solid fa-xmark fa-lg icon-img"></i>
</button>
</div>
</div>

View File

@ -22,7 +22,7 @@ const PreviewImageDialog: React.FC<Props> = ({ destroy, imgUrl }: Props) => {
<>
<div className="btns-container">
<button className="btn" onClick={handleCloseBtnClick}>
<i className="fa-solid fa-xmark icon-img"></i>
<i className="fa-solid fa-xmark fa-lg icon-img"></i>
</button>
<button className="btn" onClick={handleDownloadBtnClick}>
<i className="fa-solid fa-download icon-img"></i>

View File

@ -30,7 +30,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 icon-img"></i>
<i className="fa-solid fa-xmark fa-lg icon-img"></i>
</button>
<div className="section-selector-container">
<span className="section-title">Basic</span>

View File

@ -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}>
<i className="fa-solid fa-xmark icon-img"></i>
<i className="fa-solid fa-xmark fa-lg icon-img"></i>
</button>
</div>
<div className="dialog-content-container">

View File

@ -27,7 +27,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 icon-img"></i>
<i className="fa-solid fa-xmark fa-lg icon-img"></i>
</span>
</div>
<UserBanner />

View File

@ -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">
<i className="fa-solid fa-chevron-right icon-img"></i>
<i className="fa-solid fa-chevron-down fa-sm icon-img"></i>
</span>
</div>

View File

@ -23,7 +23,7 @@
@apply w-4 shrink-0;
> .icon-img {
@apply w-4 h-auto opacity-80 rotate-90;
@apply w-4 h-auto opacity-40;
}
}
}

View File

@ -89,6 +89,6 @@
}
> .remove-btn {
@apply w-4 h-auto cursor-pointer opacity-80 hover:opacity-60;
@apply w-4 h-auto ml-1 cursor-pointer opacity-60 hover:opacity-80;
}
}

View File

@ -30,10 +30,6 @@
.btn {
.flex(column, center, center);
@apply w-6 h-6 rounded hover:bg-gray-100 hover:shadow;
> .icon-img {
@apply w-5 h-5;
}
}
}

View File

@ -27,11 +27,7 @@
> .btn {
.flex(row, center, center);
@apply w-6 h-6 ml-1 rounded hover:bg-white;
> .icon-img {
@apply w-5 h-5;
}
@apply w-6 h-6 ml-2 rounded hover:bg-white;
}
}
}

View File

@ -7,17 +7,11 @@
@apply w-180 max-w-full mb-8 p-0;
> .dialog-content-container {
.flex(column, flex-start, flex-start);
@apply relative w-full overflow-y-scroll p-0 flex flex-col sm:flex-row justify-start items-start;
@apply flex flex-col sm:flex-row justify-start items-start relative w-full overflow-y-scroll p-0;
.hide-scroll-bar();
> .close-btn {
.flex(column, center, center);
@apply absolute top-4 right-4 w-6 h-6 rounded hover:bg-gray-200 hover:shadow;
> .icon-img {
@apply w-5 h-5;
}
@apply flex flex-col justify-center items-center absolute top-4 right-4 w-6 h-6 rounded hover:bg-gray-200 hover:shadow;
}
> .section-selector-container {
@ -49,8 +43,7 @@
.hide-scroll-bar();
> .section-container {
.flex(column, flex-start, flex-start);
@apply w-full my-2;
@apply flex flex-col justify-start items-start w-full my-2;
> .title-text {
@apply text-sm mb-3 font-mono text-gray-500;

View File

@ -8,11 +8,7 @@
@apply w-full pr-6 my-2 flex sm:hidden flex-row justify-end items-center;
> .action-btn {
@apply p-1 bg-gray-100 rounded shadow;
> .icon-img {
@apply w-4 h-auto;
}
@apply p-1 bg-gray-100 rounded shadow w-7 h-7 flex flex-row justify-center items-center;
}
}