Merge pull request #541 from topcoder-platform/issue-88

fix issue #88

Author: callmekatootie

client/src/components/collapsible/index.js

@@ -21,10 +21,17 @@ export default function Collapsible({ title, children, collapsed = false }) {
       <div className={styles.collapsibleHeader}>
         <div className={styles.collapsibleTitle}>{title}</div>
         <div className={styles.collapsibleChevronContainer}>
-          <div
-            className={iconStyles.chevronDownG}
-            onClick={() => setIsCollapsed(!isCollapsed)}
-          ></div>
+          {isCollapsed ? (
+            <div
+              className={iconStyles.chevronDownG}
+              onClick={() => setIsCollapsed(!isCollapsed)}
+            ></div>
+          ) : (
+            <div
+              className={iconStyles.chevronUpG}
+              onClick={() => setIsCollapsed(!isCollapsed)}
+            ></div>
+          )}
         </div>
       </div>
       {/* Divider between header and body */}

client/src/styles/icons.module.css

@@ -104,4 +104,12 @@
   width: 13px;
   height: 7px;
 }
+
+.chevronUpG {
+  background: url("/sprites.png") no-repeat -1px -100px;
+  background-size: 49px 111px;
+  width: 13px;
+  height: 7px;
+  transform: rotate(180deg);
+}
 /* END Icons */