prehistoric-systems/omnivore
1
0
Fork 0
mirror of https://github.com/omnivore-app/omnivore.git synced 2026-03-11 08:54:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Some clean up around css

Browse source
This commit is contained in:
Rupin Khandelwal 2022-07-21 13:03:44 +02:00
parent 5c69fb50fb
commit 8874513e59
1 changed files with 38 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

77
packages/web/components/elements/Table.tsx
View file

@ -1,5 +1,12 @@
import { isDarkTheme } from '../../lib/themeUpdater'
import { Table as ResponsiveTable, Thead, Tbody, Tr, Th, Td } from 'react-super-responsive-table'
import {
Table as ResponsiveTable,
Thead,
Tbody,
Tr,
Th,
Td,
} from 'react-super-responsive-table'
import { PencilSimple, Plus, Trash } from 'phosphor-react'
import { Box, SpanBox, VStack } from './LayoutPrimitives'
import { styled } from '../tokens/stitches.config'
@ -26,12 +33,17 @@ const HeaderWrapper = styled(Box, {
},
})
const newThead = {
background: '#156'
}
const StyledTable = styled(ResponsiveTable, {
// Add css here
margin: ' 0 auto',
border: '0.5px solid $grayBgActive',
backgroundColor: '$graySolid',
borderCollapse: 'collapse',
borderRadius:'5px',
width: '100%',
mt: '$3',
'&:hover': {
border: '0.5px solid #FFD234',
},
})
export function Table(props: TableProps): JSX.Element {
@ -94,38 +106,26 @@ export function Table(props: TableProps): JSX.Element {
)}
</Box>
</HeaderWrapper>
<Box
css={{
backgroundColor: '$grayBg',
margin: ' 0 auto',
border: '0.5px solid $grayBgActive',
width: '100%',
mt: '$3',
'&:hover': {
border: '0.5px solid #FFD234',
},
}}
>
<StyledTable css={{ /* can also style here now */ }}>
<Thead className={newThead}>
<Tr>
{props.headers.map((header: string, index: number) => (
<Th key={index}>
<SpanBox
css={{
textTransform: 'uppercase',
display: 'flex',
fontWeight: 600,
padding: '20px 10px 20px 40px',
color: '$grayTextContrast',
fontSize: '$2',
}}
>
{header}
</SpanBox>
</Th>
))}
</Tr>
<StyledTable>
<Thead>
<Tr>
{props.headers.map((header: string, index: number) => (
<Th key={index}>
<SpanBox
css={{
textTransform: 'uppercase',
display: 'flex',
fontWeight: 600,
padding: '20px 10px 20px 40px',
color: '$grayTextContrast',
fontSize: '$2',
}}
>
{header}
</SpanBox>
</Th>
))}
</Tr>
</Thead>
<Tbody>
@ -187,7 +187,6 @@ export function Table(props: TableProps): JSX.Element {
))}
</Tbody>
</StyledTable>
</Box>
</VStack>
)
}