Fix/after review minor fixes

apps/sensenet/src/components/Breadcrumbs.tsx

@@ -26,11 +26,16 @@ export function Breadcrumbs<T extends GenericContent>(props: BreadcrumbProps<T>)
 
   return (
     <>
-      <MUIBreadcrumbs maxItems={5} aria-label="breadcrumb">
+      <MUIBreadcrumbs
+        maxItems={5}
+        aria-label="breadcrumb"
+        style={{ marginLeft: '8.5px' }}
+        classes={{ separator: 'bread-crumbs-separator' }}>
         {props.items.map((item) => (
           <DropFileArea key={item.content.Id} parentContent={item.content} style={{ display: 'flex' }}>
             <Tooltip title={item.title}>
               <Button
+                style={{ minWidth: '12px' }}
                 data-test={`breadcrumb-item-${item.displayName.replace(/\s+/g, '-').toLowerCase()}`}
                 aria-label={item.displayName}
                 onClick={(ev) => props.onItemClick(ev, item)}

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

@@ -1,4 +1,4 @@
-import { AppBar, createStyles, IconButton, makeStyles, Toolbar } from '@material-ui/core'
+import { AppBar, createStyles, IconButton, makeStyles, Theme, Toolbar } from '@material-ui/core'
 import Menu from '@material-ui/icons/Menu'
 import { useRepository } from '@sensenet/hooks-react'
 import { clsx } from 'clsx'
@@ -10,12 +10,13 @@ import { globals, useGlobalStyles } from '../../globalStyles'
 import { CommandPalette } from '../command-palette/CommandPalette'
 import { DesktopNavMenu } from './desktop-nav-menu'
 
-const useStyles = makeStyles(() => {
+const useStyles = makeStyles((theme: Theme) => {
   return createStyles({
     appBar: {
       position: 'relative',
       height: globals.common.headerHeight,
-      backgroundColor: globals.common.headerBackground,
+      backgroundColor:
+        theme.palette.type === 'dark' ? globals.common.headerBackground : globals.common.headerLightBackground,
       boxShadow: 'none',
     },
     toolBar: {
@@ -26,7 +27,7 @@ const useStyles = makeStyles(() => {
       paddingRight: 0,
     },
     logo: {
-      marginRight: '40px',
+      marginRight: '32px',
       filter: 'drop-shadow(0px 0px 3px black)',
     },
     commandPaletteReplacement: {

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

@@ -1,7 +1,7 @@
-import React, { lazy, useState } from 'react'
-import { PATHS } from '../../application-paths'
 import { Switch } from '@sensenet/controls-react'
 import { useRepository } from '@sensenet/hooks-react'
+import React, { lazy, useState } from 'react'
+import { PATHS } from '../../application-paths'
 
 const ContentComponent = lazy(() => import(/* webpackChunkName: "content" */ '../content'))
 
@@ -17,11 +17,12 @@ const ContentTypeList: React.FC = () => {
     }
 
     return (
-      <div style={{ marginTop: '20px', marginBottom: '20px' }}>
-        <label htmlFor="showHiddenTypes" style={{ marginRight: '10px' }}>
+      <div style={{ marginTop: '12px', marginBottom: '12px' }}>
+        <label htmlFor="showHiddenTypes" style={{ marginRight: '10px', paddingLeft: '17px', cursor: 'pointer' }}>
           Show hidden types
         </label>
         <Switch
+          id="showHiddenTypes"
           data-test="hidden-type-switch"
           size="medium"
           checked={showHiddenTypes}
@@ -31,10 +32,9 @@ const ContentTypeList: React.FC = () => {
     )
   }
 
-  const contentTypeQuery =
-    "+TypeIs:'ContentType'" +
-    (isCategoryFieldAvailable && !showHiddenTypes ? ' -Categories:*HideByDefault*' : '') +
-    ' .AUTOFILTERS:OFF'
+  const contentTypeQuery = `+TypeIs:'ContentType'${
+    isCategoryFieldAvailable && !showHiddenTypes ? ' -Categories:*HideByDefault*' : ''
+  } .AUTOFILTERS:OFF`
 
   return (
     <ContentComponent

apps/sensenet/src/components/dialogs/dialog-title.ts

@@ -4,7 +4,8 @@ import { globals } from '../../globalStyles'
 export const DialogTitle = withStyles((theme: Theme) => ({
   root: {
     padding: `${theme.spacing(1)}px ${theme.spacing(3)}px`,
-    backgroundColor: globals.common.headerBackground,
+    backgroundColor:
+      theme.palette.type === 'dark' ? globals.common.headerBackground : globals.common.headerLightBackground,
     textAlign: 'center',
     color: globals.common.headerText,
     marginBottom: theme.spacing(1),

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

@@ -1,22 +1,24 @@
-import { AppBar, Button, Container, createStyles, makeStyles, Toolbar, Typography } from '@material-ui/core'
+import { AppBar, Button, Container, createStyles, makeStyles, Theme, Toolbar, Typography } from '@material-ui/core'
 import React from 'react'
 import { NavLink } from 'react-router-dom'
 import logo from '../../assets/sensenet-icon-32.png'
 import { globals, useGlobalStyles } from '../../globalStyles'
 
-const useStyles = makeStyles(() =>
+const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     appBar: {
       height: globals.common.headerHeight,
-      backgroundColor: globals.common.headerBackground,
+      backgroundColor:
+        theme.palette.type === 'dark' ? globals.common.headerBackground : globals.common.headerLightBackground,
       boxShadow: 'none',
     },
     toolBar: {
       display: 'flex',
       justifyContent: 'space-between',
       height: '100%',
       paddingRight: 0,
-      paddingLeft: '32px',
+      paddingLeft: '16px',
+      marginTop: '-12px',
     },
     contentWrapper: {
       minHeight: 'calc(100vh - 180px)',
@@ -33,7 +35,8 @@ const useStyles = makeStyles(() =>
     },
     footer: {
       height: '180px',
-      backgroundColor: globals.common.headerBackground,
+      backgroundColor:
+        theme.palette.type === 'dark' ? globals.common.headerBackground : globals.common.headerLightBackground,
       boxShadow: 'none',
     },
   }),

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

@@ -9,6 +9,7 @@ import {
   makeStyles,
   TextField,
   TextFieldProps,
+  Theme,
   Typography,
 } from '@material-ui/core'
 import { PathHelper } from '@sensenet/client-utils'
@@ -19,12 +20,13 @@ import snLogo from '../../assets/sensenet-icon-32.png'
 import { globals, useGlobalStyles } from '../../globalStyles'
 import { useLocalization } from '../../hooks'
 
-const useStyles = makeStyles(() =>
+const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     appBar: {
       position: 'relative',
       height: globals.common.headerHeight,
-      backgroundColor: globals.common.headerBackground,
+      backgroundColor:
+        theme.palette.type === 'dark' ? globals.common.headerBackground : globals.common.headerLightBackground,
       boxShadow: 'none',
     },
     loginSubtitle: {
@@ -73,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,29 +7,33 @@ 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'
 import { getPrimaryActionUrl } from '../../services'
 import { useDialog } from '../dialogs'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles((theme: Theme) => ({
   tableHead: {
-    backgroundColor: 'hsl(0deg 0% 24%)',
+    backgroundColor: theme.palette.type === 'dark' ? 'hsl(0deg 0% 24%)' : 'hsl(0deg 0% 92%)',
     cursor: 'default',
   },
   tableHeadCell: {
-    color: 'white',
+    color: theme.palette.type === 'dark' ? 'hsl(0deg 0% 60%)' : '#666666',
     fontSize: '1.1rem',
   },
   stickyTableHeadCell: {
-    color: 'white',
+    color: theme.palette.type === 'dark' ? 'hsl(0deg 0% 60%)' : '#666666',
     padding: '0px 1px 0px 0px',
     margin: 0,
     textAlign: 'center',
@@ -79,37 +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(),
-    }
-  })
+
+  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 && (
@@ -118,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}
@@ -130,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">
@@ -219,7 +219,7 @@ export function Tree({ treeData, itemCount, onItemClick, loadMore, isLoading, ac
       )
     }
     return (
-      <MuiList key={key} style={{ padding: 0 }}>
+      <MuiList key={key} style={{ ...style, padding: '0' }}>
         {renderItem(treeData.children?.[index], index.toString(), 10)}
       </MuiList>
     )

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',

apps/sensenet/src/globalStyles.ts

@@ -14,6 +14,7 @@ export const globals = {
     addButtonHeight: 60,
     //Colors
     headerBackground: '#353B4E',
+    headerLightBackground: '#929292',
     headerText: 'rgba(255,255,255,0.87)',
     secondaryIconSize: '16px',
     elavationShadow: '1px 1px 3px 0px hsl(0deg 0% 0% / 28%)',
@@ -82,7 +83,7 @@ export const useGlobalStyles = makeStyles((theme: Theme) => {
     contentTitle: {
       height: globals.common.drawerItemHeight,
       minHeight: globals.common.drawerItemHeight,
-      paddingLeft: '15px',
+      paddingLeft: '16px',
     },
     drawerButton: {
       width: '32px',