feat: Add Light mode support (#1292)

pluralsh · Jan 5, 2024 · 25e2f4c · 25e2f4c
1 parent 6251091
commit 25e2f4c
Show file tree

Hide file tree

Showing 97 changed files with 5,919 additions and 4,847 deletions.
diff --git a/www/index.html b/www/index.html
@@ -1,6 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
+    <script>
+      const key = 'theme-mode'
+      function setThemeMode() {
+        const theme = localStorage.getItem(key) || 'dark'
+        document.documentElement.setAttribute('data-' + key, theme)
+      }
+      window.addEventListener('storage', setThemeMode)
+      setThemeMode()
+    </script>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000b11" />
@@ -128,6 +137,10 @@
       body {
         background-color: #171a21;
       }
+      html[data-theme-mode='light'],
+      html[data-theme-mode='light'] body {
+        background-color: #f3f5f7;
+      }
     </style>
     <!-- Cookiebot MUST BE FIRST script -->
     <script

diff --git a/www/package.json b/www/package.json
@@ -44,12 +44,13 @@
     "@nivo/geo": "0.83.0",
     "@nivo/line": "0.83.0",
     "@octokit/core": "4.2.1",
-    "@pluralsh/design-system": "3.4.1",
-    "@react-spring/web": "9.7.2",
+    "@pluralsh/design-system": "3.16.0",
+    "@react-spring/web": "9.7.3",
     "@stripe/react-stripe-js": "2.1.0",
     "@stripe/stripe-js": "1.54.0",
     "@testing-library/react": "14.0.0",
     "apollo-absinthe-upload-link": "1.7.0",
+    "babel-plugin-styled-components": "2.1.4",
     "browserify-zlib": "0.2.0",
     "buffer": "6.0.3",
     "country-code-lookup": "0.0.23",
@@ -60,7 +61,7 @@
     "forge-core": "1.4.6",
     "fuse.js": "6.6.2",
     "git-url-parse": "13.1.0",
-    "grommet": "2.32.2",
+    "grommet": "2.34.2",
     "history": "5.3.0",
     "honorable": "1.0.0-beta.17",
     "honorable-recipe-mp": "0.4.0",
@@ -75,7 +76,6 @@
     "process": "0.11.10",
     "prop-types": "15.8.1",
     "query-string": "8.1.0",
-    "randomcolor": "0.6.2",
     "react": "18.2.0",
     "react-animations": "1.0.0",
     "react-calendly": "4.1.1",
@@ -108,7 +108,7 @@
     "react-virtualized-auto-sizer": "1.0.20",
     "react-window": "1.8.9",
     "react-window-reversed": "1.4.1",
-    "rehype-raw": "6.1.1",
+    "rehype-raw": "7.0.0",
     "slate-history": "0.93.0",
     "slate-react": "0.95.0",
     "stream-browserify": "3.0.0",
@@ -131,51 +131,49 @@
     "@graphql-codegen/cli": "4.0.1",
     "@graphql-codegen/introspection": "4.0.0",
     "@graphql-codegen/named-operations-object": "^2.3.1",
-    "@graphql-codegen/typescript": "4.0.0",
-    "@graphql-codegen/typescript-operations": "4.0.0",
-    "@graphql-codegen/typescript-react-apollo": "3.3.7",
-    "@pluralsh/eslint-config-typescript": "2.5.84",
-    "@pluralsh/stylelint-config": "1.1.3",
+    "@graphql-codegen/typescript": "4.0.1",
+    "@graphql-codegen/typescript-operations": "4.0.1",
+    "@graphql-codegen/typescript-react-apollo": "4.1.0",
+    "@pluralsh/eslint-config-typescript": "2.5.154",
+    "@pluralsh/stylelint-config": "2.0.10",
     "@types/events": "3.0.0",
-    "@types/jsdom": "21.1.1",
-    "@types/randomcolor": "0.5.7",
+    "@types/jsdom": "21.1.5",
     "@types/react": "18.2.8",
     "@types/react-credit-cards": "0.8.1",
     "@types/react-dom": "18.2.4",
     "@types/react-stripe-elements": "6.0.6",
-    "@types/styled-components": "5.1.26",
+    "@types/styled-components": "5.1.30",
     "@types/uuid": "9.0.1",
-    "@typescript-eslint/eslint-plugin": "5.62.0",
-    "@typescript-eslint/parser": "5.62.0",
-    "@vitejs/plugin-basic-ssl": "1.0.1",
-    "@vitejs/plugin-react": "4.0.0",
-    "@vitest/ui": "0.34.3",
-    "babel-plugin-styled-components": "2.1.4",
+    "@typescript-eslint/eslint-plugin": "6.17.0",
+    "@typescript-eslint/parser": "6.17.0",
+    "@vitejs/plugin-basic-ssl": "1.0.2",
+    "@vitejs/plugin-react": "4.2.1",
+    "@vitest/ui": "1.0.4",
     "concurrently": "8.1.0",
-    "eslint": "8.42.0",
+    "eslint": "8.56.0",
     "eslint-config-pluralsh": "3.1.0",
-    "eslint-config-prettier": "8.8.0",
-    "eslint-plugin-import": "2.27.5",
-    "eslint-plugin-import-newlines": "1.3.1",
-    "eslint-plugin-jsx-a11y": "6.7.1",
-    "eslint-plugin-react": "7.32.2",
+    "eslint-config-prettier": "8.10.0",
+    "eslint-plugin-import": "2.29.1",
+    "eslint-plugin-import-newlines": "1.3.4",
+    "eslint-plugin-jsx-a11y": "6.8.0",
+    "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-hooks": "4.6.0",
     "husky": "8.0.3",
-    "jsdom": "22.1.0",
-    "lint-staged": "13.2.2",
+    "jsdom": "23.0.1",
+    "lint-staged": "15.2.0",
     "npm-run-all": "4.1.5",
     "prettier": "2.8.8",
     "rollup-plugin-polyfill-node": "0.12.0",
     "serve": "14.2.0",
     "source-map-explorer": "2.5.3",
-    "stylelint": "15.7.0",
+    "stylelint": "15.11.0",
     "stylelint-config-prettier": "9.0.5",
-    "typescript": "5.2.2",
-    "vite": "4.4.9",
-    "vite-plugin-pwa": "0.16.3",
+    "typescript": "5.3.3",
+    "vite": "4.5.0",
+    "vite-plugin-pwa": "0.17.4",
     "vite-plugin-rewrite-all": "1.0.1",
-    "vite-tsconfig-paths": "4.2.0",
-    "vitest": "0.34.3",
+    "vite-tsconfig-paths": "4.2.2",
+    "vitest": "1.1.0",
     "wait-on": "7.0.1"
   },
   "lint-staged": {

diff --git a/www/public/app-logo-white.png b/www/public/app-logo-white.png
diff --git a/www/public/aws-icon.png b/www/public/aws-icon.png
diff --git a/www/public/aws.png b/www/public/aws.png
diff --git a/www/public/azure.png b/www/public/azure.png
diff --git a/www/public/chart.png b/www/public/chart.png
diff --git a/www/public/equinix-metal.png b/www/public/equinix-metal.png
diff --git a/www/public/header-logo-dark.png b/www/public/header-logo-dark.png
diff --git a/www/public/header-logo-light.png b/www/public/header-logo-light.png
diff --git a/www/public/kind.png b/www/public/kind.png
diff --git a/www/public/linode.png b/www/public/linode.png
diff --git a/www/public/page-load-spinner/page-load-spinner-logo.svg b/www/public/page-load-spinner/page-load-spinner-logo.svg
diff --git a/www/public/page-load-spinner/page-load-spinner.css b/www/public/page-load-spinner/page-load-spinner.css
@@ -64,10 +64,10 @@
   width: var(--loadingLogoHeight);
   height: var(--loadingLogoHeight);
   background-color: #ffffff;
-  mask: url(/logos/plural-logomark-only-white.svg) 0 0 / contain no-repeat;
-  -webkit-mask: url(/logos/plural-logomark-only-white.svg) 0 0 / contain
+  mask: url(/page-load-spinner/page-load-spinner-logo.svg) 0 0 / contain no-repeat;
+  -webkit-mask: url(/page-load-spinner/page-load-spinner-logo.svg) 0 0 / contain
     no-repeat;
-  background: url(/logos/plural-logomark-only-white.svg);
+  background: url(/page-load-spinner/page-load-spinner-logo.svg);
   background-size: contain;
 }
 @supports (aspect-ratio: 1 / 1) {
@@ -113,6 +113,9 @@
   margin-top: 24px;
   text-align: center;
 }
