chore: update memo share dialog

web/package.json

@@ -26,15 +26,14 @@
     "lodash-es": "^4.17.21",
     "long": "^5.2.3",
     "lucide-react": "^0.263.1",
-    "nice-grpc-web": "^3.3.1",
+    "nice-grpc-web": "^3.3.2",
     "protobufjs": "^7.2.5",
-    "qrcode.react": "^3.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hot-toast": "^2.4.1",
     "react-i18next": "^11.18.6",
     "react-redux": "^8.1.3",
-    "react-router-dom": "^6.16.0",
+    "react-router-dom": "^6.17.0",
     "react-use": "^17.4.0",
     "semver": "^7.5.4",
     "tailwindcss": "^3.3.3",
@@ -43,30 +42,30 @@
     "zustand": "4.4.1"
   },
   "devDependencies": {
-    "@bufbuild/buf": "^1.27.0",
+    "@bufbuild/buf": "^1.27.1",
     "@trivago/prettier-plugin-sort-imports": "^3.4.0",
-    "@types/katex": "^0.16.3",
+    "@types/katex": "^0.16.5",
-    "@types/lodash-es": "^4.17.9",
+    "@types/lodash-es": "^4.17.10",
-    "@types/node": "^18.18.5",
+    "@types/node": "^18.18.6",
-    "@types/qs": "^6.9.8",
+    "@types/qs": "^6.9.9",
-    "@types/react": "^18.2.28",
+    "@types/react": "^18.2.31",
-    "@types/react-dom": "^18.2.13",
+    "@types/react-dom": "^18.2.14",
-    "@types/semver": "^7.5.3",
+    "@types/semver": "^7.5.4",
-    "@types/textarea-caret": "^3.0.1",
+    "@types/textarea-caret": "^3.0.2",
-    "@types/uuid": "^9.0.5",
+    "@types/uuid": "^9.0.6",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
     "@vitejs/plugin-react-swc": "^3.4.0",
     "autoprefixer": "^10.4.16",
-    "eslint": "^8.51.0",
+    "eslint": "^8.52.0",
     "eslint-config-prettier": "^8.10.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.33.2",
     "less": "^4.2.0",
     "postcss": "^8.4.31",
     "prettier": "2.6.2",
-    "terser": "^5.21.0",
+    "terser": "^5.22.0",
     "typescript": "^5.2.2",
-    "vite": "^4.4.11"
+    "vite": "^4.5.0"
   }
 }

web/src/components/ShareMemoDialog.tsx

@@ -1,6 +1,5 @@
 import { Button } from "@mui/joy";
 import copy from "copy-to-clipboard";
-import { QRCodeSVG } from "qrcode.react";
 import React, { useEffect, useRef } from "react";
 import { toast } from "react-hot-toast";
 import { getDateTimeString } from "@/helpers/datetime";
@@ -106,7 +105,7 @@ const ShareMemoDialog: React.FC<Props> = (props: Props) => {
             {t("common.link")}
           </Button>
         </div>
-        <div className="w-full rounded-lg border-t overflow-clip">
+        <div className="w-full border-t dark:border-zinc-700 overflow-clip">
           <div
             className="w-full h-auto select-none relative flex flex-col justify-start items-start bg-white dark:bg-zinc-800"
             ref={memoElRef}
@@ -117,17 +116,15 @@ const ShareMemoDialog: React.FC<Props> = (props: Props) => {
               <MemoResourceListView className="!grid-cols-2" resourceList={memo.resourceList} />
             </div>
             <div className="flex flex-row justify-between items-center w-full bg-gray-100 dark:bg-zinc-700 py-4 px-6">
-              <UserAvatar className="mr-2" avatarUrl={user.avatarUrl} />
+              <div className="flex flex-row justify-start items-center">
-              <div className="w-auto grow truncate flex mr-2 flex-col justify-center items-start">
+                <UserAvatar className="mr-2" avatarUrl={user.avatarUrl} />
-                <span className="w-full text truncate font-medium text-gray-600 dark:text-gray-300">{user.nickname || user.username}</span>
+                <div className="w-auto grow truncate flex mr-2 flex-col justify-center items-start">
+                  <span className="w-full text truncate font-medium text-gray-600 dark:text-gray-300">
+                    {user.nickname || user.username}
+                  </span>
+                </div>
               </div>
-              <QRCodeSVG
+              <span className="text-gray-500 dark:text-gray-400">via memos</span>
-                value={`${window.location.origin}/m/${memo.id}`}
-                size={28}
-                bgColor={"#F3F4F6"}
-                fgColor={"#4B5563"}
-                includeMargin={false}
-              />
             </div>
           </div>
         </div>