QR: update UI and styles

src/assets/locals/ar.json

@@ -449,6 +449,9 @@
     "cancel": "إلغاء",
     "done": "تم",
     "inviteEveryonePayingWithYou": "دع الجميع يدفعوا معك",
-    "includesAllOfTaxesCharges": "يشمل جميع الضرائب والرسوم"
+    "includesAllOfTaxesCharges": "يشمل جميع الضرائب والرسوم",
+    "shareLink": "شارك الرابط",
+    "shareLinkDescription": "يمكن للأصدقاء مسح الكود الباري أو استخدام الرابط لعرض الفاتورة ودفع نصيبهم بأمان من هاتفهم.",
+    "shareThisToSplitTheBill": "شارك هذا لتقسيم الفاتورة"
   }
 }

src/assets/locals/en.json

@@ -461,6 +461,9 @@
     "cancel": "Cancel",
     "done": "Done",
     "inviteEveryonePayingWithYou": "Invite everyone paying with you",
-    "includesAllOfTaxesCharges": "includes all of taxes charges"
+    "includesAllOfTaxesCharges": "includes all of taxes charges",
+    "shareLink": "Share Link",
+    "shareLinkDescription": "Your friends can scan the QR code or use the link to view the bill and pay their share securely from their phone.",
+    "shareThisToSplitTheBill": "Share this to split the bill"
   }
 }

src/components/Icons/UploadIcon.tsx

@@ -0,0 +1,27 @@
+interface UploadIconType {
+  className?: string;
+  onClick?: () => void;
+}
+
+const UploadIcon = ({ className, onClick }: UploadIconType) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      onClick={onClick}
+    >
+      <path
+        d="M12 6V13.8M12 6L14.5 8.4M12 6L9.5 8.4M7 12V16.8C7 17.1183 7.1317 17.4235 7.36612 17.6485C7.60054 17.8736 7.91848 18 8.25 18H15.75C16.0815 18 16.3995 17.8736 16.6339 17.6485C16.8683 17.4235 17 17.1183 17 16.8V12"
+        stroke="black"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default UploadIcon;

src/index.css

@@ -47,7 +47,7 @@
   --secondary-foreground: #ffffff;
   --border: #363636;
   --text-color: #000;
-  --text-color-gray: #5f6c7b; /* rgba(67, 78, 92, 1); */
+  --text-color-gray: #777580; /* rgba(67, 78, 92, 1); */
 }
 
 html,

src/pages/pay/components/splitBill/QRBottomSheet.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from "react-i18next";
 
 import ProText from "components/ProText";
 import QRIcon from "components/Icons/QRIcon";
+import UploadIcon from "components/Icons/UploadIcon";
 
 interface QRBottomSheetProps {
   isOpen: boolean;
@@ -12,10 +13,7 @@ interface QRBottomSheetProps {
   onSave?: (value: string) => void;
 }
 
-export function QRBottomSheet({
+export function QRBottomSheet({ isOpen, onClose }: QRBottomSheetProps) {
-  isOpen,
-  onClose,
-}: QRBottomSheetProps) {
   const { t } = useTranslation();
   const [qrCode, setQRCode] = useState("");
 
@@ -34,8 +32,8 @@ export function QRBottomSheet({
       title={t("splitBill.payWithQR")}
       showCloseButton={true}
       initialSnap={1}
-      height={430}
+      height={590}
-      snapPoints={[430]}
+      snapPoints={[590]}
       contentStyle={{
         padding: 0,
       }}
@@ -48,23 +46,45 @@ export function QRBottomSheet({
           gap: 20,
         }}
       >
-        <ProText
+        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
-          style={{
+          <ProText
-            fontWeight: 400,
+            style={{
-            fontStyle: "Regular",
+              fontWeight: 600,
-            fontSize: 16,
+              fontStyle: "SemiBold",
-            lineHeight: "140%",
+              fontSize: 20,
-            letterSpacing: "0%",
+              lineHeight: "140%",
-          }}
+              letterSpacing: "0%",
-        >
+            }}
-          {t("splitBill.inviteEveryonePayingWithYou")}
+          >
-        </ProText>
+            {t("splitBill.shareThisToSplitTheBill")}
+          </ProText>
+          <ProText
+            style={{
+              fontWeight: 400,
+              fontStyle: "Regular",
+              fontSize: 14,
+              lineHeight: "140%",
+              letterSpacing: "0%",
+              color: "var(--text-color-gray)",
+            }}
+          >
+            {t("splitBill.shareLinkDescription")}
+          </ProText>
+        </div>
+
         <div
           style={{
             display: "flex",
             flexDirection: "column",
-            gap: 12,
             alignItems: "center",
+            height: 276,
+            borderRadius: 16,
+            gap: 40,
+            paddingTop: 40,
+            paddingRight: 24,
+            paddingBottom: 40,
+            paddingLeft: 24,
+            backgroundColor: "var(--background)",
           }}
         >
           <QRIcon />
@@ -82,8 +102,10 @@ export function QRBottomSheet({
               paddingLeft: 32,
             }}
             onClick={handleCopyQRCode}
+            icon={<UploadIcon />}
+            iconPlacement="end"
           >
-            {t("splitBill.copyQRCode")}
+            {t("splitBill.shareLink")}
           </Button>
         </div>
       </div>
@@ -98,10 +120,8 @@ export function QRBottomSheet({
         <Button
           style={{
             flex: 1,
-            backgroundColor: "#FEEDED",
-            color: "#DD4143",
             boxShadow: "none",
-            border: "none",
+            border: "1px solid #C0BFC4",
           }}
           onClick={onClose}
         >