+html[data-theme-mode='light'] #loading-placeholder h1 {
+  color: #5d626f;
+}
 
 #loading-placeholder .dot {
   visibility: hidden;

diff --git a/www/public/page-load-spinner/page-load-spinner.js b/www/public/page-load-spinner/page-load-spinner.js
@@ -5,7 +5,7 @@
   let tickCount = 0
   let tickInterval
   const images = [
-    '/logos/plural-logomark-only-white.svg',
+    '/page-load-spinner/page-load-spinner-logo.svg',
     '/page-load-spinner/page-load-spinner-bg.png',
   ]
 

diff --git a/www/public/providers/aws-icon-dark.png b/www/public/providers/aws-icon-dark.png
diff --git a/www/public/providers/aws-icon-light.png b/www/public/providers/aws-icon-light.png
diff --git a/www/public/providers/azure-icon.png b/www/public/providers/azure-icon.png
diff --git a/www/public/providers/chart-icon.png b/www/public/providers/chart-icon.png
diff --git a/www/public/providers/equinix-icon.png b/www/public/providers/equinix-icon.png
diff --git a/www/public/providers/gcp-icon.png b/www/public/providers/gcp-icon.png
diff --git a/www/public/providers/kind-icon.png b/www/public/providers/kind-icon.png
diff --git a/www/public/providers/linode-icon.png b/www/public/providers/linode-icon.png
diff --git a/www/public/terraform.png b/www/public/terraform.png
diff --git a/www/src/App.tsx b/www/src/App.tsx
@@ -3,16 +3,19 @@ import { Suspense, lazy, useEffect } from 'react'
 import { Route, Routes } from 'react-router-dom'
 import { ApolloProvider } from '@apollo/client'
 import { IntercomProvider } from 'react-use-intercom'
