From 0d56feb24bbe10244f98fcafa178bac463fd3827 Mon Sep 17 00:00:00 2001 From: marcelines Date: Mon, 16 Jan 2023 17:21:57 +0000 Subject: [PATCH] fix: some details in sidebar and button components --- apps/vite/src/app.tsx | 17 +++++++++-- packages/components/src/button/button.tsx | 32 +++++++++------------ packages/components/src/sidebar/sidebar.tsx | 17 +++++------ 3 files changed, 36 insertions(+), 30 deletions(-) diff --git a/apps/vite/src/app.tsx b/apps/vite/src/app.tsx index 54787ff1..7beb72e9 100644 --- a/apps/vite/src/app.tsx +++ b/apps/vite/src/app.tsx @@ -30,7 +30,13 @@ function App() {
-
topbar
+ + Topbar +
-
composer
+ + Composer +
diff --git a/packages/components/src/button/button.tsx b/packages/components/src/button/button.tsx index 4f8f4858..8bb88fc8 100644 --- a/packages/components/src/button/button.tsx +++ b/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' - -// setupReactNative({ Button: RNButton }) - -// import type { GetProps} from '@tamagui/core'; - -const Base = styled(Stack, { +const Base = styled(ButtonFrame, { // 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)', - hoverStyle: { backgroundColor: 'hsla(229, 54%, 45%, 1)' }, - pressStyle: { backgroundColor: 'hsla(229, 54%, 45%, 1)' }, + backgroundColor: '$primary', + hoverStyle: { backgroundColor: '$primaryHover' }, + pressStyle: { backgroundColor: '$primaryHover' }, }, positive: { - backgroundColor: 'hsla(174, 63%, 40%, 1)', - hoverStyle: { backgroundColor: 'hsla(174, 63%, 34%, 1)' }, - pressStyle: { backgroundColor: 'hsla(174, 63%, 34%, 1)' }, + backgroundColor: '$success', + hoverStyle: { backgroundColor: '$successHover' }, + pressStyle: { backgroundColor: '$successHover' }, }, }, } as const, }) const ButtonText = styled(Text, { - color: 'rgb(255, 255, 255)', + fontFamily: '$inter', textAlign: 'center', + color: '$white', }) type BaseProps = GetProps @@ -49,7 +44,9 @@ interface Props { const Button = (props: Props) => { const { type = 'primary', children, onPress } = props + console.log(onPress) + console.log('Button', type) return ( {children} @@ -58,4 +55,3 @@ const Button = (props: Props) => { } export { Button } -// const Button = diff --git a/packages/components/src/sidebar/sidebar.tsx b/packages/components/src/sidebar/sidebar.tsx index fe6b5798..c34fd07d 100644 --- a/packages/components/src/sidebar/sidebar.tsx +++ b/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' - -const Name = styled(Text, {}) - -const Desc = styled(Text, {}) +import { Heading, Paragraph } from '../typography' interface Props { name: string @@ -18,7 +15,7 @@ const _Sidebar = (props: Props) => { const { name, description, membersCount } = props return ( - + { 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} /> - {name} - {description} - {membersCount} + {name} + {description} + {membersCount}