diff --git a/src/components/Accordion/Accordion.scss b/src/components/Accordion/Accordion.scss
index 56193b2..1b38fd6 100644
--- a/src/components/Accordion/Accordion.scss
+++ b/src/components/Accordion/Accordion.scss
@@ -1,15 +1,33 @@
@import "../../assets/scss/globals";
.accordion {
+ margin: 0.2em;
padding: 0.2em;
+ display: flex;
+ flex-flow: column nowrap;
+ border-style: solid;
+ border-color: $light-turquoise;
+ border-width: 1px;
+
+ &__desc {
+ display: flex;
+ margin-top: -100%;
+ -webkit-transition: margin-top 400ms;
+ transition: margin-top 400ms ease-in-out;
+
+ &.open {
+ margin-top: 0;
+ }
+ }
button {
display: flex;
flex-flow: row nowrap;
- border-color: $light-turquoise;
- border-width: 1px;
background-color: $white;
width: 100%;
+ margin: 0;
+ border: 0;
+ outline: none;
}
h5 {
diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx
index 1db197b..52019ec 100644
--- a/src/components/Accordion/Accordion.tsx
+++ b/src/components/Accordion/Accordion.tsx
@@ -1,20 +1,46 @@
import * as React from "react";
import "./Accordion.scss";
import AccordionIcon from "../AccordionIcon";
+import { addHiddenFinalProp } from "mobx/lib/internal";
-export interface AccordionProps {}
-export interface AccordionState {}
+export interface AccordionProps {
+ desc?: string;
+}
+export interface AccordionState {
+ isOpen: boolean;
+}
+
+const Description = ({text, visible}) => (
+
+);
class Accordion extends React.Component {
+ constructor(props: AccordionProps) {
+ super(props);
+ this.state = {
+ isOpen: false,
+ };
+ }
+
+ handleClick() {
+ this.setState({
+ isOpen: !this.state.isOpen,
+ });
+ }
+
render() {
+ const { isOpen } = this.state;
return (
-
);
}
diff --git a/src/components/AccordionIcon/AccordionIcon.scss b/src/components/AccordionIcon/AccordionIcon.scss
index f282fb8..a11d759 100644
--- a/src/components/AccordionIcon/AccordionIcon.scss
+++ b/src/components/AccordionIcon/AccordionIcon.scss
@@ -14,4 +14,17 @@
max-height: 40px;
margin: 0.2em;
font-size: 40px;
+
+ &.open {
+ background-color: $orange1;
+ }
+}
+
+.accordion-text {
+ &.open {
+ -webkit-transform: rotate(45deg);
+ -moz-transform: rotate(45deg);
+ -o-transform: rotate(45deg);
+ transform: rotate(45deg);
+ }
}
diff --git a/src/components/AccordionIcon/AccordionIcon.tsx b/src/components/AccordionIcon/AccordionIcon.tsx
index f862f83..157696a 100644
--- a/src/components/AccordionIcon/AccordionIcon.tsx
+++ b/src/components/AccordionIcon/AccordionIcon.tsx
@@ -1,14 +1,17 @@
import * as React from "react";
import "./AccordionIcon.scss";
-export interface AccordionIconProps {}
+export interface AccordionIconProps {
+ open: boolean;
+}
export interface AccordionIconState {}
class AccordionIcon extends React.Component {
render() {
+ const { open } = this.props;
return (
-
- +
+
);
}
diff --git a/src/pages/GuildPage/GuildPage.tsx b/src/pages/GuildPage/GuildPage.tsx
index 4ac7031..d79dfa2 100644
--- a/src/pages/GuildPage/GuildPage.tsx
+++ b/src/pages/GuildPage/GuildPage.tsx
@@ -213,7 +213,13 @@ class GuildPage extends React.Component
{