chore: update setting dialog style

web/src/components/SettingDialog.tsx

@@ -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>
           </>

web/src/less/menu-btns-popup.less

 @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;

web/src/less/setting-dialog.less

@@ -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;
+            }
           }
         }
       }