fix: numerous issues such as colors, spacing and zIndex

packages/app/src/views/App/Overview/Portfolio.tsx

@@ -11,6 +11,7 @@ import {
   DateRangeTabs,
   DropdownMenu,
   Fab,
+  invertEdgePadding,
   OverviewStats,
   PageTitle,
   SectionTitle,
@@ -34,16 +35,11 @@ const Spacer = styled.div`
 `;
 
 const ChartContainer = styled.div`
+  ${invertEdgePadding}
   height: 11.5rem;
-  margin: 0 -1rem;
 
   @media (${v.minTablet}) {
     height: 22.5rem;
-    margin: 0
-      calc(
-        (100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 40rem) /
-          -2
-      );
   }
 
   @media (${v.minLaptop}) {

packages/components/src/components/controls/ButtonTertiary.tsx

@@ -6,7 +6,6 @@ const Button = styled(ButtonBase)`
   color: ${v.accentMain};
   &:hover {
     color: ${v.accentHover};
-    background-color: ${v.backgroundRaised};
   }
   &:active {
     background-color: ${v.backgroundOverlay};

packages/components/src/components/controls/Fab.tsx

@@ -1,23 +1,24 @@
 import styled from 'styled-components';
 import { Plus } from 'phosphor-react';
+import EdgePadding from '../layout/EdgePadding';
 import ButtonBase from './ButtonBase';
 import { v } from '../../theme';
 
-const Container = styled.div`
+const Container = styled(EdgePadding)`
   position: fixed;
-  bottom: calc(${v.edgePadding} + env(safe-area-inset-bottom));
+  bottom: calc(
+    env(safe-area-inset-bottom) + min(${v.upDownPadding}, 4vh) + 5.5rem
+  );
   left: 0;
   right: 0;
   pointer-events: none;
   display: flex;
   justify-content: flex-end;
-  padding-left: calc(env(safe-area-inset-left) + ${v.edgePadding});
-  padding-right: calc(env(safe-area-inset-right) + ${v.edgePadding});
   z-index: ${v.zFixed};
+  max-width: min(100%, calc(${v.maxLayoutWidth} + 10rem));
 
-  @media (${v.minDesktop}) {
-    max-width: 90rem;
-    margin: 0 auto;
+  @media (${v.minTablet}) {
+    bottom: calc(env(safe-area-inset-bottom) + min(${v.upDownPadding}, 4vh));
   }
 `;
 

packages/components/src/components/feedback/Modal.tsx

@@ -15,7 +15,7 @@ const Container = motion(styled.div`
   justify-content: center;
   padding: ${({ theme }) =>
     `calc(${theme.spacings.s} + env(safe-area-inset-top)) ${theme.spacings.s} calc(${theme.spacings.s} + env(safe-area-inset-bottom))`};
-  z-index: ${({ theme }) => theme.zIndex.fixed};
+  z-index: ${({ theme }) => theme.zIndex.backdrop};
 `);
 
 const Backdrop = styled.div`

packages/components/src/components/layout/EdgePadding.tsx

@@ -1,23 +1,19 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { v } from '../../theme';
 
 const EdgePadding = styled.div`
-  padding-left: calc(env(safe-area-inset-left) + ${v.edgePadding});
-  padding-right: calc(env(safe-area-inset-right) + ${v.edgePadding});
-
-  @media (${v.minTablet}) {
-    max-width: 44rem;
-    margin: 0 auto;
-  }
-
-  @media (${v.minLaptop}) {
-    max-width: none;
-  }
+  max-width: ${v.maxLayoutWidth};
+  padding-left: calc(env(safe-area-inset-left) + ${v.leftRightPadding});
+  padding-right: calc(env(safe-area-inset-right) + ${v.leftRightPadding});
+  margin: 0 auto;
+`;
 
-  @media (${v.minDesktop}) {
-    max-width: 80rem;
-    margin: 0 auto;
-  }
+export const invertEdgePadding = css`
+  margin: 0
+    calc(
+      (100vw - (min(${v.maxLayoutWidth}, 100vw) - (${v.leftRightPadding} * 2))) /
+        -2
+    );
 `;
 
 export default EdgePadding;

packages/components/src/globalStyle.ts

@@ -4,18 +4,27 @@ import light from './themes/light';
 import { v } from './theme';
 
 const customProperties = css`
-  --edge-padding: 1rem;
+  --up-down-padding: 1rem;
+  --left-right-padding: 0.5rem;
+  --max-layout-width: 100%;
 
   @media (${v.minTablet}) {
-    --edge-padding: 2rem;
+    --up-down-padding: 2rem;
+    --left-right-padding: 1rem;
+    --max-layout-width: 44rem;
   }
 
   @media (${v.minLaptop}) {
-    --edge-padding: 3.5rem;
+    --up-down-padding: 3.5rem;
+    --left-right-padding: 2rem;
+
+    // TODO: make this 100% after introducing split layout
+    --max-layout-width: 70rem;
   }
 
   @media (${v.minDesktop}) {
-    --edge-padding: 4rem;
+    --up-down-padding: 4rem;
+    --max-layout-width: 90rem;
   }
 `;
 

packages/components/src/index.ts

@@ -37,5 +37,6 @@ export { default as EdgePadding } from './components/layout/EdgePadding';
 export { GlobalStyle } from './globalStyle';
 export { getTheme, v } from './theme';
 export { KeyboardFocusProvider } from './hooks/useKeyboardFocus';
+export { invertEdgePadding } from './components/layout/EdgePadding';
 
 export * from 'framer-motion';

packages/components/src/theme.ts

@@ -47,7 +47,6 @@ export const v = {
   spacerL: '3rem',
   spacerXL: '5rem',
   spacerXXL: '8rem',
-  edgePadding: 'var(--edge-padding, 1rem)',
 
   // Shadows
   shadowPressed:
@@ -60,6 +59,11 @@ export const v = {
   // Border-radius
   radiusCard: '1rem',
   radiusMedia: '0.5rem',
+
+  // Lengths
+  maxLayoutWidth: 'var(--max-layout-width, 100%)',
+  upDownPadding: 'var(--up-down-padding, 1rem)',
+  leftRightPadding: 'var(--left-right-padding, 0.5rem)',
 };
 
 const commonTheme = {

packages/workers/package.json

@@ -8,7 +8,7 @@
   "main": "src/index.ts",
   "scripts": {
     "start": "yarn dev",
-    "dev": "wrangler dev",
+    "dev": "wrangler dev --ip 0.0.0.0",
     "build": "wrangler build --env production",
     "lint": "eslint \"src/**/*.ts\""
   },