chore: update popup button styles

web/public/icons/close.svg

-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#37352f"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="M12.45 37.65 10.35 35.55 21.9 24 10.35 12.45 12.45 10.35 24 21.9 35.55 10.35 37.65 12.45 26.1 24 37.65 35.55 35.55 37.65 24 26.1Z"/></svg>
\ No newline at end of file

web/public/icons/edit.svg

-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#37352f"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M14.06 9.02l.92.92L5.92 19H5v-.92l9.06-9.06M17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="M9 39H11.2L33.35 16.85L31.15 14.65L9 36.8ZM39.7 14.7 33.3 8.3 35.4 6.2Q36.25 5.35 37.5 5.35Q38.75 5.35 39.6 6.2L41.8 8.4Q42.65 9.25 42.65 10.5Q42.65 11.75 41.8 12.6ZM37.6 16.8 12.4 42H6V35.6L31.2 10.4ZM32.25 15.75 31.15 14.65 33.35 16.85Z"/></svg>
\ No newline at end of file

web/public/icons/share.svg

-<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#37352f"><g><rect fill="none" height="24" width="24"/></g><g><path d="M16,5l-1.42,1.42l-1.59-1.59V16h-1.98V4.83L9.42,6.42L8,5l4-4L16,5z M20,10v11c0,1.1-0.9,2-2,2H6c-1.11,0-2-0.9-2-2V10 c0-1.11,0.89-2,2-2h3v2H6v11h12V10h-3V8h3C19.1,8,20,8.89,20,10z"/></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="M36.35 44Q34 44 32.325 42.325Q30.65 40.65 30.65 38.3Q30.65 37.95 30.725 37.475Q30.8 37 30.95 36.6L15.8 27.8Q15.05 28.65 13.95 29.175Q12.85 29.7 11.7 29.7Q9.35 29.7 7.675 28.025Q6 26.35 6 24Q6 21.6 7.675 19.95Q9.35 18.3 11.7 18.3Q12.85 18.3 13.9 18.75Q14.95 19.2 15.8 20.05L30.95 11.35Q30.8 11 30.725 10.55Q30.65 10.1 30.65 9.7Q30.65 7.3 32.325 5.65Q34 4 36.35 4Q38.75 4 40.4 5.65Q42.05 7.3 42.05 9.7Q42.05 12.05 40.4 13.725Q38.75 15.4 36.35 15.4Q35.2 15.4 34.125 15.025Q33.05 14.65 32.3 13.8L17.15 22.2Q17.25 22.6 17.325 23.125Q17.4 23.65 17.4 24Q17.4 24.35 17.325 24.75Q17.25 25.15 17.15 25.55L32.3 34.15Q33.05 33.45 34.05 33.025Q35.05 32.6 36.35 32.6Q38.75 32.6 40.4 34.25Q42.05 35.9 42.05 38.3Q42.05 40.65 40.4 42.325Q38.75 44 36.35 44ZM36.35 12.4Q37.5 12.4 38.275 11.625Q39.05 10.85 39.05 9.7Q39.05 8.55 38.275 7.775Q37.5 7 36.35 7Q35.2 7 34.425 7.775Q33.65 8.55 33.65 9.7Q33.65 10.85 34.425 11.625Q35.2 12.4 36.35 12.4ZM11.7 26.7Q12.85 26.7 13.625 25.925Q14.4 25.15 14.4 24Q14.4 22.85 13.625 22.075Q12.85 21.3 11.7 21.3Q10.55 21.3 9.775 22.075Q9 22.85 9 24Q9 25.15 9.775 25.925Q10.55 26.7 11.7 26.7ZM36.35 41Q37.5 41 38.275 40.225Q39.05 39.45 39.05 38.3Q39.05 37.15 38.275 36.375Q37.5 35.6 36.35 35.6Q35.2 35.6 34.425 36.375Q33.65 37.15 33.65 38.3Q33.65 39.45 34.425 40.225Q35.2 41 36.35 41ZM36.35 9.7Q36.35 9.7 36.35 9.7Q36.35 9.7 36.35 9.7Q36.35 9.7 36.35 9.7Q36.35 9.7 36.35 9.7Q36.35 9.7 36.35 9.7Q36.35 9.7 36.35 9.7Q36.35 9.7 36.35 9.7Q36.35 9.7 36.35 9.7ZM11.7 24Q11.7 24 11.7 24Q11.7 24 11.7 24Q11.7 24 11.7 24Q11.7 24 11.7 24Q11.7 24 11.7 24Q11.7 24 11.7 24Q11.7 24 11.7 24Q11.7 24 11.7 24ZM36.35 38.3Q36.35 38.3 36.35 38.3Q36.35 38.3 36.35 38.3Q36.35 38.3 36.35 38.3Q36.35 38.3 36.35 38.3Q36.35 38.3 36.35 38.3Q36.35 38.3 36.35 38.3Q36.35 38.3 36.35 38.3Q36.35 38.3 36.35 38.3Z"/></svg>
\ No newline at end of file

web/src/components/Memo.tsx

