chore: upgrade paragon version to 20.12.1 (#315)

src/discussions/common/ActionsDropdown.jsx

@@ -6,7 +6,7 @@ import { useSelector } from 'react-redux';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { logError } from '@edx/frontend-platform/logging';
 import {
-  Button, Dropdown, Icon, IconButton, ModalPopup,
+  Button, Dropdown, Icon, IconButton, ModalPopup, useToggle,
 } from '@edx/paragon';
 import { MoreHoriz } from '@edx/paragon/icons';
 
@@ -23,8 +23,8 @@ function ActionsDropdown({
   disabled,
   actionHandlers,
 }) {
-  const [isOpen, setOpen] = useState(false);
-  const dropdownIconRef = React.useRef(null);
+  const [isOpen, open, close] = useToggle(false);
+  const [target, setTarget] = useState(null);
   const actions = useActions(commentOrPost);
   const handleActions = (action) => {
     const actionFunction = actionHandlers[action];
@@ -42,17 +42,17 @@ function ActionsDropdown({
   return (
     <>
       <IconButton
-        onClick={() => setOpen(!isOpen)}
+        onClick={open}
         alt={intl.formatMessage(messages.actionsAlt)}
         src={MoreHoriz}
         iconAs={Icon}
         disabled={disabled}
         size="sm"
-        ref={dropdownIconRef}
+        ref={setTarget}
       />
       <ModalPopup
-        onClose={() => setOpen(false)}
-        positionRef={dropdownIconRef}
+        onClose={close}
+        positionRef={target}
         isOpen={isOpen}
         placement="auto-start"
       >
@@ -70,7 +70,7 @@ function ActionsDropdown({
                 variant="tertiary"
                 size="inline"
                 onClick={() => {
-                  setOpen(false);
+                  close();
                   handleActions(action.action);
                 }}
                 className="d-flex justify-content-start py-1.5 mr-4"

src/index.jsx

@@ -10,6 +10,7 @@ import {
   APP_INIT_ERROR, APP_READY, initialize, subscribe,
 } from '@edx/frontend-platform';
 import { AppProvider, ErrorPage } from '@edx/frontend-platform/react';
+import { messages as paragonMessages } from '@edx/paragon';
 
 import { DiscussionsHome } from './discussions';
 import appMessages from './i18n';
@@ -37,5 +38,6 @@ initialize({
     headerMessages,
     footerMessages,
     appMessages,
+    paragonMessages,
   ],
 });

src/index.scss

@@ -227,7 +227,7 @@ header {
 
 .header-action-bar {
   background-color: #fff;
-  z-index: 2;
+  z-index: 9999;
   box-shadow: 0px 2px 4px rgb(0 0 0 / 15%), 0px 2px 8px rgb(0 0 0 / 15%);
   position: sticky;
   top: 0;