update web app structure and remove borders

apps/vite/src/app.tsx

@@ -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, {
+// 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() {
   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
+          <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>
     </TamaguiProvider>
   )

apps/vite/src/components/topbar.tsx

@@ -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}>

apps/vite/styles/app.css

@@ -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;
 }