fix crashes from grommet layer (#1380)

Author: jsladerman

www/src/components/app/AppMetadataPanel.tsx

@@ -27,8 +27,6 @@ export default function AppMetadataPanel({
   return (
     <InfoPanel
       title="Metadata"
-      width={388}
-      marginTop="172px"
       contentHeight={140}
       contentPadding={16}
       contentGap={16}

www/src/components/cluster/ClusterMetadataPanel.tsx

@@ -27,8 +27,6 @@ export default function ClusterMetadataPanel({
   return (
     <InfoPanel
       title="Metadata"
-      width={388}
-      marginTop="155px"
       contentHeight={442}
       contentPadding={16}
       contentGap={16}

www/src/components/shell/terminal/actionbar/cheatsheet/Cheatsheet.tsx

@@ -1,17 +1,13 @@
-import { Layer } from 'grommet'
-import { Card, CloseIcon, IconFrame } from '@pluralsh/design-system'
+import { Card, CloseIcon, IconFrame, Modal } from '@pluralsh/design-system'
 import { Div, Flex, Span } from 'honorable'
 
 import { CheatsheetCommand } from './CheatsheetCommand'
 
 function Cheatsheet({ onClose }) {
   return (
-    <Layer
-      plain
-      animation="fadeIn"
-      position="bottom-right"
-      modal={false}
-      margin={{ bottom: '56x' }}
+    <Modal
+      open
+      onOpenChange={onClose}
     >
       <Card
         fillLevel={2}
@@ -50,7 +46,7 @@ function Cheatsheet({ onClose }) {
         </Flex>
         <CheatsheetCommands />
       </Card>
-    </Layer>
+    </Modal>
   )
 }
 

www/src/components/users/EmailConfirmation.tsx

@@ -1,25 +1,19 @@
-import { useCallback, useContext, useEffect, useState } from 'react'
 import { useMutation } from '@apollo/client'
-import { Box, Layer, Text } from 'grommet'
-import {
-  CloseIcon,
-  ErrorIcon,
-  IconFrame,
-  ReloadIcon,
-} from '@pluralsh/design-system'
-import moment from 'moment'
+import { Button, Flex, SendMessageIcon, Toast } from '@pluralsh/design-system'
+import { Box } from 'grommet'
+import { useCallback, useContext, useEffect, useState } from 'react'
 import { useParams } from 'react-router-dom'
 
 import { useTheme } from 'styled-components'
 
-import { useIsCurrentlyOnboarding } from '../shell/hooks/useOnboarded'
 import CurrentUserContext from '../../contexts/CurrentUserContext'
+import { useIsCurrentlyOnboarding } from '../shell/hooks/useOnboarded'
 import { Alert, AlertStatus, GqlError } from '../utils/Alert'
 import LoadingIndicator from '../utils/LoadingIndicator'
 
+import { LoginPortal } from './LoginPortal'
 import { CREATE_RESET_TOKEN, REALIZE_TOKEN } from './queries'
 import { ResetTokenType } from './types'
-import { LoginPortal } from './LoginPortal'
 
 export function EmailConfirmed() {
   const { id } = useParams()
@@ -77,74 +71,31 @@ export function VerifyEmailConfirmed() {
     return null
 
   return (
-    <Layer
-      plain
-      modal={false}
+    <Toast
+      heading="Email not confirmed"
+      show={open}
+      onClose={close}
       position="top"
-      margin={{ top: 'medium' }}
-      onEsc={close}
-      onClickOutside={close}
+      severity="danger"
+      css={{ marginTop: theme.spacing.medium }}
     >
-      <Box
-        round="xsmall"
-        direction="row"
+      <Flex
         gap="small"
-        background={theme.colors['fill-two']}
-        color={theme.colors.text}
-        border={{ color: theme.colors['fill-three'] }}
-        pad="small"
-        align="center"
+        direction="column"
       >
-        <Box
-          flex={false}
-          align="center"
+        <span>
+          Please confirm your email address to continue using your Plural
+          account.
+        </span>
+        <Button
+          secondary
+          startIcon={<SendMessageIcon />}
+          onClick={() => mutation()}
+          css={{ width: 'fit-content' }}
         >
-          <ErrorIcon
-            size={24}
-            color="error"
-          />
-        </Box>
-        <Box
-          fill="horizontal"
-          align="center"
-        >
-          <Text
-            size="small"
-            weight={500}
-          >
-            Your email is not confirmed
-          </Text>
-          {me.emailConfirmBy && (
-            <Text size="small">
-              you have {moment(me.emailConfirmBy).fromNow(true)} to confirm your
-              email
-            </Text>
-          )}
-        </Box>
-        <Box
-          flex={false}
-          gap="xsmall"
-          direction="row"
-          align="center"
-        >
-          <IconFrame
-            icon={<ReloadIcon />}
-            clickable
-            textValue="Resend"
-            tooltip
-            tooltipProps={{ placement: 'bottom' }}
-            onClick={() => mutation()}
-          />
-          <IconFrame
-            icon={<CloseIcon />}
-            clickable
-            textValue="Close"
-            tooltip
-            tooltipProps={{ placement: 'bottom' }}
-            onClick={() => setOpen(false)}
-          />
-        </Box>
-      </Box>
-    </Layer>
+          Resend confirmation email
+        </Button>
+      </Flex>
+    </Toast>
   )
 }

www/src/components/utils/InfoPanel.tsx

@@ -1,13 +1,10 @@
-import { Card, CloseIcon, IconFrame } from '@pluralsh/design-system'
-import { Layer } from 'grommet'
+import { CloseIcon, IconFrame, Modal } from '@pluralsh/design-system'
 import { Div, Flex, Span } from 'honorable'
 import { ReactNode } from 'react'
 
 type InfoPanelProps = {
   title: string
   onClose?: () => void
-  width?: number | string
-  marginTop?: string
   contentHeight?: number | string
   contentPadding?: number | string
   contentGap?: number | string
@@ -17,58 +14,44 @@ type InfoPanelProps = {
 export function InfoPanel({
   title,
   onClose = () => {},
-  width = 420,
-  marginTop = '0',
   contentHeight = 300,
   contentPadding = 0,
   contentGap = 0,
   children,
 }: InfoPanelProps) {
   return (
-    <Layer
-      plain
-      onClickOutside={onClose}
-      position="top-right"
-      margin={{ top: marginTop }}
+    <Modal
+      open
+      onOpenChange={onClose}
     >
-      <Card
-        fillLevel={2}
-        width={width}
-        overflow="hidden"
-        margin="large"
-      >
-        <Div
-          padding="medium"
-          borderBottom="1px solid border-fill-two"
-        >
-          <Flex
-            align="center"
-            justify="space-between"
-          >
-            <Span
-              fontSize={18}
-              fontWeight={500}
-              lineHeight="24px"
-            >
-              {title}
-            </Span>
-            <IconFrame
-              clickable
-              icon={<CloseIcon />}
-              onClick={(_) => onClose()}
-            />
-          </Flex>
-        </Div>
+      <Div borderBottom="1px solid border-fill-two">
         <Flex
-          direction="column"
-          overflowY="auto"
-          gap={contentGap}
-          padding={contentPadding}
-          height={contentHeight}
+          align="center"
+          justify="space-between"
         >
-          {children}
+          <Span
+            fontSize={18}
+            fontWeight={500}
+            lineHeight="24px"
+          >
+            {title}
+          </Span>
+          <IconFrame
+            clickable
+            icon={<CloseIcon />}
+            onClick={(_) => onClose()}
+          />
         </Flex>
-      </Card>
-    </Layer>
+      </Div>
+      <Flex
+        direction="column"
+        overflowY="auto"
+        gap={contentGap}
+        padding={contentPadding}
+        height={contentHeight}
+      >
+        {children}
+      </Flex>
+    </Modal>
   )
 }