diff --git a/content/theme.ts b/content/theme.ts index 8ecbc79f..2495abcb 100644 --- a/content/theme.ts +++ b/content/theme.ts @@ -133,6 +133,8 @@ export const stakingTheme: Partial = { body: { bg: 'navy.900', color: 'white', + backgroundImage: `repeating-linear-gradient(135deg, ${chakraTheme.colors.gray['900']} 0, ${chakraTheme.colors.navy['900']} 1px, transparent 0, transparent 50%)`, + backgroundSize: '12px 12px', }, '::-webkit-scrollbar': { width: '8px', diff --git a/sections/shared/Layout/AppLayout.tsx b/sections/shared/Layout/AppLayout.tsx index 91b77f39..09c77ae8 100644 --- a/sections/shared/Layout/AppLayout.tsx +++ b/sections/shared/Layout/AppLayout.tsx @@ -47,19 +47,25 @@ const AppLayout: FC = ({ children }) => {
)} - {children} + {children} ); }; -const Content = styled.div` +interface ContentProps { + readonly STAKING_V2_ENABLED: boolean; +} + +const Content = styled.div` max-width: 1200px; margin: 0 auto; - ${media.greaterThan('mdUp')` - padding-left: calc(${DESKTOP_SIDE_NAV_WIDTH + DESKTOP_BODY_PADDING}px); - `} + ${({ STAKING_V2_ENABLED }) => media.greaterThan('mdUp')` + padding-left: ${ + STAKING_V2_ENABLED ? '0px' : `calc(${DESKTOP_SIDE_NAV_WIDTH + DESKTOP_BODY_PADDING}px)` + }; + `}; `; export default AppLayout;