Merge branch 'develop' into feature/related-classes-list

components/common/ExpandableSearchGrid/expandableSearchGrid.tsx

@@ -7,6 +7,7 @@ import React from 'react';
 import { useRouter } from 'next/router';
 import SearchQuery from '../../../modules/SearchQuery/SearchQuery';
 import searchQueryLabel from '../../../modules/searchQueryLabel/searchQueryLabel';
+import searchQueryColors from '../../../modules/searchQueryColors/searchQueryColors';
 
 type ExpandableSearchGridProps = {
   onChange: Function;
@@ -83,7 +84,7 @@ export const ExpandableSearchGrid = ({
           secondaryText={studentTotalFormatter(studentTotals[index])}
           key={index}
           index={index}
-          legendColor={colors[index]}
+          legendColor={searchQueryColors[index]}
           onCloseButtonClicked={deleteSearchTerm}
         />
       ))}
@@ -180,5 +181,3 @@ function parseURIEncodedSearchTerm(encodedSearchTerm: string): SearchQuery {
     return { professorName: encodedSearchTerm.trim() };
   }
 }
-
-const colors = ['#eb5757', '#2d9cdb', '#499F68'];

components/common/ProfessorCard/CardContents.tsx

@@ -31,7 +31,7 @@ export const CardContents: FC<CardContentProps> = (props: CardContentProps) => {
           <Box
             className="h-32 w-32 border-2 border-neutral-400 flex items-center justify-center my-4 md:mt-0 mb-8 text-5xl text-neutral-600 font-bold"
             sx={{
-              backgroundColor: getColorForRating(5 - props.averageDifficulty),
+              backgroundColor: getColorForRating(6 - props.averageDifficulty),
             }}
           >
             {props.averageDifficulty}

components/graph/BoxGraph/BoxGraph.tsx

@@ -3,6 +3,7 @@ import { ApexOptions } from 'apexcharts';
 const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
 import GraphProps from '../../../modules/GraphProps/GraphProps';
 import React from 'react';
+import searchQueryColors from '../../../modules/searchQueryColors/searchQueryColors';
 
 /**
  * Creates a pre-configured ApexCharts box-and-whisker graph. Takes in `series`, `title`, and `xaxisLabels` via `GraphProps`.
@@ -51,8 +52,8 @@ export function BoxGraph(props: GraphProps) {
       },
       boxPlot: {
         colors: {
-          upper: '#eb5757',
-          lower: '#2d9cdb',
+          upper: searchQueryColors[0],
+          lower: searchQueryColors[1],
         },
       },
     },

components/graph/HorizontalBarGraph/HorizontalBarGraph.tsx

@@ -4,6 +4,7 @@ import { ApexOptions } from 'apexcharts';
 const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
 import GraphProps from '../../../modules/GraphProps/GraphProps';
 import React from 'react';
+import searchQueryColors from '../../../modules/searchQueryColors/searchQueryColors';
 
 /**
  * Creates a pre-configured ApexCharts horizontal bar graph component. Takes in `series`, `title`, and `xaxisLabels` via `GraphProps`. This component also gets returned from a BarGraph component on a small screen.
@@ -39,7 +40,7 @@ export function HorizontalBarGraph(props: GraphProps) {
         formatter: xaxisFormatter,
       },
     },
-    colors: ['#eb5757', '#2d9cdb', '#499F68'],
+    colors: searchQueryColors,
     stroke: {
       width: 2,
       curve: 'smooth',

components/graph/LineGraph/LineGraph.tsx

@@ -4,6 +4,7 @@ import { ApexOptions } from 'apexcharts';
 const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
 import GraphProps from '../../../modules/GraphProps/GraphProps';
 import React from 'react';
+import searchQueryColors from '../../../modules/searchQueryColors/searchQueryColors';
 
 /**
  * Creates a pre-configured ApexCharts line graph component. Takes in `series`, `title`, and `xaxisLabels` via `GraphProps`.
@@ -34,7 +35,7 @@ export function LineGraph(props: GraphProps) {
         formatter: props.yaxisFormatter,
       },
     },
-    colors: ['#eb5757', '#2d9cdb', '#499F68'],
+    colors: searchQueryColors,
     stroke: {
       width: 2,
       curve: 'smooth',

components/graph/RadarChart/RadarChart.tsx

@@ -4,6 +4,7 @@ import { ApexOptions } from 'apexcharts';
 const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
 import GraphProps from '../../../modules/GraphProps/GraphProps';
 import React from 'react';
+import searchQueryColors from '../../../modules/searchQueryColors/searchQueryColors';
 
 /**
  * Creates a pre-configured ApexCharts radar graph component. Takes in `series`, `title`, and `xaxisLabels` via `GraphProps`.
@@ -24,7 +25,7 @@ export function RadarChart(props: GraphProps) {
     xaxis: {
       categories: props.xaxisLabels,
     },
-    colors: ['#eb5757', '#2d9cdb', '#499F68'],
+    colors: searchQueryColors,
     stroke: {
       width: 2,
     },

components/graph/RadialBarChart/RadialBarChart.tsx

@@ -4,6 +4,7 @@ import { ApexOptions } from 'apexcharts';
 const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
 import GraphProps from '../../../modules/GraphProps/GraphProps';
 import React from 'react';
+import searchQueryColors from '../../../modules/searchQueryColors/searchQueryColors';
 
 /**
  * Creates a pre-configured ApexCharts radial bar graph component. Takes in `series` and `title` `GraphProps`. The `data` fields in `series` need to each be arrays with just one entry.
@@ -25,7 +26,7 @@ export function RadialBarChart(props: GraphProps) {
       },
     },
     labels: compiledLabels,
-    colors: ['#eb5757', '#2d9cdb', '#499F68'],
+    colors: searchQueryColors,
     stroke: {
       width: 2,
     },

components/graph/VerticalBarGraph/VerticalBarGraph.tsx

@@ -4,6 +4,7 @@ import { ApexOptions } from 'apexcharts';
 const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
 import GraphProps from '../../../modules/GraphProps/GraphProps';
 import React from 'react';
+import searchQueryColors from '../../../modules/searchQueryColors/searchQueryColors';
 
 /**
  * Creates a pre-configured ApexCharts vertical bar graph component. Takes in `series`, `title`, and `xaxisLabels` via `GraphProps`. This component also gets returned from a BarGraph component on a large screen.
@@ -34,7 +35,7 @@ export function VerticalBarGraph(props: GraphProps) {
         formatter: props.yaxisFormatter,
       },
     },
-    colors: ['#eb5757', '#2d9cdb', '#499F68'],
+    colors: searchQueryColors,
     stroke: {
       width: 2,
       curve: 'smooth',

modules/searchQueryColors/searchQueryColors.tsx

@@ -0,0 +1,2 @@
+const searchQueryColors = ['#eb5757', '#2d9cdb', '#499F68'];
+export default searchQueryColors;