ui: check ui updates

* closes #1937

Signed-off-by: papadopan <antonios.papadopan@gmail.com>

Author: papadopan

ui/cap-react/src/components/drafts/DraftPreview.js

@@ -167,22 +167,22 @@ const DraftPreview = props => {
       wrap={true}
       align="start"
       justify="center"
-      colorIndex="light-2"
+      colorIndex="light-1"
     >
       {props.error ? showToaster(props.error.message) : null}
 
       <Box
         flex={true}
         pad={{ between: "medium" }}
         direction="column"
-        style={{ width: "100%", maxWidth: "1200px" }}
+        style={{ width: "100%", maxWidth: "960px" }}
       >
         <Box pad={{ horizontal: "medium" }}>
           <Box
             direction="row"
             responsive={false}
             justify="between"
-            colorIndex="light-1"
+            colorIndex="light-2"
             pad={{ horizontal: "medium" }}
             margin={{ vertical: "small" }}
             style={{ borderRadius: "3px" }}

ui/cap-react/src/components/drafts/DraftsItemIndex.js

@@ -85,14 +85,7 @@ class DraftsItemIndex extends React.Component {
             <DraftsItemNav />
 
             <Box flex={true} className="lg-column">
-              <Box
-                flex={true}
-                colorIndex="light-1"
-                style={{
-                  margin: "5px"
-                }}
-                responsive={false}
-              >
+              <Box flex={true} colorIndex="light-1" responsive={false}>
                 <Switch>
                   <Route
                     exact
@@ -121,15 +114,14 @@ class DraftsItemIndex extends React.Component {
                   />
                 </Switch>
               </Box>
-              <Box colorIndex="light-1">
+              <Box colorIndex="light-2">
                 <MediaQuery
                   minWidth={1450}
                   onChange={matches => this.setState({ expanded: matches })}
                 >
                   <span />
                 </MediaQuery>
                 <Box
-                  colorIndex="light-1"
                   className={
                     this.state.expanded
                       ? "sidebar-hide-small show-sidebar"

ui/cap-react/src/components/drafts/components/DepositSidebar.js

@@ -38,6 +38,8 @@ class DepositSidebar extends React.Component {
                 size="icon"
                 icon={<AiOutlinePlus size={20} />}
                 onClick={this.props.toggleFilemanagerLayer}
+                hoverColor="#e6e6e6"
+                background="#d9d9d9"
               />
             )}
           />
@@ -57,6 +59,8 @@ class DepositSidebar extends React.Component {
                 size="icon"
                 onClick={this._refreshFileList}
                 icon={<AiOutlineReload size={20} />}
+                hoverColor="#e6e6e6"
+                background="#d9d9d9"
               />
             )}
           />
@@ -91,23 +95,27 @@ class DepositSidebar extends React.Component {
     return (
       <Sidebar
         full={false}
-        size="medium"
         colorIndex="light-2"
-        separator="left"
         className="lg-row"
+        style={{ height: "100%" }}
       >
-        <Box flex={false} pad="none" size={{ width: { min: "medium" } }}>
+        <Box
+          flex={false}
+          pad="none"
+          size={{ width: { min: "medium" } }}
+          separator="bottom"
+          margin={{ bottom: "medium" }}
+        >
           <Box flex={false} pad="small" style={{ fontWeight: "100" }}>
             <Box
-              direction="row"
-              wrap={false}
               justify="between"
+              direction="row"
               margin={{ bottom: "small" }}
               responsive={false}
+              wrap={false}
             >
               ID <span>{this.props.id}</span>
             </Box>
-
             {this.props.schema && (
               <Box
                 direction="row"
@@ -122,14 +130,13 @@ class DepositSidebar extends React.Component {
                   text={`${this.props.schema.fullname} v${
                     this.props.schema.version
                   }`}
+                  size="small"
                 />
               </Box>
             )}
-
             <Box
-              direction="row"
-              wrap={false}
               justify="between"
+              direction="row"
               margin={{ bottom: "small" }}
               responsive={false}
               align="center"
@@ -138,24 +145,25 @@ class DepositSidebar extends React.Component {
               <Tag
                 text={this.props.status}
                 color={this._getColorByStatus(this.props.status)}
+                size="small"
               />
             </Box>
-
             <Box
-              direction="row"
-              wrap={false}
               justify="between"
+              direction="row"
               margin={{ bottom: "small" }}
               responsive={false}
+              align="center"
             >
-              Creator <span>{this.props.created_by}</span>
+              Creator
+              <span>{this.props.created_by}</span>
             </Box>
             <Box
-              direction="row"
-              wrap={false}
               justify="between"
+              direction="row"
               margin={{ bottom: "small" }}
               responsive={false}
+              align="center"
             >
               Created:
               {this.props.created && (
@@ -165,10 +173,11 @@ class DepositSidebar extends React.Component {
               )}
             </Box>
             <Box
-              direction="row"
-              wrap={false}
               justify="between"
+              direction="row"
+              margin={{ bottom: "small" }}
               responsive={false}
+              align="center"
             >
               Last Updated:
               {this.props.updated && (
@@ -179,7 +188,7 @@ class DepositSidebar extends React.Component {
             </Box>
           </Box>
         </Box>
-        <Box flex={true} pad="none" colorIndex="light-1">
+        <Box flex={true} pad="none" colorIndex="light-2">
           <SectionHeader
             label="Files | Data | Repos"
             uppercase={true}
@@ -214,7 +223,8 @@ DepositSidebar.propTypes = {
   id: PropTypes.string,
   canUpdate: PropTypes.bool,
   links: PropTypes.object,
-  getBucketById: PropTypes.func
+  getBucketById: PropTypes.func,
+  schema: PropTypes.object
 };
 
 function mapStateToProps(state) {

ui/cap-react/src/components/drafts/components/FileTree/index.js

@@ -78,8 +78,8 @@ class FileTree extends React.Component {
           {displayTitle && (
             <HorizontalWithText
               text="All Repositories"
-              background={this.props.background}
-              color={this.props.color}
+              background={this.props.background || "#f5f5f5"}
+              color={this.props.color || "#000"}
             />
           )}
           <RepoTree
@@ -94,8 +94,8 @@ class FileTree extends React.Component {
           {displayTitle && (
             <HorizontalWithText
               text="All Files"
-              background={this.props.background}
-              color={this.props.color}
+              background={this.props.background || "#f5f5f5"}
+              color={this.props.color || "#000"}
             />
           )}
           {files.children && files.children.length > 0 ? (

ui/cap-react/src/components/partials/InfoHeaderBox/InfoHeaderBox.js

@@ -22,7 +22,7 @@ const InfoHeaderBox = ({ type = "info", content = null }) => {
         borderRadius: "3px",
         padding: "7px"
       }}
-      colorIndex="light-1"
+      colorIndex="light-2"
       direction="row"
       align="center"
       justify="center"

ui/cap-react/src/components/partials/SectionBox.js

@@ -29,12 +29,12 @@ function SectionBox(props) {
         <Box
           flex={false}
           direction="row"
-          pad="small"
+          pad={{ vertical: "small" }}
           justify="between"
           responsive={false}
         >
           <Heading
-            tag="h4"
+            tag="h3"
             align="start"
             justify="center"
             margin="none"
@@ -53,6 +53,8 @@ function SectionBox(props) {
         flex={false}
         style={{ borderRadius: "3px" }}
         className={className}
+        separator="all"
+        pad="small"
       >
         {body}
       </Box>