fix(site): change bitcoin button size

seed-hypermedia · Oct 4, 2023 · f721cbc · f721cbc
1 parent 542cc84
commit f721cbc
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 23 deletions.
diff --git a/frontend/apps/site/footer.tsx b/frontend/apps/site/footer.tsx
@@ -2,8 +2,7 @@ import {PageSection, SizableText} from '@mintter/ui'
 import {NextLink} from 'next-link'
 import {useRouter} from 'next/router'
 
-export default function Footer({hmUrl}: {hmUrl?: string}) {
-  let router = useRouter()
+export default function Footer() {
   return (
     <PageSection.Root tag="footer">
       <PageSection.Side />
@@ -14,14 +13,6 @@ export default function Footer({hmUrl}: {hmUrl?: string}) {
             MintterHypermedia
           </NextLink>
         </SizableText>
-        {hmUrl ? (
-          <SizableText size="$2">
-            Open in{' '}
-            <NextLink href={hmUrl} target="_blank">
-              Mintter App
-            </NextLink>
-          </SizableText>
-        ) : null}
       </PageSection.Content>
       <PageSection.Side />
     </PageSection.Root>

diff --git a/frontend/apps/site/publication-page.tsx b/frontend/apps/site/publication-page.tsx
@@ -4,7 +4,6 @@ import {
   EmbedBlock,
   FileBlock,
   HMBlockChildrenType,
-  HYPERMEDIA_SCHEME,
   HeadingBlock,
   ImageBlock,
   InlineContent,
@@ -30,11 +29,11 @@ import {
   File,
   FontSizeTokens,
   PageSection,
+  Share,
   SideSection,
   SideSectionTitle,
   SizableText,
   Spinner,
-  Text,
   Tooltip,
   XStack,
   YStack,
@@ -45,13 +44,13 @@ import {NextLink} from 'next-link'
 import Head from 'next/head'
 import {useRouter} from 'next/router'
 import {useMemo, useState} from 'react'
+import {DimensionValue} from 'react-native'
 import {WebTipping} from 'web-tipping'
 import Footer from './footer'
 import {PublicationMetadata} from './publication-metadata'
 import {HMBlock, HMBlockNode, HMGroup, HMPublication} from './server/json-hm'
 import {SiteHead} from './site-head'
 import {trpc} from './trpc'
-import {DimensionValue} from 'react-native'
 
 export type PublicationPageProps = {
   // documentId: string
@@ -141,15 +140,31 @@ export default function PublicationPage({
             <WebTipping
               docId={documentId}
               editors={pub?.document?.editors || []}
-            />
+            >
+              <Button
+                onPress={() =>
+                  window.open(
+                    createHmDocLink(documentId, pub?.version),
+                    '_blank',
+                  )
+                }
+                size="$2"
+                chromeless
+                iconAfter={Share}
+              >
+                <XStack flex={1} alignItems="center">
+                  <SizableText size="$1">Open in Mintter app</SizableText>
+                </XStack>
+              </Button>
+            </WebTipping>
             {/* 
             // TODO: CRITICAL: add more actions here (open in mintter app)
             // TODO: CRITICAL: make the web tipping button less "prominent"
             */}
           </YStack>
         </PageSection.Side>
       </PageSection.Root>
-      <Footer hmUrl={createHmDocLink(documentId, pub?.version)} />
+      <Footer />
     </>
   )
 }

diff --git a/frontend/apps/site/web-tipping.tsx b/frontend/apps/site/web-tipping.tsx
@@ -16,7 +16,14 @@ import {
 import {Check, MinusCircle, PlusCircle, X, Zap} from '@tamagui/lucide-icons'
 import {AccountRow} from 'components/account-row'
 import Link from 'next/link'
-import React, {useEffect, useMemo, useReducer, useRef, useState} from 'react'
+import React, {
+  PropsWithChildren,
+  useEffect,
+  useMemo,
+  useReducer,
+  useRef,
+  useState,
+} from 'react'
 import {toast} from 'react-hot-toast'
 import QRCode from 'react-qr-code'
 import {HMAccount} from '@mintter/ui'
@@ -47,10 +54,11 @@ const isTouchDevice =
 export function WebTipping({
   docId,
   editors = [],
-}: {
+  children,
+}: PropsWithChildren<{
   docId?: string
   editors: Array<HMAccount | string | null>
-}) {
+}>) {
   const [open, onOpenChange] = useState<boolean>(false)
 
   return (
@@ -64,14 +72,17 @@ export function WebTipping({
         />
       )}
       <Button
-        icon={Zap}
+        onPress={() => onOpenChange(true)}
+        size="$2"
+        chromeless
+        iconAfter={Zap}
         theme="green"
-        onPress={() => {
-          onOpenChange(true)
-        }}
       >
-        Donate Bitcoin
+        <XStack flex={1}>
+          <SizableText size="$1">Donate Bitcoin</SizableText>
+        </XStack>
       </Button>
+      {children}
     </SideSection>
   )
 }