Create pool redesign

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

@@ -199,8 +199,8 @@ export const ContentWrapper = styled.div`
 
   @media (min-width: ${({ theme }) => theme.breakpoints['M']}) and (max-width: ${({ theme }) =>
       theme.breakpoints['L']}) {
-    margin-left: 7vw;
-    width: calc(100% - 7vw);
+    margin-left: 6vw;
+    width: calc(100% - 6vw);
     margin-top: 10px;
   }
 

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

@@ -1,7 +1,7 @@
 import { Box, IconChevronDown, IconChevronRight, IconUser, Menu as Panel, Stack } from '@centrifuge/fabric'
 import * as React from 'react'
 import { useMatch } from 'react-router'
-import { useTheme } from 'styled-components'
+import styled, { useTheme } from 'styled-components'
 import { useIsAboveBreakpoint } from '../../utils/useIsAboveBreakpoint'
 import { Toggle } from './Toggle'
 
@@ -11,6 +11,12 @@ type IssuerMenuProps = {
   children?: React.ReactNode
 }
 
+const StyledPanel = styled(Panel)`
+  & > div {
+    max-height: 50vh;
+  }
+`
+
 export function IssuerMenu({ defaultOpen = false, children }: IssuerMenuProps) {
   const match = useMatch('/issuer/*')
   const isActive = !!match
@@ -81,7 +87,7 @@ export function IssuerMenu({ defaultOpen = false, children }: IssuerMenuProps) {
             {children}
           </Stack>
         ) : (
-          <Panel backgroundColor={theme.colors.backgroundInverted}>{children}</Panel>
+          <StyledPanel backgroundColor={theme.colors.backgroundInverted}>{children}</StyledPanel>
         )}
       </Box>
     </Box>

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

@@ -33,7 +33,7 @@ export function PoolLink({ pool, path = 'issuer' }: PoolLinkProps) {
     <Root
       forwardedAs={Link}
       to={to}
-      variant="interactive1"
+      variant="body2"
       isActive={match && pool.id === match.params.pid}
       onMouseOver={() => prefetchRoute(to)}
     >

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

@@ -4,12 +4,14 @@ import {
   IconGlobe,
   IconInvestments,
   IconNft,
+  IconPlus,
   IconSwitch,
   IconWallet,
   MenuItemGroup,
   Shelf,
   Stack,
 } from '@centrifuge/fabric'
+import styled from 'styled-components'
 import { config } from '../../config'
 import { useAddress } from '../../utils/useAddress'
 import { useIsAboveBreakpoint } from '../../utils/useIsAboveBreakpoint'
@@ -23,6 +25,24 @@ import { NavManagementMenu } from './NavManagementMenu'
 import { PageLink } from './PageLink'
 import { PoolLink } from './PoolLink'
 
+const COLOR = '#7C8085'
+
+const StyledRouterLinkButton = styled(RouterLinkButton)`
+  width: 100%;
+  & > span {
+    background-color: ${COLOR};
+    border-color: transparent;
+    color: white;
+    margin-bottom: 20px;
+
+    &:hover {
+      box-shadow: 0px 0px 0px 3px #7c8085b3;
+      background-color: ${COLOR};
+      color: white;
+    }
+  }
+`
+
 export function Menu() {
   const pools = usePoolsThatAnyConnectedAddressHasPermissionsFor() || []
   const isLarge = useIsAboveBreakpoint('L')
@@ -130,8 +150,8 @@ export function Menu() {
 
 function CreatePool() {
   return (
-    <RouterLinkButton to="/issuer/create-pool" small>
+    <StyledRouterLinkButton icon={<IconPlus size="iconSmall" />} to="/issuer/create-pool" small variant="inverted">
       Create pool
-    </RouterLinkButton>
+    </StyledRouterLinkButton>
   )
 }

centrifuge-app/src/components/Tooltips.tsx

@@ -346,6 +346,18 @@ export const tooltipText = {
     label: 'Total NAV',
     body: 'Total nav minus accrued fees',
   },
+  oneTranche: {
+    label: '',
+    body: 'This pool will only have one investment class where all investors share the same level of risk and return.',
+  },
+  twoTranches: {
+    label: '',
+    body: 'This pool will have two classes. Senior tranche which has priority in receiving returns. And Junior tranche which is the last to receive returns (after Senior tranche obligations are met) but receives higher yield as compensation for the higher risk.',
+  },
+  threeTranches: {
+    label: '',
+    body: 'This pool will have three classes. Senior tranche is the safest tranche with priority in repayment. Mezzanine tranche has intermediate risk and receives payment after Senior tranche obligations are met. Junior tranche which only receives returns after both Senior and Mezzanine tranches are paid.',
+  },
 }
 
 export type TooltipsProps = {