-import { Box, Grommet, ThemeType } from 'grommet'
+import { Grommet, ThemeType } from 'grommet'
 import {
   BreadcrumbsProvider,
   GlobalStyle,
-  styledTheme,
-  theme,
+  honorableThemeDark,
+  honorableThemeLight,
+  styledThemeDark,
+  styledThemeLight,
+  useThemeColorMode,
 } from '@pluralsh/design-system'
 import { MarkdocContextProvider } from '@pluralsh/design-system/dist/markdoc'
 import { CssBaseline, ThemeProvider, mergeTheme } from 'honorable'
-import { ThemeProvider as StyledThemeProvider } from 'styled-components'
+import styled, { ThemeProvider as StyledThemeProvider } from 'styled-components'
 import { mergeDeep } from '@apollo/client/utilities'
 import mpRecipe from 'honorable-recipe-mp'
 import { GrowthBook, GrowthBookProvider } from '@growthbook/growthbook-react'
@@ -26,6 +29,7 @@ import { growthbook } from './helpers/growthbook'
 import Cookiebot from './utils/cookiebot'
 import { OverlayContextProvider } from './components/layout/Overlay'
 import NavContextProvider from './contexts/NavigationContext'
+import { CursorPositionProvider } from './components/utils/CursorPosition'
 
 const Plural = lazy(() => import('./components/Plural'))
 const Invite = lazy(() => import('./components/Invite'))
@@ -75,14 +79,6 @@ const SSOCallback = lazy(() =>
   }))
 )
 
