Change collapsable add dropdown icon

alecsloan · Mar 13, 2021 · f4fc381 · f4fc381
1 parent 905c32f
commit f4fc381
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 11 deletions.
diff --git a/src/Components/Header.js b/src/Components/Header.js
@@ -8,7 +8,7 @@ import 'bootstrap/dist/css/bootstrap.min.css';
 import 'font-awesome/css/font-awesome.min.css';
 import '../styles/Header.css';
 import IconButton from "@material-ui/core/IconButton";
-import {Brightness2, Brightness7} from "@material-ui/icons";
+import {Brightness2, Brightness7, KeyboardArrowDown, KeyboardArrowUp} from "@material-ui/icons";
 import SettingsIcon from "@material-ui/icons/Settings";
 
 class Header extends Component {
@@ -66,13 +66,15 @@ class Header extends Component {
       <div className="header">
         <div className="col-12">
           <h2 className="title">
-          <FontAwesome
-            className={addIconClass}
-            name="plus"
-            onClick={() => this.toggleAddSection()}
-            pull="left"
-            title={addIconTitle}
-          />
+            <IconButton
+              className={addIconClass}
+              color="inherit"
+              aria-label="mode"
+              onClick={() => this.toggleAddSection()}
+              title={addIconTitle}
+            >
+              {displayAddSection ? <KeyboardArrowDown /> : <KeyboardArrowUp />}
+            </IconButton>
 
           CryptoDash
 

diff --git a/src/styles/Header.css b/src/styles/Header.css
@@ -27,9 +27,9 @@ input {
 }
 
 .rotate {
-  -ms-transform: rotate(45deg); /* IE 9 */
-  -webkit-transform: rotate(45deg); /* Safari 3-8 */
-  transform: rotate(45deg);
+  -ms-transform: rotate(180deg); /* IE 9 */
+  -webkit-transform: rotate(180deg); /* Safari 3-8 */
+  transform: rotate(180deg);
 }
 
 .title {