Skip to content

Commit 2af3ee9

Browse files
BetreeBetree
authored
deps: Remove styled-components (#1405)
1 parent cf5ed5f commit 2af3ee9

33 files changed

+268
-803
lines changed

‎.babelrc‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,7 @@
1010
],
1111
"@babel/plugin-transform-runtime",
1212
"@babel/plugin-proposal-class-properties",
13-
"@babel/plugin-proposal-object-rest-spread",
14-
"babel-plugin-styled-components"
13+
"@babel/plugin-proposal-object-rest-spread"
1514
],
1615
"env": {
1716
"production": {

‎.github/workflows/e2e.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ env:
77

88
jobs:
99
cypress:
10-
runs-on: ubuntu-20.04 # Remember to update this when changing Erlang version. See https://github.com/erlef/setup-beam
10+
runs-on: ubuntu-22.04 # Remember to update this when changing Erlang version. See https://github.com/erlef/setup-beam
1111
services:
1212
db:
1313
image: captainfact/dev-db:latest

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ app
6464

6565
#### Styling
6666

67-
Styling is based on [Tailwind](https://tailwindcss.com). Some legacy code still uses [styled-components](https://styled-components.com/), but its usage is discouraged.
67+
Styling is based on [Tailwind](https://tailwindcss.com).
6868

6969
## Main Libraries / Frameworks
7070

‎app/App.jsx‎

Lines changed: 25 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import { I18nextProvider } from 'react-i18next'
99
import { Configure, Index, InstantSearch } from 'react-instantsearch-dom'
1010
import { Provider as ReduxProvider } from 'react-redux'
1111
import { polyfill as smoothScrollPolyfill } from 'smoothscroll-polyfill'
12-
import { ThemeProvider } from 'styled-components'
1312

1413
// Import APIs so they can load their configurations
1514
import GraphQLClient from './API/graphql_api'
@@ -23,40 +22,37 @@ import { ALGOLIA_INDEXES_NAMES, searchClient } from './lib/algolia'
2322
import CFRouter from './router'
2423
// Load store
2524
import store from './state'
26-
import theme from './styles/theme'
2725

2826
// Activate polyfills
2927
smoothScrollPolyfill()
3028

3129
const App = () => (
3230
<ToastProvider>
33-
<ThemeProvider theme={theme}>
34-
<ReduxProvider store={store}>
35-
<ApolloProvider client={GraphQLClient}>
36-
<I18nextProvider i18n={i18n}>
37-
<TooltipProvider>
38-
<UserProvider>
39-
<InstantSearch
40-
searchClient={searchClient}
41-
indexName={ALGOLIA_INDEXES_NAMES[ENTITY_VIDEO]}
42-
>
43-
<Index indexName={ALGOLIA_INDEXES_NAMES[ENTITY_VIDEO]}>
44-
<Configure hitsPerPage={16} />
45-
</Index>
46-
<Index indexName={ALGOLIA_INDEXES_NAMES[ENTITY_SPEAKER]}>
47-
<Configure hitsPerPage={32} />
48-
</Index>
49-
<Index indexName={ALGOLIA_INDEXES_NAMES[ENTITY_STATEMENT]}>
50-
<Configure hitsPerPage={24} />
51-
</Index>
52-
<CFRouter />
53-
</InstantSearch>
54-
</UserProvider>
55-
</TooltipProvider>
56-
</I18nextProvider>
57-
</ApolloProvider>
58-
</ReduxProvider>
59-
</ThemeProvider>
31+
<ReduxProvider store={store}>
32+
<ApolloProvider client={GraphQLClient}>
33+
<I18nextProvider i18n={i18n}>
34+
<TooltipProvider>
35+
<UserProvider>
36+
<InstantSearch
37+
searchClient={searchClient}
38+
indexName={ALGOLIA_INDEXES_NAMES[ENTITY_VIDEO]}
39+
>
40+
<Index indexName={ALGOLIA_INDEXES_NAMES[ENTITY_VIDEO]}>
41+
<Configure hitsPerPage={16} />
42+
</Index>
43+
<Index indexName={ALGOLIA_INDEXES_NAMES[ENTITY_SPEAKER]}>
44+
<Configure hitsPerPage={32} />
45+
</Index>
46+
<Index indexName={ALGOLIA_INDEXES_NAMES[ENTITY_STATEMENT]}>
47+
<Configure hitsPerPage={24} />
48+
</Index>
49+
<CFRouter />
50+
</InstantSearch>
51+
</UserProvider>
52+
</TooltipProvider>
53+
</I18nextProvider>
54+
</ApolloProvider>
55+
</ReduxProvider>
6056
</ToastProvider>
6157
)
6258

‎app/components/App/CrashReportPage.jsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import { Github } from 'styled-icons/fa-brands'
66
import { Redo } from 'styled-icons/fa-solid'
77

88
import { optionsToQueryString } from '../../lib/url_utils'
9-
import Container from '../StyledUtils/Container'
109
import { Button } from '../ui/button'
1110
import ExternalLinkNewTab from '../Utils/ExternalLinkNewTab'
1211
import Message from '../Utils/Message'
@@ -68,14 +67,14 @@ const CrashReportPage = ({ t, error }) => {
6867
</Button>
6968
</div>
7069
{stackTrace && (
71-
<Container mt={5} maxWidth={1200}>
70+
<div className="mt-5 max-w-[1200px]">
7271
<details>
7372
<summary style={{ textAlign: 'center', marginBottom: 12 }}>{t('errorDetails')}</summary>
74-
<Container p={3}>
73+
<div className="p-3">
7574
<pre style={{ whiteSpace: 'pre-wrap' }}>{stackTrace}</pre>
76-
</Container>
75+
</div>
7776
</details>
78-
</Container>
77+
</div>
7978
)}
8079
</div>
8180
)

‎app/components/App/MenuToggleSwitch.jsx‎

Lines changed: 8 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,17 @@
11
import PropTypes from 'prop-types'
22
import React from 'react'
33
import { connect } from 'react-redux'
4-
import styled, { withTheme } from 'styled-components'
54
import { Menu as MenuIcon, X as XIcon } from 'styled-icons/boxicons-regular'
6-
import { themeGet } from 'styled-system'
75

86
import { toggleSidebar } from '../../state/user_preferences/reducer'
97

10-
const Button = styled.button`
11-
background: none;
12-
outline: none;
13-
border: 0;
14-
padding: 0;
15-
height: 100%;
16-
width: 45px;
17-
cursor: pointer;
18-
user-select: none;
19-
color: ${themeGet('colors.black.400')};
20-
21-
&:hover {
22-
color: ${themeGet('colors.black.500')};
23-
}
24-
`
25-
268
const MenuToggleSwitch = ({ toggleSidebar, sidebarExpended, toggleableIcon }) => (
27-
<Button onClick={() => toggleSidebar()}>
9+
<button
10+
onClick={() => toggleSidebar()}
11+
className="bg-none outline-none border-0 p-0 h-full w-[45px] cursor-pointer select-none text-[#4a4a4a] hover:text-[#252525]"
12+
>
2813
{sidebarExpended && toggleableIcon ? <XIcon /> : <MenuIcon />}
29-
</Button>
14+
</button>
3015
)
3116

3217
MenuToggleSwitch.propTypes = {
@@ -35,8 +20,6 @@ MenuToggleSwitch.propTypes = {
3520
toggleableIcon: PropTypes.bool.isRequired,
3621
}
3722

38-
export default withTheme(
39-
connect(({ UserPreferences: { sidebarExpended } }) => ({ sidebarExpended }), { toggleSidebar })(
40-
MenuToggleSwitch,
41-
),
42-
)
23+
export default connect(({ UserPreferences: { sidebarExpended } }) => ({ sidebarExpended }), {
24+
toggleSidebar,
25+
})(MenuToggleSwitch)

0 commit comments

Comments
 (0)