-const honorableTheme = mergeTheme(theme, {
-  global: [
-    // This provides the mp spacing props to honorable
-    // DEPRECATED in favor of the semantic spacing system
-    mpRecipe(),
-  ],
-})
-
 function PosthogOptInOut() {
   useEffect(() => {
     if (Cookiebot?.consent?.statistics) {
@@ -105,7 +101,33 @@ function PosthogOptInOut() {
   return null
 }
 
+const RootBoxSC = styled.div(({ theme }) => ({
+  display: 'flex',
+  flexdirection: 'column',
+  boxSizing: 'border-box',
+  maxwidth: '100%',
+  minwidth: 0,
+  minHeight: 0,
+  height: '100vh',
+  width: '100vw',
+  outline: 'none',
+  backgroundColor: theme.colors['fill-zero'],
+}))
+
 function App() {
+  const colorMode = useThemeColorMode()
+
+  const honorableTheme = mergeTheme(
+    colorMode === 'light' ? honorableThemeLight : honorableThemeDark,
+    {
+      global: [
+        // This provides the mp spacing props to honorable
+        // DEPRECATED in favor of the semantic spacing system
+        mpRecipe(),
+      ],
+    }
+  )
+  const styledTheme = colorMode === 'light' ? styledThemeLight : styledThemeDark
   const mergedStyledTheme = mergeDeep(DEFAULT_THEME, styledTheme)
 
   const routes = (
@@ -175,29 +197,25 @@ function App() {
           <ThemeProvider theme={honorableTheme}>
             <StyledThemeProvider theme={mergedStyledTheme}>
               <GrowthBookProvider growthbook={growthbook as any as GrowthBook}>
-                <MarkdocContextProvider value={{ variant: 'console' }}>
-                  <NavContextProvider>
-                    <OverlayContextProvider>
-                      <BreadcrumbsProvider>
-                        <CssBaseline />
-                        <GlobalStyle />
-                        <Grommet
-                          full
-                          theme={mergedStyledTheme as any as ThemeType}
-                          themeMode="dark"
-                        >
-                          <Box
-                            width="100vw"
-                            height="100vh"
-                            background="#171A21"
+                <CursorPositionProvider>
+                  <MarkdocContextProvider value={{ variant: 'console' }}>
+                    <NavContextProvider>
+                      <OverlayContextProvider>
+                        <BreadcrumbsProvider>
+                          <CssBaseline />
+                          <GlobalStyle />
+                          <Grommet
+                            full
+                            theme={mergedStyledTheme as any as ThemeType}
+                            themeMode="dark"
                           >
-                            {routes}
-                          </Box>
-                        </Grommet>
-                      </BreadcrumbsProvider>
-                    </OverlayContextProvider>
-                  </NavContextProvider>
-                </MarkdocContextProvider>
+                            <RootBoxSC>{routes}</RootBoxSC>
+                          </Grommet>
+                        </BreadcrumbsProvider>
+                      </OverlayContextProvider>
+                    </NavContextProvider>
+                  </MarkdocContextProvider>
+                </CursorPositionProvider>
               </GrowthBookProvider>
             </StyledThemeProvider>
           </ThemeProvider>

diff --git a/www/src/_deprecated/components/repos/constants.ts b/www/src/_deprecated/components/repos/constants.ts
@@ -1,26 +1,3 @@
-export const DEFAULT_CHART_ICON = '/chart.png'
-export const DEFAULT_TF_ICON = '/terraform.png'
-export const DEFAULT_DKR_ICON = '/docker.png'
-export const DEFAULT_GCP_ICON = '/gcp.png'
-export const DEFAULT_AZURE_ICON = '/azure.png'
-export const DEFAULT_AWS_ICON = '/aws.png'
-export const DEFAULT_EQUINIX_ICON = '/equinix-metal.png'
-export const DEFAULT_KIND_ICON = '/kind.png'
-export const DARK_AWS_ICON = '/aws-icon.png'
-
-export const ProviderIcons = {
-  GCP: DEFAULT_GCP_ICON,
-  AWS: DEFAULT_AWS_ICON,
-  AZURE: DEFAULT_AZURE_ICON,
-  EQUINIX: DEFAULT_EQUINIX_ICON,
-  KIND: DEFAULT_KIND_ICON,
-  GENERIC: DEFAULT_CHART_ICON,
-}
-
-export const DarkProviderIcons = {
-  AWS: DARK_AWS_ICON,
-}
-
 export const Categories = {
   DEVOPS: 'DEVOPS',
   DATABASE: 'DATABASE',

diff --git a/www/src/components/Invite.tsx b/www/src/components/Invite.tsx
@@ -6,8 +6,8 @@ import { useState } from 'react'
 import { useParams } from 'react-router-dom'
 
 import {
-  Invite as InviteT,
-  User,
+  type Invite as InviteT,
+  type User,
   useInviteQuery,
   useRealizeInviteMutation,
   useSignupInviteMutation,

diff --git a/www/src/components/account/DnsRecords.tsx b/www/src/components/account/DnsRecords.tsx
@@ -1,9 +1,9 @@
 import { useMutation, useQuery } from '@apollo/client'
 import { Box } from 'grommet'
-import { Avatar, Button, Div, Flex, Span } from 'honorable'
+import { Button, Div, Flex, Span } from 'honorable'
 import moment from 'moment'
 import { useState } from 'react'
-import { ArrowLeftIcon } from '@pluralsh/design-system'
+import { AppIcon, ArrowLeftIcon } from '@pluralsh/design-system'
 
 import { Placeholder } from '../utils/Placeholder'
 import {
@@ -16,7 +16,6 @@ import { DeleteIconButton } from '../utils/IconButtons'
 import { StandardScroller } from '../utils/SmoothScroller'
 import { Table, TableData, TableRow } from '../utils/Table'
 import { ProviderIcon } from '../utils/ProviderIcon'
-
 import { Confirm } from '../utils/Confirm'
 
 import { DELETE_DNS_RECORD, DNS_RECORDS } from './queries'
@@ -153,12 +152,13 @@ export function DnsRecords({ domain, setDomain }: any) {
                     gap="xsmall"
                     align="center"
                   >
-                    <Avatar
-                      src={node.creator.avatar}
-                      name={node.creator.name}
-                      size={30}
+                    <AppIcon
+                      url={node?.creator?.avatar || undefined}
+                      name={node.creator?.name || undefined}
+                      size="xxsmall"
+                      spacing={node?.creator?.avatar ? 'none' : undefined}
                     />
-                    <Span color="text-light">{node.creator.name}</Span>
+                    <Span color="text-light">{node.creator?.name}</Span>
                   </Box>
                 </TableData>
               </TableRow>