[New Beam] Add Connect wallet button

BeamFi · Apr 17, 2023 · 5f370ed · 5f370ed
1 parent 44dcfb8
commit 5f370ed
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 9 deletions.
diff --git a/ui/components/beam/screen/BeamGetPaid.tsx b/ui/components/beam/screen/BeamGetPaid.tsx
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react"
 
 import {
   Box,
+  Button,
   HStack,
   Link,
   ListItem,
@@ -236,7 +237,7 @@ export const BeamGetPaid = ({ setBgColor, setHashtags }) => {
         px={{ base: "14px", md: "38px" }}
       >
         <Head>
-          <title>Get Paid - Beam</title>
+          <title>New Beam - BeamFi</title>
         </Head>
         <HeadlineStack />
         <BeamVStack>
@@ -282,7 +283,7 @@ export const BeamGetPaid = ({ setBgColor, setHashtags }) => {
                         themeColor="black_5"
                         trackColor="black_gray"
                       >
-                        <BeamHeading>{tokenName} Amount:</BeamHeading>
+                        <BeamHeading>{tokenName} Amount</BeamHeading>
                       </FormNumberInput>
                     )}
                   </Field>
@@ -301,7 +302,15 @@ export const BeamGetPaid = ({ setBgColor, setHashtags }) => {
                         }
                         errorMesg={form.errors.recipient}
                       >
-                        <BeamHeading>Your Plug Wallet:</BeamHeading>
+                        <BeamHeading>
+                          <HStack>
+                            <Box>Your Plug Wallet</Box>
+                            <Spacer />
+                            <Button variant="solid" colorScheme="purple_scheme">
+                              Connect
+                            </Button>
+                          </HStack>
+                        </BeamHeading>
                       </FormInput>
                     )}
                   </Field>
@@ -311,7 +320,7 @@ export const BeamGetPaid = ({ setBgColor, setHashtags }) => {
                     w={{ base: "95%", md: "80%" }}
                     spacing="12px"
                   >
-                    <BeamHeading textAlign="left">Duration:</BeamHeading>
+                    <BeamHeading textAlign="left">Duration</BeamHeading>
 
                     <HStack w="100%">
                       <Text
@@ -362,9 +371,7 @@ export const BeamGetPaid = ({ setBgColor, setHashtags }) => {
                     )}
                     <BeamGradientActionButton
                       title={
-                        beamOutId != null
-                          ? "Copy Link"
-                          : "Create Unique Beam Link"
+                        beamOutId != null ? "Copy Link" : "Create Beam Link"
                       }
                       textSize={{ base: "15px", md: "20px" }}
                       textWeight="semibold"

diff --git a/ui/components/beam/screen/BeamNewMeeting.tsx b/ui/components/beam/screen/BeamNewMeeting.tsx
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react"
 
 import {
   Box,
+  Button,
   HStack,
   Link,
   ListItem,
@@ -318,7 +319,7 @@ export const BeamNewMeeting = ({ setBgColor, setHashtags }) => {
         px={{ base: "14px", md: "38px" }}
       >
         <Head>
-          <title>Get Paid - Beam</title>
+          <title>New Meeting - BeamFi</title>
         </Head>
         <HeadlineStack hashtags={hashtags} />
         <BeamVStack>
@@ -385,7 +386,15 @@ export const BeamNewMeeting = ({ setBgColor, setHashtags }) => {
                         }
                         errorMesg={form.errors.recipient}
                       >
-                        <FormTitle>Your Plug Wallet</FormTitle>
+                        <FormTitle>
+                          <HStack>
+                            <Box>Your Plug Wallet</Box>
+                            <Spacer />
+                            <Button variant="solid" colorScheme="purple_scheme">
+                              Connect
+                            </Button>
+                          </HStack>
+                        </FormTitle>
                       </FormInput>
                     )}
                   </Field>