Fix spacing in forms

www/src/components/account/CreateGroup.tsx

@@ -1,6 +1,6 @@
 import { ReactNode, useCallback, useContext, useEffect, useState } from 'react'
-import { Box } from 'grommet'
 import { Button, Modal, ValidatedInput } from '@pluralsh/design-system'
+import { useTheme } from 'styled-components'
 
 import { appendConnection, updateCache } from '../../utils/graphql'
 import { GqlError } from '../utils/Alert'
@@ -10,6 +10,7 @@ import SubscriptionContext from '../../contexts/SubscriptionContext'
 import BillingFeatureBlockModal from './billing/BillingFeatureBlockModal'
 
 export function CreateGroup({ q }: any) {
+  const theme = useTheme()
   const { availableFeatures } = useContext(SubscriptionContext)
   const isAvailable = !!availableFeatures?.userManagement
   const [createModalVisible, setCreateModalVisible] = useState(false)
@@ -82,9 +83,12 @@ export function CreateGroup({ q }: any) {
           </>
         }
       >
-        <Box
-          width="50vw"
-          gap="small"
+        <div
+          css={{
+            display: 'flex',
+            flexDirection: 'column',
+            gap: theme.spacing.medium,
+          }}
         >
           {errorMsg}
           <ValidatedInput
@@ -97,7 +101,7 @@ export function CreateGroup({ q }: any) {
             value={description}
             onChange={({ target: { value } }) => setDescription(value)}
           />
-        </Box>
+        </div>
       </Modal>
       <BillingFeatureBlockModal
         open={blockModalVisible}

www/src/components/account/CreateServiceAccount.tsx

@@ -43,7 +43,7 @@ function ServiceAccountForm({
   return (
     <Box
       fill
-      gap="small"
+      gap="medium"
       {...box}
     >
       {error && (

www/src/components/account/Group.tsx

@@ -40,7 +40,6 @@ function GroupMember({ user, group, first, last, edit }: any) {
   return (
     <ListItem
       flex={false}
-      background="fill-two"
       first={first}
       last={last}
     >

www/src/components/account/Role.tsx

@@ -1,23 +1,27 @@
-import { Box } from 'grommet'
-import { ValidatedInput } from '@pluralsh/design-system'
+import { ValidatedInput, theme } from '@pluralsh/design-system'
 import { useState } from 'react'
 
 import { BindingInput } from './Typeaheads'
+import { useTheme } from 'styled-components'
 
 export function GeneralAttributes({
   attributes,
   setAttributes,
   bindings,
   setBindings,
 }: any) {
+  const theme = useTheme()
   const [repositories, setRepositories] = useState(
     attributes.repositories?.join(', ')
   )
 
   return (
-    <Box
-      flex={false}
-      gap="small"
+    <div
+      css={{
+        display: 'flex',
+        flexDirection: 'column',
+        rowGap: theme.spacing.medium,
+      }}
     >
       <ValidatedInput
         label="Name"
@@ -68,6 +72,6 @@ export function GeneralAttributes({
           )
         }
       />
-    </Box>
+    </div>
   )
 }

www/src/components/account/RoleForm.tsx

@@ -1,14 +1,13 @@
-import { Box } from 'grommet'
-import { Span } from 'honorable'
 import { Tab, TabList, TabPanel, Switch } from '@pluralsh/design-system'
 import { useCallback, useRef, useState } from 'react'
 
-import { ListItem } from '../profile/ListItem'
 import { GqlError } from '../utils/Alert'
 
 import { PermissionTypes } from './types'
 
 import { GeneralAttributes } from './Role'
+import { useTheme } from 'styled-components'
+import { List, ListItem } from '../utils/List'
 
 function PermissionToggle({
   permission,
@@ -18,6 +17,7 @@ function PermissionToggle({
   first,
   last,
 }: any) {
+  const theme = useTheme()
   const toggle = useCallback(
     (enable) => {
       if (enable) {
@@ -41,12 +41,34 @@ function PermissionToggle({
     <ListItem
       first={first}
       last={last}
-      background="fill-two"
     >
-      <Box fill="horizontal">
-        <Span fontWeight={500}>{permission.toLowerCase()}</Span>
-        <Span color="text-light">{description}</Span>
-      </Box>
+      <div
+        css={{
+          display: 'flex',
+          flexDirection: 'column',
+          width: '100%',
+        }}
+      >
+        <h4
+          className="stuff"
+          css={{
+            ...theme.partials.text.body1Bold,
+            margin: 0,
+          }}
+        >
+          {permission.toLowerCase()}
+        </h4>
+        <p
+          css={{
+            ...theme.partials.text.body2,
+            color: theme.colors['text-light'],
+            margin: 0,
+          }}
+          color="text-light"
+        >
+          {description}
+        </p>
+      </div>
       <Switch
         checked={!!attributes.permissions.find((perm) => perm === permission)}
         onChange={(checked) => toggle(checked)}
@@ -61,24 +83,31 @@ const TABS = {
 }
 
 export function RoleForm({
-  // eslint-disable-next-line
   error,
   attributes,
   setAttributes,
   bindings,
   setBindings,
-  ...box
-}): any {
+}: {
+  error: any
+  attributes: any
+  setAttributes: any
+  bindings: any
+  setBindings: any
+}) {
+  const theme = useTheme()
   const [view, setView] = useState('General')
   const permissions = Object.entries(PermissionTypes)
   const len = permissions.length
   const tabStateRef = useRef<any>(null)
 
   return (
-    <Box
-      flex={false}
-      gap="small"
-      {...box}
+    <div
+      css={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: theme.spacing.medium,
+      }}
     >
       {error && (
         <GqlError
@@ -108,14 +137,34 @@ export function RoleForm({
           />
         )}
         {view === 'Permissions' && (
-          <Box gap="small">
-            <Box>
-              <Span fontWeight="bold">Permissions</Span>
-              <Span>
+          <div
+            css={{
+              display: 'flex',
+              flexDirection: 'column',
+              gap: theme.spacing.small,
+            }}
+          >
+            <div
+              css={{
+                display: 'flex',
+                flexDirection: 'column',
+                gap: theme.spacing.xxsmall,
+              }}
+            >
+              <h3 css={{ ...theme.partials.text.body1Bold, margin: 0 }}>
+                Permissions
+              </h3>
+              <p
+                css={{
+                  ...theme.partials.text.body2,
+                  margin: 0,
+                  color: theme.colors['text-light'],
+                }}
+              >
                 Grant permissions to all users and groups bound to this role
-              </Span>
-            </Box>
-            <Box>
+              </p>
+            </div>
+            <List hue="lighter">
               {permissions.map(([perm, description], i) => (
                 <PermissionToggle
                   key={perm}
@@ -127,10 +176,10 @@ export function RoleForm({
                   last={i === len - 1}
                 />
               ))}
-            </Box>
-          </Box>
+            </List>
+          </div>
         )}
       </TabPanel>
-    </Box>
+    </div>
   )
 }

www/src/components/profile/ListItem.tsx

@@ -1,34 +1,43 @@
-import { useTheme } from 'styled-components'
-import { Box } from 'grommet'
+import { ComponentProps, ReactNode } from 'react'
+import styled, { useTheme } from 'styled-components'
 
-export function ListItem({ first, last, children, background }: any) {
-  const theme = useTheme()
+const ListItemSC = styled.div<{ $first: boolean; $last: boolean }>(
+  ({ theme, $first: first, $last: last }) => {
+    const BORDER_RADIUS = theme.borderRadiuses.large
+
+    return {
+      display: 'flex',
+      flex: '0 0',
+      backgroundColor: theme.colors['fill-one'],
+      alignItems: 'center',
+      padding: 16,
+      borderTop: first ? theme.borders.default : undefined,
+      borderBottom: theme.borders.default,
+      borderLeft: theme.borders.default,
+      borderRight: theme.borders.default,
+      borderBottomRightRadius: last ? BORDER_RADIUS : undefined,
+      borderBottomLeftRadius: last ? BORDER_RADIUS : undefined,
+      borderTopRightRadius: first ? BORDER_RADIUS : undefined,
+      borderTopLeftRadius: first ? BORDER_RADIUS : undefined,
+    }
+  }
+)
 
-  const BORDER_RADIUS = `${theme.borderRadiuses.large}px`
-  const r = (corner) => ({ corner, size: BORDER_RADIUS })
+export function ListItem({
+  first,
+  last,
+  ...props
+}: {
+  first: boolean
+  last: boolean
+} & ComponentProps<typeof ListItemSC>) {
+  const theme = useTheme()
 
   return (
-    <Box
-      flex={false}
-      background={{ color: background || 'fill-one' }}
-      direction="row"
-      align="center"
-      pad="16px"
-      border={
-        first ? { side: 'all' } : [{ side: 'vertical' }, { side: 'bottom' }]
-      }
-      // @ts-expect-error
-      round={
-        first && last
-          ? BORDER_RADIUS
-          : first
-          ? r('top')
-          : last
-          ? r('bottom')
-          : null
-      }
-    >
-      {children}
-    </Box>
+    <ListItemSC
+      $first={first}
+      $last={last}
+      {...props}
+    />
   )
 }