From 76190ee722993216ce1e3e02a9ce459ce5bf97f9 Mon Sep 17 00:00:00 2001 From: Klink <85062+dogmar@users.noreply.github.com> Date: Fri, 20 Oct 2023 15:46:02 -0700 Subject: [PATCH] Fix spacing in forms --- www/src/components/account/CreateGroup.tsx | 14 ++- .../account/CreateServiceAccount.tsx | 2 +- www/src/components/account/Group.tsx | 1 - www/src/components/account/Role.tsx | 16 +-- www/src/components/account/RoleForm.tsx | 99 ++++++++++++++----- www/src/components/profile/ListItem.tsx | 65 ++++++------ 6 files changed, 131 insertions(+), 66 deletions(-) diff --git a/www/src/components/account/CreateGroup.tsx b/www/src/components/account/CreateGroup.tsx index 2adb04cd7..980fcd346 100644 --- a/www/src/components/account/CreateGroup.tsx +++ b/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) { } > - {errorMsg} setDescription(value)} /> - + {error && ( diff --git a/www/src/components/account/Group.tsx b/www/src/components/account/Group.tsx index 9c067c943..42cc47b24 100644 --- a/www/src/components/account/Group.tsx +++ b/www/src/components/account/Group.tsx @@ -40,7 +40,6 @@ function GroupMember({ user, group, first, last, edit }: any) { return ( diff --git a/www/src/components/account/Role.tsx b/www/src/components/account/Role.tsx index 76774d3ea..48260fc73 100644 --- a/www/src/components/account/Role.tsx +++ b/www/src/components/account/Role.tsx @@ -1,8 +1,8 @@ -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, @@ -10,14 +10,18 @@ export function GeneralAttributes({ bindings, setBindings, }: any) { + const theme = useTheme() const [repositories, setRepositories] = useState( attributes.repositories?.join(', ') ) return ( - - + ) } diff --git a/www/src/components/account/RoleForm.tsx b/www/src/components/account/RoleForm.tsx index a8a6ab590..996a2f095 100644 --- a/www/src/components/account/RoleForm.tsx +++ b/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({ - - {permission.toLowerCase()} - {description} - +
+

+ {permission.toLowerCase()} +

+

+ {description} +

+
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(null) return ( - {error && ( )} {view === 'Permissions' && ( - - - Permissions - +
+
+

+ Permissions +

+

Grant permissions to all users and groups bound to this role - - - +

+
+ {permissions.map(([perm, description], i) => ( ))} - - + +
)} - + ) } diff --git a/www/src/components/profile/ListItem.tsx b/www/src/components/profile/ListItem.tsx index 39593bc2e..b30d8a6af 100644 --- a/www/src/components/profile/ListItem.tsx +++ b/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) { + const theme = useTheme() return ( - - {children} - + ) }