Merge branch 'redesign-2024' into redesign/implemented-list-view

Author: sjd210

src/app/components/pages/Glossary.tsx

@@ -1,7 +1,7 @@
 import React, {useEffect, useMemo, useRef, useState} from "react";
 import {Col, Container, Input, Label, Row} from "reactstrap";
 import queryString from "query-string";
-import {AppState, useAppSelector} from "../../state";
+import {AppState, logAction, useAppDispatch, useAppSelector} from "../../state";
 import {ShowLoading} from "../handlers/ShowLoading";
 import {TitleAndBreadcrumb} from "../elements/TitleAndBreadcrumb";
 import {ShareLink} from "../elements/ShareLink";
@@ -98,6 +98,7 @@ function processQueryString(query: string): QueryStringResponse {
 const ALPHABET_HEADER_OFFSET = -65;
 
 export const Glossary = () => {
+    const dispatch = useAppDispatch();
     const location = useLocation();
     const history = useHistory();
     // query stages not used recently
@@ -121,6 +122,11 @@ export const Glossary = () => {
         )
     );
 
+    // Log on initial page load
+    useEffect(() => {
+        dispatch(logAction({type: "VIEW_GLOSSARY_PAGE"}));
+    }, []);
+
     // Update url
     useEffect(() => {
         const params: {[key: string]: string} = {};

src/scss/cs/elements.scss

@@ -15,6 +15,18 @@
   }
 }
 
+.text-theme {
+  @extend .text-secondary;
+}
+
+.bg-theme {
+  @extend .bg-secondary;
+}
+
+.border-theme {
+  @extend .border-secondary;
+}
+
 .bg-dark-pink-200 {
   background-color: $dark-pink-200;
 }