From 27bd3e80de3452f0f47326f4a0bdff02da91b82f Mon Sep 17 00:00:00 2001
From: STEVEN <imrealleonardo@gmail.com>
Date: Tue, 14 Dec 2021 09:47:46 +0800
Subject: [PATCH] chore: polish setting dialog (#6)

---
 web/src/components/PreferencesSection.tsx |  2 +-
 web/src/less/my-account-section.less      | 16 +++++++++-------
 web/src/less/preferences-section.less     |  4 ++--
 web/src/less/setting.less                 |  1 +
 4 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/web/src/components/PreferencesSection.tsx b/web/src/components/PreferencesSection.tsx
index 09b54ed7..27cb36e6 100644
--- a/web/src/components/PreferencesSection.tsx
+++ b/web/src/components/PreferencesSection.tsx
@@ -11,7 +11,7 @@ const PreferencesSection: React.FC<Props> = () => {
   const { globalState } = useContext(appContext);
   const { useTinyUndoHistoryCache, shouldHideImageUrl, shouldSplitMemoWord, shouldUseMarkdownParser } = globalState;
 
-  const demoMemoContent = "👋 你好呀～\n我是一个demo：\n* 👏 欢迎使用memos；";
+  const demoMemoContent = "👋 你好呀～欢迎使用memos!\n* ✨ **开源项目**；\n* 😋 精美且细节的视觉样式；\n* 📑 体验优良的交互逻辑；";
 
   const handleOpenTinyUndoChanged = () => {
     globalStateService.setAppSetting({
diff --git a/web/src/less/my-account-section.less b/web/src/less/my-account-section.less
index c74fac02..651be607 100644
--- a/web/src/less/my-account-section.less
+++ b/web/src/less/my-account-section.less
@@ -6,26 +6,29 @@
 
     &.username-label {
       > input {
-        flex-grow: 0 !important;
+        flex-grow: 0;
         width: 128px;
         padding: 0 8px;
-        margin-right: 4px;
         font-size: 14px;
         border: 1px solid lightgray;
-        border-radius: 0;
         border-radius: 4px;
         line-height: 26px;
         background-color: transparent;
 
         &:focus {
           border-color: black;
+
+          + .btns-container {
+            display: flex;
+          }
         }
       }
 
       > .btns-container {
         .flex(row, flex-start, center);
-        margin-left: 4px;
+        margin-left: 8px;
         flex-shrink: 0;
+        display: none;
 
         > .btn {
           font-size: 12px;
@@ -80,15 +83,14 @@
       margin-left: 12px;
       border-radius: 4px;
       font-size: 12px;
-      cursor: pointer;
       line-height: 28px;
+      cursor: pointer;
 
       &:hover {
         opacity: 0.8;
       }
 
-      &.bind-btn,
-      &.link-btn {
+      &.bind-btn {
         color: white;
         background-color: @text-green;
         text-decoration: none;
diff --git a/web/src/less/preferences-section.less b/web/src/less/preferences-section.less
index dc646e32..257f8a34 100644
--- a/web/src/less/preferences-section.less
+++ b/web/src/less/preferences-section.less
@@ -13,8 +13,8 @@
     cursor: pointer;
 
     > .icon-img {
-      width: 18px;
-      height: 18px;
+      width: 16px;
+      height: 16px;
       margin: 0 8px;
     }
 
diff --git a/web/src/less/setting.less b/web/src/less/setting.less
index bcc9b55e..72525122 100644
--- a/web/src/less/setting.less
+++ b/web/src/less/setting.less
@@ -55,6 +55,7 @@
         .flex(row, flex-start, center);
         width: 100%;
         font-size: 14px;
+        line-height: 20px;
         margin-bottom: 8px;
 
         > .normal-text {