chore: update styles

web/src/components/MemoCardDialog.tsx

@@ -9,6 +9,7 @@ import { showDialog } from "./Dialog";
 import Only from "./common/OnlyWhen";
 import Image from "./Image";
 import "../less/memo-card-dialog.less";
+import "../less/memo-content.less";
 
 interface LinkedMemo extends FormattedMemo {
   dateStr: string;

web/src/components/MyAccountSection.tsx

@@ -29,11 +29,6 @@ const MyAccountSection: React.FC<Props> = () => {
   };
 
   const handleConfirmEditUsernameBtnClick = async () => {
-    if (user.name === "guest") {
-      toastHelper.info("Do not change my username");
-      return;
-    }
-
     if (username === user.name) {
       return;
     }
@@ -61,11 +56,6 @@ const MyAccountSection: React.FC<Props> = () => {
   };
 
   const handleChangePasswordBtnClick = () => {
-    if (user.name === "guest") {
-      toastHelper.info("Do not change my password");
-      return;
-    }
-
     showChangePasswordDialog();
   };
 

web/src/components/ShortcutList.tsx

@@ -4,7 +4,6 @@ import appContext from "../stores/appContext";
 import useToggle from "../hooks/useToggle";
 import useLoading from "../hooks/useLoading";
 import utils from "../helpers/utils";
-import Only from "./common/OnlyWhen";
 import toastHelper from "./Toast";
 import showCreateShortcutDialog from "./CreateShortcutDialog";
 import "../less/shortcut-list.less";
@@ -46,13 +45,6 @@ const ShortcutList: React.FC<Props> = () => {
           <img src="/icons/add.svg" alt="add shortcut" />
         </span>
       </p>
-      <Only when={loadingState.isSucceed && sortedShortcuts.length === 0}>
-        <div className="create-shortcut-btn-container">
-          <span className="btn" onClick={() => showCreateShortcutDialog()}>
-            New shortcut
-          </span>
-        </div>
-      </Only>
       <div className="shortcuts-container">
         {sortedShortcuts.map((s) => {
           return <ShortcutContainer key={s.id} shortcut={s} isActive={s.id === shortcutId} />;

web/src/less/memo-card-dialog.less

@@ -2,23 +2,15 @@
 
 .dialog-wrapper.memo-card-dialog {
   > .dialog-container {
-    padding: 0;
-    background-color: transparent;
+    @apply p-0 bg-transparent;
 
     > * {
-      flex-shrink: 0;
+      @apply shrink-0;
     }
 
     > .memo-card-container {
-      position: relative;
       .flex(column, flex-start, flex-start);
-      width: 512px;
-      min-height: 64px;
-      max-width: 100%;
-      padding: 12px 24px;
-      margin-bottom: 12px;
-      border-radius: 8px;
-      background-color: @bg-paper-yellow;
+      @apply relative w-128 max-w-full py-3 px-6 mb-3 rounded-lg bg-yellow-200;
 
       > * {
         z-index: 1;
@@ -26,16 +18,10 @@
 
       > .header-container {
         .flex(row, space-between, center);
-        width: 100%;
-        height: auto;
-        padding-bottom: 0;
-        margin-bottom: 0;
-        margin-top: 0;
+        @apply w-full h-auto pb-0 my-0;
 
         > .time-text {
-          font-size: 14px;
-          color: gray;
-          @apply font-mono;
+          @apply text-sm text-gray-500 font-mono;
         }
 
         > .btns-container {
@@ -43,18 +29,10 @@
 
           > .btn {
             .flex(row, center, center);
-            width: 24px;
-            height: 24px;
-            margin-left: 4px;
-            border-radius: 4px;
-
-            &:hover {
-              background-color: white;
-            }
+            @apply w-6 h-6 ml-1 rounded hover:bg-white;
 
             > .icon-img {
-              width: 20px;
-              height: 20px;
+              @apply w-5 h-5;
             }
           }
         }
@@ -62,65 +40,36 @@
 
       > .memo-container {
         .flex(column, flex-start, flex-start);
-        width: 100%;
-        padding-top: 8px;
+        @apply w-full pt-2;
 
         > .memo-content-text {
-          width: 100%;
-          font-size: 16px;
-          line-height: 1.6;
-          word-wrap: break-word;
-          word-break: break-all;
+          @apply w-full text-base leading-6;
 
           .tag-span {
-            margin: 0;
-            padding: 0;
-            font-size: 14px;
-            color: @text-blue;
-            background-color: unset;
-            cursor: unset;
+            @apply p-0 text-blue-600 text-base bg-transparent cursor-auto;
           }
         }
 
         > .images-wrapper {
           .flex(row, flex-start, flex-start);
-          margin-top: 8px;
-          width: 100%;
-          overflow-x: auto;
-          overflow-y: hidden;
+          @apply w-full mt-2 overflow-x-auto overflow-y-hidden;
           padding-bottom: 2px;
           .pretty-scroll-bar(0, 2px);
 
           > .memo-img {
-            margin-right: 8px;
-            width: auto;
-            height: 128px;
-            flex-shrink: 0;
-            flex-grow: 0;
-            overflow-y: hidden;
+            @apply mr-2 w-auto h-32 shrink-0 grow-0 overflow-y-hidden hover:border-gray-400 last:mr-0;
             .hide-scroll-bar();
 
-            &:hover {
-              border-color: lightgray;
-            }
-
-            &:last-child {
-              margin-right: 0;
-            }
-
             > img {
-              width: auto;
+              @apply w-auto rounded-lg;
               max-height: 128px;
-              border-radius: 8px;
             }
           }
         }
       }
 
       > .normal-text {
-        margin-top: 8px;
-        font-size: 13px;
-        color: gray;
+        @apply mt-2 text-sm text-gray-500;
       }
 
       > .layer-container,
@@ -150,38 +99,17 @@
 
     > .linked-memos-wrapper {
       .flex(column, flex-start, flex-start);
-      width: 512px;
-      max-width: 100%;
-      margin-top: 8px;
-      padding: 12px 24px;
-      border-radius: 8px;
-      background-color: white;
-
-      &:last-child {
-        margin-bottom: 36px;
-      }
+      @apply w-128 max-w-full mt-2 py-3 px-6 rounded-lg bg-white last:mb-8;
 
       > .normal-text {
-        font-size: 13px;
+        @apply text-sm;
       }
 
       > .linked-memo-container {
-        font-size: 13px;
-        line-height: 24px;
-        margin-top: 8px;
-        cursor: pointer;
-        max-width: 100%;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-
-        &:hover {
-          opacity: 0.8;
-        }
+        @apply text-sm leading-6 mt-2 cursor-pointer max-w-full truncate hover:opacity-80;
 
         > .time-text {
-          color: gray;
-          @apply font-mono;
+          @apply font-mono text-gray-500;
         }
       }
     }

web/src/less/signin.less

@@ -25,10 +25,10 @@
         @apply relative w-full text-base m-2;
 
         > .normal-text {
-          @apply absolute top-3 left-3 pl-1 leading-10 flex-shrink-0 text-base cursor-text text-gray-400 bg-transparent transition-all select-none;
+          @apply absolute top-3 left-3 px-1 leading-10 flex-shrink-0 text-base cursor-text text-gray-400 bg-transparent transition-all select-none;
 
           &.not-null {
-            @apply text-sm top-0 leading-4 bg-white;
+            @apply text-sm top-0 leading-4 bg-white rounded;
           }
         }
 

web/src/pages/Signin.tsx

@@ -132,13 +132,13 @@ const Signin: React.FC<Props> = () => {
                 className={`btn guest-signin ${signinBtnsClickLoadingState.isLoading ? "requesting" : ""}`}
                 onClick={handleAutoSigninAsGuestBtnClick}
               >
-                👉 Login as Guest quickly
+                👉 Quick login as a guest
               </div>
               <div
                 className={`btn ${signinBtnsClickLoadingState.isLoading ? "requesting" : ""}`}
                 onClick={handleSwitchAccountSigninBtnClick}
               >
-                I have an account
+                Sign in/up with account
               </div>
             </div>
           </>
@@ -165,7 +165,7 @@ const Signin: React.FC<Props> = () => {
                 </button>
                 <span className="split-text">/</span>
                 <button
-                  className={`btn signin-btn ${signinBtnsClickLoadingState.isLoading ? "requesting" : ""}`}
+                  className={`btn signup-btn ${signinBtnsClickLoadingState.isLoading ? "requesting" : ""}`}
                   onClick={() => handleSigninBtnsClick("signup")}
                 >
                   Sign up
@@ -176,7 +176,7 @@ const Signin: React.FC<Props> = () => {
                   className={`btn signin-btn ${signinBtnsClickLoadingState.isLoading ? "requesting" : ""}`}
                   onClick={() => handleSigninBtnsClick("signin")}
                 >
-                  Login
+                  Sign in
                 </button>
               </div>
             </div>