@@ -144,17 +144,17 @@ const Memo: React.FC<Props> = (props: Props) => {
           <div className="more-action-btns-wrapper">
             <div className="more-action-btns-container">
               <div className="btns-container">
-                <div className="btn" onClick={handleGenMemoImageBtnClick}>
-                  <img className="icon-img" src="/icons/share.svg" alt="" />
-                  <span className="tip-text">Share</span>
+                <div className="btn" onClick={handleTogglePinMemoBtnClick}>
+                  <img className="icon-img" src="/icons/pin.svg" alt="" />
+                  <span className="tip-text">{memo.pinned ? "Unpin" : "Pin"}</span>
                 </div>
                 <div className="btn" onClick={handleEditMemoClick}>
                   <img className="icon-img" src="/icons/edit.svg" alt="" />
                   <span className="tip-text">Edit</span>
                 </div>
-                <div className="btn" onClick={handleTogglePinMemoBtnClick}>
-                  <img className="icon-img" src="/icons/pin.svg" alt="" />
-                  <span className="tip-text">{memo.pinned ? "Unpin" : "Pin"}</span>
+                <div className="btn" onClick={handleGenMemoImageBtnClick}>
+                  <img className="icon-img" src="/icons/share.svg" alt="" />
+                  <span className="tip-text">Share</span>
                 </div>
               </div>
               <span className="btn" onClick={handleShowMemoStoryDialog}>

web/src/components/Settings/MyAccountSection.tsx

@@ -71,7 +71,7 @@ const MyAccountSection: React.FC<Props> = () => {
         <label className="form-label input-form-label username-label">
           <span className="normal-text">Username:</span>
           <input type="text" value={username} onChange={handleUsernameChanged} />
-          <div className={`btns-container ${username === user.name ? "hidden" : ""}`} onClick={handlePreventDefault}>
+          <div className={`btns-container ${username === user.name ? "!hidden" : ""}`} onClick={handlePreventDefault}>
             <span className="btn confirm-btn" onClick={handleConfirmEditUsernameBtnClick}>
               Save
             </span>

web/src/less/memo.less

@@ -93,7 +93,7 @@
     @apply w-full relative flex flex-row justify-start items-center;
 
     > .btn {
-      @apply flex flex-row justify-start items-center px-2 py-1 my-1 text-xs rounded-lg border bg-gray-100 border-gray-200 opacity-80 shadow hover:opacity-60;
+      @apply flex flex-row justify-start items-center pl-2 pr-1 py-1 my-1 text-xs rounded-lg border bg-gray-100 border-gray-200 opacity-80 shadow hover:opacity-60;
 
       &.expand-btn {
         @apply mt-2;

web/src/less/setting-dialog.less

@@ -27,22 +27,21 @@
           @apply text-sm mt-4 first:mt-3 mb-1 font-mono text-gray-400;
         }
 
-        >.section-items-container{
+        > .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;
-  
+
             &.selected {
               @apply font-bold hover:opacity-100;
             }
           }
         }
-
       }
 
       > .section-content-container {
-        @apply w-full sm:w-auto p-4 px-6 grow flex flex-col justify-start items-start h-128 overflow-y-scroll;
+        @apply w-full sm:w-auto p-4 sm:px-6 grow flex flex-col justify-start items-start h-128 overflow-y-scroll;
 
         > .section-container {
           .flex(column, flex-start, flex-start);

web/src/less/settings/member-section.less

@@ -5,14 +5,14 @@
     @apply w-full flex flex-col justify-start items-start;
 
     > .input-form-container {
-      @apply w-full mb-2 flex flex-row justify-start items-center;
+      @apply w-full mb-3 flex flex-row justify-start items-center;
 
       > .field-text {
         @apply text-sm text-gray-600 w-20 text-right pr-2;
       }
 
       > input {
-        @apply border rounded text-sm leading-6 shadow-inner py-1 px-2;
+        @apply border rounded text-sm leading-7 shadow-inner px-2;
       }
     }
 
@@ -20,7 +20,7 @@
       @apply w-full mb-6 pl-20 flex flex-row justify-start items-center;
 
       > button {
-        @apply border text-sm py-1 px-3 rounded leading-6 shadow hover:opacity-80;
+        @apply border text-sm px-3 rounded leading-7 shadow hover:opacity-80;
       }
     }
   }

web/src/less/settings/my-account-section.less

@@ -5,28 +5,28 @@
     min-height: 28px;
 
     > .normal-text {
-      @apply first:mr-2 text-base;
+      @apply first:mr-2 text-sm;
     }
 
     &.username-label {
       @apply w-full flex-wrap;
 
       > input {
-        @apply grow-0 shadow-inner w-auto px-2 py-1 mr-2 text-base border rounded leading-6 bg-transparent focus:border-black;
+        @apply grow-0 w-32 shadow-inner px-2 mr-2 text-sm border rounded leading-7 bg-transparent focus:border-black;
       }
 
       > .btns-container {
-        @apply mr-2 shrink-0 flex flex-row justify-start items-center;
+        @apply shrink-0 grow flex flex-row justify-start items-center;
 
         > .btn {
-          @apply text-sm shadow px-4 py-1 leading-6 rounded border hover:opacity-80 bg-gray-50;
+          @apply text-sm shadow px-2 leading-7 rounded border hover:opacity-80 bg-gray-50;
 
           &.cancel-btn {
             @apply shadow-none border-none bg-transparent;
           }
 
           &.confirm-btn {
-            @apply bg-green-600 text-white;
+            @apply bg-green-600 border-green-600 text-white;
           }
         }
       }
@@ -34,7 +34,7 @@
 
     &.password-label {
       > .btn {
-        @apply text-blue-600 ml-1 cursor-pointer hover:opacity-80;
+        @apply text-blue-600 text-sm ml-1 cursor-pointer hover:opacity-80;
       }
     }
   }

web/src/less/shortcut-list.less

@@ -106,11 +106,7 @@
             @apply w-24 h-auto p-1 whitespace-nowrap rounded-md bg-white shadow;
 
             > .btn {
-              @apply w-full py-2 px-2 rounded text-sm text-left;
-
-              &:hover {
-                background-color: @bg-whitegray;
-              }
+              @apply w-full py-2 px-3 rounded text-sm text-left hover:bg-gray-100;
 
               &.delete-btn {
                 color: @text-red;