From d1c12d02f995182dfefdeaf350555dcb6d48af42 Mon Sep 17 00:00:00 2001
From: salam dalloul <salamdalloul93@gmail.com>
Date: Mon, 15 Jan 2024 18:28:59 +0100
Subject: [PATCH] #20 update right sidebar style

---
 .../Details/CollectionDetails.js              |  3 +-
 .../NodeDetailView/Details/DatasetDetails.js  |  9 +++--
 .../NodeDetailView/Details/Details.js         |  2 ++
 .../NodeDetailView/Details/FileDetails.js     |  3 +-
 .../NodeDetailView/Details/GroupDetails.js    |  2 ++
 .../NodeDetailView/Details/PersonDetails.js   |  2 ++
 .../NodeDetailView/Details/ProtocolDetails.js |  2 ++
 .../NodeDetailView/Details/SampleDetails.js   |  2 ++
 .../NodeDetailView/Details/SubjectDetails.js  |  4 ++-
 .../Details/Views/Breadcrumbs.js              |  7 ++--
 .../NodeDetailView/NodeDetailView.js          | 15 ++++++---
 src/flexlayout.css                            |  1 +
 src/images/Icons.js                           |  7 ++++
 src/styles/constant.js                        |  5 ++-
 src/theme.js                                  | 33 ++++++++++++++++---
 15 files changed, 80 insertions(+), 17 deletions(-)
 create mode 100644 src/images/Icons.js

diff --git a/src/components/NodeDetailView/Details/CollectionDetails.js b/src/components/NodeDetailView/Details/CollectionDetails.js
index 4add3b3..0fcd75f 100644
--- a/src/components/NodeDetailView/Details/CollectionDetails.js
+++ b/src/components/NodeDetailView/Details/CollectionDetails.js
@@ -1,6 +1,6 @@
 import React from "react";
 import {
-    Box,
+    Box, Divider,
     Typography
 } from "@material-ui/core";
 import Links from './Views/Links';
