Skip to content

Commit 25e2f4c

Browse files
dogmardogmar
authored
feat: Add Light mode support (#1292)
1 parent 6251091 commit 25e2f4c

File tree

97 files changed

+5919
-4847
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

97 files changed

+5919
-4847
lines changed

‎www/index.html

+13
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,15 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4+
<script>
5+
const key = 'theme-mode'
6+
function setThemeMode() {
7+
const theme = localStorage.getItem(key) || 'dark'
8+
document.documentElement.setAttribute('data-' + key, theme)
9+
}
10+
window.addEventListener('storage', setThemeMode)
11+
setThemeMode()
12+
</script>
413
<meta charset="utf-8" />
514
<meta name="viewport" content="width=device-width, initial-scale=1" />
615
<meta name="theme-color" content="#000b11" />
@@ -128,6 +137,10 @@
128137
body {
129138
background-color: #171a21;
130139
}
140+
html[data-theme-mode='light'],
141+
html[data-theme-mode='light'] body {
142+
background-color: #f3f5f7;
143+
}
131144
</style>
132145
<!-- Cookiebot MUST BE FIRST script -->
133146
<script

‎www/package.json

+31-33
Original file line numberDiff line numberDiff line change
@@ -44,12 +44,13 @@
4444
"@nivo/geo": "0.83.0",
4545
"@nivo/line": "0.83.0",
4646
"@octokit/core": "4.2.1",
47-
"@pluralsh/design-system": "3.4.1",
48-
"@react-spring/web": "9.7.2",
47+
"@pluralsh/design-system": "3.16.0",
48+
"@react-spring/web": "9.7.3",
4949
"@stripe/react-stripe-js": "2.1.0",
5050
"@stripe/stripe-js": "1.54.0",
5151
"@testing-library/react": "14.0.0",
5252
"apollo-absinthe-upload-link": "1.7.0",
53+
"babel-plugin-styled-components": "2.1.4",
5354
"browserify-zlib": "0.2.0",
5455
"buffer": "6.0.3",
5556
"country-code-lookup": "0.0.23",
@@ -60,7 +61,7 @@
6061
"forge-core": "1.4.6",
6162
"fuse.js": "6.6.2",
6263
"git-url-parse": "13.1.0",
63-
"grommet": "2.32.2",
64+
"grommet": "2.34.2",
6465
"history": "5.3.0",
6566
"honorable": "1.0.0-beta.17",
6667
"honorable-recipe-mp": "0.4.0",
@@ -75,7 +76,6 @@
7576
"process": "0.11.10",
7677
"prop-types": "15.8.1",
7778
"query-string": "8.1.0",
78-
"randomcolor": "0.6.2",
7979
"react": "18.2.0",
8080
"react-animations": "1.0.0",
8181
"react-calendly": "4.1.1",
@@ -108,7 +108,7 @@
108108
"react-virtualized-auto-sizer": "1.0.20",
109109
"react-window": "1.8.9",
110110
"react-window-reversed": "1.4.1",
111-
"rehype-raw": "6.1.1",
111+
"rehype-raw": "7.0.0",
112112
"slate-history": "0.93.0",
113113
"slate-react": "0.95.0",
114114
"stream-browserify": "3.0.0",
@@ -131,51 +131,49 @@
131131
"@graphql-codegen/cli": "4.0.1",
132132
"@graphql-codegen/introspection": "4.0.0",
133133
"@graphql-codegen/named-operations-object": "^2.3.1",
134-
"@graphql-codegen/typescript": "4.0.0",
135-
"@graphql-codegen/typescript-operations": "4.0.0",
136-
"@graphql-codegen/typescript-react-apollo": "3.3.7",
137-
"@pluralsh/eslint-config-typescript": "2.5.84",
138-
"@pluralsh/stylelint-config": "1.1.3",
134+
"@graphql-codegen/typescript": "4.0.1",
135+
"@graphql-codegen/typescript-operations": "4.0.1",
136+
"@graphql-codegen/typescript-react-apollo": "4.1.0",
137+
"@pluralsh/eslint-config-typescript": "2.5.154",
138+
"@pluralsh/stylelint-config": "2.0.10",
139139
"@types/events": "3.0.0",
140-
"@types/jsdom": "21.1.1",
141-
"@types/randomcolor": "0.5.7",
140+
"@types/jsdom": "21.1.5",
142141
"@types/react": "18.2.8",
143142
"@types/react-credit-cards": "0.8.1",
144143
"@types/react-dom": "18.2.4",
145144
"@types/react-stripe-elements": "6.0.6",
146-
"@types/styled-components": "5.1.26",
145+
"@types/styled-components": "5.1.30",
147146
"@types/uuid": "9.0.1",
148-
"@typescript-eslint/eslint-plugin": "5.62.0",
149-
"@typescript-eslint/parser": "5.62.0",
150-
"@vitejs/plugin-basic-ssl": "1.0.1",
151-
"@vitejs/plugin-react": "4.0.0",
152-
"@vitest/ui": "0.34.3",
153-
"babel-plugin-styled-components": "2.1.4",
147+
"@typescript-eslint/eslint-plugin": "6.17.0",
148+
"@typescript-eslint/parser": "6.17.0",
149+
"@vitejs/plugin-basic-ssl": "1.0.2",
150+
"@vitejs/plugin-react": "4.2.1",
151+
"@vitest/ui": "1.0.4",
154152
"concurrently": "8.1.0",
155-
"eslint": "8.42.0",
153+
"eslint": "8.56.0",
156154
"eslint-config-pluralsh": "3.1.0",
157-
"eslint-config-prettier": "8.8.0",
158-
"eslint-plugin-import": "2.27.5",
159-
"eslint-plugin-import-newlines": "1.3.1",
160-
"eslint-plugin-jsx-a11y": "6.7.1",
161-
"eslint-plugin-react": "7.32.2",
155+
"eslint-config-prettier": "8.10.0",
156+
"eslint-plugin-import": "2.29.1",
157+
"eslint-plugin-import-newlines": "1.3.4",
158+
"eslint-plugin-jsx-a11y": "6.8.0",
159+
"eslint-plugin-react": "7.33.2",
162160
"eslint-plugin-react-hooks": "4.6.0",
163161
"husky": "8.0.3",
164-
"jsdom": "22.1.0",
165-
"lint-staged": "13.2.2",
162+
"jsdom": "23.0.1",
163+
"lint-staged": "15.2.0",
166164
"npm-run-all": "4.1.5",
167165
"prettier": "2.8.8",
168166
"rollup-plugin-polyfill-node": "0.12.0",
169167
"serve": "14.2.0",
170168
"source-map-explorer": "2.5.3",
171-
"stylelint": "15.7.0",
169+
"stylelint": "15.11.0",
172170
"stylelint-config-prettier": "9.0.5",
173-
"typescript": "5.2.2",
174-
"vite": "4.4.9",
175-
"vite-plugin-pwa": "0.16.3",
171+
"typescript": "5.3.3",
172+
"vite": "4.5.0",
173+
"vite-plugin-pwa": "0.17.4",
176174
"vite-plugin-rewrite-all": "1.0.1",
177-
"vite-tsconfig-paths": "4.2.0",
178-
"vitest": "0.34.3",
175+
"vite-tsconfig-paths": "4.2.2",
176+
"vitest": "1.1.0",
179177
"wait-on": "7.0.1"
180178
},
181179
"lint-staged": {

‎www/public/app-logo-white.png

-5.64 KB
Binary file not shown.

‎www/public/aws-icon.png

-27.2 KB
Binary file not shown.

‎www/public/aws.png

-49.2 KB
Binary file not shown.

‎www/public/azure.png

-24.3 KB
Binary file not shown.

‎www/public/chart.png

-17.7 KB
Loading

‎www/public/equinix-metal.png

-5.5 KB
Binary file not shown.

‎www/public/header-logo-dark.png

2.76 KB
Loading

‎www/public/header-logo-light.png

4.19 KB
Loading

‎www/public/kind.png

-38.3 KB
Loading

‎www/public/linode.png

-28.3 KB
Binary file not shown.

‎www/public/page-load-spinner/page-load-spinner-logo.svg

+1
Loading

‎www/public/page-load-spinner/page-load-spinner.css

+6-3
Original file line numberDiff line numberDiff line change
@@ -64,10 +64,10 @@
6464
width: var(--loadingLogoHeight);
6565
height: var(--loadingLogoHeight);
6666
background-color: #ffffff;
67-
mask: url(/logos/plural-logomark-only-white.svg) 0 0 / contain no-repeat;
68-
-webkit-mask: url(/logos/plural-logomark-only-white.svg) 0 0 / contain
67+
mask: url(/page-load-spinner/page-load-spinner-logo.svg) 0 0 / contain no-repeat;
68+
-webkit-mask: url(/page-load-spinner/page-load-spinner-logo.svg) 0 0 / contain
6969
no-repeat;
70-
background: url(/logos/plural-logomark-only-white.svg);
70+
background: url(/page-load-spinner/page-load-spinner-logo.svg);
7171
background-size: contain;
7272
}
7373
@supports (aspect-ratio: 1 / 1) {
@@ -113,6 +113,9 @@
113113
margin-top: 24px;
114114
text-align: center;
115115
}
116+
html[data-theme-mode='light'] #loading-placeholder h1 {
117+
color: #5d626f;
118+
}
116119

