refactor: retire less

web/.prettierrc.js

@@ -4,5 +4,5 @@ module.exports = {
   semi: true,
   singleQuote: false,
   plugins: [require.resolve("@trivago/prettier-plugin-sort-imports")],
-  importOrder: ["<BUILTIN_MODULES>", "<THIRD_PARTY_MODULES>", "^@/((?!less).+)", "^[./]", "^(.+).less"],
+  importOrder: ["<BUILTIN_MODULES>", "<THIRD_PARTY_MODULES>", "^[./]", "^(.+).css"],
 };

web/package.json

@@ -73,7 +73,6 @@
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react": "^7.37.3",
-    "less": "^4.2.2",
     "long": "^5.2.3",
     "nice-grpc-web": "^3.3.5",
     "postcss": "^8.4.49",

web/pnpm-lock.yaml

@@ -195,9 +195,6 @@ importers:
       eslint-plugin-react:
         specifier: ^7.37.3
         version: 7.37.3(eslint@8.57.1)
-      less:
-        specifier: ^4.2.2
-        version: 4.2.2
       long:
         specifier: ^5.2.3
         version: 5.2.3
@@ -5074,6 +5071,7 @@ snapshots:
   copy-anything@2.0.6:
     dependencies:
       is-what: 3.14.1
+    optional: true
 
   copy-to-clipboard@3.3.3:
     dependencies:
@@ -6020,7 +6018,8 @@ snapshots:
       call-bound: 1.0.3
       get-intrinsic: 1.2.6
 
-  is-what@3.14.1: {}
+  is-what@3.14.1:
+    optional: true
 
   isarray@2.0.5: {}
 
@@ -6130,6 +6129,7 @@ snapshots:
       mime: 1.6.0
       needle: 3.3.1
       source-map: 0.6.1
+    optional: true
 
   levn@0.4.1:
     dependencies:
@@ -6380,7 +6380,8 @@ snapshots:
       json-parse-even-better-errors: 2.3.1
       lines-and-columns: 1.2.4
 
-  parse-node-version@1.0.1: {}
+  parse-node-version@1.0.1:
+    optional: true
 
   path-data-parser@0.1.0: {}
 

web/src/components/ChangeMemberPasswordDialog.tsx

@@ -64,16 +64,16 @@ const ChangeMemberPasswordDialog: React.FC<Props> = (props: Props) => {
   };
 
   return (
-    <>
-      <div className="dialog-header-container !w-64">
-        <p className="title-text">
+    <div className="max-w-full shadow flex flex-col justify-start items-start bg-white dark:bg-zinc-800 dark:text-gray-300 p-4 rounded-lg">
+      <div className="flex flex-row justify-between items-center mb-4 gap-2 w-full">
+        <p>
           {t("setting.account-section.change-password")} ({user.nickname})
         </p>
         <Button size="sm" variant="plain" onClick={handleCloseBtnClick}>
           <XIcon className="w-5 h-auto" />
         </Button>
       </div>
-      <div className="dialog-content-container">
+      <div className="flex flex-col justify-start items-start !w-80">
         <p className="text-sm mb-1">{t("auth.new-password")}</p>
         <Input
           className="w-full"
@@ -99,7 +99,7 @@ const ChangeMemberPasswordDialog: React.FC<Props> = (props: Props) => {
           </Button>
         </div>
       </div>
-    </>
+    </div>
   );
 };
 

web/src/components/CreateAccessTokenDialog.tsx

@@ -84,14 +84,14 @@ const CreateAccessTokenDialog: React.FC<Props> = (props: Props) => {
   };
 
   return (
-    <>
-      <div className="dialog-header-container">
-        <p className="title-text">{t("setting.access-token-section.create-dialog.create-access-token")}</p>
+    <div className="max-w-full shadow flex flex-col justify-start items-start bg-white dark:bg-zinc-800 dark:text-gray-300 p-4 rounded-lg">
+      <div className="flex flex-row justify-between items-center w-full mb-4 gap-2">
+        <p>{t("setting.access-token-section.create-dialog.create-access-token")}</p>
         <Button size="sm" variant="plain" onClick={() => destroy()}>
           <XIcon className="w-5 h-auto" />
         </Button>
       </div>
-      <div className="dialog-content-container !w-80">
+      <div className="flex flex-col justify-start items-start !w-80">
         <div className="w-full flex flex-col justify-start items-start mb-3">
           <span className="mb-2">
             {t("setting.access-token-section.create-dialog.description")} <span className="text-red-600">*</span>
@@ -127,7 +127,7 @@ const CreateAccessTokenDialog: React.FC<Props> = (props: Props) => {
           </Button>
         </div>
       </div>
-    </>
+    </div>
   );
 };
 

web/src/components/CreateIdentityProviderDialog.tsx

