Style Tweaks

0xsend · Nov 11, 2024 · 9f680da · 9f680da
1 parent 5f0edd4
commit 9f680da
Show file tree

Hide file tree

Showing 13 changed files with 36 additions and 47 deletions.
diff --git a/packages/app/components/SearchBar.tsx b/packages/app/components/SearchBar.tsx
@@ -104,7 +104,6 @@ function SearchResults() {
       key="searchResults"
       animation="quick"
       gap="$size.2.5"
-      mt="$size.3.5"
       width="100%"
       enterStyle={{
         opacity: 0,

diff --git a/packages/app/components/TopNav.tsx b/packages/app/components/TopNav.tsx
@@ -150,17 +150,15 @@ export function TopNav({
             case hasSelectedCoin:
               return (
                 <XStack ai="center" f={1}>
-                  <Button
-                    jc="flex-start"
-                    onPress={handleBack}
-                    icon={
+                  <Button onPress={handleBack}>
+                    <ButtonOg.Icon>
                       <IconArrowLeft
                         size={'$1.5'}
-                        color={'$primary'}
+                        $theme-dark={{ color: '$primary' }}
                         $theme-light={{ color: '$color12' }}
                       />
-                    }
-                  />
+                    </ButtonOg.Icon>
+                  </Button>
                   <Paragraph size={'$8'} col={'$color10'}>
                     Balance
                   </Paragraph>
@@ -188,17 +186,15 @@ export function TopNav({
             case showLogo:
               return (
                 <>
-                  <Button
-                    jc="flex-start"
-                    onPress={handleBack}
-                    icon={
+                  <Button onPress={handleBack}>
+                    <ButtonOg.Icon>
                       <IconArrowLeft
                         size={'$1.5'}
-                        color={'$primary'}
+                        $theme-dark={{ color: '$primary' }}
                         $theme-light={{ color: '$color12' }}
                       />
-                    }
-                  />
+                    </ButtonOg.Icon>
+                  </Button>
                   <XStack>
                     <Link href="/send">
                       <IconSendLogo size={'$2.5'} color={'$color12'} />
@@ -209,17 +205,15 @@ export function TopNav({
             default:
               return (
                 <XStack ai="center" f={1}>
-                  <Button
-                    jc="flex-start"
-                    onPress={handleBack}
-                    icon={
+                  <Button onPress={handleBack}>
+                    <ButtonOg.Icon>
                       <IconArrowLeft
                         size={'$1.5'}
-                        color={'$primary'}
+                        $theme-dark={{ color: '$primary' }}
                         $theme-light={{ color: '$color12' }}
                       />
-                    }
-                  />
+                    </ButtonOg.Icon>
+                  </Button>
                   <Paragraph size={'$8'} col={'$color10'}>
                     {header}
                   </Paragraph>
@@ -256,11 +250,11 @@ function Button(props: ButtonProps) {
       bc="transparent"
       chromeless
       circular
-      jc={'center'}
+      jc={'flex-start'}
       ai={'center'}
+      bw={0}
       hoverStyle={{
         backgroundColor: 'transparent',
-        borderColor: '$background',
       }}
       pressStyle={{
         backgroundColor: 'transparent',

diff --git a/packages/app/components/layout/MainLayout.tsx b/packages/app/components/layout/MainLayout.tsx
@@ -25,7 +25,7 @@ const MainLayout = ({
                   <Avatar.Image src={avatar_url} width={48} height={48} />
                 ) : (
                   <Avatar.Fallback jc={'center'}>
-                    <Spinner size="large" color="$color" />
+                    <Spinner size="large" color="$color12" />
                   </Avatar.Fallback>
                 )}
               </LinkableAvatar>

diff --git a/packages/app/features/account/rewards/activity/screen.tsx b/packages/app/features/account/rewards/activity/screen.tsx
@@ -52,7 +52,7 @@ export function ActivityRewardsScreen() {
       <YStack f={1} pt={'$6'} $gtLg={{ pt: '$0' }} gap={'$7'}>
         <Header />
         <Stack w="100%" f={1} jc={'center'} ai={'center'}>
-          <Spinner color="$color" size="large" />
+          <Spinner color="$color12" size="large" />
         </Stack>
       </YStack>
     )

diff --git a/packages/app/features/account/settings/backup/index.tsx b/packages/app/features/account/settings/backup/index.tsx
@@ -93,7 +93,7 @@ export const BackupScreen = () => {
               </YStack>
             )
           case isLoading || isLoadingWebAuthnCreds:
-            return <Spinner size="large" color="$color" />
+            return <Spinner size="large" color="$color12" />
           case !webAuthnCreds:
             return (
               <YStack w={'100%'} gap={'$6'}>

diff --git a/packages/app/features/activity/RecentActivity.tsx b/packages/app/features/activity/RecentActivity.tsx
@@ -90,7 +90,7 @@ function ActivityFeed(
                   fetchNextPage()
                 }}
                 disabled={isFetchingNextPageActivities || isFetchingActivities}
-                color="$color"
+                color="$color10"
                 width={200}
                 mx="auto"
               >

diff --git a/packages/app/features/activity/__snapshots__/screen.test.tsx.snap b/packages/app/features/activity/__snapshots__/screen.test.tsx.snap
@@ -340,7 +340,6 @@ exports[`ActivityScreen renders activity screen: ActivityScreen 1`] = `
       [
         {
           "gap": 32,
-          "marginTop": 40,
         },
         {
           "initial": {

diff --git a/packages/app/features/profile/screen.tsx b/packages/app/features/profile/screen.tsx
@@ -185,7 +185,7 @@ export function ProfileScreen({ sendid: propSendid }: ProfileScreenProps) {
                               fetchNextPage()
                             }}
                             disabled={isFetchingNextPageActivities || isFetchingActivities}
-                            color="$color"
+                            color="$color11"
                             width={200}
                             mx="auto"
                           >

diff --git a/packages/app/features/send/SendAmountForm.tsx b/packages/app/features/send/SendAmountForm.tsx
@@ -154,7 +154,6 @@ export function SendAmountForm() {
           testID: 'SendForm',
           $gtSm: { maxWidth: '100%' },
           jc: 'flex-start',
-          als: 'flex-start',
           f: 1,
           height: '100%',
         }}

diff --git a/packages/app/features/send/__snapshots__/screen.test.tsx.snap b/packages/app/features/send/__snapshots__/screen.test.tsx.snap
@@ -1140,7 +1140,6 @@ exports[`SendScreen should render with search when on /send and no recipient in
       [
         {
           "gap": 32,
-          "marginTop": 40,
         },
         {
           "initial": {

diff --git a/packages/app/features/send/components/SendTopNav.tsx b/packages/app/features/send/components/SendTopNav.tsx
@@ -5,6 +5,7 @@ import {
   Header,
   Paragraph,
   Stack,
+  Theme,
   usePwa,
   XStack,
   type ButtonProps,
@@ -31,17 +32,15 @@ export function SendTopNav() {
         $lg={{ pt: !isPwa && '$5', pb: '$3' }}
       >
         <XStack ai="center" $lg={{ f: 1 }} w="20%" $gtLg={{ display: 'none' }}>
-          <Button
-            onPress={back}
-            jc="flex-start"
-            icon={
+          <Button onPress={back}>
+            <ButtonOg.Icon>
               <IconArrowLeft
                 size={'$1.5'}
-                color={'$primary'}
+                $theme-dark={{ color: '$primary' }}
                 $theme-light={{ color: '$color12' }}
               />
-            }
-          />
+            </ButtonOg.Icon>
+          </Button>
           <Paragraph size={'$8'} col={'$color10'}>
             {(() => {
               switch (true) {
@@ -72,7 +71,7 @@ export function SendTopNav() {
                 case Boolean(sendParams.recipient):
                   return 'Enter Amount'
                 default:
-                  return ''
+                  return 'Select Recipient'
               }
             })()}
           </H2>
@@ -86,13 +85,13 @@ function Button(props: ButtonProps) {
   return (
     <ButtonOg
       bc="transparent"
+      jc="flex-start"
       chromeless
       circular
-      jc={'center'}
       ai={'center'}
+      bw={0}
       hoverStyle={{
         backgroundColor: 'transparent',
-        borderColor: '$background',
       }}
       pressStyle={{
         backgroundColor: 'transparent',

diff --git a/packages/app/features/send/confirm/screen.tsx b/packages/app/features/send/confirm/screen.tsx
@@ -317,14 +317,14 @@ export function SendConfirm() {
               case isBalanceLoading || isFeesLoading || isGasLoading:
                 return (
                   <Button.Icon>
-                    <Spinner size="small" color="$color" />
+                    <Spinner size="small" color="$color12" />
                   </Button.Icon>
                 )
               case isTransferPending && !isTransferError:
                 return (
                   <>
                     <Button.Icon>
-                      <Spinner size="small" color="$color" />
+                      <Spinner size="small" color="$color12" />
                     </Button.Icon>
                     <Button.Text>Sending...</Button.Text>
                   </>
@@ -333,7 +333,7 @@ export function SendConfirm() {
                 return (
                   <>
                     <Button.Icon>
-                      <Spinner size="small" color="$color" />
+                      <Spinner size="small" color="$color12" />
                     </Button.Icon>
                     <Button.Text>Confirming...</Button.Text>
                   </>
@@ -370,7 +370,7 @@ export function SendRecipient({ ...props }: YStackProps) {
   const { recipient, idType } = queryParams
   const router = useRouter()
   const { data: profile, isLoading, error } = useProfileLookup(idType ?? 'tag', recipient ?? '')
-  const href = useProfileHref(idType ?? 'tag', recipient ?? '')
+  const href = profile ? `/profile/${profile?.sendid}` : ''
 
   if (isLoading) return <Spinner size="large" />
   if (error) throw new Error(error.message)

diff --git a/packages/app/features/send/screen.tsx b/packages/app/features/send/screen.tsx
@@ -23,7 +23,7 @@ import { type Address, isAddress } from 'viem'
 export const SendScreen = () => {
   const [{ recipient, idType }] = useSendScreenParams()
   const { data: profile, isLoading, error } = useProfileLookup(idType ?? 'tag', recipient ?? '')
-  if (isLoading) return <Spinner size="large" />
+  if (isLoading) return <Spinner size="large" color={'$color12'} />
   if (error) throw new Error(error.message)
 
   if (idType === 'address' && isAddress(recipient as Address)) {
-Original file line number
+Diff line change
@@ Expand Up @@
           [
             {
               "gap": 32,
-              "marginTop": 40,
             },
             {
               "initial": {
@@ Expand Down @@