Remove altair themes, update input and tooltip styles, update styles …

…for invest/redeem
centrifuge · Sep 19, 2024 · 2a138bd · 2a138bd
1 parent d8edca4
commit 2a138bd
Show file tree

Hide file tree

Showing 15 changed files with 47 additions and 142 deletions.
diff --git a/centrifuge-app/src/components/InvestRedeem/InvestForm.tsx b/centrifuge-app/src/components/InvestRedeem/InvestForm.tsx
@@ -195,6 +195,7 @@ export function InvestForm({ autoFocus, investLabel = 'Invest' }: InvestFormProp
                 type="submit"
                 loading={isInvesting}
                 loadingMessage={loadingMessage}
+                variant="secondary"
                 disabled={
                   state.isPoolBusy || (state.poolCurrency?.symbol.toLowerCase().includes('lp') && hasPendingOrder)
                 }

diff --git a/centrifuge-app/src/components/InvestRedeem/InvestRedeem.tsx b/centrifuge-app/src/components/InvestRedeem/InvestRedeem.tsx
@@ -16,7 +16,6 @@ import {
 } from '@centrifuge/fabric'
 import * as React from 'react'
 import { useNavigate } from 'react-router-dom'
-import { useTheme } from 'styled-components'
 import { ethConfig } from '../../config'
 import { formatBalance } from '../../utils/formatting'
 import { useAddress } from '../../utils/useAddress'
@@ -97,18 +96,13 @@ function InvestRedeemInput({ defaultView: defaultViewProp }: InputProps) {
     if (!state.order.remainingRedeemToken.isZero()) defaultView = 'redeem'
   }
   const [view, setView] = React.useState<'invest' | 'redeem'>(defaultView ?? 'invest')
-  const theme = useTheme()
 
   const { data: metadata } = usePoolMetadata(pool)
 
   return (
-    <Stack>
+    <Stack gap={2}>
       {renderGmp(state.poolId, state.trancheId)}
-      <Flex
-        style={{
-          boxShadow: `inset 0 -2px 0 ${theme.colors.borderPrimary}`,
-        }}
-      >
+      <Flex>
         <Tabs
           selectedIndex={view === 'invest' ? 0 : 1}
           onChange={(index) => setView(index === 0 ? 'invest' : 'redeem')}
@@ -117,7 +111,7 @@ function InvestRedeemInput({ defaultView: defaultViewProp }: InputProps) {
           <TabsItem ariaLabel="Go to redeem tab">Redeem</TabsItem>
         </Tabs>
       </Flex>
-      <Box p={2} backgroundColor="backgroundSecondary">
+      <Box p={2} borderWidth="1px" borderColor="borderPrimary" borderStyle="solid" borderRadius="10px">
         {state.isDataLoading ? (
           <Spinner />
         ) : state.isAllowedToInvest ? (
@@ -159,44 +153,27 @@ function Header() {
 
   return (
     <Stack gap={2}>
-      <Text variant="heading2" textAlign="center">
-        {state.trancheCurrency?.symbol} investment overview
-      </Text>
+      <Text variant="heading2">{state.trancheCurrency?.symbol} investment overview</Text>
       {connectedType && (
-        <Shelf
-          justifyContent="space-between"
-          borderWidth="1px 0"
-          borderColor="borderPrimary"
-          borderStyle="solid"
-          py={1}
-        >
-          <Stack>
-            <TextWithPlaceholder variant="body3" color="textSecondary">
-              Position
-            </TextWithPlaceholder>
-            <TextWithPlaceholder variant="heading4" isLoading={state.isDataLoading} width={12} variance={0}>
-              {formatBalance(state.investmentValue, state.poolCurrency?.displayName, 2, 0)}
-            </TextWithPlaceholder>
-          </Stack>
-          {/*
-          <Stack>
-            <TextWithPlaceholder variant="body3" color="textSecondary">
-              Cost basis
+        <Stack>
+          <TextWithPlaceholder variant="body3" color="textSecondary">
+            Investment position
+          </TextWithPlaceholder>
+          <Shelf gap={'3px'}>
+            <TextWithPlaceholder
+              variant="heading2"
+              fontWeight="bold"
+              isLoading={state.isDataLoading}
+              width={12}
+              variance={0}
+            >
+              {formatBalance(state.investmentValue, undefined, 2, 0)}
             </TextWithPlaceholder>
-            <TextWithPlaceholder variant="heading4" isLoading={state.isDataLoading} width={12} variance={0}>
-              -
+            <TextWithPlaceholder variant="heading2" isLoading={state.isDataLoading} width={12} variance={0}>
+              {state.poolCurrency?.displayName}
             </TextWithPlaceholder>
-          </Stack>
-
-          <Stack>
-            <TextWithPlaceholder variant="body3" color="textSecondary">
-              Profit
-            </TextWithPlaceholder>
-            <TextWithPlaceholder variant="heading4" isLoading={state.isDataLoading} width={12} variance={0}>
-              -
-            </TextWithPlaceholder>
-          </Stack> */}
-        </Shelf>
+          </Shelf>
+        </Stack>
       )}
     </Stack>
   )

diff --git a/centrifuge-app/src/components/InvestRedeem/RedeemForm.tsx b/centrifuge-app/src/components/InvestRedeem/RedeemForm.tsx
@@ -168,11 +168,12 @@ export function RedeemForm({ autoFocus }: RedeemFormProps) {
               <Claim type="redeem" onDismiss={() => setClaimDismissed(true)} />
             ) : null}
             {!!preSubmitAction ? (
-              <Button {...preSubmitAction} type="submit">
+              <Button {...preSubmitAction} type="submit" variant="secondary">
                 Redeem
               </Button>
             ) : !state.collectType || claimDismissed ? (
               <Button
+                variant="secondary"
                 type="submit"
                 loading={isRedeeming}
                 loadingMessage={loadingMessage}

diff --git a/centrifuge-app/src/components/PoolOverview/KeyMetrics.tsx b/centrifuge-app/src/components/PoolOverview/KeyMetrics.tsx
@@ -204,7 +204,7 @@ export const KeyMetrics = ({ poolId }: Props) => {
     ...(!!expenseRatio
       ? [
           {
-            metric: <Tooltips type="expenseRatio" variant="secondary" size="med" />,
+            metric: <Tooltips type="expenseRatio" size="med" />,
             value: `${formatBalance(expenseRatio * 100, '', 2)}%`,
           },
         ]

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

diff --git a/fabric/src/components/InputUnit/index.tsx b/fabric/src/components/InputUnit/index.tsx
@@ -36,7 +36,7 @@ export function InputUnit({ id, label, secondaryLabel, errorMessage, inputElemen
           {inputElement}
         </Text>
         {secondaryLabel && (
-          <Text variant="body3" color={disabled ? 'textDisabled' : 'textSecondary'}>
+          <Text variant="body3" color={disabled ? 'textDisabled' : 'textPrimary'}>
             {secondaryLabel}
           </Text>
         )}
@@ -48,7 +48,7 @@ export function InputUnit({ id, label, secondaryLabel, errorMessage, inputElemen
 
 export function InputLabel({ children, disabled }: { children: React.ReactNode; disabled?: boolean }) {
   return (
-    <Text variant="label2" color={disabled ? 'textDisabled' : 'textSecondary'} as="label" htmlFor={useContextId()}>
+    <Text variant="label2" color={disabled ? 'textDisabled' : 'textPrimary'} as="label" htmlFor={useContextId()}>
       {children}
     </Text>
   )

diff --git a/fabric/src/components/TextInput/index.tsx b/fabric/src/components/TextInput/index.tsx
@@ -79,7 +79,7 @@ export const StyledInputAction = styled.button`
   cursor: pointer;
   appearance: none;
   border: none;
-  background: ${(props) => props.theme.colors.backgroundButtonSecondary};
+  background: ${(props) => props.theme.colors.backgroundButtonInverted};
   display: flex;
   justify-content: center;
   align-items: center;
@@ -102,7 +102,7 @@ export const StyledInputAction = styled.button`
 export function InputAction({ children, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement>) {
   return (
     <StyledInputAction type="button" {...props}>
-      <Text variant="interactive1" color="textInverted" fontWeight={400}>
+      <Text variant="interactive1" color="textButtonInverted" fontWeight={400}>
         {children}
       </Text>
     </StyledInputAction>

diff --git a/fabric/src/theme/altairDark.ts b/fabric/src/theme/altairDark.ts
diff --git a/fabric/src/theme/altairLight.ts b/fabric/src/theme/altairLight.ts
diff --git a/fabric/src/theme/centrifugeTheme.ts b/fabric/src/theme/centrifugeTheme.ts
@@ -10,15 +10,15 @@ export const centrifugeTheme: FabricTheme = {
   colors: {
     ...brandCentrifuge,
     ...colorTheme.colors,
-    primarySelectedBackground: blueScale[500],
-    secondarySelectedBackground: blueScale[50],
-    focus: blueScale[500],
-    borderFocus: blueScale[500],
-    borderSelected: blueScale[500],
-    textSelected: blueScale[500],
-    textInteractive: blueScale[500],
-    textInteractiveHover: blueScale[500],
-    accentScale: blueScale,
+    primarySelectedBackground: yellowScale[500],
+    secondarySelectedBackground: yellowScale[50],
+    focus: grayScale[600],
+    borderFocus: grayScale[500],
+    borderSelected: grayScale[500],
+    textSelected: grayScale[500],
+    textInteractive: grayScale[500],
+    textInteractiveHover: grayScale[500],
+    accentScale: yellowScale,
     blueScale,
     yellowScale,
     grayScale,

diff --git a/fabric/src/theme/index.ts b/fabric/src/theme/index.ts
@@ -1,4 +1,2 @@
-export * from './altairDark'
-export * from './altairLight'
 export * from './centrifugeTheme'
 export * from './types'
diff --git a/fabric/src/theme/tokens/baseTheme.ts b/fabric/src/theme/tokens/baseTheme.ts
@@ -20,7 +20,7 @@ export const baseTheme: Omit<FabricTheme, 'colors' | 'scheme'> = {
   radii: {
     tooltip: 4,
     card: 8,
-    input: 2,
+    input: 8,
     button: 4,
     chip: 4,
   },

diff --git a/fabric/src/theme/tokens/colors.ts b/fabric/src/theme/tokens/colors.ts
@@ -6,6 +6,7 @@ export const grayScale = {
   100: '#E7E7E7',
   300: '#CFCFCF',
   500: '#91969B',
+  600: '#667085',
   800: '#252B34',
   900: '#0F1115',
 }

diff --git a/fabric/src/theme/tokens/theme.ts b/fabric/src/theme/tokens/theme.ts
@@ -102,10 +102,10 @@ const colors = {
   backgroundButtonInvertedHover: grayScale[100],
   backgroundButtonInvertedPressed: grayScale[100],
   backgroundButtonInvertedDisabled: grayScale[100],
-  textButtonInverted: black,
-  textButtonInvertedFocus: black,
-  textButtonInvertedHover: black,
-  textButtonInvertedPressed: black,
+  textButtonInverted: grayScale[600],
+  textButtonInvertedFocus: grayScale[600],
+  textButtonInvertedHover: grayScale[600],
+  textButtonInvertedPressed: grayScale[600],
   textButtonInvertedDisabled: grayScale[500],
   borderButtonInverted: grayScale[100],
   borderButtonInvertedFocus: black,

diff --git a/fabric/src/theme/tokens/typography.ts b/fabric/src/theme/tokens/typography.ts
@@ -80,7 +80,7 @@ const typography: ThemeTypography = {
   label2: {
     fontSize: 12,
     lineHeight: 1.375,
-    fontWeight: 400,
+    fontWeight: 500,
     color: 'textSecondary',
   },
 }