From fc3512f72f8b8593a0d06231533626d95bdbc3d9 Mon Sep 17 00:00:00 2001
From: Jared He <66887902+jaredjhe@users.noreply.github.com>
Date: Wed, 27 Jul 2022 23:27:09 -0400
Subject: [PATCH] Fix shadow not working

---
 components/PieChart.module.css | 7 ++++---
 components/PieChart.tsx        | 2 --
 pages/playground.tsx           | 6 ++++--
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/components/PieChart.module.css b/components/PieChart.module.css
index c45a588..e7e3414 100644
--- a/components/PieChart.module.css
+++ b/components/PieChart.module.css
@@ -1,9 +1,10 @@
 .piePath {
-  fill: #354265;
+  fill: var(--tertiary-background);
 }
 
 .labelPath {
   fill: var(--primary-background);
+  fill-opacity: 0;
 }
 
 .pieText,
@@ -17,11 +18,11 @@
   display: none;
 }
 
-.group:hover>.piePath {
+.group:hover > .piePath {
   fill: var(--primary-accent);
   filter: drop-shadow(0px 0px 6px var(--primary-accent));
 }
 
-.group:hover>.pieText {
+.group:hover > .pieText {
   display: inline
 }
\ No newline at end of file
diff --git a/components/PieChart.tsx b/components/PieChart.tsx
index 2fa41b9..606a310 100644
--- a/components/PieChart.tsx
+++ b/components/PieChart.tsx
@@ -31,7 +31,6 @@ export function PieChart({
       <Group top={width * 0.5} left={width * 0.5}>
         <Pie
           data={props.data}
-          fill="aqua"
           pieValue={(d: PieChartData) => d.value}
           cornerRadius={10}
           padAngle={0.075}
@@ -43,7 +42,6 @@ export function PieChart({
         </Pie>
         <Pie
           data={props.data}
-          fill="rgb(37, 45, 65)"
           pieValue={(d: PieChartData) => d.value}
           innerRadius={pieWidth}
           outerRadius={width * 0.5}
diff --git a/pages/playground.tsx b/pages/playground.tsx
index 9232289..6c1b881 100644
--- a/pages/playground.tsx
+++ b/pages/playground.tsx
@@ -1,6 +1,5 @@
-import { mockPieData } from "data/mocks";
 import { BarGraphHorizontal, BarGraphVertical } from "components/BarGraph";
-import { mockCategoricalData } from "data/mocks";
+import { mockPieData, mockCategoricalData } from "data/mocks";
 import React from "react";
 
 import { PieChart } from "@/components/PieChart";
@@ -14,6 +13,9 @@ export default function Home() {
     <div className={styles.page}>
       <h1>Playground</h1>
       <p>Show off your components here!</p>
+      <h2>
+        <code>{"<PieChart />"}</code>
+      </h2>
       <div style={{ padding: "30px" }}>
         <PieChart data={mockPieData} width={800} labelWidth={215} />
       </div>