chore: cleanup less files

web/src/components/MemoFilter.tsx

@@ -4,7 +4,6 @@ import { getDateString } from "@/helpers/datetime";
 import { useFilterStore } from "@/store/module";
 import { useTranslate } from "@/utils/i18n";
 import Icon from "./Icon";
-import "@/less/memo-filter.less";
 
 const MemoFilter = () => {
   const t = useTranslate();
@@ -19,34 +18,44 @@ const MemoFilter = () => {
   }, [location]);
 
   return (
-    <div className={`filter-query-container ${showFilter ? "" : "!hidden"}`}>
+    <div
+      className={`flex flex-row justify-start items-start w-full flex-wrap px-2 pb-2 text-sm font-mono leading-7 dark:text-gray-300 ${
+        showFilter ? "" : "!hidden"
+      }`}
+    >
       <span className="mx-2 text-gray-400">{t("common.filter")}:</span>
       <div
-        className={"filter-item-container " + (tagQuery ? "" : "!hidden")}
+        className={
+          "max-w-xs flex flex-row justify-start items-center px-2 mr-2 cursor-pointer dark:text-gray-300 bg-gray-200 dark:bg-zinc-700 rounded whitespace-nowrap truncate hover:line-through " +
+          (tagQuery ? "" : "!hidden")
+        }
         onClick={() => {
           filterStore.setTagFilter(undefined);
         }}
       >
-        <Icon.Tag className="icon-text" /> {tagQuery}
+        <Icon.Tag className="w-4 h-auto mr-1 text-gray-500 dark:text-gray-400" /> {tagQuery}
         <Icon.X className="w-4 h-auto ml-1 opacity-40" />
       </div>
       <div
-        className={"filter-item-container " + (visibility ? "" : "!hidden")}
+        className={
+          "max-w-xs flex flex-row justify-start items-center px-2 mr-2 cursor-pointer dark:text-gray-300 bg-gray-200 dark:bg-zinc-700 rounded whitespace-nowrap truncate hover:line-through " +
+          (visibility ? "" : "!hidden")
+        }
         onClick={() => {
           filterStore.setMemoVisibilityFilter(undefined);
         }}
       >
-        <Icon.Eye className="icon-text" /> {visibility}
+        <Icon.Eye className="w-4 h-auto mr-1 text-gray-500 dark:text-gray-400" /> {visibility}
         <Icon.X className="w-4 h-auto ml-1 opacity-40" />
       </div>
       {duration && duration.from < duration.to ? (
         <div
-          className="filter-item-container"
+          className="max-w-xs flex flex-row justify-start items-center px-2 mr-2 cursor-pointer dark:text-gray-300 bg-gray-200 dark:bg-zinc-700 rounded whitespace-nowrap truncate hover:line-through"
           onClick={() => {
             filterStore.setFromAndToFilter();
           }}
         >
-          <Icon.Calendar className="icon-text" />
+          <Icon.Calendar className="w-4 h-auto mr-1 text-gray-500 dark:text-gray-400" />
           {t("common.filter-period", {
             from: getDateString(duration.from),
             to: getDateString(duration.to),
@@ -56,12 +65,15 @@ const MemoFilter = () => {
         </div>
       ) : null}
       <div
-        className={"filter-item-container " + (textQuery ? "" : "!hidden")}
+        className={
+          "max-w-xs flex flex-row justify-start items-center px-2 mr-2 cursor-pointer dark:text-gray-300 bg-gray-200 dark:bg-zinc-700 rounded whitespace-nowrap truncate hover:line-through " +
+          (textQuery ? "" : "!hidden")
+        }
         onClick={() => {
           filterStore.setTextFilter(undefined);
         }}
       >
-        <Icon.Search className="icon-text" /> {textQuery}
+        <Icon.Search className="w-4 h-auto mr-1 text-gray-500 dark:text-gray-400" /> {textQuery}
         <Icon.X className="w-4 h-auto ml-1 opacity-40" />
       </div>
     </div>

web/src/components/MemoList.tsx

@@ -9,7 +9,6 @@ import { useFilterStore, useMemoStore } from "@/store/module";
 import { useTranslate } from "@/utils/i18n";
 import Empty from "./Empty";
 import Memo from "./Memo";
-import "@/less/memo-list.less";
 
 const MemoList: React.FC = () => {
   const t = useTranslate();
@@ -131,17 +130,17 @@ const MemoList: React.FC = () => {
   };
 
   return (
-    <div className="memo-list-container">
+    <div className="flex flex-col justify-start items-start w-full max-w-full overflow-y-scroll pb-28 hide-scrollbar">
       {sortedMemos.map((memo) => (
         <Memo key={`${memo.id}-${memo.displayTs}`} memo={memo} lazyRendering showVisibility />
       ))}
       {isFetching ? (
-        <div className="status-text-container fetching-tip">
+        <div className="flex flex-col justify-start items-center w-full mt-2 mb-1">
-          <p className="status-text">{t("memo.fetching-data")}</p>
+          <p className="text-sm text-gray-400 italic">{t("memo.fetching-data")}</p>
         </div>
       ) : (
-        <div className="status-text-container">
+        <div className="flex flex-col justify-start items-center w-full my-6">
-          <div className="status-text">
+          <div className="text-sm text-gray-400 italic">
             {isComplete ? (
               sortedMemos.length === 0 && (
                 <div className="w-full mt-12 mb-8 flex flex-col justify-center items-center italic">

web/src/components/MemoResourceListView.tsx

@@ -5,7 +5,6 @@ import { getResourceType, getResourceUrl } from "@/utils/resource";
 import MemoResource from "./MemoResource";
 import showPreviewImageDialog from "./PreviewImageDialog";
 import SquareDiv from "./kit/SquareDiv";
-import "@/less/memo-resources.less";
 
 interface Props {
   resourceList: Resource[];
@@ -77,14 +76,20 @@ const MemoResourceListView: React.FC<Props> = (props: Props) => {
           </div>
         ))}
 
-      <div className={`resource-wrapper ${className || ""}`}>
+      <div className={`w-full flex flex-col justify-start items-start ${className || ""}`}>
         {videoResourceList.length > 0 && (
-          <div className="images-wrapper">
+          <div className="w-full grid grid-cols-2 sm:grid-cols-3 gap-2 mt-2wrapper">
             {videoResourceList.map((resource) => {
               const url = getResourceUrl(resource);
               return (
-                <SquareDiv key={resource.id} className="memo-resource">
+                <SquareDiv key={resource.id} className="shadow rounded overflow-hidden hide-scrollbar">
-                  <video preload="metadata" crossOrigin="anonymous" src={absolutifyLink(url)} controls></video>
+                  <video
+                    className="cursor-pointer w-full h-full object-contain bg-zinc-100 dark:bg-zinc-800"
+                    preload="metadata"
+                    crossOrigin="anonymous"
+                    src={absolutifyLink(url)}
+                    controls
+                  ></video>
                 </SquareDiv>
               );
             })}

web/src/less/archived.less

@@ -1,11 +0,0 @@
-.archived-memo-page {
-  @apply w-full max-w-3xl min-h-full flex flex-col justify-start items-center pb-8 bg-zinc-100 dark:bg-zinc-800;
-
-  > .tip-text-container {
-    @apply w-full h-32 flex flex-col justify-center items-center;
-  }
-
-  > .archived-memos-container {
-    @apply w-full flex flex-col justify-start items-start;
-  }
-}

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

@@ -1,13 +0,0 @@
-.change-resource-filename-dialog {
-  > .dialog-container {
-    @apply w-72;
-
-    > .dialog-content-container {
-      @apply flex flex-col justify-start items-start;
-
-      > .btns-container {
-        @apply flex flex-row justify-end items-center mt-2 w-full;
-      }
-    }
-  }
-}

web/src/less/image.less

@@ -1,8 +0,0 @@
-.image-container {
-  @apply hide-scrollbar;
-  -webkit-tap-highlight-color: transparent;
-
-  > img {
-    @apply w-full h-auto;
-  }
-}

web/src/less/memo-content.less

@@ -105,27 +105,4 @@
       @apply my-1 dark:border-zinc-600;
     }
   }
-
-  > .expand-btn-container {
-    @apply w-full relative flex flex-row justify-start items-center z-1;
-    > .btn {
-      @apply flex flex-row justify-start items-center pl-2 pr-1 py-1 my-2 text-xs rounded-lg border bg-gray-100 dark:bg-zinc-600 border-gray-200 dark:border-zinc-600 shadow hover:opacity-90 cursor-pointer;
-
-      &.expand-btn {
-        > .icon-img {
-          @apply rotate-90;
-        }
-      }
-
-      &.fold-btn {
-        > .icon-img {
-          @apply -rotate-90;
-        }
-      }
-
-      > .icon-img {
-        @apply w-4 h-auto ml-1 transition-all;
-      }
-    }
-  }
 }

web/src/less/memo-filter.less

@@ -1,12 +0,0 @@
-.filter-query-container {
-  @apply flex flex-row justify-start items-start w-full flex-wrap px-2 pb-2 text-sm font-mono leading-7 dark:text-gray-300;
-
-  > .filter-item-container {
-    @apply flex flex-row justify-start items-center px-2 mr-2 cursor-pointer dark:text-gray-300 bg-gray-200 dark:bg-zinc-700 rounded whitespace-nowrap truncate hover:line-through;
-    max-width: 256px;
-
-    > .icon-text {
-      @apply w-4 h-auto mr-1 text-gray-500 dark:text-gray-400;
-    }
-  }
-}

web/src/less/memo-list.less

@@ -1,15 +0,0 @@
-.memo-list-container {
-  @apply flex flex-col justify-start items-start w-full max-w-full overflow-y-scroll pb-28 hide-scrollbar;
-
-  > .status-text-container {
-    @apply flex flex-col justify-start items-center w-full my-6;
-
-    &.fetching-tip {
-      @apply mt-2 mb-1;
-    }
-
-    > .status-text {
-      @apply text-sm text-gray-400 italic;
-    }
-  }
-}

web/src/less/memo-resources.less

@@ -1,19 +0,0 @@
-.resource-wrapper {
-  @apply w-full flex flex-col justify-start items-start;
-
-  > .images-wrapper {
-    @apply w-full grid grid-cols-2 sm:grid-cols-3 gap-2 mt-2;
-
-    > .memo-resource {
-      @apply shadow rounded overflow-hidden hide-scrollbar;
-
-      > img {
-        @apply cursor-pointer min-h-full w-auto min-w-full object-cover;
-      }
-
-      > video {
-        @apply cursor-pointer w-full h-full object-contain bg-zinc-100 dark:bg-zinc-800;
-      }
-    }
-  }
-}

web/src/less/resources-selector-dialog.less

@@ -1,51 +0,0 @@
-.resources-selector-dialog {
-  @apply px-4;
-
-  > .dialog-container {
-    @apply w-112 max-w-full mb-8;
-
-    > .dialog-content-container {
-      @apply flex flex-col justify-start items-start w-full;
-
-      > .loading-text-container {
-        @apply flex flex-col justify-center items-center w-full h-32;
-      }
-
-      > .resource-table-container {
-        @apply flex flex-col justify-start items-start w-full;
-
-        > .fields-container {
-          @apply px-2 py-2 w-full grid grid-cols-7 border-b dark:border-b-gray-500;
-
-          > .field-text {
-            @apply font-mono text-gray-400;
-          }
-        }
-
-        > .tip-text {
-          @apply w-full text-center text-base my-6 mt-8;
-        }
-
-        > .resource-container {
-          @apply px-2 py-2 w-full grid grid-cols-7 dark:bg-zinc-700;
-
-          > .buttons-container {
-            @apply w-full flex flex-row justify-end items-center;
-          }
-        }
-
-        .field-text {
-          @apply w-full truncate text-base pr-2 last:pr-0;
-
-          &.name-text {
-            @apply col-span-4;
-          }
-
-          &.type-text {
-            @apply col-span-2;
-          }
-        }
-      }
-    }
-  }
-}

web/src/pages/Archived.tsx

@@ -7,7 +7,6 @@ import MobileHeader from "@/components/MobileHeader";
 import useLoading from "@/hooks/useLoading";
 import { useFilterStore, useMemoStore } from "@/store/module";
 import { useTranslate } from "@/utils/i18n";
-import "@/less/archived.less";
 
 const Archived = () => {
   const t = useTranslate();
@@ -38,25 +37,23 @@ const Archived = () => {
   return (
     <section className="w-full max-w-3xl min-h-full flex flex-col justify-start items-start px-4 sm:px-2 sm:pt-4 pb-8 bg-zinc-100 dark:bg-zinc-800">
       <MobileHeader showSearch={false} />
-      <div className="archived-memo-page">
+      <MemoFilter />
-        <MemoFilter />
+      {loadingState.isLoading ? (
-        {loadingState.isLoading ? (
+        <div className="w-full h-32 flex flex-col justify-center items-center">
-          <div className="tip-text-container">
+          <p className="opacity-70">{t("memo.fetching-data")}</p>
-            <p className="tip-text">{t("memo.fetching-data")}</p>
+        </div>
-          </div>
+      ) : archivedMemos.length === 0 ? (
-        ) : archivedMemos.length === 0 ? (
+        <div className="w-full mt-16 mb-8 flex flex-col justify-center items-center italic">
-          <div className="w-full mt-16 mb-8 flex flex-col justify-center items-center italic">
+          <Empty />
-            <Empty />
+          <p className="mt-4 text-gray-600 dark:text-gray-400">{t("message.no-data")}</p>
-            <p className="mt-4 text-gray-600 dark:text-gray-400">{t("message.no-data")}</p>
+        </div>
-          </div>
+      ) : (
-        ) : (
+        <div className="w-full flex flex-col justify-start items-start">
-          <div className="archived-memos-container">
+          {archivedMemos.map((memo) => (
-            {archivedMemos.map((memo) => (
+            <ArchivedMemo key={`${memo.id}-${memo.updatedTs}`} memo={memo} />
-              <ArchivedMemo key={`${memo.id}-${memo.updatedTs}`} memo={memo} />
+          ))}
-            ))}
+        </div>
-          </div>
+      )}
-        )}
-      </div>
     </section>
   );
 };