QR: update UI and styles

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({
-  isOpen,
-  onClose,
-}: QRBottomSheetProps) {
+export function QRBottomSheet({ 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}
-      snapPoints={[430]}
+      height={590}
+      snapPoints={[590]}
       contentStyle={{
         padding: 0,
       }}
@@ -48,23 +46,45 @@ export function QRBottomSheet({
           gap: 20,
         }}
       >
-        <ProText
-          style={{
-            fontWeight: 400,
-            fontStyle: "Regular",
-            fontSize: 16,
-            lineHeight: "140%",
-            letterSpacing: "0%",
-          }}
-        >
-          {t("splitBill.inviteEveryonePayingWithYou")}
-        </ProText>
+        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+          <ProText
+            style={{
+              fontWeight: 600,
+              fontStyle: "SemiBold",
+              fontSize: 20,
+              lineHeight: "140%",
+              letterSpacing: "0%",
+            }}
+          >
+            {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}
         >