@@ -242,14 +242,14 @@ const CreateIdentityProviderDialog: React.FC<Props> = (props: Props) => {
   };
 
   return (
-    <>
-      <div className="dialog-header-container">
+    <div className="max-w-full shadow flex flex-col justify-start items-start bg-white dark:bg-zinc-800 dark:text-gray-300 p-4 rounded-lg">
+      <div className="flex flex-row justify-between items-center mb-4 gap-2 w-full">
         <p>{t(isCreating ? "setting.sso-section.create-sso" : "setting.sso-section.update-sso")}</p>
         <Button size="sm" variant="plain" onClick={handleCloseBtnClick}>
           <XIcon className="w-5 h-auto" />
         </Button>
       </div>
-      <div className="dialog-content-container min-w-[19rem]">
+      <div className="flex flex-col justify-start items-start w-80">
         {isCreating && (
           <>
             <Typography className="!mb-1" level="body-md">
@@ -429,7 +429,7 @@ const CreateIdentityProviderDialog: React.FC<Props> = (props: Props) => {
           </Button>
         </div>
       </div>
-    </>
+    </div>
   );
 };
 

web/src/components/CreateShortcutDialog.tsx

@@ -62,14 +62,14 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
   };
 
   return (
-    <>
-      <div className="dialog-header-container">
+    <div className="max-w-full shadow flex flex-col justify-start items-start bg-white dark:bg-zinc-800 dark:text-gray-300 p-4 rounded-lg">
+      <div className="flex flex-row justify-between items-center mb-4 gap-2 w-full">
         <p className="title-text">{`${isCreating ? t("common.create") : t("common.edit")} ${t("common.shortcuts")}`}</p>
         <Button size="sm" variant="plain" onClick={() => destroy()}>
           <XIcon className="w-5 h-auto" />
         </Button>
       </div>
-      <div className="dialog-content-container max-w-md min-w-72">
+      <div className="flex flex-col justify-start items-start max-w-md min-w-72">
         <div className="w-full flex flex-col justify-start items-start mb-3">
           <span className="text-sm whitespace-nowrap mb-1">{t("common.title")}</span>
           <Input className="w-full" type="text" placeholder="" value={shortcut.title} onChange={onShortcutTitleChange} />
@@ -116,7 +116,7 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
           </Button>
         </div>
       </div>
-    </>
+    </div>
   );
 };
 

web/src/components/CreateWebhookDialog.tsx

