chore: rename common to base component (#1279)

web/src/components/CreateShortcutDialog.tsx

@@ -7,7 +7,7 @@ import useLoading from "../hooks/useLoading";
 import Icon from "./Icon";
 import { generateDialog } from "./Dialog";
 import toastHelper from "./Toast";
-import Selector from "./common/Selector";
+import Selector from "./base/Selector";
 import "../less/create-shortcut-dialog.less";
 
 interface Props extends DialogProps {

web/src/components/DailyReviewDialog.tsx

@@ -7,7 +7,7 @@ import { DAILY_TIMESTAMP } from "../helpers/consts";
 import * as utils from "../helpers/utils";
 import Icon from "./Icon";
 import { generateDialog } from "./Dialog";
-import DatePicker from "./common/DatePicker";
+import DatePicker from "./base/DatePicker";
 import showPreviewImageDialog from "./PreviewImageDialog";
 import DailyMemo from "./DailyMemo";
 import "../less/daily-review-dialog.less";

web/src/components/MemoEditor.tsx

@@ -16,7 +16,7 @@ import {
 import * as storage from "../helpers/storage";
 import Icon from "./Icon";
 import toastHelper from "./Toast";
-import Selector from "./common/Selector";
+import Selector from "./base/Selector";
 import Editor, { EditorRefActions } from "./Editor/Editor";
 import ResourceIcon from "./ResourceIcon";
 import showResourcesSelectorDialog from "./ResourcesSelectorDialog";

web/src/components/MemoResources.tsx

@@ -1,6 +1,6 @@
 import { absolutifyLink } from "../helpers/utils";
 import { getResourceUrl } from "../utils/resource";
-import SquareDiv from "./common/SquareDiv";
+import SquareDiv from "./base/SquareDiv";
 import showPreviewImageDialog from "./PreviewImageDialog";
 import MemoResource from "./MemoResource";
 import "../less/memo-resources.less";

web/src/components/ResourcesDialog.tsx

@@ -7,7 +7,7 @@ import { useResourceStore } from "../store/module";
 import { getResourceUrl } from "../utils/resource";
 import Icon from "./Icon";
 import toastHelper from "./Toast";
-import Dropdown from "./common/Dropdown";
+import Dropdown from "./base/Dropdown";
 import { generateDialog } from "./Dialog";
 import { showCommonDialog } from "./Dialog/CommonDialog";
 import showPreviewImageDialog from "./PreviewImageDialog";

web/src/components/Settings/MemberSection.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from "react-i18next";
 import { useUserStore } from "../../store/module";
 import * as api from "../../helpers/api";
 import toastHelper from "../Toast";
-import Dropdown from "../common/Dropdown";
+import Dropdown from "../base/Dropdown";
 import { showCommonDialog } from "../Dialog/CommonDialog";
 import showChangeMemberPasswordDialog from "../ChangeMemberPasswordDialog";
 import "../../less/settings/member-section.less";

web/src/components/Settings/SSOSection.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import * as api from "../../helpers/api";
 import showCreateIdentityProviderDialog from "../CreateIdentityProviderDialog";
-import Dropdown from "../common/Dropdown";
+import Dropdown from "../base/Dropdown";
 import { showCommonDialog } from "../Dialog/CommonDialog";
 import toastHelper from "../Toast";
 

web/src/components/Settings/StorageSection.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from "react-i18next";
 import { useGlobalStore } from "../../store/module";
 import * as api from "../../helpers/api";
 import showCreateStorageServiceDialog from "../CreateStorageServiceDialog";
-import Dropdown from "../common/Dropdown";
+import Dropdown from "../base/Dropdown";
 import { showCommonDialog } from "../Dialog/CommonDialog";
 import toastHelper from "../Toast";
 

web/src/components/UsageHeatMap.tsx

@@ -98,15 +98,6 @@ const UsageHeatMap = () => {
 
   return (
     <div className="usage-heat-map-wrapper" ref={containerElRef}>
-      <div className="day-tip-text-container">
-        <span className="tip-text">{t("days.sun")}</span>
-        <span className="tip-text"></span>
-        <span className="tip-text">{t("days.tue")}</span>
-        <span className="tip-text"></span>
-        <span className="tip-text">{t("days.thu")}</span>
-        <span className="tip-text"></span>
-        <span className="tip-text">{t("days.sat")}</span>
-      </div>
       <div className="usage-heat-map">
         {allStat.map((v, i) => {
           const count = v.count;
@@ -139,10 +130,19 @@ const UsageHeatMap = () => {
         })}
         {nullCell.map((_, i) => (
           <div className="stat-wrapper" key={i}>
-            <span className="null"></span>
+            <span className="stat-container null"></span>
           </div>
         ))}
       </div>
+      <div className="day-tip-text-container">
+        <span className="tip-text">{t("days.sun")}</span>
+        <span className="tip-text"></span>
+        <span className="tip-text">{t("days.tue")}</span>
+        <span className="tip-text"></span>
+        <span className="tip-text">{t("days.thu")}</span>
+        <span className="tip-text"></span>
+        <span className="tip-text">{t("days.sat")}</span>
+      </div>
     </div>
   );
 };

web/src/components/UserBanner.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useUserStore } from "../store/module";
-import Dropdown from "./common/Dropdown";
+import Dropdown from "./base/Dropdown";
 import showAboutSiteDialog from "./AboutSiteDialog";
 import UserAvatar from "./UserAvatar";
 import showSettingDialog from "./SettingDialog";

web/src/components/base/README.md

@@ -0,0 +1 @@
+# Base components in memos

web/src/less/usage-heat-map.less

@@ -1,24 +1,9 @@
 .usage-heat-map-wrapper {
-  @apply flex flex-row justify-start items-center flex-nowrap w-full h-32 pr-2 pb-3 shrink-0;
+  @apply flex flex-row justify-start items-center flex-nowrap w-full h-32 pl-6 pb-3 shrink-0;
-
-  &:hover {
-    > .day-tip-text-container {
-      @apply visible;
-    }
-  }
-
-  > .day-tip-text-container {
-    @apply w-6 h-full grid grid-rows-7 invisible;
-
-    > .tip-text {
-      @apply pr-1 w-full h-full text-right font-mono text-gray-400;
-      font-size: 10px;
-    }
-  }
 
   > .usage-heat-map {
     @apply h-full grid grid-rows-7;
-    width: 186px;
+    width: 196px;
     grid-template-columns: repeat(11, 1fr);
     grid-auto-flow: column;
 
@@ -47,9 +32,22 @@
         &.today {
           @apply border border-black dark:border-gray-400;
         }
+
+        &.null {
+          @apply opacity-40;
+        }
       }
     }
   }
+
+  > .day-tip-text-container {
+    @apply w-6 h-full grid grid-rows-7;
+
+    > .tip-text {
+      @apply pl-1 w-full h-full text-right font-mono text-gray-400;
+      font-size: 10px;
+    }
+  }
 }
 
 .usage-detail-container {