Skip to content

Commit

Permalink
Update design system and add ThemeProvider for new styled-components …
Browse files Browse the repository at this point in the history 
…theme

Fix some TS and lint errors
  • Loading branch information
@dogmar
dogmar committed Aug 9, 2022
1 parent e7c775d commit abdb56a
Show file tree
Hide file tree
Showing 6 changed files with 551 additions and 87 deletions.
4 changes: 2 additions & 2 deletions www/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
"@nivo/geo": "0.79.1",
"@nivo/line": "0.79.1",
"@octokit/core": "3.6.0",
"@pluralsh/eslint-config-typescript": "2.2.0",
"@pluralsh/eslint-config-typescript": "2.3.0",
"@testing-library/jest-dom": "5.16.4",
"@testing-library/react": "13.3.0",
"apollo-absinthe-upload-link": "1.7.0",
Expand Down Expand Up @@ -57,7 +57,7 @@
"moment": "2.29.4",
"phoenix": "1.6.11",
"pluralsh-absinthe-socket-apollo-link": "0.2.0",
"pluralsh-design-system": "1.146.0",
"pluralsh-design-system": "1.149.0",
"prop-types": "15.8.1",
"query-string": "7.1.1",
"react": "18.2.0",
Expand Down
146 changes: 77 additions & 69 deletions www/src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,11 @@ import { BrowserRouter, Route, Routes } from 'react-router-dom'
import { ApolloProvider } from '@apollo/client'
import { IntercomProvider } from 'react-use-intercom'
import { Box, Grommet } from 'grommet'
import { theme } from 'pluralsh-design-system'
import { GlobalStyle, styledTheme, theme } from 'pluralsh-design-system'
import { CssBaseline, ThemeProvider, mergeTheme } from 'honorable'
import { ThemeProvider as StyledThemeProvider } from 'styled-components'
import { mergeDeep } from '@apollo/client/utilities'

import mpRecipe from 'honorable-recipe-mp'

import { client } from './helpers/client'
Expand All @@ -29,79 +32,84 @@ const honorableTheme = mergeTheme(theme, {
})

function App() {
const mergedStyledTheme = mergeDeep(DEFAULT_THEME, styledTheme)

return (
<ApolloProvider client={client}>
<IntercomProvider appId={INTERCOM_APP_ID}>
<ThemeProvider theme={honorableTheme}>
<CssBaseline />
<Grommet
full
theme={DEFAULT_THEME}
themeMode="dark"
>
<Box
width="100vw"
height="100vh"
background="#171A21"
<StyledThemeProvider theme={mergedStyledTheme}>
<CssBaseline />
<GlobalStyle />
<Grommet
full
theme={mergedStyledTheme}
themeMode="dark"
>
<BrowserRouter>
<Routes>
<Route
path="/reset-password/:id"
element={<ResetPassword />}
/>
<Route
path="/password-reset"
element={<PasswordReset />}
/>
<Route
path="/confirm-email/:id"
element={<EmailConfirmed />}
/>
<Route
path="/invite/:inviteId"
element={<Invite />}
/>
<Route
path="/passwordless-login/:token"
element={<PasswordlessLogin />}
/>
<Route
path="/oauth/callback/github/shell"
element={<Plural />}
/>
<Route
path="/oauth/callback/gitlab/shell"
element={<Plural />}
/>
<Route
path="/oauth/callback/:service"
element={<OAuthCallback />}
/>
<Route
path="/sso/callback"
element={<SSOCallback />}
/>
<Route
path="/login"
element={<Login />}
/>
<Route
path="/signup"
element={<Signup />}
/>
<Route
path="/oauth/consent"
element={<OAuthConsent />}
/>
<Route
path="*"
element={<Plural />}
/>
</Routes>
</BrowserRouter>
</Box>
</Grommet>
<Box
width="100vw"
height="100vh"
background="#171A21"
>
<BrowserRouter>
<Routes>
<Route
path="/reset-password/:id"
element={<ResetPassword />}
/>
<Route
path="/password-reset"
element={<PasswordReset />}
/>
<Route
path="/confirm-email/:id"
element={<EmailConfirmed />}
/>
<Route
path="/invite/:inviteId"
element={<Invite />}
/>
<Route
path="/passwordless-login/:token"
element={<PasswordlessLogin />}
/>
<Route
path="/oauth/callback/github/shell"
element={<Plural />}
/>
<Route
path="/oauth/callback/gitlab/shell"
element={<Plural />}
/>
<Route
path="/oauth/callback/:service"
element={<OAuthCallback />}
/>
<Route
path="/sso/callback"
element={<SSOCallback />}
/>
<Route
path="/login"
element={<Login />}
/>
<Route
path="/signup"
element={<Signup />}
/>
<Route
path="/oauth/consent"
element={<OAuthConsent />}
/>
<Route
path="*"
element={<Plural />}
/>
</Routes>
</BrowserRouter>
</Box>
</Grommet>
</StyledThemeProvider>
</ThemeProvider>
</IntercomProvider>
</ApolloProvider>
Expand Down
2 changes: 1 addition & 1 deletion www/src/components/clusters/Clusters.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ export function Clusters(): ReactElement | null {

useEffect(() => (data ? setQueue(data?.upgradeQueues[0]) : data), [data])

if (loading) return <LoadingSpinner />
if (loading) return <LoadingSpinner show />

if (!data || !queue) {
return (
Expand Down
3 changes: 2 additions & 1 deletion www/src/components/clusters/ClustersContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ export function ClustersContent(): ReactElement | null {
}),
}), [queue.id, subscribeToMore])

if (!data) return <LoadingSpinner />
if (!data) return <LoadingSpinner show />

return (
<Flex
Expand All @@ -58,6 +58,7 @@ export function ClustersContent(): ReactElement | null {
>
<PageTitle
heading="Upgrades"
headingProps={{}}
>
<Button
secondary
Expand Down
2 changes: 1 addition & 1 deletion www/src/components/layout/Sidebar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -258,7 +258,7 @@ function Sidebar({
const menuRef = useRef()
const notificationsPanelRef = useRef()
const [isMenuOpen, setIsMenuOpened] = useState(false)
const [collapsed, setCollapsed] = useState(true)
const [collapsed, _setCollapsed] = useState(true)
const [isNotificationsPanelOpen, setIsNotificationsPanelOpen] = useState(false)
const sidebarWidth = collapsed ? 65 : 256 - 32 // 64 + 1px border
const previousUserData = getPreviousUserData()
Expand Down
Loading

0 comments on commit abdb56a

Please sign in to comment.