Skip to content

Commit

Permalink
fix: numerous issues such as colors, spacing and zIndex (#848)
Browse files Browse the repository at this point in the history
  • Loading branch information
QingqiShi authored Mar 15, 2021
1 parent 0cc439d commit b81cd6c
Show file tree
Hide file tree
Showing 9 changed files with 43 additions and 37 deletions.
8 changes: 2 additions & 6 deletions packages/app/src/views/App/Overview/Portfolio.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
DateRangeTabs,
DropdownMenu,
Fab,
invertEdgePadding,
OverviewStats,
PageTitle,
SectionTitle,
Expand All @@ -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}) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ const Button = styled(ButtonBase)`
color: ${v.accentMain};
&:hover {
color: ${v.accentHover};
background-color: ${v.backgroundRaised};
}
&:active {
background-color: ${v.backgroundOverlay};
Expand Down
15 changes: 8 additions & 7 deletions packages/components/src/components/controls/Fab.tsx
Original file line number Diff line number Diff line change
@@ -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));
}
`;

Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/components/feedback/Modal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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`
Expand Down
28 changes: 12 additions & 16 deletions packages/components/src/components/layout/EdgePadding.tsx
Original file line number Diff line number Diff line change
@@ -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;
17 changes: 13 additions & 4 deletions packages/components/src/globalStyle.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
`;

Expand Down
1 change: 1 addition & 0 deletions packages/components/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
6 changes: 5 additions & 1 deletion packages/components/src/theme.ts
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,6 @@ export const v = {
spacerL: '3rem',
spacerXL: '5rem',
spacerXXL: '8rem',
edgePadding: 'var(--edge-padding, 1rem)',

// Shadows
shadowPressed:
Expand All @@ -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 = {
Expand Down
2 changes: 1 addition & 1 deletion packages/workers/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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\""
},
Expand Down

0 comments on commit b81cd6c

Please sign in to comment.