From 2d20f405048ab642af6f81b1d4983004dd12d35b Mon Sep 17 00:00:00 2001 From: Qingqi Shi Date: Sun, 14 Mar 2021 23:51:37 +0000 Subject: [PATCH 1/2] fix: fix up numerous issues such as colors and spacing --- .../app/src/views/App/Overview/Portfolio.tsx | 8 ++---- .../components/controls/ButtonTertiary.tsx | 1 - .../src/components/feedback/Modal.tsx | 2 +- .../src/components/layout/EdgePadding.tsx | 28 ++++++++----------- packages/components/src/globalStyle.ts | 17 ++++++++--- packages/components/src/index.ts | 1 + packages/components/src/theme.ts | 6 +++- packages/workers/package.json | 2 +- 8 files changed, 35 insertions(+), 30 deletions(-) diff --git a/packages/app/src/views/App/Overview/Portfolio.tsx b/packages/app/src/views/App/Overview/Portfolio.tsx index 603c826f..8e2d2a02 100644 --- a/packages/app/src/views/App/Overview/Portfolio.tsx +++ b/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}) { diff --git a/packages/components/src/components/controls/ButtonTertiary.tsx b/packages/components/src/components/controls/ButtonTertiary.tsx index de4d68d4..457e909c 100644 --- a/packages/components/src/components/controls/ButtonTertiary.tsx +++ b/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}; diff --git a/packages/components/src/components/feedback/Modal.tsx b/packages/components/src/components/feedback/Modal.tsx index b25a5927..940c8d67 100644 --- a/packages/components/src/components/feedback/Modal.tsx +++ b/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` diff --git a/packages/components/src/components/layout/EdgePadding.tsx b/packages/components/src/components/layout/EdgePadding.tsx index c4aca274..b93f3bd3 100644 --- a/packages/components/src/components/layout/EdgePadding.tsx +++ b/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; diff --git a/packages/components/src/globalStyle.ts b/packages/components/src/globalStyle.ts index 8027a782..a85fbe6e 100644 --- a/packages/components/src/globalStyle.ts +++ b/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; } `; diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts index a63363bf..ba4741ea 100644 --- a/packages/components/src/index.ts +++ b/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'; diff --git a/packages/components/src/theme.ts b/packages/components/src/theme.ts index 2d280a59..ffc5d98c 100644 --- a/packages/components/src/theme.ts +++ b/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 = { diff --git a/packages/workers/package.json b/packages/workers/package.json index cf09d6fe..7ca3b92d 100644 --- a/packages/workers/package.json +++ b/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\"" }, From 62044ca3a503eeee814e424aa010839ac71d1eba Mon Sep 17 00:00:00 2001 From: Qingqi Shi Date: Mon, 15 Mar 2021 00:01:59 +0000 Subject: [PATCH 2/2] fix: fix fab --- .../components/src/components/controls/Fab.tsx | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/packages/components/src/components/controls/Fab.tsx b/packages/components/src/components/controls/Fab.tsx index 10741650..727b247f 100644 --- a/packages/components/src/components/controls/Fab.tsx +++ b/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)); } `;