From 20ebf6f400120f931ce5b5e78b145847a3eaec89 Mon Sep 17 00:00:00 2001
From: Lucas Phang <lucasphang98@gmail.com>
Date: Wed, 19 May 2021 14:57:59 +1000
Subject: [PATCH] Update Accordion CSS

---
 components/Accordion.tsx | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/components/Accordion.tsx b/components/Accordion.tsx
index ad0369e..602c269 100644
--- a/components/Accordion.tsx
+++ b/components/Accordion.tsx
@@ -1,7 +1,8 @@
 import React, { useState, useRef } from 'react';
 import { RichBody } from '../components/RichBody';
 import classNames from 'classnames';
-import TriangleSVG from '../assets/svgs/triangle.svg';
+import TriangleOutlinedSVG from '../assets/svgs/triangle-outlined.svg';
+import { useHoverDirty } from 'react-use';
 
 export function Accordion(props) {
   const { question, answer } = props;
@@ -9,6 +10,10 @@ export function Accordion(props) {
   const [height, setHeight] = useState('0px');
 
   const content = useRef(null);
+  const button = useRef(null);
+  const isHovering = useHoverDirty(button);
+  const isExcited = isActive || isHovering;
+
   function toggleAccordion() {
     setActiveState(!isActive);
     setHeight(isActive ? '0px' : `${content.current.scrollHeight}px`);
@@ -17,17 +22,19 @@ export function Accordion(props) {
   return (
     <div className="mb-1 border border-current rounded-sm">
       <button
+        ref={button}
         className={classNames(
-          'flex accordion text-xl tablet:text-2xl w-full text-left justify-between items-center hover:bg-secondary cursor-pointer py-3 px-6',
+          'flex accordion text-xl tablet:text-2xl w-full text-left justify-between items-center hover:bg-secondary duration-300 cursor-pointer py-3 px-6',
           isActive ? 'bg-secondary' : '',
         )}
         onClick={toggleAccordion}
       >
         <div style={{ maxWidth: '90%' }}>{question}</div>
-        <TriangleSVG
+        <TriangleOutlinedSVG
           className={classNames(
-            'h-3 fill-current text-primary transform outline-none cursor-pointer duration-200',
+            'h-3 fill-current transform outline-none cursor-pointer duration-300 text-transparent',
             isActive ? 'rotate-90' : '',
+            isExcited ? 'text-primary' : '',
           )}
         />{' '}
       </button>