ui

centrifuge · Oct 15, 2024 · 86724f2 · 86724f2
1 parent d74b660
commit 86724f2
Show file tree

Hide file tree

Showing 18 changed files with 110 additions and 51 deletions.
diff --git a/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx b/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx
@@ -263,15 +263,15 @@ function PoolPerformanceChart() {
               <YAxis
                 stroke="none"
                 tickLine={false}
-                style={{ fontSize: '10px', fill: theme.colors.textPrimary }}
+                style={{ fontSize: '10px', fill: theme.colors.textSecondary }}
                 tickFormatter={(tick: number) => formatBalanceAbbreviated(tick, '', 0)}
                 yAxisId="left"
                 width={80}
               />
               <YAxis
                 stroke="none"
                 tickLine={false}
-                style={{ fontSize: '10px', fill: theme.colors.textPrimary }}
+                style={{ fontSize: '10px', fill: theme.colors.textSecondary }}
                 tickFormatter={(tick: number) => formatBalanceAbbreviated(tick, '', 2)}
                 yAxisId="right"
                 orientation="right"
@@ -475,13 +475,15 @@ function CustomLegend({
           }
 
           return (
-            <Stack key={index} pl={1} display="flex" marginRight="20px">
+            <Stack key={index} display="flex" marginRight="20px">
               <Box display="flex" alignItems="center">
                 <Dot color={item.color} />
                 {hasType(item) ? (
-                  <Tooltips type={item.type} label={item.label} />
-                ) : (
                   <Text variant="body3" style={{ lineHeight: 1.8 }}>
+                    <Tooltips type={item.type} label={item.label} color="textSecondary" />
+                  </Text>
+                ) : (
+                  <Text color="textSecondary" variant="body3" style={{ lineHeight: 1.8 }}>
                     {item.label}
                   </Text>
                 )}
@@ -512,7 +514,7 @@ export const CustomTick = ({ x, y, payload }: CustomTickProps) => {
   return (
     <g transform={`translate(${x},${y})`}>
       <text
-        style={{ fontSize: '10px', fill: theme.colors.textPrimary, letterSpacing: '-0.5px' }}
+        style={{ fontSize: '10px', fill: theme.colors.textSecondary, letterSpacing: '-0.5px' }}
         x={0}
         y={0}
         dy={16}

diff --git a/centrifuge-app/src/components/DataTable.tsx b/centrifuge-app/src/components/DataTable.tsx
@@ -228,6 +228,8 @@ const HeaderRow = styled(Row)<{ styles?: any; scrollable?: boolean }>(({ styles,
     position: scrollable ? 'sticky' : 'static',
     top: scrollable ? 0 : 'auto',
     zIndex: scrollable ? 10 : 'auto',
+    borderTopLeftRadius: '8px',
+    borderTopRightRadius: '8px',
     ...styles,
   })
 )
@@ -255,6 +257,10 @@ export const DataRow = styled(Row)<any>`
       '&:focus-visible': {
         boxShadow: 'inset 0 0 0 3px var(--fabric-focus)',
       },
+      '&:last-child': {
+        borderBottomLeftRadius: '8px',
+        borderBottomRightRadius: '8px',
+      },
     })}
 `
 

diff --git a/centrifuge-app/src/components/IssuerSection.tsx b/centrifuge-app/src/components/IssuerSection.tsx
@@ -28,7 +28,7 @@ type IssuerSectionProps = {
 }
 
 const StyledBox = styled(Box)`
-  padding: 30px 20px;
+  padding: 24px;
   &:hover {
     background: ${SUBTLE_GRAY};
     border-radius: 0px;
@@ -37,12 +37,12 @@ const StyledBox = styled(Box)`
 
 const HoverBox = styled(StyledBox)`
   padding: 8px 22px;
-  border-radius: 4px;
   background-color: ${SUBTLE_GRAY};
+  border: 3px solid transparent;
+  border-radius: 4px;
   &:hover {
-    a {
-      color: ${({ theme }) => theme.colors.textGold};
-    }
+    border-radius: 4px;
+    border-color: #91969b1a;
   }
 `
 
@@ -151,8 +151,8 @@ export function IssuerDetails({ metadata }: IssuerSectionProps) {
         {metadata?.pool?.issuer.logo && (
           <Box
             as="img"
-            maxWidth={80}
-            maxHeight={30}
+            maxWidth={100}
+            maxHeight={28}
             alt={metadata?.pool?.issuer.name}
             src={cent.metadata.parseMetadataUrl(metadata?.pool?.issuer.logo?.uri)}
           />
@@ -199,14 +199,19 @@ const Links = ({ links }: { links: { label: string; href?: string; show: boolean
 
         if (link.onClick) {
           return (
-            <PillButton key={`${link.label} ${index}`} variant="small" onClick={link.onClick}>
+            <PillButton key={`${link.label} ${index}`} variant="regular" onClick={link.onClick}>
               {link.label}
             </PillButton>
           )
         }
 
         return (
-          <AnchorPillButton style={{ marginRight: 8 }} variant="small" key={`${link.label} ${index}`} href={link.href}>
+          <AnchorPillButton
+            style={{ marginRight: 8 }}
+            variant="regular"
+            key={`${link.label} ${index}`}
+            href={link.href}
+          >
             {link.label}
           </AnchorPillButton>
         )

diff --git a/centrifuge-app/src/components/LayoutBase/LayoutSection.tsx b/centrifuge-app/src/components/LayoutBase/LayoutSection.tsx
@@ -12,7 +12,7 @@ type Props = {
 
 export function LayoutSection({ title, titleAddition, subtitle, headerRight, children, ...boxProps }: Props) {
   return (
-    <BasePadding as="section" gap={2} pt={20} pb={20} {...boxProps}>
+    <BasePadding as="section" gap={3} pt={20} pb={20} {...boxProps}>
       {(title || titleAddition || subtitle || headerRight) && (
         <Shelf justifyContent="space-between" as="header" maxWidth="mainContent">
           <Stack>

diff --git a/centrifuge-app/src/components/LayoutBase/styles.tsx b/centrifuge-app/src/components/LayoutBase/styles.tsx
@@ -148,7 +148,7 @@ export const WalletInner = styled(Stack)`
   @media (min-width: ${({ theme }) => theme.breakpoints[BREAK_POINT_COLUMNS]}) {
     justify-content: flex-end;
     height: 50px;
-    margin-right: 40px;
+    margin-right: 30px;
   }
 `
 

diff --git a/centrifuge-app/src/components/PillButton.tsx b/centrifuge-app/src/components/PillButton.tsx
@@ -14,11 +14,13 @@ const Pill = styled.button<{ variant?: 'small' | 'regular' }>(
     backgroundColor: 'backgroundSecondary',
     textDecoration: 'none',
     borderRadius: 20,
+    lineHeight: 20,
     '&:visited, &:active': {
       color: 'textPrimary',
     },
     '&:hover': {
-      color: 'textGold',
+      color: 'textInverted',
+      backgroundColor: 'textPrimary',
     },
   }),
   ({ theme }) => ({
@@ -32,11 +34,11 @@ const Pill = styled.button<{ variant?: 'small' | 'regular' }>(
       ? css({
           borderRadius: '20px',
           fontSize: '14px',
-          padding: '2px 8px',
+          padding: '8px 16px',
         })
       : css({
           borderRadius: '12px',
-          padding: '2px 10px',
+          padding: '4px 12px',
           fontSize: '12px',
         })
 )

diff --git a/centrifuge-app/src/components/PoolCard/index.tsx b/centrifuge-app/src/components/PoolCard/index.tsx
@@ -2,7 +2,7 @@ import { CurrencyBalance, Rate, Token } from '@centrifuge/centrifuge-js'
 import { Box, Card, Divider, Stack, Text, Thumbnail } from '@centrifuge/fabric'
 import Decimal from 'decimal.js-light'
 import { useMemo } from 'react'
-import styled from 'styled-components'
+import styled, { useTheme } from 'styled-components'
 import { daysBetween } from '../../utils/date'
 import { formatBalance, formatBalanceAbbreviated, formatPercentage } from '../../utils/formatting'
 import { CardHeader } from '../ListItemCardStyles'
@@ -44,7 +44,8 @@ const StyledCard = styled(Card)`
   padding: 12px;
 
   &:hover {
-    border: 1px solid ${({ theme }) => theme.colors.backgroundInverted};
+    border: 1px solid ${({ theme }) => theme.colors.backgroundTertiary};
+    box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);
   }
 
   @media (min-width: ${({ theme }) => theme.breakpoints['M']}) {
@@ -109,6 +110,7 @@ export function PoolCard({
   metaData,
   createdAt,
 }: PoolCardProps) {
+  const theme = useTheme()
   const isOneTranche = tranches && tranches?.length === 1
   const isTinlakePool =
     poolId === '0x53b2d22d07E069a3b132BfeaaD275b10273d381E' ||
@@ -184,7 +186,15 @@ export function PoolCard({
             </Text>
           </Box>
           {iconUri ? (
-            <Box as="img" src={iconUri} alt="" height={38} width={38} borderRadius="4px" />
+            <Box
+              as="img"
+              src={iconUri}
+              alt=""
+              height={38}
+              width={38}
+              border={`1px solid ${theme.colors.backgroundTertiary}`}
+              borderRadius={4}
+            />
           ) : (
             <Thumbnail type="pool" label="LP" size="large" />
           )}

diff --git a/centrifuge-app/src/components/PoolList.tsx b/centrifuge-app/src/components/PoolList.tsx
@@ -22,6 +22,19 @@ const PoolCardBox = styled<typeof Box & { status?: PoolStatusKey }>(Box)`
   }
 `
 
+const StyledBox = styled(Box)`
+  background-color: transparent;
+  border: none;
+  &:hover {
+    svg {
+      color: ${({ theme }) => theme.colors.textGold};
+    }
+    div {
+      color: ${({ theme }) => theme.colors.textGold};
+    }
+  }
+`
+
 const upcomingPools: PoolCardProps[] = []
 
 export function PoolList() {
@@ -93,7 +106,7 @@ export function PoolList() {
       </Stack>
       {!metadataIsLoading && archivedPools.length > 0 && (
         <>
-          <Box display="flex" alignItems="center" marginBottom={1}>
+          <StyledBox display="flex" alignItems="center" marginBottom={1} as="button">
             <Text
               style={{ cursor: 'pointer' }}
               color="textSecondary"
@@ -103,7 +116,7 @@ export function PoolList() {
               {showArchived ? 'Hide archived pools' : 'View archived pools'}
             </Text>
             {!showArchived && <IconChevronRight color="textSecondary" size={18} />}
-          </Box>
+          </StyledBox>
           {showArchived && <ArchivedPools pools={archivedPools} />}
         </>
       )}

diff --git a/centrifuge-app/src/components/Report/DataFilter.tsx b/centrifuge-app/src/components/Report/DataFilter.tsx
@@ -245,12 +245,12 @@ export function DataFilter({ poolId }: ReportFilterProps) {
             disabled={!csvData}
             download={csvData?.fileName}
             href={csvData?.dataUrl}
-            icon={<IconDownload />}
+            icon={<IconDownload size={20} />}
             small
             variant="inverted"
             style={{ marginLeft: '12px', marginTop: '22px' }}
           >
-            CSV
+            Download
           </AnchorButton>
         </Box>
       </Box>

diff --git a/centrifuge-app/src/components/Report/ReportFilter.tsx b/centrifuge-app/src/components/Report/ReportFilter.tsx
@@ -30,6 +30,7 @@ const StyledButton = styled(Button)<StyledButtonProps>`
     margin-bottom: 0;
   }
   & > span {
+    border-width: 1px;
     border-color: ${({ selected }) => (selected ? 'transparent' : '#B7B7B7')};
   }
   &:hover > span {

diff --git a/centrifuge-app/src/components/Tooltips.tsx b/centrifuge-app/src/components/Tooltips.tsx
@@ -349,17 +349,18 @@ export type TooltipsProps = {
   label?: string | React.ReactNode
   props?: any
   size?: 'med' | 'sm'
+  color?: string
 } & Partial<Pick<TextProps, 'style' | 'body'>>
 
-export function Tooltips({ type, label: labelOverride, size = 'sm', props, ...textProps }: TooltipsProps) {
+export function Tooltips({ type, label: labelOverride, size = 'sm', props, color, ...textProps }: TooltipsProps) {
   const { label, body } = type ? tooltipText[type] : { label: labelOverride, body: textProps.body }
   return (
     <FabricTooltip body={React.isValidElement(body) ? React.cloneElement(body, props) : body} {...textProps}>
       {typeof label === 'string' ? (
         <Text
           textAlign="left"
           variant={size === 'sm' ? 'label2' : 'label1'}
-          color={size === 'sm' ? 'textPrimary' : 'textSecondary'}
+          color={size === 'sm' && !color ? 'textPrimary' : 'textSecondary'}
           fontWeight={size === 'sm' ? 'inherit' : 400}
         >
           {labelOverride || label}

diff --git a/centrifuge-app/src/pages/Pool/Overview/index.tsx b/centrifuge-app/src/pages/Pool/Overview/index.tsx
@@ -123,12 +123,18 @@ export function PoolDetailOverview() {
           </React.Suspense>
         )}
         <React.Suspense fallback={<Spinner />}>
-          <Grid gridTemplateColumns={'1fr 0.5fr'} gap={2} marginY={3}>
-            <Card p={3} backgroundColor="backgroundSecondary">
+          <Grid
+            gridTemplateColumns="1fr 0.5fr"
+            gap={2}
+            marginY={3}
+            borderBottom={`1px solid ${theme.colors.borderPrimary}`}
+            paddingBottom={3}
+          >
+            <Card p={2} backgroundColor="backgroundSecondary">
               <IssuerDetails metadata={metadata} />
             </Card>
             {metadata?.pool?.reports?.length || !isTinlakePool ? (
-              <Card p={3} backgroundColor="backgroundButtonSecondary">
+              <Card p={2} backgroundColor="backgroundButtonSecondary">
                 <ReportDetails metadata={metadata} />
               </Card>
             ) : null}

diff --git a/fabric/src/components/Button/VisualButton.tsx b/fabric/src/components/Button/VisualButton.tsx
@@ -93,7 +93,7 @@ export const StyledButton = styled.span<StyledProps>(
       color: $disabled ? fgDisabled : $active ? fgHover : fg,
       backgroundColor: $disabled ? bgDisabled : $active ? bgHover : bg,
       borderColor: $disabled ? borderDisabled : $active ? borderHover : border,
-      borderWidth: 1,
+      borderWidth: 3,
       borderRadius: 'button',
       pointerEvents: $disabled ? 'none' : 'initial',
       minHeight: $small ? 32 : 40,
@@ -171,7 +171,7 @@ export function VisualButton({
         ) : (
           <>
             {children && (
-              <Text fontSize={small ? 14 : 16} color="inherit" fontWeight={400}>
+              <Text fontSize={small ? 14 : 16} color="inherit" fontWeight={500}>
                 {children}
               </Text>
             )}

diff --git a/fabric/src/components/Button/WalletButton.tsx b/fabric/src/components/Button/WalletButton.tsx
@@ -24,16 +24,18 @@ const StyledButton = styled.button`
   display: inline-block;
   width: 100%;
   padding: 0;
-  border: none;
+  border-width: 3;
+  border-color: transparent;
   appearance: none;
   background-color: ${({ theme }) => theme.colors.backgroundPrimary};
   outline: 0;
   border-radius: 40px;
   white-space: nowrap;
   & > span {
+    border-width: 3;
     border-color: ${({ theme }) => theme.colors.backgroundPrimary};
     :hover {
-      border-color: ${({ theme }) => theme.colors.backgroundPrimary};
+      border: ${({ theme }) => `3px solid ${theme.colors.borderSecondary}`};
     }
   }
 `

diff --git a/fabric/src/components/Select/index.tsx b/fabric/src/components/Select/index.tsx
@@ -44,6 +44,7 @@ export function SelectInner({
   placeholder,
   disabled,
   small,
+  hideBorder,
   ...rest
 }: Omit<SelectProps, 'label' | 'errorMessage'>) {
   return (
@@ -68,7 +69,12 @@ export function SelectInner({
           </option>
         )}
         {options.map((option, index) => (
-          <option key={`${index}${option.value}`} value={option.value} disabled={option.disabled}>
+          <option
+            key={`${index}${option.value}`}
+            value={option.value}
+            disabled={option.disabled}
+            style={{ textAlign: hideBorder ? 'right' : 'left' }}
+          >
             {option.label}
           </option>
         ))}
@@ -88,7 +94,7 @@ export function Select({ label, errorMessage, id, hideBorder, ...rest }: SelectP
       errorMessage={errorMessage}
       inputElement={
         <StyledInputBox alignItems="stretch" height="input" px={1} hideBorder={hideBorder}>
-          <SelectInner id={id} {...rest} />
+          <SelectInner id={id} {...rest} hideBorder={hideBorder} />
         </StyledInputBox>
       }
     />