Fix share button

web/components/buttons/copy-link-button.tsx

@@ -30,6 +30,7 @@ export function CopyLinkOrShareButton(props: {
   const onClick = () => {
     if (!url) return
     copyToClipboard(url)
+    mobileShare(url)
     setIsSuccess(true)
     setTimeout(() => setIsSuccess(false), 2000) // Reset after 2 seconds
   }
@@ -156,3 +157,64 @@ export function SimpleCopyTextButton(props: {
     </IconButton>
   )
 }
+export async function mobileShare(url: string) {
+  try {
+    await navigator.share({
+      title: 'My Compass profile',
+      text: 'Thoughtful connections > swiping.',
+      url: url,
+    })
+    return true
+  } catch (e) {
+    console.error('Failed to share', e)
+    return false
+  }
+}
+
+const share = async (url: string) => {
+  const success = await mobileShare(url)
+  if (!success) {
+    window.open(url, '_blank', 'noopener,noreferrer')
+  }
+}
+export const shareOnX = (profileUrl: string, text: string) => {
+  const encodedText = encodeURIComponent(text)
+  const encodedUrl = encodeURIComponent(profileUrl)
+
+  const shareUrl = `https://twitter.com/intent/tweet?text=${encodedText}&url=${encodedUrl}`
+
+  share(shareUrl)
+}
+export const shareOnLinkedIn = (profileUrl: string) => {
+  const encodedUrl = encodeURIComponent(profileUrl)
+
+  const shareUrl = `https://www.linkedin.com/sharing/share-offsite/?url=${encodedUrl}`
+
+  share(shareUrl)
+}
+export const ShareProfileOnXButton = (props: {username: string; className?: string}) => {
+  const {username, className} = props
+
+  return (
+    <Button
+      className={className}
+      onClick={() =>
+        shareOnX(`https://compassmeet.com/${username}`, `Thoughtful connections > swiping.`)
+      }
+    >
+      Share on X
+    </Button>
+  )
+}
+export const ShareProfileOnLinkedinButton = (props: {username: string; className?: string}) => {
+  const {username, className} = props
+
+  return (
+    <Button
+      className={className}
+      onClick={() => shareOnLinkedIn(`https://compassmeet.com/${username}`)}
+    >
+      Share on LinkedIn
+    </Button>
+  )
+}

web/components/widgets/share-profile-button.tsx

@@ -1,5 +1,5 @@
 import {ENV_CONFIG} from 'common/envs/constants'
-import {Button, ColorType} from 'web/components/buttons/button'
+import {ColorType} from 'web/components/buttons/button'
 import {CopyLinkOrShareButton} from 'web/components/buttons/copy-link-button'
 import {useUser} from 'web/hooks/use-user'
 import {useT} from 'web/lib/locale'
@@ -28,65 +28,3 @@ export const ShareProfileButton = (props: {
     </CopyLinkOrShareButton>
   )
 }
-
-const share = async (url: string) => {
-  if (navigator.share) {
-    try {
-      await navigator.share({
-        title: 'My Compass profile',
-        text: 'Thoughtful connections > swiping.',
-        url: url,
-      })
-    } catch (error) {
-      console.error('Failed to share:', error)
-      window.open(url, '_blank', 'noopener,noreferrer')
-    }
-  } else {
-    window.open(url, '_blank', 'noopener,noreferrer')
-  }
-}
-
-export const shareOnX = (profileUrl: string, text: string) => {
-  const encodedText = encodeURIComponent(text)
-  const encodedUrl = encodeURIComponent(profileUrl)
-
-  const shareUrl = `https://twitter.com/intent/tweet?text=${encodedText}&url=${encodedUrl}`
-
-  share(shareUrl)
-}
-
-export const shareOnLinkedIn = (profileUrl: string) => {
-  const encodedUrl = encodeURIComponent(profileUrl)
-
-  const shareUrl = `https://www.linkedin.com/sharing/share-offsite/?url=${encodedUrl}`
-
-  share(shareUrl)
-}
-
-export const ShareProfileOnXButton = (props: {username: string; className?: string}) => {
-  const {username, className} = props
-
-  return (
-    <Button
-      className={className}
-      onClick={() =>
-        shareOnX(`https://compassmeet.com/${username}`, `Thoughtful connections > swiping.`)
-      }
-    >
-      Share on X
-    </Button>
-  )
-}
-
-export const ShareProfileOnLinkedinButton = (props: {username: string; className?: string}) => {
-  const {username, className} = props
-
-  return (
-    <Button
-      className={className}
-      onClick={() => shareOnLinkedIn(`https://compassmeet.com/${username}`)}
-    >
-      Share on LinkedIn
-    </Button>
-  )
-}

web/pages/onboarding/soft-gate.tsx

@@ -2,15 +2,15 @@ import {getProfileOgImageUrl} from 'common/profiles/og-image'
 import Image from 'next/image'
 import Router from 'next/router'
 import {Button} from 'web/components/buttons/button'
+import {
+  ShareProfileOnLinkedinButton,
+  ShareProfileOnXButton,
+} from 'web/components/buttons/copy-link-button'
 import {Col} from 'web/components/layout/col'
 import {Row} from 'web/components/layout/row'
 import {PageBase} from 'web/components/page-base'
 import {SEO} from 'web/components/SEO'
-import {
-  ShareProfileButton,
-  ShareProfileOnLinkedinButton,
-  ShareProfileOnXButton,
-} from 'web/components/widgets/share-profile-button'
+import {ShareProfileButton} from 'web/components/widgets/share-profile-button'
 import {useProfile} from 'web/hooks/use-profile'
 import {useUser} from 'web/hooks/use-user'
 import {useT} from 'web/lib/locale'
@@ -49,7 +49,7 @@ export default function SoftGatePage() {
                 src={getProfileOgImageUrl(user, profile)}
                 alt="OG"
                 width={550}
-                height={550}
+                height={325}
                 className="rounded-xl border border-md"
               />
               <p>