style: fix Copied button misalignment on mobile browsers (muke1908#382)

* style: fix Copied button misalignment on mobile browsers * perf: enhance QR code clarity using QRCodeSVG (muke1908#381) * build: update dependencies (muke1908#383)
hfdem · Sep 26, 2024 · bb0f461 · bb0f461
1 parent 7b13443
commit bb0f461
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 46 deletions.
diff --git 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
@@ -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>