From c5cc957c67aee121410f3494088bc5d06f412e0a Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Tue, 11 Jun 2024 15:58:29 -0700
Subject: [PATCH] start tweaking qr code

---
 src/components/StarterPack/QrCode.tsx       | 114 ++++++++++++++++++++
 src/components/StarterPack/QrCodeDialog.tsx |  42 +-------
 src/screens/StarterPack/Main/index.tsx      |   2 +-
 3 files changed, 120 insertions(+), 38 deletions(-)
 create mode 100644 src/components/StarterPack/QrCode.tsx

diff --git a/src/components/StarterPack/QrCode.tsx b/src/components/StarterPack/QrCode.tsx
new file mode 100644
index 0000000000..9ffbe68be2
--- /dev/null
+++ b/src/components/StarterPack/QrCode.tsx
@@ -0,0 +1,114 @@
+import React from 'react'
+import {View} from 'react-native'
+import QRCode from 'react-native-qrcode-styled'
+import ViewShot from 'react-native-view-shot'
+import {LinearGradient} from 'expo-linear-gradient'
+import {AppBskyGraphDefs, AppBskyGraphStarterpack} from '@atproto/api'
+import {Trans} from '@lingui/macro'
+
+import {Logo} from 'view/icons/Logo'
+import {Logotype} from 'view/icons/Logotype'
+import {useTheme} from '#/alf'
+import {atoms as a} from '#/alf'
+import {Text} from '#/components/Typography'
+
+export function QrCode({
+  starterPack,
+}: {
+  starterPack: AppBskyGraphDefs.StarterPackView
+}) {
+  const t = useTheme()
+  const {record} = starterPack
+
+  const gradient =
+    t.name === 'light'
+      ? [t.palette.primary_500, t.palette.primary_300]
+      : [t.palette.primary_600, t.palette.primary_400]
+
+  if (!AppBskyGraphStarterpack.isRecord(record)) {
+    return null
+  }
+
+  return (
+    <ViewShot>
+      <LinearGradient
+        colors={gradient}
+        style={[
+          a.flex_1,
+          a.align_center,
+          a.flex_row,
+          a.gap_sm,
+          a.py_2xl,
+          a.rounded_sm,
+          a.px_sm,
+        ]}>
+        <View style={[a.gap_5xl, a.align_center, {width: '60%'}]}>
+          <Text
+            style={[a.font_bold, a.text_xl, a.text_center, {color: 'white'}]}>
+            <Trans>Join the conversation</Trans>
+          </Text>
+          <Text
+            style={[a.font_bold, a.text_4xl, a.text_center, {color: 'white'}]}>
+            {record.name}
+          </Text>
+          <View style={[a.flex_row, a.align_center, a.gap_sm]}>
+            <Text
+              style={[a.font_bold, a.text_xl, a.text_center, {color: 'white'}]}>
+              <Trans>on</Trans>
+            </Text>
+            <Logo width={30} fill="white" />
+            <Logotype
+              width={70}
+              fill="white"
+              style={{marginTop: 8, marginLeft: 2}}
+            />
+          </View>
+        </View>
+        <View style={[{width: '40%'}]}>
+          <QrCodeInner url="https://bsky.app" />
+        </View>
+      </LinearGradient>
+    </ViewShot>
+  )
+}
+
+export function QrCodeInner({url}: {url: string}) {
+  const t = useTheme()
+
+  return (
+    <View style={[a.flex_shrink, a.rounded_md]}>
+      <QRCode
+        data={url}
+        style={[
+          a.rounded_sm,
+          {height: 200, width: 200, backgroundColor: '#f3f3f3'},
+        ]}
+        pieceSize={8}
+        padding={20}
+        // pieceLiquidRadius={2}
+        pieceBorderRadius={4.5}
+        outerEyesOptions={{
+          topLeft: {
+            borderRadius: [12, 12, 0, 12],
+            color: t.palette.primary_500,
+          },
+          topRight: {
+            borderRadius: [12, 12, 12, 0],
+            color: t.palette.primary_500,
+          },
+          bottomLeft: {
+            borderRadius: [12, 0, 12, 12],
+            color: t.palette.primary_500,
+          },
+        }}
+        innerEyesOptions={{borderRadius: 3}}
+        logo={{
+          href: require('../../../assets/logo.png'),
+          scale: 1.2,
+          padding: 2,
+          hidePieces: true,
+        }}
+      />
+    </View>
+  )
+}
diff --git a/src/components/StarterPack/QrCodeDialog.tsx b/src/components/StarterPack/QrCodeDialog.tsx
index 5f5569b2e0..9fb1dccfdb 100644
--- a/src/components/StarterPack/QrCodeDialog.tsx
+++ b/src/components/StarterPack/QrCodeDialog.tsx
@@ -1,29 +1,28 @@
 import React from 'react'
 import {View} from 'react-native'
