cluster overview design updates

Author: jsladerman

www/src/App.tsx

@@ -1,44 +1,46 @@
-import 'react-toggle/style.css'
-import { Suspense, lazy } from 'react'
-import { Route, Routes } from 'react-router-dom'
 import { ApolloProvider } from '@apollo/client'
-import { IntercomProvider } from 'react-use-intercom'
-import { Grommet, ThemeType } from 'grommet'
+import { mergeDeep } from '@apollo/client/utilities'
+import { GrowthBook, GrowthBookProvider } from '@growthbook/growthbook-react'
 import {
   BreadcrumbsProvider,
   GlobalStyle,
-  honorableThemeDark,
-  honorableThemeLight,
-  styledThemeDark,
-  styledThemeLight,
   useThemeColorMode,
 } from '@pluralsh/design-system'
 import { MarkdocContextProvider } from '@pluralsh/design-system/dist/markdoc'
+import { Grommet, ThemeType } from 'grommet'
 import {
   CssBaseline,
   ThemeProvider as HonorableThemeProvider,
   mergeTheme,
 } from 'honorable'
+import mpRecipe from 'honorable-recipe-mp'
+import { Suspense, lazy } from 'react'
+import { Route, Routes } from 'react-router-dom'
+import 'react-toggle/style.css'
+import { IntercomProvider } from 'react-use-intercom'
 import styled, {
   StyleSheetManager,
   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'
 
 import { shouldForwardProp } from './utils/shouldForwardProp'
 
 import { PluralErrorBoundary } from './components/utils/PluralErrorBoundary'
 
-import { client } from './helpers/client'
-import { INTERCOM_APP_ID } from './constants'
-import { DEFAULT_THEME } from './theme'
-import { HistoryRouter, browserHistory } from './router'
-import { growthbook } from './helpers/growthbook'
+import {
+  polyfilledHonorableThemeDark,
+  polyfilledHonorableThemeLight,
+  polyfilledStyledThemeDark,
+  polyfilledStyledThemeLight,
+} from 'styles'
 import { OverlayContextProvider } from './components/layout/Overlay'
-import NavContextProvider from './contexts/NavigationContext'
 import { CursorPositionProvider } from './components/utils/CursorPosition'
+import { INTERCOM_APP_ID } from './constants'
+import NavContextProvider from './contexts/NavigationContext'
+import { client } from './helpers/client'
+import { growthbook } from './helpers/growthbook'
+import { HistoryRouter, browserHistory } from './router'
+import { DEFAULT_THEME } from './theme'
 
 const Plural = lazy(() => import('./components/Plural'))
 const Invite = lazy(() => import('./components/Invite'))
@@ -105,7 +107,9 @@ function App() {
   const colorMode = useThemeColorMode()
 
   const honorableTheme = mergeTheme(
-    colorMode === 'light' ? honorableThemeLight : honorableThemeDark,
+    colorMode === 'light'
+      ? polyfilledHonorableThemeLight
+      : polyfilledHonorableThemeDark,
     {
       global: [
         // This provides the mp spacing props to honorable
@@ -114,7 +118,10 @@ function App() {
       ],
     }
   )
-  const styledTheme = colorMode === 'light' ? styledThemeLight : styledThemeDark
+  const styledTheme =
+    colorMode === 'light'
+      ? polyfilledStyledThemeLight
+      : polyfilledStyledThemeDark
   const mergedStyledTheme = mergeDeep(DEFAULT_THEME, styledTheme)
 
   const routes = (
@@ -182,6 +189,7 @@ function App() {
         <IntercomProvider appId={INTERCOM_APP_ID}>
           <StyleSheetManager shouldForwardProp={shouldForwardProp}>
             <HonorableThemeProvider theme={honorableTheme}>
+              {/* @ts-ignore - this will be fixed when we bump DS */}
               <StyledThemeProvider theme={mergedStyledTheme}>
                 <GrowthBookProvider
                   growthbook={growthbook as any as GrowthBook}

www/src/components/create-cluster/CreateCluster.tsx

@@ -7,7 +7,6 @@ import {
   SendMessageIcon,
   Stepper,
 } from '@pluralsh/design-system'
-import { useNavigate } from 'react-router-dom'
 import styled, { useTheme } from 'styled-components'
 
 import { ReactElement, useMemo, useState } from 'react'
@@ -34,6 +33,7 @@ import {
   cloudSteps,
   localSteps,
 } from './CreateClusterWizard'
+import { Link } from 'react-router-dom'
 
 export const CUR_CREATE_CLUSTER_STEP_KEY = 'cur-create-cluster-step'
 export const CLOUD_OPTION_KEY = 'cloud-option'
@@ -43,7 +43,6 @@ const TTL_KEY = 'create-cluster-ttl'
 
 export function CreateCluster() {
   const theme = useTheme()
-  const navigate = useNavigate()
   const [curStep, setCurStep] = usePersistedState<CreateClusterStepKey>(
     CUR_CREATE_CLUSTER_STEP_KEY,
     CreateClusterStepKey.ChooseCloud,
@@ -129,10 +128,11 @@ export function CreateCluster() {
             width="100%"
           >
             <Button
-              css={{ flex: 1 }}
+              as={Link}
+              to="/overview"
               secondary
               startIcon={<ReturnIcon />}
-              onClick={() => navigate('/overview/clusters/plural-cloud')}
+              style={{ flex: 1 }}
             >
               Back home
             </Button>

www/src/components/layout/ApplicationLayout.tsx

@@ -7,8 +7,10 @@ import Header from './Header'
 import Sidebar from './Sidebar'
 import Subheader from './Subheader'
 import WithApplicationUpdate from './WithApplicationUpdate'
+import { useTheme } from 'styled-components'
 
 function ApplicationLayout({ children }: any) {
+  const { colors } = useTheme()
   const isProduction = import.meta.env.MODE === 'production'
 
   return (
@@ -21,6 +23,7 @@ function ApplicationLayout({ children }: any) {
         overflow="hidden"
         flexDirection="column"
         flexGrow={1}
+        background={colors['fill-accent']}
       >
         {isProduction && (
           <WithApplicationUpdate>

www/src/components/layout/Header.tsx

@@ -11,8 +11,7 @@ const APP_ICON_LIGHT = '/header-logo-light.png'
 const APP_ICON_DARK = '/header-logo-dark.png'
 
 const HeaderSC = styled.div(({ theme }) => ({
-  backgroundColor:
-    theme.mode === 'light' ? theme.colors['fill-one'] : theme.colors.grey[850],
+  backgroundColor: theme.colors['fill-zero'],
   borderBottom: theme.borders.default,
 }))
 

www/src/components/layout/Sidebar.tsx

@@ -135,10 +135,12 @@ function SidebarMenuItem({
   )
 }
 
-const SidebarSC = styled(DSSidebar)((_) => ({
+const SidebarSC = styled(DSSidebar)(({ theme }) => ({
   flexGrow: 1,
   minHeight: 0,
   height: 'auto',
+  background: theme.colors['fill-zero'],
+  borderRight: theme.borders['fill-one'],
   overflow: 'auto',
 }))
 

www/src/components/layout/Subheader.tsx

@@ -59,7 +59,8 @@ const SubheaderContent = styled.div(({ theme }) => ({
   paddingTop: theme.spacing.small,
   paddingBottom: theme.spacing.small,
   alignItems: 'center',
-  backgroundColor: theme.colors['fill-one'],
+  backgroundColor: theme.colors['fill-zero'],
+  borderBottom: theme.borders['fill-one'],
   maxHeight: '100%',
   paddingLeft: theme.spacing.large,
   paddingRight: theme.spacing.large,

www/src/components/overview/OverviewHeader.tsx

@@ -1,7 +1,7 @@
-import { Button, SubTab, TabList } from '@pluralsh/design-system'
+import { SubTab, TabList } from '@pluralsh/design-system'
 import { Flex } from 'honorable'
 import { ReactElement, useRef } from 'react'
-import { useLocation, useNavigate } from 'react-router-dom'
+import { useLocation } from 'react-router-dom'
 
 import { LinkTabWrap } from '../utils/Tabs'
 
@@ -13,7 +13,6 @@ const DIRECTORY = [
 
 export default function OverviewHeader(): ReactElement {
   const tabStateRef = useRef<any>(null)
-  const navigate = useNavigate()
   const { pathname } = useLocation()
   const currentTab = DIRECTORY.find((tab) => pathname?.startsWith(tab.path))
 
@@ -36,11 +35,6 @@ export default function OverviewHeader(): ReactElement {
           </LinkTabWrap>
         ))}
       </TabList>
-      <Flex gap="medium">
-        <Button onClick={() => navigate('/create-cluster')}>
-          Create cluster
-        </Button>
-      </Flex>
     </Flex>
   )
 }

www/src/components/overview/clusters/ClusterListEmptyState.tsx

@@ -1,46 +1,43 @@
-import { Button, Card, ClusterIcon, Flex } from '@pluralsh/design-system'
+import { Button, Card, Flex } from '@pluralsh/design-system'
 import { hasUnfinishedCreation } from 'components/create-cluster/CreateCluster'
 import { useState } from 'react'
-import { useNavigate } from 'react-router-dom'
-import styled, { useTheme } from 'styled-components'
+import { Link } from 'react-router-dom'
+import styled from 'styled-components'
 
+import { Body2P, Title2H1 } from 'components/utils/Typography'
+import ReactPlayer from 'react-player'
+import { ClustersHelpSection } from './ClustersHelpSection'
 import { useDeleteUnfinishedInstance } from './plural-cloud/DeleteInstance'
 
-export default function ClusterListEmptyState() {
-  const theme = useTheme()
-  const navigate = useNavigate()
-
+export function ClusterListEmptyState() {
   const [showUnfinished, setShowUnfinished] = useState(hasUnfinishedCreation())
   const { triggerDelete, loading } = useDeleteUnfinishedInstance({
     onClear: () => setShowUnfinished(false),
   })
 
   return (
-    <Card css={{ minWidth: 'fit-content' }}>
-      <Wrapper>
-        <ClusterIcon size={theme.spacing.xxxlarge} />
+    <GridWrapSC>
+      <CreateClusterCardSC>
         <Flex
           direction="column"
-          gap="xxsmall"
+          gap="small"
           textAlign="center"
-          marginTop={theme.spacing.medium}
         >
-          <span css={theme.partials.text.subtitle2}>
-            You don't have any clusters yet.
-          </span>
-          <span
-            css={{
-              ...theme.partials.text.body2,
-              color: theme.colors['text-light'],
-            }}
+          <Title2H1 css={{ fontWeight: 400 }}>
+            Create your first cluster
+          </Title2H1>
+          <Body2P
+            $color="text-light"
+            css={{ maxWidth: 450 }}
           >
             Once you create your first cluster, you will find an overview of its
             details here.
-          </span>
+          </Body2P>
         </Flex>
         <Button
-          css={{ maxWidth: 300, width: '100%' }}
-          onClick={() => navigate('/create-cluster')}
+          as={Link}
+          to="/create-cluster"
+          style={{ maxWidth: 300, width: '100%' }}
         >
           {showUnfinished ? 'Resume cluster creation' : 'Create cluster'}
         </Button>
@@ -54,17 +51,36 @@ export default function ClusterListEmptyState() {
             Cancel cluster creation
           </Button>
         )}
-      </Wrapper>
-    </Card>
+      </CreateClusterCardSC>
+      <Card css={{ overflow: 'clip', minWidth: 450 }}>
+        <ReactPlayer
+          url="https://www.youtube.com/watch?v=sEb_gflm-ME"
+          controls
+          width="100%"
+          height="100%"
+        />
+      </Card>
+      <div css={{ gridColumn: '1 / -1' }}>
+        <ClustersHelpSection />
+      </div>
+    </GridWrapSC>
   )
 }
 
-const Wrapper = styled.div(({ theme }) => ({
-  margin: 'auto',
+const GridWrapSC = styled.div(({ theme }) => ({
+  display: 'grid',
+  gridTemplateColumns: '1fr 1fr',
+  gridTemplateRows: 'auto',
+  gap: `${theme.spacing.xlarge}px ${theme.spacing.large}px`,
+}))
+
+const CreateClusterCardSC = styled(Card)(({ theme }) => ({
   display: 'flex',
   flexDirection: 'column',
+  justifyContent: 'center',
   alignItems: 'center',
-  maxWidth: '600px',
+  minWidth: 450,
+  background: theme.colors['fill-zero'],
   padding: `${theme.spacing.xxxlarge}px`,
   gap: `${theme.spacing.medium}px`,
 }))