update web app structure and remove borders

This commit is contained in:
Pavel Prichodko 2023-01-19 23:54:39 +01:00
parent 5171209b5d
commit 444612882c
No known key found for this signature in database
GPG Key ID: 0EB8D75C775AB6F1
3 changed files with 39 additions and 74 deletions

View File

@ -10,31 +10,32 @@ import {
Paragraph,
Shape,
Sidebar,
SidebarMembers,
} from '@status-im/components'
import { Stack, styled, TamaguiProvider } from '@tamagui/core'
import { AnimatePresence } from 'tamagui'
// import { AnimatePresence } from 'tamagui'
import tamaguiConfig from '../tamagui.config'
import { Topbar } from './components/topbar'
type ThemeVars = 'light' | 'dark'
const AnimatableDrawer = styled(Stack, {
variants: {
fromRight: {
true: {
x: 500,
width: 0,
},
},
fromLeft: {
true: {
x: 500,
width: 250,
},
},
},
})
// const AnimatableDrawer = styled(Stack, {
// variants: {
// fromRight: {
// true: {
// x: 500,
// width: 0,
// },
// },
// fromLeft: {
// true: {
// x: 500,
// width: 250,
// },
// },
// },
// })
function App() {
const [theme, setTheme] = useState<ThemeVars>('light')
@ -47,7 +48,7 @@ function App() {
}
return (
<TamaguiProvider config={tamaguiConfig} defaultTheme={theme}>
<TamaguiProvider config={tamaguiConfig} defaultTheme={'light'}>
<div id="app">
<div id="sidebar">
<Sidebar
@ -65,62 +66,15 @@ function App() {
/>
<div id="content">
<Messages />
<Stack width="100%" height="100%" backgroundColor="$background">
<Stack
flexDirection="column"
justifyContent="center"
alignItems="center"
height="100%"
width="100%"
>
<Heading marginBottom={12}>This is an Heading 1</Heading>
<Heading marginBottom={12} heading="h2">
This is an Heading 2
</Heading>
<Paragraph weight="semibold" uppercase marginBottom={12}>
This is a paragraph
</Paragraph>
<Label marginBottom={12}>This is a label</Label>
<Code marginBottom={12}>This is a code</Code>
<Paragraph>0x213abc190 ... 121ah4a9e</Paragraph>
<Paragraph marginVertical={20}>
Theme selected - {theme}{' '}
</Paragraph>
<Button
type="positive"
onPress={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
>
Toogle theme
</Button>
<Shape marginTop={20} />
</Stack>
</Stack>
</div>
<Composer />
</main>
<AnimatePresence>
{showMembers && (
<AnimatableDrawer
id="members"
key="members"
animation={[
'fast',
{
opacity: {
overshootClamping: true,
},
},
]}
enterStyle={{ opacity: 0 }}
exitStyle={{ opacity: 0 }}
opacity={1}
>
members
</AnimatableDrawer>
)}
</AnimatePresence>
{showMembers && (
<div id="members">
<SidebarMembers />
</div>
)}
</div>
</TamaguiProvider>
)

View File

@ -17,6 +17,8 @@ export const Topbar = (props: Props) => {
alignItems="center"
justifyContent="space-between"
padding={16}
borderBottomWidth={1}
borderColor="$neutral-10"
>
<Stack flexDirection="row" alignItems="center">
<Paragraph weight="semibold" marginRight={4}>

View File

@ -5,6 +5,11 @@ body,
overscroll-behavior: none;
}
*::selection {
color: #fff;
background: hsla(229, 71%, 57%, 1);
}
#app {
height: 100%;
display: grid;
@ -15,11 +20,15 @@ body,
display: grid;
grid-template-rows: 56px 1fr 100px;
height: 100vh;
overflow: hidden;
border: 1px solid rgba(0, 0, 0, 0.1);
border-width: 0 1px;
}
/* #main,
#sidebar,
#members,
#main > div {
border: 1px solid rgba(0, 0, 0, 0.1);
} */
#sidebar {
overflow: auto;
height: 100vh;
@ -32,5 +41,5 @@ body,
#members {
width: 352px;
color: #000;
overflow: auto;
}