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, Paragraph,
Shape, Shape,
Sidebar, Sidebar,
SidebarMembers,
} from '@status-im/components' } from '@status-im/components'
import { Stack, styled, TamaguiProvider } from '@tamagui/core' import { Stack, styled, TamaguiProvider } from '@tamagui/core'
import { AnimatePresence } from 'tamagui'
// import { AnimatePresence } from 'tamagui'
import tamaguiConfig from '../tamagui.config' import tamaguiConfig from '../tamagui.config'
import { Topbar } from './components/topbar' import { Topbar } from './components/topbar'
type ThemeVars = 'light' | 'dark' type ThemeVars = 'light' | 'dark'
const AnimatableDrawer = styled(Stack, { // const AnimatableDrawer = styled(Stack, {
variants: { // variants: {
fromRight: { // fromRight: {
true: { // true: {
x: 500, // x: 500,
width: 0, // width: 0,
}, // },
}, // },
fromLeft: { // fromLeft: {
true: { // true: {
x: 500, // x: 500,
width: 250, // width: 250,
}, // },
}, // },
}, // },
}) // })
function App() { function App() {
const [theme, setTheme] = useState<ThemeVars>('light') const [theme, setTheme] = useState<ThemeVars>('light')
@ -47,7 +48,7 @@ function App() {
} }
return ( return (
<TamaguiProvider config={tamaguiConfig} defaultTheme={theme}> <TamaguiProvider config={tamaguiConfig} defaultTheme={'light'}>
<div id="app"> <div id="app">
<div id="sidebar"> <div id="sidebar">
<Sidebar <Sidebar
@ -65,62 +66,15 @@ function App() {
/> />
<div id="content"> <div id="content">
<Messages /> <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> </div>
<Composer /> <Composer />
</main> </main>
<AnimatePresence>
{showMembers && ( {showMembers && (
<AnimatableDrawer <div id="members">
id="members" <SidebarMembers />
key="members" </div>
animation={[
'fast',
{
opacity: {
overshootClamping: true,
},
},
]}
enterStyle={{ opacity: 0 }}
exitStyle={{ opacity: 0 }}
opacity={1}
>
members
</AnimatableDrawer>
)} )}
</AnimatePresence>
</div> </div>
</TamaguiProvider> </TamaguiProvider>
) )

View File

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

View File

@ -5,6 +5,11 @@ body,
overscroll-behavior: none; overscroll-behavior: none;
} }
*::selection {
color: #fff;
background: hsla(229, 71%, 57%, 1);
}
#app { #app {
height: 100%; height: 100%;
display: grid; display: grid;
@ -15,11 +20,15 @@ body,
display: grid; display: grid;
grid-template-rows: 56px 1fr 100px; grid-template-rows: 56px 1fr 100px;
height: 100vh; 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 { #sidebar {
overflow: auto; overflow: auto;
height: 100vh; height: 100vh;
@ -32,5 +41,5 @@ body,
#members { #members {
width: 352px; width: 352px;
color: #000; overflow: auto;
} }