fix: some details in sidebar and button components

apps/vite/src/app.tsx

@@ -30,7 +30,13 @@ function App() {
         </div>
 
         <main id="main">
-          <div>topbar</div>
+          <Stack
+            backgroundColor="$background"
+            justifyContent="center"
+            alignItems="center"
+          >
+            <Paragraph weight="semibold">Topbar</Paragraph>
+          </Stack>
           <div>
             <Stack width="100%" height="100%" backgroundColor="$background">
               <Stack
@@ -54,6 +60,7 @@ function App() {
                   Theme selected - {theme}{' '}
                 </Paragraph>
                 <Button
+                  type="positive"
                   onPress={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
                 >
                   Toogle theme
@@ -62,7 +69,13 @@ function App() {
               </Stack>
             </Stack>
           </div>
-          <div>composer</div>
+          <Stack
+            backgroundColor="$background"
+            justifyContent="center"
+            alignItems="center"
+          >
+            <Paragraph weight="semibold">Composer</Paragraph>
+          </Stack>
         </main>
       </div>
     </TamaguiProvider>

packages/components/src/button/button.tsx

@@ -1,15 +1,9 @@
-import { Stack, styled, Text } from '@tamagui/core'
+import { styled, Text } from '@tamagui/core'
+import { ButtonFrame } from 'tamagui'
 
 import type { GetProps } from '@tamagui/core'
-// import { Button} from 'react-native'
 
-// import { Button as RNButton } from 'react-native'
+const Base = styled(ButtonFrame, {
-
-// setupReactNative({ Button: RNButton })
-
-// import type { GetProps} from '@tamagui/core';
-
-const Base = styled(Stack, {
   // tag: 'button',
 
   cursor: 'pointer',
@@ -17,26 +11,27 @@ const Base = styled(Stack, {
   display: 'inline-flex',
   paddingHorizontal: 16,
   paddingVertical: 10,
-
+  animation: 'fast',
   variants: {
     type: {
       primary: {
-        backgroundColor: 'hsla(229, 71%, 57%, 1)',
+        backgroundColor: '$primary',
-        hoverStyle: { backgroundColor: 'hsla(229, 54%, 45%, 1)' },
+        hoverStyle: { backgroundColor: '$primaryHover' },
-        pressStyle: { backgroundColor: 'hsla(229, 54%, 45%, 1)' },
+        pressStyle: { backgroundColor: '$primaryHover' },
       },
       positive: {
-        backgroundColor: 'hsla(174, 63%, 40%, 1)',
+        backgroundColor: '$success',
-        hoverStyle: { backgroundColor: 'hsla(174, 63%, 34%, 1)' },
+        hoverStyle: { backgroundColor: '$successHover' },
-        pressStyle: { backgroundColor: 'hsla(174, 63%, 34%, 1)' },
+        pressStyle: { backgroundColor: '$successHover' },
       },
     },
   } as const,
 })
 
 const ButtonText = styled(Text, {
-  color: 'rgb(255, 255, 255)',
+  fontFamily: '$inter',
   textAlign: 'center',
+  color: '$white',
 })
 
 type BaseProps = GetProps<typeof Base>
@@ -49,7 +44,9 @@ interface Props {
 
 const Button = (props: Props) => {
   const { type = 'primary', children, onPress } = props
+  console.log(onPress)
 
+  console.log('Button', type)
   return (
     <Base type={type} onPress={onPress}>
       <ButtonText>{children}</ButtonText>
@@ -58,4 +55,3 @@ const Button = (props: Props) => {
 }
 
 export { Button }
-// const Button =

packages/components/src/sidebar/sidebar.tsx

@@ -1,12 +1,9 @@
-import { Stack, styled, Text } from '@tamagui/core'
+import { Stack } from '@tamagui/core'
 
 import { Avatar } from '../avatar'
 import { Button } from '../button'
 import { Image } from '../image'
-
+import { Heading, Paragraph } from '../typography'
-const Name = styled(Text, {})
-
-const Desc = styled(Text, {})
 
 interface Props {
   name: string
@@ -18,7 +15,7 @@ const _Sidebar = (props: Props) => {
   const { name, description, membersCount } = props
 
   return (
-    <Stack backgroundColor="rgb(255,255,255)">
+    <Stack backgroundColor="$background" minHeight={'calc(100vh - 2px)'}>
       <Image
         src="https://images.unsplash.com/photo-1584475784921-d9dbfd9d17ca?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80"
         width={350}
@@ -28,7 +25,7 @@ const _Sidebar = (props: Props) => {
         paddingHorizontal={16}
         paddingBottom={16}
         marginTop={-16}
-        backgroundColor="rgb(255,255,255)"
+        backgroundColor="$background"
         borderTopLeftRadius={16}
         borderTopRightRadius={16}
         zIndex={10}
@@ -39,9 +36,9 @@ const _Sidebar = (props: Props) => {
             size={56}
           />
         </Stack>
-        <Name marginBottom={16}>{name}</Name>
+        <Heading marginBottom={16}>{name}</Heading>
-        <Desc marginBottom={12}>{description}</Desc>
+        <Paragraph marginBottom={12}>{description}</Paragraph>
-        <Desc marginBottom={12}>{membersCount}</Desc>
+        <Paragraph marginBottom={12}>{membersCount}</Paragraph>
         <Button>Request to join community</Button>
       </Stack>
     </Stack>