Feature(map): change caret when open

client/less/map.less

@@ -220,7 +220,6 @@
       padding-left: 40px;
       padding-bottom: 10px;
       display: block;
-      max-width: 535px;
     }
   }
 
@@ -257,12 +256,10 @@
 .challenge-block-time {
   font-size: 18px;
   color: #BBBBBB;
-  display:block;
-  margin-left: 40px;
   margin-bottom: 20px;
   @media (min-width: 721px) {
-    margin-right: 20px;
+    // margin-right: 20px;
-    margin-top:-30px;
+    // margin-top: -30px;
     float: right;
   }
 }

common/app/routes/challenges/components/map/Block.jsx

@@ -45,6 +45,23 @@ export class Block extends PureComponent {
     this.props.toggleThisPanel(eventKey);
   }
 
+  renderHeader(isOpen, title, time, isCompleted) {
+    return (
+      <div>
+        <h3 className={ isCompleted ? 'faded clear-fix' : 'clear-fix' }>
+          <FA
+            className='no-link-underline'
+            name={ isOpen ? 'caret-down' : 'caret-right' }
+          />
+          <span>
+            { title }
+          </span>
+          <span className='challenge-block-time'>({ time })</span>
+        </h3>
+      </div>
+    );
+  }
+
   renderChallenges(challenges) {
     if (!Array.isArray(challenges) || !challenges.length) {
       return <div>No Challenges Found</div>;
@@ -71,12 +88,7 @@ export class Block extends PureComponent {
         collapsible={ true }
         eventKey={ dashedName || title }
         expanded={ isOpen }
-        header={
+        header={ this.renderHeader(isOpen, title, time) }
-          <div>
-            <h3><FA name='caret-right' />{ title }</h3>
-            <span className='challenge-block-time'>({ time })</span>
-          </div>
-        }
         id={ title }
         key={ title }
         onSelect={ this.handleSelect }

common/app/routes/challenges/components/map/Super-Block.jsx

@@ -62,6 +62,18 @@ export class SuperBlock extends PureComponent {
     );
   }
 
+  renderHeader(isOpen, title, isCompleted) {
+    return (
+      <h2 className={ isCompleted ? 'faded' : '' }>
+        <FA
+          className='no-link-underline'
+          name={ isOpen ? 'caret-down' : 'caret-right' }
+        />
+        { title }
+      </h2>
+    );
+  }
+
   render() {
     const {
       title,
@@ -76,7 +88,7 @@ export class SuperBlock extends PureComponent {
         collapsible={ true }
         eventKey={ dashedName || title }
         expanded={ isOpen }
-        header={ <h2><FA name='caret-right' />{ title }</h2> }
+        header={ this.renderHeader(isOpen, title) }
         id={ title }
         key={ dashedName || title }
         onSelect={ this.handleSelect }