Improve localization (#5008)

* Update QrCode.tsx

* Update generate-starterpack.ts

src/components/StarterPack/QrCode.tsx

@@ -59,20 +59,24 @@ export const QrCode = React.forwardRef<ViewShot, Props>(function QrCode(
             <QrCodeInner link={link} />
           </View>
 
-          <View style={[a.flex_row, a.align_center, {gap: 5}]}>
           <Text
             style={[
+              a.flex,
+              a.flex_row,
+              a.align_center,
               a.font_bold,
-                a.text_center,
+              {color: 'white', fontSize: 18, gap: 6},
-                {color: 'white', fontSize: 18},
             ]}>
-              <Trans>on</Trans>
+            <Trans>
+              on
+              <View style={[a.flex_row, a.align_center, {gap: 6}]}>
+                <Logo width={25} fill="white" />
+                <View style={[{marginTop: 3.5}]}>
+                  <Logotype width={72} fill="white" />
+                </View>
+              </View>
+            </Trans>
           </Text>
-            <Logo width={26} fill="white" />
-            <View style={[{marginTop: 5, marginLeft: 2.5}]}>
-              <Logotype width={68} fill="white" />
-            </View>
-          </View>
         </View>
       </LinearGradientBackground>
     </ViewShot>

src/lib/generate-starterpack.ts

@@ -65,7 +65,6 @@ export function useGenerateStarterPackMutation({
 }) {
   const {_} = useLingui()
   const agent = useAgent()
-  const starterPackString = _(msg`Starter Pack`)
 
   return useMutation<{uri: string; cid: string}, Error, void>({
     mutationFn: async () => {
@@ -106,7 +105,7 @@ export function useGenerateStarterPackMutation({
         25,
         true,
       )
-      const starterPackName = `${displayName}'s ${starterPackString}`
+      const starterPackName = _(msg`${displayName}'s Starter Pack`)
 
       const list = await createStarterPackList({
         name: starterPackName,