Added border left on asset information + variable change on collapse component

client/scss/asset-display/_asset-display.scss

@@ -57,10 +57,29 @@
 .visible-content {
   width: 100%;
   margin: 0 0 40px;
+  padding-bottom: 25px;
+  box-shadow: 0 1px 3px 2px rgba(169, 173, 186, 0.2);
+  &.closed {
+    box-shadow: none;
+  }
 }
 
 .asset-information-wrap {
   max-width: 800px;
+
+  .horizontal-split {
+    justify-content: center;
+    .column {
+      &:first-child {
+        padding-right: 40px;
+      }
+      &:last-child {
+        padding-left: 40px;
+        border-left: 1px solid #A9ADBA;
+      }
+    }
+  }
+
   p.asset-description {
     white-space: pre-line;
     font-size: 14px;
@@ -70,7 +89,7 @@
     width: 360px;
   }
   .asset-information {
-    width: 320px;
+    width: 341px;
   }
 
 }

client/scss/vertical-split/_vertical-split.scss

@@ -6,7 +6,7 @@
   align-items    : center;
 };
 
-.collapse-content.hidden{
+.collapse-content.closed{
   display: none;
 }
 

client/src/components/VerticalCollapsibleSplit/index.jsx

@@ -5,24 +5,24 @@ class VerticalCollapsibleSplit extends React.Component {
   constructor (props) {
     super(props);
     this.collapse = this.collapse.bind(this);
-    this.state = { open: true };
+    this.state = { closed: false };
   }
 
   collapse () {
-    this.setState({ open: !this.state.open });
-    document.getElementById(this.props.name).classList.toggle('hidden');
+    this.setState({ closed: !this.state.closed });
+    document.querySelectorAll(`[data-name='${this.props.name}']`).forEach(el => el.classList.toggle('closed'));
   }
 
   render () {
     return (
       <div className={'vertical-split'}>
-        <div className='visible-content'>
+        <div className='visible-content' data-name={this.props.name}>
           {this.props.top}
           <button className='collapse-button' onClick={this.collapse}>
-            {this.state.open ? <Icon.PlusSquare /> : <Icon.MinusSquare /> }
+            {this.state.closed ? <Icon.MinusSquare /> : <Icon.PlusSquare /> }
           </button>
         </div>
-        <div className='collapse-content' id={this.props.name}>
+        <div className='collapse-content' data-name={this.props.name}>
           {this.props.bottom}
         </div>
       </div>