@@ -28,6 +28,7 @@ const CollectionDetails = (props) => {
 
     return (
         <Box className="secondary-sidebar_body" id={idDetails}>
+            <Divider />
             <Box className="tab-content">
                 <SimpleLabelValue label={'Label'} value={title} heading={'Collection Details'} />
                 { node.graph_node?.attributes?.publishedURI && node.graph_node?.attributes?.publishedURI !== ""
diff --git a/src/components/NodeDetailView/Details/DatasetDetails.js b/src/components/NodeDetailView/Details/DatasetDetails.js
index ded88b8..b79afef 100644
--- a/src/components/NodeDetailView/Details/DatasetDetails.js
+++ b/src/components/NodeDetailView/Details/DatasetDetails.js
@@ -2,8 +2,7 @@ import React from "react";
 import {
     Box,
     Typography,
-    List,
-    ListItemText,
+    Divider,
 } from "@material-ui/core";
 import Links from './Views/Links';
 import SimpleLinkedChip from './Views/SimpleLinkedChip';
@@ -12,6 +11,7 @@ import SimpleLabelValue from './Views/SimpleLabelValue';
 import { detailsLabel } from '../../../constants';
 import { rdfTypes } from "../../../utils/graphModel";
 import { isValidUrl } from './utils';
+import {DatasetIcon} from "../../../images/Icons";
 
 const DatasetDetails = (props) => {
     const { node } = props;
@@ -21,7 +21,12 @@ const DatasetDetails = (props) => {
     return (
         
         <Box id={node.graph_node?.id + detailsLabel}>
+            <Divider />
             <Box className="tab-content">
+                <Box className='title-container'>
+                    <DatasetIcon />
+                    <Typography component="h3">Dataset Details</Typography>
+                </Box>
                 {datasetPropertiesModel?.map( property => {
                     if ( property.visible ){
                         const propValue = node.graph_node.attributes[property.property]?.[0];
diff --git a/src/components/NodeDetailView/Details/Details.js b/src/components/NodeDetailView/Details/Details.js
index b5b3a90..063008f 100644
--- a/src/components/NodeDetailView/Details/Details.js
+++ b/src/components/NodeDetailView/Details/Details.js
@@ -1,6 +1,7 @@
 import React from "react";
 import {
     Box,
+    Divider,
 } from "@material-ui/core";
 import SimpleLabelValue from './Views/SimpleLabelValue';
 import { detailsLabel } from '../../../constants';
@@ -26,6 +27,7 @@ const UnknownDetails = (props) => {
 
     return (
         <Box className="secondary-sidebar_body" id={idDetails}>
+            <Divider />
             <Box className="tab-content">
                 <SimpleLabelValue label={'Name'} value={title.toString()} heading={'Details'} />
             </Box>
diff --git a/src/components/NodeDetailView/Details/FileDetails.js b/src/components/NodeDetailView/Details/FileDetails.js
index af9c009..c288fdd 100644
--- a/src/components/NodeDetailView/Details/FileDetails.js
+++ b/src/components/NodeDetailView/Details/FileDetails.js
@@ -4,9 +4,9 @@ import {
     Typography,
     List,
     ListItemText,
+    Divider,
 } from "@material-ui/core";
 import Links from './Views/Links';
-import SimpleLinkedChip from './Views/SimpleLinkedChip';
 import SimpleLabelValue from './Views/SimpleLabelValue';
 import { detailsLabel } from '../../../constants';
 
@@ -47,6 +47,7 @@ const FileDetails = (props) => {
 
     return (
         <Box className="secondary-sidebar_body" id={idDetails}>
+            <Divider />
             <Box className="tab-content">
                 { node.graph_node?.attributes?.identifier
                     ? (<Box className="tab-content-row">
diff --git a/src/components/NodeDetailView/Details/GroupDetails.js b/src/components/NodeDetailView/Details/GroupDetails.js
index 50e92c9..1c54bce 100644
--- a/src/components/NodeDetailView/Details/GroupDetails.js
+++ b/src/components/NodeDetailView/Details/GroupDetails.js
@@ -1,6 +1,7 @@
 import React from "react";
 import {
     Box,
+    Divider,
 } from "@material-ui/core";
 import SimpleLabelValue from './Views/SimpleLabelValue';
 import { detailsLabel } from '../../../constants';
@@ -26,6 +27,7 @@ const GroupDetails = (props) => {
     
     return (
         <Box className="secondary-sidebar_body" id={idDetails}>
+            <Divider />
             <Box className="tab-content">
                 <SimpleLabelValue label={'# of Subjects '} value={node?.graph_node?.subjects} heading={node?.graph_node?.name} />
             </Box>
diff --git a/src/components/NodeDetailView/Details/PersonDetails.js b/src/components/NodeDetailView/Details/PersonDetails.js
index e4f8e5f..fb48456 100644
--- a/src/components/NodeDetailView/Details/PersonDetails.js
+++ b/src/components/NodeDetailView/Details/PersonDetails.js
@@ -1,6 +1,7 @@
 import React from "react";
 import {
     Box,
+    Divider,
     Typography,
 } from "@material-ui/core";
 import Links from './Views/Links';
@@ -28,6 +29,7 @@ const PersonDetails = (props) => {
 
     return (
         <Box id={idDetails}>
+            <Divider />
             <Box className="tab-content">
                 <Typography component="h3">Person Details</Typography>
                 <Box className="tab-content-row">
diff --git a/src/components/NodeDetailView/Details/ProtocolDetails.js b/src/components/NodeDetailView/Details/ProtocolDetails.js
index 9a56695..5b3fa1c 100644
--- a/src/components/NodeDetailView/Details/ProtocolDetails.js
+++ b/src/components/NodeDetailView/Details/ProtocolDetails.js
@@ -1,6 +1,7 @@
 import React from "react";
 import {
     Box,
+    Divider,
     Typography,
 } from "@material-ui/core";
 import Links from './Views/Links';
@@ -29,6 +30,7 @@ const ProtocolDetails = (props) => {
 
     return (
         <Box id={idDetails}>
+            <Divider />
             <Box className="tab-content">
                 { node.graph_node.attributes?.hasUriHuman && node.graph_node.attributes?.hasUriHuman[0] !== ""
                     ? (<Box className="tab-content-row">
diff --git a/src/components/NodeDetailView/Details/SampleDetails.js b/src/components/NodeDetailView/Details/SampleDetails.js
index 68801df..5adb334 100644
--- a/src/components/NodeDetailView/Details/SampleDetails.js
+++ b/src/components/NodeDetailView/Details/SampleDetails.js
@@ -1,6 +1,7 @@
 import React from "react";
 import {
     Box,
+    Divider,
     Typography,
 } from "@material-ui/core";
 import SimpleLabelValue from './Views/SimpleLabelValue';
@@ -29,6 +30,7 @@ const SampleDetails = (props) => {
 
     return (
         <Box id={idDetails}>
+            <Divider />
             <Box className="tab-content">
                 { node.graph_node.attributes?.hasUriHuman && node.graph_node.attributes?.hasUriHuman[0] !== ""
                     ? (<Box className="tab-content-row">
diff --git a/src/components/NodeDetailView/Details/SubjectDetails.js b/src/components/NodeDetailView/Details/SubjectDetails.js
index fb74576..73513e6 100644
--- a/src/components/NodeDetailView/Details/SubjectDetails.js
+++ b/src/components/NodeDetailView/Details/SubjectDetails.js
@@ -1,13 +1,14 @@
 import React from "react";
 import {
     Box,
+    Divider,
     Typography,
 } from "@material-ui/core";
 import SimpleChip from './Views/SimpleChip';
 import SimpleLinkedChip from './Views/SimpleLinkedChip';
 import SimpleLabelValue from './Views/SimpleLabelValue';
 import Links from './Views/Links';
-import { iterateSimpleValue, simpleValue } from './utils';
+import {  simpleValue } from './utils';
 import { detailsLabel } from '../../../constants';
 
 const SubjectDetails = (props) => {
@@ -47,6 +48,7 @@ const SubjectDetails = (props) => {
 
     return (
         <Box id={node?.graph_node?.id + detailsLabel}>
+            <Divider />
             <Box className="tab-content">
                 <SimpleLabelValue label={""} value={""} heading={title} />
 
diff --git a/src/components/NodeDetailView/Details/Views/Breadcrumbs.js b/src/components/NodeDetailView/Details/Views/Breadcrumbs.js
index 6778ca5..f015aad 100644
--- a/src/components/NodeDetailView/Details/Views/Breadcrumbs.js
+++ b/src/components/NodeDetailView/Details/Views/Breadcrumbs.js
@@ -15,8 +15,8 @@ const HeaderBreadcrumbs = (props) => {
   return (
     <Box className="wrap">
       <Breadcrumbs
-        separator={<img src={DIVIDER} alt="DIVIDER" />}
         aria-label="breadcrumb"
+        maxItems={2}
       >
         {
           links && links.pages ? (
@@ -27,7 +27,10 @@ const HeaderBreadcrumbs = (props) => {
             ))
           ) : null
         }
-        <Typography variant="subtitle2" onClick={() => {goToLink(links?.current.id)}} className="breadcrumb_selected">{links?.current.text}</Typography>
+        <Typography
+            variant="subtitle2"
+            onClick={() => {goToLink(links?.current.id)}}
+            className="breadcrumb_selected">{links?.current.text}</Typography>
       </Breadcrumbs>
       {/* <img src={CLOSE} onClick={closeViewer} alt="Close" /> */}
     </Box>
diff --git a/src/components/NodeDetailView/NodeDetailView.js b/src/components/NodeDetailView/NodeDetailView.js
index 3b9250e..8af27a4 100644
--- a/src/components/NodeDetailView/NodeDetailView.js
+++ b/src/components/NodeDetailView/NodeDetailView.js
@@ -1,4 +1,4 @@
-import { Box } from "@material-ui/core";
+import {Box} from "@material-ui/core";
 import NodeFooter from "./Footers/Footer";
 import DetailsFactory from './factory';
 import Breadcrumbs from "./Details/Views/Breadcrumbs";
@@ -65,9 +65,16 @@ const NodeDetailView = (props) => {
       <Box className="secondary-sidebar_breadcrumb" sx={{mt : "1rem"}}>
         <Breadcrumbs close={false} links={links} />
       </Box>
-      { otherDetails }
-      { showSettingsContent && nodeDetails.getSettings ? nodeDetails.getSettings() : nodeDetails.getDetail() }
-
+      {
+        showSettingsContent && nodeDetails.getSettings ? nodeDetails.getSettings() : null
+      }
+      {
+        !showSettingsContent ?
+            <>
+          { otherDetails }
+          {nodeDetails.getDetail()}
+        </> : null
+      }
       <NodeFooter />
       { !showSettingsContent && <Box className='overlay-button-container'>
         <IconButton className="overlay-button" onClick={toggleContent}><TuneRounded /></IconButton>
diff --git a/src/flexlayout.css b/src/flexlayout.css
index 8bf7478..19700f2 100644
--- a/src/flexlayout.css
+++ b/src/flexlayout.css
@@ -549,4 +549,5 @@
 
 .breadcrumb_selected {
   color : #3779E1 !important;
+  font-weight: 600 !important;
 }
\ No newline at end of file
diff --git a/src/images/Icons.js b/src/images/Icons.js
new file mode 100644
index 0000000..7b76e8b
--- /dev/null
+++ b/src/images/Icons.js
@@ -0,0 +1,7 @@
+import {SvgIcon} from "@material-ui/core";
+export const DatasetIcon = (props) => (
+    <SvgIcon width="48" height="48" viewBox="0 0 48 48" fill="none" {...props}>
+        <rect width="48" height="48" rx="24" fill="#3779E1" fill-opacity="0.1"/>
+        <path d="M15.3086 16.1797C15.3086 18.0664 18.6133 19.3906 23.5 19.3906C28.3867 19.3906 31.6914 18.0664 31.6914 16.1797C31.6914 14.2109 28.4102 12.8398 23.5 12.8398C18.5898 12.8398 15.3086 14.2109 15.3086 16.1797ZM23.5 26.6445C19.1523 26.6445 15.8945 25.6602 13.4219 23.5625V16.1797C13.4219 13.2266 17.4531 11.1875 23.5 11.1875C29.5469 11.1875 33.5781 13.2266 33.5781 16.1797V23.5625C31.1055 25.6602 27.8477 26.6445 23.5 26.6445ZM13.4219 30.3594V25.6016C16.0352 27.5234 19.2812 28.4141 23.5 28.4141C27.7188 28.4141 30.9648 27.5234 33.5781 25.6016V30.3594C33.5781 33.5938 29.5117 35.8789 23.5 35.8789C17.4883 35.8789 13.4219 33.5938 13.4219 30.3594Z" fill="#3779E1"/>
+    </SvgIcon>
+);
\ No newline at end of file
diff --git a/src/styles/constant.js b/src/styles/constant.js
index 06065d8..3998e97 100644
--- a/src/styles/constant.js
+++ b/src/styles/constant.js
@@ -35,9 +35,12 @@ const vars = {
   matlab: '#6FC386',
   nifti: '#7747F6',
   volume: '#3779E1',
-  sideBarLabelColor: 'rgba(46, 58, 89, 0.4)',
+  sideBarLabelColor: '#435070',
   treeBorderColor: '#4E5261',
   scrollbarBg: 'rgba(0, 0, 0, 0.24)',
+  gray800: '#0F162B',
+  gray400: '#586482',
+  gray25: '#F0F1F2'
 };
 
 export default vars;
diff --git a/src/theme.js b/src/theme.js
index 70d507c..467fc82 100644
--- a/src/theme.js
+++ b/src/theme.js
@@ -43,6 +43,9 @@ const {
   chipBgColor,
   progressErrorBg,
   treeBorderColor,
+  gray800,
+  gray400,
+  gray25
 } = vars;
 
 const theme = createTheme({
@@ -94,12 +97,14 @@ const theme = createTheme({
         display: 'inline-flex',
         alignItems: 'center',
         height: '1.375rem',
-        marginTop: '.25rem',
+        marginTop: '.5rem',
         marginRight: '.375rem',
         '& .MuiChip-label': {
-          padding: '0 .375rem',
+          padding: '0.25rem 0.375rem',
           fontSize: '.75rem',
-          color: primaryTextColor,
+          color: gray400,
+          backgroundColor: gray25,
+          borderRadius: '0.3125rem'
         },
       },
     },
@@ -960,13 +965,16 @@ const theme = createTheme({
             '& .MuiBreadcrumbs-li': {
               lineHeight: '1.5',
               '& a': {
-                color: placeHolderColor,
                 cursor: 'pointer',
                 lineHeight: 'normal',
+                color: '#475467',
+                fontSize: '0.75rem',
+                fontWeight: 500,
               },
             },
             '& .MuiBreadcrumbs-separator': {
               margin: '0 .5rem',
+              color: '#9198AB'
             },
           },
           '&_body': {
@@ -1056,12 +1064,22 @@ const theme = createTheme({
             '&+ .tab-content': {
               borderTop: `.0625rem solid ${tabsBorderColor}`,
             },
+            '& .title-container':{
+              display: 'flex',
+              alignItems: 'center',
+              marginBottom: '1.3rem',
+
+              '& h3': {
+                marginBottom: 0,
+                marginLeft: '.25rem'
+              }
+            },
             '& h3': {
               fontSize: '1.125rem',
               fontWeight: '500',
               lineHeight: '1.375rem',
               letterSpacing: '-0.03em',
-              color: primaryTextColor,
+              color: gray800,
               marginBottom: '1.3rem',
             },
             '& .tab-content-row': {
@@ -1074,6 +1092,7 @@ const theme = createTheme({
                 fontSize: '.75rem',
                 lineHeight: '1rem',
                 color: primaryColor,
+                marginTop: '.5rem',
 
                 '&:not(:last-child)': {
                   marginRight: '.75rem',
@@ -1095,6 +1114,10 @@ const theme = createTheme({
                 color: sideBarLabelColor,
                 '&+ p': {
                   marginTop: '.25rem',
+                  color: gray400,
+                  fontSize: '.75rem',
+                  fontWeight: '400',
+                  lineHeight: '1rem',
                 },
               },
               '&> p': {