chore: update dialog style (#574)

* chore: update tests

* chore: update dialog styles

web/src/components/ArchivedMemo.tsx

@@ -57,10 +57,10 @@ const ArchivedMemo: React.FC<Props> = (props: Props) => {
           {t("common.archived-at")} {utils.getDateTimeString(memo.updatedTs)}
         </span>
         <div className="btns-container">
-          <span className="btn restore-btn" onClick={handleRestoreMemoClick}>
+          <span className="btn-text" onClick={handleRestoreMemoClick}>
             {t("common.restore")}
           </span>
-          <span className={`btn delete-btn ${showConfirmDeleteBtn ? "final-confirm" : ""}`} onClick={handleDeleteMemoClick}>
+          <span className={`btn-text ${showConfirmDeleteBtn ? "final-confirm" : ""}`} onClick={handleDeleteMemoClick}>
             {t("common.delete")}
             {showConfirmDeleteBtn ? "!" : ""}
           </span>

web/src/components/ChangeMemoCreatedTsDialog.tsx

@@ -72,14 +72,18 @@ const ChangeMemoCreatedTsDialog: React.FC<Props> = (props: Props) => {
         <p className="w-full bg-yellow-100 border border-yellow-400 rounded p-2 text-xs leading-4">
           THIS IS NOT A NORMAL BEHAVIOR. PLEASE MAKE SURE YOU REALLY NEED IT.
         </p>
-        <label className="form-label input-form-label">
-          <input type="datetime-local" value={createdAt} max={maxDatetimeValue} onChange={handleDatetimeInputChange} />
-        </label>
+        <input
+          className="input-text mt-2"
+          type="datetime-local"
+          value={createdAt}
+          max={maxDatetimeValue}
+          onChange={handleDatetimeInputChange}
+        />
         <div className="btns-container">
-          <span className="btn cancel-btn" onClick={handleCloseBtnClick}>
+          <span className="btn-text" onClick={handleCloseBtnClick}>
             {t("common.cancel")}
           </span>
-          <span className="btn confirm-btn" onClick={handleSaveBtnClick}>
+          <span className="btn-primary" onClick={handleSaveBtnClick}>
             {t("common.save")}
           </span>
         </div>

web/src/components/ChangeResourceFilenameDialog.tsx

@@ -68,16 +68,14 @@ const ChangeResourceFilenameDialog: React.FC<Props> = (props: Props) => {
         </button>
       </div>
       <div className="dialog-content-container">
-        <label className="form-label input-form-label">
-          <input type="text" value={filename} onChange={handleFilenameChanged} />
-        </label>
+        <input className="input-text" type="text" value={filename} onChange={handleFilenameChanged} />
         <div className="btns-container">
-          <span className="btn cancel-btn" onClick={handleCloseBtnClick}>
+          <button className="btn-text" onClick={handleCloseBtnClick}>
             {t("common.cancel")}
-          </span>
-          <span className="btn confirm-btn" onClick={handleSaveBtnClick}>
+          </button>
+          <button className="btn-primary" onClick={handleSaveBtnClick}>
             {t("common.save")}
-          </span>
+          </button>
         </div>
       </div>
     </>

web/src/components/CreateShortcutDialog.tsx

@@ -1,14 +1,14 @@
+import dayjs from "dayjs";
 import { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { memoService, shortcutService } from "../services";
-import { checkShouldShowMemoWithFilters, filterConsts, getDefaultFilter, relationConsts } from "../helpers/filter";
+import { filterConsts, getDefaultFilter, relationConsts } from "../helpers/filter";
 import useLoading from "../hooks/useLoading";
 import Icon from "./Icon";
 import { generateDialog } from "./Dialog";
 import toastHelper from "./Toast";
 import Selector from "./common/Selector";
 import "../less/create-shortcut-dialog.less";
-import dayjs from "dayjs";
 
 interface Props extends DialogProps {
   shortcutId?: ShortcutId;
@@ -21,10 +21,6 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
   const requestState = useLoading(false);
   const { t } = useTranslation();
 
-  const shownMemoLength = memoService.getState().memos.filter((memo) => {
-    return checkShouldShowMemoWithFilters(memo, filters);
-  }).length;
-
   useEffect(() => {
     if (shortcutId) {
       const shortcutTemp = shortcutService.getShortcutById(shortcutId);
@@ -146,10 +142,7 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
       <div className="dialog-footer-container">
         <div></div>
         <div className="btns-container">
-          <span className={`tip-text ${filters.length === 0 && "hidden"}`}>
-            <strong>{shownMemoLength}</strong> {t("shortcut-list.eligible-memo")}
-          </span>
-          <button className={`btn save-btn ${requestState.isLoading ? "requesting" : ""}`} onClick={handleSaveBtnClick}>
+          <button className={`btn-primary ${requestState.isLoading ? "requesting" : ""}`} onClick={handleSaveBtnClick}>
             {t("common.save")}
           </button>
         </div>

web/src/components/DailyMemo.tsx

@@ -21,7 +21,7 @@ const DailyMemo: React.FC<Props> = (props: Props) => {
       </div>
       <div className="memo-container">
         <MemoContent content={memo.content} displayConfig={displayConfig} />
-        <MemoResources resourceList={memo.resourceList} />
+        <MemoResources resourceList={memo.resourceList} style="col" />
       </div>
       <div className="split-line"></div>
     </div>

web/src/components/Settings/MyAccountSection.tsx

@@ -35,10 +35,10 @@ const MyAccountSection = () => {
         </div>
         <div className="flex flex-row justify-start items-center text-base text-gray-600">{user.email}</div>
         <div className="w-full flex flex-row justify-start items-center mt-2 space-x-2">
-          <button className="px-2 py-1 border rounded-md text-sm hover:bg-gray-100" onClick={showUpdateAccountDialog}>
+          <button className="btn-normal" onClick={showUpdateAccountDialog}>
             Update Information
           </button>
-          <button className="px-2 py-1 border rounded-md text-sm hover:bg-gray-100" onClick={showChangePasswordDialog}>
+          <button className="btn-normal" onClick={showChangePasswordDialog}>
             Change Password
           </button>
         </div>
@@ -46,7 +46,7 @@ const MyAccountSection = () => {
       <div className="section-container openapi-section-container">
         <p className="title-text">Open API</p>
         <p className="value-text">{openAPIRoute}</p>
-        <span className="reset-btn" onClick={handleResetOpenIdBtnClick}>
+        <span className="btn-danger mt-2" onClick={handleResetOpenIdBtnClick}>
           {t("common.reset")} API
         </span>
         <div className="usage-guide-container">

web/src/components/UpdateAccountDialog.tsx

@@ -87,11 +87,18 @@ const UpdateAccountDialog: React.FC<Props> = ({ destroy }: Props) => {
         </button>
       </div>
       <div className="dialog-content-container">
-        <p className="text-sm mb-1">Nickname</p>
+        <p className="text-sm mb-1">
+          Nickname<span className="text-sm text-gray-400 ml-1">(Display in the banner)</span>
+        </p>
         <input type="text" className="input-text" value={state.nickname} onChange={handleNicknameChanged} />
-        <p className="text-sm mb-1 mt-2">Username</p>
+        <p className="text-sm mb-1 mt-2">
+          Username
+          <span className="text-sm text-gray-400 ml-1">(Using to sign in)</span>
+        </p>
         <input type="text" className="input-text" value={state.username} onChange={handleUsernameChanged} />
-        <p className="text-sm mb-1 mt-2">Email</p>
+        <p className="text-sm mb-1 mt-2">
+          Email<span className="text-sm text-gray-400 ml-1">(Optional)</span>
+        </p>
         <input type="text" className="input-text" value={state.email} onChange={handleEmailChanged} />
         <div className="mt-4 w-full flex flex-row justify-end items-center space-x-2">
           <span className="btn-text" onClick={handleCloseBtnClick}>

web/src/css/tailwind.css

@@ -14,12 +14,20 @@
   }
 }
 
+.btn-normal {
+  @apply select-none inline-flex border cursor-pointer px-3 text-sm leading-8 rounded-md hover:opacity-80 hover:shadow;
+}
+
 .btn-primary {
-  @apply select-none inline-flex border border-transparent cursor-pointer px-3 bg-green-600 text-sm leading-8 text-white rounded-md hover:opacity-80;
+  @apply btn-normal border-transparent bg-green-600 text-white;
+}
+
+.btn-danger {
+  @apply btn-normal border-red-600 bg-red-50 text-red-600;
 }
 
 .btn-text {
-  @apply select-none inline-flex border border-transparent cursor-pointer px-2 text-sm text-gray-600 leading-8 hover:opacity-80;
+  @apply btn-normal text-gray-600 border-none hover:shadow-none;
 }
 
 .input-text {

web/src/less/change-memo-created-ts-dialog.less

@@ -9,36 +9,8 @@
         @apply bg-gray-400 text-xs p-2 rounded-lg;
       }
 
-      > .form-label {
-        @apply flex flex-col justify-start items-start relative w-full leading-relaxed;
-
-        &.input-form-label {
-          @apply py-3 pb-1;
-
-          > input {
-            @apply w-full p-2 text-sm leading-6 rounded border border-gray-400 bg-transparent;
-          }
-        }
-      }
-
       > .btns-container {
         @apply flex flex-row justify-end items-center mt-2 w-full;
-
-        > .btn {
-          @apply text-sm px-4 py-2 rounded ml-2 bg-gray-400;
-
-          &:hover {
-            @apply opacity-80;
-          }
-
-          &.confirm-btn {
-            @apply bg-green-600 text-white shadow-inner;
-          }
-
-          &.cancel-btn {
-            background-color: unset;
-          }
-        }
       }
     }
   }

web/src/less/change-resource-filename-dialog.less

@@ -5,40 +5,8 @@
     > .dialog-content-container {
       @apply flex flex-col justify-start items-start;
 
-      > .tip-text {
-        @apply bg-gray-400 text-xs p-2 rounded-lg;
-      }
-
-      > .form-label {
-        @apply flex flex-col justify-start items-start relative w-full leading-relaxed;
-
-        &.input-form-label {
-          @apply py-3 pb-1;
-
-          > input {
-            @apply w-full p-2 text-sm leading-6 rounded border border-gray-400 bg-transparent;
-          }
-        }
-      }
-
       > .btns-container {
         @apply flex flex-row justify-end items-center mt-2 w-full;
-
-        > .btn {
-          @apply text-sm px-4 py-2 rounded ml-2 bg-gray-400;
-
-          &:hover {
-            @apply opacity-80;
-          }
-
-          &.confirm-btn {
-            @apply bg-green-600 text-white shadow-inner;
-          }
-
-          &.cancel-btn {
-            background-color: unset;
-          }
-        }
       }
     }
   }

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

@@ -3,10 +3,6 @@
     @apply w-full font-mono text-sm shadow-inner border py-2 px-3 rounded leading-6 break-all whitespace-pre-wrap;
   }
 
-  > .reset-btn {
-    @apply mt-2 py-1 px-2 text-sm shadow bg-red-50 border border-red-500 text-red-600 rounded cursor-pointer select-none hover:opacity-80;
-  }
-
   > .usage-guide-container {
     @apply flex flex-col justify-start items-start mt-2 w-full;