-import QRCode from 'react-native-qrcode-styled'
 import * as FS from 'expo-file-system'
+import {AppBskyGraphDefs} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {nanoid} from 'nanoid/non-secure'
 
 import {saveImageToMediaLibrary} from 'lib/media/manip'
 import * as Toast from '#/view/com/util/Toast'
-import {useTheme} from '#/alf'
 import {atoms as a} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {DialogControlProps} from '#/components/Dialog'
+import {QrCode} from '#/components/StarterPack/QrCode'
 import {Text} from '#/components/Typography'
 
 export function QrCodeDialog({
   control,
-  url,
+  starterPack,
 }: {
   control: DialogControlProps
-  url: string
+  starterPack: AppBskyGraphDefs.StarterPackView
 }) {
   const {_} = useLingui()
-  const t = useTheme()
 
   // No types for this
   // See https://github.com/tokkozhin/react-native-qrcode-styled/blob/main/example/src/examples/DownloadQR.tsx for usage
@@ -52,38 +51,7 @@ export function QrCodeDialog({
           <Text style={[a.font_bold, a.text_xl, a.text_center]}>
             Share this starter pack with friends!
           </Text>
-          <View style={[t.atoms.bg_contrast_25, a.rounded_md]}>
-            <QRCode
-              data={url}
-              style={[{height: 200, width: 200}]}
-              pieceSize={8}
-              padding={20}
-              // pieceLiquidRadius={2}
-              pieceBorderRadius={4.5}
-              outerEyesOptions={{
-                topLeft: {
-                  borderRadius: [12, 12, 0, 12],
-                  color: t.palette.primary_500,
-                },
-                topRight: {
-                  borderRadius: [12, 12, 12, 0],
-                  color: t.palette.primary_500,
-                },
-                bottomLeft: {
-                  borderRadius: [12, 0, 12, 12],
-                  color: t.palette.primary_500,
-                },
-              }}
-              innerEyesOptions={{borderRadius: 3}}
-              logo={{
-                href: require('../../../assets/logo.png'),
-                scale: 1.2,
-                padding: 2,
-                hidePieces: true,
-              }}
-              ref={qrCodeRef}
-            />
-          </View>
+          <QrCode starterPack={starterPack} />
           <Button
             label={_(msg`Save QR code`)}
             variant="solid"
diff --git a/src/screens/StarterPack/Main/index.tsx b/src/screens/StarterPack/Main/index.tsx
index 8e44e6c23a..73f138748e 100644
--- a/src/screens/StarterPack/Main/index.tsx
+++ b/src/screens/StarterPack/Main/index.tsx
@@ -221,7 +221,7 @@ function Header({
           </Trans>
         </Text>
       </View>
-      <QrCodeDialog control={qrCodeDialogControl} url="https://bsky.app" />
+      <QrCodeDialog control={qrCodeDialogControl} starterPack={starterPack} />
     </>
   )
 }