after_review_fixes

apps/sensenet/src/components/login/auth-override-skeleton.tsx

@@ -17,7 +17,8 @@ const useStyles = makeStyles((theme: Theme) =>
       justifyContent: 'space-between',
       height: '100%',
       paddingRight: 0,
-      paddingLeft: '32px',
+      paddingLeft: '16px',
+      marginTop: '-12px',
     },
     contentWrapper: {
       minHeight: 'calc(100vh - 180px)',

apps/sensenet/src/components/login/login-page.tsx

@@ -75,7 +75,7 @@ export default function LoginPage({ handleSubmit, isLoginInProgress }: LoginPage
       <AppBar position="sticky" className={clsx(globalClasses.centeredHorizontal, classes.appBar)}>
         <Grid container direction="row">
           <Grid item xs={1}>
-            <Grid container justify="flex-end">
+            <Grid container style={{ paddingLeft: '16px', paddingTop: '4px' }}>
               <Link to="/">
                 <img src={snLogo} alt="sensenet logo" />
               </Link>

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

@@ -7,13 +7,16 @@ import {
   TableContainer,
   TableHead,
   TableRow,
+  TableSortLabel,
   Theme,
+  Tooltip,
+  Typography,
 } 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 React, { useContext, useState } from 'react'
 import { Link, useHistory } from 'react-router-dom'
 import { ResponsivePersonalSettings } from '../../context'
 import { useLocalization } from '../../hooks'
@@ -26,11 +29,11 @@ const useStyles = makeStyles((theme: Theme) => ({
     cursor: 'default',
   },
   tableHeadCell: {
-    color: theme.palette.type === 'dark' ? 'white' : '#666666',
+    color: theme.palette.type === 'dark' ? 'hsl(0deg 0% 60%)' : '#666666',
     fontSize: '1.1rem',
   },
   stickyTableHeadCell: {
-    color: theme.palette.type === 'dark' ? 'white' : '#666666',
+    color: theme.palette.type === 'dark' ? 'hsl(0deg 0% 60%)' : '#666666',
     padding: '0px 1px 0px 0px',
     margin: 0,
     textAlign: 'center',
@@ -80,39 +83,100 @@ const isSystemSettings = [
 ]
 export const createAnchorFromName = (name: string) => `#${name.toLocaleLowerCase()}`
 
+export interface UpdatedSettings extends Settings {
+  nameToDisplay: string
+  nameToTest: string
+}
+
 export interface SettingsTableProps {
   settings: Settings[]
   onContextMenu: (ev: React.MouseEvent, setting: Settings) => void
 }
 
+const stripHtml = (html: string) => {
+  const div = document.createElement('div')
+  div.innerHTML = html
+  return div.textContent || div.innerText || ''
+}
+
+const sortArray = (array: UpdatedSettings[], order: 'asc' | 'desc', orderBy: keyof UpdatedSettings) => {
+  return array.sort((a, b) => {
+    const aO = a[orderBy]
+    const bO = b[orderBy]
+    if (!aO) {
+      return order === 'asc' ? -1 : 1
+    } else if (!bO) {
+      return order === 'asc' ? 1 : -1
+    } else if (aO && bO) {
+      const aValue = orderBy === 'Description' ? stripHtml(aO.toLocaleString()) : aO.toLocaleString()
+      const bValue = orderBy === 'Description' ? stripHtml(bO.toLocaleString()) : bO.toLocaleString()
+      if (aValue < bValue) {
+        return order === 'asc' ? -1 : 1
+      } else if (aValue > bValue) {
+        return order === 'asc' ? 1 : -1
+      } else {
+        return 0
+      }
+    }
+    return 0
+  })
+}
+
 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(),
-      }
-    })
-    .sort((a, b) => a.Name.localeCompare(b.Name))
+
+  const [order, setOrder] = useState<'asc' | 'desc'>('asc')
+  const [orderBy, setOrderBy] = useState<keyof UpdatedSettings>('nameToDisplay')
+
+  const handleRequestSort = (property: keyof UpdatedSettings) => {
+    const isAsc = orderBy === property && order === 'asc'
+    setOrder(isAsc ? 'desc' : 'asc')
+    setOrderBy(property)
+  }
+
+  const updatedSettings: UpdatedSettings[] = settings.map((setting: Settings) => ({
+    ...setting,
+    nameToDisplay: setting.Name.split('.')[0]
+      .replace(/([A-Z])/g, ' $1')
+      .trim(),
+    nameToTest: setting.Name.replace(/\.settings/gi, '')
+      .replace(/\s+/g, '-')
+      .toLowerCase(),
+  }))
+
+  const sortedSettings = sortArray(updatedSettings, order, orderBy)
   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.tableHeadCell}>
+              <Tooltip title={localization.name}>
+                <TableSortLabel
+                  active={orderBy === 'nameToDisplay'}
+                  direction={orderBy === 'nameToDisplay' ? order : 'asc'}
+                  onClick={() => handleRequestSort('nameToDisplay')}>
+                  {localization.name}
+                </TableSortLabel>
+              </Tooltip>
+            </TableCell>
+            <TableCell className={classes.tableHeadCell}>
+              <Tooltip title={localization.description}>
+                <TableSortLabel
+                  active={orderBy === 'Description'}
+                  direction={orderBy === 'Description' ? order : 'asc'}
+                  onClick={() => handleRequestSort('Description')}>
+                  {localization.description}
+                </TableSortLabel>
+              </Tooltip>
+            </TableCell>
             <TableCell className={classes.stickyTableHeadCell}>{localization.edit}</TableCell>
             <TableCell className={classes.stickyTableHeadCell}>{localization.learnMore}</TableCell>
             {hasDeletableSetting && (
@@ -121,7 +185,7 @@ export const SettingsTable = ({ settings, onContextMenu }: SettingsTableProps) =
           </TableRow>
         </TableHead>
         <TableBody>
-          {updatedSettings.map((setting) => (
+          {sortedSettings.map((setting: UpdatedSettings) => (
             <TableRow
               key={setting.Id}
               className={classes.tableRow}
@@ -133,7 +197,11 @@ export const SettingsTable = ({ settings, onContextMenu }: SettingsTableProps) =
                 {setting.nameToDisplay}
               </TableCell>
               <TableCell className={`${classes.tableCell} ${classes.descriptionCell}`}>
-                {setting.Description || '-'}
+                <Typography
+                  color="textSecondary"
+                  style={{ wordWrap: 'break-word' }}
+                  dangerouslySetInnerHTML={{ __html: setting.Description || '' }}
+                />
               </TableCell>
               <TableCell className={classes.stickyCell}>
                 <Link

apps/sensenet/src/components/tree/tree.tsx

@@ -152,7 +152,7 @@ export function Tree({ treeData, itemCount, onItemClick, loadMore, isLoading, ac
 
     if (item.expanded && item.children) {
       children = item.children.map((child, index) => {
-        return renderItem(child, `${keyPrefix}-${index}`, paddingLeft + 20)
+        return renderItem(child, `${keyPrefix}-${index}`, paddingLeft + 12)
       })
     }
 
@@ -178,7 +178,7 @@ export function Tree({ treeData, itemCount, onItemClick, loadMore, isLoading, ac
           style={{ paddingLeft }}
           data-item-name={item.Name}
           button>
-          <ListItemIcon>
+          <ListItemIcon style={{ minWidth: '32px' }}>
             <Icon item={item} />
           </ListItemIcon>
           <div className="text-container">

apps/sensenet/src/components/view-controls/common/styles.ts

@@ -10,7 +10,6 @@ const useStyles = makeStyles(() => {
       maxHeight: `calc(100% - ${globals.common.formActionButtonsHeight}px - ${globals.common.formTitleHeight}px)`,
     },
     fieldWrapper: {
-      display: 'flex',
       alignItems: 'center',
       flexFlow: 'column',
       padding: '15px !important',

packages/sn-controls-react/src/fieldcontrols/date-picker.tsx

@@ -113,7 +113,7 @@ export const DatePicker: React.FC<ReactClientFieldSetting<DateTimeFieldSetting>>
                 InputLabelProps={{ shrink: true }}
                 required={settings.Compulsory}
                 format="yyyy MMMM dd hh:mm aaaa"
-                InputProps={{ readOnly: true, style: { minWidth: '200px' } }}
+                InputProps={{ readOnly: true, style: { minWidth: '200px', width: '100%' } }}
               />
             )}
             {!hideDescription && <FormHelperText>{settings.Description}</FormHelperText>}

packages/sn-controls-react/src/fieldcontrols/dropdown-list.tsx

@@ -57,7 +57,7 @@ export const DropDownList: React.FC<ReactClientFieldSetting<ChoiceFieldSetting>>
     case 'new':
       return (
         <FormControl
-          style={{ minWidth: '220px' }}
+          style={{ minWidth: '220px', width: '100%' }}
           required={props.settings.Compulsory}
           disabled={props.settings.ReadOnly}>
           <InputLabel htmlFor={props.settings.Name} shrink={true}>

packages/sn-controls-react/src/fieldcontrols/number.tsx

@@ -58,6 +58,7 @@ export const NumberField: React.FC<ReactClientFieldSetting<NumberFieldSetting |
       return (
         <>
           <TextField
+            style={{ width: '100%' }}
             autoFocus={props.autoFocus}
             name={props.settings.Name}
             type="text"

packages/sn-controls-react/src/viewcontrols/browse-view.tsx

@@ -35,7 +35,10 @@ export interface BrowseViewProps {
 
 const useStyles = makeStyles((theme: Theme) => {
   return createStyles({
-    grid: {},
+    grid: {
+      margin: '0 auto',
+      maxWidth: '750px',
+    },
     fieldWrapper: {},
     field: {},
     fieldFullWidth: {},

packages/sn-controls-react/src/viewcontrols/edit-view.tsx

@@ -47,10 +47,13 @@ const useStyles = makeStyles((theme: Theme) => {
   return createStyles({
     grid: {
       margin: '0 auto',
+      maxWidth: '750px',
     },
     fieldWrapper: {},
     field: {},
-    fieldFullWidth: {},
+    fieldFullWidth: {
+      width: '100%',
+    },
     actionButtonWrapper: {
       textAlign: 'right',
     },
@@ -168,6 +171,7 @@ export const EditView: React.FC<EditViewProps> = (props) => {
   }, [actionName, schema])
 
   const renderField = (field: { fieldSettings: FieldSetting; actionName: ActionName; controlType: any }) => {
+    field.fieldSettings.DisplayName = field.fieldSettings.DisplayName ?? field.fieldSettings.Name
     const autoFocus = hasInputField.includes(field.controlType.name) && !isAutofocusSet
     const fieldControl = createElement(
       controlMapper.getControlForContentField(props.contentTypeName, field.fieldSettings.Name, actionName),

packages/sn-editor-react/src/components/menu-bar.tsx

@@ -197,20 +197,24 @@ export const MenuBar: FC<MenuBarProps> = ({ editor }) => {
         </IconButton>
       </Tooltip>
       <Tooltip title={`${localization.menubar.undo} (Ctrl + Z)`}>
-        <IconButton
-          onClick={() => editor.chain().focus().undo().run()}
-          disabled={!editor.can().undo()}
-          classes={{ root: classes.button, colorPrimary: classes.buttonPrimary }}>
-          <UndoIcon />
-        </IconButton>
+        <span>
+          <IconButton
+            onClick={() => editor.chain().focus().undo().run()}
+            disabled={!editor.can().undo()}
+            classes={{ root: classes.button, colorPrimary: classes.buttonPrimary }}>
+            <UndoIcon />
+          </IconButton>
+        </span>
       </Tooltip>
       <Tooltip title={`${localization.menubar.redo} (Ctrl + Y)`}>
-        <IconButton
-          onClick={() => editor.chain().focus().redo().run()}
-          disabled={!editor.can().redo()}
-          classes={{ root: classes.button, colorPrimary: classes.buttonPrimary }}>
-          <RedoIcon />
-        </IconButton>
+        <span>
+          <IconButton
+            onClick={() => editor.chain().focus().redo().run()}
+            disabled={!editor.can().redo()}
+            classes={{ root: classes.button, colorPrimary: classes.buttonPrimary }}>
+            <RedoIcon />
+          </IconButton>
+        </span>
       </Tooltip>
 
       <HTMLEditorControl