@@ -93,8 +93,8 @@ const CreateWebhookDialog: React.FC<Props> = (props: Props) => {
   };
 
   return (
-    <>
-      <div className="dialog-header-container">
+    <div className="max-w-full shadow flex flex-col justify-start items-start bg-white dark:bg-zinc-800 dark:text-gray-300 p-4 rounded-lg">
+      <div className="flex flex-row justify-between items-center mb-4 gap-2 w-full">
         <p className="title-text">
           {isCreating ? t("setting.webhook-section.create-dialog.create-webhook") : t("setting.webhook-section.create-dialog.edit-webhook")}
         </p>
@@ -102,7 +102,7 @@ const CreateWebhookDialog: React.FC<Props> = (props: Props) => {
           <XIcon className="w-5 h-auto" />
         </Button>
       </div>
-      <div className="dialog-content-container !w-80">
+      <div className="flex flex-col justify-start items-start !w-80">
         <div className="w-full flex flex-col justify-start items-start mb-3">
           <span className="mb-2">
             {t("setting.webhook-section.create-dialog.title")} <span className="text-red-600">*</span>
@@ -140,7 +140,7 @@ const CreateWebhookDialog: React.FC<Props> = (props: Props) => {
           </Button>
         </div>
       </div>
-    </>
+    </div>
   );
 };
 

web/src/components/Dialog/BaseDialog.tsx

@@ -5,7 +5,6 @@ import { createRoot } from "react-dom/client";
 import dialogStore from "@/store/v2/dialog";
 import theme from "@/theme";
 import { cn } from "@/utils";
-import "@/less/base-dialog.less";
 
 interface DialogConfig {
   dialogName: string;
@@ -53,8 +52,14 @@ const BaseDialog = observer((props: Props) => {
   };
 
   return (
-    <div className={cn("dialog-wrapper", className)} onMouseDown={handleSpaceClicked}>
-      <div ref={dialogContainerRef} className={cn("dialog-container")} onMouseDown={(e) => e.stopPropagation()}>
+    <div
+      className={cn(
+        "fixed top-0 left-0 flex flex-col justify-start items-center w-full h-full pt-16 pb-8 px-4 z-1000 overflow-x-hidden overflow-y-scroll bg-transparent transition-all hide-scrollbar bg-black bg-opacity-60",
+        className,
+      )}
+      onMouseDown={handleSpaceClicked}
+    >
+      <div ref={dialogContainerRef} onMouseDown={(e) => e.stopPropagation()}>
         {children}
       </div>
     </div>

web/src/components/PreviewImageDialog.tsx

+import { Button } from "@usememos/mui";
 import { XIcon } from "lucide-react";
 import React, { useEffect, useState } from "react";
 import { generateDialog } from "./Dialog";
-import "@/less/preview-image-dialog.less";
 
 const MIN_SCALE = 0.5;
 const MAX_SCALE = 5;
@@ -154,13 +154,14 @@ const PreviewImageDialog: React.FC<Props> = ({ destroy, imgUrls, initialIndex }:
 
   return (
     <>
-      <div className="btns-container">
-        <button className="btn" onClick={handleCloseBtnClick}>
-          <XIcon className="icon-img" />
-        </button>
+      <div className="fixed top-8 right-8 flex flex-col justify-start items-center">
+        <Button onClick={handleCloseBtnClick}>
+          <XIcon className="w-6 h-auto" />
+        </Button>
       </div>
-      <div className="img-container" onClick={handleImgContainerClick}>
+      <div className="w-full h-full p-4 sm:p-20 flex flex-col justify-center items-center hide-scrollbar" onClick={handleImgContainerClick}>
         <img
+          className="h-auto w-auto max-w-full max-h-full shadow"
           style={imageComputedStyle}
           src={imgUrls[currentIndex]}
           onClick={(e) => e.stopPropagation()}
@@ -179,7 +180,7 @@ const PreviewImageDialog: React.FC<Props> = ({ destroy, imgUrls, initialIndex }:
 export default function showPreviewImageDialog(imgUrls: string[] | string, initialIndex?: number): void {
   generateDialog(
     {
-      className: "preview-image-dialog",
+      className: "preview-image-dialog p-0 z-[1001]",
       dialogName: "preview-image-dialog",
     },
     PreviewImageDialog,

web/src/components/RenameTagDialog.tsx

@@ -47,14 +47,14 @@ const RenameTagDialog: React.FC<Props> = (props: Props) => {
   };
 
   return (
-    <>
-      <div className="dialog-header-container">
+    <div className="max-w-full shadow flex flex-col justify-start items-start bg-white dark:bg-zinc-800 dark:text-gray-300 p-4 rounded-lg">
+      <div className="flex flex-row justify-between items-center mb-4 gap-2 w-full">
         <p className="title-text">{"Rename tag"}</p>
         <Button size="sm" variant="plain" onClick={() => destroy()}>
           <XIcon className="w-5 h-auto" />
         </Button>
       </div>
-      <div className="dialog-content-container max-w-xs">
+      <div className="flex flex-col justify-start items-start max-w-xs">
         <div className="w-full flex flex-col justify-start items-start mb-3">
           <div className="relative w-full mb-2 flex flex-row justify-start items-center space-x-2">
             <span className="w-20 text-sm whitespace-nowrap shrink-0 text-right">Old Name</span>
@@ -79,7 +79,7 @@ const RenameTagDialog: React.FC<Props> = (props: Props) => {
           </Button>
         </div>
       </div>
-    </>
+    </div>
   );
 };
 

web/src/components/UpdateAccountDialog.tsx

@@ -140,14 +140,14 @@ const UpdateAccountDialog = ({ destroy }: Props) => {
   };
 
   return (
-    <>
-      <div className="dialog-header-container !w-64">
+    <div className="max-w-full shadow flex flex-col justify-start items-start bg-white dark:bg-zinc-800 dark:text-gray-300 p-4 rounded-lg">
+      <div className="flex flex-row justify-between items-center mb-4 gap-2 w-full">
         <p className="title-text">{t("setting.account-section.update-information")}</p>
         <Button size="sm" variant="plain" onClick={handleCloseBtnClick}>
           <XIcon className="w-5 h-auto" />
         </Button>
       </div>
-      <div className="dialog-content-container space-y-2">
+      <div className="flex flex-col justify-start items-start !w-64 space-y-2">
         <div className="w-full flex flex-row justify-start items-center">
           <span className="text-sm mr-2">{t("common.avatar")}</span>
           <label className="relative cursor-pointer hover:opacity-80">
@@ -208,7 +208,7 @@ const UpdateAccountDialog = ({ destroy }: Props) => {
           </Button>
         </div>
       </div>
-    </>
+    </div>
   );
 };
 

web/src/components/UpdateCustomizedProfileDialog.tsx

@@ -97,14 +97,14 @@ const UpdateCustomizedProfileDialog = ({ destroy }: Props) => {
   };
 
   return (
-    <>
-      <div className="dialog-header-container">
+    <div className="max-w-full shadow flex flex-col justify-start items-start bg-white dark:bg-zinc-800 dark:text-gray-300 p-4 rounded-lg">
+      <div className="flex flex-row justify-between items-center mb-4 gap-2 w-full">
         <p className="title-text">{t("setting.system-section.customize-server.title")}</p>
         <Button size="sm" variant="plain" onClick={handleCloseButtonClick}>
           <XIcon className="w-5 h-auto" />
         </Button>
       </div>
-      <div className="dialog-content-container min-w-[16rem]">
+      <div className="flex flex-col justify-start items-start min-w-[16rem]">
         <p className="text-sm mb-1">{t("setting.system-section.server-name")}</p>
         <Input className="w-full" type="text" value={customProfile.title} onChange={handleNameChanged} />
         <p className="text-sm mb-1 mt-2">{t("setting.system-section.customize-server.icon-url")}</p>
@@ -131,7 +131,7 @@ const UpdateCustomizedProfileDialog = ({ destroy }: Props) => {
           </div>
         </div>
       </div>
-    </>
+    </div>
   );
 };
 

web/src/css/highlight.css

+html.dark {
+  @import "highlight.js/styles/atom-one-dark.css";
+}
+
+html:not(.dark) {
+  @import "highlight.js/styles/github.css";
+}

web/src/less/base-dialog.less

-.dialog-wrapper {
-  @apply fixed top-0 left-0 flex flex-col justify-start items-center w-full h-full pt-16 pb-8 px-4 z-1000 overflow-x-hidden overflow-y-scroll bg-transparent transition-all hide-scrollbar bg-black bg-opacity-60;
-
-  > .dialog-container {
-    @apply max-w-full shadow flex flex-col justify-start items-start bg-white dark:bg-zinc-800 dark:text-gray-300 p-4 rounded-lg;
-
-    > .dialog-header-container {
-      @apply flex flex-row justify-between items-center w-full mb-4;
-
-      > .title-text {
-        > .icon-text {
-          @apply mr-2 text-base dark:text-gray-300;
-        }
-      }
-
-      .btn {
-        @apply flex flex-col justify-center items-center w-6 h-6 rounded hover:bg-gray-100 dark:hover:bg-zinc-900 hover:shadow;
-      }
-    }
-
-    > .dialog-content-container {
-      @apply flex flex-col justify-start items-start w-full;
-    }
-
-    > .dialog-footer-container {
-      @apply flex flex-row justify-end items-center w-full mt-4;
-    }
-  }
-}

web/src/less/common-dialog.less

-.common-dialog {
-  > .dialog-container {
-    @apply w-80;
-
-    > .dialog-content-container {
-      @apply flex flex-col justify-start items-start;
-
-      > .btns-container {
-        @apply flex flex-row justify-end items-center w-full mt-4;
-
-        > .btn {
-          @apply text-sm py-1 px-3 mr-2 rounded-md hover:opacity-80 cursor-pointer;
-
-          &.confirm-btn {
-            @apply bg-red-100 border border-solid border-blue-600 text-blue-600;
-
-            &.warning {
-              @apply border-red-600 text-red-600;
-            }
-          }
-        }
-      }
-
-      > .content-text{
-        @apply whitespace-pre-wrap;
-      }
-    }
-  }
-}

web/src/less/highlight.less

-html.dark {
-  @import (less) "highlight.js/styles/atom-one-dark.css";
-}
-
-html:not(.dark) {
-  @import (less) "highlight.js/styles/github.css";
-}

web/src/less/preview-image-dialog.less

-.preview-image-dialog {
-  @apply p-0;
-  z-index: 1001;
-  background-color: rgba(0, 0, 0, 0.6);
-
-  > .dialog-container {
-    @apply flex flex-col justify-center items-center relative w-full h-full p-0;
-    background-color: unset;
-
-    > .btns-container {
-      @apply fixed top-8 right-8 flex flex-col justify-start items-center;
-
-      > .btn {
-        @apply mb-3 last:mb-0 w-8 h-8 p-1 cursor-pointer rounded opacity-90 bg-gray-300 dark:bg-zinc-600 z-10 shadow-md hover:opacity-70;
-
-        > .icon-img {
-          @apply w-6 h-auto;
-        }
-      }
-    }
-
-    > .img-container {
-      @apply w-full h-full p-4 sm:p-20 flex flex-col justify-center items-center hide-scrollbar;
-      background-color: unset;
-
-      > img {
-        @apply h-auto w-auto max-w-full max-h-full shadow;
-      }
-    }
-  }
-}

web/src/main.tsx

@@ -6,9 +6,9 @@ import { observer } from "mobx-react-lite";
 import { createRoot } from "react-dom/client";
 import { Toaster } from "react-hot-toast";
 import { RouterProvider } from "react-router-dom";
+import "./css/highlight.css";
 import "./css/tailwind.css";
 import "./i18n";
-import "./less/highlight.less";
 import router from "./router";
 import { initialUserStore } from "./store/v2/user";
 import { initialWorkspaceStore } from "./store/v2/workspace";