Chore: update app detail panel (#13337)

web/app/components/base/content-dialog/index.tsx

@@ -0,0 +1,59 @@
+import { Fragment, type ReactNode } from 'react'
+import { Transition } from '@headlessui/react'
+import classNames from '@/utils/classnames'
+
+type ContentDialogProps = {
+  className?: string
+  show: boolean
+  onClose?: () => void
+  children: ReactNode
+}
+
+const ContentDialog = ({
+  className,
+  show,
+  onClose,
+  children,
+}: ContentDialogProps) => {
+  return (
+    <Transition
+      show={show}
+      as="div"
+      className="absolute left-0 top-0 w-full h-full z-20 p-2 box-border"
+    >
+      <Transition.Child
+        as={Fragment}
+        enter="ease-out duration-300"
+        enterFrom="opacity-0"
+        enterTo="opacity-100"
+        leave="ease-in duration-200"
+        leaveFrom="opacity-100"
+        leaveTo="opacity-0"
+      >
+        <div
+          className="absolute left-0 inset-0 w-full bg-app-detail-overlay-bg"
+          onClick={onClose}
+        />
+      </Transition.Child>
+
+      <Transition.Child
+        as={Fragment}
+        enter="transform transition ease-out duration-300"
+        enterFrom="-translate-x-full"
+        enterTo="translate-x-0"
+        leave="transform transition ease-in duration-200"
+        leaveFrom="translate-x-0"
+        leaveTo="-translate-x-full"
+      >
+        <div className={classNames(
+          'absolute left-0 w-full bg-app-detail-bg border-r border-divider-burn',
+          className,
+        )}>
+          {children}
+        </div>
+      </Transition.Child>
+    </Transition>
+  )
+}
+
+export default ContentDialog

web/app/components/base/copy-feedback/index.tsx

@@ -35,7 +35,7 @@ const CopyFeedback = ({ content, className }: Props) => {
       }
     >
       <div
-        className={`w-8 h-8 cursor-pointer hover:bg-gray-100 rounded-lg ${
+        className={`w-8 h-8 cursor-pointer hover:bg-state-base-hover rounded-md ${
           className ?? ''
         }`}
       >

web/app/components/base/qrcode/index.tsx

@@ -1,7 +1,7 @@
 'use client'
 import React, { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import QRCode from 'qrcode.react'
+import { QRCodeSVG } from 'qrcode.react'
 import QrcodeStyle from './style.module.css'
 import Tooltip from '@/app/components/base/tooltip'
 
@@ -54,20 +54,20 @@ const ShareQRCode = ({ content, selectorId, className }: Props) => {
       popupContent={t(`${prefixEmbedded}`) || ''}
     >
       <div
-        className={`w-8 h-8 cursor-pointer rounded-lg ${className ?? ''}`}
+        className={`w-8 h-8 cursor-pointer rounded-lg relative ${className ?? ''}`}
         onClick={toggleQRCode}
       >
         <div className={`w-full h-full ${QrcodeStyle.QrcodeIcon} ${isShow ? QrcodeStyle.show : ''}`} />
         {isShow && (
           <div
             ref={qrCodeRef}
-            className={QrcodeStyle.qrcodeform}
+            className={`${QrcodeStyle.qrcodeform} !absolute right-0 top-0`}
             onClick={handlePanelClick}
           >
-            <QRCode size={160} value={content} className={QrcodeStyle.qrcodeimage}/>
+            <QRCodeSVG size={160} value={content} className={QrcodeStyle.qrcodeimage}/>
             <div className={QrcodeStyle.text}>
-              <div className={`text-gray-500 ${QrcodeStyle.scan}`}>{t('appOverview.overview.appInfo.qrcode.scan')}</div>
-              <div className={`text-gray-500 ${QrcodeStyle.scan}`}>·</div>
+              <div className={`text-text-tertiary ${QrcodeStyle.scan}`}>{t('appOverview.overview.appInfo.qrcode.scan')}</div>
+              <div className={`text-text-tertiary ${QrcodeStyle.scan}`}>·</div>
               <div className={QrcodeStyle.download} onClick={downloadQR}>{t('appOverview.overview.appInfo.qrcode.download')}</div>
             </div>
           </div>