diff --git a/client/src/components/collapsible/index.js b/client/src/components/collapsible/index.js index 1102cba..00b4e89 100644 --- a/client/src/components/collapsible/index.js +++ b/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 */} diff --git a/client/src/styles/icons.module.css b/client/src/styles/icons.module.css index e70f81a..efc2021 100644 --- a/client/src/styles/icons.module.css +++ b/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 */