Add review feedback

centrifuge-app/src/components/DemoBanner.tsx

@@ -25,14 +25,14 @@ export const DemoBanner = () => {
       isOpen={isOpen}
       onClose={() => onClose()}
       title={
-        <Text as="h3" color="textInverted" variant="heading4">
+        <Text as="h3" color="white" variant="heading4">
           Welcome to the demo environment of the Centrifuge App. All data and wallet transactions are not real as this
           is purely a testing environment. Read{' '}
           <Text
             target="_blank"
             as="a"
             href="https://centrifuge.hackmd.io/@Anna/H1ylqpRQj"
-            color="textInverted"
+            color="white"
             variant="heading4"
             display="inline"
             textDecoration="underline"

centrifuge-app/src/components/LayoutBase/styles.tsx

@@ -43,13 +43,13 @@ export const Inner = styled(Grid)`
   @media (min-width: ${({ theme }) => theme.breakpoints['M']}) and (max-width: ${({ theme }) =>
       theme.breakpoints['L']}) {
     width: 7vw;
-    background-color: ${({ theme }) => theme.colors.backgroundBlack};
+    background-color: ${({ theme }) => theme.colors.backgroundInverted};
     overflow: visible;
   }
 
   @media (min-width: ${({ theme }) => theme.breakpoints['L']}) {
     width: 15vw;
-    background-color: ${({ theme }) => theme.colors.backgroundBlack};
+    background-color: ${({ theme }) => theme.colors.backgroundInverted};
     padding-left: 16px;
   }
 `
@@ -64,7 +64,7 @@ export const HeaderBackground = styled(Box)`
   width: 100%;
   height: ${HEADER_HEIGHT}px;
 
-  background-color: ${({ theme }) => theme.colors.backgroundBlack};
+  background-color: ${({ theme }) => theme.colors.backgroundInverted};
   border-bottom: ${({ theme }) => `1px solid ${theme.colors.borderPrimary}`};
 
   @media (min-width: ${({ theme }) => theme.breakpoints[BREAK_POINT_COLUMNS]}) {
@@ -73,7 +73,7 @@ export const HeaderBackground = styled(Box)`
 `
 
 export const LogoContainer = styled(Stack)`
-  background-color: ${({ theme }) => theme.colors.backgroundBlack};
+  background-color: ${({ theme }) => theme.colors.backgroundInverted};
   z-index: ${({ theme }) => theme.zIndices.header};
   position: sticky;
   top: 0;

centrifuge-app/src/components/Menu/GovernanceMenu.tsx

@@ -95,7 +95,7 @@ export function GovernanceMenu() {
             ))}
           </Stack>
         ) : (
-          <Panel backgroundColor={theme.colors.backgroundBlack}>
+          <Panel backgroundColor={theme.colors.backgroundInverted}>
             {links.map(({ href, label }) => (
               <MenuItemGroup key={href}>
                 <Box px={2} py={1}>

centrifuge-app/src/components/Menu/IssuerMenu.tsx

@@ -81,7 +81,7 @@ export function IssuerMenu({ defaultOpen = false, children }: IssuerMenuProps) {
             {children}
           </Stack>
         ) : (
-          <Panel backgroundColor={theme.colors.backgroundBlack}>{children}</Panel>
+          <Panel backgroundColor={theme.colors.backgroundInverted}>{children}</Panel>
         )}
       </Box>
     </Box>

centrifuge-app/src/components/Menu/NavManagementMenu.tsx

@@ -74,7 +74,7 @@ export function NavManagementMenu({ stacked }: NavManagementMenuProps) {
               ))}
             </Stack>
           ) : (
-            <Menu backgroundColor={theme.colors.backgroundBlack}>
+            <Menu backgroundColor={theme.colors.backgroundInverted}>
               {allowedPools.map((pool) => (
                 <MenuItemGroup key={pool.id}>
                   <Box px={2} py={1}>

centrifuge-app/src/components/Menu/index.tsx

@@ -38,7 +38,7 @@ export function Menu() {
       flexDirection={['row', 'row', 'column']}
       alignItems={['center', 'center', 'stretch']}
       justifyContent={['space-between', 'space-between']}
-      backgroundColor="backgroundBlack"
+      backgroundColor="backgroundInverted"
     >
       <Box width="100%">
         <PageLink to="/pools" stacked={!isLarge}>

centrifuge-app/src/pages/Pools.tsx

@@ -10,8 +10,8 @@ import { Dec } from '../utils/Decimal'
 
 export default function PoolsPage() {
   const [, listedTokens] = useListedPools()
-  const { totalValueLockedGrowth, isLoading } = useYearOverYearGrowth()
-  const isPositiveYoy = totalValueLockedGrowth > 0
+  const { totalYoyGrowth, isLoading } = useYearOverYearGrowth()
+  const isPositiveYoy = totalYoyGrowth > 0
   const IconComponent = isPositiveYoy ? IconArrowUpRight : IconArrowDown
 
   const totalValueLocked = React.useMemo(() => {
@@ -36,7 +36,7 @@ export default function PoolsPage() {
     <LayoutSection py={5}>
       <Stack gap={4} mb={20}>
         <Stack>
-          <Text as="h3" variant="heading3" color="textBlack">
+          <Text as="h3" variant="heading3">
             Pools of real-world assets
           </Text>
           <Box mt={40}>
@@ -49,13 +49,13 @@ export default function PoolsPage() {
                   <Box display="flex" alignItems="center" pt="2px">
                     <IconComponent size={16} color="ok" />
                     <Text variant="body3" color={isPositiveYoy ? 'ok' : 'warning'}>
-                      {formatBalance(totalValueLockedGrowth ?? 0, '', 2)} YoY
+                      {formatBalance(totalYoyGrowth ?? 0, '', 2)} YoY
                     </Text>
                   </Box>
                 </StatusChip>
               )}
             </Box>
-            <Text as="h1" variant="heading1" color="textBlack" style={{ fontSize: 36 }}>
+            <Text as="h1" variant="heading1" style={{ fontSize: 36 }}>
               {formatBalance(totalValueLocked ?? 0, config.baseCurrency)}
             </Text>
           </Box>

centrifuge-app/src/utils/useListedPools.ts

@@ -124,8 +124,7 @@ export function useYearOverYearGrowth() {
   const currentYearNAV = aggregatedListedPoolsNav.toNumber()
 
   // YoY growth
-  const totalValueLockedGrowth =
-    lastYearNAV && currentYearNAV ? ((currentYearNAV - lastYearNAV) / lastYearNAV) * 100 : 0
+  const totalYoyGrowth = lastYearNAV && currentYearNAV ? ((currentYearNAV - lastYearNAV) / lastYearNAV) * 100 : 0
 
-  return { totalValueLockedGrowth, isLoading }
+  return { totalYoyGrowth, isLoading }
 }

fabric/src/components/Banner/index.tsx

@@ -39,7 +39,7 @@ export function Banner({ children, title, ...props }: BannerProps) {
         py="2"
         px="2"
         maxWidth="540px"
-        backgroundColor={theme.colors.accentPrimary}
+        backgroundColor={theme.colors.backgroundInverted}
         style={{ boxShadow: theme.shadows.cardInteractive }}
       >
         <Shelf gap="1">

fabric/src/components/Tabs/index.tsx

@@ -49,11 +49,11 @@ const StyledTabsItem = styled.button<{ $active?: boolean }>(
       paddingLeft: 2,
       paddingRight: 2,
       paddingBottom: 2,
-      color: $active ? 'textSelected' : 'textPrimary',
-      boxShadow: $active ? `inset 0 -2px 0 ${theme.colors.borderSelected}` : 'none',
+      color: 'textPrimary',
+      boxShadow: $active ? `inset 0 -2px 0 ${theme.colors.textGold}` : 'none',
 
       '&:hover, &:active, &:focus-visible': {
-        color: 'textSelected',
+        color: 'textGold',
       },
     })
   }

fabric/src/theme/altairDark.ts

@@ -22,7 +22,7 @@ export const altairDark: FabricTheme = {
     blueScale,
     yellowScale,
     grayScale,
-    backgroundBlack: black,
+    backgroundInverted: black,
     textGold: gold,
   },
   shadows: {

fabric/src/theme/tokens/colors.ts

@@ -1,17 +1,13 @@
+export const black = '#252B34'
+export const gold = '#FFC500'
+
 export const grayScale = {
   50: '#fbfbfb',
   100: '#f5f5f5',
   300: '#e0e0e0',
   500: '#82888D',
   800: '#424242',
-  900: '#212121',
-}
-
-export const blueScale = {
-  50: '#f0f4ff',
-  100: '#dbe5ff',
-  500: '#1253ff',
-  700: '#002b9e',
+  900: black,
 }
 
 export const yellowScale = {
@@ -28,7 +24,13 @@ export const blackScale = {
   800: '#1A1F27',
 }
 
+// Only for altair
+export const blueScale = {
+  50: '#f0f4ff',
+  100: '#dbe5ff',
+  500: '#1253ff',
+  700: '#002b9e',
+}
+
 export const centrifugeBlue = blueScale[500]
 export const altairYellow = yellowScale[500]
-export const black = '#252B34'
-export const gold = '#FFC012'

fabric/src/theme/tokens/theme.ts

@@ -1,7 +1,7 @@
-import { blackScale, blueScale, centrifugeBlue, grayScale, yellowScale } from './colors'
+import { black, blackScale, centrifugeBlue, gold, grayScale, yellowScale } from './colors'
 
 const statusDefault = grayScale[800]
-const statusInfo = blueScale[500]
+const statusInfo = '#1253ff'
 const statusOk = '#519b10'
 const statusWarning = yellowScale[500]
 const statusCritical = '#d43f2b'
@@ -14,27 +14,22 @@ const statusWarningBg = yellowScale[50]
 const statusCriticalBg = '#fcf0ee'
 const statusPromoteBg = '#f8107114'
 
-const black = '#252B34'
-const gold = '#FFC500'
-
 const colors = {
   textPrimary: grayScale[900],
   textSecondary: grayScale[800],
   textDisabled: grayScale[500],
   textInverted: 'white',
   textGold: gold,
-  textBlack: black,
 
   backgroundPrimary: 'white',
   backgroundSecondary: grayScale[100],
   backgroundTertiary: grayScale[50],
-  backgroundAccentPrimary: blueScale[100],
+  backgroundAccentPrimary: '#dbe5ff',
   backgroundAccentSecondary: '#e9eff2',
   backgroundPage: 'white',
   backgroundInput: 'white',
   backgroundThumbnail: grayScale[500],
   backgroundInverted: grayScale[900],
-  backgroundBlack: black,
 
   borderPrimary: grayScale[100],
   borderSecondary: grayScale[300],

fabric/src/theme/types.ts

@@ -27,7 +27,7 @@ type BackgroundColorName = `background${
   | 'Thumbnail'
   | 'AccentPrimary'
   | 'AccentSecondary'
-  | 'Black'}`
+  | 'Inverted'}`
 type ButtonColorName =
   | `${'background' | 'text' | 'border'}Button${'Primary' | 'Secondary' | 'Tertiary' | 'Inverted'}${
       | ''