Fix some accordion bugs

src/components/Accordion/Accordion.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import styled from "styled-components";
 import AccordionIcon from "./AccordionIcon";
 import { colors } from "@theme/colors";
@@ -12,7 +12,7 @@ const Container = styled.div`
   border-color: ${colors.lightTurquoise};
   border-width: 1px;
 
-  button {
+  & > button {
     display: flex;
     flex-flow: row nowrap;
     background-color: ${colors.white};
@@ -21,16 +21,16 @@ const Container = styled.div`
     padding: 0;
     border: 0;
     outline: none;
-  }
 
-  h5 {
-    display: flex;
-    flex: 1;
-    text-align: center;
-    padding-left: 1em;
-    color: ${colors.blue1};
-    font-size: 1.125rem;
-    margin: auto;
+    h5 {
+      flex: 1;
+      text-align: left;
+      padding-left: 1em;
+      color: ${colors.blue1};
+      font-size: 1.125rem;
+      margin: auto;
+    }
+
   }
 
   & > div {
@@ -45,55 +45,34 @@ const Panel = styled.div<{visible?: boolean}>`
   max-height: 15rem;
   transition: margin-top 400ms ease-in-out;
 
-  div {
-    min-width: 40px;
-    max-width: 40px;
-    margin: 0.6em;
-  }
-
-  p {
+  & > * {
     padding-left: 1em;
-    margin: auto;
   }
 `;
 
-export interface AccordionProps {
+interface AccordionProps {
   title: string;
 }
-export interface AccordionState {
-  isOpen: boolean;
-}
 
-class Accordion extends React.Component<AccordionProps, AccordionState> {
-  constructor(props: AccordionProps) {
-    super(props);
-    this.state = {
-      isOpen: false,
-    };
-  }
+const Accordion: React.FC<AccordionProps> = ({ title, children }) => {
+  const [isOpen, setOpen] = useState(false);
 
-  handleClick() {
-    this.setState((prevState) => ({
-      isOpen: !prevState.isOpen,
-    }));
-  }
-
-  render() {
-    const { isOpen } = this.state;
-    return (
-      <Container>
-        <button type="button" onClick={() => this.handleClick()}>
-          <AccordionIcon open={isOpen} />
-          <h5>{this.props.title}</h5>
-        </button>
-        <div>
-          <Panel visible={isOpen}>
-            {this.props.children}
-          </Panel>
-        </div>
-      </Container>
-    );
+  const handleClick = () => {
+    setOpen(!isOpen);
   }
+  return (
+    <Container>
+      <button type="button" onClick={handleClick}>
+        <AccordionIcon open={isOpen} />
+        <h5>{title}</h5>
+      </button>
+      <div>
+        <Panel visible={isOpen}>
+          {children}
+        </Panel>
+      </div>
+    </Container>
+  );
 }
 
 export default Accordion;