117120
#loading-placeholder .dot {
118121
visibility: hidden;

‎www/public/page-load-spinner/page-load-spinner.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
let tickCount = 0
66
let tickInterval
77
const images = [
8-
'/logos/plural-logomark-only-white.svg',
8+
'/page-load-spinner/page-load-spinner-logo.svg',
99
'/page-load-spinner/page-load-spinner-bg.png',
1010
]
1111

‎www/public/providers/aws-icon-dark.png

26.9 KB
Loading

‎www/public/providers/aws-icon-light.png

38.6 KB
Loading

‎www/public/providers/azure-icon.png

21.5 KB
Loading

‎www/public/providers/chart-icon.png

23 KB
Loading

‎www/public/providers/equinix-icon.png

2.43 KB
Loading

‎www/public/providers/gcp-icon.png

5.95 KB
Loading

‎www/public/providers/kind-icon.png

45.4 KB
Loading

‎www/public/providers/linode-icon.png

28.8 KB
Loading

‎www/public/terraform.png

-3.17 KB
Loading

‎www/src/App.tsx

+52-34
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,19 @@ import { Suspense, lazy, useEffect } from 'react'
33
import { Route, Routes } from 'react-router-dom'
44
import { ApolloProvider } from '@apollo/client'
55
import { IntercomProvider } from 'react-use-intercom'
6-
import { Box, Grommet, ThemeType } from 'grommet'
6+
import { Grommet, ThemeType } from 'grommet'
77
import {
88
BreadcrumbsProvider,
99
GlobalStyle,
10-
styledTheme,
11-
theme,
10+
honorableThemeDark,
11+
honorableThemeLight,
12+
styledThemeDark,
13+
styledThemeLight,
14+
useThemeColorMode,
1215
} from '@pluralsh/design-system'
1316
import { MarkdocContextProvider } from '@pluralsh/design-system/dist/markdoc'
1417
import { CssBaseline, ThemeProvider, mergeTheme } from 'honorable'
15-
import { ThemeProvider as StyledThemeProvider } from 'styled-components'
18+
import styled, { ThemeProvider as StyledThemeProvider } from 'styled-components'
1619
import { mergeDeep } from '@apollo/client/utilities'
1720
import mpRecipe from 'honorable-recipe-mp'
1821
import { GrowthBook, GrowthBookProvider } from '@growthbook/growthbook-react'
@@ -26,6 +29,7 @@ import { growthbook } from './helpers/growthbook'
2629
import Cookiebot from './utils/cookiebot'
2730
import { OverlayContextProvider } from './components/layout/Overlay'
2831
import NavContextProvider from './contexts/NavigationContext'
32+
import { CursorPositionProvider } from './components/utils/CursorPosition'
2933

