Merge pull request #460 from primitivefinance/develop

fix(lp): style hotfix
primitivefinance · Jan 29, 2021 · 556af58 · 556af58 · vercel · Jan 29, 2021
2 parents 4b7469a + 47b67cc
commit 556af58
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 73 deletions.
diff --git a/src/components/Liquidity/LiquidityTable.tsx b/src/components/Liquidity/LiquidityTable.tsx
@@ -100,42 +100,40 @@ const LiquidityTable: React.FC<OptionsTableProps> = (props) => {
     <OptionsContainer>
       <Table>
         <LiquidityTableHeader />
-        <LiquidityTableContainer>
-          <LiquidityTableContent>
-            {options.loading ? (
-              <LoadingTable ext />
-            ) : (
-              <ScrollBody>
-                {options[type].map((option) => {
-                  const tableColumns: TableColumns = formatTableColumns(option)
-                  const hasPosition =
-                    positions.options
-                      .map((pos) => {
-                        return pos.attributes.entity
-                          ? pos.attributes.entity.address ===
-                              option.entity.address &&
-                              BigNumber.from(pos.lp.toString()).gt(0)
-                          : false
-                      })
-                      .indexOf(true) !== -1
-
-                  if (
-                    +new Date() / 1000 >= option.entity.expiryValue &&
-                    !hasPosition
-                  )
-                    return null
-                  return (
-                    <LiquidityTableRow
-                      key={option.entity.address}
-                      onClick={() => updateItem(option, Operation.NONE)}
-                      columns={tableColumns}
-                    />
-                  )
-                })}
-              </ScrollBody>
-            )}
-          </LiquidityTableContent>
-        </LiquidityTableContainer>
+        <LiquidityTableContent>
+          {options.loading ? (
+            <LoadingTable ext />
+          ) : (
+            <ScrollBody>
+              {options[type].map((option) => {
+                const tableColumns: TableColumns = formatTableColumns(option)
+                const hasPosition =
+                  positions.options
+                    .map((pos) => {
+                      return pos.attributes.entity
+                        ? pos.attributes.entity.address ===
+                            option.entity.address &&
+                            BigNumber.from(pos.lp.toString()).gt(0)
+                        : false
+                    })
+                    .indexOf(true) !== -1
+
+                if (
+                  +new Date() / 1000 >= option.entity.expiryValue &&
+                  !hasPosition
+                )
+                  return null
+                return (
+                  <LiquidityTableRow
+                    key={option.entity.address}
+                    onClick={() => updateItem(option, Operation.NONE)}
+                    columns={tableColumns}
+                  />
+                )
+              })}
+            </ScrollBody>
+          )}
+        </LiquidityTableContent>
       </Table>
       <Spacer />
       <Spacer />
@@ -145,22 +143,20 @@ const LiquidityTable: React.FC<OptionsTableProps> = (props) => {
   )
 }
 
-export const LiquidityTableContainer = styled.div`
+export const LiquidityTableContent = styled.div`
   position: relative;
   display: flex;
   flex-direction: column;
   overflow-x: show;
-`
-
-export const LiquidityTableContent = styled.div`
-  width: ${(props) => props.theme.flexboxgrid.container.md}rem;
+  width: 1200px;
 `
 
 const ScrollBody = styled(TableBody)`
   height: 10em;
 `
 
 const OptionsContainer = styled.div`
+  display: block;
   margin-left: 3em;
   margin-top: 0em;
   min-height: 80vh;

diff --git a/src/components/Liquidity/LiquidityTable/LiquidityTableHeader/LiquidityTableHeader.tsx b/src/components/Liquidity/LiquidityTable/LiquidityTableHeader/LiquidityTableHeader.tsx
@@ -7,10 +7,7 @@ import Tooltip from '@/components/Tooltip'
 import TableRow from '@/components/TableRow'
 import Button from '@/components/Button'
 
-import {
-  LiquidityTableContainer,
-  LiquidityTableContent,
-} from '../../LiquidityTable'
+import { LiquidityTableContent } from '../../LiquidityTable'
 
 export const headers = [
   {
@@ -42,35 +39,33 @@ export const headers = [
 const LiquidityTableHeader: React.FC = () => {
   return (
     <StyledTableHead>
-      <LiquidityTableContainer>
-        <LiquidityTableContent>
-          <TableRow isHead>
-            {headers.map((header, index) => {
-              if (index === headers.length - 1) {
-                return (
-                  <>
-                    <TableCell>
-                      <StyledButtonCell key={'Open'}>
-                        <Spacer />
-                      </StyledButtonCell>
-                    </TableCell>
-                  </>
-                )
-              }
-              if (header.tip) {
-                return (
-                  <TableCell key={header.name}>
-                    <Tooltip text={header.tip}>{header.name}</Tooltip>
+      <LiquidityTableContent>
+        <TableRow isHead>
+          {headers.map((header, index) => {
+            if (index === headers.length - 1) {
+              return (
+                <>
+                  <TableCell>
+                    <StyledButtonCell key={'Open'}>
+                      <Spacer />
+                    </StyledButtonCell>
                   </TableCell>
-                )
-              }
-              return <TableCell key={header.name}>{header.name}</TableCell>
-            })}
-            <Spacer />
-          </TableRow>
-          <GreyBack />
-        </LiquidityTableContent>
-      </LiquidityTableContainer>
+                </>
+              )
+            }
+            if (header.tip) {
+              return (
+                <TableCell key={header.name}>
+                  <Tooltip text={header.tip}>{header.name}</Tooltip>
+                </TableCell>
+              )
+            }
+            return <TableCell key={header.name}>{header.name}</TableCell>
+          })}
+          <Spacer />
+        </TableRow>
+        <GreyBack />
+      </LiquidityTableContent>
     </StyledTableHead>
   )
 }