add new login splash

Author: jsladerman

www/public/login-bg-img.webp

@@ -32,7 +32,7 @@ import {
   polyfilledHonorableThemeLight,
   polyfilledStyledThemeDark,
   polyfilledStyledThemeLight,
-} from 'styles'
+} from './styles'
 import { OverlayContextProvider } from './components/layout/Overlay'
 import { CursorPositionProvider } from './components/utils/CursorPosition'
 import { INTERCOM_APP_ID } from './constants'

www/src/App.tsx

@@ -70,7 +70,7 @@ export function ClusterListEmptyState() {
 const GridWrapSC = styled.div(({ theme }) => ({
   display: 'grid',
   gridTemplateColumns: '1fr 1fr',
-  gridTemplateRows: 'auto',
+  gridTemplateRows: '300px auto',
   gap: `${theme.spacing.xlarge}px ${theme.spacing.large}px`,
 }))
 

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

@@ -50,7 +50,7 @@ export const CLUSTERS_OVERVIEW_BREADCRUMBS = [
 ]
 
 export function Clusters(): ReactElement | null {
-  const { spacing } = useTheme()
+  const { spacing, mode } = useTheme()
   const [showSupportToast, setShowSupportToast] = useState(false)
   const [showPluralCloudToast, setShowPluralCloudToast] = useState(false)
 
@@ -133,17 +133,25 @@ export function Clusters(): ReactElement | null {
           )}
         </Flex>
         <CopilotCardSC>
-          <AgentChipSC>
-            <CaptionP
-              $color="text-light"
-              css={{ fontWeight: 300 }}
-            >
-              Copilot Agent
-            </CaptionP>
-            <PaperplaneIcon />
-          </AgentChipSC>
+          <Button
+            small
+            as={Link}
+            to="https://docs.plural.sh/plural-features/plural-ai"
+            style={{
+              padding: `0 9px`,
+              borderRadius: 6,
+              borderColor:
+                mode === 'light'
+                  ? 'rgba(0, 0, 0, 0.10)'
+                  : 'rgba(255, 255, 255, 0.10)',
+            }}
+            secondary
+            endIcon={<PaperplaneIcon />}
+          >
+            <AgentButtonTextSC>Plural AI</AgentButtonTextSC>
+          </Button>
           <Body2P $color="text-xlight">
-            Access Plural AI within your instance of the Plural Console.
+            Access Plural AI within your Plural Console.
           </Body2P>
         </CopilotCardSC>
       </Flex>
@@ -229,26 +237,12 @@ const CopilotCardSC = styled(Card)(({ theme }) => ({
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'flex-start',
-  width: 280,
+  width: 380,
   gap: theme.spacing.small,
   padding: `${theme.spacing.medium}px ${theme.spacing.large}px`,
   backgroundColor: theme.colors['fill-zero'],
 }))
 
-const AgentChipSC = styled.div(({ theme }) => ({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  padding: `${theme.spacing.xxsmall}px ${theme.spacing.xsmall}px`,
-  gap: theme.spacing.xxsmall,
-  borderRadius: theme.borderRadiuses.large,
-  border: '1px solid',
-  borderColor:
-    theme.mode === 'light'
-      ? 'rgba(0, 0, 0, 0.10)'
-      : 'rgba(255, 255, 255, 0.10)',
-}))
-
 const PaperplaneIcon = () => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
@@ -273,3 +267,12 @@ const PaperplaneIcon = () => (
     />
   </svg>
 )
+
+const AgentButtonTextSC = styled.p(({ theme }) => ({
+  margin: 0,
+  color: theme.colors['text-light'],
+  fontFamily: theme.fontFamilies.sans,
+  fontSize: 12.8,
+  fontWeight: 300,
+  letterSpacing: '0.128px',
+}))

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

@@ -1,38 +1,74 @@
-import { styledTheme } from '@pluralsh/design-system'
+import { Flex, styledTheme } from '@pluralsh/design-system'
 
 import { Footer, FooterBalancer } from './LoginFooter'
+import styled, { useTheme } from 'styled-components'
+import { themProviderPropTypes } from 'honorable'
 
 export const RIGHT_CONTENT_MAX_WIDTH = 512
 export const RIGHT_CONTENT_PAD = styledTheme.spacing.xxlarge
 export const LOGIN_BREAKPOINT = `@media screen and (min-width: ${
   RIGHT_CONTENT_MAX_WIDTH + RIGHT_CONTENT_PAD * 2
 }px)`
 
+const HERO_IMAGE_URL = '/login-bg-img.webp'
+
 export function LoginPortal({ children }: any) {
+  const { colors } = useTheme()
   return (
-    <div
-      css={{
-        display: 'flex',
-        flexDirection: 'column',
-        flexGrow: 1,
-        flexShrink: 1,
-        height: '100vh',
-        overflow: 'auto',
-        paddingLeft: RIGHT_CONTENT_PAD,
-        paddingRight: RIGHT_CONTENT_PAD,
-      }}
-    >
-      <FooterBalancer />
-      <div
-        css={{
-          margin: 'auto',
-          maxWidth: RIGHT_CONTENT_MAX_WIDTH,
-          width: '100%',
-        }}
+    <WrapperSC>
+      <Flex
+        direction="column"
+        flex={1}
+        height="100vh"
+        overflow="auto"
+        paddingLeft={RIGHT_CONTENT_PAD}
+        paddingRight={RIGHT_CONTENT_PAD}
       >
-        {children}
-      </div>
-      <Footer />
-    </div>
+        <FooterBalancer />
+        <div
+          css={{
+            margin: 'auto',
+            maxWidth: RIGHT_CONTENT_MAX_WIDTH,
+            width: '100%',
+          }}
+        >
+          {children}
+        </div>
+        <Footer />
+      </Flex>
+      <HeroSC />
+    </WrapperSC>
   )
 }
+
+const WrapperSC = styled.div({
+  display: 'grid',
+  gridTemplateColumns: '50% 50%',
+  gridTemplateRows: '1fr',
+  height: '100vh',
+  width: '100vw',
+  overflow: 'hidden',
+})
+const HeroSC = styled.div(({ theme }) => ({
+  background: theme.colors['fill-accent'],
+  position: 'relative',
+  '&::before': {
+    content: '""',
+    position: 'absolute',
+    inset: 40,
+    backgroundImage:
+      'radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px)',
+    backgroundSize: '20px 20px',
+    zIndex: 1,
+  },
+  '&::after': {
+    content: '""',
+    position: 'absolute',
+    inset: 0,
+    backgroundImage: `url(${HERO_IMAGE_URL})`,
+    backgroundSize: '80%',
+    backgroundPosition: 'center',
+    backgroundRepeat: 'no-repeat',
+    zIndex: 2,
+  },
+}))

www/src/components/users/LoginPortal.tsx

@@ -587,9 +587,7 @@ function OAuthOption({ url: { authorizeUrl, provider }, ...props }: any) {
         _hover={{ textDecoration: 'none' }}
         href={authorizeUrl}
         startIcon={
-          <Icon filter="grayscale(1)">
-            {createElement(icon, { size: 20, fullColor: true })}
-          </Icon>
+          <Icon>{createElement(icon, { size: 20, fullColor: true })}</Icon>
         }
         {...props}
       >