Skip to content

Commit 54fa6af

Browse files
committed
deps: update emotion monorepo to v11.3.0
1 parent 690442b commit 54fa6af

File tree

10 files changed

+158
-75
lines changed

10 files changed

+158
-75
lines changed

app/package.json

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,16 +17,15 @@
1717
"build-storybook": "build-storybook -s public"
1818
},
1919
"dependencies": {
20-
"@emotion/core": "10.0.28",
21-
"@emotion/styled": "10.0.27",
20+
"@emotion/react": "11.4.0",
21+
"@emotion/styled": "11.3.0",
2222
"@improbable-eng/grpc-web": "0.14.0",
2323
"big.js": "5.2.2",
2424
"bootstrap": "4.5.0",
2525
"copy-to-clipboard": "3.3.1",
2626
"d3": "6.3.1",
2727
"date-fns": "2.14.0",
2828
"debug": "4.1.1",
29-
"emotion-theming": "10.0.27",
3029
"file-saver": "2.0.2",
3130
"history": "4.10.1",
3231
"http-proxy-middleware": "1.0.4",

app/src/components/common/LoaderLines.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import { observer } from 'mobx-react-lite';
3-
import { keyframes } from '@emotion/core';
3+
import { keyframes } from '@emotion/react';
44
import { styled } from 'components/theme';
55

66
const pulsing1 = keyframes`

app/src/components/common/Stat.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { ReactNode } from 'react';
2-
import { useTheme } from 'emotion-theming';
2+
import { useTheme } from '@emotion/react';
33
import { HeaderFour } from 'components/base';
4-
import { styled, Theme } from 'components/theme';
4+
import { styled } from 'components/theme';
55
import Tip from './Tip';
66

77
const Styled = {
@@ -39,7 +39,7 @@ const Stat: React.FC<Props> = ({
3939
tipPlacement,
4040
tipCapitalize,
4141
}) => {
42-
const theme = useTheme<Theme>();
42+
const theme = useTheme();
4343

4444
let color = '';
4545
if (negative) color = theme.colors.pink;

app/src/components/pool/orders/LeaseList.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
import React from 'react';
22
import { observer } from 'mobx-react-lite';
33
import { ChannelStatus } from 'types/state';
4+
import { Theme } from '@emotion/react';
45
import { usePrefixedTranslation } from 'hooks';
56
import { useStore } from 'store';
67
import { LeaseView } from 'store/views';
78
import { Empty, Scrollable } from 'components/base';
89
import ExternalLink from 'components/common/ExternalLink';
910
import SortableHeader from 'components/common/SortableHeader';
1011
import Tip from 'components/common/Tip';
11-
import { styled, Theme } from 'components/theme';
12+
import { styled } from 'components/theme';
1213
import { Table, TableCell, TableHeader, TableRow } from './OrderTable';
1314

1415
/** maps a lease status to the theme color */

app/src/components/pool/orders/OrdersList.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import React, { useCallback } from 'react';
22
import { observer } from 'mobx-react-lite';
3+
import { Theme } from '@emotion/react';
34
import { usePrefixedTranslation } from 'hooks';
45
import { useStore } from 'store';
56
import { Order } from 'store/models';
67
import { Close, Empty, Scrollable } from 'components/base';
78
import SortableHeader from 'components/common/SortableHeader';
89
import Tip from 'components/common/Tip';
910
import Unit from 'components/common/Unit';
10-
import { styled, Theme } from 'components/theme';
11+
import { styled } from 'components/theme';
1112
import { Table, TableCell, TableHeader, TableRow } from './OrderTable';
1213

1314
/** maps a order status to a theme color */

app/src/components/theme.tsx

Lines changed: 3 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,6 @@
11
import React from 'react';
2-
import emotionStyled, { CreateStyled } from '@emotion/styled/macro';
3-
import { ThemeProvider as EmotionThemeProvider } from 'emotion-theming';
4-
5-
export interface Theme {
6-
fonts: {
7-
open: {
8-
light: string;
9-
regular: string;
10-
semiBold: string;
11-
bold: string;
12-
extraBold: string;
13-
};
14-
work: {
15-
light: string;
16-
medium: string;
17-
semiBold: string;
18-
};
19-
};
20-
sizes: {
21-
xxs: string;
22-
xs: string;
23-
s: string;
24-
m: string;
25-
l: string;
26-
xl: string;
27-
xxl: string;
28-
};
29-
colors: {
30-
blue: string;
31-
darkBlue: string;
32-
gray: string;
33-
darkGray: string;
34-
white: string;
35-
offWhite: string;
36-
pink: string;
37-
green: string;
38-
gold: string;
39-
purple: string;
40-
overlay: string;
41-
gradient: string;
42-
};
43-
}
2+
import { Theme, ThemeProvider as EmotionThemeProvider } from '@emotion/react';
3+
import emotionStyled from '@emotion/styled';
444

455
// use the bootstrap font-families as a fallback while custom fonts are being downloaded
466
const fallbackFont =
@@ -86,7 +46,7 @@ const theme: Theme = {
8646
},
8747
};
8848

89-
export const styled = emotionStyled as CreateStyled<Theme>;
49+
export const styled = emotionStyled;
9050

9151
export const ThemeProvider: React.FC = ({ children }) => {
9252
return <EmotionThemeProvider theme={theme}>{children}</EmotionThemeProvider>;

app/src/components/tour/TourHost.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@
22
import React from 'react';
33
import Tour, { ReactourStep } from 'reactour';
44
import { observer } from 'mobx-react-lite';
5-
import { useTheme } from 'emotion-theming';
5+
import { useTheme } from '@emotion/react';
66
import { useStore } from 'store';
7-
import { styled, Theme } from 'components/theme';
7+
import { styled } from 'components/theme';
88
import ChannelListStep from './ChannelListStep';
99
import LoopInfoStep from './LoopInfoStep';
1010
import NodeStatusStep from './NodeStatusStep';
@@ -135,7 +135,7 @@ const Styled = {
135135

136136
const TourHost: React.FC = () => {
137137
const { appView } = useStore();
138-
const theme = useTheme<Theme>();
138+
const theme = useTheme();
139139

140140
const { Tour } = Styled;
141141
return (

app/src/emotion-theme.d.ts

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import '@emotion/react';
2+
3+
declare module '@emotion/react' {
4+
export interface Theme {
5+
fonts: {
6+
open: {
7+
light: string;
8+
regular: string;
9+
semiBold: string;
10+
bold: string;
11+
extraBold: string;
12+
};
13+
work: {
14+
light: string;
15+
medium: string;
16+
semiBold: string;
17+
};
18+
};
19+
sizes: {
20+
xxs: string;
21+
xs: string;
22+
s: string;
23+
m: string;
24+
l: string;
25+
xl: string;
26+
xxl: string;
27+
};
28+
colors: {
29+
blue: string;
30+
darkBlue: string;
31+
gray: string;
32+
darkGray: string;
33+
white: string;
34+
offWhite: string;
35+
pink: string;
36+
green: string;
37+
gold: string;
38+
purple: string;
39+
overlay: string;
40+
gradient: string;
41+
};
42+
}
43+
}

app/src/util/balances.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1+
import { Theme } from '@emotion/react';
12
import Big from 'big.js';
2-
import { Theme } from 'components/theme';
33
import { percentage } from './bigmath';
44
import { BalanceConfig, BalanceConstraint, BalanceStatus } from './constants';
55

0 commit comments

Comments
 (0)