From c0cf64651cdf41253fd50c858c0f6d62cd5ff1c8 Mon Sep 17 00:00:00 2001
From: Vesna Tan <tanvezi@gmail.com>
Date: Tue, 24 Nov 2020 14:55:00 -0500
Subject: [PATCH] Add GearButton

---
 client/components/GearButton/index.jsx | 60 ++++++++++++++++++++++++++
 1 file changed, 60 insertions(+)
 create mode 100644 client/components/GearButton/index.jsx

diff --git a/client/components/GearButton/index.jsx b/client/components/GearButton/index.jsx
new file mode 100644
index 000000000..4d1df34ba
--- /dev/null
+++ b/client/components/GearButton/index.jsx
@@ -0,0 +1,60 @@
+import React, { useState } from 'react';
+import PropTypes from 'proptypes';
+import { IconButton } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import SettingsSharpIcon from '@material-ui/icons/SettingsSharp';
+
+const useStyles = makeStyles({
+  gearIcon: {
+    color: 'white',
+    background: '#29404F',
+    borderRadius: '12px',
+    height: '33px',
+    width: '33px',
+    padding: '6px',
+  },
+  button: {
+    padding: '0',
+  },
+});
+
+const GearButton = ({ onClick }) => {
+  const { gearIcon, button } = useStyles();
+  const [pressed, setPressed] = useState(false);
+
+  const onKeyDown = e => {
+    e.preventDefault();
+    if (e.key === ' '
+        || e.key === 'Enter'
+        || e.key === 'Spacebar'
+    ) {
+      setPressed(!pressed);
+      onClick();
+    }
+  };
+  const toggleClick = () => {
+    setPressed(!pressed);
+    onClick();
+  };
+  return (
+    <IconButton
+      className={button}
+      onClick={toggleClick}
+      onKeyDown={onKeyDown}
+      role="button"
+      aria-pressed={pressed}
+      aria-label="Toggle Sidebar"
+    >
+      <SettingsSharpIcon className={gearIcon} />
+    </IconButton>
+  );
+};
+
+GearButton.propTypes = {
+  onClick: PropTypes.func,
+};
+GearButton.defaultProps = {
+  onClick: undefined,
+};
+
+export default GearButton;