diff --git a/centrifuge-app/src/components/Footer.tsx b/centrifuge-app/src/components/Footer.tsx index 3e121d9a5f..d900b3d95d 100644 --- a/centrifuge-app/src/components/Footer.tsx +++ b/centrifuge-app/src/components/Footer.tsx @@ -10,29 +10,29 @@ export const Footer = () => { return ( <> setIsDialogOpen(false)} /> - + - + Need help? - + Documentation setIsDialogOpen(true)}> - + Investment disclaimer - + Data privacy policy - + Imprint diff --git a/centrifuge-app/src/components/LogoCentrifuge.tsx b/centrifuge-app/src/components/LogoCentrifuge.tsx index 5651b42ab4..baa86d2e38 100644 --- a/centrifuge-app/src/components/LogoCentrifuge.tsx +++ b/centrifuge-app/src/components/LogoCentrifuge.tsx @@ -24,55 +24,55 @@ export function LogoCentrifugeText(props: Omit, 'r fillRule="evenodd" clipRule="evenodd" d="M36.5709 23.8904C37.247 23.3088 38.0718 23.0173 39.0455 23.0173C39.5683 23.0173 40.0233 23.1026 40.4114 23.2726C40.7988 23.4431 41.1187 23.6713 41.3713 23.9576C41.6237 24.2443 41.8083 24.5754 41.9259 24.9516C42.0429 25.3276 42.1017 25.7218 42.1017 26.1335H35.4486C35.5204 25.2203 35.8948 24.4726 36.5709 23.8904ZM42.5885 29.9483C42.2276 30.4679 41.7678 30.8751 41.2092 31.1704C40.65 31.466 39.965 31.6138 39.1537 31.6138C38.6847 31.6138 38.2341 31.5332 37.8015 31.372C37.3687 31.2108 36.9808 30.9916 36.6385 30.7138C36.2958 30.4364 36.0207 30.1051 35.8136 29.7199C35.6062 29.3349 35.4845 28.9098 35.4486 28.4439H45.3201C45.3378 28.3008 45.3472 28.1576 45.3472 28.014V27.5843C45.3472 26.4203 45.1891 25.404 44.8738 24.5351C44.5582 23.6667 44.1207 22.9414 43.5621 22.3592C43.0031 21.7775 42.3404 21.3384 41.5743 21.0429C40.8077 20.7474 39.9739 20.5996 39.0726 20.5996C38.0989 20.5996 37.1929 20.7655 36.3546 21.0967C35.5162 21.4282 34.7902 21.8938 34.1773 22.4936C33.5642 23.0938 33.082 23.8191 32.7305 24.6694C32.3788 25.5203 32.2031 26.4652 32.2031 27.5036C32.2031 28.5605 32.3788 29.5049 32.7305 30.3377C33.082 31.1704 33.5689 31.8735 34.1909 32.4466C34.8129 33.0199 35.5474 33.4631 36.395 33.7763C37.2425 34.0894 38.1709 34.2465 39.1807 34.2465C41.3602 34.2465 43.0766 33.5567 44.331 32.1782L42.5885 29.9483Z" - fill="black" + fill="white" /> @@ -102,19 +102,19 @@ function LogoMark() { fillRule="evenodd" clipRule="evenodd" d="M4.96087 33.0512C3.7019 30.3741 2.99868 27.3874 2.99868 24.2376C2.99868 12.7225 12.3966 3.38776 23.9896 3.38776C30.4447 3.38776 36.2191 6.28215 40.0697 10.8354L42.3668 8.92086C37.9662 3.71707 31.3669 0.40918 23.9896 0.40918C10.7405 0.40918 0 11.0775 0 24.2376C0 27.8374 0.803648 31.2508 2.24249 34.3103L4.96087 33.0512Z" - fill="black" + fill="white" /> ) diff --git a/centrifuge-app/src/components/Menu/GovernanceMenu.tsx b/centrifuge-app/src/components/Menu/GovernanceMenu.tsx index 379c0bb3aa..d5cadd5a03 100644 --- a/centrifuge-app/src/components/Menu/GovernanceMenu.tsx +++ b/centrifuge-app/src/components/Menu/GovernanceMenu.tsx @@ -21,6 +21,10 @@ const ExternalLink = styled(Text)` justify-content: space-between; gap: ${({ theme }) => theme.space[1]}px; white-space: nowrap; + color: ${({ theme }) => theme.colors.textInverted}; + &:hover { + color: ${({ theme }) => theme.colors.textGold}; + } ` export function GovernanceMenu() { @@ -31,6 +35,7 @@ export function GovernanceMenu() { const id = React.useId() const isLarge = useIsAboveBreakpoint('L') const isMedium = useIsAboveBreakpoint('M') + const theme = useTheme() return ( @@ -90,7 +95,7 @@ export function GovernanceMenu() { ))} ) : ( - + {links.map(({ href, label }) => ( diff --git a/centrifuge-app/src/components/Menu/IssuerMenu.tsx b/centrifuge-app/src/components/Menu/IssuerMenu.tsx index 1045b43814..d8439e9735 100644 --- a/centrifuge-app/src/components/Menu/IssuerMenu.tsx +++ b/centrifuge-app/src/components/Menu/IssuerMenu.tsx @@ -1,7 +1,8 @@ -import { Box, IconChevronDown, IconChevronRight, IconUser } from '@centrifuge/fabric' +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 { useIsAboveBreakpoint } from '../../utils/useIsAboveBreakpoint' import { Toggle } from './Toggle' type IssuerMenuProps = { @@ -10,7 +11,7 @@ type IssuerMenuProps = { children?: React.ReactNode } -export function IssuerMenu({ defaultOpen = false, stacked, children }: IssuerMenuProps) { +export function IssuerMenu({ defaultOpen = false, children }: IssuerMenuProps) { const match = useMatch('/issuer/*') const isActive = !!match const [open, setOpen] = React.useState(defaultOpen) @@ -18,16 +19,19 @@ export function IssuerMenu({ defaultOpen = false, stacked, children }: IssuerMen const fullWidth = `calc(100vw - 2 * ${space[1]}px)` const offset = `calc(100% + 2 * ${space[1]}px)` const id = React.useId() + const isLarge = useIsAboveBreakpoint('L') + const isMedium = useIsAboveBreakpoint('M') + const theme = useTheme() React.useEffect(() => { setOpen(defaultOpen) }, [defaultOpen]) return ( - + {open && ( setOpen(!open)} + stacked={!isLarge} + isMedium={isMedium} isActive={isActive} - stacked={stacked} > Issuer - {!stacked && + {isLarge && (open ? ( ) : ( @@ -63,14 +68,21 @@ export function IssuerMenu({ defaultOpen = false, stacked, children }: IssuerMen id={`${id}-menu`} aria-labelledby={`${id}-button`} aria-expanded={!!open} - position={['absolute', 'absolute', 'absolute', 'static']} - top={['auto', 'auto', 0, 0, 'auto']} + position={['absolute', 'absolute', 'absolute', 'relative', 'static']} + top={['auto', 'auto', 0, 'auto']} bottom={[offset, offset, 'auto']} left={[1, 1, offset, offset, 'auto']} - width={[fullWidth, fullWidth, 150, '100%']} + width={[fullWidth, fullWidth, 200, '100%']} mt={[0, 0, 0, 1]} + zIndex={20} > - {children} + {isLarge ? ( + + {children} + + ) : ( + {children} + )} ) diff --git a/centrifuge-app/src/components/Menu/NavManagementMenu.tsx b/centrifuge-app/src/components/Menu/NavManagementMenu.tsx index 8747dff4c2..152d58787e 100644 --- a/centrifuge-app/src/components/Menu/NavManagementMenu.tsx +++ b/centrifuge-app/src/components/Menu/NavManagementMenu.tsx @@ -19,6 +19,7 @@ export function NavManagementMenu({ stacked }: NavManagementMenuProps) { const offset = `calc(100% + 2 * ${space[1]}px)` const id = React.useId() const allowedPools = usePoolsForWhichAccountIsFeeder() + const theme = useTheme() return ( allowedPools && @@ -73,7 +74,7 @@ export function NavManagementMenu({ stacked }: NavManagementMenuProps) { ))} ) : ( - + {allowedPools.map((pool) => ( diff --git a/centrifuge-app/src/components/Menu/PageLink.tsx b/centrifuge-app/src/components/Menu/PageLink.tsx index 4f1578e950..005f06f349 100644 --- a/centrifuge-app/src/components/Menu/PageLink.tsx +++ b/centrifuge-app/src/components/Menu/PageLink.tsx @@ -9,9 +9,14 @@ const Root = styled(Text)<{ isActive?: boolean; stacked?: boolean }>` ${baseButton} ${primaryButton} grid-template-columns: ${({ stacked, theme }) => (stacked ? '1fr' : `${theme.sizes.iconSmall}px 1fr`)}; - color: ${({ isActive }) => (isActive ? 'blue' : 'black')}; /* Example styling */ + color: ${({ isActive, theme }) => + isActive ? theme.colors.textGold : theme.colors.textInverted}; /* Example styling */ font-size: 14px; font-weight: 500; + background-color: transparent; + &:hover { + color: ${({ theme }) => theme.colors.textGold}; + } ` type PageLinkProps = LinkProps & { diff --git a/centrifuge-app/src/components/Menu/PoolLink.tsx b/centrifuge-app/src/components/Menu/PoolLink.tsx index 4aad24a00d..e3eac011a4 100644 --- a/centrifuge-app/src/components/Menu/PoolLink.tsx +++ b/centrifuge-app/src/components/Menu/PoolLink.tsx @@ -14,6 +14,10 @@ const Root = styled(Text)` overflow: hidden; text-overflow: ellipsis; border-radius: ${({ theme }) => theme.radii.input}px; + color: ${({ isActive, theme }) => (isActive ? theme.colors.textGold : theme.colors.textInverted)}; + &:hover { + color: ${({ isActive, theme }) => (isActive ? theme.colors.textGold : theme.colors.textGold)}; + } ` type PoolLinkProps = { @@ -25,7 +29,6 @@ export function PoolLink({ pool, path = 'issuer' }: PoolLinkProps) { const match = useMatch(`/${path}/:pid/*`) const { data: metadata } = usePoolMetadata(pool) const to = `/${path}/${pool.id}` - return ( ` width: 100%; grid-template-columns: ${({ stacked, theme }) => stacked ? '1fr' : `${theme.sizes.iconSmall}px 1fr ${theme.sizes.iconSmall}px`}; + color: ${({ isActive, theme }) => (isActive ? theme.colors.textGold : theme.colors.textInverted)}; + background-color: transparent; + &:hover { + color: ${({ isActive, theme }) => (isActive ? theme.colors.textGold : theme.colors.textInverted)}; + } ` diff --git a/centrifuge-app/src/components/Menu/index.tsx b/centrifuge-app/src/components/Menu/index.tsx index e6a4aaeccf..2ae91518cc 100644 --- a/centrifuge-app/src/components/Menu/index.tsx +++ b/centrifuge-app/src/components/Menu/index.tsx @@ -39,6 +39,7 @@ export function Menu() { flexDirection={['row', 'row', 'column']} alignItems={['center', 'center', 'stretch']} justifyContent={['space-between', 'space-between']} + backgroundColor="backgroundBlack" > diff --git a/centrifuge-app/src/components/PoolOverview/TrancheTokenCards.tsx b/centrifuge-app/src/components/PoolOverview/TrancheTokenCards.tsx index 2da10388f9..3056e66e02 100644 --- a/centrifuge-app/src/components/PoolOverview/TrancheTokenCards.tsx +++ b/centrifuge-app/src/components/PoolOverview/TrancheTokenCards.tsx @@ -78,7 +78,7 @@ const TrancheTokenCard = ({ } return ( - + {trancheToken.name} ({trancheToken.symbol}) diff --git a/centrifuge-react/src/components/WalletMenu/WalletMenu.tsx b/centrifuge-react/src/components/WalletMenu/WalletMenu.tsx index 27782a56df..7aaa8fafa4 100644 --- a/centrifuge-react/src/components/WalletMenu/WalletMenu.tsx +++ b/centrifuge-react/src/components/WalletMenu/WalletMenu.tsx @@ -111,7 +111,7 @@ function ConnectedMenu({ menuItems }: WalletMenuProps) { )} renderContent={(props, ref, state) => ( - + {!isEvmOnSubstrate && ( diff --git a/fabric/src/components/Button/WalletButton.tsx b/fabric/src/components/Button/WalletButton.tsx index 565bbdbcc9..e89aab6536 100644 --- a/fabric/src/components/Button/WalletButton.tsx +++ b/fabric/src/components/Button/WalletButton.tsx @@ -74,7 +74,7 @@ export function WalletButton({ @@ -96,7 +96,7 @@ export function WalletButton({ )} {address && balance && ( - + {balance} )} diff --git a/fabric/src/components/Card/index.ts b/fabric/src/components/Card/index.ts index cf19dc69fb..20f521f6ac 100644 --- a/fabric/src/components/Card/index.ts +++ b/fabric/src/components/Card/index.ts @@ -10,9 +10,9 @@ type Props = { export type CardProps = Props & Omit -export const Card = styled(Box)(({ variant = 'default', backgroundColor }) => - css({ - bg: backgroundColor ?? 'backgroundPage', +export const Card = styled(Box)(({ variant = 'default', backgroundColor }) => { + return css({ + background: backgroundColor ?? 'backgroundPage', borderRadius: 'card', borderWidth: variant === 'default' && !backgroundColor ? 1 : 0, borderStyle: 'solid', @@ -25,4 +25,4 @@ export const Card = styled(Box)(({ variant = 'default', backgroundColor } boxShadow: variant === 'interactive' ? 'cardActive' : undefined, }, }) -) +}) diff --git a/fabric/src/components/Text/index.tsx b/fabric/src/components/Text/index.tsx index c6fa0c8b46..559585ba6c 100644 --- a/fabric/src/components/Text/index.tsx +++ b/fabric/src/components/Text/index.tsx @@ -3,13 +3,13 @@ import * as CSS from 'csstype' import * as React from 'react' import styled, { DefaultTheme, useTheme } from 'styled-components' import { - color, ColorProps, - compose, ResponsiveValue, + TypographyProps as TypographySystemProps, + color, + compose, system, typography as typographySystem, - TypographyProps as TypographySystemProps, } from 'styled-system' import { PropsOf } from '../../utils/types' @@ -92,4 +92,4 @@ const Text = React.forwardRef((props, ref) => { ) }) -export { Text, TextProps, useTextContext, TextContext } +export { Text, TextContext, TextProps, useTextContext }