From 3be5ea34a450799bc05ec5ecae820779a1003285 Mon Sep 17 00:00:00 2001
From: boojack <imrealleonardo@gmail.com>
Date: Wed, 22 Jun 2022 19:52:06 +0800
Subject: [PATCH] chore: update popup button styles

---
 web/public/icons/close.svg                       |  2 +-
 web/public/icons/edit.svg                        |  2 +-
 web/public/icons/share.svg                       |  2 +-
 web/src/components/Memo.tsx                      | 12 ++++++------
 web/src/components/Settings/MyAccountSection.tsx |  2 +-
 web/src/less/memo.less                           |  2 +-
 web/src/less/setting-dialog.less                 |  7 +++----
 web/src/less/settings/member-section.less        |  6 +++---
 web/src/less/settings/my-account-section.less    | 12 ++++++------
 web/src/less/shortcut-list.less                  |  6 +-----
 10 files changed, 24 insertions(+), 29 deletions(-)

diff --git a/web/public/icons/close.svg b/web/public/icons/close.svg
index bcd7b76a..bdebbc33 100644
--- a/web/public/icons/close.svg
+++ b/web/public/icons/close.svg
@@ -1 +1 @@
-<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>
\ No newline at end of file
+<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
diff --git a/web/public/icons/edit.svg b/web/public/icons/edit.svg
index 156eeeca..82c9eeb0 100644
--- a/web/public/icons/edit.svg
+++ b/web/public/icons/edit.svg
@@ -1 +1 @@
-<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>
\ No newline at end of file
+<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
diff --git a/web/public/icons/share.svg b/web/public/icons/share.svg
index d875437f..e1f86f26 100644
--- a/web/public/icons/share.svg
+++ b/web/public/icons/share.svg
@@ -1 +1 @@
-<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>
\ No newline at end of file
+<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
diff --git a/web/src/components/Memo.tsx b/web/src/components/Memo.tsx
index 027bdefc..4f4f5e5a 100644
--- a/web/src/components/Memo.tsx
+++ b/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}>
diff --git a/web/src/components/Settings/MyAccountSection.tsx b/web/src/components/Settings/MyAccountSection.tsx
index 55f842fc..b9bace93 100644
--- a/web/src/components/Settings/MyAccountSection.tsx
+++ b/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>
diff --git a/web/src/less/memo.less b/web/src/less/memo.less
index b039c1cd..75d88948 100644
--- a/web/src/less/memo.less
+++ b/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;
diff --git a/web/src/less/setting-dialog.less b/web/src/less/setting-dialog.less
index e18e0bba..e00053e3 100644
--- a/web/src/less/setting-dialog.less
+++ b/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);
diff --git a/web/src/less/settings/member-section.less b/web/src/less/settings/member-section.less
index 8cde12c4..0741f134 100644
--- a/web/src/less/settings/member-section.less
+++ b/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;
       }
     }
   }
diff --git a/web/src/less/settings/my-account-section.less b/web/src/less/settings/my-account-section.less
index 5317166f..7c60d866 100644
--- a/web/src/less/settings/my-account-section.less
+++ b/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;
       }
     }
   }
diff --git a/web/src/less/shortcut-list.less b/web/src/less/shortcut-list.less
index 72ac7724..674c995c 100644
--- a/web/src/less/shortcut-list.less
+++ b/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;