fix spacing

centrifuge · Sep 28, 2023 · fb56b73 · fb56b73
1 parent 9130bd1
commit fb56b73
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 33 deletions.
diff --git a/centrifuge-app/src/components/AssetSummary.tsx b/centrifuge-app/src/components/AssetSummary.tsx
@@ -0,0 +1,45 @@
+import { Loan, TinlakeLoan } from '@centrifuge/centrifuge-js'
+import { Box, Shelf, Stack, Text } from '@centrifuge/fabric'
+import * as React from 'react'
+import { useTheme } from 'styled-components'
+import LoanLabel from './LoanLabel'
+
+type Props = {
+  data?: {
+    label: React.ReactNode
+    value: React.ReactNode
+  }[]
+  children?: React.ReactNode
+  loan: Loan | TinlakeLoan
+}
+
+export const AssetSummary: React.FC<Props> = ({ data, children, loan }) => {
+  const theme = useTheme()
+  return (
+    <Stack bg={theme.colors.backgroundSecondary} pl={3}>
+      <Box paddingTop={3}>
+        <Shelf gap="2">
+          <Text variant="heading2">Details</Text>
+          <LoanLabel loan={loan} />
+        </Shelf>
+      </Box>
+      <Shelf
+        gap="6"
+        py="3"
+        style={{
+          boxShadow: `0 1px 0 ${theme.colors.borderSecondary}`,
+        }}
+      >
+        {data?.map(({ label, value }, index) => (
+          <Stack gap="4px" key={`${value}-${label}-${index}`}>
+            <Text variant="body3" style={{ fontWeight: 500 }}>
+              {label}
+            </Text>
+            <Text variant="body2">{value}</Text>
+          </Stack>
+        ))}
+        {children}
+      </Shelf>
+    </Stack>
+  )
+}
diff --git a/centrifuge-app/src/components/PageSummary.tsx b/centrifuge-app/src/components/PageSummary.tsx
@@ -8,31 +8,27 @@ type Props = {
     value: React.ReactNode
   }[]
   children?: React.ReactNode
-  title?: React.ReactNode
 }
 
-export const PageSummary: React.FC<Props> = ({ data, children, title }) => {
+export const PageSummary: React.FC<Props> = ({ data, children }) => {
   const theme = useTheme()
   return (
-    <Stack bg={theme.colors.backgroundSecondary} pl={3}>
-      {title}
-      <Shelf
-        gap="6"
-        py="3"
-        style={{
-          boxShadow: `0 1px 0 ${theme.colors.borderSecondary}`,
-        }}
-      >
-        {data?.map(({ label, value }, index) => (
-          <Stack gap="4px" key={`${value}-${label}-${index}`}>
-            <Text variant="body3" style={{ fontWeight: 500 }}>
-              {label}
-            </Text>
-            <Text variant="body2">{value}</Text>
-          </Stack>
-        ))}
-        {children}
-      </Shelf>
-    </Stack>
+    <Shelf
+      bg={theme.colors.backgroundSecondary}
+      gap="6"
+      pl={[2, 6]}
+      py="3"
+      style={{
+        boxShadow: `0 1px 0 ${theme.colors.borderSecondary}`,
+      }}
+    >
+      {data?.map(({ label, value }, index) => (
+        <Stack gap="4px" key={`${value}-${label}-${index}`}>
+          <Text variant="body3">{label}</Text>
+          <Text variant="heading3">{value}</Text>
+        </Stack>
+      ))}
+      {children}
+    </Shelf>
   )
 }
diff --git a/centrifuge-app/src/pages/Loan/index.tsx b/centrifuge-app/src/pages/Loan/index.tsx
@@ -16,11 +16,10 @@ import {
 import BN from 'bn.js'
 import * as React from 'react'
 import { useHistory, useParams, useRouteMatch } from 'react-router'
+import { AssetSummary } from '../../components/AssetSummary'
 import { LabelValueStack } from '../../components/LabelValueStack'
-import LoanLabel from '../../components/LoanLabel'
 import { PageHeader } from '../../components/PageHeader'
 import { PageSection } from '../../components/PageSection'
-import { PageSummary } from '../../components/PageSummary'
 import { PageWithSideBar } from '../../components/PageWithSideBar'
 import { PodAuthSection } from '../../components/PodAuthSection'
 import { RouterLinkButton } from '../../components/RouterLinkButton'
@@ -182,15 +181,8 @@ const Loan: React.FC<{ setShowOraclePricing?: () => void }> = ({ setShowOraclePr
         pool &&
         (loan.pricing.maturityDate || templateMetadata?.keyAttributes?.length || 'oracle' in loan.pricing) && (
           <>
-            <PageSummary
-              title={
-                <Box paddingTop={3}>
-                  <Shelf gap="2">
-                    <Text variant="heading2">Details</Text>
-                    <LoanLabel loan={loan} />
-                  </Shelf>
-                </Box>
-              }
+            <AssetSummary
+              loan={loan}
               data={[
                 ...(templateMetadata?.keyAttributes
                   ?.filter((key) => templateMetadata?.attributes?.[key].public)