Design improvements

Author: Marosvölgyi Zoltán

apps/sensenet/src/components/Breadcrumbs.tsx

@@ -45,7 +45,7 @@ export function Breadcrumbs<T extends GenericContent>(props: BreadcrumbProps<T>)
                   setIsContextMenuOpened(true)
                   ev.preventDefault()
                 }}>
-                <span style={{ textTransform: 'none', fontSize: '16px' }}>{item.displayName}</span>
+                <span style={{ textTransform: 'none', fontSize: '13px' }}>{item.displayName}</span>
               </Button>
             </Tooltip>
           </DropFileArea>

apps/sensenet/src/components/document-viewer.tsx

@@ -43,7 +43,7 @@ const useStyles = makeStyles((theme: Theme) => {
       left: 0,
       position: 'absolute',
       padding: '20px',
-      bottom: 0,
+      top: 0,
       textAlign: 'right',
       right: '1%',
     },

apps/sensenet/src/components/editor/sn-monaco-editor.tsx

@@ -40,7 +40,7 @@ const useStyles = makeStyles(() => {
       left: 0,
       position: 'absolute',
       padding: '20px',
-      bottom: 0,
+      top: 0,
       textAlign: 'right',
       right: '1%',
     },

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

@@ -4,7 +4,7 @@ import { globals } from '../../../globalStyles'
 const useStyles = makeStyles(() => {
   return createStyles({
     grid: {
-      padding: '14px 14px 0 134px',
+      padding: '14px 14px 0 14px',
       overflowY: 'auto',
       maxWidth: '100%',
       maxHeight: `calc(100% - ${globals.common.formActionButtonsHeight}px - ${globals.common.formTitleHeight}px)`,
@@ -14,7 +14,7 @@ const useStyles = makeStyles(() => {
       left: 'auto',
       position: 'absolute',
       padding: '20px',
-      bottom: 0,
+      top: 0,
       right: '1%',
     },
   })

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

@@ -20,7 +20,7 @@ const useStyles = makeStyles(() => {
       left: 0,
       position: 'absolute',
       padding: '20px',
-      bottom: 0,
+      top: 0,
       textAlign: 'right',
       right: '1%',
     },

apps/sensenet/src/style.css

@@ -105,17 +105,28 @@ SimpleTree
 }
 
 .gridTopPanel {
-  min-height: 40px;
+  height: 60px;
   padding: 10px;
   padding-left: 4rem;
   position: relative;
   border: 1px solid #dddddd;
   background-color: #f9f9f9;
 }
+.gridTopPanel .MuiSvgIcon-root {
+  width: 18px;
+  height: 18px;
+}
+.gridTopPanel .MuiButton-label div {
+  font-size: 12px;
+  text-transform: none;
+}
 .gridTopPanel .svgicon {
   width: 48px;
   height: 48px;
 }
+.gridTopPanel h1 {
+  font-size: 16px;
+}
 .gridTopPanel a,
 .gridTopPanel h1,
 .gridTopPanel span {
@@ -184,7 +195,7 @@ SimpleTree
 .buttonPanel {
   float: right;
   padding-bottom: 1rem;
-  margin-top: -2rem;
+  margin-top: -1.7rem;
 }
 .buttonPanel .MuiListItemIcon-root {
   min-width: 25px !important;

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

@@ -41,15 +41,17 @@ const useStyles = makeStyles((theme: Theme) => {
       textAlign: 'right',
     },
     field: {
-      width: '780px',
+      minWidth: '780px',
+      width: '80%',
       margin: 'auto',
       maxWidth: '100%',
     },
     cancel: {},
     advancedFieldContainer: {
-      padding: '15px',
-      fontSize: '18px',
-      width: '780px',
+      padding: '15px 10px',
+      fontSize: '16px',
+      minWidth: '780px',
+      width: '100%',
       maxWidth: '100%',
       margin: 'auto',
     },

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

@@ -48,7 +48,8 @@ const useStyles = makeStyles((theme: Theme) => {
       margin: '0 auto',
     },
     field: {
-      width: '780px',
+      minWidth: '780px',
+      width: '800%',
       margin: 'auto',
       maxWidth: '100%',
     },
@@ -59,9 +60,10 @@ const useStyles = makeStyles((theme: Theme) => {
       marginRight: 20,
     },
     advancedFieldContainer: {
-      padding: '15px 0',
-      fontSize: '18px',
-      width: '780px',
+      padding: '15px 10px',
+      fontSize: '16px',
+      minWidth: '780px',
+      width: '100%',
       maxWidth: '100%',
       margin: 'auto',
     },