From 000945d7fe882d3df61a24536ada83c1db42bdd7 Mon Sep 17 00:00:00 2001
From: NoelKova <Noel.Kovacs@sensenet.com>
Date: Thu, 18 Jul 2024 17:25:37 +0200
Subject: [PATCH] light_theme_tree_settings

---
 apps/sensenet/src/components/Breadcrumbs.tsx  |  7 +++-
 .../src/components/appbar/desktop-app-bar.tsx |  9 ++---
 .../content-list/contenttype-list.tsx         | 16 ++++-----
 .../src/components/dialogs/dialog-title.ts    |  3 +-
 .../login/auth-override-skeleton.tsx          | 10 +++---
 .../src/components/login/login-page.tsx       |  6 ++--
 .../components/settings/settings-table.tsx    | 33 ++++++++++---------
 apps/sensenet/src/components/tree/tree.tsx    |  2 +-
 apps/sensenet/src/globalStyles.ts             |  3 +-
 apps/sensenet/src/style.css                   |  5 +++
 10 files changed, 57 insertions(+), 37 deletions(-)

diff --git a/apps/sensenet/src/components/Breadcrumbs.tsx b/apps/sensenet/src/components/Breadcrumbs.tsx
index 384fd47b4..f8289d2ca 100644
--- a/apps/sensenet/src/components/Breadcrumbs.tsx
+++ b/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)}
diff --git a/apps/sensenet/src/components/appbar/desktop-app-bar.tsx b/apps/sensenet/src/components/appbar/desktop-app-bar.tsx
index 9a0ee8135..4a08d592c 100644
--- a/apps/sensenet/src/components/appbar/desktop-app-bar.tsx
+++ b/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: {
diff --git a/apps/sensenet/src/components/content-list/contenttype-list.tsx b/apps/sensenet/src/components/content-list/contenttype-list.tsx
index 3f5594daf..0ed8d5cdf 100644
--- a/apps/sensenet/src/components/content-list/contenttype-list.tsx
+++ b/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
diff --git a/apps/sensenet/src/components/dialogs/dialog-title.ts b/apps/sensenet/src/components/dialogs/dialog-title.ts
index eb73710fc..ce058939c 100644
--- a/apps/sensenet/src/components/dialogs/dialog-title.ts
+++ b/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),
diff --git a/apps/sensenet/src/components/login/auth-override-skeleton.tsx b/apps/sensenet/src/components/login/auth-override-skeleton.tsx
index 60ed042bb..627503882 100644
--- a/apps/sensenet/src/components/login/auth-override-skeleton.tsx
+++ b/apps/sensenet/src/components/login/auth-override-skeleton.tsx
@@ -1,14 +1,15 @@
-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: {
@@ -33,7 +34,8 @@ const useStyles = makeStyles(() =>
     },
     footer: {
       height: '180px',
-      backgroundColor: globals.common.headerBackground,
+      backgroundColor:
+        theme.palette.type === 'dark' ? globals.common.headerBackground : globals.common.headerLightBackground,
       boxShadow: 'none',
     },
   }),
diff --git a/apps/sensenet/src/components/login/login-page.tsx b/apps/sensenet/src/components/login/login-page.tsx
index 81f7502a7..a00efc62f 100644
--- a/apps/sensenet/src/components/login/login-page.tsx
+++ b/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: {
diff --git a/apps/sensenet/src/components/settings/settings-table.tsx b/apps/sensenet/src/components/settings/settings-table.tsx
index ae61de947..9c2bdf421 100644
--- a/apps/sensenet/src/components/settings/settings-table.tsx
+++ b/apps/sensenet/src/components/settings/settings-table.tsx
@@ -7,6 +7,7 @@ import {
   TableContainer,
   TableHead,
   TableRow,
+  Theme,
 } from '@material-ui/core'
 
 import { Delete, Edit, InfoOutlined } from '@material-ui/icons'
@@ -19,17 +20,17 @@ 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' ? 'white' : '#666666',
     fontSize: '1.1rem',
   },
   stickyTableHeadCell: {
-    color: 'white',
+    color: theme.palette.type === 'dark' ? 'white' : '#666666',
     padding: '0px 1px 0px 0px',
     margin: 0,
     textAlign: 'center',
@@ -91,17 +92,19 @@ export const SettingsTable = ({ settings, onContextMenu }: SettingsTableProps) =
   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 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 hasDeletableSetting = updatedSettings.some((setting) => !isSystemSettings.includes(setting.Name.split('.')[0]))
   return (
     <TableContainer>
diff --git a/apps/sensenet/src/components/tree/tree.tsx b/apps/sensenet/src/components/tree/tree.tsx
index 6a1d351c3..d50e83492 100644
--- a/apps/sensenet/src/components/tree/tree.tsx
+++ b/apps/sensenet/src/components/tree/tree.tsx
@@ -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>
     )
diff --git a/apps/sensenet/src/globalStyles.ts b/apps/sensenet/src/globalStyles.ts
index a1326dc37..628324b69 100644
--- a/apps/sensenet/src/globalStyles.ts
+++ b/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',
diff --git a/apps/sensenet/src/style.css b/apps/sensenet/src/style.css
index 90c31c3e7..3265d7302 100644
--- a/apps/sensenet/src/style.css
+++ b/apps/sensenet/src/style.css
@@ -6,3 +6,8 @@ ul[role='listbox'] {
   margin: 0;
   padding: 0;
 }
+
+.bread-crumbs-separator {
+  padding: 0;
+  margin: 0;
+}