From 65a5bdbd1c8fb8668978bb79757f15f11c4f7155 Mon Sep 17 00:00:00 2001
From: Shahan Nedadahandeh <snedadah@csclub.uwaterloo.ca>
Date: Sun, 1 Jan 2023 16:06:40 -0500
Subject: [PATCH] Added animations (#125)

https://shahanneda-animations-csc-class-profile-stag-snedadah.k8s.csclub.cloud/academics/
Co-authored-by: shahanneda <shahan.neda@gmail.com>
Co-authored-by: e26chiu <e26chiu@csc.uwaterloo.ca>
Reviewed-on: https://git.csclub.uwaterloo.ca/www/cs-2022-class-profile/pulls/125
Reviewed-by: Mark Chiu <e26chiu@csclub.uwaterloo.ca>
---
 components/BarGraph.module.css        |  6 ++++++
 components/Boxplot.module.css         |  1 +
 components/GroupedBarGraph.module.css |  4 ++++
 components/GroupedBarGraph.tsx        |  1 +
 components/Header.module.css          |  2 ++
 components/LineGraph.module.css       |  8 ++++++--
 components/PieChart.module.css        |  1 +
 components/Sections.module.css        | 21 +++++++++++++++++++--
 components/StackedBarGraph.module.css |  5 +++++
 components/WordCloud.module.css       |  4 ++++
 pages/_app.css                        |  1 +
 11 files changed, 50 insertions(+), 4 deletions(-)

diff --git a/components/BarGraph.module.css b/components/BarGraph.module.css
index af16d7f..2e426fe 100644
--- a/components/BarGraph.module.css
+++ b/components/BarGraph.module.css
@@ -1,9 +1,15 @@
 .barBackground {
   fill: var(--card-background);
+  transition: fill 0.5s ease-out;
 }
 
 .bar {
   fill: var(--primary-accent-light);
+  transition: fill 0.5s ease-out;
+}
+
+.barGroup {
+  transition: fill 0.5s ease-out;
 }
 
 .barGroup:hover .bar {
diff --git a/components/Boxplot.module.css b/components/Boxplot.module.css
index 66dda09..b77fd93 100644
--- a/components/Boxplot.module.css
+++ b/components/Boxplot.module.css
@@ -1,5 +1,6 @@
 .boxplot {
   fill: var(--primary-accent-light);
+  transition: fill 0.5s ease-out;
 }
 
 .boxplot:hover {
diff --git a/components/GroupedBarGraph.module.css b/components/GroupedBarGraph.module.css
index e8b1611..43b5208 100644
--- a/components/GroupedBarGraph.module.css
+++ b/components/GroupedBarGraph.module.css
@@ -19,6 +19,10 @@
   fill: var(--label);
 }
 
+.bar {
+  transition: fill 0.5s ease-out;
+}
+
 .legend {
   display: flex;
   margin: calc(16rem / 16);
diff --git a/components/GroupedBarGraph.tsx b/components/GroupedBarGraph.tsx
index 4ea148a..e437137 100644
--- a/components/GroupedBarGraph.tsx
+++ b/components/GroupedBarGraph.tsx
@@ -603,6 +603,7 @@ function HoverableBar(props: HoverableBarProps) {
       }}
     >
       <Bar
+        className={styles.bar}
         onMouseMove={onMouseMove}
         onMouseOut={onMouseOut}
         x={bar.x}
diff --git a/components/Header.module.css b/components/Header.module.css
index 68d8069..bc1a276 100644
--- a/components/Header.module.css
+++ b/components/Header.module.css
@@ -79,6 +79,7 @@
 .menuIcon {
   background: none;
   border: none;
+  transition: opacity 0.5s ease-out;
 }
 
 .menuIcon:hover {
@@ -115,6 +116,7 @@
   margin-left: calc(20rem / 16);
   /* transparent border fixes weird coloring on the border in some browsers */
   border: calc(1rem / 16) solid transparent;
+  transition: background-color 0.25s ease-out;
 }
 
 .closeMenuButton:hover {
diff --git a/components/LineGraph.module.css b/components/LineGraph.module.css
index a7071cc..0a59a5b 100644
--- a/components/LineGraph.module.css
+++ b/components/LineGraph.module.css
@@ -4,10 +4,14 @@
   fill: var(--label);
 }
 
-.line:hover {
-  filter: drop-shadow(0 0 calc(4rem / 16) var(--primary-accent));
+.line {
+  transition: filter 0.5s ease-out;
 }
 
+.line:hover {
+  filter: drop-shadow(0 0 calc(4rem / 16) var(--primary-accent));
+  transition: filter 0.5s ease-out;
+}
 
 .wrapper {
   display: flex;
diff --git a/components/PieChart.module.css b/components/PieChart.module.css
index b209dca..0dc46e9 100644
--- a/components/PieChart.module.css
+++ b/components/PieChart.module.css
@@ -4,6 +4,7 @@
   stroke-width: 1px;
   stroke-dasharray: 0;
   stroke-linecap: round;
+  transition: fill 0.5s ease-out;
 }
 
 .labelPath {
diff --git a/components/Sections.module.css b/components/Sections.module.css
index 65a1420..4186e14 100644
--- a/components/Sections.module.css
+++ b/components/Sections.module.css
@@ -50,13 +50,29 @@
   color: var(--primary-text);
 }
 
-.linkName:hover {
-  text-decoration: underline;
+.linkName:after {
+  content: '';
+  position: absolute;
+  width: 100%;
+  transform: scaleX(0);
+  height: calc(1rem / 16);
+  bottom: 0;
+  left: 0;
+  background-color: var(--primary-text);
+  cursor: pointer;
+  transform-origin: bottom right;
+  transition: transform 0.25s ease-out;
+}
+
+.linkName:hover:after {
+  transform: scaleX(1);
+  transform-origin: bottom left;
 }
 
 .linkName {
   margin: 0;
   display: inline;
+  position: relative;
 }
 
 @media screen and (max-width: 900px) {
@@ -67,4 +83,5 @@
   .sections h1 {
     text-align: left;
   }
+
 }
\ No newline at end of file
diff --git a/components/StackedBarGraph.module.css b/components/StackedBarGraph.module.css
index 38856a2..249b73f 100644
--- a/components/StackedBarGraph.module.css
+++ b/components/StackedBarGraph.module.css
@@ -2,8 +2,13 @@
   position: relative;
 }
 
+.barStack {
+  transition: filter 0.5s ease-out;
+}
+
 .barStack:hover {
   filter: drop-shadow(0 0 calc(4rem / 16) var(--label));
+  transition: filter 0.5s ease-out;
 }
 
 .legend {
diff --git a/components/WordCloud.module.css b/components/WordCloud.module.css
index a6059ae..78eb29b 100644
--- a/components/WordCloud.module.css
+++ b/components/WordCloud.module.css
@@ -2,4 +2,8 @@
   text-shadow: var(--primary-accent) 0 0 calc(20rem / 16);
   text-anchor: "middle";
   cursor: default;
+}
+
+.word {
+  transition: text-shadow 0.25s ease-out;
 }
\ No newline at end of file
diff --git a/pages/_app.css b/pages/_app.css
index b287870..b4d2c95 100644
--- a/pages/_app.css
+++ b/pages/_app.css
@@ -120,6 +120,7 @@ p {
 a {
   color: var(--link);
   text-decoration: none;
+  transition: color 0.5s ease-out;
 }
 
 a:hover {