YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-06-05 22:09:59 +02:00
Code Issues Packages Projects Releases Wiki Activity

chore: update setting dialog style

Browse Source
This commit is contained in:
boojack
2022-07-01 19:32:42 +08:00
parent bfc6e4dd0f
commit 1b60180b79
3 changed files with 10 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -39,13 +39,13 @@ const SettingDialog: React.FC<Props> = (props: Props) => {
onClick={() => handleSectionSelectorItemClick("my-account")}
className={`section-item ${state.selectedSection === "my-account" ? "selected" : ""}`}
>
My account
<span className="icon-text">🤠</span> My account
</span>
<span
onClick={() => handleSectionSelectorItemClick("preferences")}
className={`section-item ${state.selectedSection === "preferences" ? "selected" : ""}`}
>
Preferences
<span className="icon-text">🏟</span> Preferences
</span>
</div>
{user?.role === "OWNER" ? (
@ -56,7 +56,7 @@ const SettingDialog: React.FC<Props> = (props: Props) => {
onClick={() => handleSectionSelectorItemClick("member")}
className={`section-item ${state.selectedSection === "member" ? "selected" : ""}`}
>
Member
<span className="icon-text">👤</span> Member
</span>
</div>
</>

2
web/src/less/menu-btns-popup.less
View File

@ -1,7 +1,7 @@
@import "./mixin.less";
.menu-btns-popup {
@apply absolute right-2 top-8 flex flex-col justify-start items-start mt-4 p-1 w-36 rounded-lg z-10 shadow bg-white;
@apply absolute right-2 top-6 flex flex-col justify-start items-start mt-4 p-1 w-36 rounded-lg z-10 shadow bg-white;
> .btn {
@apply flex flex-row justify-start items-center w-full py-2 px-3 text-base rounded text-left hover:bg-gray-100;

8
web/src/less/setting-dialog.less
View File

@ -24,18 +24,22 @@
@apply w-full sm:w-40 h-auto sm:h-full shrink-0 rounded-t-lg sm:rounded-l-lg p-4 border-r bg-gray-100 flex flex-col justify-start items-start;
> .section-title {
@apply text-sm mt-4 first:mt-3 mb-1 font-mono text-gray-400;
@apply text-sm mt-2 sm:mt-4 first:mt-3 mb-1 font-mono text-gray-400;
}
> .section-items-container {
@apply w-full h-auto flex flex-row sm:flex-col justify-start items-start;
> .section-item {
@apply text-base mr-2 sm:mr-0 mt-2 text-gray-700 cursor-pointer hover:opacity-80;
@apply flex flex-row justify-start items-center text-base select-none mr-3 sm:mr-0 mt-0 sm:mt-2 text-gray-700 cursor-pointer hover:opacity-80;
&.selected {
@apply font-bold hover:opacity-100;
}
> .icon-text {
@apply text-base mr-1;
}
}
}
}