3034
const Plural = lazy(() => import('./components/Plural'))
3135
const Invite = lazy(() => import('./components/Invite'))
@@ -75,14 +79,6 @@ const SSOCallback = lazy(() =>
7579
}))
7680
)
7781

78-
const honorableTheme = mergeTheme(theme, {
79-
global: [
80-
// This provides the mp spacing props to honorable
81-
// DEPRECATED in favor of the semantic spacing system
82-
mpRecipe(),
83-
],
84-
})
85-
8682
function PosthogOptInOut() {
8783
useEffect(() => {
8884
if (Cookiebot?.consent?.statistics) {
@@ -105,7 +101,33 @@ function PosthogOptInOut() {
105101
return null
106102
}
107103

104+
const RootBoxSC = styled.div(({ theme }) => ({
105+
display: 'flex',
106+
flexdirection: 'column',
107+
boxSizing: 'border-box',
108+
maxwidth: '100%',
109+
minwidth: 0,
110+
minHeight: 0,
111+
height: '100vh',
112+
width: '100vw',
113+
outline: 'none',
114+
backgroundColor: theme.colors['fill-zero'],
115+
}))
116+
108117
function App() {
118+
const colorMode = useThemeColorMode()
119+
120+
const honorableTheme = mergeTheme(
121+
colorMode === 'light' ? honorableThemeLight : honorableThemeDark,
122+
{
123+
global: [
124+
// This provides the mp spacing props to honorable
125+
// DEPRECATED in favor of the semantic spacing system
126+
mpRecipe(),
127+
],
128+
}
129+
)
130+
const styledTheme = colorMode === 'light' ? styledThemeLight : styledThemeDark
109131
const mergedStyledTheme = mergeDeep(DEFAULT_THEME, styledTheme)
110132

111133
const routes = (
@@ -175,29 +197,25 @@ function App() {
175197
<ThemeProvider theme={honorableTheme}>
176198
<StyledThemeProvider theme={mergedStyledTheme}>
177199
<GrowthBookProvider growthbook={growthbook as any as GrowthBook}>
178-
<MarkdocContextProvider value={{ variant: 'console' }}>
179-
<NavContextProvider>
180-
<OverlayContextProvider>
181-
<BreadcrumbsProvider>
182-
<CssBaseline />
183-
<GlobalStyle />
184-
<Grommet
185-
full
186-
theme={mergedStyledTheme as any as ThemeType}
187-
themeMode="dark"
188-
>
189-
<Box
190-
width="100vw"
191-
height="100vh"
192-
background="#171A21"
200+
<CursorPositionProvider>
201+
<MarkdocContextProvider value={{ variant: 'console' }}>
202+
<NavContextProvider>
203+
<OverlayContextProvider>
204+
<BreadcrumbsProvider>
205+
<CssBaseline />
206+
<GlobalStyle />
207+
<Grommet
208+
full
209+
theme={mergedStyledTheme as any as ThemeType}
210+
themeMode="dark"
193211
>
194-
{routes}
195-
</Box>
196-
</Grommet>
197-
</BreadcrumbsProvider>
198-
</OverlayContextProvider>
199-
</NavContextProvider>
200-
</MarkdocContextProvider>
212+
<RootBoxSC>{routes}</RootBoxSC>
213+
</Grommet>
214+
</BreadcrumbsProvider>
215+
</OverlayContextProvider>
216+
</NavContextProvider>
217+
</MarkdocContextProvider>
218+
</CursorPositionProvider>
201219
</GrowthBookProvider>
202220
</StyledThemeProvider>
203221
</ThemeProvider>

‎www/src/_deprecated/components/repos/constants.ts

-23
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,3 @@
1-
export const DEFAULT_CHART_ICON = '/chart.png'
2-
export const DEFAULT_TF_ICON = '/terraform.png'
3-
export const DEFAULT_DKR_ICON = '/docker.png'
4-
export const DEFAULT_GCP_ICON = '/gcp.png'
5-
export const DEFAULT_AZURE_ICON = '/azure.png'
6-
export const DEFAULT_AWS_ICON = '/aws.png'
7-
export const DEFAULT_EQUINIX_ICON = '/equinix-metal.png'
8-
export const DEFAULT_KIND_ICON = '/kind.png'
9-
export const DARK_AWS_ICON = '/aws-icon.png'
10-
11-
export const ProviderIcons = {
12-
GCP: DEFAULT_GCP_ICON,
13-
AWS: DEFAULT_AWS_ICON,
14-
AZURE: DEFAULT_AZURE_ICON,
15-
EQUINIX: DEFAULT_EQUINIX_ICON,
16-
KIND: DEFAULT_KIND_ICON,
17-
GENERIC: DEFAULT_CHART_ICON,
18-
}
19-
20-
export const DarkProviderIcons = {
21-
AWS: DARK_AWS_ICON,
22-
}
23-
241
export const Categories = {
252
DEVOPS: 'DEVOPS',
263
DATABASE: 'DATABASE',

‎www/src/components/Invite.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ import { useState } from 'react'
66
import { useParams } from 'react-router-dom'
77

88
import {
9-
Invite as InviteT,
10-
User,
9+
type Invite as InviteT,
10+
type User,
1111
useInviteQuery,
1212
useRealizeInviteMutation,
1313
useSignupInviteMutation,

‎www/src/components/account/DnsRecords.tsx

+8-8
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { useMutation, useQuery } from '@apollo/client'
22
import { Box } from 'grommet'
3-
import { Avatar, Button, Div, Flex, Span } from 'honorable'
3+
import { Button, Div, Flex, Span } from 'honorable'
44
import moment from 'moment'
55
import { useState } from 'react'
6-
import { ArrowLeftIcon } from '@pluralsh/design-system'
6+
import { AppIcon, ArrowLeftIcon } from '@pluralsh/design-system'
77

88
import { Placeholder } from '../utils/Placeholder'
99
import {
@@ -16,7 +16,6 @@ import { DeleteIconButton } from '../utils/IconButtons'
1616
import { StandardScroller } from '../utils/SmoothScroller'
1717
import { Table, TableData, TableRow } from '../utils/Table'
1818
import { ProviderIcon } from '../utils/ProviderIcon'
19-
2019
import { Confirm } from '../utils/Confirm'
2120

2221
import { DELETE_DNS_RECORD, DNS_RECORDS } from './queries'
@@ -153,12 +152,13 @@ export function DnsRecords({ domain, setDomain }: any) {
153152
gap="xsmall"
154153
align="center"
155154
>
156-
<Avatar
157-
src={node.creator.avatar}
158-
name={node.creator.name}
159-
size={30}
155+
<AppIcon
156+
url={node?.creator?.avatar || undefined}
157+
name={node.creator?.name || undefined}
158+
size="xxsmall"
159+
spacing={node?.creator?.avatar ? 'none' : undefined}
160160
/>
161-
<Span color="text-light">{node.creator.name}</Span>
161+
<Span color="text-light">{node.creator?.name}</Span>
162162
</Box>
163163
</TableData>
164164
</TableRow>

0 commit comments

Comments
 (0)