chore: polish setting dialog (#6)

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({

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,
+      &.bind-btn {
-      &.link-btn {
         color: white;
         background-color: @text-green;
         text-decoration: none;

web/src/less/preferences-section.less

@@ -13,8 +13,8 @@
     cursor: pointer;
 
     > .icon-img {
-      width: 18px;
+      width: 16px;
-      height: 18px;
+      height: 16px;
       margin: 0 8px;
     }
 

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 {