Fix/1592 more content less whitespace

apps/sensenet/src/components/AddButton.tsx

@@ -47,7 +47,8 @@ const useStyles = makeStyles((theme: Theme) => {
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'space-evenly',
-      height: globals.common.drawerItemHeight,
+      height: globals.common.addButtonHeight,
+      paddingLeft: '2px',
     },
     listDropdown: {
       padding: '10px 0 10px 10px',

apps/sensenet/src/components/PageTitle.tsx

@@ -10,7 +10,8 @@ const useStyles = makeStyles((theme: Theme) => {
     pageTitle: {
       color: theme.palette.type === 'light' ? theme.palette.common.black : theme.palette.common.white,
       fontFamily: '"Larsseit", Roboto',
-      fontSize: '20px',
+      fontSize: '24px',
+      padding: '8px 16px',
     },
   })
 })

apps/sensenet/src/components/appbar/desktop-app-bar.tsx

@@ -21,7 +21,8 @@ const useStyles = makeStyles(() => {
     toolBar: {
       position: 'static',
       height: '100%',
-      paddingLeft: '32px',
+      minHeight: '42px',
+      paddingLeft: '16px',
       paddingRight: 0,
     },
     logo: {

apps/sensenet/src/components/appbar/desktop-nav-menu.tsx

@@ -21,6 +21,7 @@ const useStyles = makeStyles((theme: Theme) =>
     viewOptions: {
       cursor: 'pointer',
       marginRight: '16px',
+      padding: '7px',
     },
     navMenu: {
       height: '100%',

apps/sensenet/src/components/command-palette/CommandPalette.tsx

@@ -45,9 +45,8 @@ const useStyles = makeStyles(() => {
     },
     iconButton: {
       color: globals.common.headerText,
-      '&:hover': {
-        backgroundColor: 'initial',
-      },
+      padding: '7px',
+      marginRight: '6px',
     },
     comboBox: {
       position: 'relative',

apps/sensenet/src/components/content-list/content-list.tsx

@@ -93,7 +93,7 @@ export const isReferenceField = (fieldName: string, repo: Repository, schema = '
 }
 
 const rowHeightConst = 67
-const headerHeightConst = 58
+const headerHeightConst = 48
 
 /**
  * Compare passed minutes with
@@ -747,17 +747,16 @@ export const ContentList = <T extends GenericContent = GenericContent>(props: Co
               rowStyle: {
                 position: 'relative',
                 top: 'unset',
-                height: 'auto',
+                height: '48px',
                 overflow: 'initial',
-                padding: '5px 0px',
+                padding: '0',
               },
               onRowDoubleClick: onItemDoubleClickFunc,
               disableHeader: props.hideHeader,
               containerStyle: {
                 display: 'flex',
                 flexDirection: 'column',
                 overflowY: 'auto',
-                paddingBottom: '15px',
                 minHeight: '100%',
                 height: 'inherit',
                 maxHeight: 'inherit',

apps/sensenet/src/components/content/Explore.tsx

@@ -50,7 +50,6 @@ const useStyles = makeStyles((theme: Theme) => {
       width: '100%',
       position: 'relative',
       overflow: 'hidden',
-      paddingTop: '8px',
     },
   })
 })

apps/sensenet/src/components/drawer/PermanentDrawer.tsx

@@ -52,7 +52,8 @@ const useStyles = makeStyles((theme: Theme) => {
       width: '100%',
     },
     listButton: {
-      height: '65px',
+      height: '60px',
+      paddingLeft: '2px',
     },
     expandCollapseWrapper: {
       height: '49px',
@@ -126,7 +127,7 @@ export const PermanentDrawer = () => {
         </List>
 
         {systemItems && (
-          <List>
+          <List style={{ padding: 0 }}>
             {systemItems.map((item) => {
               return (
                 <li key={item.itemType}>

apps/sensenet/src/components/drawer/PermanentDrawerItem.tsx

@@ -30,7 +30,8 @@ const useStyles = makeStyles((theme: Theme) => {
       },
     },
     listButton: {
-      height: '65px',
+      height: '60px',
+      paddingLeft: '2px',
     },
     listItemIconDark: {
       color: theme.palette.common.white,

apps/sensenet/src/components/layout/DesktopLayout.tsx

@@ -35,10 +35,7 @@ const useStyles = makeStyles((theme: Theme) => {
       boxSizing: 'border-box',
       overflow: 'hidden',
       height: '100%',
-      paddingTop: '10px',
-      '& > *': {
-        paddingLeft: `${globals.common.explorePaddingLeft}`,
-      },
+      padding: '0px',
     },
     executeActionPaper: {
       height: '100%',

apps/sensenet/src/components/settings/content-card.tsx

@@ -14,7 +14,6 @@ import { ResponsivePersonalSettings } from '../../context'
 import { useLocalization } from '../../hooks'
 import { getPrimaryActionUrl } from '../../services'
 import { useDialog } from '../dialogs'
-
 const useStyles = makeStyles((theme: Theme) => {
   return createStyles({
     card: {
@@ -43,16 +42,12 @@ const useStyles = makeStyles((theme: Theme) => {
     },
   })
 })
-
 export const SETUP_DOCS_URL = 'https://docs.sensenet.com/guides/settings/setup'
-
 export const createAnchorFromName = (name: string) => `#${name.toLocaleLowerCase()}`
-
 type ContentCardProps = {
   settings: Settings
   onContextMenu: (ev: React.MouseEvent) => void
 }
-
 const hasDocumentation = ['Portal', 'OAuth', 'DocumentPreview', 'OfficeOnline', 'Indexing', 'Sharing']
 const isSystemSettings = [
   'DocumentPreview',
@@ -69,7 +64,6 @@ const isSystemSettings = [
   'TaskManagement',
   'MultiFactorAuthentication',
 ]
-
 export const ContentCard = ({ settings, onContextMenu }: ContentCardProps) => {
   const localization = useLocalization().settings
   const repository = useRepository()

apps/sensenet/src/components/settings/settings-table.tsx

@@ -0,0 +1,182 @@
+import {
+  IconButton,
+  makeStyles,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+} from '@material-ui/core'
+
+import { Delete, Edit, InfoOutlined } from '@material-ui/icons'
+import { Settings } from '@sensenet/default-content-types'
+import { useRepository } from '@sensenet/hooks-react'
+import React, { useContext } from 'react'
+import { Link, useHistory } from 'react-router-dom'
+import { ResponsivePersonalSettings } from '../../context'
+import { useLocalization } from '../../hooks'
+import { getPrimaryActionUrl } from '../../services'
+import { useDialog } from '../dialogs'
+
+const useStyles = makeStyles(() => ({
+  tableHead: {
+    backgroundColor: 'hsl(0deg 0% 24%)',
+    cursor: 'default',
+  },
+  tableHeadCell: {
+    color: 'white',
+    fontSize: '1.1rem',
+  },
+  stickyTableHeadCell: {
+    color: 'white',
+    padding: 0,
+    margin: 0,
+    textAlign: 'center',
+    maxWidth: '20px',
+    minWidth: '20px',
+  },
+  tableCell: {
+    verticalAlign: 'middle',
+  },
+  tableCellName: {
+    fontSize: '1.1rem',
+  },
+  descriptionCell: {
+    textAlign: 'left',
+    whiteSpace: 'normal',
+    wordBreak: 'break-word',
+    paddingTop: '12px',
+    paddingBottom: '12px',
+  },
+  stickyCell: {
+    maxWidth: '32px',
+    paddingLeft: '16px',
+  },
+  tableRow: {
+    '&:hover': {
+      backgroundColor: 'rgba(255, 255, 255, 0.08)',
+    },
+  },
+}))
+
+export const SETUP_DOCS_URL = 'https://docs.sensenet.com/guides/settings/setup'
+const hasDocumentation = ['Portal', 'OAuth', 'DocumentPreview', 'OfficeOnline', 'Indexing', 'Sharing']
+const isSystemSettings = [
+  'DocumentPreview',
+  'OAuth',
+  'OfficeOnline',
+  'Indexing',
+  'Sharing',
+  'Logging',
+  'Portal',
+  'Permission',
+  'MailProcessor',
+  'UserProfile',
+  'ColumnSettings',
+  'TaskManagement',
+  'MultiFactorAuthentication',
+]
+export const createAnchorFromName = (name: string) => `#${name.toLocaleLowerCase()}`
+
+export interface SettingsTableProps {
+  settings: Settings[]
+  onContextMenu: (ev: React.MouseEvent, setting: Settings) => void
+}
+
+export const SettingsTable = ({ settings, onContextMenu }: SettingsTableProps) => {
+  const classes = useStyles()
+  const localization = useLocalization().settings
+  const repository = useRepository()
+  const uiSettings = useContext(ResponsivePersonalSettings)
+  const history = useHistory()
+  const { openDialog } = useDialog()
+  const updatedSettings = settings.map((setting: Settings) => {
+    return {
+      ...setting,
+      nameToDisplay: setting.Name.split('.')[0]
+        .replace(/([A-Z])/g, ' $1')
+        .trim(),
+      nameToTest: setting.Name.replace(/\.settings/gi, '')
+        .replace(/\s+/g, '-')
+        .toLowerCase(),
+    }
+  })
+  const hasDeletableSetting = updatedSettings.some((setting) => !isSystemSettings.includes(setting.Name.split('.')[0]))
+  return (
+    <TableContainer>
+      <Table>
+        <TableHead className={classes.tableHead}>
+          <TableRow>
+            <TableCell className={classes.tableHeadCell}>{localization.name}</TableCell>
+            <TableCell className={classes.tableHeadCell}>{localization.description}</TableCell>
+            <TableCell className={classes.stickyTableHeadCell}>{localization.edit}</TableCell>
+            <TableCell className={classes.stickyTableHeadCell}>{localization.learnMore}</TableCell>
+            {hasDeletableSetting && (
+              <TableCell className={classes.stickyTableHeadCell}>{localization.delete}</TableCell>
+            )}
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {updatedSettings.map((setting) => (
+            <TableRow
+              key={setting.Id}
+              className={classes.tableRow}
+              onContextMenu={(ev) => {
+                ev.preventDefault()
+                onContextMenu(ev, setting)
+              }}>
+              <TableCell component="th" scope="row" className={`${classes.tableCell} ${classes.tableCellName}`}>
+                {setting.nameToDisplay}
+              </TableCell>
+              <TableCell className={`${classes.tableCell} ${classes.descriptionCell}`}>
+                {setting.Description || '-'}
+              </TableCell>
+              <TableCell className={classes.stickyCell}>
+                <Link
+                  to={getPrimaryActionUrl({ content: setting, repository, uiSettings, location: history.location })}
+                  style={{ textDecoration: 'none' }}>
+                  <IconButton aria-label={localization.edit} data-test={`${setting.nameToTest}-edit-button`}>
+                    <Edit />
+                  </IconButton>
+                </Link>
+              </TableCell>
+              <TableCell className={classes.stickyCell}>
+                {hasDocumentation.includes(
+                  (setting.Name || setting.DisplayName || '')?.replace(/\.settings/gi, ''),
+                ) && (
+                  <a
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    href={`${SETUP_DOCS_URL}${createAnchorFromName(setting.Name)}`}>
+                    <IconButton>
+                      <InfoOutlined />
+                    </IconButton>
+                  </a>
+                )}
+              </TableCell>
+              {hasDeletableSetting && (
+                <TableCell className={classes.stickyCell}>
+                  {!isSystemSettings.includes(setting.Name.split('.')[0]) && (
+                    <IconButton
+                      aria-label={localization.delete}
+                      data-test={`${setting.nameToTest}-delete-button`}
+                      onClick={() => {
+                        openDialog({
+                          name: 'delete',
+                          props: { content: [setting] },
+                          dialogProps: { disableBackdropClick: true, disableEscapeKeyDown: true },
+                        })
+                      }}>
+                      <Delete />
+                    </IconButton>
+                  )}
+                </TableCell>
+              )}
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  )
+}