From bb0f461422197e382cd3223ba3a8b7d2f51fd80f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BC=9A=E9=A3=9E=E7=9A=84=E7=8C=AB?= <admin@hfdem.com>
Date: Wed, 25 Sep 2024 23:33:09 +0800
Subject: [PATCH] style: fix Copied button misalignment on mobile browsers
 (#382)

* style: fix Copied button misalignment on mobile browsers

* perf: enhance QR code clarity using QRCodeSVG (#381)

* build: update dependencies (#383)
---
 .../components/LinkDisplay/Style.module.css   | 79 +++++++++++--------
 client/src/components/LinkDisplay/index.tsx   | 27 ++++---
 2 files changed, 60 insertions(+), 46 deletions(-)

diff --git a/client/src/components/LinkDisplay/Style.module.css b/client/src/components/LinkDisplay/Style.module.css
index e5525ef..20d49ab 100644
--- a/client/src/components/LinkDisplay/Style.module.css
+++ b/client/src/components/LinkDisplay/Style.module.css
@@ -42,7 +42,7 @@
   border-width: 1px;
   font-family: inherit;
   font-size: 18px;
-  width: 110px;
+  width: 50px;
   height: 40px;
   border-radius: 5px;
   cursor: pointer;
@@ -123,47 +123,17 @@
   color: #aeaeae;
 }
 
-@media screen and (min-width: 640px) {
-  .fullWidth {
-    display: flex;
-    flex-flow: wrap;
-  }
-  .fullWidth > div {
-    flex: 1 auto;
-  }
-  .pinDisplay {
-    margin: 0;
-  }
-  .pinDisplayMsg {
-    width: 100%;
-    font-size: 18px;
-    padding-bottom: 20px;
-  }
-
-  .openLink {
-    width: 100%;
-    flex: 1 auto;
-  }
-
-  .divider {
-    margin: 30px 0;
-    border-top: 1px solid #434343;
-    width: 100%;
-  }
-}
-
 .qrCodeContainer {
   margin-top: 20px;
   display: flex;
   justify-content: center;
 }
 
-
 .qrButton {
   border-width: 1px;
   font-family: inherit;
   font-size: 18px;
-  width: 110px;
+  width: 50px;
   height: 40px;
   border-radius: 5px;
   cursor: pointer;
@@ -172,6 +142,7 @@
   background: #4bb2f9;
   color: white;
   margin-left: 5px;
+  transform: translateY(2px);
 }
 
 .qrButton:hover {
@@ -187,5 +158,47 @@
 .qrIcon {
   display: inline-block;
   margin-top: 0;
-  transform: translateY(2px);
+  transform: none;
+}
+
+@media screen and (min-width: 640px) {
+  .fullWidth {
+    display: flex;
+    flex-flow: wrap;
+  }
+  .fullWidth > div {
+    flex: 1 auto;
+  }
+  .pinDisplay {
+    margin: 0;
+  }
+  .pinDisplayMsg {
+    width: 100%;
+    font-size: 18px;
+    padding-bottom: 20px;
+  }
+
+  .openLink {
+    width: 100%;
+    flex: 1 auto;
+  }
+
+  .divider {
+    margin: 30px 0;
+    border-top: 1px solid #434343;
+    width: 100%;
+  }
+
+  .copyButton {
+    width: 100px;
+  }
+
+  .qrButton {
+    width: 100px;
+    transform: none;
+  }
+
+  .qrIcon {
+    transform: translateY(2px);
+  }
 }
diff --git a/client/src/components/LinkDisplay/index.tsx b/client/src/components/LinkDisplay/index.tsx
index 14a9707..79b7c4c 100644
--- a/client/src/components/LinkDisplay/index.tsx
+++ b/client/src/components/LinkDisplay/index.tsx
@@ -1,9 +1,11 @@
-import React, { useRef, useState, useContext, useCallback } from "react";
-import { FiLink, FiCopy, FiExternalLink, FiArrowDown, FiArrowUp } from "react-icons/fi";
+import React, { useRef, useState, useContext, useEffect } from "react";
+import { FiLink, FiCopy, FiExternalLink } from "react-icons/fi";
+import { MdOutlineQrCode } from "react-icons/md";
 import styles from "./Style.module.css";
 import { ThemeContext } from "../../ThemeContext";
 import { LinkObjType } from "@chat-e2ee/service";
-import { QRCodeSVG } from 'qrcode.react';
+import { QRCodeSVG } from "qrcode.react";
+import detectMobile from "../../utils/detectMobile";
 
 const LinkDisplay: React.FC<{ content: LinkObjType }> = ({ content }) => {
   const chatLink =
@@ -14,6 +16,11 @@ const LinkDisplay: React.FC<{ content: LinkObjType }> = ({ content }) => {
   const [buttonText, setButtonText] = useState("Copy");
   const [showQR, setShowQR] = useState(false);
   const [darkMode] = useContext(ThemeContext);
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    setIsMobile(detectMobile());
+  }, []);
 
   const copyCodeToClipboard = useCallback(() => {
     if (textAreaRef.current) {
@@ -61,22 +68,16 @@ const LinkDisplay: React.FC<{ content: LinkObjType }> = ({ content }) => {
             ${!darkMode && styles.lightModeButton}`}
             onClick={copyCodeToClipboard}
           >
-            <FiCopy className={styles.copyIcon} /> {buttonText}
+            <FiCopy className={styles.copyIcon} /> {!isMobile && buttonText}
           </button>
           <button
             type="button"
             className={`${styles.qrButton} ${!darkMode && styles.lightModeButton}`}
             onClick={() => setShowQR(!showQR)}
           >
-            {showQR ? (
-              <div className={styles.QrCodeContent}>
-                QR Code <FiArrowUp className={styles.qrIcon} />
-              </div>
-            ) : (
-              <div className={styles.QrCodeContent}>
-                QR Code <FiArrowDown className={styles.qrIcon} />
-              </div>
-            )}
+            <div className={styles.QrCodeContent}>
+              <MdOutlineQrCode className={styles.qrIcon} /> {!isMobile && "QR Code"}
+            </div>
           </button>
         </div>
       </div>